＃1870と＃3423に複製します。 そこで議論を続けましょう

現在のステンシルとSB5用の新しいスタータービルドを作成します

@ Edd-Stricklandはstenclサポートバージョンで作業したい🎉

ステンシル付きのポリマースターターを最新バージョンのSBにアップグレードしました。ポリマーを削除し、ステンシルコンパイラーを追加するのに助けが必要です。

やあ、

@ Edd-Strickland情報のために、このプロジェクトでは、スターターで行ったようにStorybook内にStencilを実装しました： https ：

StorybookのHTMLスターターを使用しました。

今のところStorybook＆Stencilで、私はただしなければなりませんでした：

• ステンシルによって生成された各ルートJavaScriptファイルを指すカスタムヘッダーを追加します
• ステンシルによって生成された静的ファイルをストーリーブックに追加します

私が思う主な問題は、ストーリー内にインポートされたJavaScriptファイルを処理するためのStorybookによるWebpackの使用です。 理想的なワークフローは、WebコンポーネントのJSファイルのみをインポートすることです。

ええ、これは以前に行ったことですが、ポリマーバージョンでは、これが意味するのは、プレーンな静的W / C実装としてインポートすることで、制限を感じるストーリーに毎回更新する必要があるということです。

こんにちはすべて、私はステンシルcomponentタイプのプロジェクトにインストールできるラッパーを作成しました。 それが役に立てば幸い。 https://github.com/nisheed2440/stencil-storybook-wrapper

月曜日にテストします。 よくできました ：）

これはストーリーブックの公式部分になりますか？ 私はこれを切実に必要としています！

@otw私たちは試みています、あなたは私たちを助けることができますか？

@ndelangen物事をテストし、フィードバック/バグレポートを提供さ

これはLitElement（および一般的なWebコンポーネント）で機能しますか、それともステンシルだけで機能しますか？

@ nisheed2440あなたのラッパーは有望なようです、私はこれをすぐにテストします！ しかし、Storybookによって文書化された「ネイティブ」統合があることは素晴らしいことかもしれません👌

@ nisheed2440私はとても忙しかったです（みんなごめんなさい）が、今日はこれの非常にバニラバージョンをローカルでテストするための非常に小さなウィンドウがありました、そしてそれは本当に良いです。 本当にうまくいきます。

来週、それを既存のプロジェクトに組み込んで、これが既存のステンシルユーザー/プロジェクトでどのように機能するかを確認するために時間を費やす予定です。

私は今朝それをテストしました、そしてそれもかなりうまくいきます！ GJセットアップは本当に簡単です。 私はいくつかのアドオンをインストールしてテストしました：

import '@storybook/addon-backgrounds/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';

すべてが正常に機能し、アドオンノブで1つの問題が見つかりましたhttps://github.com/storybooks/storybook/issues/5017しかし、回避策があり、これはすぐに修正されるはずです。

私は過去2週間、StencilJSとStorybookで遊んで、自分のソリューションをカバーするライブストリームを行いました。 もっと良い方法があると思いますが、HMRを入手することができ、ほとんどのプラグインはほとんど問題なく動作しました。 ディストリビューションステンシルバンドルからローダーを改善またはインポートする方法について、フィードバックをお寄せください。

https://www.youtube.com/watch?v=XwHtPw3izLE

そして、これがレポです！ ^ _ ^
https://github.com/MadnessLabs/enjin-components

@ nisheed2440こんにちは、私はあなたと非常によく似たアプローチを使用しており、すべてが色彩を期待して機能しています。 ステンシル/ストーリーブックで色彩作品を作ることができましたか？
実行すると、すべてのストーリーが検出されますが、すべてのスクリーンショットは空です。 クロマチックサーバーでコンポーネントのスクリーンショットをレンダリングしようとすると、おそらくステンシルが欠落しています

@ nisheed2440この本当に素晴らしい努力に感謝します。 うまくいけば、これはここのチームに正しい方向への有利なスタートを与えるでしょう。 ステンシルとストーリーブックはお互いに理想的です。

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、助けが必要な場合はプルリクエストを送ってください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

誰かがこれを拾いたいですか？

私のチームは、共通コンポーネントライブラリにStencilJS + Storybookを使用しており、貢献したいと思っています。 たぶん私たちの何人かはこのことを軌道に戻すことができます...

https://twitter.com/dboskovic/status/1120336958008348672など、多くの関心があるようです

簡単な勝利の1つは、 @ popcorn245の構成をストーリーブックプリセットにパッケージ化する@storybook/preset-stencilパッケージを公開することです。 そのためのドキュメントを完成させる必要がありますが、次のStorybook Docsリリースで使用しており、簡単で、ほとんどのSB構成が将来どのように機能するかを示しています。

それを手に入れたい人は誰でも喜んで案内します。

ちょっと@shilman 、とても多くの人々がこれを興奮していることに興奮しました。 そのスレッドには私が見つけたいくつかの良い点がありますが、ノブを使用するために要素の文字列を返さなければならないなど、さらに多くの小さなバグがあります。

はるかに優れた実装は、Stencilコンパイラから便乗し、Reactコンポーネントと同様にJSXの使用を可能にしますが、それはMHOです。

また、Stencil Oneはいくつかの大きな変更を加えて削除されようとしているため、この変更ログにのぞき見を入れて、これに取り組んでいる人がパイプラインで何が起こっているかを認識できるようにすることをお勧めします。

https://github.com/ionic-team/stencil/blob/core-refactor/BREAKING_CHANGES.md

このスレッドは、特に@ popcorn245の構成に非常に役立ちました。 個人的に私は@stencil/state-tunnelを使用していましたが、これはその構成を壊しました。 幸いなことに、次のコマンドを実行することで、いくつかのマイナーな〜ハック〜の調整で動作させることができました。

npm i -D [email protected]

そしてこれを.storybook/webpack.config.js追加します：

const { existsSync, readdirSync } = require('fs');
const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = ({ config }) => {
  // 1. Transpile <strong i="11">@stencil</strong> modules with Babel
  const babelLoader = config.module.rules.find(
    ({ use }) => use && use[0].loader === 'babel-loader'
  );
  babelLoader.exclude = [/node_modules\/(?!\@stencil).*/];
  if (babelLoader.use[0].options) {
    babelLoader.use[0].options.plugins = ['@babel/plugin-syntax-dynamic-import'];
  }

  // 2. Load JS & CSS from our components
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.js'));
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.css'));

  const components = resolve(__dirname, '..', 'dist', 'collection', 'components');
  readdirSync(components).map(file => {
    jsFilePath = resolve(components, file, `${file}.js`);
    try {
      if (existsSync(jsFilePath)) config.entry.push(jsFilePath);
    } catch (err) {
      console.error(err);
    }

    cssFilePath = resolve(components, file, `${file}.css`);
    try {
      if (existsSync(cssFilePath)) config.entry.push(cssFilePath);
    } catch (err) {
      console.error(err);
    }
  });

  // 3. Fix dynamic imports for Storybook
  // IMPORTANT: webpack must be at 4.28 due to a bug. See here: https://github.com/webpack/webpack/issues/8656
  config.plugins.push(
    new CopyPlugin([
      {
        from: resolve(__dirname, '..', 'dist'),
        to: resolve(__dirname, '..', 'node_modules', '<strong i="12">@storybook</strong>', 'core', 'dist', 'public'),
      },
    ])
  );

  return config;
};

これについても実験を開始し、（他の場所で述べたように） concurrentlyと、（今のところ）問題なく動作するようです。 ステンシルとストーリーブックの両方を使用して起動して実行するために必要なすべてを含むクイックスタータープロジェクトを作成しました。 すでに最新のステンシルリリースを使用しています。

ここでそれをチェックしてください： stencil-storybook-starter

@ fvaldes33いいね！ スター付き。 実際にStencilOneベータ版に更新したところ、設定は似ています。基本的に、ストックWebpackセットアップを完全に使用できます。

私にとっての唯一の違いは、ビルド時間が非常に速く、Stencilでprodバージョンを使用する方が簡単であるため（特にグローバルスタイルやその他のインポートで）、 stencil build --watch （devではなくprod）を使用することでした。

