Storybook: Vue: Fügen Sie Vue3-Unterstützung hinzu

Erstellt am 5. Mai 2020  ·  61Kommentare  ·  Quelle: storybookjs/storybook

Ich habe gerade versucht, ein Storybook mit einer Vue3 (Beta) -App auszuführen, und es sind einige Fehler aufgetreten. Einige konnten ich umgehen, indem ich unsere Webpack-Konfiguration zusammenführte und das Vue3-Loader-Plugin drückte:

const wltConfig = require('../apps/webpack-dev');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    stories: ['../**/*.stories.[tj]s'],

    webpackFinal: (config, ...args) => {
        config.plugins.push(new VueLoaderPlugin());
        return { ...config, module: { ...config.module, rules: wltConfig().module.rules } };
    }
};

Ich erhalte immer noch eine Warnung und einen Fehler in der Shell:

WARN   Failed to load preset: "/home/tobi/Projects/modul/portal/client/node_modules/@storybook/vue/dist/server/framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'

- Trotzdem erstellt und öffnet Storybook den Browser. Dort stecke ich mit dieser Fehlermeldung fest:

Uncaught TypeError: _vue.default is not a constructor
    at Object../node_modules/@storybook/vue/dist/client/preview/render.js (render.js:43)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/vue/dist/client/preview/index.js (index.js:24)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.<anonymous> (index.js:55)
    at Object../node_modules/@storybook/vue/dist/client/index.js (index.js:59)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)

Gibt es einen besseren Ansatz als diesen? Ich bin insgesamt n00b zum Storybook und würde mich über jeden Hinweis oder jede Unterstützung freuen. (Ich habe die Probleme nach vue3 durchsucht, ohne aussagekräftige Ergebnisse zu erzielen, zumindest soweit ich das beurteilen kann.)

P1 vue feature request help wanted todo

Hilfreichster Kommentar

Ja, hoffentlich landet es in 6.2. Ich suche immer noch jemanden, der es möglich macht!

Alle 61 Kommentare

Automention: Hey @ backbone87 @pocka , du

Hmm .. Möglicherweise müssen wir ein vue3-Preset machen

Hmm .. Möglicherweise müssen wir ein vue3-Preset machen

kann ich helfen?

Was ich bisher versucht habe (allerdings nur in dist-Dateien im Verzeichnis der Knotenmodule):

vue / dist / server / framework-preset.js

  • VueLoaderPlugin ist jetzt ein Export von vue-loader
  • Ersetzen Sie vue-esm.js durch 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 / template / render.js

Die App-Komponente wird jetzt mit createApp() instanziiert. Die gesamte Konfiguration usw. muss auf die Instanz angewendet werden

`` `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');

`` `

Ich bin jetzt mit vue/dist/client/preview/index.js festgefahren, weil die App-Instanz dort benötigt wird, z. B. um die extends -Eigenschaft zu definieren - und das scheint nur mit einem richtigen Storybook-Build möglich zu sein ...

Screenshot-2020-05-11-10:41:14

hoffentlich sind diese kleinen Schritte von Nutzen.

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

stoßen

@pksunkara @graup @ Aaron-Pool hat jemand Zeit, sich damit zu beschäftigen? Wenn es wichtige Änderungen gibt, die wir brauchen, und wir diese in 6.0 bringen können, wäre jetzt der beste Zeitpunkt dafür!

Nach der Veröffentlichung von Vue3 müssten wir Vue2 noch eine ganze Weile unterstützen. Eine Sache, die wir überprüfen müssen, ist, ob wir beide gleichzeitig irgendwie unterstützen können.

Auch wenn man bedenkt, dass Vue3 noch nicht aus der Beta ist und angenommen wird, dass wir Storybook v6 herausbringen wollen, würde ich die Unterstützung von vue3 auf die Veröffentlichung von v6 verschieben

Ich habe vor, dies bald zu prüfen, kann aber keine ETA geben. Ich hatte noch keine Gelegenheit, Vue 3 auszuprobieren.

Ich stimme @pksunkara zu, dass dies für 6.0 nicht dringend ist, da es sowieso noch Beta ist.

Danke @graup. Ich stimme auch zu, dass es nicht dringend ist - es sollte nicht erwartet werden, dass wir unveröffentlichte Software in Storybook unterstützen. Meine einzige Sorge ist, dass wir beispielsweise 6.0 im Juli veröffentlichen, Vue3 im August startet, es im September unterstützen und feststellen, dass eine grundlegende Änderung erforderlich ist. Und wir können diese bahnbrechende Änderung nicht ohne eine größere Version im Oktober erreichen, die stattdessen im Juni 2021 stattfinden sollte.

