Storybook: Vue: أضف دعم Vue3

تم إنشاؤها على ٥ مايو ٢٠٢٠  ·  61تعليقات  ·  مصدر: storybookjs/storybook

لقد حاولت للتو تشغيل Storybook باستخدام تطبيق Vue3 (تجريبي) وحصلت على بعض الأخطاء ... تمكنت من حل بعض الأخطاء في دمج تهيئة Webpack الخاصة بنا ودفع المكوّن الإضافي لودر Vue3:

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 } };
    }
};

ما زلت أتلقى تحذيرًا وخطأ في الغلاف:

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'

- مع ذلك يبني كتاب القصص ويفتح المتصفح. ها أنا عالق مع رسالة الخطأ هذه:

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)

هل هناك نهج أفضل من هذا؟ أنا مجموع n00b في القصص القصيرة لذا سأكون سعيدًا بأي مؤشر أو مساعدة. (لقد بحثت في المشكلات عن vue3 بدون أي نتائج ذات مغزى ، على الأقل بقدر ما أستطيع أن أقول.)

P1 vue feature request help wanted todo

التعليق الأكثر فائدة

نعم ، آمل أن تهبط في 6.2. ما زلت تبحث عن شخص ما لتحقيق ذلك!

ال 61 كومينتر

Automention: يا @ backbone87pocka، تم وضع علامة باسمك! هل يمكنك المساعدة هنا؟

حسنًا .. قد نحتاج إلى إجراء إعداد مسبق لـ 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() ، ويجب تطبيق جميع التكوينات وما إلى ذلك على المثيل

فرق
21 ج 21

<var _vue = _interopRequireDefault (تتطلب ("vue")) ؛

var _vue = _interopRequireDefault (تتطلب ("vue"). createApp) ؛
43 ج 43

