问题标签 [stenciljs]

我正在使用 StencilJS 编写一个 Web 组件。我的组件导入的辅助类 ( ArrayHelper.ts) 之一在顶部有这些导入：

在本地编译和服务时，这一切都很好。但是，当编写一些单元测试并使用 jest 执行它们时，jest 无法正确解析这些导入：

当我将导入更改ArrayHelper.ts为

然后 Jest 将成功运行测试而不会出现问题，但是 stencilJS 的 TS 编译不再起作用：

任何想法如何让这些进口适合这两种情况？

我只是运行命令：

Ionic 4 PWA它在目录内创建了一个具有以下目录结构的香草src：

然后我想创建一个带有 html 标签的自定义组件：comp-workspace和文件名：（comp-workspace.js或类似的东西），我可以在不使用任何 Javascript 框架的情况下插入任何原版HTML/页面上。Javascript

这里有一些事情需要考虑：

1. 组件：comp-workspace可以包括以下组件：{ comp-gallery, comp-artboard, comp-text-editor, comp-layer-stack}。

2. 以上所有组件都可以包括标准Ionic组件。

请看下图：

这是添加我的自定义组件后的目录结构：comp-workspace及其依赖项。

然后，我想以类似于以下方式使用我的自定义组件：

如果我build在控制台上运行命令，我会得到以下输出：

我还得到一个新目录：www包含以下内容：

但正如您所见，我没有获得可用于在任何原版HTML/Javascript页面上插入自定义组件的实际 javascript 包文件。

我的问题是：我如何build从这个应用程序中只使用我的自定义组件Ionic 4 PWA？

谢谢！

[编辑 1]

这是对下面Alexander Staroselsky评论的回应，他说：

您可以考虑使用类似stencil-component-starter 的东西来构建可以在任何地方有效地捆绑和使用的单个 Web 组件。

亚历山大说得很好，实际上这是我最初的想法，但我发现了一些我在这个论坛上发布的问题：

https://forum.ionicframework.com/t/ion-label-component-inside-the-stencil-component-starter-not-getting-rendered/139763/3#post_4

亚伦·桑德斯（Aaron Saunders）在那里说（截至2018-08-28）：

看来这个项目（stencil-component-starter）Ionic 4默认情况下没有。

然后他建议我使用该Ionic PWA Starter Kit项目，这就是我在这里尝试做的。这样做似乎一切正常（所有Ionic组件都工作），但现在我只需要将我的自定义组件编译为单独的文件。

这是StackOverflow中并行的相同讨论：

模板组件启动器中的离子标签组件未呈现

有任何想法吗？

我正在为侦听“window:keydown”的组件编写测试。我尝试了几种方法，但没有一种方法有效：

相反，正确的语法是什么？

我正在使用 StencilJS 创建一个 JSX 组件，并且我的组件不会根据其状态更改重新渲染。我不知道为什么：

我的控制台日志语句验证状态正在更改，但由于某种原因，我的弹出框永远不可见

我正在尝试使用 jest 测试以下功能：

为了编写这个函数的测试用例，我模拟了window.fetch函数contentApi、id和assignContent函数。然后，我尝试通过模拟所有必要的函数和变量来在我的测试用例中调用这个函数。

这是测试用例的片段：

它失败了，既没有将内容设置为'abc'，也没有在调用assignContent()。

我有一个带有视口属性的组件。我想监听此属性的更改，进行一些计算并将可能更改的值反映回属性。我的第一次尝试看起来像这样：

这会导致堆栈溢出，因为将值反射回来会触发对 watch 函数的另一个调用。我可以通过设置一个标志来说明这是否是内部更改来防止它。像这样的东西：

我不喜欢这种方法。并且正在寻找更好的东西。这个问题通常可以通过使用 getter 和 setter 以及保持实际状态的私有变量来解决：

但是，使用 Stenciljs 会自动生成 getter 和 setter。有什么好主意吗？

我的 stenciljs 渲染函数目前是用打字稿这样写的：

但我更喜欢这样写：

但这给了我一堆错误信息。

有没有办法编写 jsx 代码，以便我有条件的打开和关闭标签？

我有以下项目：

https://github.com/napolev/stencil-cannot-find-name

其中包含以下两个文件：

自定义容器.tsx

自定义详细信息.tsx

我的问题是：当我运行时：

我收到以下错误：

如下图所示：

此外，即使在使用 编译之前npm，Visual Studio Code我也会收到有关该问题的通知，如下图所示：

这是导致问题的行：

https://github.com/napolev/stencil-cannot-find-name/blob/master/src/components.d.ts#L66

上面那个文件在哪里auto-generated，所以我不能修改它来解决这个问题。

关于如何解决这个问题的任何想法？

谢谢！

我试图了解使用 Shadow DOM 如何影响 Stenciljs 中的组件生命周期方法。

我在 Stencil 入门应用程序中设置了以下示例。

组件定义为：

每个组件在其每个生命周期方法中都有控制台语句。当页面在浏览器中加载而没有任何打开 shadow DOM 的组件时。

在 component-a 中打开 Shadow DOM 会改变渲染。

控制台输出更改为：

component-b 现在在 component-a 和 component-c 都被渲染之前被渲染。我不确定使用 Shadow DOM 渲染页面如何影响此更改。

我目前正在尝试使用 StencilJS 创建一些 Web 组件。

现在我知道有<slot />并命名插槽和所有这些东西。来自 React，我猜 slot 类似于 React 中的 children。你可以在 React 中使用孩子做很多事情。我经常做的事情：

1. 检查是否提供任何儿童
2. 遍历孩子以对每个孩子做一些事情（例如，将其包装在带有类的 div 中等）

你会如何使用 slot/web components/stencilJS 做到这一点？

我可以使用 Stencil 在 Stencil 中获取我的 Web 组件的主机元素

我使用我的组件

我想渲染类似的东西

亲切的问候