@ fvaldes33このようにpreview-head.htmlでbuild / components.jsをどのように参照できますか？ フルパスを指定する必要があります（例： http：// localhost ：3333 / build / components.js）。 しかし、私はそれをする必要はありません。

（私はあなたのスターターを使用していませんが、新しいstorybook / htmlインストールでステンシルコンポーネントスターターを使用しています）

編集：
wwwフォルダではなくポート6006でストーリーブックを開始していることに気づきました。 問題が解決しました！

私たちの多くが同様の解決策を持っているようです（私を含むhttps://github.com/jagreehal/stencil-boilerplate）が、ステンシルコンポーネントを編集するときにホット/ライブアップデートが本当に欲しいです。 現在、ストーリーブックをリロードするには、ブラウザを手動で更新する必要があります。

これを完了するための要件の箇条書きリストはありますか？ 何を構築する必要があるかを知っていれば、喜んで提案します。

現在の状態はどうですか？ 貢献できますか？ これが見たいです！

上記のプリセットを提供することを提案しました。

• プリセットはここに文書化されています： https ：
• ここにコミュニティプリセットのリポジトリがあります： https ：

誰かが上記のパターンに基づいてプリセットを作成したい場合は、ストーリーブック側で喜んでお手伝いします。 私はステンシル側に精通していません。

私は自分のプロジェクトを欲しい人のためにそこに投稿しました。 機能は次のとおりです。

• ストーリーの自動生成
  
  
  
  • コンポーネント上のすべての@Props自動ノブ生成
  
  
  • 各小道具に使用するノブをカスタマイズする機能（ただし、コードは文字列、数値、ブール値、オブジェクト、日付、および色を推測するのに適しています）。
  
  
  • 単一のページにレンダリングされる複数の状態を定義する機能。それぞれにタイトル、説明、コピー可能なコードスニペットが含まれます（軽量の章の実装の一種）
  
  
  • 各コンポーネントのメモを定義する機能（通常、生成されたreadmeが必要です）
  
  
• ステンシルコンポーネントのライブ再構築/リロード（まだ少し不安定です-ブラウザを更新する必要がある場合があります）
• ビューポートアドオンが付属しています

ご意見をお聞かせください： //github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyxこれはよさそうだ。 これについてツイートし、 @storybookjs言及すると、ストーリーブックアカウントからRTします。 そして、あなたがそれについての投稿を書きたいのであれば、私はあなたと一緒にそれを公表するために喜んで働きます。 ここにはかなり大きな需要があると思います。

素晴らしい仕事@DesignByOnyx ！ これはプリセットに完全に適合しているようです：tada：

OK、ツイートしました（ツイッターはあまりしません）。 さらに、私はブログを持っていません：/、しかし誰かがそれを公開したいなら、私は何かをまとめてうれしいです。

プロジェクトが機能している間、私は急いでそれを一緒に投げました、そして本当にカスタマイズするのを簡単にしませんでした。 個々のコンポーネントをレンダリングするために複数のファイルをロードしてマージする必要があるため、そこにあるコードの一部は非常に脆弱です。 これをより使いやすくするために時間を費やす前に、いくつかのフィードバックを期待しています。

プリセットがどのように表示されるのか知りたいです。 素晴らしいのは、反応しないJSXプリセットです。 これにより、storybook-htmlの多様性に加えて、レンダリングとテンプレートの生成が少し簡単になり、ステンシルとはあまり関係がありません。 これを使用可能にするには、いくつかのアドオンも更新する必要がありますが、その取り組みを調整するのに最適かどうかはわかりません。 いずれにせよ、私に何ができるか教えてください。

@DesignByOnyxあなたが私たちの不和にhttps://discordapp.com/invite/UUt2PJb

この作品をStorybookブログで公開したり、ステンシルコミュニティで宣伝したりする方法についてもっとお話ししたいと思います。

私はステンシルのために@storybook/htmlで遊んでいて、その経験はほとんど「うまくいく」。 基本的に次のことを行います。

1. concurrentlyを使用してStorybookサーバーを起動し、 stencil build --watch 「並行して」起動します
2. storybookを-s distフラグで開始して、ステンシルdistが静的ファイルとして提供されるようにします。

3. 次のようなスクリプトタグを含めるように.storybook/preview-head.htmlを構成します。

   <script type="module" src="/$PACKAGE_NAME/$PACKAGE_NAME.esm.js"></script>
   <script nomodule="" src="/$PACKAGE_NAME/$PACKAGE_NAME.js"></script>
   

以上です！ すぐに使用できるhtmlサポートは、すべてのWebコンポーネントのニーズに対応します。

私が見たいのは、ストーリーオーサリング側のhtmlパッケージと同じエクスペリエンス（およびコード）を持つ@storybook/stencilようなものですが、

1. ストーリーブックの一部としてステンシルビルドプロセスを実行することを要約し、 concurrentlyを構成する必要がないようにします
2. それらのscriptタグを追加します
3. ステンシルコンポーネントが再構築されるときに自動更新をフックアップします

そのようなことに興味はありますか？ 私はステンシルとストーリーブックで会社を売却している最中です。それが勢いを増すと仮定すると、ストーリーブックとステンシルを一緒にプレイすることで、そのストーリー（駄洒落を許します）を本当に素晴らしいものにするための「作業時間」があります。

@DesignByOnyxが行った作業は本当に素晴らしいですが、そのキットを使用してステンシルコンポーネントを「開始」し、ステンシルの「通常の」ドキュメントを無視する必要があります。 Storybookが、「通常の」ステンシルスターターキットの上に重ねることができるパッケージを提供できる場合は、Storybook構成を既存のステンシルコンポーネントのセットに簡単に追加できます。

素晴らしい要約@alexlafrosciaをありがとう。 あなたの提案は非常に理にかなっていると思います。 ステンシルが再構築されたときにHMRが自動的に起動しませんか？ もしそうなら、なぜそうではないのですか？

@ igor-dvプリセットのpreview-head.htmlに追加することは可能ですか？

@Hypnosphi多分これはあなたのマルチフレームワークの努力の興味深い例です。 この場合、デコレータは（明らかに）必要ありませんが、コンパイラ全体が必要です。

@alexlafrosciaあなたの場合、ストーリーの例はどのように見えますか？

私が働いている会社では、StorybookHTMLおよびStencilJSパッケージでしばらく遊んでいます。 喜んで貢献させていただきます！

@alexlafroscia非常に素晴らしいアイデアです。確かに、このコンパイラを完全にサポートするのは素晴らしいことです。 他のアイデアは次のとおりです。

• StencilJS JSX機能（現時点ではPreactに基づく）を使用して、より保守しやすい方法でストーリーを作成します。 プレーンな古いJSやテンプレートリテラルを使用するのは面倒かもしれません...
• Webコンポーネント用のSmartKnobsアドオンがあります。 @DesignByOnyxは、このための優れた基盤を提供しました。

この記事では、StencilJSの進行中のロードマップ： 2019年秋のステンシルロードマップについて説明します。 特に：

パブリックコンパイラAPI

私たちが焦点を当てているもう1つの分野は、コンパイラーがブラウザー内で動作し、他のツールで使用できるようにすることです。 Stackblitz、CodeSandbox、WebComponents.devなどのいくつかの素晴らしいチームとすでに協力してきました。 最下位レベルでは、コンパイラはNodeJS環境上で実行しなくてもすでに動作しているため、技術的にはこれは主要なリファクタリングではありませんが、それ以上に、正しいAPIを公開するだけです。

また、Rollup、Parcel、WebPack、Bazelなどの他のNodeJSツールでコンパイラーを簡単に使用できるようにするための改善点も数多く見られます。 オンラインツールであれNodeJS環境であれ、ツールの保守者であり、ステンシルコンパイラの実装を検討している場合は、お気軽にご連絡ください。喜んでサポートさせていただきます。

役に立つかもしれません！

ステンシルが再構築されたときにHMRが自動的に起動しませんか？ もしそうなら、なぜそうではないのですか？

@shilman私が持っているセットアップでは、StorybookとStencilの間に「実際の」接続がないため、<script>タグです。

あなたの場合、物語の例はどのように見えますか？