<var root = new _vue ["افتراضي"] ({

var root = _vue ["افتراضي"] ({
67 ج 67

<_vue ["افتراضي"]. config.errorHandler = showException؛

root.config.errorHandler = showException ،
88c88

<root. $ mount ('# root')؛

root.mount('#root');

""

أنا الآن عالق مع vue/dist/client/preview/index.js لأن نسخة التطبيق مطلوبة هناك ، على سبيل المثال لتعريف خاصية extends - ويبدو أن هذا ممكن فقط للتنفيذ مع بناء كتاب قصص مناسب ...

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

نأمل أن تكون هذه الخطوات الصغيرة مفيدة بعض الشيء.

مرحباً بالجميع! يبدو أنه لم يكن هناك الكثير مما يحدث في هذه المشكلة مؤخرًا. إذا كانت لا تزال هناك أسئلة أو تعليقات أو أخطاء ، فلا تتردد في مواصلة المناقشة. للأسف ، ليس لدينا الوقت لحل كل مشكلة. نحن دائمًا منفتحون على المساهمات ، لذا يرجى إرسال طلب سحب لنا إذا كنت ترغب في المساعدة. سيتم إغلاق المشكلات غير النشطة بعد 30 يومًا. شكر!

صدم

pksunkaragraup @ هارون-بركة يفعل أي شخص لديهم الوقت لحفر في هذا؟ إذا كانت هناك تغييرات عاجلة نحتاج إليها ويمكننا إدخالها في الإصدار 6.0 ، فسيكون الآن أفضل وقت للقيام بذلك!

سنظل بحاجة إلى دعم Vue2 لفترة طويلة بعد إصدار Vue3. هناك شيء واحد نحتاج إلى التحقق منه وهو ما إذا كان بإمكاننا بطريقة ما دعمهما في نفس الوقت.

بالنظر أيضًا إلى أن Vue3 لم يخرج بعد من الإصدار التجريبي ، ونفترض أننا نريد إخراج Storybook v6 ، سأؤجل دعم vue3 ليكون بعد إصدار v6

أخطط للنظر في هذا قريبًا ، لكن لا يمكنني إعطاء ETA. لم تسنح الفرصة لتجربة Vue 3 حتى الآن.

أتفق مع pksunkara أن هذا ليس عاجلاً لـ 6.0 لأنه لا يزال

شكرا غراوب. أوافق أيضًا على أنه ليس عاجلاً - لا ينبغي أن نتوقع منا دعم البرامج التي لم يتم إصدارها في Storybook. قلقي الوحيد هو أنه ، على سبيل المثال ، أطلقنا الإصدار 6.0 في يوليو ، وتم إطلاق Vue3 في أغسطس ، وسنذهب لدعمه في سبتمبر ، ووجدنا أن هناك تغييرًا مطلوبًا. ولا يمكننا الحصول على هذا التغيير المفاجئ دون ظهور نسخة رئيسية في أكتوبر ، والتي من المفترض أن تحدث في يونيو 2021 بدلاً من ذلك.

كنت أحاول فقط الحصول على بعض الأضواء على قناة الخلاف الآن حول كيف يمكنني أن أحاول أن أجعلها تعمل مع Vue 3 ، سيتطلب الأمر إعدادًا مسبقًا جديدًا لأن منطق تمهيد الإطار مختلف بعض الشيء .. أنا لا أميل أعتقد أن الكود الحالي في مجلد vue سيعمل مع vue 3 ..

أنا أفهم shilman. اسمحوا لي أن أوضح أكثر قليلاً لأنه يبدو أنني لم أفهم وجهة نظري بشكل صحيح.

من خلال ما أفهمه من محاولات milewski ، لا نحتاج فقط إلى إعداد مسبق جديد ولكننا نحتاج أيضًا إلى إجراء تغييرات @storybook/vue .

لكننا ما زلنا بحاجة إلى دعم Vue v2 لفترة طويلة ، فلن ينتقل الجميع إلى Vue v3. لذلك ، ما لم نرد أن نقول أن Vue v2 لم يعد مدعومًا ، فسيكون من الأفضل إنشاء حزمة جديدة @storybook/vue3 .

ولكن إذا قررنا قطع دعم Vue v2 ، فعندئذ نعم ، أوافق على أنه من المحتمل أن نقوم بتعطيل التغييرات قبل Storybook v6.

pksunkara الحل المقترح يبدو رائعًا. 💯

لا أعتقد أنه يمكننا قطع دعم vue2 في أي وقت قريبًا ، لذلك نود تشغيل هاتين الحزمتين بشكل متوازٍ ، وربما إجراء فاصل كامل في بعض الإصدارات الرئيسية المستقبلية (7.0؟ 8.0؟ مطلقًا؟). بعد إصدار الحزمتين ، يمكننا استخدام إحصائيات تنزيل npm لتحديد الوقت المناسب لإزالة دعم Vue2. WDYT؟

ccndelangen

لقد قمت بالتصوير: https://github.com/milewski/storybook/tree/vue3 هذا يعمل بشكل أساسي بالنسبة لي مع vue3 ..

ومع ذلك ، كان هناك جزء من التعليمات البرمجية لست متأكدًا مما كان من المفترض أن يفعله https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58 لم أستخدم كتاب القصص من قبل .. أردت فقط البدء في استخدامه الآن مع مشروع vue3 الخاص بي ..

بقدر ما أستطيع أن أقول https://storybook.js.org/docs/guides/guide-vue/ باتباع التعليمات الواردة في هذا الدليل ، حصلت على المكون الخاص بي باستخدام vue 3 الذي تم تقديمه بنجاح ... بدون هذا الجزء من الكود تركت معطلة ... ربما هناك حاجة للعمل مع بعض المكونات الإضافية المحددة؟ هل يمكن لأحد أن يخبرني بأي من 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.

أوم. كانت هناك مشكلة في الكتابة المطبوعة. لقد عطلت للتو فحص ts الآن .. اسحب أحدث رمز من فرعي وحاول مرة أخرى

نعم ، الآن الأمر يعمل بدون أخطاء.

re yarn build (select vue) تلقيت الرسالة _storybook WARN build لا شيء لبناء! _ - هل هذا صحيح؟

لا في القائمة التفاعلية التي تظهر ، يلزمك الضغط على شريط المسافة للاختيار

image

آه! آسف يا سيئة ، بالتأكيد.

الآن تم بناؤه بشكل جيد ويمكنني تشغيل القصص القصيرة باستخدام مكون vue3 الأول - رائع! شكرا مرة أخرى ، milewski

milewski عمل عظيم! اختبرت للتو ويبدو أنها تعمل.

بقدر ما أستطيع أن أقول ، التغييرات الكبيرة الوحيدة هي الواردات والأشياء createApp ، أليس كذلك؟ ربما من الممكن كتابة رمز متوافق مع الإصدارات السابقة يتحقق من إصدار vue المثبت ويفعل الشيء الصحيح تلقائيًا؟ ثم يمكننا تجنب وجود نسختين من الإعداد المسبق.

لقد حاولت تحديث أمثلة vue الخاصة بنا ولكن يبدو أن بعض العناصر المستخدمة هناك لا تحتوي على إصدارات vue3 حتى الآن. بشكل عام ، يبدو أنه لا يزال هناك الكثير من الحزم التجريبية وغير المتطابقة ، لذلك قد يكون من الأفضل الانتظار قليلاً قبل محاولة تحديث قاعدة رموز القصة كاملة ، بما في ذلك الإضافات وما إلى ذلك. سيكون هناك الكثير من العمل للقيام به.

بقدر ما أستطيع أن أقول ، التغييرات الكبيرة الوحيدة هي الواردات وعناصر createApp ، أليس كذلك؟

نعم أود أن أقول ذلك أيضًا.

من الأشياء التي جربتها في البداية (انظر تعليقي الأولي) كل ما احتفظت به هو دمج التكوين - لم يعد دفع VueLoaderPlugin ضروريًا ، بعد الآن ، بفضل مساهمة @ milewski ، أفترض: القط:

(إعادة) تهيئة القصص القصيرة كانت مباشرة كما هو موضح في المستندات: npm install @storybook/vue --save-dev ؛ لم أكن بحاجة حتى إلى تثبيت أي تبعيات أخرى للأقران (قد يكون ذلك بسبب أننا قمنا بالفعل بتثبيتها لمشروعنا ، على أي حال).

ثم يمكننا تجنب وجود نسختين من الإعداد المسبق.

أفترض أن هذا سيكون مفضلاً للغاية ، وربما يجعل من الممكن إجراء التغييرات في إصدار القصة القصيرة التالي ...؟

فيما يتعلق بأمثلة vue ، ربما يمكنني المساعدة في إنشاء إصدارات متوافقة مع vue3 من (بعضها)؟ (أنا لست خبيرًا في vue ، رغم ذلك).

تضمين التغريدة

بقدر ما أستطيع أن أقول ، التغييرات الكبيرة الوحيدة هي الواردات وعناصر createApp ، أليس كذلك؟ ربما من الممكن كتابة رمز متوافق مع الإصدارات السابقة يتحقق من إصدار vue المثبت ويفعل الشيء الصحيح تلقائيًا؟ ثم يمكننا تجنب وجود نسختين من الإعداد المسبق.

واجهت مشكلات في التفاعل أيضًا ، حاولت اتباع الطريقة التي كان الإصدار الحالي يضبط بها / يوسع الكائن ولكن vue3 لم يعد يتتبع التغييرات على هذا النوع من الكائنات ، خاصة تلك التي تم إنشاؤها داخل وظيفة التجسيد ، كان علي إنشاء مراجع باستخدام المرجع () أو رد الفعل () لتشغيل التحديثات ..

لقد حاولت تحديث أمثلة vue الخاصة بنا ولكن يبدو أن بعض العناصر المستخدمة هناك لا تحتوي على إصدارات vue3 حتى الآن. بشكل عام ، يبدو أنه لا يزال هناك الكثير من الحزم التجريبية وغير المتطابقة ، لذلك قد يكون من الأفضل الانتظار قليلاً قبل محاولة تحديث قاعدة رموز القصة كاملة ، بما في ذلك الإضافات وما إلى ذلك. سيكون هناك الكثير من العمل للقيام به.

حاولت استخدام ذلك كنقطة بداية ، لكنه حاول تثبيت أشياء vue2 حتى لو كنت قد قمت بتعيين الإصدار صراحة على packagejson ... vue 3 لا يعمل على الإطلاق إذا كان لديك vue-template-compiler أو برنامج vue download القديم مثبت .. قد يكون هناك بعض التبعيات التي تقوم باستيراد تلك الأشياء

@ p3k

(إعادة) تهيئة القصص القصيرة كانت مباشرة كما هو موضح في المستندات: npm install @ storybook / vue --save-dev؛ لم أكن بحاجة حتى إلى تثبيت أي تبعيات أخرى للأقران (قد يكون ذلك بسبب أننا قمنا بالفعل بتثبيتها لمشروعنا ، على أي حال).

أعتقد أن هذا حدث لأنني أدرجت vue3 و vue-loader ^ 16 كاعتماد على الحزم. json

سأكون بخير مع حزمة @storybook/vue3 إذا كان ذلك ضروريًا حقًا.

لمعلوماتك ، لقد أصلحت للتو خطأ عرض أساسيًا في كود Storybook Vue2: https://github.com/storybookjs/storybook/pull/11076

يؤدي هذا إلى "فرض سلوك التحديث" الذي يستخدمه addon-knobs و addon-controls لفرض التحديث فعليًا. لست متأكدًا مما إذا كان له أي تأثير على كود Vue3 ، ولكن لمعلوماتك فقط إذا كنت تختبر ، يرجى الدمج في هذا التحديث.

تم تطبيقه أيضًا على الإصدار المتشعب!

لمجرد أن وضعت في بلدي اثنين سنتا، يبدو VITE ستكون الأدوات _defacto_ المستخدمة في النظرية 3، يشبه إلى حد كبير تم استخدام النظرية-المبادرة القطرية لالنظرية 2. كان لدينا العديد المستخدمين لديهم مشاكل مع الحاجة إلى القيام بكل الإعداد التهيئة مرتين عند استخدام vue-cli مع Storybook ، قام للقصص القصصية. يجب أن نتأكد من أن أي إعداد / حزمة نقوم بإعدادها تعمل بسلاسة تامة مع vite ، إن أمكن.

تحرير: لقد أدركت للتو أن هذا قد يكون صعبًا ، لأن Vite يستخدم تراكمًا تحت الغطاء ، بدلاً من حزمة الويب

أعتقد أنني يجب أن أبحث حقًا في معرفة ما إذا كان بإمكان Storybook استخدام نظام webpack / build الخاص بالمستخدمين ولا يحتاج إلى التكوين الخاص به على الإطلاق.

بصرف النظر عن الأفكار ، أعتقد أنني لم أقم بفحص برنامج vite ، لكن ربما سيعملون على تكييف نظام المكون الإضافي vue cli

نحن لا نفكر أو نهدف إلى أن يصبح Vite "الأداة". سيحتاج عدد كبير من المشاريع إلى القوة والمرونة التي يوفرها webpack ، وهدف vite ليس تلبية كل هذه الاحتياجات.

لذلك لن أقلق كثيرًا بشأن vite في الوقت الحالي ، وبالتأكيد ليس لدعم Vue3 لقصص القصص القصيرة نفسها.

LinusBorg السبب الذي طرح ذلك تحديدًا هو أننا غالبًا ما واجهنا مشكلة مماثلة مع Vue 2 ، حيث أنشأ 90 ٪ من المجتمع مشاريعهم باستخدام vue-cli ، وحقيقة أن كتاب القصص لا يمكنه اكتشاف واستخدام Vue- تسبب نظام البناء المُدار cli في قدر كبير من الارتباك لمستخدمي Vue.

ألا ترى أننا نواجه مشكلة مماثلة مع vite حيث يحاول الناس دمج القصص القصيرة في مشروع قائم على vite؟

لا حقا لا. يعد Vite نفسه عظامًا جدًا مقارنة بإعداد Vue CLI.

يتم تغطية ما يقدمه Vite بواسطة أي تكوين Webpack بسيط يحتوي على قواعد للتعامل مع ملفات .vue و ts(x) و .css . وعلى الرغم من أنه قابل للتوسعة ، إلا أن واجهة برمجة التطبيقات هذه قريبة جدًا من المعدن لذلك لا نتوقع من الأشخاص إضافة تحويلات مخصصة وأشياء يسارًا ويمينًا.

لا يحتوي على واجهة برمجة تطبيقات مكونة شاملة حسب التصميم. إذا احتاج الأشخاص إلى سحر مخصص فاخر لمشاريعهم ، فمن المحتمل أنهم سيحتاجون إلى Webpack على أي حال عاجلاً وليس آجلاً ، لذا انتقل إلى Vue CLI.

لا يرى Vite "القابلية للتمدد لأي حالة استخدام" كأحد أهدافه.

لذلك أود أن أقول إن أي مشروع Vite يجب أن يعمل عادةً مع Storybook / vue طالما أن تكوين webpack الخاص به يغطي القواعد الأساسية التي وضعتها ، والتي أعتقد أنها تعمل

LinusBorg حسنًا ، هذا منطقي. شاكرين للمساهمة 👍 أي توجيه من فريق Core Vue هو موضع تقدير كبير دائمًا!

شكرًا على العمل الذي يبذله الجميع في القصص القصيرة ، لا يمكنك الانتظار لاستخدامه في مشروع Vue 3 الخاص بي :)

نظرًا لأن Vue3 موجود الآن في RC ، فقد يكون من المفيد إعادة تقييم ما إذا كان ينبغي النظر في إضافة دعم Vue3 إلى الإصدار 6 أم لا.

hollandThomas نحن بالفعل في منتصف RC لذا يجب أن يأتي vue3 في 6.1. ومع ذلك ، يجب أن نصدر أول 6.1 ألفا في غضون أسابيع قليلة ، لذا إذا أراد أي شخص البدء في تجميع هذا معًا ، فأنا متأكد من أن هناك جمهورًا كبيرًا متعطشًا لهذا!

هل هناك أي فروع نشطة يمكننا استخدامها أو المساهمة فيها للمساعدة في تجهيز دعم Vue 3؟

في مؤسستنا ، تلامس مكتبة Vue ui-component الخاصة بنا جميع مشاريع Vue الخاصة بنا ، لذا فهي من أولى الأشياء التي تمنعنا من تجربة Vue 3 ، وسنكون حريصين على المساعدة في الاختبار أو الترحيل إذا لزم الأمر. أعتقد أن الآخرين في نفس القارب.

يوجد الآن أيضًا دليل ترحيل v2 -> v3 في المستندات https://v3.vuejs.org/guide/migration/introduction.html#overview

milewskigraup @ هارون-بركةelevatebart نحن في 6.1 ألفا الآن. أي شخص يريد أن يأخذ لقطة في العلاقات العامة لهذا؟

@ p3k شكرا. تم إنشاؤه للتو باستخدام أوصافك ، بالنسبة لي يبدو وكأنه عمل ، ولم يختبر الكثير من الوظائف
يمكن إصلاح webpack config بسهولة في 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؟

لست متأكدًا ولكن يبدو أنه لا. لا يزال يدعم الإصدار الثاني ..

كلا ليس بعد. آمل أن يساهم أحد هنا في ذلك ، حسب تعليقي أعلاه

shilman ما زلت لم تتح لي الفرصة لاستخدام Vue 3 حتى الآن 😞 عملي لديه موعد نهائي لإصدار منتج Vue 2 هذا الشهر ، لذلك لم يكن لدي الوقت لأشتغل.

لذا فإن المهام هي في الأساس

  • انسخ التطبيق / vue إلى app / vue3
  • تأكد من تعديل جميع المراجع الإطارية
  • تطبيق التغييرات التي أجراهاmilewski في https://github.com/milewski/storybook/tree/vue3
  • تعديل أو إنشاء أمثلة جديدة لمطابخ المطابخ
  • جرب تركيبات أسلوب تعريف مكون القصة / vue3 المختلفة وتحقق مما إذا كانت تعمل

؟

chartinger يبدو وكأنه المسار الأكثر مباشرة بالنسبة لي. إذا تمكنا من معرفة كيفية تطبيق هذه التغييرات بشكل مشروط بناءً على إصدار vue الذي تستخدمه والحفاظ على حزمة واحدة ، فسيكون ذلك أفضل.

لقد أجريت تجارب عرض في https://github.com/chartinger/storybook/tree/app-vue3 (بحاجة إلى بعض التغييرات من الشوكة أعلاه) ما وجدته حتى الآن:

حسن:

  • سيتم عرض مكونات vue3 الأساسية
  • يتم تحديث التغييرات من عناصر التحكم مباشرة

سيئة:

  • لا يمكن تحميل مكونات vue مزينة بالفئة
  • لا توجد فكرة عما إذا كانت المقابض تعمل ، كنت أرغب في تعلم القصص القصيرة باستخدام vue3 لذلك لا يوجد كود تجريبي أو مشاريع سابقة لاختبارها
  • لا يوجد اكتشاف تلقائي لسمات التحكم من الدعائم

آخر:

  • استيراد المكون في StoryMeta لا يفعل شيئًا ، يجب أن يكون في القصة
  • ترتبط المكونات العامة الآن بمثيل التطبيق ، فهل من الممكن توفيرها إلى .storybook / preview.js أو بطريقة أخرى؟ (هل هو مطلوب؟)

elevatebart ما هي حالة vue-docgen-api لـ vue3؟ ☝️

إنه متوافق بشكل عام. ولكن لم يتم التعامل مع الأحداث المنبعثة في وظيفة الإعداد بعد.

لهذا ، ما زلت بحاجة إلى طريقة فعالة لإدخال وظائف الإعداد واكتشاف تلك الانبعاثات.

نظرًا لأن الوظائف يمكن أن تكون في ملفات متعددة ، فقد يستغرق الأمر بعض الوقت.

chartinger تريد تحديث فرعك ببعض التجارب؟ أود أن أتعمق في مشكلة "الكشف التلقائي لسمات التحكم" التي وجدتها ، ويمكنني على الأرجح أن أجعل شخصًا ما ينظر إلى المشكلة المزينة بالفصل.

shilman لقد أضفت مثالًا vue3 ، استنادًا إلى vue-cli وقمت بترحيل مثال الزر إلى التكوين والفئة api (أطلقت عليه التعليق التوضيحي في الكود ، والذي يجب أن يتغير ولكنه سيفعل في الوقت الحالي). بطريقة ما تم تحميل مكونات فئة API هذه المرة.

للاختبار لا تنسَ أن npm link و npm link @storybook/vue3 وفقًا لذلك.

لمعلوماتك: لقد نشرت للتو @andoshin11/storybook-vue3 إلى npm ، لذا لا تتردد في تجربته 👇

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

راجع للشغل ، Vue 3 خارج الإصدار التجريبي رسميًا.

ملاحظة. شكرًا لك على إصدار / إصدار Storybook @ andoshin11

// تحرير: ما عليك سوى قراءة الموضوع وعمل رائع يا رفاق .. قد أشاهد هذا :)

عمل رائع للجميع. أرغب في إدخال هذا في الإصدار 6.1. هل يريد أي شخص أن يأخذ هذا؟ ستكون مساهمة ذات تأثير كبير للغاية. من الناحية المثالية ، ندعم vue3 و vue2 في نفس الحزمة ، ونقوم ببعض الاكتشاف التلقائي أو تكوين المستخدم لمعرفة الإصدار الذي يجب استخدامه.

نطاق هذا العمل:

  • [] إجراء التغييرات اللازمة لدعم vue3
  • [] إضافة اختبارات e2e لمشروع vue3 a vue (لدينا بالفعل نموذج لهذا ، ولا ينبغي أن يكون صعبًا جدًا)
  • [] تحديث الوثائق
  • [] أن تكون متاحًا لإصلاحات الأخطاء والدعم أثناء الترويج لها في الإصدار التجريبي

يرجى الاتصال بي بشأن الخلاف لدينا إذا كنت ترغب في العمل على هذا - لقد أنشأت قناة مؤقتة #vue3 للمناقشة! https://discord.com/invite/UUt2PJb

تم إنجاز القليل من العمل على https://github.com/storybookjs/storybook/issues/12632. تدوينها هنا حتى لا تضيع.

نظرًا لأن Vue 3 خارج الإصدار التجريبي وسيكون متاحًا في latest tag في غضون شهرين ، فهل هناك ETA متاح لدعم Vue 3 في القصص المصورة؟

أيضًا ، سيكون من المفيد إضافة CHANGELOG إلى @storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue ، حتى نتمكن من الحصول على فكرة على ما تغير مع إصدارات @storybook/vue .

palerdot ، أود الحصول على دعم vue3 كجزء من Storybook 6.1. تبحث عن شخص ما للمساهمة في هذا - هل أنت مهتم؟ https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

أما بالنسبة لـ CHANGELOG ، فلدينا واحدًا لكامل monorepo وليس من الواقعي الاحتفاظ بواحد إضافي لكل إطار عمل. ومع ذلك ، سأفكر في عمل ملخصات خاصة بإطار العمل مع كل إعلان إصدار ، وهو على الأرجح ما تريده بالفعل كمستخدم.

تضمين التغريدة

تبحث عن شخص ما للمساهمة في هذا - هل أنت مهتم؟

لسوء الحظ ، لن أكون قادرًا على الالتزام بالوقت في هذا حاليًا (ناهيك عن أنني لست على دراية بقاعدة كود storybook ).

سأفكر في عمل ملخصات خاصة بإطار العمل مع كل إعلان إصدار ، وهو على الأرجح ما تريده بالفعل كمستخدم.

شكرا لك. هذا سيكون أفضل. انت على حق. كمستخدم ، أريد فقط معرفة إطار العمل المدعوم (مثل Vue 3 على سبيل المثال) مع كل إصدار. لذا ، فإن إضافة هذه المعلومات إلى CHANGELOG الرئيسي سيكون مفيدًا.

مجرد إسقاط نقطة بيانات أود أن يعمل Vue3 مع القصص القصيرة أيضًا. ربما يمكن لبعض مطوري Vue core / الأدوات المساعدة هنا ، مثل Akryum ؟

تضمين التغريدة
أعتقد أنني وجدت الحل للعمل مع vue2 و vue3. أحاول أن أجعل POC منه إذا آمل أن أجد الوقت لذلك ؛-). لا وعد. ^ ^
لكنني اعتقدت أنني أشارك فكرتي بالفعل.
لقد وجدت Vue Demi الذي يبدو واعدًا لحل مشكلة استخدام حزمة واحدة لـ vue2 و vue3.
بالطبع لا يزال هناك عمل يتعين القيام به مع API السماد. لكنني أعتقد أن هذه الحزمة هي خطوة واحدة للأمام نحو حزمة واعدة

13224 نفس المشكلة. shilman هل يجب أن ننتظر دعم Vue 3 في إصدار Storybook التالي؟

نعم ، آمل أن تهبط في 6.2. ما زلت تبحث عن شخص ما لتحقيق ذلك!

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

miljan-aleksic picture miljan-aleksic  ·  3تعليقات

tlrobinson picture tlrobinson  ·  3تعليقات

ZigGreen picture ZigGreen  ·  3تعليقات

shilman picture shilman  ·  3تعليقات

sakulstra picture sakulstra  ·  3تعليقات