Storybook: Addon-docs: स्रोत दस्तावेज़ ब्लॉक टाइपप्रति समर्थन

धन्यवाद @enagy27! यहां कम से कम कुछ विकल्प हैं:

1) source-loader टाइपप्रति-मित्र कोड आउटपुट कर सकते हैं
2) उपयोगकर्ता टाइपस्क्रिप्ट को अलग तरह से कॉन्फ़िगर कर सकता है (इसे हमारे मोनोरेपो में नहीं देखा है)
3) source-loader वर्कअराउंड के लिए @ts-ignore आउटपुट कर सकता है

मुझे लगता है कि तीसरा विकल्प शुरू करने के लिए सबसे सीधा है, पहला शायद सबसे अच्छा दीर्घकालिक है

महान सीज़र का भूत !! मैंने अभी-अभी https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 जारी किया है जिसमें PR #7831 है जो इस मुद्दे का संदर्भ देता है। इसे आज़माने के लिए आज ही अपग्रेड करें!

आप इस पूर्व-रिलीज़ को @next NPM टैग पर पा सकते हैं।

इस मुद्दे को बंद करना। कृपया फिर से खोलें यदि आपको लगता है कि अभी और करना बाकी है।

@ enagy27 में रेप्रो नहीं है, इसलिए यह बहुत अच्छा होगा यदि आप इसे आजमा सकते हैं और मुझे बताएं कि क्या यह काम करता है

@shilman बिल्कुल! इसे अब एक शॉट दे रहे हैं। शुक्रिया!

@shilman अभी भी इन त्रुटियों को beta.39 पर देख रहा है

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(69,52)
      TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx
./src/elements/tag/tag.stories.tsx
[tsl] ERROR in /Users/eric.nagy/workspace/component-library/src/elements/tag/tag.stories.tsx(74,3)
      TS2300: Duplicate identifier 'parameters'.

npx -p @storybook/cli<strong i="10">@next</strong> sb info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.17.3 - ~/workspace/component-library/node_modules/.bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-actions: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-docs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-knobs: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-links: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addon-viewport: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/addons: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/preset-scss: 1.0.2 => 1.0.2 
    @storybook/preset-typescript: 1.1.0 => 1.1.0 
    @storybook/react: ^5.2.0-beta.39 => 5.2.0-beta.39 
    @storybook/theming: ^5.2.0-beta.39 => 5.2.0-beta.39

यह देखते हुए कि यह स्रोत लोडर पर है, क्या इसे अलग से स्थापित करने की आवश्यकता है और फिर इसे प्रीसेट द्वारा लिया जाता है, या प्रीसेट की एक नई रिलीज़ आवश्यक है?

@ enagy27 क्या आप यहां दिए गए निर्देशों का उपयोग करके लोड किए गए स्रोत पर एक नज़र .mdx को .tsx बदलें और बाकी को लागू होना चाहिए)

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/faq.md#how -do-i-debug-my-mdx-story

@shilman मैं केवल सर्वर शुरू करने में सक्षम हूं जब sourceLoaderOptions: null प्रभाव में है 😞 अन्यथा एक असफल निर्माण सर्वर को शुरू करना बंद कर देता है और मैं ब्राउज़र में स्रोत का निरीक्षण करने में असमर्थ हूं। क्या पहले असफल निर्माण पर सर्वर को बाय-पास करने और सर्वर शुरू करने के लिए कोई कमांड लाइन विकल्प हो सकता है?

व्हूपी !! मैंने अभी-अभी https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 जारी किया है जिसमें PR #7845 है जो इस मुद्दे का संदर्भ देता है। इसे आज़माने के लिए आज ही अपग्रेड करें!

आप इस पूर्व-रिलीज़ को @next NPM टैग पर पा सकते हैं।

@enagy27 ने आपके परिवर्तन मर्ज किए और जारी किए। इसे आज़माइए?

@shilman ऐसी कोई किस्मत नहीं 😞 मैं स्थानीय रूप से प्रयोग कर रहा हूं और इसे लटका नहीं पा रहा हूं। मैंने भी धोखा दिया और उन सभी को as any रूप में चिह्नित किया लेकिन ऐसा लगता है कि यह डुप्लिकेट चर parameters बारे में शिकायत करता है, जो मुझे आश्चर्यचकित करता है कि __STORY__ ठीक से बच नहीं रहा है? लेकिन फिर मैं नहीं देख सकता कि यह जेएस के लिए कैसे काम करेगा और टीएस नहीं ... मैं स्टम्प्ड हूं

मैं भी इस समस्या का सामना कर रहा हूं लेकिन दुर्भाग्य से अधिक अतिरिक्त संदर्भ नहीं है।

यहां एक और समाधान है कि स्टोरीबुक लोड करने वाली tsconfig.js फ़ाइल में सभी "सख्त" टाइपचेकिंग नियमों को ओवरराइड करना है (या तो आपके प्रोजेक्ट का tsconfig या .storybook/tsconfig.js (मुझे लगता है))।

