Storybook: Addon-Dokumente: Unterstützung für den Quelldokumentblock Typescript

Danke @enagy27! Hier gibt es zumindest einige Möglichkeiten:

1) source-loader kann typoskriptfreundlicheren Code ausgeben
2) Benutzer kann Typoskript anders konfigurieren (habe dies in unserem Monorepo nicht gesehen)
3) source-loader kann @ts-ignore zur Problemumgehung ausgeben

Ich denke, die dritte Option ist am einfachsten zu beginnen, die erste ist wahrscheinlich langfristig die beste

Großer Cäsars Geist!! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 veröffentlicht, das PR #7831 enthält, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Sie finden diese Vorabversion unter dem @next NPM-Tag.

Schließen dieses Problems. Bitte öffnen Sie wieder, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

@enagy27 habe kein Repro, also wäre es toll, wenn du das ausprobieren könntest und mich wissen lässt, ob es funktioniert

@shilman absolut! Gib es jetzt mal. Dankeschön!

@shilman sieht diese Fehler immer noch auf 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'.

Ergebnisse von 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

Da sich dies auf dem Source Loader befindet, muss das separat installiert werden und wird dann vom Preset übernommen, oder ist eine neue Version des Presets erforderlich?

@enagy27 können Sie sich die geladene Quelle anhand der Anweisungen hier ansehen und sehen, ob die geladene Quelle die Änderung in #7831 enthält? (Ersetzen Sie .mdx durch .tsx und der Rest sollte gelten)

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

@shilman Ich kann den Server nur starten, wenn sourceLoaderOptions: null ist 😞 andernfalls stoppt ein fehlgeschlagener Build das Starten des Servers und ich kann den Quellbrowser nicht überprüfen. Gibt es vielleicht eine Befehlszeilenoption, um den Server beim ersten fehlgeschlagenen Build zu umgehen und trotzdem zu starten?

Huhu!! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 veröffentlicht, das PR #7845 enthält, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Sie finden diese Vorabversion unter dem @next NPM-Tag.

@enagy27 Ihre Änderungen zusammengeführt und freigegeben. Versuche es?

@shilman kein solches Glück 😞 Ich experimentiere vor Ort und as any markiert, aber es sieht so aus, als würde sie sich über die doppelte Variable parameters beschweren, was mich fragen lässt, ob __STORY__ nicht richtig entkommen ist? Aber dann kann ich nicht sehen, wie es für JS und nicht für TS funktionieren würde ... ich bin ratlos

Ich habe auch dieses Problem, habe aber leider nicht viel zusätzlichen Kontext.

Eine andere Lösung hier besteht darin, alle "strengen" Regeln für die Typprüfung in der Datei tsconfig.js zu überschreiben, die das Storybook lädt (entweder die tsconfig Ihres Projekts oder eine .storybook/tsconfig.js (glaube ich)).

Ich denke, dies sind diejenigen, um sicherzustellen, dass sie nicht aktiviert sind:

@libetl Ich weiß, dass du sehr beschäftigt bist, aber es wäre großartig, wenn du dir das mal ansehen könntest.

@JonKrone Wenn Sie dies tun, sehen Sie den Quellcode auf der Registerkarte "Dokumente"? Ich habe diese Änderungen vorgenommen und sehe immer noch keine Quelle 😞

Eine vorübergehende Lösung, wenn Sie awesome-typescript-loader verwenden:

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

Nicht ideal, aber es funktioniert.

@shilman Ist das das, wonach Sie suchen? Zu Ihrer Information, dies würde nicht erstellt werden, ohne TS7005 zu ignorieren (keine implizite).

  // @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 Ich werde es tsconfig.json zu ändern 🤔

Ich habe hier Fehler erhalten, nachdem ich storybook-react-router auf 1.0.6 aktualisiert habe, bei dem ein Problem offen ist: gvaldambrini/storybook-router#42 Ich

"Kein Code verfügbar" in meinen TSX-Geschichten, MDX funktioniert gut, das Ergebnis sieht ähnlich / genau wie die Geschichte von @0b10 aus

  // @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 aktualisiert, da es nur docs: DocsPage

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

