自動メンション：ねえ@ backbone87 @pocka 、あなたはタグ付けされました！ ここで手を差し伸べてもらえますか？

うーん..vue3プリセットを実行する必要があるかもしれません

うーん..vue3プリセットを実行する必要があるかもしれません

手伝ってもいい？

私がこれまでに試したこと（ただし、ノードモジュールディレクトリにあるdistファイルのみ）：

vue / dist / server / framework-preset.js

• VueLoaderPluginはvue-loaderエクスポートになりました
• vue-esm.jsをvue.esm-browser.js置き換えます

11c11
< var _plugin = _interopRequireDefault(require("vue-loader/lib/plugin"));
---
> var _plugin = _interopRequireDefault(require("vue-loader").VueLoaderPlugin);
34c34
<         vue$: require.resolve('vue/dist/vue.esm.js')
---
>         vue$: require.resolve('vue/dist/vue.esm-browser.js')

vue / dist / client / Preview / render.js

アプリコンポーネントはcreateApp()でインスタンス化され、すべての構成などをインスタンスに適用する必要があります

`` `diff
21c21

<var _vue = _interopRequireDefault（require（ "vue"））;

var _vue = _interopRequireDefault（require（ "vue"）。createApp）;
43c43

<var root = new _vue ["default"]（{

var root = _vue ["default"]（{
67c67

<_vue ["default"]。config.errorHandler = showException;

root.config.errorHandler = showException;
88c88

<root。$ mount（ '＃root'）;

root.mount('#root');

`` `

extendsプロパティを定義するなど、アプリインスタンスが必要なため、 vue/dist/client/preview/index.js立ち往生しています。これは、適切なストーリーブックビルドでのみ実装できるようです…

うまくいけば、これらの赤ちゃんのステップはいくつかの有用です。

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

バンプ

@pksunkara @graup @ Aaron-プール誰かがこれを掘り下げる時間がありますか？ 必要な重大な変更があり、それらを6.0に移行できる場合は、今がそれを行うのに最適な時期です。

Vue3がリリースされた後も、しばらくの間Vue2をサポートする必要があります。 確認する必要があるのは、どういうわけか両方を同時にサポートできるかどうかです。

また、Vue3はまだベータ版ではないことを考慮し、ストーリーブックv6をリリースしたいと考えて、vue3のサポートをv6リリース後に延期します。

私はこれをすぐに調査することを計画していますが、ETAを与えることができません。 Vue3を試す機会はまだありません。

とにかくまだベータ版であるため、これは6.0では緊急ではないという@pksunkaraに同意します。

@graupに感謝します。 また、緊急ではないことにも同意します。Storybookでリリースされていないソフトウェアをサポートすることを期待すべきではありません。 私の唯一の懸念は、たとえば、7月に6.0をリリースし、8月にVue3をリリースし、9月にサポートする予定であり、重大な変更が必要であることがわかったことです。 そして、2021年6月に行われるはずの10月のメジャーバージョンのバンプがなければ、そのような重大な変更を行うことはできません。

フレームワークをブートストラップするロジックが少し異なるため、Vue 3で動作させるにはどうすればよいかについて、不和チャンネルにいくつかのライトを表示しようとしていました。 vueフォルダー内の現在のコードはvue3で機能すると思います。

@shilmanを理解しています。 私は自分の主張を正しく理解していなかったように見えるので、もう少し明確にしましょう。

@ p3kの試みと@milewskiのコメントで私が理解していることから、新しいプリセットが必要なだけでなく、 @storybook/vueパッケージに重大な変更を加える必要もあります。

ただし、Vue v2をかなりの期間サポートする必要があり、すべての人がVuev3に移行するわけではありません。 したがって、Vue v2がサポートされなくなったと言いたくない限り、新しい@storybook/vue3パッケージを作成したほうがよいでしょう。

しかし、Vue v2のサポートを終了することにした場合は、そうです。Storybookv6より前に重大な変更を行う必要があることに同意します。

@pksunkara提案されたソリューションは素晴らしいですね。 💯

