hygen 使ってみた

インストール

yarn add hygen --dev

npm の場合は npm install --save-dev してください。devDependencies に入れます。bundle 時に入っていてもうれしくないので。

hygen を使ってみる

yarn hygen init self

このコマンドを使うと、テンプレートのジェネレータが生成されます。

yarn hygen generator with-prompt component

さらに、このコマンドで _templates/components 以下にファイルが生成されます。生成されたファイルたちを使ってコード生成を行います。

テンプレートの .t ファイルと .js を書き換える

_template/components/story/prompt.js

module.exports = [
  {
    type: 'input',
    name: 'name',
    message: "ファイル名を入力"
  },
]

_template/components/story/component.t

---
to: src/components/<%= name %>.stories.ts
---
import { defineComponent } from 'vue';
import <%= name %> from './<%= name %>.vue';

const meta = {
  title: 'components/<%= name %>',
  component: <%= name %>,
};

export const Default = {
  render: () => defineComponent({
    components: {
      <%= name %>,
    },
    template: `
      <<%= name %> />
    `,
  })
};

export default meta;

こっそり、ディレクトリ名を with-prompt から story に変更しました。コード生成時には story という識別子を使うことができます。
見ての通りのテンプレートエンジンで、今回は Storybook のストーリーを生成するように書きました。

prompt.js は対話的生成に使えます。

対話的生成

$ yarn hygen component story
> ✔ ファイル名を入力 · hoge

> Loaded templates: _templates
>        added: src/components/hoge.stories.ts

yarn hygen component {コンポーネントの名前} で生成が始まります。

おわり

願わくば設計資料からそのままコンポーネントが生成されるようになってほし。。。