如何在 Storybook React App 中嵌入 StencilJS 组件？答案

【问题标题】：How to Embed StencilJS components inside Storybook React App?如何在 Storybook React App 中嵌入 StencilJS 组件？
【发布时间】：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"
  },

工作流程如下：

启动故事书

在组件中进行更改

执行构建命令

执行复制命令

另外，我想自动化开发者体验，但在我先解决了这个问题之后。

有什么我可能做错的想法吗？

【问题讨论】：

您找到解决问题的方法了吗？我正在尝试以类似的方式实现 Stencil dist 内容，但也无法让组件渲染。
正在玩模板和引导程序，需要设置 shadow:false 才能应用样式。如果 CSS 没有为 shadow dom 配置，它将找不到它。

标签： javascript reactjs storybook stenciljs

【解决方案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。它使用旋钮和注释自动生成故事。它也有自定义主题。希望对您有所帮助。

【讨论】：

请提供链接中的基本详细信息，因为链接将来可能会过期。