Ich habe gerade versucht, ein paar Lichter auf den Discord-Kanal zu bringen, um zu erfahren, wie ich versuchen soll, ihn mit Vue 3 zum Laufen zu bringen. Es würde eine neue Voreinstellung erfordern, da die Logik zum Booten des Frameworks etwas anders ist. Ich weiß nicht Ich denke, der aktuelle Code im vue-Ordner funktioniert mit vue 3 ..

Ich verstehe @shilman. Lassen Sie mich etwas näher darauf eingehen, da es so aussieht, als hätte ich meinen Standpunkt nicht richtig verstanden.

Nach dem , was ich mit den Versuchen von @milewski verstehe, brauchen wir nicht nur eine neue Voreinstellung, sondern müssen auch wichtige Änderungen im Paket @storybook/vue vornehmen.

Aber wir müssten Vue v2 noch eine ganze Weile unterstützen, nicht jeder würde auf Vue v3 umsteigen. Wenn wir also nicht sagen möchten, dass Vue v2 nicht mehr unterstützt wird, ist es besser, wenn wir ein neues @storybook/vue3 -Paket erstellen.

Wenn wir uns jedoch dazu entschließen, die Unterstützung von Vue v2 einzustellen, stimme ich zu, dass wir wahrscheinlich vor Storybook v6 wichtige Änderungen vornehmen sollten.

@pksunkara Ihre vorgeschlagene Lösung klingt großartig. 💯

Ich glaube nicht, dass wir die Unterstützung von vue2 bald einstellen können, daher möchten wir diese beiden Pakete parallel ausführen und möglicherweise in einer zukünftigen Hauptversion (7.0? 8.0? Nie?) Eine vollständige Umstellung vornehmen. Nachdem die beiden Pakete veröffentlicht wurden, können wir mithilfe der npm-Download-Statistiken bestimmen, wann der richtige Zeitpunkt ist, um die Vue2-Unterstützung zu entfernen. WDYT?

cc @ndelangen

Ich habe es geschossen: https://github.com/milewski/storybook/tree/vue3 das funktioniert im Wesentlichen für mich mit vue3 ..

Es gab jedoch einen Codeblock, bei dem ich nicht sicher bin, was er tun soll. https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58 Ich habe das Storybook noch nie benutzt. Ich wollte es jetzt nur mit meinem vue3-Projekt verwenden.

Soweit ich https://storybook.js.org/docs/guides/guide-vue/ nach den Anweisungen in diesem Handbuch

Tolle Arbeit @milewski - super spannend !!! 🚀

Ich habe herausgefunden, was dieser Code bewirkt hat. Es war notwendig, die von den Reglern angegebenen Optionen anzuwenden. Ich habe das behoben. Können Sie es ausprobieren, da Sie anscheinend das Storybook schon länger verwenden? @ p3k

Sie können es installieren, indem Sie Folgendes ausführen:

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

Vielen Dank für Ihre Bemühungen yarn bootstrap --core einen Fehler erhalten:

…
$ 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.

Ähm. Es gab ein Problem mit Typoskript. Ich habe gerade die ts-Überprüfung für jetzt deaktiviert. Ziehen Sie den neuesten Code aus meiner Filiale und versuchen Sie es erneut

Ja, jetzt lief der Befehl ohne Fehler.

re yarn build (select vue) Ich bekomme die Nachricht _storybook WARN build Nichts zu bauen! _ - ist das richtig?

Nein, im angezeigten interaktiven Menü müssen Sie die Leertaste drücken, um auszuwählen

image

Ah! Entschuldigung, mein schlechtes, sicher.

Jetzt ist es gut gebaut und ich kann das Storybook mit meiner ersten vue3-Komponente ausführen - großartig! Nochmals vielen Dank,

@milewski Tolle Arbeit! Gerade getestet und es scheint zu funktionieren.

Soweit ich das beurteilen kann, sind die einzigen großen Änderungen die Importe und das createApp Zeug, oder? Vielleicht ist es möglich, abwärtskompatiblen Code zu schreiben, der die installierte vue-Version überprüft und automatisch das Richtige tut? Dann könnten wir vermeiden, zwei Versionen des Presets zu haben.

