Last active
February 7, 2019 18:11
-
-
Save mlynch/34dfd6c4b8d669b92f0a9762b31108f7 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/generate.js and add | |
"st:generate": "node scripts/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 name = av[3]; | |
const componentClassName = name.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} { | |
} | |
` | |
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
Updated the script to allow a prefix to be passed in or set in the script itself. Also renamed the script to st-generate, as this seemed more appropriate. https://gist.github.com/elebetsamer/35aabac4e9e3df7e102574e4192680f1