やり方

バンドラー

Viteまたはwebpackでカードを使う方法です。要素は、ブラウザーで動くコードの中で1回インポートするだけで、ほかに設定はいりません。

バンドラーはすべてをnode_modulesから解決します。@johnmorrisdotca/fuda-cards/element（コレクションなら/collection-elementも）を、ブラウザーで動く場所のどこかで1回インポートしてください。パッケージは要素のファイルを副作用ありと印してあるので、インポートしたものを何も使わなくても、バンドラーはそのインポートを残します。どちらの例も、pnpm test:usageがnpmの作るとおりのパッケージからビルドし、できたページを開いて確かめています。

Vite

import "@johnmorrisdotca/fuda-cards/element";
import { type CardOptions, cardAttributes } from "@johnmorrisdotca/fuda-cards";

const options: CardOptions = { title: "Explorer One", category: "ROCKET", stack: 10, wear: "near-mint" };
const card = document.createElement("fuda-card");
for (const [name, value] of Object.entries(cardAttributes(options))) card.setAttribute(name, value);
document.getElementById("app")?.append(card);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fuda Cards with Vite</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

webpack

import "@johnmorrisdotca/fuda-cards/element";

const card = document.createElement("fuda-card");
card.setAttribute("title", "Explorer One");
card.setAttribute("variant", "cosmic");
document.body.append(card);

import { fileURLToPath } from "node:url";

export default {
  mode: "production",
  entry: "./src/index.js",
  output: { path: fileURLToPath(new URL("./dist", import.meta.url)), filename: "main.js" },
};

得られるもの

山、傷み、カードの山のためのモジュールは、カードがそれを必要としたときだけ読み込まれるので、ふつうのカードは軽く済みます。各エントリーポイントの大きさはアーキテクチャにあります。

ソースを見る GitHub で編集@johnmorrisdotca/fuda-cards 0.11.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。