@Hypnosphiこれらは次のようになります（ npm init stencilときに作成する初期パッケージでStencilが生成するデフォルトのmy-componentストーリー

import { document, console } from 'global';
import { storiesOf } from '@storybook/html';

storiesOf('My Component', module)
  .add('without a middle name', () => `
    <my-component
      first="Alex"
      last="LaFroscia"
    ></my-component>
  `)
  .add('with a middle name', () => `
    <my-component
      first="Alex"
      middle="Robert"
      last="LaFroscia"
    ></my-component>
  `);

StencilJS JSX機能（現時点ではPreactに基づく）を使用して、より保守しやすい方法でストーリーを作成します。 プレーンな古いJSやテンプレートリテラルを使用するのは面倒かもしれません...

@darondelストーリーオーサリングファイルにJSXが含まれていないという開発者の経験に関する懸念に完全に同意します。 私は過去に@storybook/htmlが利用可能になる前にそのアプローチを使用し、問題のないReactエクスペリエンスを使用しました。

物事を「デフォルト」のhtmlエクスペリエンスにできるだけ近づけたいということの一部は、ストーリーがHTMLの観点から実際にそれらを使用する方法に関するドキュメントとして機能するようにすることです。少なくとも私の組織では、他の場所では使用されていません（私たちは主にEmber.jsショップです）。

テンプレートタグは素晴らしい体験ではないとおっしゃいましたが、 htmようなものが良い選択肢になると思います。 また、必要なビルドステップがないため、ビルドプロセスが素晴らしくシンプルに保たれますが、ノブなどとの対話が容易になる可能性があります。

また、次のDocsPageのようなものと統合しようとするのも面白いかもしれないと思っていました！ @DesignByOnyxによってすでに行われている作業の一部がここで役立つ可能性があるので、ステンシルコンポーネントの「メタデータ」を読み取ってドキュメント情報を自動的に生成する思います。 おそらく「v1」の懸念ではありませんが、「v1.1」を見るのは本当にクールなことです。 そのオートノブアドオンのようなものを作るというあなたのアイデアも本当に好きです、それは本当に便利でしょう！

本日Storybook5.2でリリースされたDocsPagesを使用して、小道具などに関する情報をステンシルから取得してStorybookにレンダリングできるかどうかを調査しました。 可能だと思いますが、Storybook with Stencilを使用して、それに必要な「接着剤」の束を収容するように調整されたアドオンまたはプリセットを用意することがどのように役立つかを明確に強調しています。

今週はもう少し物事をいじって、何かをまとめることができるかどうかを確認します。

@alexlafrosciaは、さまざまなフレームワークがこのデータを通信する方法を標準化したいと考えています。 Jetbrains（web_types？cc @elevatebart ）から何か面白いものを見たことがあります。また、 @ atanassterもこの領域で、パフォーマンスのためにJSONファイルにpropタイプをキャッシュする作業を行っています。 6.0でこれらすべてを統合する必要があると思います

私はJetbrainsの仕事に精通していません-私はそれをチェックする必要があります！ レビューに役立つ具体的な情報があれば、私の方法で送っていただければ幸いです。

Stencilの場合、「最善の策」は、StencilビルドプロセスでJSONドキュメントをStencilStorybookアドオンでよく知られている場所または構成可能な場所に出力することです。 そのオブジェクトには、予想される小道具、放出されたイベント、および各コンポーネントのreadmeファイルの内容に関するすべての情報が含まれています（自動生成された小道具のドキュメントは含まれていません）。 StorybookDocsPageにそのJSONファイルからの情報を入力するための本当に説得力のあるストーリーを構築できると思います。

{
  "timestamp": "2019-09-18T14:30:38",
  "compiler": {
    "name": "@stencil/core",
    "version": "1.3.2",
    "typescriptVersion": "3.5.3"
  },
  "components": [
    {
      "tag": "fluid-banner",
      "encapsulation": "shadow",
      "readme": "# fluid-banner\n\nThis is the contents of the README!\n",
      "docs": "This is the contents of the README!",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    },
    {
      "tag": "fluid-button",
      "encapsulation": "shadow",
      "readme": "# fluid-button\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "destructive",
          "type": "boolean",
          "mutable": false,
          "attr": "destructive",
          "reflectToAttr": false,
          "docs": "Whether to display in the `destructive` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "Whether the button should be treated as `disabled`",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "plain",
          "type": "boolean",
          "mutable": false,
          "attr": "plain",
          "reflectToAttr": false,
          "docs": "Whether to display in the `plain` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "primary",
          "type": "boolean",
          "mutable": false,
          "attr": "primary",
          "reflectToAttr": false,
          "docs": "Whether to display in the `primary` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"large\" | \"medium\" | \"small\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The size to display the button",
          "docsTags": [],
          "default": "\"medium\"",
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    }
  ]
}

これは一種のハックです（JSON出力をdist/output.jsonに書き込んでから、 fetchを使用してファイルを取得します）が、オーバーライドするだけでStorybookコンポーネントのDocsPageレンダリングを取得できました。 DocsPageコンポーネントが取ることができるスロット小道具。

小道具の表は完璧ではありませんが、かなり良いです。 ステンシル出力は、テーブルが期待するすべての小道具を提供し、次にいくつかを提供します。 コンポーネントのreadme.mdにあるものはすべて、ファイルの先頭にレンダリングされます。

import React, { useContext, useEffect, useState } from "react";
import { DocsPage, DocsContext } from "@storybook/addon-docs/blocks";

export const StorybookDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return null;
  }

  const component = payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );

  // Empty because we will use the whole component README
  const titleSlot = () => "";
  const subtitleSlot = () => "";

  const descriptionSlot = () => component.readme;
  const propsSlot = () => ({
    rows: component.props.map(prop => ({
      name: prop.name,
      type: prop.type,
      description: prop.docs,
      required: prop.required,
      defaultValue: prop.default
    }))
  });

  return React.createElement(
    DocsPage,
    { titleSlot, subtitleSlot, descriptionSlot, propsSlot },
    null
  );
};

更新：さらに一歩進んで、カスタムスタイルのドキュメントを含む2番目のテーブルを取得するために、（スロットをオーバーライドするだけでなく）カスタムDocsPage全体を定義しました。

import { createElement as e, useContext, useEffect, useState } from "react";
import { DocsPage, PropsTable } from "@storybook/components";
import { H2, H3 } from "@storybook/components/html";
import {
  Anchor,
  Description,
  DocsContext,
  Preview,
  Story
} from "@storybook/addon-docs/blocks";

function useStencilComponent() {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return undefined;
  }

  return payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );
}

const DocsStory = ({
  id,
  name,
  expanded = true,
  withToolbar = false,
  parameters
}) =>
  e(
    Anchor,
    { storyId: id },
    expanded && e(H3, null, (parameters && parameters.displayName) || name),
    expanded &&
      parameters &&
      parameters.docs &&
      parameters.docs.storyDescription &&
      e(Description, { markdown: parameters.docs.storyDescription }, null),
    e(Preview, { withToolbar }, e(Story, { id, height: "auto" }, null))
  );

export const CustomDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const component = useStencilComponent();
  if (!component) {
    return null;
  }

  const { selectedKind, storyStore } = docsContext;
  const stories = storyStore.getStoriesForKind(selectedKind);
  const [primary, ...otherStories] = stories;

  const propDocs = component.props.length
    ? [
        e(H2, null, "Props"),
        e(
          PropsTable,
          {
            rows: component.props.map(prop => ({
              name: prop.name,
              type: prop.type,
              description: prop.docs,
              required: prop.required,
              defaultValue: JSON.parse(prop.default)
            }))
          },
          null
        )
      ]
    : [];

  const styleDocs = component.styles.length
    ? [
        e(H2, null, "Styles"),
        e(
          PropsTable,
          {
            rows: component.styles.map(style => ({
              name: style.name,
              description: style.docs
            }))
          },
          null
        )
      ]
    : [];

  const additionalStories = otherStories.length
    ? [
        e(H2, null, "Stories"),
        ...otherStories.map(story =>
          e(
            DocsStory,
            { key: story.id, ...story, expanded: true, withToolbar: false },
            null
          )
        )
      ]
    : [];

  return e(
    DocsPage,
    null,
    e(Description, { markdown: component.readme }, null),
    e(
      DocsStory,
      { key: primary.id, ...primary, expanded: false, withToolbar: true },
      null
    ),
    ...propDocs,
    ...styleDocs,
    ...additionalStories
  );
};

