Storybook: القصص المنفردة تسحب أوراق أنماط كل القصص الأخرى؟

أيضًا ، حزمة الويب تُصدر كل هذه القصص ، لذا أتساءل عما إذا كانت هذه هي الطريقة التي أعددت بها حزمة الويب؟

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

.addDecorator((getStory) => {
  require('./story.sass');
  return getStory();
})

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

مثير للاهتمام !، هل لديك ريبو يوضح ذلك؟

ndelangen سيصنع واحدًا قريبًا

ndelangen https://github.com/moimikey/729-single-stories-pulling-all-stylesheets

ما زلت أحاول العثور على الوقت للتحقق من ذلك ..

شكرا ؛ D إنه أمر غريب. لقد ألقيت نظرة عليه ، لكنني لست متأكدًا من أين أبدأ.

إذن ما أعتقد أنه يحدث هو أن جميع ملفات CSS يتم التقاطها بواسطة أداة تحميل نمط webpack ويتم حقنها في الرأس. سواء تم استخدامها أم لا.

لكن كيف تصلح؟

ما فعلته لـ CSS الخاص بي هو استخدام وحدات CSS. واستيراد أسماء الفئات التي تم إنشاؤها إلى JS الخاص بي. حتى لو تم حقن جميع CSS معًا في الرأس ، فلا يهم ، لأنه مضمون أن تكون فئات / محددات فريدة.

إنه لا يحل المشكلة بالضبط التي تواجهها. لكنني أعتقد أن هذا هو السلوك المقصود لمحمل الأسلوب.

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

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

moimikey لمشكلتك أعتقد أنه يجب عليك تخطي محمل النمط وتحميل ملفات css يدويًا باستخدام مصمم. شيء من هذا القبيل ربما:

.addDecorator(getStory => (
  <div>
    <link ... />
    {getStory()}
  </div>
))

واو .... لم يخطر ببالي أبدا ... سأحاول ذلك.

لكن مرة أخرى ، باستخدام sass ... x_x. حتى أنني حاولت طلب مضمنة. لكن لم يكن لدي الكثير من الحظ. سيكون هذا حلاً ممتازًا لـ css مباشرة على الرغم من :)

لذاmnmtanish. شكرا لقيادتكم. لقد حللت مشكلتي بإلهامك:

.addDecorator((getStory) => {
  require('./story.sass');
  return getStory();
})