Voreinstellungen:

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

Webpack-Konfiguration, möglicherweise nicht benötigt?

    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 enthält "noImplicitAny": true und kein ignoreDiagnostics 😕

Es werden keine Probleme mehr mit rc.4 angezeigt, aber keine Quelle 😞 Obwohl es so aussieht, ist dies auch in #6641 markiert, so dass jetzt, da die Fehler nicht mehr vorhanden sind, dieses Problem möglicherweise ein Duplikat ist

Ich habe einen Workaround gefunden!

• Anstatt sourceLoaderOptions: null , habe ich transpileOnly: true in meinem tsLoaderOptions
• Befolgen Sie die Problemumgehung in #8055, wo es keine parameters Variable der obersten Ebene geben kann
• Aus irgendeinem Grund schlug hier die Verwendung von rechtshändigen Anweisungen wie as 'optionA' | 'optionB' fehl und musste in linkshändige Typdeklarationen umgewandelt werden.

Dies schlägt fehl:

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

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

Das funktioniert:

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

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

Im Nachhinein scheint dies ein verständliches source-loader Problem mit Typinferenz zu sein 🤔 trotzdem hoffe das hilft!

@enagy27 Du @libetl irgendwann in 5.3 wieder online ist und wir einfach source-loader aktualisieren können, damit diese Problemumgehungen nicht benötigt werden. Daumen drücken! 🤞

Hi. Kann jemand ein Beispiel-Repository bereitstellen, in dem Storybook mit React-Typoskript und Dokumenten funktionieren?

@simonhoss das ist eine großartige Idee, ich habe wirklich Mühe, das zum

ich auch 😄

Die TS-Anweisungen weisen Sie auf react-docgen-typescript-loader das besagt, dass addon-info installiert werden soll, aber weiter oben in der Dokumentation heißt es nicht, dass addon-docs ein Ersatz für addon-info ? Es wäre sehr hilfreich, eine funktionierende Einrichtung mit TS oder einige klare Anweisungen an einem Ort speziell für die Einrichtung von addon-docs mit TS zu sehen.

Ich freue mich, einen Beitrag zu leisten und zu helfen, aber Sie müssen zuerst verstehen, wie diese Teile zusammenpassen! 👍

Nachdem die Dokumentation jetzt veröffentlicht wurde, kann ich mir möglicherweise etwas Zeit nehmen, um cra-ts-kitchen-sink zu aktualisieren, um sicherzustellen, dass wir alle auf der gleichen Seite für die Konfiguration sind 🙂 es kann jedoch eine Woche oder so dauern ... vorerst Ich gebe meine Konfiguration an:

.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

Ich kann dies nicht teilen, da es intern in meinem Unternehmen ist, aber es wird in config.js referenziert.

.storybook/tsconfig.json

Diese Datei dient nur dazu, Konfigurationen im Stamm tsconfig.json zu entfernen, die hier im Storybook keinen Sinn machen würden.

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

Hallo @enagy27 - danke dafür. Ich habe das irgendwie mit einer benutzerdefinierten Webpack-Konfiguration zum Laufen gebracht. Die Verwendung der Typoskript-Vorgabe verhindert aus irgendeinem seltsamen Grund, dass ich Assets in Storybook importieren kann, dh - CSS-Dateien.

Ein kleines Problem, mit dem ich konfrontiert bin, ist, dass meine Requisitentabelle keine Typen wie diese ableiten kann:

SomeType['property'] Moment sehe ich any in meiner Tabelle anstelle einer Union, ich frage mich, ob es einen Weg gibt, dies zu umgehen.

Hallo @enagy27. Danke dafür. Ich habe das mit der von Ihnen geteilten Konfiguration zum Laufen gebracht, aber es gibt immer noch ein Problem. Es kann keine Komponentenbeschreibung und Requisitenbeschreibung generieren, wenn ich eine Komponente mit tsx schreibe. aber es funktioniert mit jsx。