カスタムページでは、各ストーリーのデフォルトの高さが500pxに設定されているという事実も修正されています。これは、高すぎます😅

@alexlafrosciaこれはすごい、すごい仕事です！

参考までに、5.3で小道具テーブルのものを一般化するつもりです。 具体的には、Vueのようなフレームワークにはスロットとイベントの概念があるため、それらを独自のテーブルに分割する必要があります。 たぶんあなたのスタイルの仕事は同じメカニズムを使うことができます。 https://github.com/storybookjs/storybook/issues/8123

私が参照していたJetbrainsプロジェクトはこれです（cc @piotrtomiak）： https ：

私はそれを詳細に調べていません、そしてそれが私たちにとって正しいかどうかわかりません。 ただし、それが私たちのユースケースを満たし、余計な手間があまりかからない場合は、独自の標準を発明するのではなく、既存の標準を使用したいと思います。

@shilmanメタデータ情報交換の標準をWebコンポーネントライブラリに導入するための（JetBrains）の取り組みをweb-types標準はかなり新鮮ですが、Vueコミュニティとユーザーからいくつかの肯定的なフィードバックをすでに聞いています。 私はVueコミュニティで仕様を積極的に宣伝していますが、他のコミュニティから関心を引くのはとても素晴らしいことです。

web-types JSONスキーマに欠けているものがあるかもしれません。これはフレームワークに固有であり、それらを仕様に追加できます。 Vue固有のアイテムには、たとえばvueプレフィックスが付いています。 また、CSSサポートを文書化するためのセクション全体が欠落しています。 したがって、 web-typesにチャンスを与える価値があると感じた場合は、問題を報告したり、不足している機能のPRを作成したりしてください。

コンポーネントをweb-types形式で文書化することの副作用は、開発者がプロ​​ジェクトにライブラリを含める場合に、優れたコード補完になります。 近い将来、すべてのフレームワークに共通のweb-types機能に基づいて、このような一般的なサポートを実装することを計画しています。 私は、フォーマットのより大きなコミュニティの受け入れにより、他のIDEがフォーマットのサポートをフォローし、それがすべての人に利益をもたらすと確信しています:)

@alexlafroscia素晴らしい仕事！ ステンシルとストーリーブックの統合（https://github.com/storybookjs/storybook/issues/7644と一緒に）は見栄えが良いです

その問題にリンクしていただきありがとうございます！ 私はもともと同様の道をたどりました（既存のREADMEファイルを何らかの方法で使用してDocsPageに直接プルしようとしました）が、最終的には、テーブルが_含まれていない_ため、StencilがドキュメントJSONファイルに配置したデータを使用する方が簡単であることがわかりました小道具とすべてのもの（そのデータはJSONファイルの他の場所にあり、構造化データはからカスタムテーブルを作成するのに最適であるため）。

@alexlafroscia調査結果を共有していただきありがとうございます。 CustomDocsPageをデバッグするにはどうすればよいですか？

addParameters追加してみましたが、カスタムではなくデフォルトを使用しているようです。

