复制到#1870 和#3423。 让我们在那里继续讨论

为 Current 模板和 SB 5 创建新的 Starter build

@Edd-Strickland 想要在 stencl 支持版本上工作 🎉

我已经将带有模板的聚合物启动器升级到最新版本的 SB 现在需要一些帮助来去除聚合物并添加模板编译器

你好，

@Edd-Strickland 仅供参考，我已经在 Storybook 中实现了 Stencil，就像你在启动器中所做的一样，在这个项目中： https :

我使用了 Storybook 的 HTML starter。

现在有了 Storybook & Stencil，我只需要：

• 添加指向 Stencil 生成的每个根 JavaScript 文件的自定义标头
• 在 Storybook 中添加由 Stencil 生成的静态文件

我认为的主要问题是 Storybook 使用 Webpack 来处理导入故事中的 JavaScript 文件。 理想的工作流程是只导入 Web Component 的 JS 文件。

是的，这是以前所做的，但使用聚合物版本，但这意味着通过导入为纯静态 W/C 实现，您每次都需要更新到您的故事中，这感觉受到限制。

大家好，我创建了一个可以安装在模板component类型项目上的包装器。 希望能帮助到你。 https://github.com/nisheed2440/stencil-storybook-wrapper

看起来真的不错，我会在星期一测试。 干得好:)

这会成为 Storybook 的官方部分吗？ 我迫切需要这个！

@otw 我们正在努力，你能帮助我们吗？

@ndelangen我很乐意测试并提供反馈/错误报告。

这是否适用于 LitElement（以及一般的 Web 组件）或仅适用于 Stencil？

@nisheed2440你的包装看起来很有希望，我很快就会测试这个！ 但是如果 Storybook 记录了“本机”集成可能会很棒👌

@nisheed2440我一直很忙（对不起大家）但今天有一个很小的窗口来测试本地的一个非常普通的版本，它真的很好。 效果很好。

下周将花一些时间尝试将其合并到现有项目中，以了解这对现有模板用户/项目有何作用。

我今天早上已经测试过了，效果也很好！ GJ它真的很容易设置。 我已经安装并测试了一些插件：

import '@storybook/addon-backgrounds/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';

一切正常，只是发现插件旋钮有一个问题https://github.com/storybooks/storybook/issues/5017但是有一个解决方法，我认为这应该很快得到解决。

在过去的 2 周里，我一直在玩 StencilJS 和 Storybook，并做了一个直播来介绍我的解决方案。 我觉得有更好的方法，但我能够获得 HMR，并且大多数插件都可以正常工作。 希望你们有关于如何改进或从分发模板包导入加载器的任何反馈。

https://www.youtube.com/watch?v=XwHtPw3izLE

这是回购！ ^_^
https://github.com/MadnessLabs/enjin-components

@nisheed2440您好，我使用的方法与您的方法非常相似，并且一切正常，
当我跑步时，它确实发现了我的所有故事，但所有屏幕截图都是空的。 尝试在 chromium 服务器上渲染组件屏幕截图时，它可能缺少模板

@nisheed2440 非常感谢您做出如此巨大的努力。 希望这能让这里的团队朝着正确的方向领先一步。 Stencil 和 Storybooks 是彼此的理想选择。

嗨，大家好！ 最近这个问题似乎没有太多进展。 如果还有问题、意见或错误，请随时继续讨论。 不幸的是，我们没有时间处理每一个问题。 我们始终对贡献持开放态度，因此如果您愿意提供帮助，请向我们发送请求请求。 非活动问题将在 30 天后关闭。 谢谢！

有人想捡这个吗？

我的团队正在为我们的通用组件库使用 StencilJS + Storybook，我很乐意做出贡献。 也许我们中的一些人可以让这件事重回正轨......

似乎有很多兴趣，例如https://twitter.com/dboskovic/status/1120336958008348672

一个简单的胜利是发布一个@storybook/preset-stencil包，它将@popcorn245的配置打包到一个故事书预设中。 我仍然需要为此完成文档，但我将它用于即将发布的Storybook Docs版本，它很简单，而且大多数 SB 配置在未来将如何工作。

我很乐意指导任何想要拿起它的人。

嘿@shilman ，让很多人兴奋地接受这个并使用 Storybook 实施 Stencil。 该线程有一些我发现的好东西，但是还有更多的小错误，例如必须返回元素字符串才能使用旋钮。

一个更好的实现将搭载 Stencil 编译器并允许像 React 组件一样使用 JSX，但那是 MHO。

此外，Stencil One 即将推出一些巨大的变化，因此最好在此更新日志上放置窥视者，以确保从事此工作的人知道正在进行的工作。

https://github.com/ionic-team/stencil/blob/core-refactor/BREAKING_CHANGES.md

这个帖子对我很有帮助，尤其是@popcorn245 的配置。 我个人使用的是@stencil/state-tunnel ，这破坏了该配置。 幸运的是，我能够通过运行以下命令使其与一些小的 ~hacks~ 调整一起工作：

npm i -D [email protected]

并将其添加到.storybook/webpack.config.js ：

const { existsSync, readdirSync } = require('fs');
const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = ({ config }) => {
  // 1. Transpile <strong i="11">@stencil</strong> modules with Babel
  const babelLoader = config.module.rules.find(
    ({ use }) => use && use[0].loader === 'babel-loader'
  );
  babelLoader.exclude = [/node_modules\/(?!\@stencil).*/];
  if (babelLoader.use[0].options) {
    babelLoader.use[0].options.plugins = ['@babel/plugin-syntax-dynamic-import'];
  }

  // 2. Load JS & CSS from our components
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.js'));
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.css'));

  const components = resolve(__dirname, '..', 'dist', 'collection', 'components');
  readdirSync(components).map(file => {
    jsFilePath = resolve(components, file, `${file}.js`);
    try {
      if (existsSync(jsFilePath)) config.entry.push(jsFilePath);
    } catch (err) {
      console.error(err);
    }

    cssFilePath = resolve(components, file, `${file}.css`);
    try {
      if (existsSync(cssFilePath)) config.entry.push(cssFilePath);
    } catch (err) {
      console.error(err);
    }
  });

  // 3. Fix dynamic imports for Storybook
  // IMPORTANT: webpack must be at 4.28 due to a bug. See here: https://github.com/webpack/webpack/issues/8656
  config.plugins.push(
    new CopyPlugin([
      {
        from: resolve(__dirname, '..', 'dist'),
        to: resolve(__dirname, '..', 'node_modules', '<strong i="12">@storybook</strong>', 'core', 'dist', 'public'),
      },
    ])
  );

  return config;
};

也开始尝试这个，并且（正如在其他地方提到的）使用concurrently似乎对我来说工作得很好（现在）。 我创建了一个快速入门项目，其中包含使用模板和故事书启动和运行所需的一切。 已经在使用最新的模板版本。

在这里查看： stencil-storybook-starter

@fvaldes33不错！ 加了星。 我实际上刚刚更新到 Stencil One 测试版，我的配置看起来很相似——我基本上可以完全使用股票 webpack 设置。