Hallo @zerofront. Ich musste genau diesem Kommentarmuster folgen

Komponentenbeschreibung:

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

Prop-Beschreibung:

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

@enagy27 eigentlich war ich dem Kommentarmuster gefolgt, das du in meinem ersten Bild gezeigt hast

@zerofront benötigen Sie einen Typescript-Typ für die Komponente. Sie können stattdessen export const Button: React.FC<BaseButtonProps> = props => {...}

👆 Mein Setup mit TS und docgen funktioniert aus irgendeinem Grund nicht mit Generika, habe hier ein Problem # 8143 erstellt, das erklärt

@zerofront Ich habe genau dein Problem. In den Requisiten-Abschnitten Ihrer Button-Dokumentation druckt Storybook die defaultProps anstelle der BaseButtonProps Schnittstelle. Und ich vermisse auch die Beschreibung. Über Untertitel können Sie sie auf folgende Weise in die Story-Datei einfügen:

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

@zerofront Zusätzlich zu dem, was @enagy27 gesagt hat.
Um mit *.stories.tsx zu arbeiten , müssen Sie etwas wie diese Konfiguration hinzufügen:

.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 benötigen Sie einen Typescript-Typ für die Komponente. Sie können stattdessen export const Button: React.FC<BaseButtonProps> = props => {...}

@zerofront @enagy27 gestern habe ich festgestellt, dass mein Problem (das anscheinend das gleiche wie @zerofront war) genau durch den Rückgabetyp der Funktion verursacht wurde.

Dies wurde für mich behoben:

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

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

Quelle:
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
Und teilweise könnte dieser Hinweis zusammenhängen:
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

Ich hoffe, das kann helfen.

@sergiop @enagy27 danke! Schließlich ist die Requisitentabelle Arbeit.
aber es gibt noch einige Probleme.

Wenn defaultProps kein String-Typ ist, kann es nicht generiert werden.

@zerofront Ich kann bestätigen, dass ich das gleiche
Wenn Sie nach der Ursache suchen möchten, sollten Sie wahrscheinlich versuchen zu verstehen, ob sie mit dem Storybook selbst oder mit react-docgen-typescript-loader .

@zerofront vielleicht ist es besser, ein spezielles Problem zu öffnen. ;-)

Ich hatte Glück, Standard-Requisiten festzulegen, während ich Requisiten destrukturierte. Ziemlich sicher, dass es auch mit Nicht-String-Werten funktioniert.

dh:

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

Ich hatte Glück, Standard-Requisiten festzulegen, während ich Requisiten destrukturierte. Ziemlich sicher, dass es auch mit Nicht-String-Werten funktioniert.

dh:

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

@sami616 Ich verwende die gleichen Standard-Requisiten wie Sie, aber ich sehe keine Standardeinstellungen für Nicht-String, wie @zerofront bereits berichtet hat.

Ignoriere meinen Kommentar, ja ich habe das gleiche Problem.

@sami616 , wie bereits erwähnt, möchte ich einen Fehlerbericht dazu öffnen, aber vorher muss ich ein wenig die Codebasis untersuchen, um zu verstehen, ob die Ursache des Problems storybook oder react-docgen-typescript-loader . Auf diese Weise eröffne ich das Thema zum richtigen Projekt.

@sami616 @sergiop
Ich installiere React-Docgen-Typescript-Loader Version 3.2.1
Ich habe Code in node_modules/react-docgen-typescript-loader/dist/generateDocgenCodeBlock gefunden

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'

Diese Bedingung begrenzt den Typ von defaultProps.

Und in der neuesten Version 3.3.0 response-docgen-typescript-loader unterstützt es string、number、boolean

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 , schön zu wissen. Ich habe auch 3.2.1. Heute morgen aktualisiere ich es auf 3.3.0, um zu sehen, ob das Problem dadurch behoben wird. Vielen Dank.

@zerofront Ich kann bestätigen, dass die Aktualisierung von react-docgen-typescript-loader auf 3.3.0 das Problem löst. Vielen Dank.