Ich habe versucht, unsere Vue-Beispiele zu aktualisieren, aber es scheint, dass einige der dort verwendeten Inhalte noch keine Vue3-Versionen haben. Im Allgemeinen scheint es immer noch viele Beta-Pakete und nicht übereinstimmende Pakete zu geben. Es ist daher möglicherweise besser, ein wenig zu warten, bevor Sie versuchen, die gesamte Codebasis des Storybooks, einschließlich der Addons usw. usw., zu aktualisieren. Es wird eine Menge Arbeit zu tun geben.

Soweit ich das beurteilen kann, sind die einzigen großen Änderungen die Importe und das createApp-Zeug, oder?

Ja, das würde ich auch sagen.

Von den Dingen, die ich ursprünglich ausprobiert habe (siehe meinen ersten Kommentar), war alles, was ich behalten habe, die Zusammenführung der Konfiguration - der Push des VueLoaderPlugin ist dank des Beitrags von @ milewski nicht mehr erforderlich. Ich gehe davon aus: cat:

Das (Neu-) Initialisieren des Storybooks war unkompliziert, wie in den Dokumenten beschrieben: npm install @storybook/vue --save-dev ; Ich musste nicht einmal andere Peer-Abhängigkeiten installieren (möglicherweise, weil wir sie sowieso bereits für unser Projekt installiert haben).

Dann könnten wir vermeiden, zwei Versionen des Presets zu haben.

Ich gehe davon aus, dass dies sehr vorzuziehen wäre und es vielleicht sogar möglich machen würde, die Änderungen in der nächsten Storybook-Veröffentlichung vorzunehmen…?

In Bezug auf die Vue-Beispiele könnte ich vielleicht helfen, Vue3-kompatible Versionen von (einigen) davon zu erstellen? (Ich bin jedoch noch kein Vue-Experte.)

@graup

Soweit ich das beurteilen kann, sind die einzigen großen Änderungen die Importe und das createApp-Zeug, oder? Vielleicht ist es möglich, abwärtskompatiblen Code zu schreiben, der die installierte vue-Version überprüft und automatisch das Richtige tut? Dann könnten wir vermeiden, zwei Versionen des Presets zu haben.

Ich hatte auch Probleme mit der Reaktivität. Ich habe versucht, der Art und Weise zu folgen, in der die aktuelle Version Objekte gesetzt / erweitert hat, aber vue3 verfolgt keine Änderungen mehr an diesem Objekttyp, insbesondere an den Objekten, die innerhalb der Renderfunktion erstellt wurden. Ich musste Referenzen mit ref erstellen () oder reaktiv (), um Updates auszulösen.

Ich habe versucht, unsere Vue-Beispiele zu aktualisieren, aber es scheint, dass einige der dort verwendeten Inhalte noch keine Vue3-Versionen haben. Im Allgemeinen scheint es immer noch viele Beta-Pakete und nicht übereinstimmende Pakete zu geben. Es ist daher möglicherweise besser, ein wenig zu warten, bevor Sie versuchen, die gesamte Codebasis des Storybooks, einschließlich der Addons usw. usw., zu aktualisieren. Es wird eine Menge Arbeit zu tun geben.

Ich habe versucht, dieses als Ausgangspunkt zu verwenden, aber es hat versucht, vue2-Zeug zu installieren, obwohl ich die Version explizit auf packagejson festgelegt hatte ... vue 3 funktioniert überhaupt nicht, wenn Sie den vue-template-compiler oder den alten vue loader installiert haben .. Es gibt möglicherweise einige Abhängigkeiten, die diese importieren

@ p3k

Das (Neu-) Initialisieren des Storybooks war unkompliziert, wie in den Dokumenten beschrieben: npm install @ storybook / vue --save-dev; Ich musste nicht einmal andere Peer-Abhängigkeiten installieren (möglicherweise, weil wir sie sowieso bereits für unser Projekt installiert haben).

Ich denke, dies ist passiert, weil ich vue3 und vue-loader ^ 16 als Abhängigkeit von der Datei packages.json aufgenommen habe

Ich würde mit einem @storybook/vue3 -Paket gut zurechtkommen, wenn das wirklich gebraucht wird.

Zu Ihrer Information, ich habe gerade einen zentralen Rendering-Fehler im Storybook Vue2-Code behoben: https://github.com/storybookjs/storybook/pull/11076

