#1870 और #3423 पर डुप्लिकेट करें। आइए वहां एक चर्चा जारी रखें

करंट स्टैंसिल और एसबी 5 के लिए नया स्टार्टर बिल्ड बनाया जाएगा

@ एड-स्ट्रिकलैंड एक स्टैंक्ल सपोर्ट वर्जन पर काम करना चाहते हैं

मैंने पॉलीमर स्टार्टर को स्टैंसिल के साथ एसबी के नवीनतम संस्करण में अपग्रेड किया है, पॉलीमर को हटाने और स्टैंसिल कंप्लायर में जोड़ने में कुछ मदद की जरूरत है

नमस्ते,

@ एड-स्ट्रिकलैंड सिर्फ जानकारी के लिए, मैंने स्टोरीबुक के अंदर स्टैंसिल को लागू किया है जैसे आपने अपने स्टार्टर में किया था, इस परियोजना में: https://github.com/vogloblinsky/nutrition-web-components

मैंने Storybook के HTML स्टार्टर का उपयोग किया है।

स्टोरीबुक और स्टैंसिल के साथ अभी के लिए, मुझे बस यह करना था:

• स्टैंसिल द्वारा उत्पन्न प्रत्येक रूट जावास्क्रिप्ट फ़ाइल की ओर इशारा करते हुए एक कस्टम हेडर जोड़ें
• स्टोरीबुक में स्टैंसिल द्वारा उत्पन्न स्थिर फाइलें जोड़ें

मुझे लगता है कि मुख्य समस्या कहानी के अंदर आयात की गई जावास्क्रिप्ट फ़ाइलों को संभालने के लिए स्टोरीबुक द्वारा वेबपैक का उपयोग है। आदर्श कार्यप्रवाह केवल वेब घटक की JS फ़ाइल को आयात करना है।

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

हाय सब, मैंने एक रैपर बनाया है जिसे स्टैंसिल component टाइप प्रोजेक्ट पर स्थापित किया जा सकता है। आशा है कि इससे सहायता मिलेगी। https://github.com/nisheed2440/stencil-storybook-wrapper

वास्तव में अच्छा लग रहा है मैं सोमवार को परीक्षण करूंगा। अच्छा कार्य :)

क्या इसे स्टोरीबुक का आधिकारिक हिस्सा बनाया जाएगा? मुझे इसकी सख्त जरूरत है!

@otw हम कोशिश कर रहे हैं, क्या आप हमारी मदद कर पाएंगे?

@ndelangen मुझे चीजों का परीक्षण करने और फीडबैक/बग रिपोर्ट प्रदान करने में खुशी होगी।

क्या यह लिटलेमेंट (और सामान्य रूप से वेब घटकों) या सिर्फ स्टैंसिल के साथ काम करेगा?

@ nisheed2440 आपका रैपर आशाजनक लगता है, मैं जल्द ही इसका परीक्षण करूंगा! लेकिन स्टोरीबुक द्वारा प्रलेखित "मूल" एकीकरण होना बहुत अच्छा हो सकता है

@ nisheed2440 मैं बहुत व्यस्त रहा हूं (सभी को क्षमा करें) लेकिन स्थानीय स्तर पर इसके बहुत ही वैनिला संस्करण का परीक्षण करने के लिए आज एक बहुत छोटी खिड़की है और यह वास्तव में अच्छा है। वास्तव में अच्छा काम करता है।

अगले हफ्ते इस पर कुछ समय बिताने के लिए इसे मौजूदा प्रोजेक्ट में शामिल करने की कोशिश कर रहा है ताकि यह देखने के लिए कि यह मौजूदा स्टैंसिल उपयोगकर्ताओं/परियोजनाओं के लिए कैसे काम कर सकता है।

मैंने आज सुबह इसका परीक्षण किया है और यह भी बहुत अच्छा काम करता है! जीजे इसे सेटअप करना वाकई आसान है। मैंने कुछ ऐडऑन स्थापित और परीक्षण किए हैं:

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 लेकिन एक समाधान है और मुझे लगता है कि यह बहुत जल्द तय किया जाना चाहिए।

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

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 पैकेज प्रकाशित करना होगा जो @popcorn245 के कॉन्फिग को स्टोरीबुक प्रीसेट में पैकेज करता है। मुझे अभी भी इसके लिए दस्तावेज़ों को समाप्त करने की आवश्यकता है, लेकिन मैं इसे आगामी स्टोरीबुक डॉक्स रिलीज के लिए उपयोग कर रहा हूं और यह सीधा है और भविष्य में अधिकांश एसबी कॉन्फ़िगरेशन कैसे काम करेगा।

मुझे किसी का भी मार्गदर्शन करने में खुशी होगी जो इसे चुनना चाहता है।

अरे @shilman , इतने सारे लोग इस पर पिकअप करने और स्टोरीबुक के साथ स्टैंसिल को लागू करने के लिए

एक बेहतर कार्यान्वयन स्टैंसिल कंपाइलर से पीछे हट जाएगा और जेएसएक्स के उपयोग की अनुमति देगा जैसे रिएक्ट घटकों के साथ, लेकिन वह एमएचओ है।

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

https://github.com/ionic-team/stencil/blob/core-refactor/BREAKING_CHANGES.md

यह धागा मेरे लिए बेहद मददगार था, खासकर @ पॉपकॉर्न 245 के कॉन्फिगरेशन। व्यक्तिगत रूप से मैं @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 का उपयोग करना मेरे लिए ठीक काम करता है (अभी के लिए)। मैंने एक त्वरित स्टार्टर प्रोजेक्ट बनाया जिसमें स्टैंसिल और स्टोरीबुक दोनों के साथ उठने और चलने के लिए आवश्यक सब कुछ शामिल है। पहले से ही नवीनतम स्टैंसिल रिलीज़ का उपयोग कर रहे हैं।

इसे यहां देखें: स्टैंसिल-स्टोरीबुक-स्टार्टर

@ fvaldes33 अच्छा! इसे तारांकित किया। मैं वास्तव में सिर्फ स्टैंसिल वन बीटा में अपडेट किया गया था और मेरी कॉन्फ़िगरेशन समान दिखती है- मैं मूल रूप से स्टॉक वेबपैक सेटअप का पूरी तरह से उपयोग कर सकता था।

मेरे लिए एकमात्र अंतर stencil build --watch (उत्पाद, देव नहीं) का उपयोग कर रहा था क्योंकि निर्माण समय इतना तेज़ है और स्टैंसिल में उत्पाद संस्करण का उपभोग करना आसान है (विशेष रूप से वैश्विक शैलियों और अन्य आयातों के साथ)।

@ fvaldes33 आप अपने पूर्वावलोकन-head.html में बिल्ड/ तरह कैसे संदर्भित कर सकते हैं? मुझे पूर्ण पथ की आपूर्ति करनी है जैसे http://localhost :3333/build/components.js। लेकिन मैं चाहूंगा कि ऐसा न करना पड़े।

(मैं आपके स्टार्टर का उपयोग नहीं कर रहा हूं, लेकिन मैं एक ताजा स्टोरीबुक/एचटीएमएल इंस्टॉल के साथ स्टैंसिल घटक स्टार्टर का उपयोग कर रहा हूं)

संपादित करें:
एहसास हुआ कि मैं www फ़ोल्डर के बजाय पोर्ट 6006 पर स्टोरीबुक शुरू कर रहा था। समस्या हल हो गई!

