在Storybook Composition中,对refs的处理方式改为原谅式处理,而不是在构建时分配类型,这使得stories.json变得必需,

9rbhqvlz  于 3个月前  发布在  其他
关注(0)|答案(5)|浏览(41)

我们正在为多个框架(React、Angular、Vue)在一个mono-repo中构建UI组件库。每个变体都有自己的storybook,作为静态站点发布,然后它们在单个Web服务器上提供服务。
我们遇到的问题是,Storybook在构建时检查引用
storybook/lib/api/src/modules/refs.ts
第137行
| | // ref's type starts as either 'unknown' or 'server-checked' |
,但在这种情况下,引用是相对URL,无法在构建时解析。这导致引用被分配为“未知”类型(Chromatic中隐含的“私有”storybook?),并且需要运行时的故事。json文件。
目前我们正在使用一个管理webpack配置自定义来解决这个问题。

描述你希望的解决方案

我认为Composition更加宽容会是一个不错的解决方案

  1. 尝试stories.json
  2. 尝试index.html(静态站点)
  3. 指示引用不可访问
    文档关于假设的部分可能需要更清晰一些;例如,引用是一个可访问的站点(CHP 0),或者提供故事。json(CHP 1)。

描述你考虑过的替代方案

我的理解是,Composition是创建具有多个框架的storybook的推荐方法,我认为这是一个合理的选择。在这个特定的场景中,我们不需要不同的站点,而且一个可以打包多个storybook到单个静态站点的构建将更直接地满足需求。

zqry0prt

zqry0prt1#

我遇到了同样的问题。我们将多个带有相对URL的故事书打包到一个Docker容器中,并通过相对URL引用它们,当然在构建时这些相对URL是不可用的。

这在6.0.19版本中运行良好,但现在在6.1.14版本中失败了。当比较这两个版本创建的构建输出时,我在6.0.19版本中得到的是type: "server-checked",而在6.1.14版本中得到的是type: "unknown"。我相信之前错误地返回了"server-checked",这个问题在9ed3786版本中已经修复了。

这是由这个bug修复引入的回归,应该像@tingzuge-dio建议的那样修复。

对于遇到同样问题的人,我们在我们的storybook main.js中使用string-replace-loader来解决这个问题:

managerWebpack: (config) => {
  config.module.rules = [
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      use: {
        loader: 'string-replace-loader',
        options: {
          search: /"type": "unknown"/g,
          replace: () => '"type": "server-checked"',
        }
      }
    },
    ...config.module.rules
  ]
  return config;
},
55ooxyrt

55ooxyrt2#

我们正在使用另一个解决方法,这可能会在运行时为您提供更多的灵活性(以牺牲稍微hacky的方式为代价)。
.storybook/manager.js 中使用以下内容:

import { addons } from '@storybook/addons';

addons.setConfig({
  refs: {
    "uniqueRefKey": {
      "id": "uniqueRefKey",
      "title": "Stories (remote)",
      "url": `${document.location.protocol}//${document.location.hostname}`,
      "type": "server-checked"
    }
  }
});

var originalSetConfig = addons.setConfig.bind(addons);
addons.setConfig = (values) => {
        if (values.refs && !values.refs.devremote) delete values.refs;
        originalSetConfig(values)
}

在这里需要 originalSetConfig 的解决方法,因为故事书默认的 setConfigrefs 设置为 main.js 中使用的任何内容(否则为空哈希),这发生在 manager.js 运行之后,并对此进行了清理。
可能有一种比故事书内部 setConfig 更早设置配置的方法,但这对我们有效,并且从那时起正确地使用了 stories.json。
从经验上看,似乎您还需要至少一个静态故事,否则故事书将根本不尝试启动引用。

yftpprvb

yftpprvb3#

谢谢你@tstehr,你的解决方案对我也有用。

r1zk6ea1

r1zk6ea14#

出于某种原因,一开始使用addons.setConfig的hack对我有效,但后来停止工作。我的团队中没有人能够使用这种hack使composition与本地storybook一起工作。
如果可以在storybook内部修复这个问题,那就太完美了。

f87krz0w

f87krz0w5#

出于某种原因,一开始使用addons.setConfig的hack对我有效,但后来停止工作。我的团队中没有人能够使用这种hack使composition与本地storybook一起工作。
如果可以在storybook内部修复这个问题,那就太好了。
看起来这是由于宿主storybook的启动过程比注入的storybook早一些,在注入的storybook构建并开始提供服务之前就开始了。

相关问题