Storybook: Addon-docs : prise en charge du bloc de doc source Typescript

Merci @enagy27 ! Il y a au moins quelques options ici :

1) source-loader peut produire un code plus convivial
2) l'utilisateur peut configurer le tapuscrit différemment (je n'ai pas vu cela dans notre monorepo)
3) source-loader peut générer @ts-ignore pour contourner le problème

Je pense que la troisième option est la plus simple à démarrer, la première est probablement la meilleure à long terme

Le grand fantôme de César !! Je viens de publier https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.39 contenant le PR # 7831 qui fait référence à ce problème. Mettez à niveau aujourd'hui pour l'essayer !

Vous pouvez trouver cette version préliminaire sur la balise @next NPM.

Clôturer ce problème. Veuillez rouvrir si vous pensez qu'il y a encore plus à faire.

@enagy27 n'a pas de repro, donc ce serait bien si vous pouviez essayer et me faire savoir si cela fonctionne

@shilman absolument ! Donner un coup de feu maintenant. Merci!

@shilman voit toujours ces erreurs sur 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'.

Résultats de 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

Étant donné que cela se trouve sur le chargeur source, cela doit-il être installé séparément et ensuite pris en charge par le préréglage, ou une nouvelle version du préréglage est-elle requise ?

@enagy27 pouvez-vous jeter un œil à la source chargée en utilisant les instructions ici et voir si la source chargée inclut le changement dans #7831 ? (remplacez .mdx par .tsx et le reste devrait s'appliquer)

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

@shilman Je ne peux démarrer le serveur que lorsque sourceLoaderOptions: null est en vigueur 😞 sinon, une construction défaillante interrompt le démarrage du serveur et je ne peux pas inspecter la source dans le navigateur. Existe-t-il peut-être une option de ligne de commande pour contourner et démarrer le serveur quand même lors de la première génération défaillante ?

Oups !! Je viens de publier https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.40 contenant le PR # 7845 qui fait référence à ce problème. Mettez à niveau aujourd'hui pour l'essayer !

Vous pouvez trouver cette version préliminaire sur la balise @next NPM.

@enagy27 Fusionné et publié vos modifications. Essaie?

@shilman pas de chance 😞 J'expérimente localement et je n'arrive pas à comprendre. J'ai même triché et les ai tous marqués comme as any mais on dirait qu'il se plaint alors de la variable en double parameters , ce qui me fait me demander si __STORY__ n'est pas échappé correctement ? Mais alors je ne vois pas comment cela fonctionnerait pour JS et pas TS... Je suis perplexe

Je rencontre également ce problème mais je n'ai malheureusement pas beaucoup de contexte supplémentaire.

Une autre solution ici consiste à remplacer toutes les règles de vérification de type "strictes" dans le fichier tsconfig.js que le livre de contes charge (soit le tsconfig de votre projet, soit un .storybook/tsconfig.js (je pense)).

Je pense que ce sont ceux pour s'assurer qu'ils ne sont pas activés:

@libetl Je sais que vous êtes vraiment occupé mais ce serait génial si vous pouviez jeter un œil à celui-ci.

@JonKrone lorsque vous faites cela, voyez-vous le code source dans l'onglet docs ? J'ai fait ces modifications et je ne vois toujours pas la source 😞

Une solution temporaire si vous utilisez awesome-typescript-loader :

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

Pas idéal, mais ça marche.

@shilman Est-ce ce que vous cherchez ? Pour info, cela ne serait pas construit sans ignorer le TS7005 (aucun implicite).

  // @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 Je vais tsconfig.json 🤔

J'ai eu des erreurs ici après la mise à jour de storybook-react-router vers 1.0.6, qui a un problème ouvert: gvaldambrini/storybook-router#42 Je n'ai pas d'erreurs ici (les erreurs de storybook-router n'étaient probablement pas liées, voir le commentaire ci-dessous )

"Aucun code disponible" sur mes histoires TSX, MDX fonctionne bien, le résultat ressemble/exactement à l' histoire de @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>);

Mise à jour de config.js car c'était juste docs: DocsPage

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

Préconfigurations:

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

Configuration Webpack, peut-être pas nécessaire ?

    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 inclut "noImplicitAny": true et aucun ignoreDiagnostics 😕

Ne plus voir les problèmes avec rc.4 , mais pas de source 😞 Bien qu'il semble que cela soit également marqué dans #6641, alors maintenant que les erreurs ne sont plus présentes, ce problème peut être un doublon

J'ai trouvé une solution de contournement !

