如何在 Storybook React App 中嵌入 StencilJS 组件?
Posted
技术标签:
【中文标题】如何在 Storybook React App 中嵌入 StencilJS 组件?【英文标题】:How to Embed StencilJS components inside Storybook React App? 【发布时间】:2018-09-03 20:12:08 【问题描述】:我正在尝试将Stencil 和Storybook 集成到同一个项目中。我一直在关注 this set up guide 和 this one 但是其中一个步骤是将组件库发布到 NPM,这不是我想要的。
我有这个repo,我已经配置了组件库(src
文件夹)以及这些组件的审阅者和 Storybook,它位于 storybook
文件夹中。
问题是,当我使用 Stencil 编译组件并在 Storybook 应用程序中复制 dist
文件夹并导入组件时,没有任何渲染。使用custom head tags 调整配置我能够正确导入它,但是没有应用任何样式。
当我打开网络面板时,导入组件时出现一些错误:
因此该组件存在于 DOM 中,但可见性设置为隐藏,我认为它在出现错误时会这样做。
这是组件au-button
:
import Component from '@stencil/core';
@Component(
tag: 'au-button',
styleUrl: 'button.css',
shadow: true
)
export class Button
render()
return (
<button class="test">Hello</button>
);
这是我的组件的故事:
import React from 'react';
import storiesOf from '@storybook/react';
import '../components/components.js'
storiesOf('Button', module)
.add('with text', () => <au-button></au-button>)
这些是 Storybook 应用程序中的脚本:
"scripts":
"storybook": "start-storybook -p 9009",
"build-storybook": "build-storybook",
"copy": "cp -R ./../dist/* components"
,
工作流程如下:
启动故事书 在组件中进行更改 执行构建命令 执行复制命令
另外,我想自动化开发者体验,但在我先解决了这个问题之后。
有什么我可能做错的想法吗?
【问题讨论】:
您找到解决问题的方法了吗?我正在尝试以类似的方式实现 Stencildist
内容,但也无法让组件渲染。
正在玩模板和引导程序,需要设置 shadow:false
才能应用样式。如果 CSS 没有为 shadow dom 配置,它将找不到它。
【参考方案1】:
我一直在关注这个设置指南,但是其中一个步骤是将组件库发布到 NPM,这不是我想要的。
我对这些指南的解读是,他们将“发布到 NPM”作为一种将文件放在已知 URL 上的方式,这将最容易进行部署。
如果不这样做,您将需要制定不同的部署策略。您将如何获得构建产品 - dist
目录和 static
文件 - 发布以便您的 html 能够在已知 URL 上引用它?通过选择偏离指南,这就是您必须手动解决的问题。
不是无法克服的问题,但没有通用的解决方案。您选择(出于您自己的原因)拒绝操作指南提供的解决方案,这意味着您接受“我知道我想要什么”的外衣:-)
【讨论】:
【参考方案2】:我正在使用@storybook/polymer
,它对我非常有效。
按照你的例子:
import Component from '@stencil/core';
@Component(
tag: 'au-button',
styleUrl: 'button.css',
shadow: true
)
export class Button
render()
return (
<button class="test">Hello</button>
);
故事会是:
import storiesOf from '@storybook/polymer';
storiesOf('Button', module)
.add('with text', () => <au-button></au-button>)
package.json
中的脚本:
"scripts":
"storybook": "start-storybook -p 9001 -c .storybook -s www"
,
故事书配置文件:
import configure, addDecorator from '@storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories()
req.keys().forEach((filename) => req(filename))
configure(loadStories, module);
和故事书preview-head.html
你必须在正文中添加以下内容:
<body>
<div id="root"></div>
<div id="error-message"></div>
<div id="error-stack"></div>
</body>
【讨论】:
【参考方案3】:可以在 repo 中找到此示例 https://github.com/shanmugapriyaEK/stencil-storybook。它使用旋钮和注释自动生成故事。它也有自定义主题。希望对您有所帮助。
【讨论】:
请提供链接中的基本详细信息,因为链接将来可能会过期。以上是关于如何在 Storybook React App 中嵌入 StencilJS 组件?的主要内容,如果未能解决你的问题,请参考以下文章
React:如何将 Storybook .stories 放在每个组件的目录中?
如何导出在 storybook 中创建的 React Native 组件以便在实际应用中使用?
React Context 和 Storybook:在组件故事中更改 React Context 的值
如何在生产中为 Docs 插件的 React Storybook 启用 prop-types