Svelte を使用したスタンドアロン ウィジェットの作成: 私の旅とソリューション

過去数か月間 私は、フルタイムの仕事でスタンドアロン ウィジェットを作成および管理する方法を決定するという任務を負っていました。それらが機能していることを確認するのは比較的簡単でしたが、それらを維持するのはまったく別の課題であることがすぐにわかりました

これを念頭に置いて、私は空き時間にサイドプロジェクトを開始し、それをオープンソースにしました。これにより、ウィジェットの品質を確保するのに役立つ洞察と戦略を共有することができました。

最初はどうやって作ったのでしょうか？

私のウィジェットには高レベルの反応性が必要だったので、Svelte コンポーネント API に大きく依存し、バンドルには Rollup を使用しました。 「次の問題が発生するまでは、単純かつ直接的なものでした:

• 未使用の CSS が時間の経過とともに増えていき、目的のコンポーネントの CSS だけがバンドルされているかどうかもわかりませんでした。

• 厳密な型付けを行わずにウィジェットを介して JavaScript を処理するのは困難です。 jwt デコードや認証などのいくつかのユーティリティを共有する必要があったため、急速に混乱してきました。

どうやって変更したのでしょうか？

私は、いくつかのデフォルトを確立する方法、そしてより重要なことに、型システムを統合する方法を検討し始めました。これが私のサイド プロジェクトである svelte-standalone の作成につながりました。

svelte-standalone の目標は次のとおりです:

• バンドルするときは、適切に縮小された CSS を確認し、未使用の CSS を削除してください。
• 選択した型システムがすべてのアプリで適切にサポートされ、再利用されていることを確認します。

注: 選択した型システムは TypeScript でした。

• 単体テストと統合テストを確実に行います。
• ロールアップ解析の前後にウィジェットを視覚的に確認できることを確認します。

どうやってそれらすべてを達成したのでしょうか?

Rollup プラグインおよび Svelte プリプロセッサと TypeScript の互換性を確保した後、一歩下がってプロジェクトを主要なステップに分割しました。基本的に私は以下を持っていました:

1. .svelte.
2. .svelte ファイルのインスタンスを開始し、それを本文に追加する embed.js ファイル。

そこから、埋め込みファイルが基本的にすべてのウィジェットにデフォルトで複製されていることに気づき、それらを生成し始めました。そこで、codegen ツールを使用して、私の細いファイルと、アプリ全体で型を処理したいという要望に基づいて 3 つのファイルを生成することができました。

1. declaration.d.ts - svelte コンポーネントを直接インポートし、SvelteComponent 型を使用してラップできるようにしたため、svelte コンポーネントをデフォルトで強い型付けにしました。
2. types.ts - Declaration.d.ts から宣言された props に基づいて、defaultConfig を記述できるようになりました。
3. embed.ts - すべてのウィジェットに対して標準的な方法でコンポーネントの開始/停止を有効にしました!

そして出来上がりです！このアプローチにより、型システムの問題が解決され、ウィジェットの保守性が向上しました。

CSS の課題にどのように対処したか:

私が直面した CSS 関連の主な課題は次のとおりです。手間をかけずに CSS をパージおよび縮小するにはどうすればよいでしょうか?共同作業が容易で、さまざまな環境に統合しやすい CSS を作成するにはどうすればよいですか?

解決策は非常に簡単で、Tailwind CSS を使用するだけです。

このアプローチにより、次の利点がわかりました:

• スタイルの競合はもう不要: Tailwind を使用することで、スタイルの競合について心配する必要がなくなりました。たとえば、ブートストラップに大きく依存しているレガシー アプリを扱う場合、ウィジェットにプレフィックスと重要なフラグを適用するだけで競合が解決されました。

• シームレスな統合: ウィジェットを別の Tailwind アプリにインポートするときに、特定の Tailwind ディレクティブを簡単に省略してバンドル サイズを減らすことができました。

• 簡単なパージと縮小化: 縮小化が簡単になり、Tailwind の組み込み PurgeCSS を使用して、各ウィジェットのコンテンツ フラグを適切に設定するだけで済みました。これにより、必要なスタイルのみが最終バンドルに含まれるようになりました。

テストの問題にどのように対処したか?

単体テスト、統合テスト、ビジュアル テストを含む、ウィジェットの包括的なテストを確実に行うという課題に直面しました。

私の主な目標は、ロールアップでコンポーネントを処理する前と後の両方でコンポーネントを視覚化することでした。これを達成するために、次の手順を実行しました:

• 厳密に型指定された Storybook: 私は、declaration.d.ts ファイルと Types.ts ファイルに基づいて、厳密に型指定された Storybook を実装しました。これにより、各ウィジェットのデフォルト ストーリーを自動的に生成するのが便利になりました。

• Vite 統合: Vite を使用して、バンドルされたコンポーネントを Svelte ルートにロードしました。 TypeScript ファイルに基づいてデフォルト ルート コンポーネントを生成することも便利でした。

以上です!ぜひフィードバックをいただければ幸いです。 svelte-standalone もチェックしてください。

ご質問、ご提案、懸念事項がございましたら、お気軽にご連絡ください。

以上がSvelte を使用したスタンドアロン ウィジェットの作成: 私の旅とソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。