Dies bewirkt, dass das von addon-knobs und addon-controls verwendete "Aktualisierungsverhalten erzwingen" tatsächlich eine Aktualisierung erzwingt. Ich bin mir nicht sicher, ob es einen Einfluss auf den Vue3-Code hat, aber nur zu Ihrer Information, wenn Sie testen, führen Sie dieses Update bitte zusammen.

Fertig auch auf die Gabelversion angewendet!

Um nur meine zwei Cent einzutragen, es sieht so aus, als ob vite das _defacto_-Tool sein wird, das für vue 3 verwendet wird, ähnlich wie das vue-cli für vue 2 verwendet wurde. Wir hatten mehrere Benutzer, die Probleme hatten, alle Konfigurationseinstellungen zweimal durchzuführen, wenn sie verwendet wurden vue-cli mit Storybook, ein Probalem @pksunkara hat mit seinem Vue-

Bearbeiten: Ich habe gerade festgestellt, dass dies schwierig sein kann, da Vite Rollup unter der Haube anstelle von Webpack verwendet

Ich denke, ich sollte wirklich prüfen, ob Storybook nur das Webpack / Build-System des Benutzers verwenden kann und überhaupt keine eigene Konfiguration benötigt.

Abgesehen von den Gedanken denke ich, dass ich vite noch nicht ausgecheckt habe, aber vielleicht werden sie das vue cli plugin System anpassen

Wir denken oder wollen nicht, dass Vite "das" Werkzeug wird. Eine große Anzahl von Projekten benötigt die Leistung und Flexibilität, die Webpack bietet, und das Ziel von vite ist es nicht, all diese Anforderungen zu erfüllen.

Daher würde ich mir vorerst keine Sorgen um Vite machen und schon gar nicht um die Vue3-Unterstützung für das Storybook.

@LinusBorg Der Grund, warum ich dies ausdrücklich gestoßen sind , bei dem 90% der Community ihre Projekte mit vue-cli erstellt haben, und dass das Storybook kein Vue- erkennen und verwenden konnte. Das von cli verwaltete Build-System sorgte bei Vue-Benutzern für erhebliche Verwirrung.

Sehen Sie nicht, dass wir mit vite auf ein ähnliches Problem stoßen, wenn Leute versuchen, das Storybook in ein vite-basiertes Projekt zu integrieren?

nicht wirklich, nein. Vite selbst ist im Vergleich zu einem Vue CLI-Setup ziemlich einfach.

Was Vite bietet, wird von jeder einfachen Webpack-Konfiguration abgedeckt, die Regeln für den Umgang mit .vue , ts(x) und .css Dateien enthält. Und während es erweiterbar ist, ist , dass API ziemlich nah an das Metall , so dass wir Menschen nicht erwarten , dass benutzerdefinierte Transformationen des Hinzufügen und Sachen links und rechts.

Es gibt keine umfangreiche Plugin-API. Wenn Leute ausgefallene benutzerdefinierte Magie für ihre Projekte benötigen, werden sie wahrscheinlich sowieso früher als später Webpack benötigen, also entscheiden Sie sich für Vue CLI.

Vite sieht "Erweiterbarkeit für jeden Anwendungsfall" nicht als eines seiner Ziele an.

Daher würde ich sagen, dass jedes Vite-Projekt normalerweise mit Storybook / Vue funktionieren sollte, solange seine Webpack-Konfiguration die von mir festgelegten Grundregeln abdeckt, was meiner Meinung nach auch der Fall ist

@ LinusBorg Ok, das macht Sinn. Dankbar für den Beitrag 👍 Jede Anleitung des Core Vue-Teams ist immer sehr willkommen!

Vielen Dank für die Arbeit, die alle in das Storybook stecken. Ich kann es kaum erwarten, sie für mein Vue 3-Projekt zu verwenden :)

Da Vue3 jetzt in RC ist , kann es sinnvoll sein, erneut zu prüfen, ob das Hinzufügen von Vue3-Unterstützung zu v6 in Betracht gezogen werden sollte.

@hollandThomas wir sind schon mitten im RC, also muss vue3 in 6.1 kommen. Trotzdem sollten wir in ein paar Wochen die ersten 6.1-Alphas veröffentlichen. Wenn also jemand anfangen möchte, dies zusammenzustellen, gibt es sicher ein großes Publikum, das danach hungert!

Gibt es aktive Zweige, die wir nutzen oder zu denen wir beitragen können, um den Vue 3-Support vorzubereiten?