• Au lieu d'utiliser sourceLoaderOptions: null , j'ai utilisé transpileOnly: true dans mon tsLoaderOptions
• Suivez la solution de contournement dans #8055, où il ne peut pas y avoir parameters variable de niveau supérieur
• Pour une raison quelconque, l'utilisation d'instructions de droite telles que as 'optionA' | 'optionB' échoué ici et a dû être convertie en déclarations de type gauche.

Cela échoue :

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

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

Cela marche:

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

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

Avec le recul, cela semble être un problème compréhensible de source-loader avec l'inférence de type 🤔 de toute façon, j'espère que cela vous aidera !

@enagy27 Tu @libetl reviendra en ligne à un moment donné dans 5.3, et nous pourrons simplement mettre à niveau source-loader afin que ces solutions de contournement ne soient pas nécessaires. Doigts croisés! ??

Salut. Quelqu'un peut-il fournir un exemple de référentiel où un livre de contes avec un script de réaction et des documents fonctionnent?

@simonhoss c'est une excellente idée, j'ai vraiment du mal à faire fonctionner cela.

moi aussi

Les instructions TS vous indiquent react-docgen-typescript-loader qui dit d'installer addon-info mais plus tôt dans la documentation, n'est-il pas dit que addon-docs remplace addon-info ? Ce serait super utile de voir une configuration fonctionnelle de cela avec TS ou des instructions claires en un seul endroit spécifiquement pour la configuration de addon-docs avec TS.

Heureux de contribuer et d'aider, mais j'ai d'abord besoin de comprendre comment ces pièces s'emboîtent ! ??

Maintenant que la documentation a été publiée, je pourrais peut-être prendre un certain temps pour mettre à jour cra-ts-kitchen-sink pour m'assurer que nous sommes tous sur la même page pour la configuration 🙂 cela peut prendre environ une semaine cependant... pour l'instant Je vais fournir ma config :

.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

Je ne peux pas le partager car il est interne à mon entreprise, mais il est référencé dans config.js .

.storybook/tsconfig.json

Ce fichier sert uniquement à supprimer les configurations dans la racine tsconfig.json qui n'auraient pas de sens ici dans le livre de contes.

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

Salut @enagy27 - merci pour cela. J'ai un peu fait fonctionner cela avec une configuration webpack personnalisée. l'utilisation du préréglage dactylographié pour une raison étrange m'empêche d'importer des actifs dans un livre de contes, c'est-à-dire des fichiers css.

Un petit problème auquel je suis confronté est que ma table d'accessoires n'est pas en mesure de déduire des types comme celui-ci :

SomeType['property'] ce moment je vois any dans ma table au lieu d'un syndicat, je me demande s'il y a un moyen de contourner cela.

Salut, @enagy27. Merci pour cela. Cela fonctionne avec la configuration que vous avez partagée, mais il y a encore des problèmes. Il ne peut pas générer de description de composant et de description d'accessoires lorsque j'écris un composant avec tsx. mais ça marche avec jsx。

Salut @zerofront. je devais suivre exactement ce modèle de commentaire

Description des composants :

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

Description de l'accessoire :

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

@enagy27 en fait, j'avais suivi le modèle de commentaire que vous avez montré dans ma première photo

@zerofront, vous aurez besoin d'un type Typescript pour le composant. Vous pouvez utiliser à la place export const Button: React.FC<BaseButtonProps> = props => {...}

👆 ma configuration avec TS et docgen ne fonctionne pas avec les génériques pour une raison quelconque, a créé un problème ici #8143 qui explique

@zerofront J'ai exactement votre problème. Dans les sections accessoires de vos documents Button, Storybook imprime l'interface defaultProps place de l'interface BaseButtonProps . Et la description me manque aussi. A propos des sous-titres, vous pouvez l'ajouter dans le fichier histoire, de cette manière :

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

@zerofront En plus de ce que @enagy27 a dit.
Afin de travailler avec *.stories.tsx , vous devez ajouter quelque chose comme cette configuration :

.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, vous aurez besoin d'un type Typescript pour le composant. Vous pouvez utiliser à la place export const Button: React.FC<BaseButtonProps> = props => {...}

@zerofront @enagy27 hier, j'ai découvert que mon problème (apparemment le même que @zerofront) était causé exactement par le type de retour sur la fonction.

Cela a corrigé pour moi:

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

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

La source:
https://github.com/strothj/react-docgen-typescript-loader/issues/42#issuecomment -535090697
Et en partie cette note pourrait être liée :
https://github.com/strothj/react-docgen-typescript-loader#react -component-class-import

J'espère que cela peut aider.

@sergiop @enagy27 merci ! finalement, la table des accessoires est un travail.
mais il y a encore quelques problèmes.

Si defaultProps n'est pas de type chaîne, il ne peut pas être généré.

