Skip to content

Instantly share code, notes, and snippets.

@abner
Forked from mlynch/generate.js
Created September 29, 2017 00:57
Show Gist options
  • Save abner/e9b9d21709ce7425278d2c89b9c301e9 to your computer and use it in GitHub Desktop.
Save abner/e9b9d21709ce7425278d2c89b9c301e9 to your computer and use it in GitHub Desktop.
Stencil component generator
/*
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