ऐसा लगता है कि हममें से बहुतों के पास समान समाधान हैं (मेरे साथ https://github.com/jagreehal/stencil-boilerplate), लेकिन जब मैं स्टैंसिल घटक संपादित करता हूं तो मुझे वास्तव में गर्म/लाइव अपडेट पसंद आएगा। वर्तमान में मुझे स्टोरीबुक को पुनः लोड करने के लिए ब्राउज़र को मैन्युअल रूप से रीफ्रेश करना होगा।

क्या इसे पूरा करने के लिए आवश्यकताओं की बुलेट सूची है? मुझे पिच करने में खुशी होगी अगर मुझे पता था कि क्या बनाने की जरूरत है।

वर्तमान स्थिति क्या है? क्या हम योगदान दे सकते हैं? मैं इसे देखना पसंद करूंगा!

मैंने ऊपर एक पूर्व निर्धारित योगदान करने का सुझाव दिया।

• प्रीसेट यहां प्रलेखित हैं: https://storybook.js.org/docs/presets/introduction/
• यहां सामुदायिक प्रीसेट के लिए एक रेपो है: https://github.com/storybookjs/presets

अगर कोई उपरोक्त पैटर्न के आधार पर एक प्रीसेट को एक साथ रखना चाहता है, तो मुझे स्टोरीबुक पक्ष में मदद करने में खुशी होगी। मैं स्टैंसिल पक्ष से परिचित नहीं हूँ।

मैंने अभी अपना प्रोजेक्ट वहां पोस्ट किया है जो इसे चाहता है। यहाँ विशेषताएं हैं:

• कहानियों की स्वचालित पीढ़ी
  
  
  
  • आपके घटकों पर सभी @Props लिए स्वचालित घुंडी पीढ़ी
  
  
  • प्रत्येक प्रोप के लिए कौन से नॉब्स का उपयोग किया जाता है, इसे अनुकूलित करने की क्षमता (हालांकि कोड स्ट्रिंग्स, नंबर्स, बूलियन्स, ऑब्जेक्ट्स, डेट्स और रंगों के अनुमान लगाने का अच्छा काम करता है)।
  
  
  • कई राज्यों को परिभाषित करने की क्षमता जो एक ही पृष्ठ पर प्रस्तुत किए जाते हैं, प्रत्येक एक शीर्षक, विवरण और कॉपी करने योग्य कोड स्निपेट के साथ (एक हल्के अध्याय कार्यान्वयन की तरह)
  
  
  • प्रत्येक घटक के लिए नोट्स को परिभाषित करने की क्षमता (आमतौर पर आप उत्पन्न रीडमी चाहते हैं)
  
  
• स्टैंसिल घटकों का लाइव पुनर्निर्माण/पुनः लोड (यह अभी भी थोड़ा भद्दा है - कभी-कभी आपको ब्राउज़र को रीफ्रेश करना पड़ता है)
• व्यूपोर्ट ऐड-ऑन के साथ आता है

मुझे बताएं कि आप क्या सोचते हैं: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx यह बहुत अच्छा लग रहा है। इसके बारे में ट्वीट करें और @storybookjs उल्लेख करें और मैं स्टोरीबुक खाते से RT करूंगा। और अगर आप इसके बारे में एक पोस्ट लिखना चाहते हैं, तो मुझे आपके साथ काम करके इसे प्रचारित करने में खुशी होगी। मुझे लगता है कि यहां काफी बड़ी मांग है।

कमाल का काम @DesignByOnyx ! ऐसा लगता है कि यह पूर्व निर्धारित होने के लिए पूरी तरह से फिट बैठता है :tada:

ठीक है, मैंने ट्वीट किया है (मैं ज्यादा ट्विटर नहीं करता)। इसके अलावा मेरे पास कोई ब्लॉग नहीं है: /, लेकिन अगर कोई इसे प्रकाशित करना चाहता है तो मुझे एक साथ रखने में खुशी होगी।

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

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

@DesignByOnyx किसी भी मौके पर आप हमारे कलह पर https://discordapp.com/invite/UUt2PJb

मुझे स्टोरीबुक ब्लॉग पर इस काम को करने के साथ-साथ स्टैंसिल समुदाय में प्रचार करने के बारे में और बात करना अच्छा लगेगा।

मैं स्टैंसिल के लिए @storybook/html साथ खेल रहा हूं और अनुभव काफी "बस काम करता है"। आप अनिवार्य रूप से निम्न कार्य करते हैं:

1. स्टोरीबुक सर्वर शुरू करने के लिए concurrently का उपयोग करें और stencil build --watch "समानांतर में"
2. storybook को -s dist ध्वज के साथ प्रारंभ करें, ताकि आपकी स्टैंसिल 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. स्टोरीबुक के हिस्से के रूप में स्टैंसिल बिल्ड प्रक्रिया को चलाने वाले सार, ताकि concurrently को कॉन्फ़िगर करने की आवश्यकता न हो
2. आपके लिए उन script टैग को जोड़ता है
3. जब आपके स्टैंसिल घटक फिर से बनते हैं तो ऑटो-रीफ़्रेश को हुक करता है

क्या ऐसी किसी चीज़ में दिलचस्पी है? मैं अपनी कंपनी को स्टैंसिल और स्टोरीबुक पर बेचने की प्रक्रिया में हूं, और यह मानते हुए कि लाभ कर्षण है, मेरे पास स्टोरीबुक + स्टैंसिल के एक साथ खेलने के आसपास उस कहानी को वास्तव में अच्छा बनाने के लिए "काम का समय" होगा।

@DesignByOnyx ने जो काम किया है वह वास्तव में बहुत अच्छा है, लेकिन आपको उस किट के साथ अपने स्टैंसिल घटकों को _start_ करना होगा और स्टैंसिल के लिए "सामान्य" दस्तावेज़ीकरण को अनदेखा करना होगा। यदि स्टोरीबुक एक पैकेज प्रदान कर सकता है जिसे "सामान्य" स्टैंसिल स्टार्टर किट के ऊपर स्तरित किया जा सकता है, तो आप स्टैंसिल घटकों के मौजूदा सेट में आसानी से स्टोरीबुक कॉन्फिगरेशन जोड़ सकते हैं।

महान सारांश @alexlafroscia के लिए धन्यवाद। मुझे लगता है कि आपका प्रस्ताव बहुत मायने रखता है। जब स्टैंसिल का पुनर्निर्माण होता है तो क्या एचएमआर स्वचालित रूप से किक नहीं करता है? यदि हां, तो कोई विचार क्यों नहीं?

@ इगोर-डीवी क्या प्रीसेट में preview-head.html में जोड़ना संभव है?

@Hypnosphi शायद यह आपके बहु-ढांचे के प्रयासों के लिए एक दिलचस्प उदाहरण है। इस मामले में कोई डेकोरेटर की जरूरत नहीं है (जाहिरा तौर पर) लेकिन एक संपूर्ण कंपाइलर की जरूरत है।

@alexlafroscia आपके मामले में कहानी का उदाहरण कैसा दिखता है?

जिस कंपनी में मैं काम करता हूं, हम कुछ समय के लिए Storybook HTML और StencilJS पैकेज के साथ खेल रहे हैं। मुझे योगदान करने में खुशी होगी!

@alexlafroscia बहुत अच्छे विचार, वास्तव में इस कंपाइलर के लिए पूर्ण समर्थन प्राप्त करना अच्छा होगा। यहाँ कुछ अन्य विचार हैं:

• कहानियों को अधिक रखरखाव योग्य तरीके से लिखने के लिए StencilJS JSX क्षमताओं (फिलहाल Preact पर आधारित) का उपयोग करें। सादे पुराने जेएस या यहां तक ​​​​कि टेम्पलेट अक्षर का उपयोग करना बोझिल हो सकता है ...
• वेब कंपोनेंट्स के लिए स्मार्ट नॉब्स एडऑन रखें । @DesignByOnyx ने इसके लिए एक अच्छा आधार प्रदान किया।

इस लेख में स्टैंसिलजेएस में चल रहे रोडमैप को शामिल किया गया है:

सार्वजनिक संकलक एपीआई

एक अन्य क्षेत्र जिस पर हम ध्यान केंद्रित कर रहे हैं वह यह सुनिश्चित कर रहा है कि कंपाइलर एक ब्राउज़र के भीतर काम कर सकता है और अन्य टूल्स द्वारा उपयोग किया जा सकता है। हम पहले से ही कुछ शानदार टीमों जैसे कि Stackblitz, CodeSandbox, और WebComponents.dev के साथ काम कर रहे हैं। निम्नतम स्तरों पर, संकलक पहले से ही एक NodeJS वातावरण के ऊपर चलने के बिना काम करता है, इसलिए तकनीकी रूप से यह एक प्रमुख रिफ्लेक्टर नहीं है, लेकिन अधिक-तो बस सही एपीआई को उजागर करना।

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

योग्य हो सकता है!

जब स्टैंसिल का पुनर्निर्माण होता है तो क्या एचएमआर स्वचालित रूप से किक नहीं करता है? यदि हां, तो कोई विचार क्यों नहीं?

@shilman यह किक नहीं करता है क्योंकि स्टोरीबुक और स्टैंसिल के बीच मेरे पास जो सेटअप है, उसमें कोई "वास्तविक" कनेक्शन नहीं है। यह केवल एक साधारण <script> टैग है जो निर्मित संपत्तियों की ओर इशारा करता है।

आपके मामले में कहानी का उदाहरण कैसा दिखता है?

@Hypnosphi वे कुछ इस तरह दिखते हैं (डिफ़ॉल्ट my-component लिए एक कहानी जो स्टैंसिल आपके द्वारा बनाए गए प्रारंभिक पैकेज में उत्पन्न होती है जब आप 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 पर आधारित) का उपयोग करें। सादे पुराने जेएस या यहां तक ​​​​कि टेम्पलेट अक्षर का उपयोग करना बोझिल हो सकता है ...

@darondel मैं कहानी संलेखन फ़ाइलों में @storybook/html उपलब्ध था, और प्रतिक्रिया अनुभव का उपयोग किया जो ठीक था।

चीजों को "डिफ़ॉल्ट" html अनुभव के करीब रखने की इच्छा का एक हिस्सा यह है कि कहानियां HTML परिप्रेक्ष्य से वास्तव में उनका उपयोग करने के तरीके पर दस्तावेज़ीकरण के रूप में कार्य करती हैं - अन्यथा वे प्रीएक्ट जैसी किसी चीज़ से बंधे होते हैं, जो कम से कम मेरे संगठन में, कहीं और उपयोग नहीं किया जा रहा है (हम मुख्य रूप से एक Ember.js दुकान हैं)।

आपने बताया कि टेम्प्लेट टैग एक अच्छा अनुभव नहीं होगा, लेकिन मुझे लगता है कि htm जैसा कुछ एक अच्छा विकल्प हो सकता है। यह बिल्ड प्रक्रिया को अच्छा और सरल भी रखता है, क्योंकि कोई आवश्यक बिल्ड स्टेप नहीं है, लेकिन इससे नॉब्स जैसी किसी चीज़ के साथ इंटरैक्ट करना आसान हो सकता है।

मैं यह भी सोच रहा था कि आगामी DocsPage जैसी किसी चीज़ के साथ एकीकृत करने का प्रयास दिलचस्प हो सकता है! मैं शर्त लगाता हूँ कि कुछ काम जो पहले से ही @DesignByOnyx द्वारा किया जा चुका है, यहाँ उपयोगी हो सकता है, ताकि एक स्टैंसिल घटक के "मेटाडेटा" को पढ़ने के लिए एक मार्ग हो ताकि दस्तावेज़ीकरण जानकारी स्वचालित रूप से उत्पन्न हो सके। शायद "v1" चिंता का विषय नहीं है, लेकिन ऐसा कुछ जो "v1.1" के लिए देखना वाकई अच्छा होगा! मुझे वास्तव में उस ऑटो-नॉब्स एडऑन की तरह कुछ बनाने का आपका विचार पसंद है, जो वास्तव में आसान होगा!

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

मैं इस सप्ताह चीजों के साथ कुछ और गड़बड़ करने जा रहा हूं और देखता हूं कि क्या मैं कुछ एक साथ रख सकता हूं।

@alexlafroscia मानकीकृत करना पसंद करेंगे कि विभिन्न ढांचे इस डेटा को कैसे संवाद करते हैं। Jetbrains से कुछ दिलचस्प देखा है (web_types? Cc @elevatebart ) और @atanasster भी प्रदर्शन के लिए JSON फ़ाइलों में प्रोप प्रकारों को कैशिंग करने के लिए इस क्षेत्र में काम कर रहा है। मुझे लगता है कि हमें इन सभी को 6.0 . में एकीकृत करना चाहिए

मैं Jetbrains के कार्य से परिचित नहीं हूँ -- मुझे इसकी जाँच करनी होगी! यदि आपके पास कोई विशिष्ट जानकारी है जो समीक्षा करने में सहायक होगी, तो मुझे अच्छा लगेगा यदि आप इसे मेरे पास भेज सकें!

स्टैंसिल के मामले में, मुझे लगता है कि "सर्वश्रेष्ठ शर्त" यह होगी कि स्टैंसिल बिल्ड प्रक्रिया जेएसओएन दस्तावेज़ों को किसी ऐसे स्थान पर आउटपुट करे जो स्टैंसिल स्टोरीबुक एडन द्वारा प्रसिद्ध हो या कॉन्फ़िगर करने योग्य हो। उस ऑब्जेक्ट में अपेक्षित प्रॉप्स, उत्सर्जित होने वाली घटनाओं और यहां तक ​​कि प्रत्येक घटक के लिए readme फ़ाइल की सामग्री (ऑटो-जेनरेटेड प्रॉप्स डॉक्यूमेंटेशन के बिना) की सभी जानकारी शामिल है। मुझे लगता है कि हम स्टोरीबुक डॉक्सपेज को उस 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 घटक ले सकता है।

प्रॉप्स टेबल सही नहीं है, लेकिन यह बहुत अच्छा है; स्टैंसिल आउटपुट वे सभी प्रॉप्स प्रदान करता है जिनकी तालिका अपेक्षा करती है, और फिर कुछ। घटक के लिए 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 यह अद्भुत, जबरदस्त काम है!

FYI करें, हम 5.3 में प्रोप टेबल स्टफ को सामान्यीकृत करने जा रहे हैं। विशेष रूप से, Vue जैसे फ्रेमवर्क में स्लॉट्स और इवेंट्स की अवधारणा होती है, इसलिए उन्हें अपनी टेबल में विभाजित किया जाना चाहिए। हो सकता है कि आपकी शैलियों का काम उसी तंत्र का उपयोग कर सके। https://github.com/storybookjs/storybook/issues/8123

मैं जिस Jetbrains प्रोजेक्ट की बात कर रहा था, वह यह है (cc @piotrtomiak): https://github.com/JetBrains/web-types

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

@shilman वेब घटक पुस्तकालयों में मेटाडेटा सूचना विनिमय के लिए कुछ मानक लाने के हमारे (जेटब्रेन) प्रयास को web-types मानक बहुत ताज़ा है, लेकिन हमने पहले ही Vue समुदाय और उपयोगकर्ताओं से कुछ सकारात्मक प्रतिक्रियाएँ सुनी हैं। मैं सक्रिय रूप से Vue समुदाय में विनिर्देश का प्रचार कर रहा हूं, लेकिन अन्य समुदाय से कुछ रुचि प्राप्त करना बहुत अच्छा है!

मुझे लगता है कि web-types JSON स्कीमा में कुछ चीजें गायब हो सकती हैं, जो आपके ढांचे के लिए विशिष्ट होंगी और जिन्हें कल्पना में जोड़ा जा सकता है। उदाहरण के लिए, Vue विशिष्ट आइटम vue साथ प्रीफ़िक्स्ड हैं। सीएसएस समर्थन के दस्तावेजीकरण के लिए पूरा खंड भी गायब है, जिसे हम शामिल करने के लिए काम कर सकते हैं। इसलिए, अगर आपको लगता है कि web-types एक मौका देना उचित है तो बेझिझक मुद्दों को दर्ज करें या अनुपलब्ध सुविधाओं के लिए पीआर बनाएं।

आपके घटकों को web-types प्रारूप में दस्तावेज करने का दुष्प्रभाव एक अच्छा कोड पूर्णता होगा जब डेवलपर्स आपकी लाइब्रेरी को अपनी परियोजना में शामिल करेंगे। हम निकट भविष्य में सभी ढांचे के लिए सामान्य web-types सुविधाओं के आधार पर इस तरह के एक सामान्य समर्थन को लागू करने की योजना बना रहे हैं। मुझे पूरा यकीन है कि प्रारूप की एक बड़ी समुदाय स्वीकृति के साथ अन्य आईडीई प्रारूप के समर्थन के साथ पालन करेंगे, जिससे सभी को फायदा होगा :)