すぐにvue2のサポートを終了できるとは思わないので、これら2つのパッケージを並行して実行し、将来のメジャーリリース（7.0？8.0？決して？）で完全にカットオーバーしたいと思います。 2つのパッケージがリリースされたら、npm download statsを使用して、Vue2サポートを削除する適切なタイミングを判断できます。 WDYT？

cc @ndelangen

私はそれに撮影をしました： https ：

ただし、 https：//github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41で何をするのかわからないコードブロックがありました

このガイドの指示に従ってhttps://storybook.js.org/docs/guides/guide-vue/に伝えることができる限り、vue3を使用してコンポーネントを正常にレンダリングしました...そのコードを残さずにオフ...おそらく、特定のプラグインを使用する必要がありますか？ 誰かがそのコードがどのconfig / addon / pluginで役立つか教えてもらえますか？ だから私はそれを修正する方法を見つけることができ、誰かが私のバージョンにインスピレーションを得て、コード手順に従ってここで新しいプリセットをリリースすることができますか？

素晴らしい仕事@ milewski-とてもエキサイティングです!!! 🚀

私はそのコードが何をしたかを理解しました..ノブから与えられたオプションを適用する必要がありました..私はそれを修正しました..あなたはストーリーブックをより長く使用しているように見えるのでそれを試すことができますか？ @ p3k

次のコマンドを実行してインストールできます。

git clone --branch vue3 https://github.com/milewski/storybook.git
cd storybook
yarn bootstrap --core
yarn build (select vue)
cd app/vue
yarn link

then cd to your project and:

yarn link @storybook/vue

@milewskiの努力に感謝します–ブランチを試しているところですが、 yarn bootstrap --core実行するとエラーが発生します：

…
$ node ../../scripts/prepare.js
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/index.d.ts
Built: @storybook/[email protected]
lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/server/framework-preset-vue.ts(5,17): error TS4058: Return type of exported function has or is using name 'VueLoaderPlugin' from external module "/home/tobi/Projects/modul/storybook/app/vue/node_modules/vue-loader/dist/plugin" but cannot be named.
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/util.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/options.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/build.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :  
ERR! FAILED to compile ts: @storybook/[email protected] 
error Command failed with exit code 1.

lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

うーん。 typescriptに問題がありました。 今のところtsチェックを無効にしました。ブランチから最新のコードをプルして再試行してください

はい、コマンドはエラーなしで実行されました。

re yarn build (select vue)メッセージが表示されます_storybook WARN build何もビルドしません！_–それは正しいですか？

表示されるインタラクティブメニューでは、スペースバーを押して選択する必要はありません

ああ！ すみません、私の悪い、確かに。

今では問題なく構築され、最初のvue3コンポーネントでストーリーブックを実行できます–素晴らしいです！ もう一度ありがとう、 @ milewski

@milewskiお疲れ様でした！ テストしたところ、動作しているようです。

私の知る限り、大きな変更点はインポートとcreateAppものだけですよね？ たぶん、インストールされたvueバージョンをチェックし、正しいことを自動的に行う下位互換性のあるコードを書くことは可能ですか？ そうすれば、2つのバージョンのプリセットを使用することを回避できます。

vueの例を更新してみましたが、そこで使用されているものの一部にはまだvue3バージョンがないようです。 一般に、ベータ版や不一致のパッケージがまだたくさんあるように思われるので、アドオンなどを含むストーリーブックのコードベース全体を更新する前に少し待つ方がよいかもしれません。やるべきことはかなりたくさんあります。

私の知る限り、大きな変更点はインポートとcreateAppのものだけですよね？

はい、私もそう言うでしょう。

私が最初に試したことから（私の最初のコメントを参照）、私が保持したのは構成のマージだけでした– @milewskiの貢献のおかげで、VueLoaderPluginのプッシュはもう必要ありません：cat：

ドキュメントで説明されているように、ストーリーブックの（再）初期化は簡単npm install @storybook/vue --save-dev ：

そうすれば、2つのバージョンのプリセットを使用することを回避できます。

私はそれが非常に望ましいと思います、そして多分次の童話のリリースで変更を加えることさえ可能にするでしょう…？

vueの例に関しては、それら（の一部）のvue3互換バージョンの作成を支援できるでしょうか？ （ただし、私はまだvueの専門家ではありません。）

@graup

