See how Stencil fits into the entire Ionic Ecosystem ->
Stencil is part of the Ionic Ecosystem ->

カスタムドキュメントの生成

Stencilは、ユーザーが生成されたdocs-jsonデータにアクセスできる docs-customというタイトルの出力ターゲットを公開します。 この機能を使用して、カスタムマークダウンを生成したり、ビルド中にjsonデータに対して他のロジックを実行したりできます。 他のドキュメント出力ターゲットと同様に、 strictモードがサポートされています。

この出力ターゲットを利用するには、ステンシル構成に以下を追加するだけです。

import { Config } from '@stencil/core';

export const config: Config = {
  outputTargets: [
    {
      type: 'docs-custom',
      generator: (docs: JsonDocs) => {
          // Custom logic goes here
      }
    }
  ]
};

Config

プロパティ 説明 デフォルト値
generator docs-jsonデータを引数として持つ関数。
strict trueに設定すると、ドキュメントが不足している場合は常にステンシルが警告を出力します。 false

カスタムドキュメントデータモデル

生成されたドキュメントJSONデータは、Stencilコアが検出したコンポーネントとtimestampや「compiler」などのメタ情報で構成されるメインのcomponents配列で構成されるJsonDocsタイプになります。

JsonDocs

プロパティ 説明
components コンポーネント情報で構成される JsonDocsComponent[]のタイプの配列
timestamp タイムスタンプ付きの string
compiler typescriptVersioncompilerversionを持つObject

JsonDocsComponent

プロパティ 説明
dirPath コンポーネントディレクトリパス
fileName ファイル名
filePath ファイルパス
readmePath Readmeファイルのパス
usagesDir 使用ディレクトリのパス
encapsulation encapsulationタイプコンポーネント。可能な値はshadow, scoped, none
tag .tsxファイルに機銃されているコンポーネントタグ
readme コンポーネントreadmeファイルの最初の行の内容
docs @Componentの上に記述された説明。例: /** ドキュメントの例 **/
docsTags .tsxファイルに書かれた注釈(JSDocの方法で)はここに集められます
usage
props コンポーネントプロパティ情報の配列
methods コンポーネントメソッド情報の配列
events
listeners
styles
slots
parts
dependents 現在のコンポーネントが使用されているコンポーネントの配列
dependencies 現在のコンポーネントで使用されているコンポーネントの配列
dependencyGraph 結合するコンポーネントのツリーについて説明します
BackNext
Contributors