问题标签 [stenciljs]

我在身份验证服务后面的 nginx 服务器中部署了一个 stenciljs 组件。为了得到任何东西，请求必须包含一个包含 access_token 的 cookie。该组件在 android 设备和桌面设备的 chrome/firfox/IE11/ 上没有问题。问题出在 microsoft edge 和 ipad（任何导航器）上，这是由于浏览器没有将 cookie 发送到服务器。有什么提示吗？

头文件.tsx

PS：我正在使用模板/核心 v0.15.2

我正在使用此处找到的模板启动器项目 ( https://github.com/ionic-team/stencil-component-starter )，我想在 Visual Studio 代码中调试代码。我尝试了以下配置，但它们都不起作用

启动版本确实成功启动了 chrome 并显示了正在运行的模板项目，但 Visual Studio 代码中的所有断点都表示它们是“未经验证的”，因此执行不会停止。附加版本不起作用，它给我一个 404 错误消息说：

Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: 404 File Not Found Url: /json File: C:/work/projectA/www/json).

所以我们正在开发一个 Stenciljs 组件，它包装了传单地图并添加了一些额外的功能。

现在显然我们不想或不需要测试 Leaflet，而是只测试包装组件中的部分。

因此，使用测试示例，我们创建测试，

尝试加载组件并测试公共功能，但我们得到

我们认为这个消息是因为测试正在尝试渲染传单，并且因为它不是真正的浏览器，所以它无法检测到视图所以抛出这个错误，所以我们试图在测试中模拟传单，但仍然得到同样的问题。

我们试图通过使用 jest 模拟来模拟传单模块

但这并没有什么不同

我唯一的想法是将逻辑与组件分开，但这感觉不对，因为我们这样做只是为了测试。

正在使用的版本是：传单：1.3.4，@stencil：0.15.2，开玩笑：23.4.2

还有其他建议吗？

感谢@skyboyer 的建议，进一步调查将我带到传单核心 browser.js 文件的这一行

将我带到传单核心 browser.js 文件的这一行

但是当我收到以下错误时，我无法模拟 window 的屏幕属性

所以我尝试以下。

同样的错误，完全忽略了这一点，所以我尝试超越出口。

也没有快乐，所以尝试了

但得到它告诉我它是一个常数，不能改变（但含义 stats var 所以¯_(ツ)_/¯ ）

还有什么我可以尝试的吗？

进一步更新，我设法模拟了窗口，但遗憾的是这并没有解决它。

如果我控制台记录这个，我会得到正确的属性，但是一旦我测试组件的实例化它就会失败

阅读它似乎Leaflet不检查DOM并且只是尝试渲染，无论如何我都看不到这个，我看到了一个leaflet-headless包，但我不知道我怎么能把它们换掉测试。

我想我需要看看另一种测试策略，可能是量角器。

我已经使用 StencilJS 有一段时间了，并且来自 React 背景，我编写一些组件的直接本能就是将它们编写为无状态的。但是，模板文档根本没有提到无状态组件。这就是为什么我在这里写信是为了学习其他人的经验

我正在尝试将 lodash 导入到我的 stenciljs 组件中。我尝试了多种方法并查看了许多有关此的解决方案，但对此没有运气。

我尝试通过以下方式导入：

他们都不为我工作。第一个不会引发任何错误，但我无法使用 lodash 中的任何函数。其余方式引发错误并且构建失败。

任何帮助都会非常显着。

提前致谢！！

无论如何都知道一个命名插槽包含多少个孩子？在我的 Stencil 组件中，我的渲染函数中有这样的内容：

我想要做的是根据插槽内有多少孩子来设置不同的 div.content 样式。如果插槽中没有子项，则 div.content 的 style.display='none'，否则，我将一堆样式应用于 div.content，使子项正确显示在屏幕上。

我试着做：

但是，即使我将项目插入插槽，这总是报告 hasChildren = false 。

我有一个 Stencil 组件，其中包含一个 not-Prop 成员变量：private _zIndex。这个变量的值可以通过调用 a 来设置，Method() setZIndex( zIndex : number );或者当组件在内部做它的事情时它可以改变。我需要一种从外部获取此变量当前值的方法。我尝试创建一个 Method()，它只是return this._zIndex. 问题是此方法必须是异步的，因为如果不是，我会收到警告：

我不希望 getZIndex() 函数是异步的，所以我的另一个选择是创建一个Prop( { mutable: true } ) _zIndex. 如果我这样做，那么我可以设置/获取变量的值，但是现在每当我设置变量的值时，它都会强制模板重新渲染我的组件。这可能会很慢，因为我的组件很大并且包含许多嵌套组件。

有没有办法我可以：

• 在不异步完成的情况下从外部获取私有变量的值？

或者

• 有没有办法让 Prop 在其值更改时不强制重新渲染？

我们有一个调用 wraps 传单的模板应用程序，样式函数需要将函数作为方法参数，模板不能这样做，所以我们传递一个对象，然后将其解析为一个函数，无论如何这可行，但试图用 Jest 测试这个给我们带来了问题。

代码

测试

返回

我该如何解决这个问题？

我有一个 Web 组件，我试图通过 @Element 属性选择一个子节点：

export class StepupVerification { @Prop() token: string = 'test'; @State() url: string = `http://localhost:8080/?fail=${this.token}`; @Element() private element: HTMLElement; ...

但是，当我知道元素存在时，我在项目上使用的查询选择器返回零个子项。我知道，因为我可以使用文档中的相同选择器找到它。

这是我正在使用的选择器： this.element.querySelectorAll('.stepup-frame'); 正如我所说，它返回零个元素。但是当我使用时： document.querySelectorAll('.stepup-frame'); 我发现元素很好。

TL；DR：元素上的 querySelector 无法正常工作，我的 web 组件无法正常工作，我不知道为什么。

我们要求我们加载一个单独的页面作为模式（是的，对吗？）

用于指示操作的嵌入页面window.parent.postMessage(messageString, '*')已完成。

我想使用 stenciljs 的@Listener

我有一个带有 iframe 到另一页的工作模式，使用 old school window.addEventListener('message', myMessageHandlingDelegate)。

但是，我真的很想使用@Listener属性/装饰器来处理发布消息的结果。我试过@Listener('message')了，但没有添加代码....

有没有办法让一个 stenciljs 监听器来捕捉从子 iframe 发布的消息？