@zerofront Je peux confirmer que j'ai le même problème. Il fait partie de ma liste de tâches à résoudre. ;-)
Si vous voulez rechercher la cause, vous devriez probablement commencer à essayer de comprendre si elle est liée au livre de contes lui-même ou à react-docgen-typescript-loader .

@zerofront c'est peut-être mieux d'ouvrir un numéro dédié. ;-)

J'ai eu de la chance en définissant des accessoires par défaut tout en déstructurant les accessoires. Je suis presque sûr que cela fonctionne également avec des valeurs autres que des chaînes.

c'est à dire:

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

J'ai eu de la chance en définissant des accessoires par défaut tout en déstructurant les accessoires. Je suis presque sûr que cela fonctionne également avec des valeurs autres que des chaînes.

c'est à dire:

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

@ sami616 J'utilise les mêmes accessoires que vous, mais je ne vois pas les valeurs par défaut pour les non-chaînes comme @zerofront déjà signalé.

Ignorez mon commentaire, oui j'ai le même problème.

@sami616 , comme déjà dit, je veux ouvrir un rapport de bogue à ce sujet, mais avant de le faire, je dois enquêter un peu sur la base de code, pour comprendre si la source du problème est storybook ou react-docgen-typescript-loader . De cette façon, j'ouvrirai le problème sur le bon projet.

@sami616 @sergiop
J'installe react-docgen-typescript-loader version 3.2.1
J'ai trouvé du code dans node_modules/react-docgen-typescript-loader/dist/generateDocgenCodeBlock

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

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

cette condition limite le type de defaultProps.

Et dans la dernière version 3.3.0 react-docgen-typescript-loader, il supporte la chaîne nombre booléen

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 , bon à savoir. J'ai aussi 3.2.1. Plus tard ce matin, je le mets à jour vers 3.3.0 pour voir si cela résoudra le problème. Merci.

@zerofront Je peux confirmer que la mise react-docgen-typescript-loader jour de

Une solution temporaire si vous utilisez awesome-typescript-loader :

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

Pas idéal, mais ça marche.

Je viens de mettre à jour de 5.1 à 5.2.5 aujourd'hui et j'ai commencé à obtenir cette erreur, sans encore installer les addon-docs. Cette solution a fonctionné pour moi, même si je dois dire que je ne comprends pas vraiment pourquoi.

Salut à tous! On dirait qu'il n'y a pas eu grand-chose sur ce sujet ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder chaque problème. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront fermés après 30 jours. Merci!

Je reçois toujours l'erreur décrite dans ce numéro pour les versions "@storybook/react": "5.2.6" et "react-docgen-typescript-loader": "3.6.0" . Je ne sais pas si cela est pertinent, mais le seul fichier qui a été ajouté les // @ts-ignore s à __MODULE_DEPENDENCIES__ dans les PR référencés ici est src/server/build.js alors qu'il n'est toujours pas ignoré dans src /client/preview.js .

@jalooc s'il vous plaît vérifier 5.3 bêta. Des tonnes d'améliorations à la table des accessoires.

@shilman Je crois que j'ai essayé ce dernier sur beta.6 et cela ne fonctionnait pas sans la solution de contournement. Je vais réessayer avec le dernier

J'ai toujours ce problème avec le livre de contes 5.3. [email protected] et

La seule façon de résoudre ce problème pour moi était de définir "noImplicitAny": false dans tsconfig.json ce que je ne veux vraiment pas faire.

L'erreur que j'obtiens est celle-ci :
TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Même si j'ajoute un type à mes histoires, cela ne résout pas complètement le problème.

Suivi, je l'ai fait fonctionner en utilisant l'option transpileOnly mentionnée par @enagy27. J'utilise des préréglages au lieu de configurations Webpack complètes, c'est actuellement mon presets.js . Pas de changement dans le 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,
        },
    },
];

Des mises à jour à ce sujet ? Nous essayons d'utiliser des addons de livre de contes avec TS et nous ne pouvons pas surmonter cela même avec les solutions de contournement. Continuer à recevoir
"La variable '__MODULE_DEPENDENCIES__' a implicitement un type 'any[]'."

J'ai actuellement essayé de mettre à jour le livre de contes vers 5.3.0-beta.16 et essayé les autres solutions de contournement mentionnées ici. Merci

Je n'arrive pas à obtenir des addon-docs du livre de contes pour afficher la table des accessoires avec un script dactylographié. Il dit juste "Aucun composant trouvé".

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
}

Livre de contes 5.2.8
Addon-Docs 5.2.8
réagir-docgen-typescript-loader 3.6.0
babel-loader 8.0.6
@storybook/source-loader 5.2.8

