Stencil Generate Script

st-generate.js

/*
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, h } from '@stencil/core';

@Component({
  tag: '${name}',
  styleUrl: '${name}.scss'
  // shadow: true
})
export class ${componentClassName} {
  protected render() {
    return (<slot />);
  }
}


`;

const connectedTemplate = `
import { Component, h, Prop, State } from '@stencil/core';
import { Store, Unsubscribe } from '@stencil/redux';

import { GlobalStoreState } from '../../redux/store';

@Component({
  tag: '${name}',
  styleUrl: '${name}.scss'
  // shadow: true
})
export class ${componentClassName} {
  @Prop({
    context: 'store'
  })
  private store: Store;
  protected storeUnsubscribe: Unsubscribe;

  @State()
  protected myConnectedProp: any;

  protected componentWillLoad(): void {
    this.storeUnsubscribe = this.store.mapStateToProps(this, (state: GlobalStoreState): {} => {
      return {
        myConnectedProp: state.forms
      };
    });

    // // Map store actions to component methods
    // this.store.mapDispatchToProps(this, {
    //   create: ...
    // });
  }

  protected componentDidUnload() {
    // d('componentDidUnload');
    this.storeUnsubscribe();
  }

  protected render() {
    return (
      <slot />
    );
  }
}

`;

const scssTemplate = `
${name} {
  // display: block;
}
`;

const functionalComponent = `
import { FunctionalComponent, h } from '@stencil/core';

interface ${name}Props {
    name: string;
}

export const ${name}: FunctionalComponent<${name}Props> = ({ name }: ${name}Props, children: any): any => [
    <h1>${name}, {name}!</h1>,
    children
];
`;

const outPath = `src/${
  type === 'functional' ? 'functional/' : 'components/'
}${name}`;

try {
  fs.mkdirSync(outPath);
} catch (e) {
  console.error('Unable to create component');
  throw e;
}

function getTemplate(type) {
  switch (type) {
    case 'connected':
      return connectedTemplate.trim();

    case 'functional':
      return functionalComponent.trim();

    default:
      return jsTemplate.trim();
  }
}

try {
  fs.writeFileSync(`${outPath}/${name}.tsx`, getTemplate(type));
  type !== 'functional' &&
    fs.writeFileSync(`${outPath}/${name}.scss`, scssTemplate.trim());
} catch (e) {
  console.error('Unable to create source files');
  throw e;
}