对我来说唯一的区别是使用stencil build --watch （prod，而不是 dev），因为构建时间非常快，而且在 Stencil 中使用 prod 版本更容易（尤其是使用全局样式和其他导入）。

@fvaldes33你怎么能像这样在你的 preview-head.html 中引用 build/components.js ？ 我必须提供完整路径，例如http://localhost :3333/build/components.js。 但我不想这样做。

（我没有使用你的 starter，但我使用的是带有全新 storybook/html 安装的模板组件 starter）

编辑：
意识到我是在端口 6006 上而不是在 www 文件夹中启动故事书。 问题解决了！

看起来我们很多人都有类似的解决方案（包括我 https://github.com/jagreehal/stencil-boilerplate），但是当我编辑 Stencil 组件时，我真的很喜欢热/实时更新。 目前我必须手动刷新浏览器以重新加载 Storybook。

是否有完成此要求的项目符号列表？ 如果我知道需要建造什么，我很乐意参与。

目前的状态是什么？ 我们能做出贡献吗？ 我很想看到这个！

我建议在上面贡献一个预设。

• 预设记录在此处： https :
• 这里有一个社区预设的回购： https :

如果有人想根据上述模式组合一个预设，我很乐意在 Storybook 方面提供帮助。 我不熟悉 Stencil 方面。

我刚刚将我的项目发布给任何想要它的人。 以下是功能：

• 自动生成故事
  
  
  
  • 组件上所有@Props自动旋钮生成
  
  
  • 能够自定义每个道具使用哪些旋钮（尽管代码在猜测字符串、数字、布尔值、对象、日期和颜色方面做得很好）。
  
  
  • 能够定义在单个页面上呈现的多个状态，每个状态都有一个标题、描述和可复制的代码片段（一种轻量级的章节实现）
  
  
  • 为每个组件定义注释的能力（通常你想要生成的自述文件）
  
  
• 实时重建/重新加载模板组件（它仍然有点不稳定 - 有时你必须刷新浏览器）
• 带有视口插件

让我知道你的想法： https :

@DesignByOnyx这看起来很棒。 在推特上提及此内容并提及@storybookjs ，我将从故事书帐户中转发。 如果你想写一篇关于它的文章，我很乐意和你一起宣传它。 我认为这里有相当大的需求。

了不起的工作

好的，我发了推文（我不怎么发推文）。 此外，我没有博客：/，但如果有人想发布它，我很高兴将其放在一起。

虽然该项目有效，但我匆忙地将它组合在一起，并没有真正使它易于定制。 那里的一些代码真的很脆弱，因为我必须加载和合并多个文件才能呈现每个单独的组件。 我希望在我花时间使这个更易消耗之前得到一些反馈。

我很想知道预设会是什么样子。 最大的好处是没有反应的 JSX 预设。 这将使在 storybook-html 种类之上的渲染和模板生成更容易一些，并且它与模板没有太大关系。 还需要更新几个插件以使其可用，我不确定我是协调这项工作的最佳人选。 无论哪种方式，让我知道我能做些什么来帮助。

@DesignByOnyx你有机会加入我们的 Discord 吗？ https://discordapp.com/invite/UUt2PJb

我很想在 Storybook 博客上讨论更多关于将这项工作发布到那里以及在模板社区中进行推广的信息。

我一直在为 Stencil 使用@storybook/html并且这种体验几乎“有效”。 您基本上执行以下操作：

1. 使用concurrently启动 Storybook 服务器和stencil build --watch “并行”
2. 用-s dist标志开始storybook ，这样你的 Stencil dist就可以作为静态文件使用了。

3. 配置.storybook/preview-head.html以包含一个脚本标签，如：

   <script type="module" src="/$PACKAGE_NAME/$PACKAGE_NAME.esm.js"></script>
   <script nomodule="" src="/$PACKAGE_NAME/$PACKAGE_NAME.js"></script>
   

而且……就是这样！ 开箱即用的html支持适用于您所有的 Web 组件需求。

我希望看到的是@storybook/stencil ，它在故事创作方面与html包具有相同的体验（和代码），但是

1. 抽象运行 Stencil 构建过程作为 Storybook 的一部分，因此不需要配置concurrently
2. 为您添加那些script标签
3. 当您的 Stencil 组件重新构建时连接自动刷新

对这样的事情有兴趣吗？ 我正在通过 Stencil 和 Storybook 出售我的公司，并且假设获得了牵引力，我将有“工作时间”来使故事（请原谅双关语）围绕 Storybook + Stencil 一起玩变得非常好。

@DesignByOnyx所做的工作确实很棒，但是您必须使用该套件_启动_您的 Stencil 组件，而忽略 Stencil 的“正常”文档。 如果 Storybook 可以提供一个可以叠加在“普通”Stencil 入门套件之上的包，那么您可以轻松地将 Storybook 配置添加到现有的一组 Stencil 组件中。

感谢@alexlafroscia 的精彩总结。 我认为你的提议很有道理。 当 Stencil 重建时 HMR 不会自动启动吗？ 如果是这样，知道为什么不吗？

@igor-dv 是否可以在预设中添加到preview-head.html ？

@Hypnosphi也许这是您的多框架工作的一个有趣示例。 在这种情况下（显然）不需要装饰器，但需要整个编译器。

@alexlafroscia在你的案例中，故事的例子是怎样的？

在我工作的公司，我们一直在使用 Storybook HTML 和 StencilJS 包。 我很乐意做出贡献！

@alexlafroscia非常棒的想法，确实能够完全支持此编译器会很好。 这里有一些其他的想法：

• 使用 StencilJS JSX 功能（目前基于 Preact）以更易于维护的方式编写故事。 使用普通的旧 JS 甚至模板文字可能很麻烦......
• 有一个用于 Web 组件的Smart Knobs 插件。 @DesignByOnyx 为此提供了很好的基础。

本文介绍了 StencilJS 中正在进行的路线图： 2019 年秋季模板路线图。 尤其：

公共编译器 API

我们还关注的另一个领域是确保编译器可以在浏览器中工作并被其他工具使用。 我们已经与一些很棒的团队合作，例如 Stackblitz、CodeSandbox 和 WebComponents.dev。 在最低级别，编译器已经可以在没有运行在 NodeJS 环境之上的情况下工作，因此从技术上讲，这不是主要的重构，但更多的是暴露正确的 API。

我们还看到了许多需要改进的地方，以确保编译器易于被其他 NodeJS 工具使用，包括 Rollup、Parcel、WebPack 和 Bazel。 如果您是任何工具的维护者，无论是在线工具还是 NodeJS 环境，并且您希望实现 Stencil 编译器，请随时与我们联系，我们将很乐意为您提供帮助！

可能有用！

当 Stencil 重建时 HMR 不会自动启动吗？ 如果是这样，知道为什么不吗？

@shilman它没有启动，因为在我的设置中，Storybook 和 Stencil 之间没有“真正的”连接。 它只是一个简单的<script>标签，指向构建的资产。

在你的案例中，故事的例子是什么样的？