@alexlafroscia शानदार काम! स्टैंसिल और स्टोरीबुक एकीकरण (https://github.com/storybookjs/storybook/issues/7644 के साथ) अच्छा दिख रहा है

उस मुद्दे को जोड़ने के लिए धन्यवाद! मैं मूल रूप से एक समान पथ पर चला गया (किसी भी तरह मौजूदा रीडमे फाइलों का उपयोग करने और उन्हें सीधे डॉक्सपेज में खींचने की कोशिश कर रहा था) लेकिन आखिरकार स्टैंसिल डॉक्स जेएसओएन फ़ाइल में डेटा का उपयोग करना आसान पाया, क्योंकि इसमें तालिका शामिल नहीं है प्रॉप्स और सब कुछ (चूंकि वह डेटा 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>

CustomDocsPage का उपयोग किए बिना भी WC को स्टोरीबुक डॉक्स पेज में लोड किया जाता है।
क्या कोई तरीका है जिससे मैं घटक को डीबग कर सकता हूं? मैंने कुछ लॉग जोड़ने की कोशिश की, लेकिन मुझे कोई दिखाई नहीं दे रहा है।

अग्रिम में धन्यवाद।

मैं उस मुद्दे में भी भाग गया - मुझे "घटक" स्तर पर DocsPage घटक को ओवरराइड करना पड़ा

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

क्या जेएसएक्स के साथ काम करने के लिए @storybook/html प्राप्त करना संभव है? स्टैंसिल घटकों के लिए मेरी कहानियों को लिखना बहुत आसान बना देगा। टाइपिंग, स्वतः पूर्ण, और document.createElement या बड़े टेम्पलेट स्ट्रिंग्स का उपयोग करने की आवश्यकता नहीं होगी। प्रतिक्रिया पैकेज का उपयोग करके शीर्ष पर // @jsx साथ टाइपस्क्रिप्ट को चकमा देने की कोशिश की, लेकिन यह काम नहीं किया।

@vidarc जब आपने ऐसा किया तो क्या त्रुटि थी? क्या आपके पास एक कस्टम बेबेल कॉन्फिगर है ?

ज्यादा अनुकूलन नहीं। वेबपैक में कुछ चीजें जोड़ी गईं। पहली टाइपस्क्रिप्ट Cannot find name 'h' बारे में शिकायत करती है। मेरे tsconfig में jsx = प्रतिक्रिया और jsxFactory = h. मैं शीर्ष पर // <strong i="6">@jsx</strong> h प्रगति सेटिंग का उपयोग करके उन चेतावनियों को दूर जाने के लिए प्राप्त कर सकता हूं, लेकिन फिर मुझे एक डोम नोड या स्ट्रिंग वापस नहीं करने के कारण एक स्टोरीबुक त्रुटि मिलती है।

आजमाने जा रहे हैं: https://github.com/developit/vhtml अगला

संपादित करें: जेएसएक्स के साथ बहुत अच्छा काम करता है। यह पता नहीं लगा सकता कि इसे टाइपस्क्रिप्ट के साथ कैसे काम करना है: /

@vidarc यदि h हाइपरस्क्रिप्ट के लिए खड़ा है, तो यह एक कस्टम ऑब्जेक्ट देता है जो न तो स्ट्रिंग है और न ही DOM तत्व है

vhtml जाने का रास्ता लगता है

एफवाईआई, हमारे पास web-components ऐप के लिए आने वाला पीआर है: https://github.com/storybookjs/storybook/pull/8400

क्या यहां कोई इस पर टिप्पणी कर सकता है कि यह इस मुद्दे के साथ कैसे प्रतिच्छेद करता है? @vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

मैंने अभी तक #8400 का परीक्षण नहीं किया है, लेकिन परीक्षण से पहले कि मैं "लाइव" स्टैंसिल के माध्यम से काम करने में सक्षम हूं:

1. एक विंडो में start-storybook -s ./www चलाएँ।
2. दूसरे में stencil build --dev --watch चलाएँ।
3. HMR पर विंडो को पुनः लोड करने के लिए .storybook/config.ts अपडेट करें:

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

क्या किसी के पास वास्तव में एक स्टैंसिल और स्टोरीबुक कार्यान्वयन/कॉन्फ़िगरेशन है जो आईई 11 में काम करता है? मैंने इस धागे में वर्णित प्रत्येक कार्यान्वयन को बिना किसी भाग्य के करने की कोशिश की है।
हमेशा अनचाहे वादे अस्वीकृति में चलाएं TypeError: स्टैंसिल संस्करण 1.2.4 -> 1.7.4 के साथ अमान्य योजना।

@shilman मैं web-components ऐप पर स्टैंसिल घटकों को प्राप्त करने में सक्षम था लेकिन मुझे ऐसा लगता है कि यह उन्हें उसी तरह पढ़ रहा है जैसे हर कोई html एक के साथ कर रहा है, और एचएमआर ' स्टैंसिल घटकों के अपडेट पर स्वयं प्रतिक्रिया न करें।

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

मैं स्टैंसिल घटकों को "लाइव" प्राप्त करने के तरीकों की कोशिश करना जारी रखूंगा, लेकिन जिस वास्तुशिल्प समस्या में मैं चल रहा हूं, वह यह है कि, जब तक कि मुझसे गलती न हो, _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

यह जानने के बाद, मेरा अगला परीक्षण रिएक्ट बाइंडिंग (https://github.com/ionic-team/stencil-ds-plugins) के साथ बिल्ड स्टेप को बनाए रखना है, लेकिन इसके बजाय रिएक्ट (HTML के बजाय) कहानियों का उपयोग करने के लिए HMR लॉजिक को बदलें। .

उम्मीद है कि यह स्टोरीबुक यूएक्स को रिएक्ट वन से मेल खाने देगा, स्टैंसिल को केवल घटक कार्यान्वयन के लिए छोड़ देगा।

मुझे नहीं लगता कि देव मोड में समानांतर में चलने के लिए stencil build आवश्यकता के लिए यह दुनिया का अंत है:

• हम उपयोगकर्ता को निर्देश दे सकते हैं कि इसे उनके package.json में समवर्ती रूप से कैसे चलाया जाए
• एक स्टैंसिल प्रीसेट स्टार्टअप पर इस प्रक्रिया को जन्म दे सकता है, और फिर इसे शटडाउन पर मार सकता है यदि हम इसे उपयोगकर्ता से छिपाना चाहते हैं

कम चलने वाले भागों के साथ एक समाधान बेहतर है, लेकिन चलो यहाँ महान का दुश्मन नहीं है। AFAIK अभी के लिए अभी भी अपने स्वयं के स्टैंसिल समर्थन को रोल कर रहा है, और यहां बहुत से लोगों के लिए चीजों को सरल बनाने में मदद करने का एक अच्छा अवसर है ...

समवर्ती रूप से उपयोग करना वर्तमान में मेरे लिए काम कर रहा है।

निश्चित रूप से वृद्धिशील कदम हैं।

मुख्य बात जो मुझे एक उपयोगकर्ता के रूप में मिली वह थी "क्यों" स्टैंसिल ने समान काम नहीं किया
मेरी प्रतिक्रिया कहानियों के रूप में, जिसे स्टैंसिल-विशिष्ट के बिना हल नहीं किया जा सकता है
परिवर्तन।

गुरु, 31 अक्टूबर, 2019, शाम 5:02 बजे माइकल शिलमैन नोटिफिकेशन @github.com
लिखा था:

मुझे नहीं लगता कि यह दुनिया का अंत है जिसके लिए स्टैंसिल निर्माण की आवश्यकता है
देव मोड में समानांतर में चल रहा है:

• हम उपयोगकर्ता को निर्देश दे सकते हैं कि इसे समवर्ती रूप से कैसे चलाया जाए
  https://www.npmjs.com/package/concurrently उनके पैकेज में।json
• एक स्टैंसिल प्रीसेट स्टार्टअप पर इस प्रक्रिया को शुरू कर सकता है, और फिर मार सकता है
  यह शटडाउन पर है अगर हम इसे उपयोगकर्ता से छिपाना चाहते हैं

कम चलने वाले भागों के साथ एक समाधान बेहतर है, लेकिन चलो अच्छा नहीं होने दें
यहाँ महान के दुश्मन बनो। AFAIK अभी के लिए हर कोई अभी भी अपना रोल कर रहा है
अभी खुद का स्टैंसिल समर्थन, और मदद करने का एक अच्छा अवसर है
यहां बहुत से लोगों के लिए चीजों को सरल बनाएं...

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWWK3TUL52HS4DFVREXG43VMVBW63#PZGOZ54T86T
या सदस्यता समाप्त करें
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

इसका एक अन्य तरीका यह होगा कि UI (स्टोरीबुक) को पूर्वावलोकन (स्टैंसिल) से स्पष्ट रूप से अलग किया जाए। स्टोरीबुक स्टैंडअलोन के साथ, यह पहले से ही संभव होना चाहिए।
इस तरह आप स्टोरीबुक को प्रीबिल्ड भी कर सकते हैं जिसका मतलब होगा कि तेजी से बूटअप समय।

और फिर आप विकास के दौरान केवल स्टैंसिल बिल्ड का उपयोग करेंगे (लेकिन अभी भी स्टोरीबुक यूआई का उपयोग कर रहे हैं)। इसका मतलब यह होगा कि आपको स्टोरीबुक वेबपैक सेटअप के साथ इंटरॉप्ट करने के बारे में सोचने की आवश्यकता के बिना स्टैंसिल देव सर्वर द्वारा समर्थित सभी उपहार मिलेंगे।

हम पहले से ही उपयोग कर इस जांच की es-dev-server के लिए पूर्वावलोकन सत्ता में web-components । हमारे पास एक POC है... लेकिन अभी भी कुछ खुरदुरे किनारे हैं।
हालाँकि, मुझे लगता है कि ठीक उसी दृष्टिकोण को स्टैंसिल के लिए भी काम करना चाहिए।

अगर किसी के पास कोई प्रश्न है या स्टैंसिल के लिए इसकी जांच करने या es-dev-server का उपयोग करके संदर्भ परियोजना बनाने में मदद करने में दिलचस्पी होगी तो मुझे यकीन है कि @LarsDenBakker कुछ और विवरण साझा करने में प्रसन्न है

पुनश्च: यह सब केवल स्टोरीबुक की वजह से संभव है क्योंकि यूआई को पूर्वावलोकन से अलग रखने के लिए चैनल संदेशों के साथ यह भयानक आईफ्रेम सेटअप है

सभी को प्रणाम

कुछ समय के बाद और इसके चारों ओर बहुत कुछ करने के बाद एक स्टैंसिल एकीकृत स्टोरीबुक कार्यान्वयन के लिए मेरा रेपो है https://github.com/Edd-Stricland/stencilbook।

आगे चर्चा करने में खुशी हुई उम्मीद है कि ज्यादातर चीजें रीडमी से और स्क्रिप्ट के लिए package.json को देखने से स्पष्ट हैं।

यह वेनिला स्टैंसिल स्टार्टर घटक और वेनिला स्टोरीबुक HTML कार्यान्वयन का उपयोग करके बनाया गया है।

कृपया देखें और समीक्षा करें...

स्टैंसिलबुक - एक स्टैंसिल स्टोरीबुक स्टार्टर

यह स्टैंसिल और स्टोरीबुक का उपयोग करके एक स्टैंडअलोन वेब घटक बनाने के लिए एक प्रारंभिक परियोजना है।

स्टैंसिल

वेब घटकों का उपयोग करके तेज़ वेब ऐप्स बनाने के लिए स्टैंसिल एक कंपाइलर है।

स्टैंसिल रन-टाइम टूल के बजाय कंपाइल-टाइम में सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क की सर्वोत्तम अवधारणाओं को जोड़ती है। स्टैंसिल टाइपस्क्रिप्ट, JSX, एक छोटी वर्चुअल DOM लेयर, कुशल वन-वे डेटा बाइंडिंग, एक एसिंक्रोनस रेंडरिंग पाइपलाइन (रिएक्ट फाइबर के समान), और बॉक्स से बाहर आलसी-लोडिंग लेता है, और 100% मानक-आधारित वेब घटक उत्पन्न करता है जो चलता है कस्टम एलिमेंट्स 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

स्टोरीबुक और स्टैंसिल बिल्ड को वॉच एंड सर्व के साथ चलाएं, जो पिछले किसी भी संस्करण को बनाया गया है और स्थानीय रूप से काम करेगा:

npm run storybook:build:all

स्थानीय रूप से स्टोरीबुक परोसें:

npm run storybook:serve

मॉड्यूल रीसेट करें; नोड मॉड्यूल को हटाता और पुनर्स्थापित करता है:

npm run reset:modules

घटकों के लिए इकाई परीक्षण चलाने के लिए, चलाएँ:

npm test

परीक्षण

घड़ी मोड में परीक्षण चलाने के लिए:

npm run test.watch

नए घटक उत्पन्न करें

नए स्टैंसिल घटकों को स्वचालित रूप से उत्पन्न करने के लिए:

npm run generate

@ एड-स्ट्रिकलैंड यह एक शानदार शुरुआत है! अगर मैं सुझाव दे सकता हूं कि आप आसान बूटअप के लिए एक स्टार्ट स्क्रिप्ट जोड़ सकते हैं, तो मैंने "start": "npm-run-all -p stencil:start storybook" और यह बहुत अच्छी तरह से काम करता है, सिवाय इसके कि कोई हॉट रीलोडिंग नहीं है क्योंकि स्टैंसिल के निर्माण के समय स्टोरीबुक को पहचान नहीं होती है।

...वह तब तक है जब तक मुझे कुछ याद नहीं आ रहा है?

@shilman अल्फा में मास्टर में पहले से ही @ स्टोरीबुक/वेब-घटक पैकेज प्रतीत होता है, लेकिन मुझे स्टैंसिल को 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 द्वारा प्रदान की गई सामग्री के ऊपर और उसके बाद उचित स्टैंसिल समर्थन जोड़ने के लिए क्या आवश्यक है। मुझे यकीन है कि इस धागे पर कोई जानता है!

@ एड-स्ट्रिकलैंड यह एक शानदार शुरुआत है! अगर मैं सुझाव दे सकता हूं कि आप आसान बूटअप के लिए एक स्टार्ट स्क्रिप्ट जोड़ सकते हैं, तो मैंने "start": "npm-run-all -p stencil:start storybook" और यह बहुत अच्छी तरह से काम करता है, सिवाय इसके कि कोई हॉट रीलोडिंग नहीं है क्योंकि स्टैंसिल के निर्माण के समय स्टोरीबुक को पहचान नहीं होती है।

...वह तब तक है जब तक मुझे कुछ याद नहीं आ रहा है?

हम्म माफी पिछले सप्ताह के अंत में व्यस्त और सम्मेलनों में थी।

मैं आपके पास मौजूद समस्या के बारे में उलझन में हूं, क्या आप इसे इस धागे के बजाय रेपो मुद्दों के माध्यम से अधिक जानकारी के लिए उठा सकते हैं।

हालाँकि यदि आप एक इंस्टाल करते हैं, और फिर स्टोरीबुक कमांड चलाते हैं तो यह वॉच सर्वर को उसी के अनुसार लॉन्च करेगा। जब भी आप किसी घटक को बदलते या जोड़ते या अपडेट करते हैं, तो स्टैंसिल ऑटो एचएमआर होगा।

@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 द्वारा प्रदान की गई सामग्री के ऊपर और उसके बाद उचित स्टैंसिल समर्थन जोड़ने के लिए क्या आवश्यक है। मुझे यकीन है कि इस धागे पर कोई जानता है!

निर्भर करता है, वेब घटक वेनिला उदाहरणों के साथ काम करता है मैंने उनके बीच के अंतरों की तुलना नहीं की है, हालांकि स्टैंसिल वेब घटकों को आउटपुट करता है लेकिन डिफ़ॉल्ट रूप से डब्ल्यू/सी होने के बजाय डब्ल्यू/सी के लिए एक अनुपालन के रूप में चलता है।

तो यकीनन दोनों की जरूरत है। एक देशी जेएस डब्ल्यू/सी और एक स्टैंसिल कंपाइलर के लिए यदि आप स्टोरीबुक के पक्ष में स्टैंसिल आधारित डब्ल्यू/सी को तेजी से प्रोटोटाइप करना चाहते हैं जैसा कि आप एक प्रतिक्रिया या कोणीय घटक कह सकते हैं।

मेरे पास इस बात पर चर्चा करने के लिए @daKmoR के साथ पकड़ने का समय नहीं है कि क्या यह दोहराव है या उनके काम को देखते हुए बेमानी है, हालांकि

मैं हाल ही में बुलमिल पर नक्सट-स्टैंसिल के साथ स्टैंसिल एकीकरण और उनके नक्स्ट उदाहरणों पर उनके काम के कारण ठोकर खाई।

मुझे यह भी पता चला कि एक अच्छा स्टोरीबुक सपोर्ट है। शायद यह भी देखने लायक है। मैं आंतरिक नहीं जानता/कैसे वे इस धागे की वर्तमान स्थिति से भिन्न हैं, लेकिन जब आप स्टोरीबुक चलाते हैं तो यह बुलमिल के भीतर बॉक्स से बाहर काम करता है।

@storybook/addon-actions अभी तक काम नहीं कर रहा है या मैं अभी तक यह काम करने में सक्षम नहीं था।

हो सकता है कि हम इस सूत्र में @Gomah प्राप्त कर सकें और स्टैंसिल समर्थन को स्टोरीबुक के लिए बेहतर बनाने पर सहयोग के लिए उनके विचारों को सुन सकें?

हाल ही में मैं बुलमिल पर नक्सट-स्टैंसिल के साथ स्टैंसिल एकीकरण पर उनके काम और उनके नक्स्ट उदाहरणों के कारण ठोकर खाई।

मुझे यह भी पता चला कि एक अच्छा स्टोरीबुक सपोर्ट है। शायद यह भी देखने लायक है। मैं आंतरिक नहीं जानता/कैसे वे इस धागे की वर्तमान स्थिति से भिन्न हैं, लेकिन जब आप स्टोरीबुक चलाते हैं तो यह बुलमिल के भीतर बॉक्स से बाहर काम करता है।

@storybook/addon-actions अभी तक काम नहीं कर रहा है या मैं अभी तक यह काम करने में सक्षम नहीं था।
निश्चित रूप से उपरोक्त रेपो के भीतर ऐड-ऑन-एक्शन एक मानक स्टोरीबुक एडऑन के रूप में काम करेगा

E2A: स्टैंसिल बुक @Gomah वैरिएंट नहीं है।

उपरोक्त मूल स्टैंसिल/एसबी एकीकरण के साथ वस्तु बस एक आधार बनाने के लिए थी जिसने स्टोरीबुक को स्टोरीबुक और स्टैंसिल को स्टैंसिल की अनुमति दी और फिर उन दोनों को एक साथ एकीकृत करने की अनुमति दी ताकि आप स्टैंसिल के माध्यम से वेब घटकों को स्टोरीबुक फ्रेम में डाल सकें।

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

आदर्श रूप से यह सब काम करेगा इसलिए डब्ल्यू/सी वेरिएंट का कोई विखंडन नहीं होगा हालांकि मूल डब्ल्यू/सी कार्यान्वयन के विपरीत स्टैंसिल वास्तव में एक ढांचा नहीं है। संकलक। तो यह अभी भी लायक हो सकता है कि आप JSX घटकों को लिखने की अनुमति दें, जो बाद में W/C के रूप में आउटपुट होगा।

या यह वास्तव में सरल हो सकता है।

एक बार जब हम स्पाइक पूरा कर लेंगे तो आपको बताएंगे।

ज्यादा अनुकूलन नहीं। वेबपैक में कुछ चीजें जोड़ी गईं। पहली टाइपस्क्रिप्ट Cannot find name 'h' बारे में शिकायत करती है। मेरे tsconfig में jsx = प्रतिक्रिया और jsxFactory = h. मैं शीर्ष पर // <strong i="7">@jsx</strong> h प्रगति सेटिंग का उपयोग करके उन चेतावनियों को दूर जाने के लिए प्राप्त कर सकता हूं, लेकिन फिर मुझे एक डोम नोड या स्ट्रिंग वापस नहीं करने के कारण एक स्टोरीबुक त्रुटि मिलती है।

आजमाने जा रहे हैं: https://github.com/developit/vhtml अगला

संपादित करें: जेएसएक्स के साथ बहुत अच्छा काम करता है। यह पता नहीं लगा सकता कि इसे टाइपस्क्रिप्ट के साथ कैसे काम करना है: /

हाय @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 प्रगति सेटिंग का उपयोग करके उन चेतावनियों को दूर जाने के लिए प्राप्त कर सकता हूं, लेकिन फिर मुझे एक डोम नोड या स्ट्रिंग वापस नहीं करने के कारण एक स्टोरीबुक त्रुटि मिलती है।
आजमाने जा रहे हैं: https://github.com/developit/vhtml अगला
संपादित करें: जेएसएक्स के साथ बहुत अच्छा काम करता है। यह पता नहीं लगा सकता कि इसे टाइपस्क्रिप्ट के साथ कैसे काम करना है: /

हाय @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

इसलिए मैंने सोचा कि स्टैंसिल को किसी कारण से शामिल नहीं किया गया था। लेकिन अगर यह बिना कुछ जोड़े अच्छी तरह से काम करता है, तो यह मेरे साथ बिल्कुल ठीक है।

बीटीडब्ल्यू, क्या यह समस्या अब बंद हो सकती है, क्योंकि इसे पूर्वोक्त वेब-घटकों द्वारा हल किया गया है?

मैं परीक्षण करने जा रहा हूं कि क्या यह स्टैंसिल के साथ काम करता है और वापस रिपोर्ट करेगा तो हम बंद कर सकते हैं। बंद करने का कोई मतलब नहीं है अगर यह वास्तव में स्टैंसिल के साथ काम नहीं करता है ...

...

हाय @vidarc। क्या आप storiesOf() सिंटैक्स के साथ यह काम करने में सक्षम थे? यदि ऐसा है, तो मैं वास्तव में यह देखने के लिए उत्सुक हूं कि आपने यह कैसे किया। क्या आपके पास साझा करने के लिए कोड उदाहरण या कोड आधार है?
जबकि हमारे पास स्टोरीबुक और स्टैंसिल एकीकृत हैं और हमारी परियोजना में अच्छी तरह से काम कर रहे हैं, हमारे पास सबसे बड़ा दर्द बिंदु ऑब्जेक्ट प्रॉप्स आदि के घटकों के लिए document.createElement() साथ कहानियां बनाने का सहारा लेना है। यदि vhtml हल कर सकते हैं यह, यह कमाल होगा!

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

धन्यवाद। यह नहीं पता था कि सीएसएफ अब कहानियों को लिखने का अनुशंसित तरीका है। क्या आप जेएसएक्स एडन को वीएचटीएमएल बीटीडब्ल्यू के साथ काम करने में कामयाब रहे हैं, या यह संभव नहीं है?

...

हाय @vidarc। क्या आप storiesOf() सिंटैक्स के साथ यह काम करने में सक्षम थे? यदि ऐसा है, तो मैं वास्तव में यह देखने के लिए उत्सुक हूं कि आपने यह कैसे किया। क्या आपके पास साझा करने के लिए कोड उदाहरण या कोड आधार है?
जबकि हमारे पास स्टोरीबुक और स्टैंसिल एकीकृत हैं और हमारी परियोजना में अच्छी तरह से काम कर रहे हैं, हमारे पास सबसे बड़ा दर्द बिंदु ऑब्जेक्ट प्रॉप्स आदि के घटकों के लिए document.createElement() साथ कहानियां बनाने का सहारा लेना है। यदि vhtml हल कर सकते हैं यह, यह कमाल होगा!

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

धन्यवाद। यह नहीं पता था कि सीएसएफ अब कहानियों को लिखने का अनुशंसित तरीका है। क्या आप जेएसएक्स एडन को वीएचटीएमएल बीटीडब्ल्यू के साथ काम करने में कामयाब रहे हैं, या यह संभव नहीं है?

तो JSX को सीधे स्टैंसिल कंपाइलर के माध्यम से शैडो डोम में पार्स किया जाता है। इसलिए जब तक आप स्टोरीबुक में अनुपालनकर्ता के एकीकरण का उपयोग कर रहे हैं, तब तक आप अपना मानक स्टैंसिल घटक लिखते हैं और फिर इसे सीएसएफ कहानी में शामिल करते हैं और फिर प्रोप को पॉप्युलेट करने के लिए अपने डेटा फ़ैक्टरी में आयात करते हैं।

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

आप स्टोरीऑफ़ सिंटैक्स का उपयोग कर सकते हैं लेकिन फिर आप क्लासिक दस्तावेज़ में बंद हो जाते हैं। एलिमेंट पैटर्न बनाएं।
उदाहरण के लिए हमारे आइकन के लिए सिंटेक्स की यह पुरानी कहानी

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 प्रगति सेटिंग का उपयोग करके उन चेतावनियों को दूर जाने के लिए प्राप्त कर सकता हूं, लेकिन फिर मुझे एक डोम नोड या स्ट्रिंग वापस नहीं करने के कारण एक स्टोरीबुक त्रुटि मिलती है।
आजमाने जा रहे हैं: https://github.com/developit/vhtml अगला
संपादित करें: जेएसएक्स के साथ बहुत अच्छा काम करता है। यह पता नहीं लगा सकता कि इसे टाइपस्क्रिप्ट के साथ कैसे काम करना है: /

हाय @vidarc। क्या आप storiesOf() सिंटैक्स के साथ यह काम करने में सक्षम थे? यदि ऐसा है, तो मैं वास्तव में यह देखने के लिए उत्सुक हूं कि आपने यह कैसे किया। क्या आपके पास साझा करने के लिए कोड उदाहरण या कोड आधार है?

जबकि हमारे पास स्टोरीबुक और स्टैंसिल एकीकृत हैं और हमारी परियोजना में अच्छी तरह से काम कर रहे हैं, हमारे पास सबसे बड़ा दर्द बिंदु ऑब्जेक्ट प्रॉप्स आदि के घटकों के लिए document.createElement() साथ कहानियां बनाने का सहारा लेना है। यदि vhtml हल कर सकते हैं यह, यह बहुत बढ़िया होगा!

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

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

तो इसके बजाय:

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 हूं।

संपादित करें: उपरोक्त में जोड़ने के लिए, मैंने सीएसएफ दस्तावेज को भी देखा है, और जेएसएक्स सिंटैक्स के साथ h आयात करने का प्रयास किया है, लेकिन त्रुटि फेंकता है "कहानी से एक HTML स्निपेट या डोम नोड की अपेक्षा:" सरल कहानी " "घटक" का।":

export const simpleStory = () => <namespace-icon class="namespace-action-plan" size="medium"></name-spaceicon>;

यदि यह उन कहानियों को लिखने के बारे में है जिन्हें वेब घटकों के लिए गुण सेट करने की आवश्यकता है तो आप @storybook/web-components पर एक नज़र डाल सकते हैं। यह गुणों के साथ html को घोषित रूप से बनाने के लिए

स्टोरीबुक और स्टैंसिल को साथ-साथ चलाते समय यह काम करना चाहिए :)

स्टैंसिल को छोड़कर लिट html का उपयोग नहीं करता है। यह एक वीयू चीज है ...

@shilman अल्फा में मास्टर में पहले से ही @ स्टोरीबुक/वेब-घटक पैकेज प्रतीत होता है, लेकिन मुझे स्टैंसिल को README.md में संदर्भित नहीं किया गया है: https://github.com/storybookjs/storybook/tree/next/ ऐप/वेब-घटक

हम वेब-घटक पैकेज को कैसे डाउनलोड और परीक्षण करते हैं, यहां लिंक किए गए रेपो में कोई क्लोन क्रिया आदि नहीं है?

@ एड-स्ट्रिकलैंड जो कि मुख्य स्टोरीबुक मोनोरेपो में सिर्फ एक निर्देशिका है

स्टैंसिल को छोड़कर लिट html का उपयोग नहीं करता है। यह एक वीयू चीज है ...

यह एक lit thing

हालांकि, यह वेब घटकों की सुंदरता है - इससे कोई फर्क नहीं पड़ता कि स्टैंसिल हुड के नीचे क्या उपयोग करता है। आप अपनी कहानियों को परिभाषित करने के लिए 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 में जाते हैं तो आप लिट-घटक का चयन कर सकते हैं और आप निम्नलिखित विवरण पढ़ सकते हैं

• संपत्ति शीर्षक जैसे कंसोल.लॉग($0.शीर्षक) // कुछ शीर्षक
• विशेषता शक्ति जैसे कंसोल.लॉग($0.getAttribute('power')) // असीमित

स्टैंसिल घटक के लिए यह "वही" होगा

• संपत्ति डेटा जैसे कंसोल.लॉग($0.डेटा) // [{नाम: 'जॉन', उम्र: 21}, {नाम: 'मारिया', उम्र: 28}];
• विशेषता सुपर-मोड जैसे कंसोल.लॉग($0.hasAttribute('super-mode')) // सच

लिट-एचटीएमएल केवल डोम को प्रस्तुत करता है ... डोम तत्व कहां/कैसे पंजीकृत हैं लिट-एचटीएमएल को पता नहीं है/परवाह नहीं है - इसलिए प्रत्येक घटक के लिए कौन सी तकनीक का उपयोग किया जाता है वह पूरी तरह से अलग हो सकता है ... उदाहरण के लिए आपके पास घटक हो सकता है जो लिट-एलिमेंट, स्टैंसिल, वेनिला HTMLElement हैं या यह एक पूर्ण प्रतिक्रिया/व्यू/कोणीय अनुप्रयोग के लिए एक वेब घटक आवरण भी हो सकता है...

स्टैंसिल एक कंपाइलर हो सकता है लेकिन एक बार इसे वेब कंपोनेंट में संकलित करने के बाद इसे सिर्फ डोम के रूप में इस्तेमाल किया जा सकता है

पुनश्च: @storybook/web-components lit-html का उपयोग करता है

स्टैंसिल टीम कंपाइलर को फिर से सक्रिय कर रही है जो मुझे लगता है कि स्टैंसिल/स्टोरीबुक एकीकरण को बदल देगा।

अगर कोई रिएक्ट चेकआउट https://github.com/the-road-to-learn-react/use-custom-element के माध्यम से स्टैंसिल और स्टोरीबुक का उपयोग करने जा रहा है जो आपको सरणियों और वस्तुओं को पारित करने की अनुमति देता है। मैं बाद में खुद कोशिश करूंगा लेकिन इससे कुछ लोगों को मदद मिल सकती है।

रुचि रखने वालों के लिए, मैंने स्टोरीबुक/रिएक्ट और स्टैंसिल के संयोजन के लिए एक स्टार्टर प्रकाशित किया है: https://github.com/bbellmyers/stencil-storybook-starter। ध्यान दें कि इस कॉन्फ़िगरेशन के साथ, घटकों में परिवर्तन के लिए ब्राउज़र में हार्ड रीफ़्रेश की आवश्यकता होती है, लेकिन कहानियों में परिवर्तन नहीं होते हैं।

ऐसा लगता है कि स्टोरीबुक वेब घटकों के लिए स्टोरीबुक विकसित कर रही है। मैंने इसे स्टैंसिल के साथ आज़माया और यह बहुत अच्छा काम कर रहा है।

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

@ sem4phor क्या आप कॉन्फ़िगरेशन साझा कर सकते हैं?

मुझे वेब-घटकों के लिए एक नई स्टोरीबुक इंस्टॉल पर लिट-एचटीएमएल के बारे में त्रुटियां मिल रही हैं

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 आपको

@ एड-स्ट्रिकलैंड हमने वेब-घटकों के लिए स्टोरीबुक को जोड़ा और पॉलिमर के लिए 6.0.0 स्टोरीबुक में अब पदावनत/अपडेट नहीं किया जाएगा।

क्या स्टैंसिल घटकों के लिए वेब-घटकों के काम करने के लिए स्टोरीबुक बनाने के लिए कुछ करने की आवश्यकता है?

वेब घटक स्टोरीबुक स्टैंसिल वेब घटक घटकों को प्रस्तुत कर सकती है, लेकिन स्टैंसिल ब्राउज़र में चलने में सक्षम नहीं है और इसे संकलित करने की आवश्यकता है। इसलिए इसे अभी भी कुछ विशेष हैंडलिंग की आवश्यकता है, जब तक कि आप स्टोरीबुक चलाने से पहले स्टैंसिल घटकों को संकलित न करें।

@LarsDenBakker उपरोक्त काम करने के लिए

हां, हालांकि स्टैंसिल स्वयं रोलअप का उपयोग करता है। यदि संकलन चरण को एक अलग प्रोजेक्ट के रूप में उपयोग किया जा सकता है, तो आप इसे शायद वेबपैक प्लगइन में बना सकते हैं। मैं उसके लिए आंतरिक के बारे में पर्याप्त नहीं जानता।

स्टैंसिल वेबपैक का उपयोग नहीं करता है। यह इसके बजाय रोलअप का उपयोग करता है।

मेरे द्वारा सेट किए गए रेपो का उपयोग करना संभव है ताकि दोनों तदनुसार काम कर सकें और स्टैंसिल में एचएमआर समकक्ष को -वॉच कॉल के साथ सक्षम कर सकें। ताकि स्टैंसिल अपडेट होने पर स्टैंसिल फिर से लोड हो जाए और स्टोरीबुक अपडेट होने पर फिर से लोड हो जाए।

इसलिए हर बार निर्माण करने की आवश्यकता नहीं है क्योंकि यह इसे कवर करेगा।

जबकि मेरे पास हाल ही में नवीनतम एसबी या स्टैंसिल के साथ रेपो को अपडेट करने का समय नहीं है, यह प्रक्रिया अभी भी काम करेगी और फिर आप रेपो को नवीनतम संस्करणों के साथ अपग्रेड कर सकते हैं।

धन्यवाद

@ एड-स्ट्रिकलैंड हमने वेब-घटकों के लिए स्टोरीबुक को जोड़ा और पॉलिमर के लिए 6.0.0 स्टोरीबुक में अब पदावनत/अपडेट नहीं किया जाएगा।

क्या स्टैंसिल घटकों के लिए वेब-घटकों के काम करने के लिए स्टोरीबुक बनाने के लिए कुछ करने की आवश्यकता है?

हां यह अभी भी लाइव रीलोड/एचएमआर के लिए वास्तव में जिम्मेदार नहीं है क्योंकि वेबपैक उपयोग और रोल अप उपयोग के बीच के अंतरों के ऊपर विस्तृत रूप से यदि आप एसबी डब्ल्यूसी संस्करण का उपयोग करना चाहते हैं तो इसे प्रस्तुत करने के लिए स्टैंसिल के पूर्ण निर्माण की आवश्यकता है तब एचएमआर की सारी अच्छाई स्टैंसिल में खो जाती है।

यह संस्करण वर्तमान में HTML संस्करण पर आधारित है, न कि बहुलक संस्करण पर, इसलिए इसका उस संस्करण को समाप्त करने के दीर्घकालिक लक्ष्य पर प्रभाव नहीं होना चाहिए।

@LarsDenBakker उपरोक्त काम करने के लिए

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

हां, हालांकि स्टैंसिल स्वयं रोलअप का उपयोग करता है। यदि संकलन चरण को एक अलग प्रोजेक्ट के रूप में उपयोग किया जा सकता है, तो आप इसे शायद वेबपैक प्लगइन में बना सकते हैं। मैं उसके लिए आंतरिक के बारे में पर्याप्त नहीं जानता।

पहले से ही एक स्टैंसिल WP प्लगइन है, हालांकि यह समर्थित या समुदाय द्वारा स्वीकृत निर्भरता नहीं है।

cc @jthoms1 @adamdbradley

@dmartinjs आपको

@ sem4phor क्या आप कॉन्फ़िगरेशन साझा कर सकते हैं?

मुझे वेब-घटकों के लिए एक नई स्टोरीबुक इंस्टॉल पर लिट-एचटीएमएल के बारे में त्रुटियां मिल रही हैं

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

इस पर कोई प्रतिक्रिया? मुझे इस निर्भरता को स्वयं स्थापित करना है। यदि इसका उपयोग @ स्टोरीबुक/वेब-घटकों द्वारा किया जाता है, तो इसे स्वचालित रूप से एक निर्भरता के रूप में स्थापित किया जाना चाहिए ...?

@LeeBurton अगर यह एक सहकर्मी निर्भरता नहीं है? (सुनिश्चित नहीं है कि यह है, अगर यह नहीं है तो शायद यह होना चाहिए) cc @daKmoR

@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 मैंने कोशिश की और जब यह संकलित होता है, तो किसी भी स्रोत फ़ाइल में किए गए किसी भी परिवर्तन को मैन्युअल हार्ड रीलोड के बिना ब्राउज़र में लोड नहीं किया जाता है।

मैंने इसे npm-run-all पैकेज के साथ समानांतर में start-storybook चलाते समय एक npm रन स्क्रिप्ट में सक्षम घड़ी के साथ स्थानीय रूप से स्टैंसिल के निर्माण को चलाकर काम करने के लिए प्राप्त किया।

मैंने अपने 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-

मैंने @ एड-स्ट्रिकलैंड की अपनी कॉपी को 6.0.0-बीटा में यथोचित रूप से सफलतापूर्वक स्थानांतरित कर दिया है, हालांकि मुझे लगता है कि जब यह परिवर्तन होता है तो यह हमेशा सब कुछ पुनर्निर्माण नहीं करता है (उदाहरण के लिए readme.md)।

क्या यह सार्वजनिक रूप से @paulfelton उपलब्ध है?

यह अब है, स्वयं की सहायता करें :-)

मैंने एड की परियोजना को फोर्क किया है । @ एड-स्ट्रिकलैंड, क्या मैं पीआर में पॉप करूंगा? इसे अच्छी समीक्षा की आवश्यकता होगी, मैं इसमें कोई विशेषज्ञ नहीं हूं।

मैंने संकुल को टक्कर दी है, कॉन्फ़िगरेशन को नए प्रारूप में दोबारा प्रतिक्रिया दी है। स्टैंसिल रीडमी को आयात करने के लिए कहानी प्राप्त करने के लिए मुझे एक टाइपिंग जोड़ना था और इसे tsconfig में संदर्भित करना था, और 'नोट्स' को 'डॉक्स' में अनुवाद करने के लिए एक कॉन्फ़िगरेशन जोड़ना था।

इच्छा सूची:

• ठीक है, मैं देखना चाहता हूं कि एकीकरण स्टैंसिल घटक से एक मूल कहानी उत्पन्न करता है। आदर्श रूप से, एमडीएक्स और सीएसएफ दोनों।
• मैं स्टोरीबुक एचटीएमएल से स्टोरीबुक वेबकंपोनेंट स्वाद में जाना चाहता हूं, हालांकि मुझे यकीन नहीं है कि ऐसा करने के फायदे हैं या नहीं। यह अधिक स्वाभाविक लगता है।
• मैं चाहता हूं कि स्टैंसिल दस्तावेज़ नए ऐडऑन-डॉक्स में अधिक स्वाभाविक रूप से आयात करें, न कि नोटों के माध्यम से।
• यह सब एक पूर्व निर्धारित के माध्यम से :-)

