Vue-styleguidist3.0の新機能
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に問題を投稿してください。
また近いうちにお会いしましょう。