私の知る限り、大きな変更点はインポートとcreateAppのものだけですよね？ たぶん、インストールされたvueバージョンをチェックし、正しいことを自動的に行う下位互換性のあるコードを書くことは可能ですか？ そうすれば、2つのバージョンのプリセットを使用することを回避できます。

私も反応性の問題に直面しました。現在のバージョンがオブジェクトを設定/拡張する方法に従おうとしましたが、vue3はそのタイプのオブジェクト、特にレンダリング関数内で作成されたオブジェクトの変更を追跡しなくなりました。refを使用して参照を作成する必要がありました。 （）またはreactive（）を使用して、更新をトリガーします。

vueの例を更新してみましたが、そこで使用されているものの一部にはまだvue3バージョンがないようです。 一般に、ベータ版や不一致のパッケージがまだたくさんあるように思われるので、アドオンなどを含むストーリーブックのコードベース全体を更新する前に少し待つ方がよいかもしれません。やるべきことはかなりたくさんあります。

私はそれを出発点として使用しようとしましたが、packagejsonにバージョンを明示的に設定したにもかかわらず、vue2のものをインストールしようとしました... vue-template-compilerまたは古いvueローダーがインストールされている場合、vue3はまったく機能しません..それらをインポートしているそこにいくつかの依存関係があるかもしれません

@ p3k

ドキュメントで説明されているように、ストーリーブックの（再）初期化は簡単でした。npminstall@ storybook / vue --save-dev; 他のピア依存関係をインストールする必要すらありませんでした（とにかく、プロジェクト用にすでにインストールしているためかもしれません）。

これは、packages.jsonへの依存関係としてvue3とvue-loader ^ 16を含めたために発生したと思います。

本当に必要な場合は、 @storybook/vue3パッケージで問題ありません。

参考までに、Storybook Vue2コードのコアレンダリングバグを修正しました： https ：

これにより、 addon-knobsおよびaddon-controls使用される「強制更新動作」が実際に更新を強制します。 Vue3コードに関係があるかどうかはわかりませんが、テストしている場合は参考までに、その更新にマージしてください。

フォークバージョンにも適用されました！

私の2セントを入れると、vue-cliがvue 2に使用されたのと同じように、 viteがvue3に使用される_defacto_ツールになるようです。ストーリーブックを使用したvue-cli、probalem @pksunkaraは、彼のvue-cliストーリーブックプラグインを使用して解決するという素晴らしい仕事をしました。 可能であれば、セットアップするプリセット/パッケージがviteと非常にシームレスに機能することを確認する必要があります。

編集：Viteはwebpackではなく内部でロールアップを使用しているため、これは難しいかもしれないことに気づきました😬

Storybookがユーザーのwebpack / buildシステムを使用でき、独自の構成をまったく必要としないかどうかを実際に調べる必要があると思います。

考えはさておき、私はviteをチェックアウトしていないと思いますが、おそらく彼らはvuecliプラグインシステムを適応させるでしょう

Viteが「the」ツールになるとは考えていません。 多数のプロジェクトでwebpackが提供するパワーと柔軟性が必要になりますが、viteの目標はこれらすべてのニーズに応えることではありません。

だから私は今のところviteについてあまり心配しないだろうし、ストーリーブック自体に対するVue3のサポートについては確かに心配しないだろう。

@LinusBorg私が特に

ストーリーブックをViteベースのプロジェクトに統合しようとすると、Viteで同様の問題が発生するのを見ませんか？

そんなことはありません。 Vue CLIのセットアップと比較すると、Vite自体はかなり必要最低限​​のものです。

Viteが提供するものは、 .vue 、 ts(x) 、および.cssファイルを処理するためのルールを持つ単純なWebpack構成でカバーされています。 それは拡張可能でありながら、私たちは、カスタムトランスフォームを追加する人々を期待していないとスタッフは、左と右のように、そのAPIはかなり近い金属にあります。

設計上、広範なプラグインAPIはありません。 プロジェクトに派手なカスタムマジックが必要な場合は、とにかく早くWebpackが必要になる可能性があるため、VueCLIを使用してください。

Viteは、「あらゆるユースケースの拡張性」を目標の1つとは考えていません。