import { configure, addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

import { CustomDocsPage } from './docs.jsx';

addParameters({
  options: { theme: themes.dark },
  docs: { page: CustomDocsPage }
});

configure(require.context('../src', true, /\.(story|stories)\.(mdx)$/), module);

### Web Component
<Story name="WC">
    <component-name name="test"></component-name>
</Story>

CustomDocsPageを使用しなくても、WC自体はストーリーブックのドキュメントページに読み込まれます。
コンポーネントをデバッグする方法はありますか？ ログを追加してみましたが、何も表示されません。

前もって感謝します。

私もその問題に遭遇しました-「コンポーネント」レベルでDocsPageコンポーネントをオーバーライドする必要がありました

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replacing -docspage

@storybook/htmlをjsxで動作させることは可能ですか？ ステンシルコンポーネントのストーリーを書くのがはるかに簡単になります。 入力してオートコンプリートし、 document.createElementや大きなテンプレート文字列を使用する必要はありません。 reactパッケージを使用して上部に// @jsxを付けてtypescriptをだまそうとしましたが、うまくいきませんでした。

@vidarcあなたがそれをしたときのエラーは何でしたか？ カスタムのbabel設定はありますか？

あまりカスタマイズしていません。 Webpackにいくつか追加されました。 最初のtypescriptはCannot find name 'h'について文句を言います。 私のtsconfigにはjsx = reactとjsxFactory = hがあります。 上部の// <strong i="6">@jsx</strong> hプラグマ設定を使用してこれらの警告を消すことができますが、DOMノードまたは文字列を返さないためにストーリーブックエラーが発生します。

試してみる： https ：

編集：jsxでうまく機能します。 それをtypescriptで動作させる方法を理解することはできませんが：/

@vidarc hがハイパースクリプトを表す場合、文字列でもDOM要素でもないカスタムオブジェクトを返します

vhtmlは行く方法のようです

参考までに、 web-componentsアプリの着信PRがあります： //github.com/storybookjs/storybook/pull/8400

ここの誰かが、それがこの問題とどのように交差するかについてコメントできますか？ @vidarc @DesignByOnyx @ Edd-Strickland @alexlafroscia @daKmoR

＃8400はまだテストしていませんが、テストする前に、次の方法で「ライブ」ステンシルを動作させることができました。

1. 1つのウィンドウでstart-storybook -s ./wwwを実行します。
2. 別の場所でstencil build --dev --watchを実行します。
3. .storybook/config.tsを更新して、HMRでウィンドウをリロードします。

const req = require.context('../src/components', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

それは少し厄介です。

https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.jsのような代替案を調査できなかった理由は、 import "./my-component"がimport { Component } from "@stencil/core"以降失敗するためです。

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

IE11で機能するステンシルとストーリーブックの実装/構成を実際に持っている人はいますか？ 私はこのスレッドで言及されている各実装を運が悪かったので試しました。
常に未処理のプロミス拒否に遭遇しますTypeError：ステンシルバージョン1.2.4-> 1.7.4の無効なスキーム。

@shilman私は上のステンシルのコンポーネントを取得することができましたweb-componentsアプリが、それだけで同じように皆でそれらを読んでいるとやっているように私には思えるhtml 「HMRのdoesnの一つであり、ステンシルコンポーネント自体の更新に反応します。

ReactやAngularなどのように、ステンシルコンパイラをストーリーブックの実行シーケンスに組み込む方法があれば、本当に良いでしょう。

ステンシルコンポーネントを「ライブ」にする方法を試し続けますが、私が遭遇したアーキテクチャ上の問題は、私が間違えない限り、_ステンシルコンポーネントが機能するにはカスタムビルドステップが必要である_（ stencil build --dev --watch ）、および実行時の同等物はありません。

import { MyComponent} from "./MyComponent"を実行しようとしましたが、 @Componentが実際には@stencil/coreからエクスポートされていないため、失敗します。 実際、ビルドステップの一部として削除されます。

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

これを知っている私の次のテストは、Reactバインディング（https://github.com/ionic-team/stencil-ds-plugins）を使用してビルドステップを維持することですが、代わりにHMRロジックを置き換えて（HTMLの代わりに）Reactストーリーを使用します。

うまくいけば、これによりストーリーブックのUXがReactのものと一致し、ステンシルはコンポーネントの実装だけになります。

stencil buildを開発モードで並行して実行する必要があるのは世界の終わりではないと思います。

• package.jsonこれを同時に実行する方法をユーザーに指示できます。
• ステンシルプリセットは、起動時にこのプロセスを生成し、ユーザーから非表示にしたい場合はシャットダウン時に強制終了する可能性があります

可動部品が少ないソリューションが望ましいですが、ここで大敵にならないようにしましょう。 今のところAFAIKは、今でも誰もが独自のステンシルサポートを展開しており、ここの多くの人々のために物事を簡素化するのに役立つ素晴らしい機会があります...

同時に使用することは、現在私のために働いていることです。

確かに段階的なステップがあります。

ユーザーとして私を惹きつけた主な理由は、「なぜ」ステンシルが同じように機能しなかったのかということでした。
私のリアクションストーリーとして、これはステンシル固有のものなしでは解決できません
変化します。

木、2019年10月31日には、17:02マイケルShilman [email protected]
書きました：

ステンシルのビルドを要求するのは世界の終わりではないと思います
開発モードで並行して実行：

• これを同時に実行する方法をユーザーに指示できます
  https://www.npmjs.com/package/concurrently in their package.json
• ステンシルプリセットは、起動時にこのプロセスを生成し、その後強制終了する可能性があります
  それをユーザーから隠したい場合はシャットダウン時に

可動部品が少ないソリューションが望ましいですが、うまくいかないようにしましょう
ここで偉大な敵になりなさい。 今のところAFAIKは誰もがまだ彼らを転がしている
現在、独自のステンシルサポートがあり、支援する絶好の機会があります
ここの多くの人々のために物事を単純化してください...

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN
または購読を解除する
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
。

これに対するもう1つのアプローチは、UI（ストーリーブック）をプレビュー（ステンシル）から明確に分離することです。 ストーリーブックがスタンドアロンの場合、これはすでに可能です。
そうすれば、ストーリーブックを事前に作成することもできます💪これは、起動時間が大幅に短縮されることを意味します。

そして、開発中はステ​​ンシルビルドのみを使用します（ただし、ストーリーブックUIは引き続き使用します）。 つまり、ストーリーブックのWebpackセットアップとの相互運用について考える必要なしに、ステンシル開発サーバーがサポートするすべての機能を利用できるということです。

我々はすでに使用してこれを調査es-dev-serverするために電源にプレビューをweb-components 。 私たちはPOCを持っています...しかし、まだかなり荒いエッジがあります。
ただし、ステンシルでもまったく同じアプローチが機能すると思います。

誰かが質問がある場合、またはステンシルについてこれを調査したり、 es-dev-serverを使用して参照プロジェクトを作成するのを手伝ったりしたい場合は、 @ LarsDenBakkerが詳細を共有してくれると確信しています🤗

PS：これはすべて、UIをプレビューから分離するためのチャネルメッセージを備えたこの素晴らしいiframeセットアップを備えたストーリーブックのためにのみ可能です🤗

やあみんな

しばらくして、これをいじくり回した後、ステンシル統合ストーリーブック実装https://github.com/Edd-Strickland/stencilbookの私のリポジトリがあり

さらにうまくいけば、readmeとpackage.jsonでスクリプトを確認することで、ほとんどのことが明らかになることを願っています。

これは、バニラステンシルスターターコンポーネントとバニラストーリーブックのHTML実装を使用して構築されています。

見てレビューしてください...

StencilBook-ステンシルストーリーブックスターター

これは、ステンシルとストーリーブックを使用してスタンドアロンWebコンポーネントを構築するためのスタータープロジェクトです。

ステンシル

Stencilは、Webコンポーネントを使用して高速なWebアプリを構築するためのコンパイラです。

ステンシルは、最も人気のあるフロントエンドフレームワークの最高の概念を、実行時ツールではなくコンパイル時ツールに結合します。 Stencilは、TypeScript、JSX、小さな仮想DOMレイヤー、効率的な一方向データバインディング、非同期レンダリングパイプライン（React Fiberと同様）、および遅延読み込みをすぐに利用でき、100％標準ベースのWebコンポーネントを生成します。 Custom Elementsv1仕様をサポートするブラウザで。

ステンシルコンポーネントは単なるWebコンポーネントであるため、主要なフレームワークで機能するか、フレームワークがまったくない状態で機能します。

入門

リポジトリのクローンを作成する

git clone https://github.com/Edd-Strickland/stencilbook.git

ベースディレクトリに移動します。

cd stencilbook

モジュールをインストールします。

npm install

リポジトリ全体のビルドを実行します。

npm run build:all

この実行ストーリーブックの後：

npm run storybook

このリポジトリの他のコマンドは次のとおりです。

ステンシルを作成する：

npm run stencil

サーブ/ウォッチモードで直接ステンシルを開始します。 ステンシルコンポーネントを直接修正する場合に便利です。

npm run stencil:start

ウォッチアンドサーブを使用してストーリーブックとステンシルビルドを実行し、ビルドされてローカルで提供される以前のバージョンを削除します。

npm run storybook:build:all

ストーリーブックをローカルで提供する：

npm run storybook:serve

モジュールをリセットします。 ノードモジュールを削除して再インストールします。

npm run reset:modules

コンポーネントの単体テストを実行するには、次のコマンドを実行します。

npm test

テスト

ウォッチモードでテストを実行するには：

npm run test.watch

新しいコンポーネントを生成する

新しいステンシルコンポーネントを自動的に生成するには：

npm run generate

@ Edd-Stricklandこれは素晴らしいスタートです！ 起動を簡単にするために開始スクリプトを追加することを提案できれば、 "start": "npm-run-all -p stencil:start storybook"を実行しました。これは、ストーリーブックがステンシルの構築を認識していないように見えるため、ホットリロードがないことを除いて、かなりうまく機能します。

...それは私が何かを逃していない限りですか？

@shilman @ https ：

これは並行した取り組みですか？ そうでない場合、対応する問題をたまたま知っていますか？ 問題でweb-componentsを検索するときに見つかりませんでした。 app: web-componentsタグが見つかりましたが、リリースに追加されたばかりで、バグがあります。

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components ％22 +

@storybook/web-componentsによって提供されるものに加えて、適切なステンシルサポートを追加するために何が必要かわかりません。 このスレッドの誰かが知っていると確信しています！

@ Edd-Stricklandこれは素晴らしいスタートです！ 起動を簡単にするために開始スクリプトを追加することを提案できれば、 "start": "npm-run-all -p stencil:start storybook"を実行しました。これは、ストーリーブックがステンシルの構築を認識していないように見えるため、ホットリロードがないことを除いて、かなりうまく機能します。

...それは私が何かを逃していない限りですか？

うーん、お詫びは先週の終わりの会議で忙しかったです。

私はあなたが抱えている問題について混乱しています。詳細については、このスレッドではなく、レポの問題を介してこれを提起できますか。

ただし、インストールを実行してからstorybookコマンドを実行すると、それに応じて監視サーバーが起動します。 ステンシルは、コンポーネントの実行中にコンポーネントを変更、追加、または更新するたびにHMRを自動化します。

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components ％22 +

@storybook/web-componentsによって提供されるものに加えて、適切なステンシルサポートを追加するために何が必要かわかりません。 このスレッドの誰かが知っていると確信しています！

依存しますが、Webコンポーネントはバニラインスタンスで動作しますが、それらの違いを比較していませんが、ステンシルはWebコンポーネントを出力しますが、デフォルトではW / Cではなく、W / Cのコンパイラとして実行されます。

したがって、間違いなく両方が必要です。 1つのネイティブJSW / Cと、ストーリーブックの横にあるステンシルベースのW / Cのプロトタイプを高速化したい場合は、ステンシルコンパイラ用に1つ。

@daKmoRに追いついて、これが重複であるか冗長であるかを議論する時間がありませんが、当面はこのバージョンを維持しています。

私は最近につまずいBulmil原因とステンシルの統合上の自分の仕事にnuxt-ステンシルとそのnuxt例。

私はまた、まともなストーリーブックのサポートがあることを理解しました。 多分それも一見の価値があります。 内部/このスレッドの現在の状態との違いはわかりませんが、ストーリーブックを実行すると、Bulmil内ですぐに機能します。

@storybook/addon-actionsがまだ機能していないようであるか、これを機能させることができませんでした。

たぶん、このスレッドで@Gomahを入手して、ストーリーブックのステンシルサポートを改善するためのコラボレーションに関する彼のアイデアを聞くことができますか？

最近、私はつまずいBulmil原因とステンシルの統合上の自分の仕事にnuxt-ステンシルとそのnuxt例。

私はまた、まともなストーリーブックのサポートがあることを理解しました。 多分それも一見の価値があります。 内部/このスレッドの現在の状態との違いはわかりませんが、ストーリーブックを実行すると、Bulmil内ですぐに機能します。

@storybook/addon-actionsがまだ機能していないようであるか、これを機能させることができませんでした。
確かに、上記のリポジトリ内では、標準のストーリーブックアドオンとして、アドオンアクションが機能します

E2A： @Gomahバリアントではなくステンシルブック。

上記の基本的なステンシル/ SB統合の目的は、ストーリーブックをストーリーブックに、ステンシルをステンシルに統合し、両方を統合して、ステンシルを介して作成されたWebコンポーネントをストーリーブックフレームに配置できるようにするベースを作成することでした。

W / Cバージョンがこのイテレーションと同様に実行されるかどうか、および使用している既存のバージョンをW / Cバージョンに変換できるかどうかを確認するために、次の2週間はチームのスプリントに急上昇しました。

理想的にはすべてが機能するため、W / Cバリアントの断片化はありませんが、ネイティブのW / C実装とは異なり、ステンシルは実際にはフレームワークではありません。 コンパイラ。 したがって、後でW / Cとして出力されるJSXコンポーネントを記述できるように区別することはまだ価値があるかもしれません。

またはそれは本当に簡単かもしれません。

スパイクが完了したらお知らせします。

あまりカスタマイズしていません。 Webpackにいくつか追加されました。 最初のtypescriptはCannot find name 'h'について文句を言います。 私のtsconfigにはjsx = reactとjsxFactory = hがあります。 上部の// <strong i="7">@jsx</strong> hプラグマ設定を使用してこれらの警告を消すことができますが、DOMノードまたは文字列を返さないためにストーリーブックエラーが発生します。

試してみる： https ：

編集：jsxでうまく機能します。 それをtypescriptで動作させる方法を理解することはできませんが：/

こんにちは@vidarc。 storiesOf()構文でこれを機能させることができましたか？ もしそうなら、私はあなたがそれをどのようにしたかを見て本当に興味があります。 共有するコード例またはコードベースはありますか？

ストーリーブックとステンシルが統合され、プロジェクトでうまく機能している一方で、最大の問題点は、オブジェクトの小道具などを備えたコンポーネントに対してdocument.createElement()でストーリーを作成することに頼らなければならないことです。 vhtml解決できる場合これ、それは素晴らしいでしょう！

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components ％22 +

@storybook/web-componentsによって提供されるものに加えて、適切なステンシルサポートを追加するために何が必要かわかりません。 このスレッドの誰かが知っていると確信しています！

あなたは正しいです、そして私は同意します。 README.mdに含まれているフォルダーに気づき、他のWebコンポーネントフレームワークを見ましたが、ステンシルは見ませんでした。

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

そのため、ステンシルは含まれていないと思いました。 しかし、これが何も追加せずにうまく機能する場合、それは私にとってはまったく問題ありません。

ところで、前述のWebコンポーネントのプリセットによって解決されたため、この問題を解決できますか？

あまりカスタマイズしていません。 Webpackにいくつか追加されました。 最初のtypescriptはCannot find name 'h'について文句を言います。 私のtsconfigにはjsx = reactとjsxFactory = hがあります。 上部の// <strong i="8">@jsx</strong> hプラグマ設定を使用してこれらの警告を消すことができますが、DOMノードまたは文字列を返さないためにストーリーブックエラーが発生します。
試してみる： https ：
編集：jsxでうまく機能します。 それをtypescriptで動作させる方法を理解することはできませんが：/

こんにちは@vidarc。 storiesOf()構文でこれを機能させることができましたか？ もしそうなら、私はあなたがそれをどのようにしたかを見て本当に興味があります。 共有するコード例またはコードベースはありますか？

ストーリーブックとステンシルが統合され、プロジェクトでうまく機能している一方で、最大の問題点は、オブジェクトの小道具などを備えたコンポーネントに対してdocument.createElement()でストーリーを作成することに頼らなければならないことです。 vhtml解決できる場合これ、それは素晴らしいでしょう！

それらを最新のCSFストーリーとして直接作成し、ストーリーを適切に機能する形式に交換することができます。 また、いくつかのデータファクトリをインポートしてデータオブジェクトにデータを入力する場合は、これらを使用して小道具を水和させることができます。

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components ％22 +
@storybook/web-componentsによって提供されるものに加えて、適切なステンシルサポートを追加するために何が必要かわかりません。 このスレッドの誰かが知っていると確信しています！

あなたは正しいです、そして私は同意します。 README.mdに含まれているフォルダーに気づき、他のWebコンポーネントフレームワークを見ましたが、ステンシルは見ませんでした。

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

そのため、ステンシルは含まれていないと思いました。 しかし、これが何も追加せずにうまく機能する場合、それは私にとってはまったく問題ありません。

ところで、前述のWebコンポーネントのプリセットによって解決されたため、この問題を解決できますか？

ステンシルで動作するかどうかをテストし、報告してから閉じることができます。 それが実際にステンシルで機能しない場合、閉じる意味はありません...

..。

こんにちは@vidarc。 storiesOf()構文でこれを機能させることができましたか？ もしそうなら、私はあなたがそれをどのようにしたかを見て本当に興味があります。 共有するコード例またはコードベースはありますか？
ストーリーブックとステンシルが統合され、プロジェクトでうまく機能している一方で、最大の問題点は、オブジェクトの小道具などを備えたコンポーネントに対してdocument.createElement()でストーリーを作成することに頼らなければならないことです。 vhtml解決できる場合これ、それは素晴らしいでしょう！

それらを最新のCSFストーリーとして直接作成し、ストーリーを適切に機能する形式に交換することができます。 また、いくつかのデータファクトリをインポートしてデータオブジェクトにデータを入力する場合は、これらを使用して小道具を水和させることができます。

ありがとう。 CSFが今では物語を書くための推奨される方法であることに気づいていませんでした。 jsxアドオンをvhtmlbtwで動作させることができましたか、それとも不可能ですか？

..。

こんにちは@vidarc。 storiesOf()構文でこれを機能させることができましたか？ もしそうなら、私はあなたがそれをどのようにしたかを見て本当に興味があります。 共有するコード例またはコードベースはありますか？
ストーリーブックとステンシルが統合され、プロジェクトでうまく機能している一方で、最大の問題点は、オブジェクトの小道具などを備えたコンポーネントに対してdocument.createElement()でストーリーを作成することに頼らなければならないことです。 vhtml解決できる場合これ、それは素晴らしいでしょう！

それらを最新のCSFストーリーとして直接作成し、ストーリーを適切に機能する形式に交換することができます。 また、いくつかのデータファクトリをインポートしてデータオブジェクトにデータを入力する場合は、これらを使用して小道具を水和させることができます。

ありがとう。 CSFが今では物語を書くための推奨される方法であることに気づいていませんでした。 jsxアドオンをvhtmlbtwで動作させることができましたか、それとも不可能ですか？

そのため、JSXはステンシルコンパイラを介してShadowdomに直接解析されます。 したがって、コンパイラーのストーリーブックへの統合を使用している限り、標準のステンシルコンポーネントを作成し、それをCSFストーリーに含めてから、データファクトリにインポートして小道具にデータを入力します。

私が投稿したバニラリポジトリは、これを箱から出してすぐに実行できます。VHTMLプラグインは必要ありません。また、ステンシルとして直接記述して出力するだけのラッパーも必要ありません。

storyOf構文を使用できますが、その場合、従来のdocument.createElementパターンに固定されます。
たとえば、アイコンのこの古いstoriesOf構文

import { storiesOf } from '@storybook/html';
/** 
  * Import readme from component into the story 
  */
import markdown from './readme.md';

storiesOf('1-Atoms/icon', module)
    .addParameters({ viewport: { defaultViewport: 'responsive' } })
    .add('knobs', () => {
        /**
         * Add Knobs to component panel
         * Set within Each knob as the third parameter
         */
        let icon = document.createElement('namespace-icon');
        icon.classList.add('namespace-action-plan');
        icon.size = 'medium';
        return icon;
    }, { notes: { markdown } });

VS

import centered from '@storybook/addon-centered/html';
import markdown from './readme.md';

export default {
  title: 'Atoms|Icon',
  decorators: [centered],
  parameters: {
    notes: { markdown },
    viewport: { defaultViewport: 'responsive' }
  }
};

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

あまりカスタマイズしていません。 Webpackにいくつか追加されました。 最初のtypescriptはCannot find name 'h'について文句を言います。 私のtsconfigにはjsx = reactとjsxFactory = hがあります。 上部の// <strong i="8">@jsx</strong> hプラグマ設定を使用してこれらの警告を消すことができますが、DOMノードまたは文字列を返さないためにストーリーブックエラーが発生します。
試してみる： https ：
編集：jsxでうまく機能します。 それをtypescriptで動作させる方法を理解することはできませんが：/

こんにちは@vidarc。 storiesOf()構文でこれを機能させることができましたか？ もしそうなら、私はあなたがそれをどのようにしたかを見て本当に興味があります。 共有するコード例またはコードベースはありますか？

ストーリーブックとステンシルが統合され、プロジェクトでうまく機能している一方で、最大の問題点は、オブジェクトの小道具などを備えたコンポーネントに対してdocument.createElement()でストーリーを作成することに頼らなければならないことです。 vhtml解決できる場合これ、それは素晴らしいでしょう！

@robaxelsen
@ storybook / reactを使用し、webpack構成を変更して、MDXファイルとともにMDファイルを変換することになりました。 次に、jsondoc出力ステンシルが提供するノブに基づいてノブを作成するためのほんの少しのコード。 ステンシルコードについては、CLIからのストーリーブックのコピーを使用し、それらのファイルをpreview-head.htmlファイルにリンクします。 私の目的にかなりよく合います。

@ Edd-Strickland例と説明をありがとう。 最後の例では、要素の小道具として、プログラムで属性を渡す必要があります。 私の望みは、vhtmlまたはプレーンステンシルコンパイラのいずれかを使用して、JSXとしてストーリーを記述できることでした。

したがって、代わりに：

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

...私は書くだろう：

export const knobs = (): HTMLNamespaceIconElement => {
    return (
        <namespace-icon class="namespace-action-plan" size="medium">
        </namespace-icon>
    );
};

読みやすさとストーリーの作成のしやすさの両方。 それでは、これは不可能ですか？ 可能であれば、簡単な例を挙げていただけますか？

簡単であれば、不和チャットで話すこともできます。 私はRob Axelsen#1373です。

編集：上記に追加するために、CSFのドキュメントも確認し、JSX構文でhインポートしてみましたが、「ストーリーからHTMLスニペットまたはDOMノードが必要です：「シンプルストーリー」」というエラーがスローされます。 「コンポーネント」の。」：

export const simpleStory = () => <namespace-icon class="namespace-action-plan" size="medium"></name-spaceicon>;

これがWebコンポーネントのプロパティを設定する必要があるストーリーの作成に関するものである場合は、 @storybook/web-components 。 lit-htmlを使用htmlを宣言的に作成しています。

これは、ストーリーブックとステンシルを並べて実行するときに機能するはずです:)

ステンシルがlithtmlを使用しないことを除いて。 それはVueのことです...

@shilman @ https ：

ここにリンクされているリポジトリにクローンアクションなどがないWebコンポーネントパッケージをダウンロードしてテストするにはどうすればよいですか？

@ Edd-メインストーリーブックmonorepoの単なるディレクトリであるStrickland

ステンシルがlithtmlを使用しないことを除いて。 それはVueのことです...

それはlit thingです🤔

ただし、それがWebコンポーネントの美しさです。内部でステンシルが何を使用するかは問題ではありません。 lit-htmlまたはその他の方法でストーリーを定義できます。 おそらく必要なのは、プロパティを使用して「html」を記述する方法だけです。

lit-htmlの場合、次のようになります

export myStory = () => {
  const dataArray = [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
  return html`
    <my-lit-component .title=${'some title'} power="unlimited">
      <p> some light dom</p>
    </my-lit-component>
    <my-stencil-component super-mode .data=${dataArray}></my-stencil-component>
  `;
}

したがって、ストーリーでChromeのDevToolsにアクセスする場合は、lit-componentを選択すると、次の詳細を読むことができます。

• プロパティタイトル（例：console.log（$ 0.title）//タイトル）
• 属性パワー（例：console.log（$ 0.getAttribute（ 'power'））//無制限

ステンシルコンポーネントの場合は「同じ」になります

• プロパティデータ例：console.log（$ 0.data）// [{name： 'john'、age：21}、{name： 'maria'、age：28}];
• 属性スーパーモード例：console.log（$ 0.hasAttribute（ 'super-mode'））// true

lit-htmlはdomをレンダリングするだけです... dom要素が登録されている場所/方法lit-htmlは知らない/気にしません-したがって、各コンポーネントに使用されるテクノロジーは完全に異なる可能性があります...たとえば、コンポーネントを誰にすることができますlit-element、stencil、vanilla HTMLElementであるか、完全なreact / vue / angularアプリケーションのWebコンポーネントラッパーである可能性もあります...😱

ステンシルはコンパイラーかもしれませんが、Webコンポーネントにコンパイルされると、単なるdomとして使用できます🤗

PS： @storybook/web-componentsはlit-htmlを使用します

Stencilチームはコンパイラーをリファクタリングしており、これによりStencil / Storybookの統合が変わると思います。

誰かがReactチェックアウトhttps://github.com/the-road-to-learn-react/use-custom-elementを介してステンシルとストーリーブックを使用する場合は、配列とオブジェクトを渡すことができます。 後で自分で試してみますが、これは一部の人に役立つ可能性があります。

興味のある方のために、Storybook / reactとStencilを組み合わせるためのスターターを公開しました： https ：

StorybookはWebコンポーネント用のStorybookを開発しているようです。 ステンシルで試してみましたが、かなりうまく機能しています。

https://github.com/storybookjs/storybook/tree/next/app/web-components

@ sem4phor設定を共有できますか？

Webコンポーネントの新しいストーリーブックのインストールでlit-htmlに関するエラーが発生します

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

@dmartinjsは、デフォルトの例でコンポーネントをレンダリングするために使用されている「lit-html」を自分でインストールする必要があります。

@ Edd-Strickland Webコンポーネント用のストーリーブックを追加しました。6.0.0では、ポリマー用のストーリーブックは非推奨/更新されなくなります。

Webコンポーネントのストーリーブックをステンシルコンポーネントで機能させるために必要なことはありますか？

WebコンポーネントストーリーブックはステンシルWebコンポーネントコンポーネントをレンダリングできますが、ステンシルはブラウザでそのまま実行することはできず、コンパイルする必要があります。 したがって、ストーリーブックを実行する前にステンシルコンポーネントをコンパイルしない限り、特別な処理が必要です。

@LarsDenBakkerは、上記を機能させるためにwebpackプラグイン/ローダーを追加することです。 （ステンシルコンポーネントをHMRにして動的にコンパイルすることが望ましいと思います）

はい、ステンシル自体はロールアップを使用しますが。 コンパイルステップを別のプロジェクトとして使用できる場合は、おそらくそれをwebpackプラグインにすることができます。 そのための内部については十分に知りません。

ステンシルはWebpackを使用しません。 代わりにロールアップを使用します。

私が設定したリポジトリを使用して、それに応じて機能し、-watch呼び出しを使用してステンシルで同等のHMRを有効にすることができます。 そのため、ステンシルが更新されたときにステンシルがリロードされ、更新されたときにストーリーブックがリロードされます。

したがって、これでカバーされるため、毎回構築する必要はありません。

最近、リポジトリを最新のSBまたはステンシルで更新する時間がありませんでしたが、このプロセスは引き続き機能し、リポジトリを最新バージョンにアップグレードできます。

ありがとう

@ Edd-Strickland Webコンポーネント用のストーリーブックを追加しました。6.0.0では、ポリマー用のストーリーブックは非推奨/更新されなくなります。

Webコンポーネントのストーリーブックをステンシルコンポーネントで機能させるために必要なことはありますか？

はい、それでもライブリロード/ HMRは実際には考慮されていません。上記で詳しく説明したように、webpackの使用とロールアップの使用の違いがあるため、現時点でSB WCバージョンを使用する場合は、レンダリングするためにステンシルのフルビルドが必要です。その後、HMRのすべての良さがステンシルに失われます。

このバージョンは現在、ポリマーバージョンではなくHTMLバージョンに基づいているため、このバージョンを廃止するという長期的な目標に影響を与えることはありません。

@LarsDenBakkerは、上記を機能させるためにwebpackプラグイン/ローダーを追加することです。 （ステンシルコンポーネントをHMRにして動的にコンパイルすることが望ましいと思います）

私はそれをお勧めしません、Stencilのwebpackバージョンは非常に難しい開発パスであり、必要なしに依存関係のフットプリントを増やします、私が作成したリポジトリに示されているように、すべてでライブで再コンパイルされるほとんどの時計でステンシルを実行することは完全に可能ですWCまたはSBインスタンスの変更。 両方を許可するように構成することです。

はい、ステンシル自体はロールアップを使用しますが。 コンパイルステップを別のプロジェクトとして使用できる場合は、おそらくそれをwebpackプラグインにすることができます。 そのための内部については十分に知りません。

すでにステンシルWPプラグインがありますが、これはサポートされていないか、コミュニティで承認された依存関係ではありません。

cc @ jthoms1 @adamdbradley

@dmartinjsは、デフォルトの例でコンポーネントをレンダリングするために使用されている「lit-html」を自分でインストールする必要があります。

@ sem4phor設定を共有できますか？

Webコンポーネントの新しいストーリーブックのインストールでlit-htmlに関するエラーが発生します

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

これに関するフィードバックはありますか？ この依存関係を自分でインストールする必要があります。 @ storybook / web-componentsで使用されている場合は、依存関係として自動的にインストールされる必要があります...？

@LeeBurtonは、ピアの依存関係ではありませんか？ （そうであるかどうかはわかりませんが、そうでない場合はおそらくそうあるべきです）cc

私がテストしていたときの@ LeeBurtonlit -htmlはピアの依存関係でした。 ピアの依存関係を自分でインストールする必要があるのは通常のことです。 https://nodejs.org/es/blog/npm/peer-dependencies/

価値があるので、 .storybook/preview.jsでこの構成を使用してステンシルを取得しました

import { defineCustomElements } from "../dist/esm/loader.mjs"
defineCustomElements()

configure(require.context('../src', true, /.*\.stories\.(js|mdx)$/), module);

@idmyn試してみましたが、コンパイル中にsrcファイルに加えられた変更は、手動でハードリロードしないとブラウザに読み込まれません。

npm-run-allパッケージと並行してstart-storybookを実行しながら、1つのnpm実行スクリプトでウォッチを有効にしてStencilのビルドをローカルで実行することで動作させました。

main.jsで以下を使用して、Stencilのdistファイルを監視するようにstorybookのwebpack構成を構成しました。

const path = require('path');
const glob = require('glob');

module.exports = {
  webpackFinal: (config) => {
    // watch all revelant files in dist folder
    const distDir = path.resolve(__dirname, '../dist');
    const files = glob.sync(`${distDir}/**/*.entry.js`, { absolute: true, ignore: ['**/*.system.entry.js'] });
    config.entry.push(...files);
    return config;
  },
};

プロジェクトのパス/ファイルを少し変更する必要があるかもしれませんが、これは私にとってはうまくいきました。

@DesignByOnyxまたは@ Edd-Stricklandは、ソリューションを6のプリセットに変換することを検討したことがありますか？ 私はレポと-通常の方法の両方を使用しました-私はそれぞれのビットが好きです:-)

@ Edd-Stricklandのコピーを6.0.0-betaにかなりうまく移動しましたが、変更を見つけたときにすべてが再構築されるとは限りません（例：readme.md）。

これは@paulfeltonで公開されていますか？

今です、あなた自身を助けてください:-)

