Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@elebetsamer

This comment has been minimized.

Copy link

elebetsamer commented Sep 30, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.