Storybook: एकल कहानियाँ हर दूसरी कहानियों की शैलियों में खींच रही हैं?

इसके अलावा, वेबपैक उन सभी कहानियों का उत्सर्जन कर रहा है, इसलिए मैं सोच रहा हूं कि क्या यह है कि मैंने वेबपैक कैसे कॉन्फ़िगर किया है?

मैंने एक डेकोरेटर का भी उपयोग करने की कोशिश की, और यह आधे टूटे होने के रूप में समाप्त हो गया, जैसा कि मैं कम से कम अतिरिक्त स्टाइलशीट को कहानी में अलग करने में सक्षम था, लेकिन जैसा कि मैंने दूसरों के माध्यम से पता लगाया, उन शैलियों को तब तक तोड़ दिया जाता जब तक कि मैं एक कठिन ताज़ा नहीं करता।

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

@arunoda @mnmtanish

दिलचस्प !, क्या आपके पास एक रेपो है जो यह प्रदर्शित करता है?

@ndelangen जल्द ही एक बना देगा

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

अभी भी इस की जाँच करने के लिए समय खोजने की कोशिश कर रहा है ..

धन्यवाद; डी यह एक अजीब है। मैंने इसे एक रूप दिया है, लेकिन मैं अनिश्चित हूं कि कहां से शुरू करूं।

इसलिए मुझे लगता है कि सभी घटनाओं को वेबपैक स्टाइल-लोडर द्वारा उठाया जा रहा है और सिर्फ सिर में इंजेक्ट किया जा रहा है। वेदर का उपयोग किया जाता है या नहीं।

लेकिन कैसे ठीक करें?

मैंने अपने सीएसएस के लिए जो किया है वह सीएसएस-मॉड्यूल का उपयोग है। और मेरे जेएस में उत्पन्न वर्गनाम का आयात करें। यहां तक ​​कि अगर सभी सीएसएस को एक साथ सिर में इंजेक्ट किया जाता है, तो इससे कोई फर्क नहीं पड़ता, क्योंकि यह अद्वितीय वर्ग / चयनकर्ता होने की गारंटी है।

यह वास्तव में आपके द्वारा की जा रही सटीक समस्या का समाधान नहीं करता है। लेकिन मुझे लगता है कि यह शैली-लोडर का इच्छित व्यवहार है।

यह सच है। मैं और मेरी कंपनी) सीएसएस के साथ स्कूप कर रहे हैं, लेकिन हम एक विशाल कोड पुनर्विकास कर रहे हैं, इसलिए हमारे पास साझा शैली हैं, इस प्रकार styleName और className एक संयोजन है। तो क्या स्टोरीबुक को प्रभावित करने वाले अंत में "बाहरी" सीएसएस फाइलें हैं।

मैं आज रात स्टोरीबुक कोड पर फिर से गौर करूंगा, क्योंकि मेरे पास कुछ बियर थे और यह पता लगाना था कि इसे कैसे हल किया जाए, कार्यान्वयन बुद्धिमान।

आपकी समस्या के लिए @moimikey मुझे लगता है कि आपको स्टाइल-लोडर और लोड सीएसएस फ़ाइलों को मैन्युअल रूप से डेकोरेटर के साथ छोड़ना होगा। कुछ इस तरह शायद:

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

वाह .... कि मेरे दिमाग से कभी नहीं पार ... मैं कोशिश करूँगा।

ick लेकिन फिर से sass ... x_x का उपयोग कर। मैं भी एक इनलाइन की आवश्यकता की कोशिश की। लेकिन मेरे पास ज्यादा भाग्य नहीं था। हालांकि सीधे सीएसएस के लिए एक उत्कृष्ट समाधान होगा :)

इसलिए @ ममतानिशान। आपके मार्गदर्शन के लिए धन्यवाद। मैंने आपकी प्रेरणा से मेरी समस्या हल कर दी है:

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

