svelte web components template

Svelte-Web-Components-Template

Vite、Svelte、およびTypeScriptを使用して、共有可能なWebコンポーネントライブラリを構築するためのベーステンプレート。

このテンプレートは、Plain HTMLで使用できるよりもバニラWebコンポーネントを生成したり、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に開きます。

これにより、開発中にWebコンポーネントを使用およびテストできるdemo/フォルダーにあるデモアプリケーションが構築されます。

ユニットテストが必要な場合は、JestとJest Testing Libraryをご覧ください。

デモアプリで構築されたWebコンポーネントを使用します

デモアプリケーションはコンポーネントの開発とテスト用に提供されているため、デフォルトでlib/フォルダーから.svelteファイルを直接インポートします。

必要に応じて、 demo/src/App.svelteを編集し、インポートを置き換えることにより、代わりにdist/フォルダーから構築されたWebコンポーネントをインポートできますimport '../../lib'; import '../../../dist/lib'; bundleComponentsオプションが有効になっている場合、またはimport import '../../dist/MyComponent.wc.js';さもないと。

また、最初にdist/lib/フォルダーを生成するには、 npm run buildスクリプトを実行する必要があります。

図書館の構築

Command npm run build dist/lib/フォルダーにWebコンポーネントライブラリを作成します。 Bundler（no-Minified）、Minified ESモジュール（ dist/lib/<your-lib>.js ）、および通常のumdスクリプト（ dist/lib/<your-lib>.min.js ）に適したESモジュール（ dist/lib/<your-lib>.umd.js ）の両方を作成します。

package.jsonのprepublishOnlyスクリプトエントリのおかげで、ビルドはnpm publishを実行するときにライブラリを配布するときに自動的に呼び出されます。

メモと制限

このテンプレートでは、古いブラウザーサポート用のWebコンポーネントポリフィルを提供しません。通常、そのタスクをホストアプリケーションに任せることが最善です。したがって、なぜそれらが除外されているのか。

小道具

Webコンポーネントが受け入れた小道具は、自動的に要素属性に変換されます。 CamelcaseまたはPascalcaseはHTMLでは機能しないため、小文字で小道具に名前を付ける必要があります。

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

イベント

on:myevent myeventのようなイベントを聴くためのSvelte構文イベントは、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 )