نسخة مكررة من # 1870 و # 3423. دعنا نواصل المناقشة هناك

إنشاء جديد للمبتدئين للاستنسل الحالي وإنشاء SB 5

@ Edd-Strickland تريد العمل على إصدار دعم stencl 🎉

لقد قمت بترقية بداية البوليمر باستخدام الاستنسل إلى أحدث إصدار من SB بحاجة إلى بعض المساعدة في إزالة البوليمر وإضافة مُضاعِف الاستنسل الآن

أهلا،

@ Edd-Strickland للحصول على معلومات فقط ، لقد قمت بتطبيق Stencil داخل Storybook كما فعلت في البداية ، في هذا المشروع: https://github.com/vogloblinsky/nutrition-web-components

لقد استخدمت كاتب HTML الخاص بـ Storybook.

في الوقت الحالي مع Storybook & Stencil ، كان علي أن:

• أضف رأسًا مخصصًا يشير إلى كل ملف JavaScript جذر تم إنشاؤه بواسطة Stencil
• إضافة ملفات ثابتة تم إنشاؤها بواسطة Stencil في Storybook

أعتقد أن المشكلة الرئيسية هي استخدام Webpack بواسطة Storybook للتعامل مع ملفات JavaScript المستوردة داخل القصة. سير العمل المثالي هو استيراد ملف JS الخاص بمكون الويب فقط.

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

مرحبًا بالجميع ، لقد قمت بإنشاء غلاف يمكن تثبيته على مشروع استنسل component نوع المشروع. آمل أن يساعد. https://github.com/nisheed2440/stencil-storybook-wrapper

تبدو جيدة حقًا سأختبرها يوم الاثنين. عمل جيد :)

هل سيتم تحويل هذا إلى جزء رسمي من Storybook؟ لدي حاجة ماسة لهذا!

otw نحاول ، هل ستتمكن من مساعدتنا؟

ndelangen سأكون سعيدًا باختبار الأشياء وتقديم تقارير التعليقات / الأخطاء.

هل سيعمل هذا مع LitElement (ومكونات الويب بشكل عام) أم مجرد Stencil؟

@ nisheed2440 الغلاف الخاص بك يبدو واعدًا ،

@ nisheed2440 لقد كنت مشغولًا جدًا (آسف للجميع) ولكن كان لدي نافذة صغيرة جدًا اليوم لاختبار إصدار فانيليا جدًا من هذا محليًا وهو جيد حقًا. يعمل بشكل جيد.

سنقضي بعض الوقت في الأسبوع القادم في محاولة لدمجه في مشروع موجود لمعرفة كيف يمكن أن يعمل هذا مع مستخدمي / مشاريع الاستنسل الحالية.

لقد اختبرت هذا الصباح وهو يعمل بشكل جيد أيضًا! GJ من السهل حقًا الإعداد. لقد قمت بتثبيت واختبار بعض الإضافات:

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

كل شيء يعمل بشكل جيد ، فقط وجدت مشكلة واحدة مع المقابض الإضافية https://github.com/storybooks/storybook/issues/5017 ولكن هناك حل بديل ويجب إصلاح هذا قريبًا على ما أعتقد.

لقد أمضيت الأسبوعين الماضيين في اللعب باستخدام 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

قد يكون أحد المكاسب السهلة هو نشر حزمة @storybook/preset-stencil والتي تحزم تكوين مسبق للكتب القصصية . ما زلت بحاجة إلى إنهاء المستندات من أجل ذلك ، لكنني أستخدمها لإصدار

سأكون سعيدًا لتوجيه أي شخص يريد أن يلتقط ذلك.

مرحبًا shilman ، تم يتحمسون لالتقاط هذا وتنفيذ Stencil with Storybook. يحتوي هذا الخيط على بعض الأشياء الجيدة التي وجدتها ، ولكن هناك العديد من الأخطاء الصغيرة مثل الاضطرار إلى إرجاع سلسلة من العنصر لاستخدام المقابض.

من شأن التنفيذ الأفضل أن يتراجع عن مترجم Stencil ويسمح باستخدام JSX كما هو الحال مع مكونات React ، ولكن هذا هو 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 لطيف! ميزها بنجمة. لقد قمت بالفعل بالتحديث إلى Stencil One beta ويبدو التكوين الخاص بي مشابهًا - يمكنني بشكل أساسي استخدام إعداد webpack الخاص بالمخزون بالكامل.

كان الاختلاف الوحيد بالنسبة لي هو استخدام stencil build --watch (prod ، وليس dev) لأن أوقات الإنشاء سريعة جدًا ومن الأسهل استهلاك إصدار prod في Stencil (خاصة مع الأنماط العامة والواردات الأخرى).

@ fvaldes33 كيف يمكنك الإشارة إلى build / component.js في معاينة head.html بهذه الطريقة؟ لا بد لي من توفير المسار الكامل ، على سبيل المثال http: // localhost : 3333 / build / components.js. لكني لا أريد أن أفعل ذلك.

(أنا لا أستخدم المبدئ الخاص بك ، لكني أستخدم بداية مكون الاستنسل مع تثبيت كتاب قصص جديد / html جديد)

تعديل:
أدركت أنني كنت أبدأ كتاب القصة على المنفذ 6006 بدلاً من مجلد www. تم حل المشكلة!