Eddのプロジェクトをフォークしました。 @ Edd-Strickland、PRを入れましょうか。 それは良いレビューが必要です、私はこれの専門家ではありません。

パッケージをバンプし、構成を新しい形式にリファクタリングしました。 ステンシルreadmeをインポートするストーリーを取得するには、タイピングを追加してtsconfigで参照し、「notes」を「docs」に変換する構成を追加する必要がありました。

ウィッシュリスト：

• さて、統合によってステンシルコンポーネントから基本的なストーリーが生成されることを望んでいます。 理想的には、mdxとCSFの両方。
• StorybookHTMLからStorybookWebcomponentフレーバーに移行したいのですが、そうすることの利点があるかどうかはわかりません。 より自然に感じます。
• ステンシルドキュメントを「経由」ノートに移動するのではなく、より自然に新しいアドオンドキュメントにインポートしたいと思います。
• プリセットを介してこれすべて:-)

@paulfelton私から何か必要ですか？

@ndelangenわかりません。 ご存知かもしれませんが、私はステンシルとストーリーブックの両方にかなり慣れていないので、さまざまな問題のディスカッション、グーグルなどからドラッグできるものを一緒にいじくりまわしました。

私もスターターレポジトリに参加しました。非常に刺激を受けましたが、この問題でのすべての多大な努力に感謝します（すべてに感謝します！）。

