svelte web components template

Svelte-Web-Components-Themplate

使用VITE，SVELTE和打字稿构建可共享Web组件库的基本模板。

该模板生成的香草网络组件比与普通的HTML或在任何主要框架中（例如React，Angular，Vue或Svelte）一起使用（请参阅兼容性）。

如何使用此模板

您可以通过在GitHub上选择使用此模板按钮直接从此模板中创建新的GitHub存储库。

您也可以通过以下命令在本地克隆它：

npx degit sinedied/svelte-web-components-template#main my-component-lib
cd my-component-lib
npm install

您的组件源代码属于lib/文件夹。仅具有.wc.svelte扩展名的组件将作为Web组件导出，并在您的库中可用。这意味着您还可以将常规的Svelte组件与.svelte扩展名一起用作子组件，以获得您的实现详细信息。

您可以将其他组件添加到lib文件夹并编辑lib/index.js来添加其他组件。

测试您的组件

您可以使用以下方式启动开发服务器

npm start

然后将浏览器打开到Localhost：5173。

这将构建位于demo/文件夹中的演示应用程序，您可以在开发过程中使用和测试Web组件。

如果需要单元测试，则可以查看Jest和Jest测试库。

将构建的Web组件与演示应用程序一起使用

为组件开发和测试提供了演示应用程序，这就是为什么它直接从lib/文件夹中导入.svelte文件的原因。

如果愿意，可以通过编辑dist/ demo/src/App.svelte并替换import '../../lib';用import '../../../dist/lib';如果您启用了bundleComponents选项，或者使用import import '../../dist/MyComponent.wc.js';否则。

您还必须确保运行npm run build脚本以首先生成dist/lib/文件夹。

建立图书馆

命令npm run build将在dist/lib/文件夹中创建Web组件库。它同时创建了适用于Bundler（非限制）的ES模块（ dist/lib/<your-lib>.js ），一个缩小的ES模块（ dist/lib/<your-lib>.min.js ）和常规的UMD脚本（ dist/lib/<your-lib>.umd.js ）。

由于package.json中的prepublishOnly脚本条目，执行npm publish以分发您的库时会自动调用构建。

注释和限制

该模板不能为较旧的浏览器支撑提供任何Web组件多填充。通常最好将该任务遗漏给主机应用程序，因此为什么将其排除在外。

道具

Web组件接受的任何道具会自动转换为元素属性。由于骆驼或Pascalcase在HTML中不起作用，因此您必须确保在小写中命名道具。

 < script >
  export let myvalue = "Default" ;
</ script >

事件

SVELTE语法事件用于聆听类似on:myevent不适用于从Svelte Web组件中派遣的事件（＃3119）。

您需要通过创建CustomEvent并派遣它来使用解决方法。

这是一个例子：

// MyComponent.wc.svelte
< svelte:options tag =" my-component " />
< script >
  import { get_current_component } from "svelte/internal" ;
  const component = get_current_component ( ) ;
  
  // example function for dispatching events
  const dispatchEvent = ( name , detail ) =>
    component . dispatchEvent ( new CustomEvent ( name , { detail } ) ) ;
</ script >
< button on:click = {() = > dispatchEvent("test", "Hello!")} >
  Click to dispatch event
</ button > 

将每个组件构建到自己的模块中

默认情况下，此模板将将所有组件构建到一个模块中。

如果您希望将每个组件构建到自己的模块中，则可以通过将环境变量BUNDLE_COMPONENTS设置为false或编辑vite.config.js并将bundleComponents选项设置为false来做到这一点。

然后，您还需要用以下方式替换packages/lib/index.ts的内容

 export default ( ) => {
  import ( './MyComponent.wc.svelte' ) ;
  // Import each of your component this way
} ;

这将启用代码拆分，并将为dist/lib/文件夹中的每个组件生成一个ES模块。

随着您更改组件的导出方式，您还需要替换import '../../lib'; demo/src/App.svelte中的语句以import '../../lib/MyComponent.wc.svelte'; 。

为什么在TS模板中启用allowJs ？

虽然allowJs: false确实会阻止项目中使用.js文件，但它并不能阻止在.svelte文件中使用JavaScript语法。此外，它将迫使checkJs: false ，带来最糟糕的两全其美：不能保证整个代码库是打字稿，并且对现有的JavaScript的打字更糟。此外，在某些有效的用例中，混合代码库可能相关。

为什么HMR不保留我的本地组件状态？

HMR状态保存带有许多陷阱！由于其通常令人惊讶的行为，因此svelte-hmr情况下，它@sveltejs/vite-plugin-svelte情况下已被禁用。您可以在此处阅读详细信息。

如果您的状态要保留在组件中很重要，请考虑创建一个不会由HMR代替的外部商店。

 // store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable ( 0 )