يبدو أن لدى الكثير منا حلولًا مماثلة (بما في ذلك أنا https://github.com/jagreehal/stencil-boilerplate) ، لكني أرغب حقًا في التحديثات الساخنة / الحية عندما أقوم بتحرير مكون Stencil. يتعين علي حاليًا تحديث المتصفح يدويًا لإعادة تحميل Storybook.

هل توجد قائمة متطلبات لإكمال هذا؟ سأكون سعيدًا بالمشاركة إذا كنت أعرف ما يجب بناؤه.

ما هو الوضع الحالي؟ هل يمكننا المساهمة؟ أود أن أرى هذا!

اقترحت المساهمة بإعداد مسبق أعلاه.

• تم توثيق الإعدادات المسبقة هنا: https://storybook.js.org/docs/presets/introduction/
• يوجد إعادة شراء لإعدادات المجتمع المسبقة هنا: https://github.com/storybookjs/presets

إذا أراد شخص ما وضع إعداد مسبق بناءً على الأنماط المذكورة أعلاه ، فسأكون سعيدًا للمساعدة في جانب Storybook. لست على دراية بجانب Stencil.

لقد قمت للتو بنشر مشروعي هناك لأي شخص يريد ذلك. فيما يلي الميزات:

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

اسمحوا لي أن أعرف ما هو رأيك: https://github.com/DesignByOnyx/stencil-storybook-starter

DesignByOnyx هذا يبدو رائعا. غرد عن هذا واذكر @storybookjs وسأعود من حساب Storybook. وإذا كنت تريد كتابة منشور حول هذا الموضوع ، فسيسعدني العمل معك لنشره. أعتقد أن هناك طلبًا كبيرًا جدًا هنا.

وظيفة مذهلة DesignByOnyx ! يبدو أن هذا يتناسب تمامًا مع الإعداد المسبق: تادا:

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

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

أشعر بالفضول لمعرفة الشكل الذي سيبدو عليه الإعداد المسبق. أكبر شيء سيكون لطيفًا هو الإعداد المسبق لـ JSX الذي لا يتفاعل. هذا من شأنه أن يتيح عملية عرض وإنشاء قوالب أسهل قليلاً على رأس مجموعة Storybook-html المتنوعة ، وليس له علاقة كبيرة بالاستنسل. ستحتاج أيضًا إلى تحديث العديد من الإضافات لجعل هذا الأمر قابلاً للاستخدام ، ولست متأكدًا من أنني الأفضل لتنسيق هذا الجهد. في كلتا الحالتين ، اسمحوا لي أن أعرف ما يمكنني فعله للمساعدة.

DesignByOnyx هل هناك أي فرصة يمكنك القفز على الخلاف لدينا؟ https://discordapp.com/invite/UUt2PJb

أود التحدث أكثر حول الحصول على هذا العمل على مدونة Storybook وكذلك الترويج في مجتمع الاستنسل.

لقد كنت ألعب بـ @storybook/html لـ Stencil والتجربة إلى حد كبير "تعمل فقط". أنت تقوم بما يلي في الأساس:

1. استخدم concurrently لبدء خادم Storybook و stencil build --watch "بالتوازي"
2. ابدأ storybook بعلامة -s dist ، بحيث يتم تقديم Stencil 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 لجميع احتياجات مكونات الويب الخاصة بك.

ما أود رؤيته هو شيء مثل @storybook/stencil له نفس التجربة (والرمز) مثل حزمة html في جانب تأليف القصة ، ولكن

1. تشغيل الملخصات بعيدًا عن عملية إنشاء Stencil كجزء من Storybook ، بحيث لا يلزم تكوين concurrently
2. يضيف علامات script لك
3. ربط التحديث التلقائي عند إعادة بناء مكونات Stencil

هل هناك اهتمام بشيء من هذا القبيل؟ أنا بصدد بيع شركتي في Stencil و Storybook ، وبافتراض أن هذا يكتسب قوة دفع ، سيكون لدي "وقت عمل" لجعل هذه القصة (أعذر التورية) لطيفة حقًا حول Storybook + Stencil وهم يلعبون معًا.

إن العمل الذي قام به @ DesignByOnyx رائع حقًا ، ولكن عليك نوعًا ما _بدء_ مكونات Stencil باستخدام هذه المجموعة وتجاهل التوثيق "العادي" لـ Stencil. إذا كان بإمكان Storybook توفير حزمة يمكن وضعها في طبقات أعلى مجموعة بداية Stencil "العادية" ، فيمكنك بسهولة إضافة تكوين Storybook إلى مجموعة موجودة من مكونات Stencil.

شكرا على الملخص الرائعalexlafroscia. أعتقد أن اقتراحك منطقي للغاية. هل لا يتم تشغيل HMR تلقائيًا عند إعادة بناء Stencil؟ إذا كان الأمر كذلك ، أي فكرة لماذا لا؟

@ igor-dv هل يمكن الإضافة إلى preview-head.html في إعداد مسبق؟

Hypnosphi ربما يكون هذا مثالًا مثيرًا للاهتمام

alexlafroscia كيف يبدو مثال القصة في حالتك؟

في الشركة التي أعمل فيها ، كنا نلعب مع حزم Storybook HTML و StencilJS لفترة من الوقت. سأكون سعيدا للمساهمة!

alexlafroscia أفكار رائعة جدًا ، سيكون من الجيد حقًا الحصول على دعم كامل لهذا المترجم. فيما يلي بعض الأفكار الأخرى:

• استخدم إمكانيات StencilJS JSX (بناءً على Preact في الوقت الحالي) لكتابة القصص بطريقة أكثر قابلية للصيانة. قد يكون استخدام JS القديم البسيط أو حتى القوالب الحرفية مرهقًا ...
• احصل على ملحق Smart Knobs لمكونات الويب. قدم @ DesignByOnyx أساسًا جيدًا لذلك.

تتناول هذه المقالة خارطة الطريق الجارية في StencilJS: Fall 2019 Stencil Roadmap . بشكل خاص:

واجهات برمجة تطبيقات المجمّع العام

هناك مجال آخر نركز عليه أيضًا وهو التأكد من أن المترجم يمكنه العمل داخل متصفح واستخدامه بواسطة أدوات أخرى. لقد عملنا بالفعل مع عدد قليل من الفرق الرائعة مثل Stackblitz و CodeSandbox و WebComponents.dev. في أدنى المستويات ، يعمل المترجم بالفعل دون تشغيل فوق بيئة NodeJS ، لذلك من الناحية الفنية ، هذا ليس معيدًا رئيسيًا لإعادة البناء ، ولكنه أكثر من مجرد كشف واجهات برمجة التطبيقات الصحيحة.

نرى أيضًا العديد من مجالات التحسين لضمان سهولة استهلاك المترجم بواسطة أدوات NodeJS الأخرى ، بما في ذلك Rollup و Parcel و WebPack و Bazel. إذا كنت مشرفًا على أي أدوات ، سواء كانت أداة عبر الإنترنت أو بيئة NodeJS ، وكنت تتطلع إلى تنفيذ برنامج التحويل البرمجي Stencil ، فلا تتردد في التواصل معنا وسنسعد بتقديم المساعدة!

ربما يكون مفيدا!

هل لا يتم تشغيل HMR تلقائيًا عند إعادة بناء Stencil؟ إذا كان الأمر كذلك ، أي فكرة لماذا لا؟

shilman لا يتم أملكه ، بين Storybook و Stencil. إنها مجرد علامة <script> تشير إلى الأصول المبنية.

كيف يبدو مثال قصة في حالتك؟

Hypnosphi تبدو شيئًا كهذا (قصة my-component التي يولدها Stencil في الحزمة الأولية التي ينشئونها عندما تكون npm init stencil

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 - وإلا فإنها مرتبطة بشيء مثل Preact ، والذي على الأقل في مؤسستي ، لا يتم استخدامه في أي مكان آخر (نحن في الأساس متجر Ember.js).

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

كنت أفكر أيضًا في أن محاولة الاندماج مع شيء مثل DocsPage القادمة قد تكون ممتعة! أراهن أن بعض الأعمال التي تم إنجازها بالفعل بواسطة DesignByOnyx يمكن أن تكون مفيدة هنا ، بحيث يكون هناك مسار لقراءة "البيانات الوصفية" لمكون Stencil لإنشاء معلومات التوثيق تلقائيًا. ربما لا يكون مصدر قلق "v1" ، ولكن شيء سيكون رائعًا حقًا لمشاهدة "v1.1"! تعجبني حقًا فكرتك في صنع شيء مثل ملحق المقابض الآلية هذا أيضًا ، سيكون ذلك مفيدًا حقًا!

مع إصدار DocsPages اليوم مع Storybook 5.2 ، أجريت بعض الأبحاث حول ما إذا كان من الممكن الحصول على معلومات حول الدعائم وما إلى ذلك من Stencil وتحويلها إلى Storybook. أعتقد أنه من الممكن أن يكون ذلك ممكنًا ، ولكن بالتأكيد يبرز كيف سيكون من المفيد أن يكون لديك ملحق أو إعداد مسبق مصمم خصيصًا لاستخدام Storybook مع Stencil لإيواء مجموعة من "الغراء" اللازم لذلك.

سوف أتلاعب بالأشياء أكثر قليلاً هذا الأسبوع وأرى ما إذا كان بإمكاني وضع شيء معًا.

ترغبalexlafroscia في توحيد كيفية توصيل الأطر المختلفة لهذه البيانات. هل رأيت شيئًا مثيرًا للاهتمام من Jetbrains (web_types؟ Ccelevatebart ) وأيضًا تقوم atanasster أيضًا بعمل في هذا المجال لتخزين أنواع الدعائم في ملفات JSON للأداء. أعتقد أننا يجب أن نوحد كل هذا في 6.0

لست على دراية بعمل Jetbrains - سأضطر إلى التحقق من ذلك! إذا كانت لديك أي معلومات محددة من المفيد مراجعتها ، فسأكون سعيدًا إذا كان بإمكانك إرسالها بطريقتي!

في حالة Stencil ، أعتقد أن "أفضل رهان" هو الحصول على عملية إنشاء Stencil إخراج مستندات JSON إما في موقع معروف جيدًا بواسطة ملحق Stencil Storybook أو قابل للتكوين. يحتوي هذا الكائن على جميع المعلومات حول الخاصيات المتوقعة ، والأحداث الصادرة ، وحتى محتويات ملف readme لكل مكون (بدون وثائق الخاصيات المُنشأة تلقائيًا). أعتقد أنه يمكننا بناء قصة مقنعة حقًا لملء صفحة Storybook DocsPage بالمعلومات من ملف 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 للحصول على الملف) لكنني تمكنت من الحصول على عرض DocsPage لمكون Storybook عن طريق تجاوز خصائص الفتحة التي يمكن أن يتخذها المكون 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
  );
};