Eine vorübergehende Lösung, wenn Sie awesome-typescript-loader verwenden:

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

Nicht ideal, aber es funktioniert.

Ich habe heute gerade von 5.1 auf 5.2.5 aktualisiert und bekomme diesen Fehler, ohne noch Addon-Docs zu installieren. Diese Lösung hat für mich funktioniert, obwohl ich sagen muss, dass mein Warum nicht wirklich klar ist.

Hallo allerseits! Anscheinend hat sich in dieser Ausgabe in letzter Zeit nicht viel getan. Wenn es noch Fragen, Kommentare oder Fehler gibt, können Sie die Diskussion gerne fortsetzen. Leider haben wir nicht die Zeit, auf jedes Problem einzugehen. Wir sind immer offen für Beiträge, also senden Sie uns bitte einen Pull-Request, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Ich erhalte immer noch den in dieser Ausgabe beschriebenen Fehler für die Versionen "@storybook/react": "5.2.6" und "react-docgen-typescript-loader": "3.6.0" . Ich bin mir nicht sicher, ob das relevant ist, aber die einzige Datei, die in den hier referenzierten PRs // @ts-ignore s zu __MODULE_DEPENDENCIES__ hinzugefügt wurde, ist src/server/build.js, während sie in src noch nicht ignoriert wird

@jalooc bitte

@shilman Ich glaube, ich habe dies zuletzt in Beta.6 versucht und es funktionierte ohne die Problemumgehung nicht. Ich versuche es noch einmal mit den neuesten

Ich habe dieses Problem immer noch mit Storybook 5.3. [email protected] und react-docgen-typescript-loader 3.6.0.

Die einzige Möglichkeit, das Problem zu beheben, bestand darin, "noImplicitAny": false in tsconfig.json was ich wirklich nicht tun möchte.

Der Fehler, den ich erhalte, ist dieser:
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Selbst wenn ich meinen Stories einen Typ hinzufüge, wird das Problem nicht vollständig behoben.

Follow-up, ich habe es mit der von @enagy27 erwähnten Option transpileOnly Laufen gebracht. Ich verwende Voreinstellungen anstelle von vollständigen Webpack-Konfigurationen, dies ist derzeit mein presets.js . Keine Änderung im 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,
        },
    },
];

Irgendwelche Updates dazu? Wir versuchen, Storybook-Addons mit TS zu verwenden und kommen auch mit den Workarounds nicht daran vorbei. Weiter erhalten
"Variable '__MODULE_DEPENDENCIES__' hat implizit den Typ 'any[]'."

Habe derzeit versucht, Storybook auf 5.3.0-beta.16 zu aktualisieren und die anderen hier erwähnten Problemumgehungen ausprobiert. Vielen Dank

Ich kann keine Storybook-Add-On-Dokumente erhalten, um die Requisitentabelle mit Typoskript anzuzeigen. Es steht nur "Keine Komponente gefunden".

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
}

Märchenbuch 5.2.8
Addon-Docs 5.2.8
reagieren-docgen-typescript-loader 3.6.0
Babel-Loader 8.0.6
@storybook/source-loader 5.2.8

Auch wenn ich das Component Story Format verwende, findet Storybook die Komponente überhaupt nicht (Leinwand, Dokumente und Menü sind leer), aber wenn ich StoriesOf verwende, werden sie angezeigt.

Als Workaround können Sie die Doc-Generierung auf tsconfig.json richten, wobei strenge Regeln deaktiviert sind. Ich glaube, ich habe es jetzt so gelöst. Kann bei Interesse nächste Woche nochmal nachschauen.

Das sind meine Konfigurationen, könnte helfen.
git es funktioniert komplett.

++ es ist
export const AccordionItem
und ich habe keine webpack.config.js

Für alle anderen, die immer noch Probleme haben, habe ich es endlich geschafft, es zum Laufen zu bringen, nachdem ich den React-Docgen-Typescript-Loader mühsam debuggt habe.

React-docgen-typescript-loader weist __docgeninfo anhand des Ordnernamens zu, nicht des Komponentennamens, daher müssen Sie Ihre Komponente in einem Ordner mit demselben Namen ablegen (Groß-/Kleinschreibung beachten).