@Hypnosphi他们看起来像这样（当你npm init stencil时，Stencil 在他们创建的初始包中生成的默认my-component的故事

import { document, console } from 'global';
import { storiesOf } from '@storybook/html';

storiesOf('My Component', module)
  .add('without a middle name', () => `
    <my-component
      first="Alex"
      last="LaFroscia"
    ></my-component>
  `)
  .add('with a middle name', () => `
    <my-component
      first="Alex"
      middle="Robert"
      last="LaFroscia"
    ></my-component>
  `);

使用 StencilJS JSX 功能（目前基于 Preact）以更易于维护的方式编写故事。 使用普通的旧 JS 甚至模板文字可能很麻烦......

@darondel我完全同意关于在 Story 创作文件中没有 JSX 的开发人员体验的担忧。 我过去使用过这种方法，在@storybook/html可用之前，并使用了 React 体验，这很好。

想让事情与“默认” html体验接近的部分原因是，故事可以作为从 HTML 角度实际使用它们的文档——否则它们会与 Preact 之类的东西相关联，至少在我的组织中，没有在其他任何地方使用（我们主要是 Ember.js 商店）。

你提到模板标签不会是一个很好的体验，但我认为像htm这样的东西可能是一个不错的选择。 它还使构建过程保持良好和简单，因为没有必需的构建步骤，但可能更容易与 Knobs 之类的东西进行交互。

我还认为尝试与即将推出的DocsPage 之类的东西集成可能会很有趣！ 我敢打赌， @DesignByOnyx已经完成的一些工作在这里可能会有用，因此有一种途径可以读取 Stencil 组件的“元数据”以自动生成文档信息。 可能不是“v1”问题，但是对于“v1.1”来说真的很酷！ 我真的很喜欢你制作类似自动旋钮插件的想法，那真的很方便！

随着今天与 Storybook 5.2 一起发布的 DocsPages，我做了一些研究，看看是否有可能从 Stencil 中获取有关道具等的信息并渲染到 Storybook 中。 我认为这应该是可能的，但绝对强调了为使用 Storybook 和 Stencil 定制的插件或预设来容纳一堆所需的“胶水”是多么有用。

这周我要多搞一些事情，看看我能不能把一些东西放在一起。

@alexlafroscia希望标准化不同框架如何传达这些数据。 从 Jetbrains (web_types？Cc @elevatebart ) 看到一些有趣的东西， @atanasster也在这方面做工作，用于在 JSON 文件中缓存 prop 类型以提高性能。 我认为我们应该在 6.0 中统一这一切

我不熟悉 Jetbrains 的工作——我必须检查一下！ 如果您有任何有助于查看的具体信息，我很乐意您能按我的方式发送！

就 Stencil 而言，我认为“最好的选择”是让 Stencil 构建过程将JSON 文档输出到 Stencil Storybook 插件众所周知的位置或可配置的位置。 该对象包含所有关于 props 预期的信息，发出的事件，甚至每个组件的readme文件的内容（没有自动生成的 props 文档）。 我认为我们可以构建一个非常引人入胜的故事，用来自该 JSON 文件的信息填充 Storybook DocsPage。

{
  "timestamp": "2019-09-18T14:30:38",
  "compiler": {
    "name": "@stencil/core",
    "version": "1.3.2",
    "typescriptVersion": "3.5.3"
  },
  "components": [
    {
      "tag": "fluid-banner",
      "encapsulation": "shadow",
      "readme": "# fluid-banner\n\nThis is the contents of the README!\n",
      "docs": "This is the contents of the README!",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    },
    {
      "tag": "fluid-button",
      "encapsulation": "shadow",
      "readme": "# fluid-button\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "destructive",
          "type": "boolean",
          "mutable": false,
          "attr": "destructive",
          "reflectToAttr": false,
          "docs": "Whether to display in the `destructive` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "Whether the button should be treated as `disabled`",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "plain",
          "type": "boolean",
          "mutable": false,
          "attr": "plain",
          "reflectToAttr": false,
          "docs": "Whether to display in the `plain` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "primary",
          "type": "boolean",
          "mutable": false,
          "attr": "primary",
          "reflectToAttr": false,
          "docs": "Whether to display in the `primary` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"large\" | \"medium\" | \"small\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The size to display the button",
          "docsTags": [],
          "default": "\"medium\"",
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    }
  ]
}

这是一种黑客攻击（我将 JSON 输出写入dist/output.json ，然后使用fetch来获取文件）但是我能够通过覆盖来获得 Storybook 组件的 DocsPage 渲染DocsPage组件可以使用的插槽道具。

Props 表并不完美，但相当不错； Stencil 输出提供了表期望的所有道具，然后是一些。 组件的readme.md中的任何内容都将呈现在文件的顶部。

import React, { useContext, useEffect, useState } from "react";
import { DocsPage, DocsContext } from "@storybook/addon-docs/blocks";

export const StorybookDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return null;
  }

  const component = payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );

  // Empty because we will use the whole component README
  const titleSlot = () => "";
  const subtitleSlot = () => "";

  const descriptionSlot = () => component.readme;
  const propsSlot = () => ({
    rows: component.props.map(prop => ({
      name: prop.name,
      type: prop.type,
      description: prop.docs,
      required: prop.required,
      defaultValue: prop.default
    }))
  });

  return React.createElement(
    DocsPage,
    { titleSlot, subtitleSlot, descriptionSlot, propsSlot },
    null
  );
};

更新：更进一步，我定义了一个完整的自定义DocsPage （而不是仅仅覆盖插槽）以获取包含任何自定义样式文档的第二个表。

import { createElement as e, useContext, useEffect, useState } from "react";
import { DocsPage, PropsTable } from "@storybook/components";
import { H2, H3 } from "@storybook/components/html";
import {
  Anchor,
  Description,
  DocsContext,
  Preview,
  Story
} from "@storybook/addon-docs/blocks";

function useStencilComponent() {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return undefined;
  }

  return payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );
}

const DocsStory = ({
  id,
  name,
  expanded = true,
  withToolbar = false,
  parameters
}) =>
  e(
    Anchor,
    { storyId: id },
    expanded && e(H3, null, (parameters && parameters.displayName) || name),
    expanded &&
      parameters &&
      parameters.docs &&
      parameters.docs.storyDescription &&
      e(Description, { markdown: parameters.docs.storyDescription }, null),
    e(Preview, { withToolbar }, e(Story, { id, height: "auto" }, null))
  );