In unserer Organisation berührt unsere Vue-UI-Komponentenbibliothek alle unsere Vue-Projekte. Dies ist eines der ersten Dinge, die uns daran hindern, Vue 3 auszuprobieren, und wir würden gerne bei Bedarf beim Testen oder Migrieren helfen. Ich würde vermuten, dass andere im selben Boot sitzen.

In den Dokumenten https://v3.vuejs.org/guide/migration/introduction.html#overview finden Sie jetzt auch einen v2 -> v3-Migrationsleitfaden

@milewski @graup @ Aaron-Pool @elevatebart Wir sind jetzt in 6.1-Alpha. Möchte jemand dafür eine PR ausprobieren?

@ p3k danke. Gerade mit Ihren Beschreibungen erstellt, sieht für mich nach Arbeit aus, hat nicht so viel Funktionalität getestet
Webpack-Konfiguration kann einfach in main.js wie behoben werden

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

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

    return config
  }

und Lader kann sein

mit render.js steckte ein wenig fest, wie man in .storybook konfiguriert

@shilman ist diese Version '6.1.0-alpha.1' mit vue3 kompatibel?

nicht sicher, aber sieht aus wie nein. noch zweite Version unterstützt ..

Nein noch nicht. Ich hoffe, dass jemand hier dazu beitragen wird, wie in meinem obigen Kommentar angegeben

@shilman Ich hatte noch keine Gelegenheit, Vue 3 zu verwenden. 😞 Meine Arbeit hat eine Frist für eine Vue 2-basierte Produktveröffentlichung in diesem Monat, daher hatte ich keine Zeit, mich damit zu beschäftigen.

Die Aufgaben sind also im Grunde

  • kopiere app / vue nach app / vue3
  • Stellen Sie sicher, dass Sie alle Framework-Refs ändern
  • Übernehmen Sie die von https://github.com/milewski/storybook/tree/vue3
  • Beispiele für Küchensenken ändern oder erstellen
  • Probieren Sie verschiedene Kombinationen von Story / Vue3-Komponentendefinitionsmethoden aus und prüfen Sie, ob sie funktionieren

?

@chartinger klingt für mich nach dem direktesten Weg. Wenn wir herausfinden können, wie bedingt diese Änderungen basierend auf der von Ihnen verwendeten Version von vue angewendet und ein einzelnes Paket verwaltet werden, wäre dies sogar noch besser.

Ich habe Experimente unter https://github.com/chartinger/storybook/tree/app-vue3 durchgeführt (einige Änderungen gegenüber der obigen Gabelung erforderlich), was ich bisher gefunden habe:

Gut:

  • Grundlegende vue3-Komponenten werden gerendert
  • Änderungen von Steuerelementen werden live aktualisiert

Schlecht:

  • Es scheint nicht möglich zu sein, klassendekorierte Vue-Komponenten zum Laden zu bringen
  • Keine Ahnung, ob Knöpfe funktionieren, ich wollte Storybook mit vue3 lernen, also keinen Demo-Code oder frühere Projekte zum Testen
  • Keine automatische Erkennung von Kontrollattributen von Requisiten

Andere:

  • Das Importieren der Komponente in StoryMeta bewirkt nichts, muss sich in der Story befinden
  • Globale Komponenten sind jetzt an die App-Instanz gebunden. Ist es möglich, sie für die .storybook / Preview.js oder auf andere Weise bereitzustellen? (Wird es benötigt?)

@elevatebart Wie ist der Status von vue-docgen-api für vue3? ☝️

Es ist insgesamt kompatibel. Ereignisausgabe in der Setup-Funktion wird jedoch noch nicht behandelt.

Dafür brauche ich noch eine performante Möglichkeit, Setup-Funktionen aufzurufen und diese Emissionen zu erkennen.

Da sich die Funktionen in mehreren Dateien befinden können, kann dies einige Zeit dauern.

@chartinger möchten Sie Ihren Zweig mit einigen der Experimente aktualisieren? Ich möchte mich mit dem Problem "Autodetection of Control Attribute" befassen, das Sie gefunden haben, und ich kann wahrscheinlich jemanden dazu bringen, sich mit dem klassendekorierten Problem zu befassen.

