我如何制作 Storybook 运行 React 和 Svelte

Question

我想为 React 和 Svelte 组件写故事。我已经有一些 React 组件，并且正在尝试安装 Svelte。我最接近的尝试可以运行 React 或 Svelte，具体取决于我是否注释掉我的 React 配置。如果我不注释掉它，当我在故事书中查看我的 Svelte 组件时会收到此消息：

Error: Objects are not valid as a React child (found: object with keys {Component}). If you meant to render a collection of children, use an array instead.
    in unboundStoryFn
    in ErrorBoundary
    (further stack trace)

这里指的是我的故事stories/test.svelte-stories.js:

import { storiesOf } from '@storybook/svelte';
import TestSvelteComponent from '../src/testComponentGroup/TestSvelteComponent.svelte';

storiesOf('TestSvelteComponent', module)
  .add('Svelte Test', () => ({
    Component: TestSvelteComponent
  }));

我的配置如下：

.storybook/config.js:

import './config.react'; // If I comment out this line, I can make the svelte component work in storybook, but of course my react stories won't appear.
import './config.svelte';

.storybook/config.react.js:

import { configure } from '@storybook/react';

const req = require.context('../stories', true, /\.react-stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

.storybook/config.svelte.js:

import { configure } from '@storybook/svelte';

const req = require.context('../stories', true, /\.svelte-stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

.storybook/webpack.config.js:

module.exports = async ({ config, mode }) => {
  let j;
  // Find svelteloader from the webpack config
  const svelteloader = config.module.rules.find((r, i) => {
      if (r.loader && r.loader.includes('svelte-loader')) {
          j = i;
          return true;
      }
  });

  // safely inject preprocess into the config
  config.module.rules[j] = {
      ...svelteloader,
      options: {
          ...svelteloader.options,
      }
  }

  // return the overridden config
  return config;
}

src/testComponentGroup/TestSvelteComponent.svelte:

<h1>
    Hello
</h1>

它似乎试图通过 Svelte 测试文件解析 JSX，但如果我同时导入 React 和 Svelte 配置，我仍然可以看到 React 组件正常运行。

Answer 1

请参阅 github 上的讨论：https://github.com/storybookjs/storybook/issues/3889

现在不可能，计划在 v7.0 中实现现在官方的说法是创建两套配置（preview和manager），实例化两个独立的storybook，然后用composition将两个storybookassemble合二为一

我如何制作 Storybook 运行 React 和 Svelte

How do I make Storybook run both React AND Svelte

reactjs

svelte

storybook