export const CustomDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const component = useStencilComponent();
  if (!component) {
    return null;
  }

  const { selectedKind, storyStore } = docsContext;
  const stories = storyStore.getStoriesForKind(selectedKind);
  const [primary, ...otherStories] = stories;

  const propDocs = component.props.length
    ? [
        e(H2, null, "Props"),
        e(
          PropsTable,
          {
            rows: component.props.map(prop => ({
              name: prop.name,
              type: prop.type,
              description: prop.docs,
              required: prop.required,
              defaultValue: JSON.parse(prop.default)
            }))
          },
          null
        )
      ]
    : [];

  const styleDocs = component.styles.length
    ? [
        e(H2, null, "Styles"),
        e(
          PropsTable,
          {
            rows: component.styles.map(style => ({
              name: style.name,
              description: style.docs
            }))
          },
          null
        )
      ]
    : [];

  const additionalStories = otherStories.length
    ? [
        e(H2, null, "Stories"),
        ...otherStories.map(story =>
          e(
            DocsStory,
            { key: story.id, ...story, expanded: true, withToolbar: false },
            null
          )
        )
      ]
    : [];

  return e(
    DocsPage,
    null,
    e(Description, { markdown: component.readme }, null),
    e(
      DocsStory,
      { key: primary.id, ...primary, expanded: false, withToolbar: true },
      null
    ),
    ...propDocs,
    ...styleDocs,
    ...additionalStories
  );
};

自定义页面还修复了每个故事默认为500px高度的事实，这太高了😅

@alexlafroscia这是

仅供参考，我们将在 5.3 中概括道具表的内容。 具体来说，像 Vue 这样的框架有 slot 和 events 的概念，所以应该将它们拆分到自己的表中。 也许您的样式工作可以使用相同的机制。 https://github.com/storybookjs/storybook/issues/8123

我指的 Jetbrains 项目是这个（cc @piotrtomiak）： https :

我没有仔细看，不知道它是否适合我们。 但是，如果它确实满足我们的用例并且不会增加太多额外的麻烦，我宁愿使用现有标准而不是发明我们自己的标准。

@shilman感谢您关注我们 (JetBrains) 为 Web 组件库引入元数据信息交换标准的努力！ 我们最初的动力是简单地为 HTML 文件中的 Vue 组件提供良好的代码补全，但我们发现使用这样的标准还有很多东西可以实现，因此我们在设计它时考虑了通用信息交换格式（IDE、工具、文档）。 到目前为止，我们的重点是 Vue 框架，但我们始终牢记对 Web 组件或其他框架的支持。 web-types标准非常新鲜，但我们已经从 Vue 社区和用户那里听到了一些积极的反馈。 我正在 Vue 社区积极推广该规范，但很高兴能从其他社区获得一些兴趣！

我认为web-types JSON 模式中可能缺少一些内容，这些内容特定于您的框架，并且可以添加到规范中。 例如，Vue 特定项目以vue为前缀。 还缺少用于记录 CSS 支持的整个部分，我们可以将其包括在内。 因此，如果您觉得值得给web-types一个机会，请随时提交问题或为缺失的功能创建 PR。

当开发人员将您的库包含在他们的项目中时，以web-types格式记录组件的副作用将是一个很好的代码完成。 我们计划在不久的将来为所有框架实现基于通用web-types功能的通用支持。 我很确定，随着更多社区接受该格式，其他 IDE 将支持该格式，这将使每个人受益:)

@alexlafroscia出色的工作！ Stencil 和 Storybook 集成（以及 https://github.com/storybookjs/storybook/issues/7644）看起来不错

感谢您链接到该问题！ 我最初采用了类似的路径（尝试以某种方式使用现有的 README 文件并将它们直接拉入 DocsPage）但最终发现仅使用 Stencil 放在 docs JSON 文件中的数据更容易，因为它_不_包括表道具和一切（因为数据在 JSON 文件中的其他地方，结构化数据非常适合从中创建自定义表）。

@alexlafroscia感谢您分享您的发现。 请问如何调试CustomDocsPage ？

我试过用addParameters添加它，它似乎没有使用自定义而是使用默认值。