एमएमएम तो एकमात्र मुद्दा है तो अब यह है कि जब आप कहानी से कहानी पर नेविगेट करते हैं, तो यह शैलियों को स्टैकिंग कर रहा है :(

शायद स्टाइल लोडर को HEAD के अलावा कहीं और डालने के लिए कॉन्फ़िगर किया जा सकता है ताकि इसे हटाया जा सके। मैंने ऐसा नहीं किया है तो यकीन नहीं होता कि यह संभव भी है। इनकी जांच करें।

क्या पूरी तरह से अलगाव में घटक को लोड करने के लिए स्टोरीबुक की प्रतिक्रिया की जिम्मेदारी नहीं है और इस प्रकार केवल जावास्क्रिप्ट / सीएसएस भागा है जो वर्तमान चयनित कहानी से संबंधित है?

क्या यह https://github.com/storybooks/react-storybook/issues/686 से संबंधित है

@ConneXNL ने हाँ। अच्छी बात। यह सच है ...; एक्स

@mnmtanish मेरी अगली प्रतिक्रिया निश्चित रूप से एक और मुद्दे की ओर ले जाती है, insertAt उपयोगी हो सकती है, लेकिन यह केवल style-loader के नवीनतम संस्करण में उपलब्ध है, जो कि स्टोरीबुक के साथ उपयोग करना संभव नहीं है, क्योंकि यह उपयोग करता है [email protected] । स्टोरीबुक अभी भी 0.x का उपयोग कर रहा है। नवीनतम संभव संस्करण जिसका हम उपयोग कर सकते हैं वह है [email protected] : (...

अरे @moimikey शायद आप अल्फा रिलीज के साथ आखिरी बार बताए गए तरीके को आजमा सकते हैं?

क्या कहानियों को बदलते समय एक नया iframe तत्व बनाना बेहतर / सुरक्षित नहीं है?

यह सुरक्षित होगा, और प्रदर्शन के लिए भी बुरा होगा।

नए आइफ्रेम को जावास्क्रिप्ट को पार्स करना होगा, सीएसएस को पार्स करना होगा, पोस्टमेसेज-चैनल से कनेक्ट करना होगा, वेबस्कैट से फिर से कनेक्ट करना होगा, और शायद अधिक सामान।

शायद स्टोरी-स्विच पर <style> तत्व निकालना इस समस्या को हल करने के लिए पर्याप्त है?

बेशक कोई वैश्विक शैली नहीं है और सब कुछ ठीक से नामांकित है, यह एक मुद्दा बिल्कुल नहीं होगा। इच्छाधारी सोच मुझे लगता है। 😃

अगर कोई साबित कर सकता है कि उपरोक्त कथन गलत हैं या प्रदर्शित कर सकते हैं कि कोई नकारात्मक परिणाम नहीं है, तो मैं सभी कान हूँ!

मैंने आज कुछ परीक्षण किए। डेकोरेटर पैटर्न ने अच्छी तरह से काम किया है ताकि स्टाइल केवल एक बार इंजेक्ट हो जाए जब आप कहानी पर स्विच करते हैं। हालाँकि, मेरे पास एक ही मुद्दा था कि कहानियों को बदलते समय शैलियों को हटाया नहीं जाता है।

मैं एक सज्जाकार में शैलियों को हटाने के साथ खेलता हूं, लेकिन ऐसा लगता है कि आवश्यक शैली केवल एक बार लागू होती है। क्या किसी आवश्यकता () को फिर से ट्रिगर करना संभव है? मैंने सिंगलटन का उपयोग करने की कोशिश की: झूठी लेकिन यह समस्या ठीक नहीं हुई।

मुझे यह सुझाव देने में लगभग संकोच हो रहा है, लेकिन आप वेबपैक कैश को हटाने की कोशिश कर सकते हैं:
https://webpack.github.io/docs/api-in-modules.html#advanced

यह वेबपैक 1 डॉक्स है, लेकिन फिर भी काम कर सकता है।

विचार: आप एक डेकोरेटर लिख सकते हैं जो कहानियों को स्विच करते समय सभी <style>...</style> को हटा देता है। वर्तमान कहानी के लिए प्रासंगिक नहीं शैलियों को साफ करने के लिए।

मैं लगभग वहाँ हूँ। वेबपैक कॉन्फ़िगरेशन में मैं उपयोग करता हूं
'style-loader/useable' instead of 'style-loader',

यह आपके साथ काम करने के लिए एक एपीआई जोड़ता है। .use () शैलियों को जोड़ने के लिए, उन्हें हटाने के लिए अप्रयुक्त ()। अपनी कहानियों की फाइल में मैं डेकोरेटर का उपयोग करता हूं जैसे:

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

शैलियों को जोड़ने और हटाने के लिए निम्नलिखित प्रतिक्रिया घटक का उपयोग करना।

आयात * 'प्रतिक्रिया' से प्रतिक्रिया के रूप में;

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

स्टाइलशीट को सही ढंग से बदलने से स्टाइल पुनः लोड हो जाते हैं। एक अलग कहानी अप्रयुक्त () पर स्विच करना कहा जाता है और स्टाइलशीट को साफ किया जाता है। हालाँकि, जब यह शैलियों को फिर से जोड़ रहा है, तो यह विधि टूट जाती है क्योंकि यह स्टाइलशीट के गैर-घंटा अपडेट किए गए संस्करण का विज्ञापन करता है। उसके बाद कोई भी परिवर्तन करना भी इस त्रुटि को फेंकता है:

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 दिनों के बाद निष्क्रिय मुद्दों को बंद कर दिया जाएगा। धन्यवाद!

अरे, यह मुझे फिर से है! मैं इस मुद्दे को बंद करने जा रहा हूं ताकि हमारे रखवाले इसके बजाय वर्तमान विकास रोडमैप पर ध्यान केंद्रित कर सकें। यदि उल्लेख किया गया मुद्दा अभी भी एक चिंता का विषय है, तो कृपया एक नया टिकट खोलें और इस पुराने का उल्लेख करें। स्टोरीबुक का उपयोग करने के लिए चीयर्स और धन्यवाद!

यहाँ एक ही मुद्दा, स्टोरीबुक प्रत्येक कहानी को अलग नहीं करता है, यह किसी भी दृश्य परीक्षण / स्वीकृति परीक्षण के लिए बेकार है।

कहानियों के इर्द-गिर्द छाया की जड़ डालकर @ndelangen के प्रदर्शन की चिंताओं के बिना इस समस्या को तुरंत हल किया जाएगा

@bennypowers दिलचस्प! आप कैसे प्राप्त करने के बारे में एक कोड नमूना होगा? 🙇

@Shilman के लिए भी दिलचस्प हो सकता है।

नमस्ते। मैं भी इस मुद्दे का अनुभव कर रहा हूँ
क्या यह तय था या कोई वर्कअराउंड है?

@ndelangen

यहाँ संतुष्टि के लिए सबसे तेज़ रास्ता शायद @mimikey का ReactShadow इस्तेमाल करने का सुझाव है

लेने के लिए रणनीति एक ReactShadow घटक में जड़ को लपेटने के लिए हो सकती है, फिर शैलियों में adoptedStyleSheets (या <style> गैर-सहायक ब्राउज़रों के लिए तत्व) के साथ लाएं

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

कृपया इसे फिर से खोलें, यह समस्या कस्टम स्टोरी को प्रति-कहानी के आधार पर अत्यधिक मुश्किल से जोड़ रही है। मेरे पास पूरी तरह से अलग एमडीएक्स कहानियां हैं जो उनके उदाहरणों के लिए कस्टम स्टाइल को लागू करती हैं, और विश्व स्तर पर हर कहानी से सभी शैलियों को शामिल करती हैं जो इस उपयोग के मामले को अस्थिर बनाती हैं।

संपादित करें: धन्यवाद !!!

मुझे आशा है कि यह मार्च 21, 2020 तक हल हो जाएगा।

@moimikey इस पर लेने में कोई दिलचस्पी है? यह सुनिश्चित करने का सबसे अच्छा तरीका है कि एक निश्चित तिथि ...

IMO हमें केवल स्टाइलशीट्स के लिए विशेष कार्यक्षमता जोड़ने के बजाय इस सुविधा को संभालने के लिए पैरामीटर या एडऑन जोड़ना चाहिए। यह स्टाइलशीट और स्क्रिप्ट के बीच असंगत व्यवहार का कारण होगा। लेकिन शायद यह विचार करने का एक अच्छा समय है कि "अलगाव" कैसे होना चाहिए?

मैंने ऐडोन दृष्टिकोण के लिए एक त्वरित पीओसी लिखा था, जो आश्चर्यचकित करता है कि यह संभव है।
https://github.com/pocka/storybook-addon-css

@pocka आप भयानक हैं! 💯

यज़्ज़्ज़्ज़। चीयर्स @ पक्का

अगर आप MDX कहानियों का उपयोग mdx -js / mdx # 894 पर कर रहे हैं तो वर्थ नोटिंग

संपादित करें: मेरा बुरा, यह निश्चित रूप से करता है! आपको स्टाइल-लोडर 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 उदाहरण जोड़े ।

Addon दृष्टिकोण (प्रति कहानी शैलियों) के साथ, फ़ाइल-स्कूपिंग दृष्टिकोण (प्रति फ़ाइल शैलियों) के विपरीत, डॉक्स टैब को हर कहानी के सभी स्टाइलशीट मिलेंगे। मेरे उदाहरण में , "फू" और "बाज" कहानी foo.css और "बार" कहानी का आयात bar.css आयात करती है, तो डॉक्स टैब को foo.css और bar.css दोनों मिलते हैं। । मुझे लगता है कि यह अपरिहार्य है और मुझे नहीं पता कि यह स्वीकार्य है या नहीं।

@pocka मुझे लगता है कि दृष्टिकोण https://github.com/storybookjs/storybook/tree/next/addons/cssresources WDYT के साथ अच्छी तरह से काम कर सकता है?

@ndelangen
आह, यह सही है!

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

एक चिंता: यदि कोई उपयोगकर्ता बहुत बड़ी स्टाइलशीट आयात करता है, तो "सीएसएस संसाधन" टैब गड़बड़ हो जाएगा।

@pocka सही, मुझे लगता है कि cssresources addon को उस विभाग में काफी सुधार किया जा सकता है। क्या आपको ऐसा लगता है?

@ndelangen
हाँ: स्माइली:

वैसे, आप उपयोगकर्ताओं को रॉ-वेबपैक-क्वेरी लिखने की अनुमति देने के बारे में क्या सोचते हैं? ( !to-string-loader!... ) मुझे लगता है कि अगर हम इससे छुटकारा पाना चाहते हैं तो हमें एडऑन कोड में बहुत सारे काले जादू की आवश्यकता है।

मुझे लगता है कि हम डिफ़ॉल्ट रूप से बैबेल -मैक्रोज़ का समर्थन करते हैं, इसलिए उपयोगकर्ता

मुझे नहीं पता था कि, मैं जल्द ही इस पर एक नज़र डालूंगा!

नमस्ते वहाँ, मैं एक ही मुद्दे का अनुभव कर रहा हूँ।

समस्या का सामना करने वाले किसी भी व्यक्ति के लिए, कृपया इस समाधान का प्रयास

@ndelangen मैंने मैक्रो पर एक नज़र to-string-loader (या file-loader ) के साथ CSS फ़ाइल आयात करता है ताकि उपयोगकर्ता CSS फ़ाइल आयात कर सके और फिर इसे एडऑन के लिए उपयोग कर सके।

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

प्री-प्रोसेसर के लिए, test और use कस्टमाइज़ करने का विकल्प भी आवश्यक है। शैली फ़ाइल के लिए एक नियम चुनना संभव है, फिर इसे oneOf साथ संशोधित करें लेकिन यह इतना जटिल होगा ...

तुम क्या सोचते हो?

@ पक्का हाँ जो एक दिलचस्प अवधारणा की तरह लगता है!

नमस्ते, अगर यह अभी भी काम किया जा रहा है आश्चर्य है? मुझे भी समस्या का सामना करना पड़ रहा है, मुझे काम के बारे में पता है लेकिन यह जानना चाहूंगा कि क्या कोई फिक्स जल्द ही उपलब्ध होगा।

नमस्ते, क्या आप Vue स्टोरी के साथ वर्कअराउंड का उदाहरण प्रदान कर सकते हैं?

जहाँ तक मैं बता सकता हूँ, वर्कअराउंड अभी भी प्रारंभिक दृश्य के बाद स्टैकशीट का परिणाम देता है, कम से कम यदि आप डॉक्स ऐड-ऑन का उपयोग कर रहे हैं। 😕

बिना किसी अनादर के, मुझे लगता है कि @pocka के ऐडोन अप्रोच में कमी है, क्योंकि यह उन शैलियों को अलग नहीं करता है, जो घटक फाइलों में आयात की गई हैं, जैसा कि स्टोरी फाइलों में विरोध किया गया है, जो मुझे लगता है कि अधिक सामान्य पैटर्न है। मेरा व्यक्तिगत इच्छा-मुझे लगता है यह दूसरों के द्वारा इस में साझा किया जा सकता एक है करने के लिए सक्षम होने के लिए धागा है import './Button.css' के अंदर Button.jsx है कि केवल कहानी फाइलों में इस्तेमाल किया जाता है जहां Button.jsx आयात किया जाता है। प्रति-कहानी स्टाइल, @pocka ने जिस तरीके से प्रदान किया है, वह मेरे लिए लगभग उतना ही महत्वपूर्ण नहीं है जितना यह सुनिश्चित करना कि कोई भी घटक जो स्वयं Button आयात नहीं करता है (प्रत्यक्ष या अप्रत्यक्ष रूप से) इससे प्रभावित नहीं होता है Button.css से कोई भी CSS नियम। (यहाँ चिंता यह है कि OtherWidget.css सुनिश्चित करना चाहते हैं, कहते हैं, कुछ नियमों की कमी नहीं है कि अनजाने में Button.css खत्म हो गया है - शायद वे एक refactoring या कुछ में गायब हो गया है और गायब है) ऐसा इसलिए है क्योंकि OtherWidget की कहानियों को संपूर्ण ऐप के सभी स्टैटिकली-आयातित सीएसएस मिलते हैं, इसलिए OtherWidget अभी भी स्टोरीबुक में ठीक दिखता है।)

मुझे लगता है कि मैं इसके बजाय lazyStyleTag साथ इंजेक्ट करने के लिए सभी CSS लोडर को बदल दूंगा, और फिर वेबपैक एपीआई का उपयोग करके एक नया मॉड्यूल उत्पन्न करूंगा जो सीएसएस मॉड्यूल को कहानी फाइलों द्वारा समूहित करता है जो अंततः उनकी आवश्यकता होती है और कहानी में बदलाव को सुनता है उचित मॉड्यूल को चालू और बंद करने की घटनाएं।
क्या इस दृष्टिकोण पर पहले ही विचार किया जा चुका है और इसे छोड़ दिया गया है, या इसके साथ कोई समस्या है जिसे आप अभी देखते हैं? मुझे लगता है कि मैं यह सब स्टोरीबुक के ऐडऑन में कर सकता हूं, लेकिन अगर स्टोरीबुक को एक कोर फीचर के रूप में एकीकृत किया जाए तो यह क्लीनर हो सकता है।

यदि आप मजबूत स्टाइल एनकैप्सुलेशन चाहते हैं, तो ब्राउज़र इसके साथ जहाज करते हैं। यहां अपनी खुद की अज्ञानता को उजागर करने के जोखिम में, मुझे अभी भी यकीन नहीं है कि यह सब उपयोगकर्तालैंड जावास्क्रिप्ट (इसकी संबंधित जटिलता की लागत के साथ) कुछ ऐसा करने के लिए आवश्यक है जो अंतर्निहित और जाने के लिए तैयार है।

क्यों न केवल इस तरह से कुछ के साथ एक छाया में मूल में प्रत्येक कहानी के डोम प्रस्तुत करना

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 चयनकर्ता के साथ मेजबान तत्व को स्टाइल कर सकती है।

यह एक नंगे-माइनुम शुरुआती बिंदु है, जिसे बाद में शायद कुछ पुस्तकालय कोड के साथ बनाया जा सकता है, लेकिन कम से कम यह इन सभी नए प्रस्तावित एपीआई की आवश्यकता के बिना मजबूत स्टाइल इनकैप्सुलेशन के लक्ष्य को पूरा करेगा।

हालांकि यह वेबपैक के साथ कैसे काम करता है? वेबपैक एक जावास्क्रिप्ट बंडल में सब कुछ पैकेज करता है, डोम स्ट्रिंग नहीं; और जिस तरह से वेबपैक वर्तमान में कॉन्फ़िगर किया गया है, यह सभी कहानियों को एक बंडल में पैकेज करता है। मुझे नहीं लगता कि एक छाया रूट मदद करता है जब जावास्क्रिप्ट को (हॉट-री) आवेषण शैलियों को सीधे दस्तावेज़ के सिर में लोड किया जाता है। आपको कुछ बालों वाले वेबपैक कॉन्फ़िगरेशन को एक या दूसरे तरीके से करने की ज़रूरत है ताकि इसे बदल सकें।

प्रत्येक कहानी को पूरी तरह से अलग करने के लिए शैडो डीओएम का उपयोग करने का मतलब यह भी होगा कि हर एक में कई कहानियों द्वारा साझा किए गए शैली टैगों की प्रतिकृति; वेबपैक द्वारा बंडल किए गए साझा शैली का उपयोग करना अधिक कुशल होगा। शायद बहुत बड़ा अंतर करने के लिए पर्याप्त नहीं है, लेकिन संभवतः लाभ को ऑफसेट करने के लिए पर्याप्त है, अगर lazyStyleTag का उपयोग करने के बजाय छाया डोम का उपयोग करने के लिए कोई भी हो, (जो मुझे लगता है कि जटिलता का एकमात्र टुकड़ा है जो छाया जड़ें होगी आपको बचाना)।

मुझे भी इस तयशुदा या बाद में देखने का शौक है।

यह सुरक्षित होगा, और प्रदर्शन के लिए भी बुरा होगा।

नए आइफ्रेम को जावास्क्रिप्ट को पार्स करना होगा, सीएसएस को पार्स करना होगा, पोस्टमेसेज-चैनल से कनेक्ट करना होगा, वेबस्कैट से फिर से कनेक्ट करना होगा, और शायद अधिक सामान।

@ndelangen 2017 से आपको उद्धृत करने के लिए खेद है, लेकिन क्या यह अभी भी आपका दृष्टिकोण है, कि एक आइफ्रेम को फिर से लोड करना बहुत महंगा है? ब्राउजर लगातार इस प्रकार का काम करते हैं; वे शायद इसके लिए बहुत अनुकूलित हैं। इस मामले में यह एक नियमित पेज लोड से भी तेज होगा, क्योंकि इसमें नेटवर्क अनुरोध शामिल नहीं हैं।

मेरे लिए, लाभ लागत से आगे निकल जाता है, क्योंकि मैं प्रत्येक कहानी के लिए एक ताजा iframe पसंद करूंगा। मैं इस तरह के एक लक्जरी के लिए 600ms की देरी को बर्दाश्त करूंगा।

(मेरा उपयोग मामला यह है कि मैं स्टोरीबुक में कुछ विरासत angularjs घटकों को प्रस्तुत करने की कोशिश कर रहा हूं, और चलो बस इतना कहना है कि घटक बहुत शुद्ध नहीं हैं। वे बहुत ही स्टेटफुल हैं; उनके साइड इफेक्ट्स हैं और एंगुलरज सेवाओं का उपयोग करते हैं जो बहुत स्टेटफुल है। अप्रत्याशित तरीके से चीजें टूटती हैं।)

एपीआई सतह के लिए एक विचार .storybook/manager.js में स्टोरीबुक को कॉन्फ़िगर करना है।

addons.setConfig({
  refreshBetweenStories: true,
})

इसे यूआई सेटिंग माना जा सकता है यदि आप अपने सिर को सही तरीके से झुकाते हैं।

ऐसे लोगों के लिए कोई रनटाइम लागत नहीं होगी जो इस ध्वज को सक्षम नहीं करते हैं, और जो लोग इसे सक्षम करते हैं, उनके लिए _really_ को इसकी आवश्यकता होती है, इसलिए ऐसी कोई भी देरी बर्दाश्त करने योग्य नहीं होगी।

यदि आप इसे ठीक करना चाहते हैं, तो कृपया मुद्दे के विवरण में एक, जोड़कर इसे बढ़ाएं। हम इसका उपयोग प्राथमिकता देने में मदद करने के लिए करते हैं!

.addecorator ((getStory) => {
आवश्यकता होती है ('./ story.sass');
वापसी getStory ();
})

नमस्ते!!!!
मैं इसे कहां रख सकता हूं? !!!