Storybook: Addon-docs: Блок исходной документации, поддержка Typescript

Спасибо @ 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__ ? Но тогда я не понимаю, как это будет работать на JS, а не на TS ... Я в тупике

Я тоже столкнулся с этой проблемой, но, к сожалению, не имею особого дополнительного контекста.

Другое решение здесь - переопределить все «строгие» правила проверки типов в файле tsconfig.js который загружается сборником рассказов (либо tsconfig вашего проекта, либо .storybook/tsconfig.js (я думаю)).

Я думаю, что это те, которые нужно убедиться, что они не включены:

@libetl Я знаю, что ты очень занят, но было бы здорово, если бы ты мог взглянуть на это.

@JonKrone, когда вы это делаете, видите ли вы исходный код на вкладке документов? Я внес эти изменения и до сих пор не вижу исходный код 😞

Временное решение, если вы используете awesome-typescript-loader:

/* 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-Router до 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,
        },
    },
];

Конфигурация Webpack, возможно, не нужна?

    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 вернется в сеть в какой-то момент в source-loader чтобы эти обходные пути не понадобились. Скрещенные пальцы! 🤞

Привет. Может ли кто-нибудь предоставить пример репозитория, в котором работает сборник рассказов с реагирующим машинописным текстом и документами?

@simonhoss, это отличная идея, я действительно изо всех сил пытаюсь заставить ее работать.

я тоже 😄

Инструкции TS указывают вам на react-docgen-typescript-loader котором говорится об установке addon-info но ранее в документации не сказано, что addon-docs является заменой addon-info ? Было бы очень полезно увидеть рабочую настройку этого с TS или несколько четких инструкций в одном месте, специально для настройки addon-docs с TS.

Мы рады внести свой вклад и помочь, но сначала нужно понять, как эти части сочетаются друг с другом! 👍

Теперь, когда была выпущена документация, я, возможно, смогу потратить некоторое время на обновление cra-ts-kitchen -ink, чтобы убедиться, что мы все на одной странице для настройки 🙂 хотя это может занять неделю или около того ... на данный момент Я предоставлю свой конфиг:

.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 , которые не имеют смысла здесь, в сборнике рассказов.

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

Привет @ enagy27 - спасибо за это. У меня вроде как работает с настраиваемой конфигурацией веб-пакета. использование предустановки машинописного текста по какой-то странной причине мешает мне импортировать ресурсы в сборник рассказов, то есть файлы css.

Одна небольшая проблема, с которой я столкнулся, заключается в том, что моя таблица props не может выводить такие типы:

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 вам понадобится тип export const Button: React.FC<BaseButtonProps> = props => {...}

👆 моя установка с TS и docgen по какой-то причине не работает с дженериками, здесь возникла проблема # 8143, которая объясняет

@zerofront У меня именно твоя проблема. В разделах props документов Button Storybook печатает 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 вам понадобится тип 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 спасибо! в конце концов, стол реквизита готов.
но есть еще некоторые проблемы.

Если 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 Я использую те же реквизиты по умолчанию, что и вы, но я не вижу значений по умолчанию для нестроковых, как уже сообщил

Игнорируйте мой комментарий, да, у меня такая же проблема.

@ sami616 , как уже было сказано, я хочу открыть отчет об ошибке, но прежде чем это сделать, мне нужно немного изучить кодовую базу, чтобы понять, является ли источник проблемы storybook или react-docgen-typescript-loader . Таким образом я открою вопрос о правильном проекте.

@ sami616 @sergiop
Я устанавливаю response-docgen-typescript-loader версии 3.2.1
Я нашел код в node_modules / response-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'

это условие ограничивает тип свойства defaultProps.

И в последней версии 3.3.0 response-docgen-typescript-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 решит проблему. Спасибо.

Временное решение, если вы используете awesome-typescript-loader:

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

Не идеально, но работает.

Я только что обновился с 5.1 до 5.2.5 сегодня и начал получать эту ошибку, еще не установив addon-docs. Это решение сработало для меня, хотя я должен сказать, что мне не совсем понятно, почему.

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если остались вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для внесения вклада, поэтому, если вы хотите помочь, отправьте нам запрос на включение. Неактивные вопросы будут закрыты через 30 дней. Спасибо!

Я все еще получаю ошибку, описанную в этой проблеме, для версий "@storybook/react": "5.2.6" и "react-docgen-typescript-loader": "3.6.0" . Не уверен, что это актуально, но единственный файл, который был добавлен // @ts-ignore s в __MODULE_DEPENDENCIES__ в PR, упомянутых здесь, - это src / server / build.js, хотя он все еще не игнорируется в src /client/preview.js .

@jalooc, пожалуйста, ознакомьтесь с бета-версией 5.3. Тонны улучшений в таблице реквизита.

@shilman Мне кажется, я пробовал это в последний раз на beta.6, и он не работал без обходного пути. Я попробую еще раз с последней 😄

У меня все еще возникает эта проблема со сборником рассказов 5.3. [email protected] и

Единственный способ исправить это для меня - установить "noImplicitAny": false в tsconfig.json чего я действительно не хочу делать.

Я получаю следующую ошибку:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Даже если я добавлю шрифт в свои истории, это не решит проблему полностью.

Последующие действия, я получил его, используя параметр transpileOnly упомянутый @ enagy27. Я использую пресеты вместо полных конфигураций веб-пакетов, сейчас это мой 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__' неявно имеет тип 'any []'».

В настоящее время пробовали обновить сборник рассказов до версии 5.3.0-beta.16 и пробовали другие обходные пути, упомянутые здесь. Спасибо

Я не могу получить дополнения к сборнику рассказов, чтобы показать таблицу реквизита с машинописным текстом. Он просто говорит: «Компонент не найден».

addons.js

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

presets.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
Аддон-Документы 5.2.8
реагировать docgen-машинописный загрузчик 3.6.0
Вавилон-загрузчик 8.0.6
@ storybook / source-loader 5.2.8

Кроме того, если я использую Component Story Format, сборник рассказов вообще не находит компонент (холст, документы и меню пусты), но если я использую storiesOf, он отображает их.

В качестве обходного пути вы можете указать создание документации для tsconfig.json с отключенными строгими правилами. Думаю, я решил это вот так пока. Могу перепроверить на следующей неделе, если кому интересно.

это мои конфигурации, может помочь.
git он работает полностью.

++ это
экспорт const AccordionItem
и у меня нет webpack.config.js

Для всех, кто все еще борется, мне, наконец, удалось заставить его работать после некоторой болезненной отладки response-docgen-typescript-loader.

React-docgen-typescript-loader назначает __docgeninfo используя имя папки, а не имя компонента, поэтому вы должны поместить свой компонент в папку с тем же именем (с учетом регистра).

|__
  CTALink
    |___index.tsx

Мне не удалось заставить работать формат CSF (всегда пустой), но при использовании синтаксиса storiesOf вы должны включить компонент с помощью функции addParameters из сборника рассказов, чтобы можно было подобрать таблицу props .

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, поэтому, вероятно, я сделал некоторые ошибки.
Вот мой webpack.config.js:
`` `` константный путь = требуемый ('путь');

module.exports = {
узел: {
fs: 'пустой',
child_process: 'пустой'
},
решать: {
модули: [
'node_modules',
],
расширения: [".ts", ".tsx"],
символические ссылки: правда
},
модуль: {
правила: [
{
тест: /.(ts|tsx)$/,
использовать: [
{
загрузчик: require.resolve ('awesome-typescript-loader')
},
{
загрузчик: require.resolve ('response-docgen-typescript-loader')
},
]
},
{
test: /.(stories|story).[tjptingsx?$/,
загрузчик: require.resolve ('@ storybook / source-loader')
}
]
},
externals: {
'класс-трансформер': 'класс-трансформер'
}
};
`` ''

Йо-хо-хо !! Я только что выпустил 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, но это из-за того, что позволяло большему количеству ошибок 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,
        },
    },
];

Спасибо!