import { configure, addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

import { CustomDocsPage } from './docs.jsx';

addParameters({
  options: { theme: themes.dark },
  docs: { page: CustomDocsPage }
});

configure(require.context('../src', true, /\.(story|stories)\.(mdx)$/), module);

### Web Component
<Story name="WC">
    <component-name name="test"></component-name>
</Story>

即使不使用CustomDocsPage ，WC 本身也会加载到故事书文档页面中。
有没有办法调试组件？ 我尝试添加一些日志，但我看不到任何日志。

提前致谢。

我也遇到了这个问题——我不得不在“组件”级别覆盖DocsPage组件

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replacing -docspage

是否有可能让@storybook/html与 jsx 一起工作？ 将使我为模板组件编写故事变得更加容易。 会打字，自动完成，并且不必使用document.createElement或大模板字符串。 试图使用 react 包在顶部用// @jsx欺骗打字稿，但这没有用。

@vidarc 这样做时的错误是什么？ 你有自定义的 babel 配置吗？

没有太多的定制。 一些东西添加到 webpack 中。 第一个打字稿抱怨Cannot find name 'h' 。 我的 tsconfig 有 jsx = react 和 jsxFactory = h。 我可以使用顶部的// <strong i="6">@jsx</strong> h pragma 设置使这些警告消失，但是由于它没有返回 DOM 节点或字符串，我得到了一个故事书错误。

接下来要试用： https :

编辑：非常适合 jsx。 虽然无法弄清楚如何让它与打字稿一起工作：/

@vidarc如果h代表超脚本，它返回一个既不是字符串也不是 DOM 元素的自定义对象

vhtml 似乎是要走的路

仅供参考，我们有一个web-components应用程序的传入 PR： https :

这里有人可以评论这与这个问题的交叉吗？ @vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

我还没有测试 #8400，但在测试之前我已经能够通过以下方式获得“实时”模板工作：

1. 在一个窗口中运行start-storybook -s ./www 。
2. 在另一个中运行stencil build --dev --watch 。
3. 更新.storybook/config.ts以在 HMR 上重新加载窗口：

const req = require.context('../src/components', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

它有点笨拙。

我无法调查像https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js这样的替代方案的原因是import "./my-component"失败了，因为import { Component } from "@stencil/core"不是有效的导出，实际上作为构建过程的一部分被剥离：

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

有没有人真的有一个在 IE11 中工作的模板和故事书实现/配置？ 我已经尝试了这个线程中提到的每个实现，但都没有成功。
总是遇到未处理的承诺拒绝 TypeError: Invalid Scheme with stencil versions 1.2.4 -> 1.7.4.

@shilman我能够在web-components应用程序上获取模板组件，但在我看来，它只是以每个人都使用html方式读取它们，而 HMR 没有' t 对模板组件本身的更新做出反应。

如果有一种方法可以像 React、Angular 等那样将模板编译器内置到故事书运行序列中，那真的会更好。

我将继续尝试让 Stencil 组件“存活”的方法，但我遇到的架构问题是，除非我弄错了，_Stencil 组件需要自定义构建步骤才能工作_（ stencil build --dev --watch )，并且没有运行时等效项。

我试图做import { MyComponent} from "./MyComponent" ，但失败了，因为@Component实际上不是从@stencil/core导出的。 事实上，它作为构建步骤的一部分被剥离：

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

知道了这一点，我的下一个测试是使用 React 绑定（https://github.com/ionic-team/stencil-ds-plugins）保留构建步骤，而是替换 HMR 逻辑以使用 React（而不是 HTML）故事.

希望这能让故事书 UX 与 React 相匹配，而将 Stencil 留给组件实现。

我认为要求stencil build在开发模式下并行运行并不是世界末日：

• 我们可以指导用户如何在他们的package.json同时运行它
• 模板预设可以在启动时产生这个进程，如果我们想对用户隐藏它，然后在关闭时终止它

具有较少活动部件的解决方案是可取的，但在这里我们不要让优秀成为优秀的敌人。 AFAIK 现在每个人都还在滚动他们自己的模板支持，并且有一个很好的机会来帮助这里的很多人简化事情......

同时使用是目前对我有用的方法。

肯定有增量步骤。

让我成为用户的主要事情是“为什么”模板不能正常工作
作为我的反应故事，如果没有特定模板就无法解决
变化。

2019 年 10 月 31 日星期四下午 5:02 Michael Shilman通知@github.com
写道：

我不认为要求模板构建是世界末日
在开发模式下并行运行：

• 我们可以指导用户如何同时运行它
  https://www.npmjs.com/package/concurrently在他们的 package.json 中
• 模板预设可以在启动时产生这个进程，然后终止
  如果我们想对用户隐藏它，它在关机时

具有较少活动部件的解决方案是可取的，但我们不要让好
成为这里的大敌。 AFAIK 现在每个人都还在滚动他们的
现在有自己的模板支持，这是一个很好的帮助机会
为这里的很多人简化事情......

—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXZQZissue163LNMVXZQZissue163LNMVXZQ8KTZ63DN500000000000000000000000000000000004
或退订
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

另一种方法是将 UI（故事书）与预览（模板）清楚地分开。 使用独立的故事书，这应该已经成为可能。
这样你甚至可以预先构建故事书 💪 这意味着更快的启动时间。

然后你在开发时只会使用模板构建（但仍然使用故事书 UI）。 这意味着您将获得 stencil 开发服务器支持的所有优点，而无需考虑与 storybooks webpack 设置的互操作。

我们已经通过使用es-dev-server为web-components的预览提供动力来对此进行调查。 我们有一个 POC ......但仍然有一些粗糙的边缘。
但是，我认为完全相同的方法也适用于模板。

如果有人有任何问题或有兴趣调查此模板或使用es-dev-server帮助制作参考项目，那么我相信@LarsDenBakker很乐意分享更多细节🤗

PS：所有这一切都是可能的，因为 storybook 有这个很棒的 iframe 设置和频道消息，以保持 UI 与预览分开🤗

大家好

经过一段时间和大量摆弄之后，这是我的模板集成故事书实现的回购https://github.com/Edd-Strickland/stencilbook。

很高兴进一步讨论，希望大多数事情从自述文件和查看脚本的 package.json 中是显而易见的。

这是使用 vanilla stencil starter 组件和 vanilla storybook HTML 实现构建的。

请查看和审查...

StencilBook - 模板故事书入门

这是一个使用 Stencil 和 Storybook 构建独立 Web 组件的入门项目。

模版

Stencil 是使用 Web 组件构建快速 Web 应用程序的编译器。

Stencil 将最流行的前端框架的最佳概念结合到编译时而不是运行时工具中。 Stencil 采用 TypeScript、JSX、一个微小的虚拟 DOM 层、高效的单向数据绑定、异步渲染管道（类似于 React Fiber）和开箱即用的延迟加载，并生成 100% 基于标准的 Web Components 运行在支持自定义元素 v1 规范的任何浏览器中。

Stencil 组件只是 Web 组件，因此它们可以在任何主要框架中工作，或者根本没有框架。

入门

克隆回购

git clone https://github.com/Edd-Strickland/stencilbook.git

切换到基本目录：

cd stencilbook

安装模块：

npm install

并为整个 repo 运行构建：

npm run build:all

在此运行故事书之后：

npm run storybook

此 repo 的其他命令包括：

构建模板：

npm run stencil

直接在服务/观看模式下启动模板； 用于直接修改模板组件：

npm run stencil:start

使用 watch and serve 运行 storybook 和模板构建，删除任何以前构建的版本并将在本地提供：

npm run storybook:build:all

在本地提供故事书：

npm run storybook:serve

重置模块； 删除并重新安装节点模块：

npm run reset:modules

要运行组件的单元测试，请运行：

npm test

测试

在监视模式下运行测试：

npm run test.watch

生成新组件

自动生成新的 Stencil 组件：

npm run generate

@Edd-Strickland 这是一个很好的开始！ 如果我可以建议您添加一个启动脚本以方便启动，我做了"start": "npm-run-all -p stencil:start storybook"并且它运行得很好，除了没有热重载，因为故事书似乎无法识别模板何时构建。

……除非我遗漏了什么？

@shilman似乎有一个 @storybook/web-components 包已经在 alpha 的 master 中，但我没有看到 README.md 中引用的 Stencil： https :

这是平行的努力吗？ 如果没有，你会碰巧知道相应的问题吗？ 在问题中搜索web-components时找不到。 找到了app: web-components标签，但刚刚被添加到发行版和一个错误中。

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

我不明白在@storybook/web-components提供的支持之外添加适当的模板支持有什么必要。 我相信这个线程上有人知道！

@Edd-Strickland 这是一个很好的开始！ 如果我可以建议您添加一个启动脚本以方便启动，我做了"start": "npm-run-all -p stencil:start storybook"并且它运行得很好，除了没有热重载，因为故事书似乎无法识别模板何时构建。

……除非我遗漏了什么？

嗯 抱歉上周末忙于开会。

我对您遇到的问题感到困惑，您能否通过回购问题而不是在此线程上提出更多详细信息。

但是，如果您进行安装，然后运行 ​​storybook 命令，它将相应地启动监视服务器。 每当您在运行时更改或添加或更新组件时，Stencil 都会自动 HMR。

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

我不明白在@storybook/web-components提供的支持之外添加适当的模板支持有什么必要。 我相信这个线程上有人知道！

取决于，web 组件与 vanilla 实例一起工作我没有比较它们之间的差异，但是模板输出 web 组件但作为 W/C 的编译器运行，而不是默认情况下是 W/C。

所以可以说两者都需要。 一个原生 JS W/C 和一个用于模板编译器，如果你想在故事书的一侧快速原型基于模板的 W/C，就像你可以说一个反应或角度组件。

我没有时间赶上@daKmoR来讨论考虑到他们的工作，这是否是重复或多余的，但目前我们正在维护这个版本。

我最近偶然发现了Bulmil，因为他们在 Stencil 与nuxt-stencil 的集成以及他们的nuxt 示例方面的工作。

我还发现有一个不错的 Storybook 支持。 或许也值得一看。 我不知道内部结构/它们与该线程的当前状态有何不同，但是一旦您运行storybook ，它就可以在 Bulmil 中开箱即用。

@storybook/addon-actions似乎还没有工作，或者我还没有能够让它工作。

也许我们可以在这个帖子中找到@Gomah并听听他的合作想法，以便更好地为故事书提供模板支持？

最近我偶然发现了Bulmil，因为他们在 Stencil 与nuxt-stencil 的集成和他们的nuxt 示例方面的工作。

我还发现有一个不错的 Storybook 支持。 或许也值得一看。 我不知道内部结构/它们与该线程的当前状态有何不同，但是一旦您运行storybook ，它就可以在 Bulmil 中开箱即用。

@storybook/addon-actions似乎还没有工作，或者我还没有能够让它工作。
当然，在上面的 repo 中，添加动作会起作用，作为标准的故事书插件

E2A：模板书不是@Gomah变体。

上面具有基本模板/SB 集成的对象只是创建一个基础，允许故事书到故事书和模板到模板，然后将它们集成在一起，使您可以将通过模板制作的 Web 组件放入故事书框架中。

在接下来的两周内，我一直在与我的团队冲刺，以查看 W/C 版本是否会像这次迭代一样运行，以及我们是否可以将我们正在使用的现有版本转换为 W/C 版本。

理想情况下，它都能正常工作，因此不会出现 W/C 变体的碎片，但是与原生 W/C 实现不同，Stencil 并不是一个真正的框架。 编译器。 因此，允许您编写 JSX 组件并在之后输出为 W/C 的区别可能仍然是值得的。

或者它可能真的很简单。

一旦我们完成了尖峰，就会让你知道。

没有太多的定制。 一些东西添加到 webpack 中。 第一个打字稿抱怨Cannot find name 'h' 。 我的 tsconfig 有 jsx = react 和 jsxFactory = h。 我可以使用顶部的// <strong i="7">@jsx</strong> h pragma 设置使这些警告消失，但是由于它没有返回 DOM 节点或字符串，我得到了一个故事书错误。

接下来要试用： https :

编辑：非常适合 jsx。 虽然无法弄清楚如何让它与打字稿一起工作：/

嗨@vidarc。 你能用storiesOf()语法完成这项工作吗？ 如果是这样，我真的很想知道你是如何做到的。 你有代码示例或代码库要分享吗？

虽然我们有故事书和模板集成并且在我们的项目中运行良好，但我们最大的痛点是不得不诉诸于使用document.createElement()为具有对象道具等的组件创建故事。如果vhtml可以解决这个，那太棒了！

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

我不明白在@storybook/web-components提供的支持之外添加适当的模板支持有什么必要。 我相信这个线程上有人知道！

你说得对，我同意。 我在 README.md 中注意到包含的文件夹，并看到了其他 web 组件框架，但没有模板：

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

因此，我认为模板不包括在内是有原因的。 但是如果这在没有添加任何东西的情况下运行良好，那对我来说完全没问题。

顺便说一句，这个问题现在可以关闭了吗，因为它已通过上述 Web 组件预设解决了？

没有太多的定制。 一些东西添加到 webpack 中。 第一个打字稿抱怨Cannot find name 'h' 。 我的 tsconfig 有 jsx = react 和 jsxFactory = h。 我可以使用顶部的// <strong i="8">@jsx</strong> h pragma 设置使这些警告消失，但是由于它没有返回 DOM 节点或字符串，我得到了一个故事书错误。
接下来要试用： https :
编辑：非常适合 jsx。 虽然无法弄清楚如何让它与打字稿一起工作：/

嗨@vidarc。 你能用storiesOf()语法完成这项工作吗？ 如果是这样，我真的很想知道你是如何做到的。 你有代码示例或代码库要分享吗？

虽然我们有故事书和模板集成并且在我们的项目中运行良好，但我们最大的痛点是不得不诉诸于使用document.createElement()为具有对象道具等的组件创建故事。如果vhtml可以解决这个，那太棒了！

您可以将它们直接与最新的 CSF 故事一起制作，并将您的故事转换为效果很好的格式。 此外，如果您导入一些数据工厂来填充数据对象，那么您可以使用这些来补充您的道具....

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+
我不明白在@storybook/web-components提供的支持之外添加适当的模板支持有什么必要。 我相信这个线程上有人知道！

你说得对，我同意。 我在 README.md 中注意到包含的文件夹，并看到了其他 web 组件框架，但没有模板：

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

因此，我认为模板不包括在内是有原因的。 但是如果这在没有添加任何东西的情况下运行良好，那对我来说完全没问题。

顺便说一句，这个问题现在可以关闭了吗，因为它已通过上述 Web 组件预设解决了？

我将测试它是否适用于模板，并将报告回来，然后我们可以关闭。 如果它实际上不适用于模板，则关闭没有意义......

...

嗨@vidarc。 你能用storiesOf()语法完成这项工作吗？ 如果是这样，我真的很想知道你是如何做到的。 你有代码示例或代码库要分享吗？
虽然我们有故事书和模板集成并且在我们的项目中运行良好，但我们最大的痛点是不得不诉诸于使用document.createElement()为具有对象道具等的组件创建故事。如果vhtml可以解决这个，那太棒了！

您可以将它们直接与最新的 CSF 故事一起制作，并将您的故事转换为效果很好的格式。 此外，如果您导入一些数据工厂来填充数据对象，那么您可以使用这些来补充您的道具....

谢谢。 没有意识到现在 CSF 是写故事的推荐方式。 顺便说一句，您是否设法使 jsx 插件与 vhtml 一起使用，或者这是不可能的？

...

嗨@vidarc。 你能用storiesOf()语法完成这项工作吗？ 如果是这样，我真的很想知道你是如何做到的。 你有代码示例或代码库要分享吗？
虽然我们有故事书和模板集成并且在我们的项目中运行良好，但我们最大的痛点是不得不诉诸于使用document.createElement()为具有对象道具等的组件创建故事。如果vhtml可以解决这个，那太棒了！

您可以将它们直接与最新的 CSF 故事一起制作，并将您的故事转换为效果很好的格式。 此外，如果您导入一些数据工厂来填充数据对象，那么您可以使用这些来补充您的道具....

谢谢。 没有意识到现在 CSF 是写故事的推荐方式。 顺便说一句，您是否设法使 jsx 插件与 vhtml 一起使用，或者这是不可能的？

所以 JSX 直接通过 stencil 编译器解析到 shadow dom 中。 因此，只要您将编译器集成到故事书中，您就可以编写标准模板组件，然后将其包含在 CSF 故事中，然后导入数据工厂以填充道具。

我发布的 vanilla repo 开箱即用，不需要 VHTML 插件或任何其他东西，甚至不需要包装器，您可以直接将其编写为模板并输出。

您可以使用 storyOf 语法，但随后您会被锁定在经典的 document.createElement 模式中。
例如，我们图标的这个古老的storysOf语法

import { storiesOf } from '@storybook/html';
/** 
  * Import readme from component into the story 
  */
import markdown from './readme.md';

storiesOf('1-Atoms/icon', module)
    .addParameters({ viewport: { defaultViewport: 'responsive' } })
    .add('knobs', () => {
        /**
         * Add Knobs to component panel
         * Set within Each knob as the third parameter
         */
        let icon = document.createElement('namespace-icon');
        icon.classList.add('namespace-action-plan');
        icon.size = 'medium';
        return icon;
    }, { notes: { markdown } });

VS

import centered from '@storybook/addon-centered/html';
import markdown from './readme.md';

export default {
  title: 'Atoms|Icon',
  decorators: [centered],
  parameters: {
    notes: { markdown },
    viewport: { defaultViewport: 'responsive' }
  }
};

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

没有太多的定制。 一些东西添加到 webpack 中。 第一个打字稿抱怨Cannot find name 'h' 。 我的 tsconfig 有 jsx = react 和 jsxFactory = h。 我可以使用顶部的// <strong i="8">@jsx</strong> h pragma 设置使这些警告消失，但是由于它没有返回 DOM 节点或字符串，我得到了一个故事书错误。
接下来要试用： https :
编辑：非常适合 jsx。 虽然无法弄清楚如何让它与打字稿一起工作：/

嗨@vidarc。 你能用storiesOf()语法完成这项工作吗？ 如果是这样，我真的很想知道你是如何做到的。 你有代码示例或代码库要分享吗？

虽然我们有故事书和模板集成并且在我们的项目中运行良好，但我们最大的痛点是不得不诉诸于使用document.createElement()为具有对象道具等的组件创建故事。如果vhtml可以解决这个，那太棒了！

@罗巴塞尔森
我最终只使用 @storybook/react 并修改 webpack 配置来转换 MD 文件和 MDX 文件。 然后只需一小段代码即可根据提供的 json doc 输出模板创建旋钮。 对于模板代码，我们从他们的 CLI 中使用 storybook 的副本，并将这些文件链接到 preview-head.html 文件中。 非常适合我的目的。

@Edd-Strickland 非常感谢您的示例和解释。 在你的最后一个例子中，我仍然不得不以编程方式传递属性，作为元素上的道具。 我希望我可以使用 vhtml 或普通模板编译器将我的故事编写为 JSX。

所以而不是：

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

...我会写：

export const knobs = (): HTMLNamespaceIconElement => {
    return (
        <namespace-icon class="namespace-action-plan" size="medium">
        </namespace-icon>
    );
};

既为了可读性，又为了便于创建故事。 这不可能吧？ 如果可能的话，你能举一个简单的例子吗？

如果更容易，我们也可以在不和谐的聊天中交谈。 我是Rob Axelsen#1373 。

编辑：为了补充上述内容，我还查看了 CSF 文档，并尝试使用 JSX 语法导入h ，但抛出错误“期望故事中的 HTML 片段或 DOM 节点：“简单故事” “组件”。”：

export const simpleStory = () => <namespace-icon class="namespace-action-plan" size="medium"></name-spaceicon>;

如果这是关于编写需要为 Web 组件设置属性的故事，那么您可以查看@storybook/web-components 。 它使用lit-html声明性地创建带有属性的 html。

这应该在并排运行故事书和模板时起作用:)

