Skip to content

Instantly share code, notes, and snippets.

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';
tag: '${name}',
styleUrl: '${name}.scss'
export class ${componentClassName} {
render() {
return (<slot />);
const scssTemplate = `
${name} {
const outPath = `src/components/${name}`;
try {
} 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;

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.

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.