मुझे लगता है कि ये सुनिश्चित करने वाले हैं कि सक्षम नहीं हैं:

@libetl मुझे पता है कि आप वास्तव में व्यस्त हैं लेकिन यह बहुत अच्छा होगा यदि आप इसे देख सकें।

@JonKrone जब आप ऐसा करते हैं तो क्या आपको डॉक्स टैब में सोर्स कोड दिखाई देता है? मैंने ये संशोधन किए हैं और मुझे अभी भी स्रोत नहीं दिख रहा है

एक अस्थायी समाधान यदि आप भयानक-टाइपस्क्रिप्ट-लोडर का उपयोग करते हैं:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

आदर्श नहीं है, लेकिन यह काम करता है।

@shilman क्या आप यही खोज रहे हैं? FYI करें यह TS7005 को अनदेखा किए बिना नहीं बनेगा (कोई निहित नहीं)।

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "/home/user/projects/real/ts/my-blog-react/src/graphql";
  // @ts-ignore
  var __STORY__ = "import React from \"react\";\n\nimport { ApolloProvider } from \"@apollo/react-hooks\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport { Posts } from \"../views/Posts/index\"; // ! Fix coupling\nimport { PostContent } from \"../views/PostContent\"; // ! Fix coupling\nimport { withPostContentQuery } from \"./components/withPostContentQuery\";\nimport { withPostsQuery } from \"./components/withPostsQuery\";\nimport * as fakeQl from \"./fakeql/fakeql-endpoints\";\nimport apolloClientFactory from \"./apollo\";\n\n// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.\n\nconst apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);\nconst PostContentQuery = withPostContentQuery(PostContent);\nconst PostsQuery = withPostsQuery(Posts);\n\n// ~~~ Posts ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostsQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostsQuery routeHandler={() => null} />\n  </ApolloProvider>\n));\n\n// ~~~ PostContent ~~~\nstoriesOf(\"GraphQL\", module).add(\"PostContentQuery\", () => (\n  <ApolloProvider client={apolloClient}>\n    <PostContentQuery postId=\"1\" />\n  </ApolloProvider>\n));\n";
  // @ts-ignore
  var __ADDS_MAP__ = {"graphql--postsquery":{"startLoc":{"col":33,"line":20},"endLoc":{"col":1,"line":24},"startBody":{"col":47,"line":20},"endBody":{"col":1,"line":24}},"graphql--postcontentquery":{"startLoc":{"col":33,"line":27},"endLoc":{"col":1,"line":31},"startBody":{"col":53,"line":27},"endBody":{"col":1,"line":31}}};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/root.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import React from "react";

import { ApolloProvider } from "@apollo/react-hooks";
import { storiesOf } from "@storybook/react";

import { Posts } from "../views/Posts/index"; // ! Fix coupling
import { PostContent } from "../views/PostContent"; // ! Fix coupling
import { withPostContentQuery } from "./components/withPostContentQuery";
import { withPostsQuery } from "./components/withPostsQuery";
import * as fakeQl from "./fakeql/fakeql-endpoints";
import apolloClientFactory from "./apollo";

// FIXME: #coupling - find a way to not depend on Post and Container, probably fakes - but not good enough.

const apolloClient = apolloClientFactory(fakeQl.normalApiEndpoint);
const PostContentQuery = withPostContentQuery(PostContent);
const PostsQuery = withPostsQuery(Posts);

// ~~~ Posts ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostsQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostsQuery routeHandler={() => null} />
  </ApolloProvider>
));

// ~~~ PostContent ~~~
storiesOf("GraphQL", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add("PostContentQuery", () => (
  <ApolloProvider client={apolloClient}>
    <PostContentQuery postId="1" />
  </ApolloProvider>
));

@ 0b10 मैं इसे tsconfig.json को भी बदलने के बारे में नहीं सोचा था

स्टोरीबुक-रिएक्शन-राउटर को 1.0.6 पर अपडेट करने के बाद मुझे यहां त्रुटियां मिल रही थीं, जिसमें एक मुद्दा खुला है: gvaldambrini/storybook-router#42 मुझे यहां त्रुटियां नहीं मिल रही हैं (स्टोरीबुक-राउटर त्रुटियां शायद संबंधित नहीं थीं, नीचे टिप्पणी देखें )

मेरी TSX कहानियों पर "कोई कोड उपलब्ध नहीं है", MDX ठीक काम करता है, परिणाम समान/बिल्कुल @ 0b10 की कहानी जैसा दिखता है

  // @ts-ignore
  var withSourceLoader = require('@storybook/source-loader/preview').withSource;
  // @ts-ignore
  var __SOURCE_PREFIX__ = "C:\\Workspace\\application-ui\\src\\components\\atoms\\container";
  // @ts-ignore
  var __STORY__ = "import { storiesOf } from \"@storybook/react\";\nimport React, { ReactElement } from \"react\";\n\nimport { Container } from \"components\";\n\nconst stories = storiesOf(\"Atoms/Container\", module).addParameters({ component: Container });\n\nstories.add(\"Default\", (): ReactElement => <Container>Hello</Container>);\n";
  // @ts-ignore
  var __ADDS_MAP__ = {};
  // @ts-ignore
  var __MAIN_FILE_LOCATION__ = "/Container.stories.tsx";
  // @ts-ignore
  var __MODULE_DEPENDENCIES__ = [];
  // @ts-ignore
  var __LOCAL_DEPENDENCIES__ = {};
  // @ts-ignore
  var __IDS_TO_FRAMEWORKS__ = {};

  import { storiesOf } from "@storybook/react";
import React, { ReactElement } from "react";

import { Container } from "components";

const stories = storiesOf("Atoms/Container", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).addParameters({ component: Container });

stories.add("Default", (): ReactElement => <Container>Hello</Container>);

अपडेट किया गया config.js क्योंकि यह सिर्फ docs: DocsPage

    docs: {
        container: DocsContainer,
        page: DocsPage,
    },

प्रीसेट:

module.exports = [
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
        },
    },
];

वेबपैक कॉन्‍फ़िगरेशन, संभवत: आवश्‍यक नहीं है?

    config.module.rules.push({
        exclude: /node_modules/,
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve("babel-loader"),
                options: {
                    presets: [["react-app", { flow: false, typescript: true }]],
                },
            },
            {
                loader: require.resolve("react-docgen-typescript-loader"),
            },
        ],
    });

    config.module.rules.push({
        enforce: "pre",
        include: [path.resolve(__dirname, "../src")],
        loader: require.resolve("@storybook/source-loader"),
        test: /\.(stories|story)\.[tj]sx?$/,
    });

tsconfig.json में "noImplicitAny": true और कोई ignoreDiagnostics शामिल नहीं है

rc.4 साथ अब कोई समस्या नहीं दिख रही है, लेकिन कोई स्रोत नहीं है हालांकि ऐसा लगता है कि यह #6641 में भी चिह्नित है, इसलिए अब त्रुटियां मौजूद नहीं हैं, यह समस्या डुप्लिकेट हो सकती है

मुझे एक उपाय मिल गया है!

• उपयोग करने के बजाय sourceLoaderOptions: null , मैं इस्तेमाल किया transpileOnly: true मेरी में tsLoaderOptions
• #8055 में समाधान का पालन करें, जहां एक शीर्ष-स्तरीय parameters चर नहीं हो सकता
• किसी कारण से, as 'optionA' | 'optionB' जैसे दाएं हाथ के बयानों का उपयोग यहां विफल रहा और इसे बाएं हाथ के प्रकार की घोषणाओं में परिवर्तित किया जाना था।

यह विफल रहता है:

const colors = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary) as ButtonColor;

यह काम:

const colors: Record<string, ButtonColor> = {
  primary: 'primary',
  secondary: 'secondary',
};

const color = radios('color', colors, colors.primary);

अंत में यह टाइप अनुमान के साथ एक समझने योग्य source-loader मुद्दे की तरह लगता है वैसे भी, उम्मीद है कि यह मदद करता है!

@ enagy27 आपने यह पता लगाने के लिए रॉक किया। मुझे उम्मीद है कि @libetl 5.3 में किसी समय ऑनलाइन वापस आ जाएगा, और हम केवल source-loader अपग्रेड कर सकते हैं ताकि इन वर्कअराउंड की आवश्यकता न हो। उंगलियों को पार कर! मैं

नमस्ते। क्या कोई उदाहरण रेपो प्रदान कर सकता है जहां प्रतिक्रिया टाइपस्क्रिप्ट और दस्तावेज़ों के साथ स्टोरीबुक काम कर रही है?

@simonhoss यह एक अच्छा विचार है, मैं वास्तव में यह काम करने के लिए संघर्ष कर रहा हूं।

मैं भी

TS निर्देश आपको react-docgen-typescript-loader इंगित करते हैं जो addon-info को स्थापित करने के लिए कहता है लेकिन पहले दस्तावेज़ीकरण में यह नहीं कहता है कि addon-docs addon-info लिए एक प्रतिस्थापन है? विशेष रूप से TS के साथ addon-docs स्थापना के लिए TS के साथ कार्यशील सेटअप या कुछ स्पष्ट निर्देशों को एक ही स्थान पर देखना बहुत उपयोगी होगा।

योगदान करने और मदद करने में खुशी हो रही है लेकिन यह समझने की जरूरत है कि ये टुकड़े पहले एक साथ कैसे फिट होते हैं! मैं

अब जब दस्तावेज़ जारी कर दिए गए हैं तो मुझे यह सुनिश्चित करने के लिए cra- ts-

.स्टोरीबुक/addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';

.स्टोरीबुक/config.js

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';

import theme from './theme';
import '../stylesheets/gusto.scss';

// This file overrides styles from the global Gusto
// styles which interfere with Storybook styles
import './storybook.scss';

// Is your addon not showing up? Try looking for a `register` function
// and add it to .storybook/addons.js
addDecorator(withA11y);
addDecorator(withKnobs);

addParameters({
  // storybook built-in
  // more info available here:
  // https://storybook.js.org/docs/configurations/options-parameter/
  options: {
    showPanel: true,
    panelPosition: 'right',
    // https://storybook.js.org/docs/configurations/theming/
    theme,
  },
  knobs: {
    escapeHTML: false,
  },
  // viewport structure here:
  // https://github.com/storybookjs/storybook/tree/master/addons/viewport#use-custom-set-of-devices
  // viewport: {
  //   defaultViewport: 'iphone6',
  //   type: 'mobile',
  // },
});

configure(require.context('../src', true, /\.stories\.(js|jsx|ts|tsx|mdx)$/), module);

.स्टोरीबुक/प्रीसेट.जेएस

const path = require('path');

module.exports = [
  '@storybook/preset-scss',
  {
    name: '@storybook/preset-typescript',
    options: {
      // Point the loader here to override the root "noEmit" compilerOption
      tsLoaderOptions: {
        // Transpile only means no type-checking from storybook, which greatly speeds up
        // builds. Types will be checked as part of the normal build process. This may also
        // be necessary for loading story source
        transpileOnly: true,
        configFile: path.resolve(__dirname, 'tsconfig.json'),
      },
      // We must use our config to ensure props and their comments are loaded
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        // https://github.com/styleguidist/react-docgen-typescript#parseroptions
        propFilter: prop => {
          if (prop.parent) {
            return !prop.parent.fileName.includes('node_modules/@types/react/');
          }

          return true;
        },
      },
    },
  },
  '@storybook/addon-docs/react/preset',
];

.स्टोरीबुक/थीम.जेएस

मैं इसे साझा नहीं कर सकता क्योंकि यह मेरी कंपनी के लिए आंतरिक है, लेकिन इसका संदर्भ config.js ।

.स्टोरीबुक/tsconfig.json

यह फ़ाइल केवल रूट tsconfig.json में कॉन्फ़िगरेशन को हटाने का कार्य करती है जो कि स्टोरीबुक में यहां कोई मतलब नहीं होगा।

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": false
  }
}

हाय @ enagy27 - इसके लिए धन्यवाद। मेरे पास यह एक कस्टम वेबपैक कॉन्फ़िगरेशन के साथ काम कर रहा है। किसी अजीब कारण से टाइपस्क्रिप्ट प्रीसेट का उपयोग करने से मुझे स्टोरीबुक, यानी - सीएसएस फाइलों में संपत्ति आयात करने में सक्षम होना बंद हो जाता है।

एक छोटी सी समस्या जिसका मैं सामना कर रहा हूं, वह यह है कि मेरी प्रॉप्स टेबल इस तरह के अनुमान लगाने में सक्षम नहीं है:

SomeType['property'] अभी मैं एक संघ के बजाय अपनी तालिका में any देख रहा हूं, मुझे आश्चर्य है कि इसके आसपास कोई रास्ता है या नहीं।

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

हाय @ जीरोफ्रंट। मुझे इस सटीक टिप्पणी पैटर्न का पालन करना पड़ा

घटक विवरण:

/**
 * This is a component description and should sit directly above your component
 */

प्रोप विवरण:

/** I am a prop description and should sit directly above the interface property i am describing */

@ enagy27 वास्तव में, मैंने आपकी पहली तस्वीर में दिखाए गए टिप्पणी पैटर्न का पालन किया था

@zerofront आपको घटक के लिए टाइपस्क्रिप्ट प्रकार की आवश्यकता होगी। आप इसके बजाय export const Button: React.FC<BaseButtonProps> = props => {...} उपयोग कर सकते हैं

TS और docgen के साथ मेरा सेटअप किसी कारण से जेनरिक के साथ काम नहीं करता है, यहाँ #8133 एक समस्या पैदा की जो बताता है

@zerofront मेरे पास बिल्कुल आपकी समस्या है। आपके बटन डॉक्स के प्रॉप्स सेक्शन में, स्टोरीबुक BaseButtonProps इंटरफ़ेस के बजाय defaultProps प्रिंट कर रही है। और मुझे विवरण भी याद आती है। उपशीर्षक के बारे में, आप इसे कहानी फ़ाइल में इस प्रकार जोड़ सकते हैं:

export default {
  title: 'Button',
  component: Button,
  parameters: {
    componentSubtitle: 'Handy status label',
  },
}

@zerofront इसके अलावा @ enagy27 ने क्या कहा।
*.stories.tsx के साथ काम करने के लिए, आपको इस कॉन्फिग की तरह कुछ जोड़ना होगा:

.स्टोरीबुक/webpack.config.js

const path = require('path');
const include = path.resolve(__dirname, '../src');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      },
    ],
    include,
  });
  return config;
};

@zerofront आपको घटक के लिए टाइपस्क्रिप्ट प्रकार की आवश्यकता होगी। आप इसके बजाय export const Button: React.FC<BaseButtonProps> = props => {...} उपयोग कर सकते हैं

@zerofront @ enagy27 कल मुझे पता चला कि मेरा मुद्दा (जो जाहिर तौर पर @zerofront का ही था) फ़ंक्शन पर रिटर्न प्रकार के कारण हुआ था।

यह मेरे लिए तय है:

- import React from 'react'
+ import React, { FC } from 'react'

- export const Button: React.FC<Props>
+ export const Button: FC<Props>

स्रोत:
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
और आंशिक रूप से यह नोट संबंधित हो सकता है:
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

मुझे आशा है कि यह मदद कर सकता है।

@sergiop @enagy27 धन्यवाद! अंत में, सहारा तालिका काम है।
लेकिन अभी भी कुछ समस्याएं हैं।

यदि डिफ़ॉल्टप्रॉप्स स्ट्रिंग प्रकार नहीं है, तो यह उत्पन्न नहीं हो सकता है।

@zerofront मैं पुष्टि कर सकता हूं कि मेरे पास एक ही समस्या है। यह ठीक करने के लिए प्रबंधन करने के लिए मुद्दों की मेरी टू-डू सूची में है। ;-)
यदि आप कारण की खोज करना चाहते हैं, तो आपको शायद यह समझने की कोशिश करनी चाहिए कि यह स्टोरीबुक से संबंधित है या react-docgen-typescript-loader ।

@zerofront शायद एक समर्पित मुद्दा खोलना बेहतर है। ;-)

मुझे डी-स्ट्रक्चरिंग प्रॉप्स के दौरान डिफॉल्ट प्रॉप्स सेट करने का सौभाग्य मिला है। बहुत यकीन है कि यह गैर स्ट्रिंग मानों के साथ भी काम करता है।

अर्थात:

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

मुझे डी-स्ट्रक्चरिंग प्रॉप्स के दौरान डिफॉल्ट प्रॉप्स सेट करने का सौभाग्य मिला है। बहुत यकीन है कि यह गैर स्ट्रिंग मानों के साथ भी काम करता है।

अर्थात:

const Text = ({
text: 'Hello world'
}: Props) => <p>{text}</p>

@ sami616 मैं आपके जैसे ही डिफ़ॉल्ट प्रॉप्स का उपयोग करता हूं, लेकिन मुझे गैर-स्ट्रिंग के लिए डिफ़ॉल्ट नहीं दिखाई देता है जैसा कि @zerofront पहले ही रिपोर्ट किया गया है।

मेरी टिप्पणी पर ध्यान न दें, हाँ, मुझे एक ही समस्या है।

@ sami616 , जैसा कि पहले ही बताया जा चुका है, मैं इस पर एक बग रिपोर्ट खोलना चाहता हूं, लेकिन ऐसा करने से पहले मुझे कोडबेस पर थोड़ी जांच करने की जरूरत है, यह समझने के लिए कि समस्या का स्रोत storybook या react-docgen-typescript-loader । इस तरह मैं सही प्रोजेक्ट पर इश्यू खोलूंगा।

@sami616 @sergiop
मैं प्रतिक्रिया-डॉकजेन-टाइपस्क्रिप्ट-लोडर संस्करण 3.2.1 स्थापित करता हूं
मुझे node_modules/react-docgen-typescript-loader/dist/generateDocgenCodeBlock में कुछ कोड मिले

var setDefaultValue = function(defaultValue) {
    return typescript_1.default.createPropertyAssignment(
      typescript_1.default.createLiteral('defaultValue'),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null && typeof defaultValue === 'object' && 'value' in defaultValue && typeof defaultValue.value === 'string'
        ? typescript_1.default.createObjectLiteral([
            typescript_1.default.createPropertyAssignment(
              typescript_1.default.createIdentifier('value'),
              typescript_1.default.createLiteral(defaultValue.value),
            ),
          ])
        : typescript_1.default.createNull(),
    );
  };

&& typeof defaultValue.value === 'string'

यह स्थिति डिफ़ॉल्टप्रॉप के प्रकार को सीमित करती है।

और नवीनतम संस्करण 3.3.0 प्रतिक्रिया-डॉकजेन-टाइपस्क्रिप्ट-लोडर में, यह स्ट्रिंग、नंबर、बूलियन का समर्थन करता है

https://github.com/strothj/react-docgen-typescript-loader/blob/master/src/generateDocgenCodeBlock.ts

const setDefaultValue = (
    defaultValue: { value: string | number | boolean } | null,
  ) =>
    ts.createPropertyAssignment(
      ts.createLiteral("defaultValue"),
      // Use a more extensive check on defaultValue. Sometimes the parser
      // returns an empty object.
      defaultValue != null &&
        typeof defaultValue === "object" &&
        "value" in defaultValue &&
        (typeof defaultValue.value === "string" ||
          typeof defaultValue.value === "number" ||
          typeof defaultValue.value === "boolean")
        ? ts.createObjectLiteral([
            ts.createPropertyAssignment(
              ts.createIdentifier("value"),
              ts.createLiteral(defaultValue!.value),
            ),
          ])
        : ts.createNull(),
    );

@zerofront ,

@zerofront मैं पुष्टि कर सकता हूं कि react-docgen-typescript-loader से 3.3.0 तक अपडेट करने से समस्या हल हो जाएगी। धन्यवाद।

एक अस्थायी समाधान यदि आप भयानक-टाइपस्क्रिप्ट-लोडर का उपयोग करते हैं:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

आदर्श नहीं है, लेकिन यह काम करता है।

मैंने आज ही ५.१ से ५.२.५ तक अपडेट किया और अभी तक एडऑन-डॉक्स स्थापित किए बिना, यह त्रुटि प्राप्त करना शुरू कर दिया। इस समाधान ने मेरे लिए काम किया, हालांकि मुझे यह कहना है कि यह वास्तव में मेरे लिए स्पष्ट नहीं है।

हेलो सब लोग! ऐसा लगता है कि हाल ही में इस मुद्दे पर बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणियाँ या बग हैं, तो कृपया बेझिझक चर्चा जारी रखें। दुर्भाग्य से, हमारे पास हर मुद्दे पर पहुंचने का समय नहीं है। हम योगदान के लिए हमेशा खुले हैं इसलिए यदि आप मदद करना चाहते हैं तो कृपया हमें एक पुल अनुरोध भेजें। निष्क्रिय मुद्दे 30 दिनों के बाद बंद कर दिए जाएंगे। धन्यवाद!

मुझे अभी भी संस्करण "@storybook/react": "5.2.6" और "react-docgen-typescript-loader": "3.6.0" लिए इस मुद्दे में वर्णित त्रुटि मिल रही है। सुनिश्चित नहीं है कि यह प्रासंगिक है, लेकिन यहां संदर्भित पीआर में // @ts-ignore s को __MODULE_DEPENDENCIES__ में जोड़ा गया एकमात्र फ़ाइल src/server/build.js है, जबकि यह अभी भी src में अनदेखा है

@jalooc कृपया 5.3 बीटा देखें। प्रॉप्स टेबल में ढेर सारे सुधार।

@shilman मेरा मानना ​​​​है कि मैंने इसे बीटा.6 पर आखिरी बार आजमाया था और यह वर्कअराउंड के बिना काम नहीं कर रहा था। मैं नवीनतम . के साथ फिर से कोशिश करूँगा

मुझे अभी भी स्टोरीबुक 5.3 के साथ यह समस्या है। [email protected] और प्रतिक्रिया-डॉकजेन-टाइपस्क्रिप्ट-लोडर 3.6.0।

मेरे लिए इसे ठीक करने का एकमात्र तरीका "noImplicitAny": false को tsconfig.json में सेट करना था जो मैं वास्तव में नहीं करना चाहता।

मुझे जो त्रुटि मिल रही है वह यह है:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

यहां तक ​​कि अगर मैं अपनी कहानियों में एक प्रकार जोड़ता हूं तो यह समस्या को पूरी तरह से ठीक नहीं करता है।

फॉलो अप करें, मैंने इसे @enagy27 द्वारा उल्लिखित transpileOnly विकल्प का उपयोग करके काम किया है। मैं पूर्ण वेबपैक कॉन्फ़िगरेशन के बजाय प्रीसेट का उपयोग कर रहा हूं, यह वर्तमान में मेरा presets.js । tsconfig.json में कोई बदलाव नहीं:

// presets.js
const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                transpileOnly: true,
            },
            tsDocgenLoaderOptions: {
                tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
            },
            include: [path.resolve(__dirname, "../src")],
        },
    },
    {
        name: "@storybook/addon-docs/react/preset",
        options: {
            configureJSX: true,
            //sourceLoaderOptions: null,
        },
    },
];

इस पर कोई अपडेट? हम TS के साथ स्टोरीबुक ऐडऑन का उपयोग करने की कोशिश कर रहे हैं और वर्कअराउंड के साथ भी इसे पार नहीं कर सकते। प्राप्त करना जारी रखें
"वैरिएबल '__MODULE_DEPENDENCIES__' का परोक्ष रूप से 'कोई भी []' प्रकार है।"

वर्तमान में स्टोरीबुक को 5.3.0-बीटा.16 में अपडेट करने की कोशिश की है और यहां बताए गए अन्य वर्कअराउंड की कोशिश की है। धन्यवाद