除了 stencil 不使用 lit html。 那是Vue的事情...

@shilman似乎有一个 @storybook/web-components 包已经在 alpha 的 master 中，但我没有看到 README.md 中引用的 Stencil： https :

我们如何下载和测试这里链接的 repo 没有克隆操作等的 web 组件包？

@Edd-Strickland 这只是主要故事书 monorepo 中的一个目录

除了 stencil 不使用 lit html。 那是Vue的事情...

这是lit thing 🤔

然而，这就是 Web 组件的美妙之处——它在底层使用什么模板并不重要。 您可以使用 lit-html 或任何其他方式来定义您的故事。 您可能需要的只是一种用属性编写“html”的方法。

对于 lit-html，它看起来像这样

export myStory = () => {
  const dataArray = [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
  return html`
    <my-lit-component .title=${'some title'} power="unlimited">
      <p> some light dom</p>
    </my-lit-component>
    <my-stencil-component super-mode .data=${dataArray}></my-stencil-component>
  `;
}

因此，如果您在故事中进入 Chrome 中的 DevTools，您可以选择 lit-component 并且您可以阅读以下详细信息

• 属性标题例如 console.log($0.title) // 一些标题
• 属性 power eg console.log($0.getAttribute('power')) // 无限制

对于模板组件，它将是“相同的”

• 属性数据例如 console.log($0.data) // [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
• 属性超级模式例如 console.log($0.hasAttribute('super-mode')) // true

lit-html 只呈现 dom ...... dom 元素在哪里/如何注册 lit-html 不知道/关心 - 所以每个组件使用哪种技术可能完全不同......例如你可以拥有组件谁是 lit-element、stencil、vanilla HTMLElement 或者它甚至可以是一个完整的 react/vue/angular 应用程序的 web 组件包装器......😱

stencil 可能是一个编译器，但是一旦它被编译成 web 组件，它就可以用作 dom 🤗

PS： @storybook/web-components使用 lit-html

Stencil 团队正在重构编译器，我认为这将改变 Stencil/Storybook 的集成。

如果有人打算通过 React checkout https://github.com/the-road-to-learn-react/use-custom-element来使用 Stencil 和 Storybook，它允许您传递数组和对象。 稍后我会尝试自己，但这可以帮助一些人。

对于那些感兴趣的人，我已经发布了一个结合 Storybook/react 和 Stencil 的入门： https :

似乎故事书正在为 Web 组件开发故事书。 我用模板试了一下，效果很好。

https://github.com/storybookjs/storybook/tree/next/app/web-components

@sem4phor你能分享你的配置吗？

我在为 web 组件安装新的故事书时遇到了关于 lit-html 的错误

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

@dmartinjs您确实需要自己安装“lit-html”，它用于在默认示例中呈现组件。

@Edd-Strickland 我们为 web 组件添加了故事书，并且在 6.0.0 聚合物故事书中将被弃用/不再更新。

是否需要做任何事情才能使 Web 组件的故事书适用于模板组件？

web components storybook可以渲染stencil web components组件，但是stencil不能直接在浏览器中运行，需要编译。 因此它仍然需要一些特殊的处理，除非你在运行 storybook 之前编译模板组件。

@LarsDenBakker是否需要添加一个 webpack 插件/加载器来使上述工作正常进行。 （我想需要制作模板组件 HMR 并动态编译）

是的，尽管模板本身使用汇总。 如果编译步骤可以作为一个单独的项目使用，你也许可以把它做成一个 webpack 插件。 我对它的内部了解还不够。

Stencil 不使用 Webpack。 它使用 Rollup 代替。

可以使用我设置的 repo 使两者相应地工作并通过 -watch 调用在 Stencil 中启用 HMR 等效项。 所以当模板更新时模板会重新加载，故事书会在更新时重新加载。

所以不需要每次都建立起来，因为这将涵盖它。

虽然我最近没有时间用最新的 SB 或 Stencil 更新存储库，但此过程仍然有效，然后您可以使用最新版本升级存储库。

谢谢

@Edd-Strickland 我们为 web 组件添加了故事书，并且在 6.0.0 聚合物故事书中将被弃用/不再更新。

是否需要做任何事情才能使 Web 组件的故事书适用于模板组件？

是的，它仍然没有真正考虑实时重新加载/ HMR，因为如上所述 webpack 使用和汇总使用之间的差异，所以目前如果你想使用 SB WC 版本，那么它需要一个完整的模板来渲染那么 HMR 的所有优点都被模板化了。

此版本目前基于 HTML 版本而不是聚合物版本，因此这不应影响停用该版本的长期目标。

@LarsDenBakker是否需要添加一个 webpack 插件/加载器来使上述工作正常进行。 （我想需要制作模板组件 HMR 并动态编译）

我不建议这样做，Stencil 的 webpack 版本是一个明显更加困难的开发路径，并且无需任何需要就增加了依赖关系的足迹，正如我制作的 repo 中所示，完全有可能让 stencil 在 watch most 中运行，并在每个WC 或 SB 实例的更改。 这是关于配置它以允许两者。

是的，尽管模板本身使用汇总。 如果编译步骤可以作为一个单独的项目使用，你也许可以把它做成一个 webpack 插件。 我对它的内部了解还不够。

已经有一个模板 WP 插件，但这不是受支持或社区批准的依赖项。

抄送@jthoms1 @adamdbradley

@dmartinjs您确实需要自己安装“lit-html”，它用于在默认示例中呈现组件。

@sem4phor你能分享你的配置吗？

我在为 web 组件安装新的故事书时遇到了关于 lit-html 的错误

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

对此有任何反馈吗？ 我必须自己安装这个依赖项。 如果它被@storybook/web-components 使用，那么它应该作为依赖项自动安装......？

@LeeBurton不是对等依赖？ （不确定是否是，如果不是，也许应该是）cc @daKmoR

@LeeBurton在我测试它的时候 lit-html 是对等依赖。 您必须自己安装对等依赖项是正常的。 https://nodejs.org/es/blog/npm/peer-dependencies/

对于它的价值，我在.storybook/preview.js使用了此配置的模板

import { defineCustomElements } from "../dist/esm/loader.mjs"
defineCustomElements()

configure(require.context('../src', true, /.*\.stories\.(js|mdx)$/), module);

@idmyn我试过了，当它编译时，如果没有手动硬重新加载，对任何 src 文件所做的任何更改仍然不会加载到浏览器中。

我通过在本地运行 Stencil 的构建并在一个 npm 运行脚本中启用 watch 同时运行start-storybook和npm-run-all包来使其工作。

我在 main.js 中使用以下内容配置 storybook 的 webpack 配置来观看 Stencil 的 dist 文件：

const path = require('path');
const glob = require('glob');

module.exports = {
  webpackFinal: (config) => {
    // watch all revelant files in dist folder
    const distDir = path.resolve(__dirname, '../dist');
    const files = glob.sync(`${distDir}/**/*.entry.js`, { absolute: true, ignore: ['**/*.system.entry.js'] });
    config.entry.push(...files);
    return config;
  },
};

您可能需要为您的项目稍微更改路径/文件，但这对我有用。

只是想知道，@ DesignByOnyx或@Edd-Strickland 有没有考虑过将他们的解决方案变成 6 的预设？ 我已经使用了 repo 和 - 通常是这样 - 我喜欢每个部分:-)