したがって、Viteプロジェクトは、webpack構成が私がレイアウトした基本的なルールをカバーしている限り、通常、storybook / vueで機能するはずです。

@LinusBorgわかりました、それは理にかなっています。 入力に感謝します👍CoreVueチームからのガイダンスは常に非常に高く評価されています！

みんながストーリーブックに入れている仕事に感謝します、私のVue3プロジェクトにそれを使うのが待ちきれません:)

Vue3は現在RCになっているので、v6にVue3サポートを追加することを検討する必要があるかどうかを再評価する価値があるかもしれません。

@hollandThomasはすでにRCの途中なので、vue3は6.1で提供される必要があります。 とは言うものの、数週間以内に最初の6.1アルファ版をリリースする予定なので、誰かがこれをまとめ始めたいと思ったら、これに飢えている大勢の聴衆がいると確信しています！

Vue 3サポートの準備を支援するために使用または貢献できるアクティブなブランチはありますか？

私たちの組織では、Vue ui-componentライブラリがすべてのVueプロジェクトにアクセスしているため、Vue 3の試用を最初に妨げているもののひとつであり、必要に応じてテストや移行を支援したいと考えています。 他の人も同じ船に乗っていると思います。

ドキュメントhttps://v3.vuejs.org/guide/migration/introduction.html#overviewにv2-> v3移行ガイドもあり

@milewski @ graup @ Aaron-プール@elevatebart現在6.1アルファになっています。 誰かがこれのためにPRでショットを撮りたいですか？

@ p3kありがとう。 あなたの説明で作成されたばかりで、私にとっては仕事のように見えますが、それほど多くの機能をテストしていませんでした
webpackの設定はmain.jsで簡単に修正できます。

webpackFinal: async (config, {configType}) => {

    config.resolve.alias['vue$'] = 'vue/dist/vue.esm-browser.js'

    return config
  }

とローダーはすることができます

render.jsで.storybookで設定する方法が少し詰まっています

@shilmanはこのバージョン「6.1.0-alpha.1」はvue3と互換性がありますか？

わかりませんが、いいえのように見えます。 まだ2番目のバージョンがサポートされています。

いいえ、まだです。 上記の私のます

@shilmanまだVue3を使用する機会がありません😞私の仕事には今月のVue2ベースの製品リリースの締め切りがあるので、手を出す時間がありませんでした。

つまり、タスクは基本的に

• app / vueをapp / vue3にコピーします
• すべてのフレームワーク参照を必ず変更してください
• https://github.com/milewski/storybook/tree/vue3で@milewskiによって行われた変更を適用します
• 新しい流し台の例を変更または作成する
• さまざまなストーリー/ vue3コンポーネント定義メソッドの組み合わせを試して、それらが機能するかどうかを確認してください

？

@chartingerは私にとって最も直接的な道のように聞こえます。 使用しているvueのバージョンに基づいてこれらの変更を条件付きで適用し、単一のパッケージを維持する方法を理解できれば、それはさらに良いことです。

私はこれまでに見つけたhttps://github.com/chartinger/storybook/tree/app-vue3 （上記のフォークからいくつかの変更が必要）でビュー実験を行いました：

良い：

• 基本的なvue3コンポーネントがレンダリングされます
• コントロールからの変更はライブアップデートされます

悪い：

• クラスで装飾されたvueコンポーネントをロードできないようです
• ノブが機能するかどうかわからない、vue3でストーリーブックを学びたかったので、デモコードや過去のプロジェクトをテストする必要はありません
• 小道具からの制御属性の自動検出はありません

その他：

• StoryMetaにコンポーネントをインポートしても何も起こりません。ストーリーに含まれている必要があります
• グローバルコンポーネントがアプリインスタンスにバインドされるようになりました。.storybook/ preview.jsまたはその他の方法で提供することは可能ですか？ （必要ですか？）

@elevatebart vue3のvue-docgen-apiのステータスはどうなっていますか？ ☝️

全体的に互換性があります。 ただし、セットアップ機能で発生するイベントはまだ処理されていません。

このために、セットアップ機能を入力してそれらの放出を検出するためのパフォーマンスの高い方法がまだ必要です。