تحديث: للمضي قدمًا ، قمت بتحديد 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 الذي كنت أشير إليه هو هذا (ccpiotrtomiak): https://github.com/JetBrains/web-types

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

shilman شكرًا web-types جديدًا جدًا ، لكننا سمعنا بالفعل بعض التعليقات الإيجابية من مجتمع Vue والمستخدمين. أنا أعمل بنشاط على الترويج للمواصفات في مجتمع Vue ، لكن من الرائع جدًا الحصول على بعض الاهتمام من المجتمع الآخر!

أعتقد أنه قد يكون هناك بعض الأشياء المفقودة في مخطط web-types JSON ، والتي ستكون خاصة بإطار العمل الخاص بك ويمكن إضافتها إلى المواصفات. عناصر Vue المحددة مسبوقة على سبيل المثال بـ vue . هناك أيضًا قسم مفقود بالكامل لتوثيق دعم CSS ، والذي يمكننا العمل عليه لتضمينه. لذلك ، إذا كنت تشعر أن الأمر يستحق إعطاء web-types فرصة ، فلا تتردد في تقديم مشكلات أو إنشاء علاقات عامة للميزات المفقودة.

سيكون التأثير الجانبي لتوثيق مكوناتك بتنسيق web-types إكمال رمز جيد عندما يقوم المطورون بتضمين مكتبتك في مشروعهم. نحن نخطط لتنفيذ مثل هذا الدعم العام بناءً على ميزات web-types لجميع أطر العمل في المستقبل القريب جدًا. أنا متأكد من أنه مع قبول المجتمع الأكبر للتنسيق ستتبعه IDEs الأخرى مع دعم التنسيق ، مما سيفيد الجميع :)