我已相当成功地将@Edd-Strickland 的副本移至 6.0.0-beta，尽管我发现它在发现更改时并不总是重建所有内容（例如 readme.md）。

这是公开的@paulfelton 吗？

是现在，帮助自己:-)

我已经分叉了 Edd 的项目。 @Edd-Strickland，我应该加入公关吗？ 这需要很好的审查，我不是这方面的专家。

我撞了包，将配置重构为新格式。 我必须添加一个类型并在 tsconfig 中引用它以获取故事以导入模板自述文件，并添加一个配置以将“注释”转换为“文档”。

愿望清单：

• 好吧，我希望看到集成从模板组件生成一个基本的故事。 理想情况下，mdx 和 CSF。
• 我想从 Storybook HTML 转变为 Storybook Webcomponent 风格，尽管我不确定这样做是否有好处。 只是感觉更自然。
• 我希望模板文档更自然地导入到新的插件文档中，而不是“通过”注释。
• 所有这一切都通过预设:-)

@paulfelton你需要我的东西吗？

@ndelangen我不确定。 正如您可能已经收集到的，我对 Stencil 和 Storybook 都很陌生，所以只是把我可以从各种问题讨论、谷歌等中拖出来的东西混在一起。

我也参加了一个入门回购，受到了很大的启发，但在这个问题上付出了巨大的努力（谢谢大家！）。