関数は複数のファイルに含めることができるため、少し時間がかかる場合があります。

@chartingerは、いくつかの実験でブランチを更新したいですか？ あなたが見つけた「制御属性の自動検出」の問題を掘り下げたいのですが、おそらく誰かにクラスで装飾された問題を見てもらうことができます。

@shilman vue-cliに基づいてvue3の例を追加し、ボタンの例をコンポジションとクラスapiに移行しました（コードではアノテーションと呼びました。変更する必要がありますが、今は変更します）。 どういうわけか、今回ロードされたクラスapiコンポーネント。

テストのために、それに応じてnpm linkとnpm link @storybook/vue3忘れないでください。

参考： @andoshin11/storybook-vue3をnpmに公開したばかりなので、お気軽に試してみてください👇

https://www.npmjs.com/package/@andoshin11/storybook -vue3

ところで、Vue3は正式にベータ版ではありません。

PS。 ストーリーブック@ andoshin11のフォーク/バージョンをありがとう

//編集：スレッドと素晴らしい仕事を読んでください..私はこれを撃つかもしれません:)

みんな素晴らしい仕事。 これを6.1リリースに取り入れたいと思います。 誰かがこれを引き受けたいですか？ それは非常に大きな影響を与える貢献になるでしょう。 理想的には、同じパッケージでvue3とvue2をサポートし、自動検出またはユーザー構成を実行して、使用するバージョンを特定します。

この作業の範囲：

• [] vue3をサポートするために必要な変更を加える
• [] vue3のe2eテストをvueプロジェクトに追加する（これにはすでにテンプレートがあり、それほど難しくはないはずです）
• []ドキュメントの更新
• []プレリリースで宣伝する際に、バグ修正とサポートを利用できるようになります

これに取り組みたい場合は、私たちの不和について私に連絡してください-私は議論するために#vue3一時チャネルを作成しました！ https://discord.com/invite/UUt2PJb

https://github.com/storybookjs/storybook/issues/12632で行われた作業が少しあり

Vue 3はベータ版ではなく、数か月以内にlatestタグで利用できるようになるので、ストーリーブックでVue 3サポートに利用できるETAはありますか？

また、 CHANGELOGを@storybook/vueに追加すると便利です-https：//github.com/storybookjs/storybook/tree/master/app/vue 、アイデアを得ることができます@storybook/vueバージョンで何が変わったかについて。

@palerdotストーリーブック6.1の一部としてvue3サポートを出荷してもらいたいです。 これに貢献してくれる人を探しています-興味がありますか？ https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

CHANGELOGに関しては、モノレポ全体に1つあり、フレームワークごとに1つ追加するのは現実的ではありません。 ただし、リリースの発表ごとにフレームワーク固有の要約を作成することを検討します。これは、おそらくユーザーとして実際に必要なことです。

@shilman

これに貢献してくれる人を探しています-興味がありますか？

残念ながら、私は現在これに時間を費やすことができません（言うまでもなく、私はstorybookコードベースにそれほど精通していません）。

リリースの発表ごとにフレームワーク固有の要約を作成することを検討します。これはおそらく、ユーザーとして実際に必要なことです。

ありがとうございました。 そのほうがいい。 あなたは正しいです。 ユーザーとして、リリースごとにサポートされているフレームワーク（Vue 3など）を知りたいだけです。 したがって、その情報をメインのCHANGELOGに追加すると便利です。

Vue3をストーリーブックでも動作させたいデータポイントをドロップするだけです。 @Akryumのように、Vueコア/ツール開発者の

@shilman
私はvue2とvue3でストーリーブックを操作するための解決策を見つけたと思います。 うまくいけば時間を見つけたら、POCを作成しようとします;-)。 約束がない。 ^^
しかし、私はすでに私の考えを共有していると思いました。
私が見つかりました。 Vueのデミvue2＆vue3のための一つのパッケージを使用して問題を解決するために有望なようです。
もちろん、compostionapiで実行する作業はまだあります。 しかし、私はそのパッケージで有望なパッケージへの一歩を踏み出したと思います

13224同じ問題。 @shilman次のStorybookバージョンで

はい、うまくいけば、6.2で着陸します。 まだそれを実現する誰かを探しています！