如何处理Svelte的自定义元素交叉依赖关系以及在'CustomElementRegistry'上无法执行'define' [英] How to handle Svelte custom-element cross-dependencies and `Failed to execute 'define' on 'CustomElementRegistry`

问题描述

上下文:我们正在构建Svelte UI组件库作为自定义元素，以在多个新的和旧的应用程序中使用.所有组件都作为软件包存在于monorepo中，并且可以自行维护和交付.

Context: We are building a library of Svelte UI components as Custom-Elements to be consumed across multiple newish and legacy applications. All components exist as packages in a monorepo, and can be maintained and delivered on their own.

目标:提供小型通用js程序包，这些程序包可以临时使用，而消费者的开销却最小.

Goal: to deliver small universal js packages that can be consumed ad-hoc with the least overhead by consumers.

情况:

• 存在一个简单的(原子)自定义元素，例如our-button.
• 存在另一个更复杂的自定义元素our-modal，该元素使用(导入)our-button

• a simple (atomic) custom-element such as our-button exists.
• another more complex custom-element our-modal exists which utilizes (imports) our-button

如果消费者将our-button-bundle.js带入一个地方 our-modal-bundle.js，则our-button的重复将导致:

If a consumer brings in our-button-bundle.js to be used in one place and our-modal-bundle.js the duplication of our-button causes:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "our-button" has already been used with this registry

更不用说，这是两次为button输入代码，这很膨胀.

Not to mention, this is bringing in the code for button twice, which is bloat.

为什么不使用构建工具...?理想情况下，我们希望消费者在这里几乎不松手.支持的应用程序包括WebForms，ASP .NET等.作为一个ui团队，我们只希望他们指向一些js捆绑包，然后开始他们的业务.我们维护并推动，他们导入并实施. (嘿，一个团队至少可以梦想...)

Why not use a build tool...? Ideally, we want the consumers to hardly lift a finger here. Supported apps include things like WebForms, ASP .NET, an others. As a ui team, we just want them to point as some js bundles, and go about their business. We maintain and push, they import and implement. (Hey, a team can dream at least...)

到目前为止可能的选择:

Possible Options thus far:

• all.bundle.js没有代码重复或命名，但 Bloated .对不起，最终用户，无论应用程序使用一个还是多个，您都会获得整个库.
• 一个core.bundle.js或常见的小型可重复使用的元素(类似于Vendor)，以及另一个较大的分子(如组件).我看不到这将如何工作.使用自定义元素-如何在没有按钮的情况下预编译模态编译?如何在开发人员模式下工作?
• 围绕自定义元素定义的运行时脚本，例如:

• An all.bundle.js No duplication of code, or naming, but Bloated. Sorry end user, you get the whole library, whether the app uses one piece, or many.
• A core.bundle.js or common small re-usable elements (similar to Vendor), and another of larger molecule like components. I can't see how this would work. With custom elements - how can pre-compiled modal compile without button? How can it be worked on in dev mode?
• A run-time script around the custom-element definitions like:

if (!window[MY_ELEMENT_NAME]) {
 // register...
} else {
 return;
}

同样，此选项将通过网络发送重复的代码，尽管应该只注册和使用该元素的一个实例.

Again, this option will send duplications of code over the wire, though only one instance of the element should be registered and used.

我们也永远不会在组件之间导入任何共享模块，但是我觉得这违背了组件的全部目的.

We could also never import any shared modules across our components, but I feel like this defeats the whole purpose of components.

欢迎针对这种情况的体系结构提出任何建议.

Any suggestions on an architecture for this situation are welcomed.

推荐答案

简短的答案是，您需要将组件作为单独的模块分发，这样当有人导入our-button并随后导入our-modal，our-modal时使用模块注册表中已经存在的our-button副本.

The short answer is that you need to distribute the components as individual modules, such that when someone imports our-button and later imports our-modal, our-modal uses the copy of our-button that's already in the module registry.

这确实意味着每个(顶层)元素都需要自己导入，并且与分发较粗的包相比，浏览器将必须下载更多的模块，但是消费者可以选择创建自己的包

This does mean that each (top-level) element needs its own import, and that the browser will have to download more modules than if you were distributing coarser-grained bundles, but consumers would have the option to create their own bundles.

( Shimport —免责声明:我编写了它—允许您甚至在以下情况下也可以使用本机模块:很少的浏览器不支持它们.)

(Shimport — disclaimer: I wrote it — allows you to use native modules even in the very few browsers that don't support them.)

这篇关于如何处理Svelte的自定义元素交叉依赖关系以及在'CustomElementRegistry'上无法执行'define'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！