@paulfelton क्या आपको मुझसे कुछ चाहिए?

@ndelangen मुझे यकीन नहीं है। जैसा कि आप इकट्ठा हो सकते हैं, मैं स्टैंसिल और स्टोरीबुक दोनों के लिए काफी नया हूं, इसलिए विभिन्न मुद्दों पर चर्चा, Google, आदि से मैं जो कुछ भी खींच सकता हूं उसे एक साथ जोड़ दिया।

मुझे स्टार्टर रेपो में भी जाना था, भारी प्रेरित लेकिन इस मुद्दे में सभी महान प्रयास (धन्यवाद!)

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

@storybook/web-components उपयोग करता है, आवश्यक ऐडऑन (जैसे नियंत्रण, क्रिया) के साथ काम करता है। इस स्तर पर सब कुछ के नवीनतम संस्करण ..

स्टैंसिल देव सर्वर और स्टोरीबुक पूर्वावलोकन फ्रेम के बीच कुछ अतिरिक्त एकीकरण (इसलिए स्टैंसिल त्रुटि ओवरले स्टोरीबुक में इनलाइन दिखाता है - बेहतर डीएक्स!) (डीट्स के लिए ./storybook/preview-body.html और ./src/index.html की जांच करें)।

~स्टैंसिल डिसर्वर को start-storybook में मैश किया ताकि आप केवल एक कमांड चला सकें और यह पर्दे के पीछे स्टैंसिल को स्पिन कर सके।~
संपादित करें: इसे concurrently + wait-on साथ सरल बनाएं - स्टैंसिल के स्पिन होने की प्रतीक्षा करें, फिर स्टोरीबुक के साथ आगे बढ़ें

कोड परिवर्तन (स्टैंसिल घटकों या स्टोरीबुक कहानियों के लिए) पूर्वावलोकन फ़्रेम को पुनः लोड करेगा (संपूर्ण स्टोरीबुक ऐप नहीं)। यह उचित एचएमआर नहीं है लेकिन इसके साथ देव के लिए काफी अच्छा है!

अच्छा। लिंक काम नहीं करता है।

ओह, रेपो अब सार्वजनिक हो गया है ^

मैंने यहां स्टैंसिल v2 और @ स्टोरीबुक/वेब-घटकों v6 का उपयोग करके बॉयलरप्लेट रेपो को एक साथ रखा है: https://github.com/bjankord/stencil-storybook-boilerplate

स्टोरीबुक/स्टैंसिल डिस्कॉर्ड चैनल से

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

मुझे एक उचित एचएमआर समाधान मिला;) जल्द ही आ रहा है!

मुझे एक उचित एचएमआर समाधान मिला;) जल्द ही आ रहा है!

यह रहा!
स्टैंसिल 2+ और स्टोरीबुक 6+ (पुराना स्टैंसिल संस्करण भी काम करना चाहिए;))
https://github.com/dutscher/stencil-storybook
मज़े करो और चीयर्स

संपादित करें: gh-पृष्ठों पर स्टोरीबुक के साथ https://dutscher.github.io/stencil-storybook/index.html

पिछले हफ्ते हमारे प्रोजेक्ट में इस ^^ को स्वैप किया और बिट्स को बाहर निकालने के बाद जो हमारे लिए प्रासंगिक नहीं है (बूटस्ट्रैप, एससीएसएस, क्रोमैटिक इत्यादि) और कुछ छोटी चीजों को ठीक करना (उदाहरण के लिए पैकेज.जेसन नाम हर जगह काम नहीं कर रहा है क्योंकि यह @ में होने के कारण आयात किया जाता है। myorg/my-proj प्रारूप) यह वास्तव में अच्छी तरह से काम कर रहा है।

एक-एक दिन से इसका उपयोग कर रहे हैं और एचएमआर उत्कृष्ट है!

@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. और देव और उत्पादों के लिए सरल और न्यूनतम एनपीएम स्क्रिप्ट https://github.com/dutscher/stencil-storybook/blob/master/package.json

चियर्स