-
-
Save elebetsamer/35aabac4e9e3df7e102574e4192680f1 to your computer and use it in GitHub Desktop.
Stencil component generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
To setup, place in scripts/st-generate.js and add | |
"st:generate": "node scripts/st-generate.js" | |
To your npm scripts. | |
To generate a component in src/components/ run | |
npm run st:generate component my-component | |
*/ | |
const fs = require('fs'); | |
const capitalize = s => s.charAt(0).toUpperCase() + s.substr(1); | |
const av = process.argv; | |
const type = av[2]; | |
const prefix = av[4] || ''; | |
const name = `${prefix}${av[3]}`; | |
const componentClassName = name.replace(prefix, '').split('-').map(p => capitalize(p)).join(''); | |
const jsTemplate = ` | |
import { Component } from '@stencil/core'; | |
@Component({ | |
tag: '${name}', | |
styleUrl: '${name}.scss' | |
}) | |
export class ${componentClassName} { | |
render() { | |
return (<slot />); | |
} | |
} | |
` | |
const scssTemplate = ` | |
${name} { | |
display: block; | |
} | |
` | |
const outPath = `src/components/${name}`; | |
try { | |
fs.mkdirSync(outPath); | |
} catch(e) { | |
console.error('Unable to create component') | |
throw e; | |
} | |
try { | |
fs.writeFileSync(`${outPath}/${name}.tsx`, jsTemplate.trim()); | |
fs.writeFileSync(`${outPath}/${name}.scss`, scssTemplate.trim()); | |
} catch(e) { | |
console.error('Unable to create source files'); | |
throw e; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment