Storybook: Addon-docs: دعم كتابة مستندات المصدر

شكرا @ enagy27! يوجد على الأقل عدد قليل من الخيارات هنا:

1) يمكن أن ينتج source-loader كود كتابة أكثر سهولة
2) يمكن للمستخدم تكوين الكتابة المطبوعة بشكل مختلف (لم أر هذا في monorepo لدينا)
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 هل يمكنك إلقاء نظرة على المصدر الذي تم تحميله باستخدام الإرشادات الموجودة هنا ومعرفة ما إذا كان المصدر الذي تم تحميله يتضمن التغيير في # 7831؟ (استبدل .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__ لا يتم الهروب بشكل صحيح؟ ولكن بعد ذلك لا أستطيع أن أرى كيف ستعمل مع JS وليس TS ... أنا في حيرة من أمري

أواجه هذه المشكلة أيضًا ولكن للأسف لا أمتلك الكثير من السياق الإضافي.

حل آخر هنا هو تجاوز كل قواعد التحقق من الكتابة "الصارمة" في ملف tsconfig.js الذي يقوم كتاب القصة بتحميله (إما tsconfig لمشروعك أو .storybook/tsconfig.js (على ما أعتقد)).

أعتقد أن هؤلاء هم الأشخاص الذين يجب التأكد من عدم تمكينهم:

libetl أعلم أنك مشغول حقًا ، لكن سيكون من الرائع أن تلقي نظرة على هذا.

JonKrone عندما تفعل هذا ، هل ترى شفرة المصدر في علامة تبويب المستندات؟ لقد أجريت هذه التعديلات وما زلت لا أرى المصدر 😞

حل مؤقت إذا كنت تستخدم برنامج تحميل رائع للطباعة:

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

ليس مثاليا، لكنه يعمل.

shilman هل هذا ما تبحث عنه؟ لمعلوماتك ، لن يتم إنشاء هذا بدون تجاهل 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 أيضًا

كنت أتلقى أخطاءً هنا بعد تحديث جهاز توجيه Storybook-React إلى 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 أنت صخرة لمعرفة ذلك. آمل أن يعودibetl إلى الاتصال source-loader حتى لا تكون هناك حاجة إلى هذه الحلول. تشابك الاصابع! 🤞

أهلا. هل يمكن لشخص ما تقديم مثال على الريبو حيث يعمل الكتاب القصصي مع رد الفعل المطبوع والمستندات؟

simonhoss هذه فكرة رائعة ، أنا أكافح حقًا للحصول على هذا العمل.

وانا ايضا 😄

توجهك تعليمات TS إلى react-docgen-typescript-loader الذي ينص على تثبيت addon-info ولكن في وقت سابق في الوثائق ، ألا تقول أن addon-docs هو بديل لـ addon-info ؟ سيكون من المفيد جدًا رؤية إعداد عمل لهذا مع TS أو بعض الإرشادات الواضحة في مكان واحد خصيصًا لإعداد addon-docs مع TS.

يسعدني المساهمة والمساعدة ولكن عليك أن تفهم كيف تتلاءم هذه القطع معًا أولاً! 👍

الآن وقد تم إصدار المستندات ، قد أتمكن من تخصيص بعض الوقت لتحديث cra-ts-kitchen-sink للتأكد من أننا جميعًا على نفس الصفحة للتهيئة 🙂 قد يستغرق الأمر أسبوعًا أو ما إلى ذلك ... في الوقت الحالي سأقدم التكوين الخاص بي:

.storybook / addons.js

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

.storybook / 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);

.storybook / presets.js

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',
];

.storybook / theme.js

لا يمكنني مشاركة هذا لأنه داخلي لشركتي ، ولكن تمت الإشارة إليه بـ config.js .

.storybook / tsconfig.json

يعمل هذا الملف فقط على إزالة التكوينات الموجودة في الجذر tsconfig.json والتي لن تكون منطقية هنا في Storybook.

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

مرحبًا @ enagy27 - شكرًا على هذا. لقد حصلت على هذا العمل مع تهيئة حزمة الويب المخصصة. استخدام الإعداد المطبوع مسبقًا لسبب غريب يمنعني من استيراد الأصول في القصص القصيرة ، أي ملفات css.

هناك مشكلة صغيرة أواجهها وهي أن طاولة الدعائم الخاصة بي غير قادرة على استنتاج أنواع مثل هذا:

SomeType['property'] الآن أرى any في طاولتي بدلاً من الاتحاد ، أتساءل عما إذا كان هناك طريقة للتغلب على هذا.

مرحبًا @ enagy27. شكرا على هذا. لقد حصلت على هذا العمل مع التكوين الذي شاركته。 ولكن لا يزال هناك بعض الترويج. لا يمكن إنشاء وصف للمكون ووصف الخاصيات عندما أكتب مكونًا مع tsx. لكنها تعمل مع jsx。

مرحبًاzerofront. كان علي اتباع نمط التعليق هذا بالضبط

وصف المكون:

/**
 * 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 ستحتاج إلى نوع Typescript للمكون. يمكنك بدلاً من ذلك استخدام export const Button: React.FC<BaseButtonProps> = props => {...}

👆 لا يعمل الإعداد الخاص بي مع TS و docgen مع الأدوية الجنسية لسبب ما ، مما أدى إلى إنشاء مشكلة هنا # 8143 وهو ما يفسر

zerofront لدي defaultProps بدلاً من واجهة BaseButtonProps . وافتقد الوصف ايضا. حول العنوان الفرعي ، يمكنك إضافته في ملف القصة ، بهذه الطريقة:

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

zerofront بالإضافة إلى ما قاله @ enagy27 .
للعمل مع * .stories.tsx ، تحتاج إلى إضافة شيء مثل هذا التكوين:

.storybook / 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 ستحتاج إلى نوع Typescript للمكون. يمكنك بدلاً من ذلك استخدام export const Button: React.FC<BaseButtonProps> = props => {...}

zerofront @ enagy27 بالأمس اكتشفت أن

تم إصلاح هذا بالنسبة لي:

- 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 شكرا! في النهاية ، يعمل جدول الدعائم.
ولكن لا تزال هناك بعض المشاكل.

إذا لم يكن defaultProps من نوع سلسلة ، فلا يمكن إنشاء.

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 . بهذه الطريقة سأفتح المشكلة في المشروع الصحيح.

تضمين التغريدة
أقوم بتثبيت الإصدار 3.2.1
لقد وجدت بعض التعليمات البرمجية في node_modules / رد فعل-docgen-typecript-loader / dist / createDocgenCodeBlock

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 ، يُدعى رد فعل-docgen-typecript-loader ، وهو يدعم سلسلة 、 رقم 、 منطقي

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 ، من الجميل أن تعرف. لدي 3.2.1 أيضًا. في وقت لاحق من هذا الصباح ، أقوم بتحديثه إلى 3.3.0 لمعرفة ما إذا كان هذا سيحل المشكلة. شكرا.

zerofront يمكنني تأكيد أن تحديث react-docgen-typescript-loader إلى 3.3.0 سيحل المشكلة. شكرا.

حل مؤقت إذا كنت تستخدم برنامج تحميل رائع للطباعة:

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

ليس مثاليا، لكنه يعمل.

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

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

ما زلت أتلقى الخطأ الموضح في هذه المشكلة للإصدار "@storybook/react": "5.2.6" و "react-docgen-typescript-loader": "3.6.0" . لست متأكدًا مما إذا كان ذلك مناسبًا ، ولكن الملف الوحيد الذي تمت إضافته // @ts-ignore s إلى __MODULE_DEPENDENCIES__ في العلاقات العامة المشار إليها هنا هو src / server / build.js بينما لا يزال غير متجاهل في src /client/preview.js .

jalooc الرجاء مراجعة 5.3 بيتا. طن من التحسينات على جدول الدعائم.

shilman أعتقد أنني جربت هذا الأخير في الإصدار التجريبي 6 ولم يكن يعمل بدون الحل البديل. سأحاول مرة أخرى مع أحدث 😄

ما زلت أتلقى هذه المشكلة مع Storybook 5.3. [email protected] and

كانت الطريقة الوحيدة لإصلاحها بالنسبة لي هي تعيين "noImplicitAny": false في tsconfig.json وهو ما لا أريد فعله حقًا.

الخطأ الذي أواجهه هو هذا:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

حتى لو أضفت نوعًا إلى قصصي ، فلن يحل المشكلة تمامًا.

المتابعة ، لقد نجحت في العمل باستخدام الخيار transpileOnly ذكره @ enagy27. أنا أستخدم إعدادات مسبقة بدلاً من تكوينات webpack الكاملة ، وهذا هو حاليًا 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__ "يتضمن ضمنيًا نوع" أي [] "."

لقد حاولت حاليًا تحديث Storybook إلى 5.3.0-beta.16 وجربت الحلول الأخرى المذكورة هنا. شكرا

لا يمكنني الحصول على المستندات الإضافية في Storybook لإظهار جدول الدعائم بخط مطبوع. تقول فقط "لم يتم العثور على مكون".

addons.js

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

الإعدادات المسبقة. js

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
Addon-Docs 5.2.8.0 تحديث
رد فعل docgen-typecript-محمل 3.6.0.0
بابل لودر 8.0.6
@ storybook / source-loader 5.2.8.0 تحديث

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

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

هذه هي تكويناتي ، قد تساعد.
أكمل العمل git it.

++ الخاص به
تصدير const AccordionItem
وليس لدي webpack.config.js

بالنسبة لأي شخص آخر لا يزال يكافح ، تمكنت أخيرًا من تشغيله بعد بعض التصحيح المؤلم لمحمل رد فعل docgen-typscript.

يعين React-docgen-typescript-loader __docgeninfo باستخدام اسم المجلد ، وليس اسم المكوِّن ، لذلك يجب وضع المكون الخاص بك في مجلد يحمل نفس الاسم (حساس لحالة الأحرف).

|__
  CTALink
    |___index.tsx

لم أتمكن من تشغيل تنسيق CSF (فارغًا دائمًا) ، ولكن عند استخدام بناء جملة 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 الخاص بي:
"" مسار ثابت = يتطلب ('مسار') ؛

module.exports = {
العقدة: {
fs: "فارغ"،
عملية_الطفل: "فارغة"
} ،
حل: {
الوحدات: [
'node_modules'،
] ،
الامتدادات: [".ts"، ".tsx"]،
روابط الرموز: صحيح
} ،
وحدة: {
قواعد: [
{
الاختبار: /.
استعمال: [
{
أداة تحميل:
} ،
{
مُحمل: need.resolve ("رد فعل-docgen-kindcript-محمل")
} ،
]
} ،
{
الاختبار: /.(stories |story).[tj]sx؟$/ ،
المُحمل: need.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 لإصلاح مشكلات TypeScript ، لكن كان تأثير ofc في السماح لمزيد من أخطاء TypeScript بالمرور دون أن يلاحظها أحد.

يبدو الحد الأدنى من التكوين الحالي ( 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,
        },
    },
];

شكرا لك!