मुझे टाइपस्क्रिप्ट के साथ प्रॉप्स टेबल दिखाने के लिए स्टोरीबुक एडऑन-डॉक्स नहीं मिल सकते। यह सिर्फ "कोई घटक नहीं मिला" कहता है।

addons.js

import '@storybook/addon-knobs/register'
import '@storybook/addon-a11y/register'
import '@storybook/addon-docs/register'

प्रीसेट.जेएस

module.exports = [
  {
    name: "@storybook/addon-docs/react/preset",
    options: {
      configureJSX: true,
    }
  }
]

webpack.config.js

const path = require('path')
const SRC_PATH = path.join(__dirname, '../src')

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx|js|jsx)$/,
        include: [SRC_PATH],
        use: [
            {
                loader: require.resolve('babel-loader'),
                options: {
                    presets: [['react-app', { flow: false, typescript: true }]],
                    plugins: ['babel-plugin-styled-components']
                },
            },
            {
                loader: require.resolve('react-docgen-typescript-loader'),
                options: {
                    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
                },
            },
            {
                loader: require.resolve('@storybook/source-loader'),
                options: { parser: 'typescript',  injectParameters: true, },
            },
        ],
        exclude: [/node_modules/],
        enforce: 'pre',

    })

    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx')
    return config
}

स्टोरीबुक 5.2.8
एडऑन-डॉक्स 5.2.8
प्रतिक्रिया-डॉकजेन-टाइपस्क्रिप्ट-लोडर 3.6.0
बेबेल-लोडर 8.0.6
@स्टोरीबुक/सोर्स-लोडर 5.2.8

साथ ही, अगर मैं कंपोनेंट स्टोरी फॉर्मेट स्टोरीबुक का उपयोग करता हूं तो वह घटक बिल्कुल नहीं ढूंढता है (कैनवास और दस्तावेज़ और मेनू खाली हैं), लेकिन अगर मैं कहानियों का उपयोग करता हूं तो यह उन्हें प्रदर्शित करता है।

वर्कअराउंड के रूप में आप सख्त नियमों को बंद करके tsconfig.json की ओर डॉक जेनरेशन को इंगित कर सकते हैं। मुझे लगता है कि मैंने इसे अभी के लिए इस तरह हल किया है। अगर किसी को दिलचस्पी है तो अगले हफ्ते दोबारा जांच कर सकते हैं।

ये मेरे विन्यास हैं, मदद कर सकते हैं।
गिट इसे पूरा काम कर रहा है।

++ इट्स
निर्यात कॉन्स्ट अकॉर्डियनआइटम
और मेरे पास कोई webpack.config.js नहीं है

किसी और के लिए अभी भी संघर्ष कर रहा है, मैं अंततः प्रतिक्रिया-डॉकजेन-टाइपस्क्रिप्ट-लोडर के कुछ दर्दनाक डिबगिंग के बाद इसे काम करने में कामयाब रहा हूं।

React-docgen-typescript-loader फ़ोल्डर नाम का उपयोग करके __docgeninfo असाइन करता है, घटक नाम का नहीं, इसलिए आपको अपने घटक को उसी नाम (केस संवेदनशील) के फ़ोल्डर में रखना होगा।

|__
  CTALink
    |___index.tsx

मुझे काम करने के लिए सीएसएफ प्रारूप नहीं मिला (हमेशा खाली), लेकिन storiesOf सिंटैक्स का उपयोग करते समय, आपको प्रॉप्स टेबल को लेने के लिए स्टोरीबुक से addParameters फ़ंक्शन का उपयोग करके घटक को शामिल करना होगा। .

storiesOf('CTALink', module)
  .addParameters({
    component: CTALink,
  })
  .add('default story', () => (
    <CTALink to="/">Click here</CTALink>
  ))

हेलो सब लोग! ऐसा लगता है कि हाल ही में इस मुद्दे पर बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणियाँ या बग हैं, तो कृपया बेझिझक चर्चा जारी रखें। दुर्भाग्य से, हमारे पास हर मुद्दे पर पहुंचने का समय नहीं है। हम योगदान के लिए हमेशा खुले हैं इसलिए यदि आप मदद करना चाहते हैं तो कृपया हमें एक पुल अनुरोध भेजें। निष्क्रिय मुद्दे 30 दिनों के बाद बंद कर दिए जाएंगे। धन्यवाद!

टाइपप्रति 5.3 में स्रोत ब्लॉक में काम करना चाहिए। समापन।

मैंने @storybook/react और @storybook/addon-docs से 5.3.0-rc.4 दोनों को अपडेट किया है लेकिन त्रुटि संदेश TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type. प्राप्त करते रहें

