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 )