https://github.com/elwynelwyn/stencilbook-ding

使用@storybook/web-components ，使用基本插件（例如控件、操作）。 此阶段所有内容的最新版本..

Stencil 开发服务器和 Storybook 预览框架之间的一些额外集成（因此 Stencil 错误叠加显示在 Storybook 中内联 - 更好的 DX！）（检查./storybook/preview-body.html和./src/index.html以获取 deets）。

~将 Stencil devserver 捣碎成start-storybook这样你只需运行一个命令，它就会在幕后启动 stencil。~
编辑：用concurrently + wait-on简化它 - 等待 Stencil 启动，然后继续 Storybook

代码更改（对 Stencil 组件或 Storybook 故事）将重新加载预览框架（而不是整个 Storybook 应用程序）。 这不是正确的 HMR，但它的开发相当不错！

好的。 该链接不起作用。

哎呀，回购现在是公开的 ^

我在这里使用 stencil v2 和 @storybook/web-components v6 整理了一个样板存储库： https :

在 https://github.com/miriamgonp/stencil-web-components-boilerplate 上还有一个 repo，由 Storybook/Stencil discord 频道的@miriamgonp构建。 有人喜欢结合这些新兴的样板吗？ ;-)

这两个回购看起来很棒。 如果将它们合并为一个，将是一个很好的补充。 如果有人愿意为基于这两个存储库的Storybook 介绍教程做出贡献，我们将不胜感激。 如果有人愿意帮助我们，请告诉我，我很乐意过去帮助使用 Stencil 的社区成员。

我得到了一个合适的 hmr 解决方案 ;) 即将推出！

我得到了一个合适的 hmr 解决方案 ;) 即将推出！

这里是！
Stencil 2+ 和 Storybook 6+（旧的 Stencil 版本也应该有效；))
https://github.com/dutscher/stencil-storybook
玩得开心和欢呼

编辑：gh-pages 上的故事书https://dutscher.github.io/stencil-storybook/index.html

上周将这个 ^^ 交换到我们的项目中，并在去除了与我们无关的位（引导程序、scss、彩色等）并修复了一些小问题（例如 package.json 名称由于在 @ myorg/my-proj 格式）它运行得非常好。

已经使用了一天左右，HMR 非常好！

@elwynelwyn我们需要在故事书方面做些什么，你觉得吗？

@ndelangen重要的是：

1. 代理https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. 通过 main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30的模板生产注入
3. 以及用于开发和生产的简单和最小的 npm 脚本https://github.com/dutscher/stencil-storybook/blob/master/package.json

干杯