alexlafroscia عمل رائع! يبدو تكامل Stencil و Storybook (جنبًا إلى جنب مع https://github.com/storybookjs/storybook/issues/7644) جيدًا

شكرا لربط هذه القضية! ذهبت في الأصل إلى مسار مشابه (حاولت بطريقة ما استخدام ملفات README الحالية وسحبها مباشرة إلى DocsPage) ولكن في النهاية وجدت أنه من الأسهل فقط استخدام البيانات التي يضعها Stencil في ملف Docs 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>

يتم تحميل WC نفسه في صفحة مستندات Storybook ، حتى بدون استخدام CustomDocsPage .
هل هناك طريقة يمكنني من خلالها تصحيح المكون؟ حاولت إضافة بعض السجلات ، لكن لا يمكنني رؤية أي منها.

شكرا لك مقدما.

واجهت هذه المشكلة أيضًا - اضطررت إلى تجاوز المكوِّن DocsPage عند مستوى "المكوِّن"

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

هل من الممكن الحصول على @storybook/html للعمل مع jsx؟ سيجعل كتابة قصصي لمكونات الاستنسل أسهل بكثير. ستحصل على الكتابة والإكمال التلقائي ولن تضطر إلى استخدام سلاسل قوالب كبيرة أو سلاسل كبيرة من document.createElement . حاول خداع الكتابة المطبوعة باستخدام // @jsx في الأعلى باستخدام حزمة التفاعل ، لكن هذا لم ينجح.

vidarc ما هو الخطأ عندما فعلت ذلك؟ هل لديك تكوين مخصص بابل ؟

ليس الكثير من التخصيص. تمت إضافة بعض الأشياء إلى حزمة الويب. أول شكوى مطبوعة على الآلة الكاتبة من Cannot find name 'h' . يحتوي tsconfig الخاص بي على jsx = رد فعل و jsxFactory = h. يمكنني التخلص من هذه التحذيرات باستخدام إعداد // <strong i="6">@jsx</strong> h pragma في الجزء العلوي ، ولكن بعد ذلك أحصل على خطأ في القصة المصورة نظرًا لعدم إرجاع عقدة DOM أو سلسلة.

سأجرب: https://github.com/developit/vhtml التالي

تحرير: يعمل بشكل رائع مع jsx. لا أستطيع معرفة كيفية جعله يعمل مع الكتابة المطبوعة على الرغم من: /

vidarc إذا كان h يرمز إلى النص الفائق ، فإنه يُرجع كائنًا مخصصًا ليس سلسلة ولا عنصر DOM

يبدو vhtml الطريق للذهاب

لمعلوماتك ، لدينا علاقات عامة واردة لتطبيق web-components : https://github.com/storybookjs/storybook/pull/8400

هل يمكن لأحد هنا أن يعلق على كيفية تقاطع ذلك مع هذه القضية؟ MustafaHosny اللهم امين يارب

لم أختبر رقم 8400 حتى الآن ، ولكن قبل الاختبار تمكنت من الحصول على استنسل "مباشر" يعمل عبر:

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: Invalid Scheme with stencil 1.2.4 -> 1.7.4.

shilman لقد تمكنت من الحصول على مكونات الاستنسل على تطبيق web-components ولكن يبدو لي أنه يقرأها بنفس الطريقة التي يتعامل بها الجميع مع html واحد ، ولا يفعل HMR ' ر تتفاعل مع تحديثات مكونات الاستنسل نفسها.

سيكون من الأفضل حقًا إذا كانت هناك طريقة لجعل مترجم الاستنسل مدمجًا في تسلسل تشغيل القصص القصيرة كما هو الحال في React و Angular وما إلى ذلك.

سأستمر في تجربة طرق جعل مكونات Stencil "حية" ، ولكن المشكلة المعمارية التي كنت أواجهها هي أنه ، ما لم أكن مخطئًا ، تتطلب مكونات الاستنسل خطوة بناء مخصصة للعمل_ ( 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 لاستخدام قصص React (بدلاً من HTML) .

نأمل أن يسمح هذا للقصة القصيرة UX بمطابقة React ، تاركًا Stencil لتطبيق المكون فقط.

لا أعتقد أن نهاية العالم تتطلب stencil build للتشغيل بالتوازي في وضع dev:

• يمكننا إرشاد المستخدم إلى كيفية تشغيل هذا بشكل متزامن في package.json
• يمكن أن يؤدي إعداد الاستنسل المسبق إلى ظهور هذه العملية عند بدء التشغيل ، ثم إيقافها عند إيقاف التشغيل إذا أردنا إخفاء ذلك عن المستخدم

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

الاستخدام المتزامن هو ما يعمل معي حاليًا.

هناك خطوات تدريجية بالتأكيد.

الشيء الرئيسي الذي جعلني كمستخدم هو "لماذا" لم يعمل الاستنسل بالطريقة نفسها
كتفاعل قصصي ، والتي لا يمكن حلها بدون الاستنسل
التغييرات.

في الخميس ، 31 أكتوبر 2019 ، 5:02 مساءً Michael Shilman [email protected]
كتب:

لا أعتقد أن نهاية العالم تتطلب بناء الاستنسل
يعمل بالتوازي في وضع التطوير:

• يمكننا إرشاد المستخدم إلى كيفية تشغيل هذا بشكل متزامن
  https://www.npmjs.com/package/concurrently في الحزمة الخاصة بهم
• يمكن أن يؤدي إعداد الاستنسل المسبق إلى إنتاج هذه العملية عند بدء التشغيل ، ثم قتلها
  عند إيقاف التشغيل إذا أردنا إخفاء ذلك عن المستخدم

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

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/storybookjs/storybook/issues/4600؟
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

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

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

لقد حققنا بالفعل في هذا باستخدام es-dev-server لتشغيل المعاينة لـ web-components . لدينا نوعًا ما POC ... ولكن لا تزال هناك بعض الحواف الخشنة.
ومع ذلك ، أفترض أن نفس النهج بالضبط يجب أن يعمل مع الاستنسل أيضًا.

إذا كان لدى شخص ما أي أسئلة أو كان مهتمًا بالتحقيق في هذا من أجل الاستنسل أو المساعدة في إنشاء مشروع مرجعي باستخدام es-dev-server ، فأنا متأكد من أن LarsDenBakker يسعد بمشاركة بعض التفاصيل الإضافية 🤗

ملاحظة: كل هذا ممكن فقط بسبب امتلاك كتاب القصص هذا الإعداد الرائع لإطار iframe مع رسائل القناة لإبقاء واجهة المستخدم منفصلة عن المعاينة 🤗

مرحبا جميعا

بعد بعض الوقت وقدر كبير من العبث حول هذا هو الريبو الخاص بي لتطبيق القصص القصيرة المتكاملة عن طريق الاستنسل https://github.com/Edd-Strickland/stencilbook.

يسعدنا مناقشة المزيد ، ونأمل أن تكون معظم الأشياء واضحة من الملف التمهيدي ومن النظر إلى package.json بحثًا عن البرامج النصية.

تم إنشاء هذا باستخدام مكون بداية استنسل الفانيليا وتنفيذ لغة HTML Storybook الفانيليا.

يرجى النظر والمراجعة ...

StencilBook - كاتب القصص القصيرة Stencil

هذا مشروع مبتدئ لبناء مكون ويب مستقل باستخدام Stencil و Storybook.

مرسام

Stencil هو مترجم لبناء تطبيقات ويب سريعة باستخدام Web Components.

يجمع Stencil بين أفضل المفاهيم لأطر عمل الواجهة الأمامية الأكثر شيوعًا في وقت الترجمة بدلاً من أداة وقت التشغيل. يأخذ Stencil TypeScript و JSX وطبقة DOM ظاهرية صغيرة وربط بيانات فعال أحادي الاتجاه وخط أنابيب عرض غير متزامن (على غرار React Fiber) وتحميل كسول خارج الصندوق ، وينشئ مكونات ويب قائمة على المعايير بنسبة 100٪ تعمل في أي متصفح يدعم مواصفات Custom Elements v1.

مكونات الاستنسل هي مجرد مكونات ويب ، لذا فهي تعمل في أي إطار عمل رئيسي أو بدون إطار عمل على الإطلاق.

ابدء

استنساخ الريبو

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

قم بتشغيل Storybook وبناء الاستنسل باستخدام الساعة والعرض ، وحذف أي إصدارات سابقة تم إنشاؤها وستعمل محليًا:

npm run storybook:build:all

خدمة القصص القصيرة محليًا:

npm run storybook:serve

وحدات إعادة الضبط يحذف وحدات العقدة ويعيد تثبيتها:

npm run reset:modules

لتشغيل اختبارات الوحدة للمكونات ، قم بتشغيل:

npm test

اختبار

لإجراء الاختبارات في وضع المشاهدة:

npm run test.watch

قم بتوليد مكونات جديدة

لإنشاء مكونات Stencil جديدة تلقائيًا:

npm run generate

@ Edd-Strickland هذه بداية رائعة! إذا كان بإمكاني أن أقترح أنه ربما تقوم بإضافة برنامج نصي لبدء التشغيل الأسهل ، فقد قمت بعمل "start": "npm-run-all -p stencil:start storybook" وهو يعمل بشكل جيد ، باستثناء عدم وجود إعادة تحميل ساخنة حيث يبدو أن كتاب القصص لا يتعرف على وقت إنشاء الاستنسل.

... هذا ما لم أفقد شيئًا؟

@ shilman يبدو أن هناك حزمة @ storybook / web-component بالفعل في المستوى الرئيسي في alpha ، لكنني لا أرى Stencil المشار إليها في README.md: https://github.com/storybookjs/storybook/tree/next/ التطبيق / مكونات الويب

هل هذا جهد مواز؟ إذا لم يكن الأمر كذلك ، فهل تعرف المشكلة المقابلة؟ تعذر العثور عليه عند البحث عن مشكلات 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 ، فسيتم تشغيل خادم الساعة وفقًا لذلك. سيقوم Stencil تلقائيًا بـ 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 . أنا متأكد من أن شخصًا ما على هذا الموضوع يعرف!

يعتمد ذلك على أن مكونات الويب تعمل مع مثيلات الفانيليا لم أقارن الفروق بينها ، ولكن مخرجات الاستنسل تعمل كمُعامل لـ W / C بدلاً من كونها W / C افتراضيًا.

لذلك يمكن القول أن هناك حاجة لكليهما. واحد أصلي JS W / C والآخر لمترجم الاستنسل إذا كنت تريد سريعًا نموذجًا أوليًا قائمًا على الاستنسل W / C إلى جانب كتاب القصة كما يمكنك مع رد الفعل أو المكون الزاوي.

ليس لدي وقت للحاق بـ daKmoR لمناقشة ما إذا كان هذا تكرارًا أم زائدًا عن الحاجة نظرًا لعملهم ، ولكن في الوقت الحالي نحافظ على هذا الإصدار.

لقد عثرت مؤخرًا على Bulmil بسبب عملهم على تكامل Stencil مع nuxt-stencil وأمثلة nuxt الخاصة بهم.

لقد اكتشفت أيضًا أن هناك دعمًا لائقًا لقصص القصص القصيرة. ربما يستحق الأمر نظرة أيضًا. لا أعرف الأجزاء الداخلية / كيف تختلف عن الحالة الحالية لهذا الموضوع ولكنها تعمل خارج الصندوق داخل Bulmil بمجرد تشغيل القصة المصورة .

@storybook/addon-actions لا يعمل بعد أو لم أتمكن بعد من تشغيل هذا.

ربما يمكننا الحصول على Gomah في هذا الموضوع والاستماع إلى أفكاره للتعاون على جعل دعم الاستنسل أفضل لكتاب القصص؟

لقد عثرت مؤخرًا على Bulmil بسبب عملهم على تكامل Stencil مع استنسل nuxt وأمثلة nuxt الخاصة بهم.

لقد اكتشفت أيضًا أن هناك دعمًا لائقًا لقصص القصص القصيرة. ربما يستحق الأمر نظرة أيضًا. لا أعرف الأجزاء الداخلية / كيف تختلف عن الحالة الحالية لهذا الموضوع ولكنها تعمل خارج الصندوق داخل Bulmil بمجرد تشغيل القصة المصورة .

@storybook/addon-actions لا يعمل بعد أو لم أتمكن بعد من تشغيل هذا.
بالتأكيد داخل الريبو أعلاه ، ستعمل الإضافة على الإجراءات ، كملحق قياسي لكتاب القصة

E2A: كتاب الاستنسل ليس البديل Gomah .

كان الهدف مع تكامل الاستنسل الأساسي / SB أعلاه هو ببساطة إنشاء قاعدة تسمح لكتاب القصة بكتاب القصص والاستنسل إلى الاستنسل ثم دمجهما معًا للسماح لك بالحصول على مكونات ويب مصنوعة عبر الاستنسل ووضعها في إطار كتاب القصة.

لقد سجلت طفرة في سباق فريقي في الأسبوعين المقبلين لمعرفة ما إذا كان إصدار W / C سيعمل بالإضافة إلى هذا التكرار وإذا كان بإمكاننا تحويل الإصدار الحالي الذي نستخدمه إلى إصدار W / C.

من الناحية المثالية ، سيعمل كل شيء ، لذلك لن يكون هناك تجزئة لمتغيرات W / C ، ولكن على عكس تطبيقات W / C الأصلية ، فإن الاستنسل ليس في الحقيقة إطار عمل. مترجم. لذلك قد يكون من المفيد مع وجود التمييز للسماح لك بكتابة مكونات JSX التي ستخرج كـ W / C بعد ذلك.

أو قد يكون الأمر بسيطًا حقًا.

سنخبرك بمجرد أن ننتهي من الارتفاع.

ليس الكثير من التخصيص. تمت إضافة بعض الأشياء إلى حزمة الويب. أول شكوى مطبوعة على الآلة الكاتبة من Cannot find name 'h' . يحتوي tsconfig الخاص بي على jsx = رد فعل و jsxFactory = h. يمكنني التخلص من هذه التحذيرات باستخدام إعداد // <strong i="7">@jsx</strong> h pragma في الجزء العلوي ، ولكن بعد ذلك أحصل على خطأ في القصة المصورة نظرًا لعدم إرجاع عقدة DOM أو سلسلة.

سأجرب: https://github.com/developit/vhtml التالي

تحرير: يعمل بشكل رائع مع jsx. لا أستطيع معرفة كيفية جعله يعمل مع الكتابة المطبوعة على الرغم من: /

مرحبًا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 المجلدات المضمنة ، ورأيت أطر عمل أخرى لمكونات الويب ، ولكن ليس الاستنسل:

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

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

راجع للشغل ، هل يمكن إغلاق هذه المشكلة الآن ، حيث يتم حلها عن طريق الإعداد المسبق لمكونات الويب المذكورة أعلاه؟

ليس الكثير من التخصيص. تمت إضافة بعض الأشياء إلى حزمة الويب. أول شكوى مطبوعة على الآلة الكاتبة من Cannot find name 'h' . يحتوي tsconfig الخاص بي على jsx = رد فعل و jsxFactory = h. يمكنني التخلص من هذه التحذيرات باستخدام إعداد // <strong i="8">@jsx</strong> h pragma في الجزء العلوي ، ولكن بعد ذلك أحصل على خطأ في القصة المصورة نظرًا لعدم إرجاع عقدة DOM أو سلسلة.
سأجرب: https://github.com/developit/vhtml التالي
تحرير: يعمل بشكل رائع مع jsx. لا أستطيع معرفة كيفية جعله يعمل مع الكتابة المطبوعة على الرغم من: /

مرحبًا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 المجلدات المضمنة ، ورأيت أطر عمل أخرى لمكونات الويب ، ولكن ليس الاستنسل:

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

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

راجع للشغل ، هل يمكن إغلاق هذه المشكلة الآن ، حيث يتم حلها عن طريق الإعداد المسبق لمكونات الويب المذكورة أعلاه؟

سأقوم باختبار ما إذا كان يعمل مع الاستنسل وسأبلغ مرة أخرى بعد ذلك يمكننا الإغلاق. لا جدوى من الختام إذا لم يعمل بالفعل مع الاستنسل ...

...

مرحبًاvidarc. هل تمكنت من جعل هذا يعمل باستخدام بنية storiesOf() ؟ إذا كان الأمر كذلك ، فسأكون فضوليًا حقًا لمعرفة كيف فعلت ذلك. هل لديك مثال رمز أو قاعدة رمز للمشاركة؟
بينما لدينا كتاب قصص واستنسل مدمجان ويعملان بشكل جيد في مشروعنا ، فإن أكبر نقطة مؤلمة لدينا هي اللجوء إلى إنشاء قصص باستخدام document.createElement() للمكونات التي تحتوي على أدوات كائنات وما إلى ذلك. إذا كان بإمكان vhtml حلها هذا سيكون رائعًا!

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

شكرا. لم أدرك أن CSF الآن هو الطريقة الموصى بها لكتابة القصص. هل تمكنت من جعل الملحق jsx يعمل مع vhtml راجع للشغل ، أم أن هذا غير ممكن؟

...

مرحبًاvidarc. هل تمكنت من جعل هذا يعمل باستخدام بنية storiesOf() ؟ إذا كان الأمر كذلك ، فسأكون فضوليًا حقًا لمعرفة كيف فعلت ذلك. هل لديك مثال رمز أو قاعدة رمز للمشاركة؟
بينما لدينا كتاب قصص واستنسل مدمجان ويعملان بشكل جيد في مشروعنا ، فإن أكبر نقطة مؤلمة لدينا هي اللجوء إلى إنشاء قصص باستخدام document.createElement() للمكونات التي تحتوي على أدوات كائنات وما إلى ذلك. إذا كان بإمكان vhtml حلها هذا سيكون رائعًا!

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

شكرا. لم أدرك أن CSF الآن هو الطريقة الموصى بها لكتابة القصص. هل تمكنت من جعل الملحق jsx يعمل مع vhtml راجع للشغل ، أم أن هذا غير ممكن؟

لذلك يتم تحليل JSX مباشرة عبر مترجم الاستنسل في الظل دوم. طالما أنك تستخدم دمج المترجم في كتاب القصص ، فقم بكتابة مكون الاستنسل القياسي الخاص بك ثم تضمينه في قصة CSF ثم استيراده في مصنع البيانات الخاص بك لملء العناصر.

لا حاجة لمكونات VHTML أو أي شيء آخر لا تحتاج حتى إلى غلاف يمكنك كتابته مباشرة كاستنسل وإخراج فقط.

يمكنك استخدام بناء الجملة StoryOf ولكن بعد ذلك تكون مقيدًا بالمستند الكلاسيكي.
على سبيل المثال هذه القصص القديمة من بناء الجملة لأيقونتنا

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

ضد

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

ليس الكثير من التخصيص. تمت إضافة بعض الأشياء إلى حزمة الويب. أول شكوى مطبوعة على الآلة الكاتبة من Cannot find name 'h' . يحتوي tsconfig الخاص بي على jsx = رد فعل و jsxFactory = h. يمكنني التخلص من هذه التحذيرات باستخدام إعداد // <strong i="8">@jsx</strong> h pragma في الجزء العلوي ، ولكن بعد ذلك أحصل على خطأ في القصة المصورة نظرًا لعدم إرجاع عقدة DOM أو سلسلة.
سأجرب: https://github.com/developit/vhtml التالي
تحرير: يعمل بشكل رائع مع jsx. لا أستطيع معرفة كيفية جعله يعمل مع الكتابة المطبوعة على الرغم من: /

مرحبًاvidarc. هل تمكنت من جعل هذا يعمل باستخدام بنية storiesOf() ؟ إذا كان الأمر كذلك ، فسأكون فضوليًا حقًا لمعرفة كيف فعلت ذلك. هل لديك مثال رمز أو قاعدة رمز للمشاركة؟

بينما لدينا كتاب قصص واستنسل مدمجان ويعملان بشكل جيد في مشروعنا ، فإن أكبر نقطة مؤلمة لدينا هي اللجوء إلى إنشاء قصص باستخدام document.createElement() للمكونات التي تحتوي على دعائم كائنات وما إلى ذلك. إذا كان بإمكان vhtml حلها هذا سيكون رائعًا!

تضمين التغريدة
انتهى بي الأمر باستخدام @ storybook / رد فعل وتعديل webpack config لتحويل ملفات MD مع ملفات MDX. ثم مجرد جزء صغير من التعليمات البرمجية لإنشاء مقابض بناءً على استنسل إخراج json doc الذي يوفره. بالنسبة لرمز الاستنسل ، نستخدم نسخة Storybook من 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>;

إذا كان الأمر يتعلق بكتابة القصص التي تحتاج إلى تعيين خصائص لمكونات الويب ، فيمكنك إلقاء نظرة على @storybook/web-components . وهي تستخدم lit-html لإنشاء html بخصائص.

يجب أن ينجح هذا عند تشغيل القصص القصيرة والاستنسل جنبًا إلى جنب :)

باستثناء الاستنسل لا يستخدم لغة تأشير النص الفائق مضاءة. هذا شيء Vue ...

@ shilman يبدو أن هناك حزمة @ storybook / web-component بالفعل في المستوى الرئيسي في alpha ، لكنني لا أرى Stencil المشار إليها في README.md: https://github.com/storybookjs/storybook/tree/next/ التطبيق / مكونات الويب

كيف نقوم بتنزيل واختبار حزمة مكونات الويب التي لا تحتوي الريبو المرتبط هنا على أي إجراءات استنساخ وما إلى ذلك؟

@ Edd-Strickland هذا مجرد دليل في monorepo القصص القصيرة الرئيسية

باستثناء الاستنسل لا يستخدم لغة تأشير النص الفائق مضاءة. هذا شيء Vue ...

إنه lit thing 🤔

ومع ذلك ، هذا هو جمال مكونات الويب - لا يهم ما يستخدمه الاستنسل تحت الغطاء. يمكنك استخدام 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>
  `;
}

لذلك إذا كنت ستذهب إلى DevTools في Chrome في القصة ، فيمكنك تحديد المكون المضاء ويمكنك قراءة التفاصيل التالية

• عنوان الملكية على سبيل المثال console.log ($ 0.title) // بعض العناوين
• سمة الطاقة على سبيل المثال console.log ($ 0.getAttribute ('power')) // غير محدود

بالنسبة لمكون الاستنسل ، سيكون "نفس"

• بيانات الخاصية مثل console.log ($ 0.data) // [{name: 'john'، age: 21}، {name: 'maria'، age: 28}]؛
• السمة super-mode مثل console.log ($ 0.hasAttribute ('super-mode')) // true

يعرض lit-html دومًا فقط ... حيث / كيف يتم تسجيل عناصر dom ، لا يعرف html / لا يهتم بشأنه - لذا يمكن أن تكون التكنولوجيا المستخدمة لكل مكون مختلفة تمامًا ... على سبيل المثال ، يمكنك الحصول على مكون من هي عنصر مضاء أو استنسل أو Vanilla HTMLElement أو يمكن أن يكون غلافًا مكونًا للويب لتطبيق رد فعل / رؤية / زاوية كامل ... 😱

قد يكون الاستنسل مترجمًا ولكن بمجرد تجميعه إلى مكون ويب ، يمكن استخدامه على أنه dom 🤗 فقط

ملاحظة: يستخدم @storybook/web-components lit-html

يقوم فريق Stencil بإعادة بناء المجمع الذي أعتقد أنه سيغير تكامل Stencil / Storybook.

إذا كان أي شخص سيستخدم Stencil و Storybook عبر React checkout https://github.com/the-road-to-learn-react/use-custom-element والذي يسمح لك بتمرير المصفوفات والكائنات. سأحاول بنفسي لاحقًا ، لكن هذا قد يساعد بعض الأشخاص.

للمهتمين ، قمت بنشر كاتب للجمع بين Storybook / رد فعل و Stencil: https://github.com/bbellmyers/stencil-storybook-starter. لاحظ أنه مع هذا التكوين ، تتطلب التغييرات التي تطرأ على المكونات تحديثًا صارمًا في المستعرض ، لكن التغييرات في القصص لا تتطلب ذلك.

يبدو أن كتاب القصص يقوم بتطوير كتاب قصص لمكونات الويب. لقد جربته باستخدام الاستنسل وهو يعمل بشكل جيد.

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

@ sem4phor هل يمكنك مشاركة التكوين لك؟

تظهر لي أخطاء حول 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 أضفنا كتاب قصص لمكونات الويب وفي 6.0.0 سيتم إهمال / عدم تحديث كتاب القصة للبوليمر بعد الآن.

هل هناك أي شيء يجب القيام به لجعل القصص القصيرة لمكونات الويب تعمل مع مكونات الاستنسل؟

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

LarsDenBakker هل الأمر يتعلق بإضافة مكون إضافي / أداة تحميل webpack لتشغيل ما سبق. (أتخيل أنه من المرغوب فيه إنشاء عنصر استنسل HMR وتجميعه ديناميكيًا)

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

لا يستخدم Stencil Webpack. يستخدم التراكمي بدلا من ذلك.

من الممكن استخدام الريبو الذي أعددته للعمل وفقًا لذلك وتمكين مكافئ HMR في Stencil باستخدام مكالمة الساعة. لذلك يتم إعادة تحميل هذا الاستنسل عند تحديث الإستنسل وإعادة تحميل Storybook عند تحديثه.

لذلك لا داعي للبناء في كل مرة لأن هذا سيغطيها.

بينما لم يكن لدي الوقت مؤخرًا لتحديث الريبو بأحدث SB أو Stencil ، ستظل هذه العملية تعمل ويمكنك بعد ذلك ترقية الريبو بأحدث الإصدارات.

شكرا

@ Edd-Strickland أضفنا كتاب قصص لمكونات الويب وفي 6.0.0 سيتم إهمال / عدم تحديث كتاب القصة للبوليمر بعد الآن.

هل هناك أي شيء يجب القيام به لجعل القصص القصيرة لمكونات الويب تعمل مع مكونات الاستنسل؟

نعم ، لا يزال لا يفسر فعلاً إعادة التحميل المباشر / HMR لأنه كما هو مفصل أعلاه الاختلافات بين استخدام webpack واستخدام التدوير حتى الآن إذا كنت ترغب في استخدام إصدار SB WC ، فإنه يتطلب بناء كامل من الاستنسل من أجل تقديم ثم يتم فقدان كل خير HMR للاستنسل.

يعتمد هذا الإصدار حاليًا على إصدار HTML وليس إصدار البوليمر ، لذا لا ينبغي أن يؤثر ذلك على هدف المدى الطويل لإلغاء هذا الإصدار.

LarsDenBakker هل الأمر يتعلق بإضافة مكون إضافي / أداة تحميل webpack لتشغيل ما سبق. (أتخيل أنه من المرغوب فيه إنشاء عنصر استنسل HMR وتجميعه ديناميكيًا)

لا أنصح بذلك ، فإن إصدار webpack من Stencil هو مسار تطوير أكثر صعوبة بشكل ملحوظ ويزيد من أثر التبعيات دون أي حاجة ، كما هو موضح في الريبو الذي أنتجته ، من الممكن تمامًا تشغيل الاستنسل في مشاهدة معظم عمليات إعادة التجميع التي تعيش في كل مرة تغيير WC أو مثيل SB. يتعلق الأمر بتكوينه للسماح لكليهما.

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

يوجد بالفعل ملحق WP استنسل ولكن هذا ليس تبعية مدعومة أو معتمدة من المجتمع.

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

dmartinjs ، فأنت بحاجة إلى تثبيت "lit-html" بنفسك ، حيث يتم استخدامه لتقديم المكونات في الأمثلة الافتراضية.

@ sem4phor هل يمكنك مشاركة التكوين لك؟

تظهر لي أخطاء حول 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-component ، فيجب تثبيته تلقائيًا كعنصر تبعية ...؟

LeeBurton ليس إذا كانت تبعية الأقران؟ (لست متأكدًا مما إذا كان الأمر كذلك ، إذا لم يكن كذلك ، فربما يجب أن يكون كذلك) ccdaKmoR

LeeBurton في الوقت الذي كنت 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 لقد جربت ذلك

لقد نجحت في العمل عن طريق تشغيل Stencil's build محليًا مع تمكين الساعة في برنامج نصي للتشغيل npm أثناء تشغيل start-storybook بالتوازي مع حزمة npm-run-all .

لقد قمت بتكوين webpack الخاص بكتاب القصص النصية لمشاهدة ملفات dist الخاصة بـ Stencil باستخدام ما يلي في main.js:

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 في تحويل

لقد قمت بنقل نسختي من @ Edd-Strickland إلى 6.0.0-beta بنجاح معقول ، على الرغم من أنني أجد أنها لا تعيد دائمًا بناء كل شيء عندما يلاحظ حدوث تغيير (على سبيل المثال ، readme.md).

هل هذا متاح للجمهور paulfelton؟

إنه الآن ، ساعد نفسك :-)

لقد تفرع عن مشروع Edd . @ Edd-Strickland ، هل يمكنني البوب ​​في العلاقات العامة؟ ستحتاج إلى مراجعة جيدة ، لست خبيرًا في هذا الأمر.

لقد صدمت الحزم ، وأعدت تكوين التكوين إلى التنسيق الجديد. اضطررت إلى إضافة كتابة والرجوع إليها في tsconfig للحصول على القصة لاستيراد ملف الاستنسل التمهيدي ، وإضافة تكوين لترجمة "الملاحظات" إلى "مستندات".

قائمة الرغبات:

• حسنًا ، أود أن أرى التكامل يولد قصة أساسية من مكون الاستنسل. من الناحية المثالية ، كل من mdx و CSF.
• أود الانتقال من Storybook HTML إلى نكهة Storybook Webcomponent ، على الرغم من أنني لست متأكدًا مما إذا كانت هناك فوائد للقيام بذلك. إنه شعور طبيعي أكثر.
• أرغب في استيراد مستندات الاستنسل بشكل طبيعي إلى المستندات الإضافية الجديدة ، بدلاً من الانتقال "عبر" الملاحظات.
• كل هذا عبر إعداد مسبق :-)

paulfelton هل تحتاج أي شيء مني؟

ndelangen لست متأكدا. كما قد تكون قد جمعت ، فأنا جديد تمامًا على كل من Stencil و Storybook ، لذا فقد جمعت معًا ما يمكنني استخلاصه من مناقشات القضايا المختلفة ، و google ، وما إلى ذلك.

لقد ذهبت إلى الريبو المبدئي أيضًا ، مستوحى بشدة ولكن كل الجهود الكبيرة في هذه المسألة (شكرًا للجميع!).

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

يستخدم @storybook/web-components ، والعمل مع الوظائف الإضافية الأساسية (مثل عناصر التحكم ، والإجراءات). أحدث إصدارات كل شيء في هذه المرحلة ..

بعض التكامل الإضافي بين خادم Stencil dev وإطار معاينة Storybook (لذا يظهر تراكب خطأ Stencil بشكل مضمن في Storybook - أفضل DX!) (حدد ./storybook/preview-body.html و ./src/index.html للدييت).

~ مزج مطور الاستنسل في start-storybook حتى تقوم بتشغيل أمر واحد فقط ويقوم بتدوير الاستنسل خلف الكواليس. ~
EDIT: بسّط هذا الأمر باستخدام concurrently + wait-on - انتظر حتى يدور Stencil ، ثم استمر في Storybook

ستؤدي تغييرات الكود (إلى مكونات Stencil أو Storybook Stories) إلى إعادة تحميل إطار المعاينة (وليس تطبيق Storybook بأكمله). إنه ليس HMR مناسبًا ولكن من الجيد أن تتطور معه!

لطيف - جيد. الارتباط لا يعمل.

عفوًا ، الريبو متاح للجميع الآن ^

لقد قمت بتجميع الريبو المتداول باستخدام الاستنسل v2 و @ storybook / web-component v6 هنا: https://github.com/bjankord/stencil-storybook-boilerplate

يوجد أيضًا الريبو على https://github.com/miriamgonp/stencil-web-components-boilerplate التي بناها miriamgonp من قناة الخلاف Storybook / Stencil. أي شخص يتوهم الجمع بين هذه النمذجة الناشئة؟ ؛-)

هاتان المستودعات تبدو رائعة. إذا تم دمجها في واحد مع سيكون إضافة جيدة. وإذا كان أي شخص على استعداد للمساهمة في برنامج تعليمي في مقدمة إلى Storybook استنادًا إلى هاتين المستودعات ، فنحن نقدر حقًا. اسمحوا لي أن أعرف ما إذا كان أي شخص على استعداد لمساعدتنا في ذلك وسأذهب بكل سرور لمساعدة أعضاء المجتمع الذين يستخدمون Stencil.

حصلت على حل مناسب من إدارة الموارد البشرية ؛) قريبًا!

حصلت على حل مناسب من إدارة الموارد البشرية ؛) قريبًا!

ها هو!
Stencil 2+ & Storybook 6+ (يجب أن يعمل إصدار Stencil القديم أيضًا ؛))
https://github.com/dutscher/stencil-storybook
استمتع بوقتك وابتهج

تحرير: مع كتاب القصة على صفحات gh https://dutscher.github.io/stencil-storybook/index.html

تم تبديل هذا ^ ^ في مشروعنا الأسبوع الماضي وبعد إزالة البتات غير ذات الصلة بنا (Bootstrap و scss و chromatic وما إلى ذلك) وإصلاح بعض الأشياء الثانوية (على سبيل المثال ، اسم package.json لا يعمل في كل مكان تم استيراده نظرًا لوجوده في @ myorg / my-proj) يعمل بشكل جيد.

تم استخدامه لمدة يوم أو حتى الآن و 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. ونصوص npm بسيطة وبسيطة لـ dev and prod https://github.com/dutscher/stencil-storybook/blob/master/package.json

في صحتك