mmm لذا فإن المشكلة الوحيدة الآن هي أنه عندما تتنقل من قصة إلى أخرى ، فإنها تكدس الأنماط :(

ربما يمكن تكوين أداة تحميل النمط لإدخالها في مكان آخر غير HEAD بحيث يمكن إزالتها. لم أفعل هذا لذا لست متأكدًا مما إذا كان ممكنًا. تحقق من هذه .

أليس من مسؤولية كتاب القصص التفاعلية تحميل المكون في عزلة كاملة وبالتالي تشغيل JavaScript / CSS فقط المرتبط بالقصة المحددة الحالية؟

هل هذا متعلق بـ https://github.com/storybooks/react-storybook/issues/686؟

ConneXNL نعم. نقطة جيدة. هذا صحيح ... ؛ X

mnmtanish يؤدي إجابتي التالية بالطبع إلى مشكلة أخرى ، قد يكون insertAt مفيدًا ، لكنه متاح فقط في أحدث إصدار من style-loader ، وهو غير ممكن للاستخدام مع القصص القصيرة ، لأنه يستخدم [email protected] . لا يزال كتاب القصة يستخدم 0.x . أحدث إصدار ممكن يمكننا استخدامه هو [email protected] : (...

مرحبًا moimikey ، ربما يمكنك تجربة النهج الأخير المذكور مع إصدار ألفا؟

أليس من الأفضل / الأكثر أمانًا إنشاء عنصر iframe جديد عند تبديل القصص؟

سيكون ذلك آمنًا وسيئًا أيضًا للأداء.

سيتعين على إطار iframe الجديد تحليل جافا سكريبت وتحليل CSS والاتصال بقناة postmessage وإعادة الاتصال بمقبس الويب وربما المزيد من الأشياء.

ربما تكون إزالة عناصر <style> على مفتاح القصة كافياً لحل هذه المشكلة؟

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

إذا تمكن شخص ما من إثبات أن العبارات المذكورة أعلاه خاطئة أو يمكنه إثبات عدم وجود عواقب سلبية ، فأنا آذان صاغية!

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

لقد لعبت مع إزالة الأنماط في مصمم الديكور ولكن يبدو أن النمط المطلوب يتم تطبيقه مرة واحدة فقط. هل من الممكن إعادة تشغيل يتطلب ()؟ حاولت استخدام Singleton: false لكن ذلك لم يحل المشكلة.

أنا متردد تقريبًا في اقتراح هذا ، ولكن يمكنك محاولة خرق ذاكرة التخزين المؤقت webpack:
https://webpack.github.io/docs/api-in-modules.html#advanced

هذا هو webpack 1 docs ، لكنه قد لا يزال يعمل.

فكرة: يمكنك كتابة مصمم يزيل كل <style>...</style> عند تبديل القصص. لتنظيف الأنماط غير ذات الصلة بالقصة الحالية.

أنا على وشك الوصول. في تهيئة حزمة الويب التي أستخدمها
'style-loader/useable' instead of 'style-loader',

هذا يضيف واجهة برمجة تطبيقات لتعمل معها. .use () لإضافة الأنماط ، unuse () لإزالتها. في ملف قصصي ، أستخدم المصمم مثل:

.addDecorator((c) => <ReactStylesheet stylesheets={[require('./stories.scss')]}>{ c() }</ReactStylesheet> )

استخدام مكون React التالي لإضافة وإزالة الأنماط.

import * as React from "رد فعل" ؛

export class ReactStylesheet extends React.Component{

    componentWillUnmount(){
        let stylesheets = Array.isArray(this.props.stylesheets) ? this.props.stylesheets : [this.props.stylesheets];
        stylesheets.forEach((stylesheet) => {
            console.log("Unmounting....");
            stylesheet.unuse();
        });

    }

    componentDidMount(){
         let stylesheets = Array.isArray(this.props.stylesheets) ? this.props.stylesheets : [this.props.stylesheets];
        stylesheets.forEach((stylesheet) => {
            console.log("Mounting....");
            stylesheet.use();
        });
    }

    render(){
        return this.props.children;
    }
}

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

Uncaught (in promise) TypeError: Cannot read property 'refs' of undefined
    at update (webpack:///./~/style-loader/addStyles.js?:63:4)
    at eval (webpack:///./src/Component/stories.scss?:32:4)
    at Object.hotApply [as apply] (http://dev.test:6006/static/preview.bundle.js:499:14)
    at cb (webpack:///(webpack)-hot-middleware/process-update.js?:52:36)
    at eval (webpack:///(webpack)-hot-middleware/process-update.js?:68:13)
    at <anonymous>

لست متأكدًا من كيفية تحديث بيان الطلب للإشارة إلى أحدث إصدار من إدارة الموارد البشرية.

عمل استقصائي رائع! بحثت حولي عن شيء مثل هذا من قبل ولم أتمكن من العثور عليه.

أي شيء يمكننا القيام به في هذا الجانب لمساعدة ConneXNL ؟

الحلول تقترب. كانت فكرة stylesheet.use() و unuse غريبة بالنسبة لي ، لكن يبدو أن هذا يسير على المسار الصحيح.

هذا أيضًا شيء مثير للاهتمام لكتاب القصص القصيرة في وضع الحماية https://github.com/Wildhoney/ReactShadow

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

ConneXNL لإنهاء هذه المشكلة ، هل تعتقد أنه يمكنك مساعدتنا في تحسين المستندات في هذا الصدد؟

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

🙇

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

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

نفس المشكلة هنا ، لا يعزل الكتاب القصصية كل قصة ، مما يجعلها غير قابلة للاستخدام لأي اختبار مرئي / اختبار قبول.

سيؤدي وضع جذر ظل حول القصص إلى حل هذه المشكلة على الفور بدون مخاوف أداء ndelangen

Bennypowers مثيرة للاهتمام! هل لديك عينة رمز حول كيفية تحقيق ذلك؟ 🙇

قد يكون مثيرًا للاهتمام لـ shilman أيضًا.

مرحبا. أواجه هذه المشكلة أيضًا
هل تم إصلاح هذا أم أن هناك أي حل بديل؟

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

أسرع طريق لرضا هنا هو على الارجحmoimikey الصورة اقتراح لاستخدام ReactShadow

قد تكون الإستراتيجية التي يجب اتباعها هي التفاف الجذر في مكون ReactShadow ، ثم جلب الأنماط باستخدام adoptedStyleSheets (أو عنصر <style> للمتصفحات غير الداعمة)

https://github.com/storybookjs/storybook/blob/ba74d889fcfd87849a6ae9369f5e4176e8149d33/lib/core/src/client/preview/start.js#L253

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

تحرير: شكرا !!!

آمل أن يتم حل هذا بحلول 21 مارس 2020.

moimikey أي مصلحة في القيام بهذا؟ أفضل طريقة للتأكد من إنجازه بحلول تاريخ معين ... 😉

يجب أن نضيف IMO معلمات أو ملحق للتعامل مع هذه الميزة بدلاً من إضافة وظائف خاصة لأوراق الأنماط فقط. سيؤدي ذلك إلى سلوك غير متسق بين أوراق الأنماط والنصوص. ولكن ربما حان الوقت للتفكير في كيفية "العزلة"؟

لقد كتبت PoC سريعًا لنهج الملحق ، لمن يتساءل أنه ممكن.
https://github.com/pocka/storybook-addon-css

pocka أنت رائع! 💯

yazzzzz. هتاف @ بوكا

تجدر الإشارة إلى أن حل

تحرير: بلدي سيئة ، بالتأكيد! يجب أن يكون لديك style-loader 1.x + ثم فعل شيئًا كالتالي:

--- a/components/grid/GridChild.stories.mdx
+++ b/components/grid/GridChild.stories.mdx
@@ -1,7 +1,9 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { GridContainer, GridRow, GridChild } from './';
 import '../../shared/critical-path.scss';
-import 'o-grid/demos/src/scss/_demos.scss';
+import demoStylesModule from '!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!o-grid/demos/src/scss/_demos.scss?story';
+
+export const demoStyles = Promise.resolve(demoStylesModule);

 <Meta title="Core|Grid/GridChild" component={GridChild} />

@@ -37,7 +39,12 @@ You supply it a `colspan` prop in one of the following formats:
     ```

 <Preview>
-  <Story name="Default unresponsive columns">
+  <Story
+    name="Default unresponsive columns"
+    parameters={{
+      styles: [demoStyles],
+    }}
+  >
     <GridContainer>
       <GridRow>
         <GridChild colspan="1">

تضمين التغريدة
شكرًا للإشارة إلى ذلك ، لقد نسيت تمامًا MDX: no_mouth:
لقد قمت بتحديث PoC وأضفت أمثلة MDX .

باستخدام نهج الملحق (لكل أنماط القصة) ، على عكس أسلوب تحديد نطاق الملف (لكل أنماط ملف) ، ستحصل علامة التبويب "المستندات" على جميع أوراق الأنماط لكل قصة. في المثال الخاص بي ، استوردت قصة "foo" و "baz" foo.css واستيراد قصة "bar" bar.css ، ثم تحصل علامة تبويب المستندات على كل من foo.css و bar.css . أعتقد أن هذا أمر لا مفر منه ولا أعرف أن هذا مقبول أم لا.

pocka أعتقد أن هذا النهج قد يعمل بشكل جيد مع https://github.com/storybookjs/storybook/tree/next/addons/cssresources WDYT؟

تضمين التغريدة
آه ، هذا صحيح!

foo.story = {
  parameters: {
    cssresources: [
      {
        id: 'foo',
        code: `<style>${require('!to-string-loader!css-loader!./foo.css')}</style>`,
        picked: true
      }
    ]
  }
}

مصدر قلق واحد: إذا قام المستخدم باستيراد أوراق أنماط كبيرة جدًا ، فستكون علامة التبويب "موارد CSS" فوضوية.

pocka صحيح ، أعتقد أنه يمكن تحسين الملحق cssresources بشكل كبير في هذا القسم. هل تشعر برغبة في القيام بذلك؟

تضمين التغريدة
نعم: مبتسم:

بالمناسبة ، ما رأيك في السماح للمستخدمين بكتابة استعلام webpack الخام؟ (مثل !to-string-loader!... ) أعتقد أننا بحاجة إلى الكثير من السحر الأسود في الكود الإضافي إذا أردنا التخلص من هذا ...

أعتقد أننا ندعم babel-macros افتراضيًا ، لذا يمكن للمستخدمين استخدام macro-الأكثر انتشارًا لإدخال محتويات الملف في الحزمة أيضًا؟

لم أكن أعرف ذلك ، سألقي نظرة عليه قريبًا!

مرحبًا ، أواجه نفس المشكلة.

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

ndelangen لقد ألقيت نظرة على الماكرو ولكن ما يمكّنه هو "تحميل ملفات CSS من نظام الملفات" ، أليس كذلك؟ أعتقد أن العديد من المستخدمين يرغبون في استيراد ملفات SASS أو Less أو Stylus أو CSS باستخدام PostCSS أو غير ذلك ، بحيث لا يلبي هذا النهج الاحتياجات. فكرتي الحالية هي إضافة CSSResource إضافة قاعدة تقوم باستيراد ملف CSS بـ to-string-loader (أو file-loader ) حتى يتمكن المستخدم من استيراد ملف CSS ثم استخدامه للملحق.

// adding a rule like this
{
  test: /\.css$/,
  resourceQuery: /cssresources/,
  use: ['to-string-loader', 'css-loader', 'postcss-loader']
}

بالنسبة إلى المعالجات المسبقة ، هناك حاجة أيضًا إلى خيار تخصيص test و use . من الممكن اختيار قاعدة لملف النمط ثم تعديلها بـ oneOf لكنها ستكون معقدة للغاية ...

ما رأيك؟

pocka نعم هذا يبدو وكأنه مفهوم مثير للاهتمام!

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

مرحبًا ، هل يمكنك تقديم مثال على الحل البديل مع Vue Story.؟

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

مع عدم وجود قصد من عدم الاحترام ، أجد أن نهج الملحق pocka يفتقر إلى حد ما ، لأنه لا يعزل الأنماط التي تم استيرادها في ملفات المكونات على عكس ملفات القصة ، والتي أعتقد أنها النمط الأكثر شيوعًا. رغبتي الشخصية - أظن أن هذا قد يشاركه الآخرون في هذا الموضوع - هو أن أكون قادرًا على الحصول على import './Button.css' داخل Button.jsx يتم استخدامه فقط في ملفات القصة حيث Button.jsx تم استيراد قدمتهاpocka ، ليس بنفس أهمية التأكد من عدم تأثر أي مكون لا يستورد نفسه Button (بشكل مباشر أو غير مباشر) بـ أي قواعد CSS من Button.css . (القلق هنا هو الرغبة في التأكد من أن OtherWidget.css ، على سبيل المثال ، لا تفتقر إلى بعض القواعد التي انتهى بها الأمر بدون قصد إلى Button.css بدلاً من ذلك - ربما تم التغاضي عنها في إعادة البناء أو شيء ما - وفقدان لأن القصص الخاصة بـ OtherWidget تحصل على جميع CSS المستوردة بشكل ثابت للتطبيق بأكمله ، لذلك لا يزال OtherWidget يبدو جيدًا في Storybook.)

ما أعتقد أنني سأفعله بدلاً من ذلك هو تغيير جميع أدوات تحميل CSS للحقن بـ lazyStyleTag ، ثم استخدام webpack API لإنشاء وحدة نمطية جديدة تجمع وحدات CSS حسب ملفات القصة التي تتطلبها في النهاية وتستمع إلى تغيير القصة الأحداث لتشغيل وإيقاف الوحدات المناسبة.
هل تم بالفعل النظر في هذا النهج وتجاهله ، أم أن هناك أي مشكلات معه تراها الآن؟ أعتقد أنه يمكنني القيام بكل ذلك في ملحق Storybook ، ولكن قد يكون أكثر نظافة إذا تم دمجه في Storybook كميزة أساسية.

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

لماذا لا يتم تحويل DOM لكل قصة إلى جذر ظل بشيء من هذا القبيل

customElements.define('encapsulated-story', class EncapsulatedStory extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  /* not sure why we'd need this getter, but let's say */
  get storyHTML() {
    return this.shadowRoot.innerHTML;
  }

  set storyHTML(string) {
    this.shadowRoot.innerHTML = storyHTML;
  }
});

وكلما تغيرت القصة

encapsulatedStory.storyHTML = theStoryDOMStringWithAllStyleTags;

وفعلت؟ هنا ، theStoryDOMStringWithAllStyleTags هو مجرد تسلسل HTML للقصة مع كل الأنماط المرتبطة المتسلسلة كعلامات مضمنة <style> . يمكن للقصة تصميم عنصر المضيف باستخدام محدد :host ، كالمعتاد.

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

كيف يعمل ذلك مع حزمة الويب ، رغم ذلك؟ حزم Webpack كل شيء في حزمة JavaScript ، وليس سلسلة DOM ؛ والطريقة التي يتم بها تكوين حزمة الويب حاليًا ، تقوم بتجميع جميع القصص في حزمة واحدة. لا أعتقد أن جذر الظل يساعد عندما يتم تحميل JavaScript (إعادة التشغيل السريع) لإدراج الأنماط مباشرة في رأس المستند. تحتاج إلى إجراء بعض تهيئة webpack المشعر بطريقة أو بأخرى لتغيير ذلك.

إن استخدام Shadow DOM لعزل كل مجموعة نصية بالكامل يعني أيضًا تكرار علامات النمط المشتركة بين العديد من المجموعات النصية في كل مجموعة ؛ سيكون استخدام نمط مشترك كما تم تجميعه بواسطة حزمة الويب أكثر كفاءة. ربما لا يكفي لإحداث فرق كبير ، ولكن ربما يكون كافيًا لتعويض الفوائد ، إن وجدت ، لاستخدام ظل DOM بدلاً من استخدام lazyStyleTag (والذي أعتقد أنه الجزء الوحيد من التعقيد الذي قد تفعله جذور الظل انقذك).

أنا مهتم أيضًا برؤية هذا تم إصلاحه عاجلاً أم آجلاً.

سيكون ذلك آمنًا وسيئًا أيضًا للأداء.

سيتعين على إطار iframe الجديد تحليل جافا سكريبت وتحليل CSS والاتصال بقناة postmessage وإعادة الاتصال بمقبس الويب وربما المزيد من الأشياء.

ndelangen آسف أن أقتبس منك من عام 2017 ، ولكن هل هذا لا يزال وجهة نظرك ، أن إعادة تحميل iframe مكلف للغاية؟ المتصفحات تفعل هذا النوع من الأشياء باستمرار ؛ من المحتمل أن تكون محسّنة جدًا لذلك. في هذه الحالة سيكون أسرع من تحميل الصفحة العادي ، حيث لا توجد طلبات شبكة متضمنة.

بالنسبة لي ، فإن الميزة تفوق التكلفة ، لأنني أفضل كثيرًا إطار iframe جديدًا لكل قصة. سوف أتحمل تأخيرًا يصل إلى 600 ملي ثانية لمثل هذه الرفاهية.

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

تتمثل إحدى أفكار سطح واجهة برمجة التطبيقات في تكوين القصة المصورة في .storybook/manager.js .

addons.setConfig({
  refreshBetweenStories: true,
})

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

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

إذا كنت تريد إصلاح هذا ، يرجى التصويت عن طريق إضافة 👍 إلى وصف المشكلة. نحن نستخدم هذا للمساعدة في تحديد الأولويات!

.addDecorator ((getStory) => {
تتطلب ('./ story.sass') ؛
إرجاع getStory () ،
})

مرحبا!!!!
أين يمكنني وضع هذا؟ !!!