De plus, si j'utilise le livre de contes au format Component Story, il ne trouve pas du tout le composant (la toile, les documents et le menu sont vides), mais si j'utilise storiesOf, il les affiche.

Comme solution de contournement, vous pouvez diriger la génération de documents vers tsconfig.json avec des règles strictes désactivées. Je suppose que je l'ai résolu comme ça pour le moment. Peut revérifier la semaine prochaine si quelqu'un est intéressé.

ce sont mes configurations, cela pourrait aider.
git ça marche terminé.

++ c'est
export const AccordionItem
et je n'ai pas de webpack.config.js

Pour tous ceux qui ont encore du mal, j'ai finalement réussi à le faire fonctionner après un débogage douloureux de react-docgen-typescript-loader.

React-docgen-typescript-loader attribue le __docgeninfo utilisant le nom du dossier, pas le nom du composant, vous devez donc placer votre composant dans un dossier du même nom (sensible à la casse).

|__
  CTALink
    |___index.tsx

Je n'ai pas pu faire fonctionner le format CSF (toujours vide), mais lorsque vous utilisez la syntaxe storiesOf , vous devez inclure le composant à l'aide de la fonction addParameters du livre de contes pour que la table des accessoires soit récupérée .

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

Salut à tous! On dirait qu'il n'y a pas eu grand-chose sur ce sujet ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder chaque problème. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront fermés après 30 jours. Merci!

Typescript devrait fonctionner dans le bloc source dans 5.3. Fermeture.

J'ai mis à jour @storybook/react et @storybook/addon-docs vers 5.3.0-rc.4 mais continue de recevoir le message d'erreur TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Je n'utilise pas le préréglage et je suis également nouveau sur le webpack, j'ai donc probablement fait des erreurs.
Voici mon webpack.config.js :
```const chemin = require('chemin');

module.exports = {
nœud : {
fs : 'vide',
child_process : 'vide'
},
résoudre: {
modules: [
'node_modules',
],
extensions : [".ts", ".tsx"],
liens symboliques : vrai
},
module : {
règles: [
{
test : /.(ts|tsx)$/,
utilisation: [
{
chargeur : require.resolve('awesome-typescript-loader')
},
{
chargeur : require.resolve('react-docgen-typescript-loader')
},
]
},
{
test : /.(histoires|histoire).[tj]sx?$/,
chargeur : require.resolve('@storybook/source-loader')
}
]
},
externes : {
'classe-transformateur': 'classe-transformateur'
}
} ;
```

Yo-ho-ho !! Je viens de publier https://github.com/storybookjs/storybook/releases/tag/v5.3.0-rc.5 contenant le PR #9272 qui fait référence à ce problème. Mettez à niveau aujourd'hui pour l'essayer !

Vous pouvez trouver cette version préliminaire sur la balise @next NPM.

@JacopoBonta pouvez-vous essayer la version la plus récente 5.3.0-rc.5 ?

Bonjour @shilman Merci pour le support incroyable pour les documents combinés avec le livre de contes.
J'ai mis à jour vers 5.3.0-rc.5 et j'obtiens toujours l'erreur TS7005: Variable '__MODULE_DEPENDENCIES__' implicitly has an 'any[]' type.

Cela ne fonctionne que si j'ajoute ignoreDiagnostics: [7005] à la configuration ts-loader comme indiqué ci-dessous.

fichier 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 pouvez-vous essayer la version la plus récente 5.3.0-rc.5 ?

Je suis désolé, mais la mise à niveau vers 5.3.0-rc.5 n'a pas fonctionné.
J'ai mis à jour à la fois @storybook/react et @storybook/addon-docs mais j'ai toujours la même erreur.

AcJacopoBonta pouvez-vous @ esakal ?

@JacopoBonta Je vois que vous utilisez awesome-typescript-loader . J'utilise actuellement un autre chargeur, mais lorsque j'ai utilisé celui-ci il y a un mois, j'ai fait une solution de contournement similaire. pour awesome-typescript-loader vous devez procéder comme suit :

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

pris d' ici

Oui cela fonctionne. J'utilisais déjà cette solution de contournement auparavant, mais je cherchais un moyen de m'en passer.

Quoi qu'il en soit, merci pour les aides que j'ai beaucoup appréciées et bonne année 🎉

Merci @esakal, votre solution est la meilleure (pour moi) jusqu'à présent. J'avais l'habitude de définir transpileOnly: true pour résoudre les problèmes de TypeScript, mais cela a eu pour effet de permettre à davantage d'erreurs de TypeScript de passer inaperçues.

Ma configuration actuelle assez minimale ( presets.js ) ressemble à ceci :

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

Merci!