vue-styleguidist3.0の新機能

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

Vue Styleguidistは、Vueコンポーネントのドキュメントを自動的に作成するノードパッケージです。 Alex Jover Morales は、昨年Alligator.ioで発表しました。昨年2月以来、vue-styleguidistは進化してきました。

復習の時間です。

VuePressを搭載した新しいドキュメントWebサイトは、ドキュメントの作成を開始するのに役立ちます。

Vue-styleguidist 3は、パフォーマンスを大幅に向上させます。 vue-docgen-apiは完全に書き直されました。 Vue-styleguidistは現在20倍から2000倍速く実行されます。

どの機能が変更されたかを見てみましょう。

FlowおよびTypeScriptでのタイプの検出

3.0より前では、ドキュメンタはJSDocで返されるタイプと引数のタイプを指定する必要がありました。 TypeScriptまたはFlowを使用している場合は、すべて自動化されています。

// vue-styleguidist 2.0
export default {
  methods: {
    /**
      * Get the item selected in the category found
      * @param {Number} category
      * @returns {Item}
      */
    getSelectedItem(category: number): Item {
        return this.items[category]
    }
  }
}

// vue-styleguidist 3.0
export default {
  methods: {
    /**
      * Get the item selected in the category found
      */
    getSelectedItem(category: number): Item {
        return this.items[category]
    }
  }
}

JSXレンダリング機能のスロット

場合によっては、JSXrender関数でテンプレートを作成する方が簡単です。では、なぜ自動化されたドキュメントを犠牲にするのでしょうか。 3.0では、レンダリング機能でスロットを直接ドキュメント化できます。

export default {
  render() {
    return (
      <div>
        {/** @slot describe the slot here */}
        <slot name="myMain" />
      </div>
    )
  }
}

これは、JSX以外のrender関数でも有効です。

クラススタイルのコンポーネント

Vue.js 3.0の将来は、クラススタイルのコンポーネントです。このRequestforCommentsを参照してください。 VueStyleguidistが遅れるわけではありません。 Vue-styleguidist 3.0は、Vueクラスコンポーネントをサポートするようになりました。

/**
 * Describe your components here
 */
export default class MyComponent extends Vue {
  /**
   * An example of a property typed through the annotation
   */
  @Prop() myProp: number = 0;
}

フラグを立てるミックスインはもうありません

バージョン2では、ドキュメンターは各ミックスインにタグ@mixinのフラグを立てる必要がありました。そうでない場合、vue-styleguidistにはミックスインの小道具のドキュメントがありませんでした。バージョン3.0以降、このタグ付けは不要になりました。

// vue-styleguidist 2.0
/**
 * @mixin
 */
export default {
  props:{
    size: Number
  },
  computed:{
    sizeClass(){
      return `size-${this.size}`;
    }
  }
}

// vue-styleguidist 3.0
export default {
  props:{
    size: Number
  },
  computed:{
    sizeClass(){
      return `size-${this.size}`;
    }
  }
}

機能テンプレートからのプロップ抽出

Vue 2.5では、機能テンプレート、機能コンポーネントをレンダリングするためのテンプレートが導入されました。 propsの定義は、従来のコンポーネントとは少し異なります。 Styleguidist 3.0は、この構文も理解して文書化するようになりました。

<template functional>
  <button :style="`width: ${props.size}px;`">
    {{props.name}}
  </button>
</template>

イベントの自動検出

v2.0では、ドキュメンターはvue-styleguidistに発行されたすべてのイベントを指示する必要がありました。彼らが1つを忘れた場合、それはドキュメントに表示されません。 3.0では、安心して、イベントが検出され、デフォルトですぐに文書化されます。それらが無関係であると判断した場合は、それらを無視できます。

// vue-styleguidist 2.0
export default {
  //...
  methods:{
    /**
     * When submission is sucessful
     * @event success
     */
    submit(){
      this.$emit('success')
    }
  }
}

// vue-styleguidist 3.0
export default {
  //...
  methods:{
    submit(){
      /**
        * When submission is sucessful
        */
      this.$emit('success')
    }
  }
}

vue-styleguidist 3.0では、eventとdescriptionは、JSDocのように連続した行にある必要があることに注意してください。この制約は2.0にはありませんでした。

外部スクリプトとテンプレート

最後に、vue-styleguidist 3.8は、インポートされたテンプレートおよびスクリプトとの互換性をもたらしました。ドキュメンタは、次のように記述された単一ファイルコンポーネント（SFC）を持つことができます。

<template src="./template.html"/>
<script src='./script.ts'/>

.vueファイルと同じ方法でスクリプトとテンプレートを文書化します。 Vue-styleguidistはJSDocを解析して表示します。

まとめ

この新しいリリースを気に入っていただければ幸いです。可能な限り多くのニーズに対応できるよう、多大な努力を払っています。

質問、提案、問題、コメントがある場合は、 Vue Styleguidistmonorepoに問題を投稿してください。

また近いうちにお会いしましょう。

getdocs

13036