https://github.com/elwynelwyn/stencilbook-ding

@storybook/web-componentsを使用し、Essentialsアドオン（コントロール、アクションなど）を操作します。 この段階でのすべての最新バージョン。

Stencil開発サーバーとStorybookプレビューフレームの間のいくつかの追加の統合（したがって、StencilエラーオーバーレイはStorybookにインラインで表示されます-より良いDX！）（deetsについては./storybook/preview-body.htmlと./src/index.htmlを確認してください）。

〜Stencildevserverをstart-storybookマッシュしたので、1つのコマンドを実行するだけで、舞台裏でステンシルがスピンアップします。〜
編集：これをconcurrently + wait-on簡略化しました-ステンシルがスピンアップするのを待ってから、ストーリーブックに進みます

コードを（ステンシルコンポーネントまたはストーリーブックストーリーに）変更すると、プレビューフレームがリロードされます（ストーリーブックアプリ全体ではありません）。 これは適切なHMRではありませんが、開発するのはかなり良いことです。

良い。 リンクが機能しません。

おっと、リポジトリは現在公開されています^

ステンシルv2と@storybook / web-components v6を使用してボイラープレートリポジトリをここにまとめました： https ：

https://github.com/miriamgonp/stencil-web-components-boilerplateには、Storybook / Stencilの不和チャンネルから@miriamgonpによって

