问题标签 [hyperhtml]

这是我正在接线的代码，它返回

内部变量将计算所需的输出

上面是计算时间戳outDate的地方，下面是在 wire() 中使用的multiavatar变量

multiAvatar.push(wire() <div class=${['groupAvatar', 'g_'+ avatarNum].join(' ')} style=${{backgroundImage: 'url(' + miniAvatarUrl + ')', backgroundSize: 'cover'}}></div>)

下面的代码是我绑定dom的地方。

这是DOM的输出：

__plugindomid属性由 google-maps 设置。

我有一组玩家： {id: string; 名称：字符串}[]，当有新玩家可用时由 firebase 更新。这每次都会给出一个新的玩家数组，其中包含新的玩家对象，但具有相同的 id。

因为我想在添加/删除玩家时为元素设置动画，所以我想重用基于 player.id 的元素。

AFAIK 你只能将一个对象传递给wire函数，而不是player.id（字符串）。有什么办法可以做到这一点？

在这里你可以找到一个可以玩的 codepen：https ://codepen.io/jovdb/pen/rdOzvY

我也尝试过使用hyperHTML.wire(p, ':player-' + p.id)，但这会重新创建所有元素。

我想要一个从按钮扩展的语义命名自定义元素：比如fab-button

扩展 HTMLButtonElement 似乎不起作用。

有没有办法使用 HyperHTML“document-register-element.js”从非 HTMLElement 扩展？

Codepen 示例： https ://codepen.io/jovdb/pen/qoRare

我有以下两个组件：

我想将它们放在客户端和服务器之间共享的模块中。然而，据我所知，虽然 API 几乎相同，但在服务器上我必须从 viperHTML 模块导入函数，在客户端我必须使用 hyperHTML 模块。因此，我不能只在我的共享模块顶部导入函数，而是必须在调用站点传递给我的组件。

这样做我的同构组件将如下所示：

从服务器调用组件：

从浏览器调用是完全一样的，期待 hyperhtml 的导入方式：

然而，编写这样的代码感觉很不愉快，因为我觉得 wire() 调用的结果应该存在于组件实例中。有没有更好的方法来编写同构的 hyperHTML/viperHTML 组件？

我正在尝试使用 定义一个简单的自定义元素HyperHTMLElement，但是我似乎无法extend HyperHTMLElement不收到来自 Chrome（以及 Safari）的投诉。

src/index.js

rollup.config.js

index.html：

Rollup 将所有内容捆绑在一起，没有错误：

但是，Chrome 报告了这一点：

我也尝试切换到 Webpack+Babel，但无济于事——仍然报告了相同的堆栈跟踪（与 Webpack 特定的细微差别）。

当我检查由以下代码创建的 html 元素时（在 Chrome 中使用hyperHTML，整个列表都会刷新（我假设这基于<ul>短暂闪烁的紫色中的所有元素）。

它实际上是在重新渲染整个列表吗？如果是这样，我如何仅通过呈现新更改来提高性能？这是一个有效的问题，还是我不必要地优化？

是否可以有自定义布尔属性？在布尔属性的 hyperHTML 文档中，它声明了以下内容：

只需在需要时使用布尔属性，如果它是元素继承的一部分，它总是会做正确的事情。

此片段不起作用：

如果我需要custom成为一个布尔属性，我怎样才能使它成为“元素继承的一部分”？

我正在尝试了解HyperHTML以及如何从中获得最佳性能。

阅读它的底层工作原理，似乎暗示模板和 DOM 之间建立了强大的联系，我认为这意味着它需要与 VirtualDOM 不同的思维方式来优化性能。

我编写了一些代码来显示使用 hyperHtml 与 normalHtml 对表格中的N个元素进行排序。normalHtml 版本只是刷新表并重建元素。它们在性能方面似乎都相似。我在这里比较苹果和橙子吗？如何让 hyperHtml 版本的代码表现更好？

代码：

或在CodePen上

总结一下这个问题：为什么在我的代码示例中 HyperHTML 与普通的 DOM 操作一样具有性能，以及在重新排序 DOM 节点时如何使 HyperHTML 更高效？

我正在从 React 迁移到hyperHTML，因为性能很重要。我正在使用专门用于停靠面板管理的第三方库我正在使用专门用于PhosphorJS。当我创建这个“DockPanel”类时，我需要将它附加到真正的 DOM 树上。

在React这可以用函数解决componentDidMount虚拟节点连接到 DOM 树后立即调用）。

所以我的问题是，有没有办法检测组件何时“安装”和“卸载”？我看到HyperElement有这个dis/connectedCallback功能，但在hyper.Components不起作用。

谢谢！

我正在开发一个 Symfony 应用程序，并且刚刚使用https://github.com/spatie/server-side-rendering让 JS 的 SSR 工作。到目前为止，我只为 React 使用“现成的”SSR 解决方案，但目前我正在尝试使用 hyperHTML/viperHTML 并且面临一些到目前为止我无法通过查看可用文档/示例来解决的问题。

我当前的测试片段是这样的：

这里的问题是，如果没有明确调用，render()我就没有输出。查看一些官方示例，这不应该是必要的，至少不是Component. 例如，我已经尝试setState()在构造函数中使用，但没有区别。

此外，如果不同时使用console.log()和toString()，我也没有输出。这是出乎意料的。我知道toString()这里可能有必要（没有它<buffer />正在渲染），但这console.log()似乎很奇怪。当然，这可能根本与 viperHTML 无关。但是实例化组件是我唯一需要做的事情。

我也不清楚如何编写一个同构/通用组件，即一个具有标记、事件处理程序等的文件，在服务器上呈现，然后在客户端上水合。当我根据文档（https://viperhtml.js.org/hyperhtml/documentation/#essentials-6）添加内联事件处理程序时，它实际上被内联到呈现的标记中，这不是我想要的。我检查了超形态和 viperNews 应用程序，但到目前为止这并没有真正帮助我。