|__
  CTALink
    |___index.tsx

Ich konnte das CSF-Format nicht zum Laufen bringen (immer leer), aber wenn Sie die storiesOf Syntax verwenden, müssen Sie die Komponente mit der addParameters Funktion aus dem Storybook einschließen, damit die Requisitentabelle aufgenommen wird .

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

Hallo allerseits! Anscheinend hat sich in dieser Ausgabe in letzter Zeit nicht viel getan. Wenn es noch Fragen, Kommentare oder Fehler gibt, können Sie die Diskussion gerne fortsetzen. Leider haben wir nicht die Zeit, auf jedes Problem einzugehen. Wir sind immer offen für Beiträge, also senden Sie uns bitte einen Pull-Request, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Typescript sollte im Quellblock in 5.3 funktionieren. Schließen.

Ich habe sowohl @storybook/react als auch @storybook/addon-docs auf 5.3.0-rc.4 aktualisiert, bekomme aber weiterhin die Fehlermeldung TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Ich benutze das Preset nicht und bin auch neu bei Webpack, also habe ich wahrscheinlich einige Fehler gemacht.
Hier ist meine webpack.config.js:
```const path = require('path');

module.exports = {
Knoten: {
fs: 'leer',
child_process: 'leer'
},
beschließen: {
Module: [
'node_modules',
],
Erweiterungen: [.ts", ".tsx"],
symbolische Links: wahr
},
Modul: {
Regeln: [
{
test: /.(ts|tsx)$/,
verwenden: [
{
loader: require.resolve('awesome-typescript-loader')
},
{
loader: require.resolve('react-docgen-typescript-loader')
},
]
},
{
test: /.(Geschichten|Geschichte).[tj]sx?$/,
loader: require.resolve('@storybook/source-loader')
}
]
},
Äußeres: {
'Klasse-Transformator': 'Klasse-Transformator'
}
};
```

Yo-ho-ho!! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 veröffentlicht, das PR #9272 enthält, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Sie finden diese Vorabversion unter dem @next NPM-Tag.

@JacopoBonta kannst du die neueste Version 5.3.0-rc.5 ausprobieren?

Hallo @shilman Vielen Dank für die erstaunliche Unterstützung für Dokumente in Kombination mit dem Bilderbuch.
Ich habe auf 5.3.0-rc.5 aktualisiert und erhalte immer noch den Fehler TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Es funktioniert nur, wenn ich ignoreDiagnostics: [7005] zur ts-loader Konfiguration hinzufüge, wie unten gezeigt.

Datei 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 kannst du die neueste Version 5.3.0-rc.5 ausprobieren?

Es tut mir leid, aber das Upgrade auf 5.3.0-rc.5 hat nicht funktioniert.
Ich habe sowohl @storybook/react als auch @storybook/addon-docs aktualisiert, erhalte aber immer den gleichen Fehler.

AcJacopoBonta können Sie Problemumgehung von @ esakal überprüfen ?

@JacopoBonta Ich sehe, dass Sie awesome-typescript-loader . Ich verwende derzeit einen anderen Loader, aber als ich diesen vor einem Monat verwendet habe, habe ich eine ähnliche Problemumgehung durchgeführt. für awesome-typescript-loader sollten Sie Folgendes tun:

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

von hier genommen

Ja es funktioniert. Ich habe diesen Workaround bereits zuvor verwendet, aber ich suchte nach einem Weg ohne ihn.

Wie auch immer, danke für die Hilfe, die ich sehr geschätzt habe und ein frohes neues Jahr 🎉

Danke @esakal deine Lösung ist die beste (für mich) bisher. Früher habe ich transpileOnly: true , um die TypeScript-Probleme zu beheben, aber das hatte den Effekt, dass mehr TypeScript-Fehler unbemerkt durchgelassen wurden.

Meine aktuelle, ziemlich minimale Konfiguration ( presets.js ) sieht so aus:

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

Dankeschön!