これらの2つのリポジトリは見栄えがします。 それらが1つに統合された場合は良い追加になります。 そして、誰かがこれらの2つのリポジトリに基づいて、 Intro to Storybookのチュートリアルで貢献してくれるなら、私たちは本当に感謝します。 誰かが私たちを助けてくれるかどうか教えてください。私は喜んでステンシルを使用するコミュニティのメンバーを助けに行きます。

私は適切なhmrソリューションを手に入れました;）もうすぐです！

私は適切なhmrソリューションを手に入れました;）もうすぐです！

ここにあります！
Stencil 2 +＆Storybook 6+（古いステンシルバージョンも機能するはずです;））
https://github.com/dutscher/stencil-storybook
楽しんで乾杯

編集：gh-pagesのストーリーブック付きhttps://dutscher.github.io/stencil-storybook/index.html

先週、これを私たちのプロジェクトに交換し、私たちに関係のないビット（Bootstrap、scss、クロマチックなど）を取り除き、いくつかのマイナーなもの（たとえば、@にあるためにインポートされたすべての場所でpackage.json名が機能しない）を修正した後myorg / my-proj形式）それは本当にうまく機能しています。

1日ほど使用していて、HMRは素晴らしいです！

@elwynelwynストーリーブック側で私たちがしなければならないことは何だと思いますか？

@ndelangen重要なことは次のとおりです。

1. プロキシhttps://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. main.jsを介したステンシルプロダクションインジェクションhttps://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. devおよびprod用のシンプルで最小限のnpmスクリプトhttps://github.com/dutscher/stencil-storybook/blob/master/package.json

乾杯