मैं प्रीसेट का उपयोग नहीं कर रहा हूं और मैं वेबपैक में भी नया हूं इसलिए शायद मैंने कुछ गलतियां की हैं।
यहाँ मेरा webpack.config.js है:
`` `कॉन्स्ट पथ = आवश्यकता ('पथ');

मॉड्यूल.एक्सपोर्ट = {
नोड: {
एफएस: 'खाली',
चाइल्ड_प्रोसेस: 'खाली'
},
संकल्प: {
मॉड्यूल: [
'नोड_मॉड्यूल',
],
एक्सटेंशन: [.ts", ".tsx"],
सिम्लिंक: सच
},
मापांक: {
नियम: [
{
परीक्षण: /। (टीएस | टीएसएक्स) $ /,
उपयोग: [
{
लोडर: requ.resolve ('विस्मयकारी-टाइपस्क्रिप्ट-लोडर')
},
{
लोडर: requ.resolve('react-docgen-typescript-loader')
},
]
},
{
परीक्षण: /.(कहानियां|कहानी)।[tj]sx?$/,
लोडर: requ.resolve('@storybook/source-loader')
}
]
},
बाहरी: {
'क्लास-ट्रांसफॉर्मर': 'क्लास-ट्रांसफॉर्मर'
}
};
```

यो-हो-हो !! मैंने अभी-अभी https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 जारी किया है जिसमें PR #9272 है जो इस मुद्दे का संदर्भ देता है। इसे आज़माने के लिए आज ही अपग्रेड करें!

आप इस पूर्व-रिलीज़ को @next NPM टैग पर पा सकते हैं।

@JacopoBonta क्या आप सबसे हालिया रिलीज़ 5.3.0-rc.5 आज़मा सकते हैं?

नमस्ते @shilman स्टोरीबुक के साथ संयुक्त डॉक्स के लिए अद्भुत समर्थन के लिए धन्यवाद।
मैंने 5.3.0-rc.5 अपडेट किया और मुझे अभी भी त्रुटि मिलती है TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

यह तभी काम करता है जब मैं ignoreDiagnostics: [7005] को ts-loader कॉन्फ़िगरेशन में जोड़ दूं जैसा कि नीचे दिखाया गया है।

फ़ाइल main.js :

const { addons } = require('@storybook/addons');
const path = require('path');
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = {
  stories: ['../packages/**/*.stories.(tsx|mdx)'],
  presets: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, 'tsconfig.json'),
          ignoreDiagnostics: [7005],
          getCustomTransformers: () => ({
            before: [ tsImportPluginFactory(
              {
                libraryName: 'antd',
                style: 'css',
                libraryDirectory: 'es'
              }
            ) ]
          }),
        },
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, "../packages")]
      },
    },
    {
      name: '@storybook/addon-docs/preset',
      options: {
      }
    }],
  addons: [
    '@storybook/addon-docs/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-actions/register',
    '@storybook/addon-links/register'
  ],
};

@JacopoBonta क्या आप सबसे हालिया रिलीज़ 5.3.0-rc.5 आज़मा सकते हैं?

मुझे खेद है, लेकिन 5.3.0-rc.5 अपग्रेड करने से काम नहीं चला।
मैंने @storybook/react और @storybook/addon-docs दोनों को अपडेट किया है लेकिन वही त्रुटि मिलती रहती है।

AcJacopoBonta क्या आप esakal के समाधान की पुष्टि कर सकते हैं?

@JacopoBonta मैं देख रहा हूँ कि आप awesome-typescript-loader का उपयोग कर रहे हैं। मैं वर्तमान में अन्य लोडर का उपयोग कर रहा हूं, लेकिन जब मैंने एक महीने पहले इसका इस्तेमाल किया तो मैंने इसी तरह का वर्कअराउंड किया। awesome-typescript-loader आपको निम्न कार्य करने चाहिए:

/* tsconfig.json */
{
  "compilerOptions": { },
  "awesomeTypescriptLoaderOptions": {
    "ignoreDiagnostics": [7005]
  }
}

यहाँ से लिया गया

हाँ, यह काम करता है। मैं पहले से ही इस वर्कअराउंड का उपयोग कर रहा था लेकिन मैं इसके बिना एक रास्ता ढूंढ रहा था।

वैसे भी, मदद के लिए धन्यवाद मैंने बहुत सराहना की है और नया साल मुबारक हो 🎉

धन्यवाद @esakal आप समाधान अब तक का सबसे अच्छा (मेरे लिए) है। मैं टाइपस्क्रिप्ट मुद्दों को ठीक करने के लिए transpileOnly: true सेट करता था लेकिन उस ओएफसी का प्रभाव अधिक टाइपस्क्रिप्ट त्रुटियों को किसी का ध्यान नहीं जाने देने का था।

मेरा वर्तमान, बहुत कम विन्यास ( presets.js ) इस तरह दिखता है:

const path = require("path");

module.exports = [
    {
        name: "@storybook/preset-typescript",
        options: {
            tsLoaderOptions: {
                configFile: path.resolve(__dirname, "../tsconfig.json"),
                ignoreDiagnostics: [7005],
            },
        },
    },
    {
        name: "@storybook/addon-docs/preset",
        options: {
            configureJSX: true,
        },
    },
];

शुक्रिया!