@shilman Ich habe ein vue3-Beispiel hinzugefügt, das auf vue-cli basiert, und das Schaltflächenbeispiel auf Komposition und Klassen-API migriert (ich habe es im Code als Annotation bezeichnet, die sich ändern muss, aber

Vergessen Sie zum Testen nicht, npm link und npm link @storybook/vue3 entsprechend zu verwenden.

Zu Ihrer Information: Ich habe gerade @andoshin11/storybook-vue3 für npm veröffentlicht. Probieren Sie es einfach aus 👇

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

Übrigens ist Vue 3 offiziell aus der Beta.

PS. Vielen Dank für Ihre Gabel / Version von Storybook @ andoshin11

// edit: lies einfach den Thread und tolle Arbeit Jungs .. Ich könnte einen Versuch machen :)

Tolle Arbeit an alle. Ich würde das gerne in die Version 6.1 aufnehmen. Möchte jemand das übernehmen? Es wird ein sehr starker Beitrag sein. Im Idealfall unterstützen wir vue3 und vue2 im selben Paket und führen eine automatische Erkennung oder Benutzerkonfiguration durch, um herauszufinden, welche Version verwendet werden soll.

Umfang dieser Arbeit:

  • [] Nehmen Sie die erforderlichen Änderungen vor, um vue3 zu unterstützen
  • [] Hinzufügen von e2e-Tests für vue3 zu einem vue-Projekt (wir haben bereits eine Vorlage dafür, und es sollte nicht zu schwierig sein)
  • [] Aktualisierung der Dokumentation
  • [] Verfügbar für Bugfixes und Support, wenn wir dies in der Vorabversion bewerben

Bitte kontaktieren Sie mich wegen unserer Zwietracht, wenn Sie daran arbeiten möchten - ich habe einen temporären #vue3 -Kanal erstellt, um darüber zu diskutieren! https://discord.com/invite/UUt2PJb

Gibt es eine ETA für die Unterstützung von Vue 3 im Storybook, da Vue 3 nicht mehr in der Beta-Version ist und in ein paar Monaten als latest -Tag verfügbar sein wird?

Es wäre auch hilfreich, CHANGELOG zu @storybook/vue hinzuzufügen - https://github.com/storybookjs/storybook/tree/master/app/vue , damit wir uns ein Bild machen können auf was sich mit @storybook/vue Versionen geändert hat.

@palerdot Ich würde gerne vue3-Unterstützung als Teil von Storybook 6.1 erhalten. auf der Suche nach jemandem, der dazu beiträgt - sind Sie interessiert? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

Für das CHANGELOG haben wir eines für das gesamte Monorepo und es ist nicht realistisch, für jedes Framework ein zusätzliches zu verwalten. Ich werde jedoch in Betracht ziehen, mit jeder Release-Ankündigung Framework-spezifische Zusammenfassungen zu erstellen, was wahrscheinlich das ist, was Sie als Benutzer tatsächlich wollen.

@shilman

auf der Suche nach jemandem, der dazu beiträgt - sind Sie interessiert?

Leider kann ich derzeit keine Zeit dafür festlegen (ganz zu schweigen davon, dass ich mit der Codebasis storybook nicht so vertraut bin).

Ich werde in Betracht ziehen, mit jeder Release-Ankündigung Framework-spezifische Zusammenfassungen zu erstellen, was wahrscheinlich das ist, was Sie als Benutzer tatsächlich wollen.

Vielen Dank. Das wäre besser. Du hast Recht. Als Benutzer möchte ich nur wissen, welches Framework (wie beispielsweise Vue 3) bei jeder Veröffentlichung unterstützt wird. Das Hinzufügen dieser Informationen zum Haupt-CHANGELOG ist daher hilfreich.

Ich lasse nur einen Datenpunkt fallen, an dem Vue3 gerne auch mit dem Storybook arbeiten würde. Vielleicht könnten hier einige der Vue Core / Tooling-Entwickler helfen, wie @Akryum ?

@shilman
Ich glaube, ich habe die Lösung gefunden, um mit vue2 & vue3 ein Storybook zu erstellen. Ich versuche einen POC daraus zu machen, wenn ich hoffentlich die Zeit dafür finde ;-). Kein Versprechen. ^^
Aber ich dachte, ich teile meine Idee bereits.
Ich habe Vue Demi gefunden , das vielversprechend erscheint, um das Problem der Verwendung eines Pakets für vue2 & vue3 zu lösen.
Natürlich gibt es noch viel zu tun mit Compostion API. Aber ich denke, mit diesem Paket ist es ein Schritt vorwärts zu einem vielversprechenden Paket

13224 gleiches Problem. @shilman sollten wir in der nächsten Storybook-Version auf die Unterstützung von Vue 3 warten?

Ja, hoffentlich landet es in 6.2. Ich suche immer noch jemanden, der es möglich macht!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen