@wcstack/server 0.2.3

package/README.ja.md

@@ -0,0 +1,354 @@
+# @wcstack/server
+
+**Web Components がサーバーでレンダリングされたら？**
+
+`<wcs-state>` テンプレートがブラウザに届く前に完全にレンダリングされる世界を想像してください。データは取得済み、バインディングは解決済み、リストは展開済み、条件分岐は評価済み。ユーザーは即座にコンテンツを目にし、クライアントはサーバーが中断した地点からシームレスに引き継ぎます。
+
+`@wcstack/server` はそれを実現します。既存の `@wcstack/state` テンプレートを happy-dom 上で実行し、ハイドレーションデータを埋め込んだレンダリング済み HTML を生成。クライアントはフリッカーなしでリアクティビティを再開します。特別なテンプレート構文もサーバー専用のマークアップも不要 — いつも書いている HTML がそのまま使えます。
+
+## 特徴
+
+### 基本機能
+- **テンプレートの完全レンダリング**: `@wcstack/state` のバインディングをサーバーサイドで実行 — テキスト、属性、`for` ループ、`if`/`elseif`/`else` 条件分岐、フィルタ、Mustache `{{ }}` 構文に対応
+- **ハイドレーションデータの自動生成**: 状態スナップショット、テンプレートフラグメント、プロパティマップを含む `<wcs-ssr>` 要素を生成し、クライアント側でシームレスにハイドレーション
+- **非同期データ取得**: `$connectedCallback` 内の `fetch()` に対応 — サーバーはすべての非同期処理の完了を待ってからレンダリング
+- **RenderCore**: `wc-bindable` プロトコルに準拠したヘッドレスのイベント駆動レンダリングクラス。`html` / `loading` / `error` の状態を監視可能
+- **ブラウザ依存ゼロ**: Node.js 上で動作し、ランタイム依存は happy-dom のみ
+
+### ユニークな機能
+- **ドロップイン SSR**: クライアント側テンプレートの変更不要。`<wcs-state>` に `enable-ssr` を追加して `renderToString()` で呼び出すだけ
+- **テンプレートフラグメントの保存**: `for`/`if` テンプレートのソースを UUID 参照付きでキャプチャし、クライアント側で構造ディレクティブを再実行可能に
+- **プロパティハイドレーション**: 属性では表現できない DOM プロパティ（`innerHTML` など）を個別にシリアライズし、ハイドレーション時に復元
+- **wc-bindable プロトコル**: `RenderCore` は標準プロトコルでレンダリング状態を公開し、サーバーでもクライアントでも同じ `bind()` パターンで利用可能
+
+## インストール
+
+```bash
+npm install @wcstack/server
+```
+
+## クイックスタート
+
+### `renderToString()` — ワンショットレンダリング
+
+```javascript
+import { renderToString } from "@wcstack/server";
+
+const html = await renderToString(`
+  <wcs-state json='{"items":["Apple","Banana","Cherry"]}' enable-ssr>
+  </wcs-state>
+  <ul>
+    <template data-wcs="for: items">
+      <li data-wcs="textContent: items.*"></li>
+    </template>
+  </ul>
+`);
+
+console.log(html);
+// ハイドレーションデータ付きのレンダリング済み HTML
+```
+
+### `RenderCore` — 監視可能なレンダリング（キャッシュ付き）
+
+```javascript
+import { RenderCore } from "@wcstack/server";
+
+const renderer = new RenderCore();
+
+// wc-bindable プロトコル経由で状態変更をリッスン
+renderer.addEventListener("wcs-render:loading-changed", (e) => {
+  console.log("loading:", e.detail);
+});
+
+renderer.addEventListener("wcs-render:html-changed", (e) => {
+  console.log("rendered:", e.detail.length, "bytes");
+});
+
+// レンダリングしてキャッシュ
+await renderer.render(templateHtml);
+
+// 以降の読み取りはキャッシュを利用
+console.log(renderer.html);
+```
+
+## API リファレンス
+
+### `renderToString(html: string): Promise<string>`
+
+`@wcstack/state` テンプレートを含む HTML 文字列をレンダリングします。`<wcs-state enable-ssr>` を持つ要素のハイドレーションデータ付きのレンダリング済み HTML を返します。
+
+**レンダリングパイプライン:**
+1. happy-dom ウィンドウを作成し、ブラウザグローバルをインストール
+2. HTML をパースし、すべての `<wcs-state>` 要素の `connectedCallback` を発火
+3. すべての `$connectedCallback` プロミス（`fetch()` 呼び出し含む）の完了を待機
+4. `buildBindings` の完了を待機
+5. `enable-ssr` を持つ状態に `<wcs-ssr>` 要素を生成
+6. グローバルを復元し、レンダリング済み HTML を返却
+
+### `RenderCore`
+
+`EventTarget` を継承したヘッドレスレンダリングクラス。`wc-bindable` プロトコルを実装。
+
+| プロパティ | 型 | 説明 |
+|----------|------|-------------|
+| `html` | `string \| null` | レンダリング済み HTML（`render()` 後にキャッシュ） |
+| `loading` | `boolean` | レンダリング中は `true` |
+| `error` | `Error \| null` | 直前の `render()` のエラー（エラーがあれば） |
+
+| メソッド | 戻り値 | 説明 |
+|--------|---------|-------------|
+| `render(html)` | `Promise<string \| null>` | テンプレートをレンダリングして結果をキャッシュ。エラー時は `null` を返却 |
+
+| イベント | Detail | 説明 |
+|-------|--------|-------------|
+| `wcs-render:html-changed` | `string` | レンダリング成功時に発火 |
+| `wcs-render:loading-changed` | `boolean` | ローディング状態の変更時に発火 |
+| `wcs-render:error` | `Error` | レンダリング失敗時に発火 |
+
+**wc-bindable 宣言:**
+
+```typescript
+static wcBindable = {
+  protocol: "wc-bindable",
+  version: 1,
+  properties: [
+    { name: "html", event: "wcs-render:html-changed" },
+    { name: "loading", event: "wcs-render:loading-changed" },
+    { name: "error", event: "wcs-render:error" },
+  ],
+};
+```
+
+### ヘルパー関数
+
+| 関数 | 説明 |
+|----------|-------------|
+| `installGlobals(window)` | happy-dom のグローバルを `globalThis` にインストール。復元関数を返す |
+| `extractStateData(stateEl)` | `<wcs-state>` 要素からデータプロパティを抽出（`$` プレフィックスのキーと関数は除外） |
+
+### 定数
+
+| 名前 | 説明 |
+|------|-------------|
+| `GLOBALS_KEYS` | SSR 中にインストールされるブラウザグローバルキーの配列（`document`、`HTMLElement`、`Node` 等） |
+| `VERSION` | `package.json` から取得したパッケージバージョン文字列 |
+
+## SSR 出力構造
+
+`<wcs-state>` に `enable-ssr` 属性がある場合、`renderToString()` はその直前にハイドレーションデータを含む `<wcs-ssr>` 要素を挿入します：
+
+```html
+<!-- renderToString() が生成 -->
+<wcs-ssr name="default" version="0.1.0">
+
+  <!-- 状態スナップショット -->
+  <script type="application/json">{"items":["Apple","Banana","Cherry"]}</script>
+
+  <!-- テンプレートフラグメント（クライアント側での再実行用） -->
+  <template id="uuid-1234" data-wcs="for: items">
+    <li data-wcs="textContent: items.*"></li>
+  </template>
+
+  <!-- 属性で代替不可なプロパティ（オプション） -->
+  <script type="application/json" data-wcs-ssr-props>
+    {"wcs-ssr-0": {"innerHTML": "<b>rich</b>"}}
+  </script>
+
+</wcs-ssr>
+
+<wcs-state json='...' enable-ssr></wcs-state>
+
+<!-- レンダリング済み出力（即座に表示） -->
+<ul>
+  <li>Apple</li>
+  <li>Banana</li>
+  <li>Cherry</li>
+</ul>
+```
+
+クライアント側の `@wcstack/state` はハイドレーション時に `<wcs-ssr>` 要素を読み取り、状態とテンプレートを復元し、再レンダリングなしでリアクティビティを再開します。
+
+## サーバー統合の例
+
+```javascript
+import { createServer } from "node:http";
+import { RenderCore } from "@wcstack/server";
+
+const renderer = new RenderCore();
+
+const template = `
+  <wcs-state enable-ssr>
+    <script type="module">
+      export default {
+        async $connectedCallback() {
+          const res = await fetch("http://localhost:3000/api/data");
+          this.items = await res.json();
+        },
+        items: []
+      };
+    </script>
+  </wcs-state>
+  <ul>
+    <template data-wcs="for: items">
+      <li data-wcs="textContent: items.*"></li>
+    </template>
+  </ul>
+`;
+
+createServer(async (req, res) => {
+  if (!renderer.html) {
+    await renderer.render(template);
+  }
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(renderer.html);
+}).listen(3000);
+```
+
+## 入力 HTML のルール
+
+- `<body>` の中身だけを渡す（`<html>`, `<head>`, `<body>` タグは含めない）
+- `<script>` / `<link>` による外部リソース読み込みは実行されない
+  → 必要なパッケージは `options.bootstraps` で明示的に渡す
+
+## SSR でできること
+
+### 状態の初期化とデータ取得
+
+- `<wcs-state>` の状態ロード（json 属性, src 属性, inline `<script type="module">`）
+- `$connectedCallback` でのサーバーサイド fetch（API 呼び出し等）
+
+```html
+<!-- JSON 直接指定 -->
+<wcs-state enable-ssr json='{"title":"Hello"}'></wcs-state>
+
+<!-- $connectedCallback で API からデータ取得 -->
+<!-- $connectedCallback は状態オブジェクトのメソッドとして定義、this が state proxy -->
+<wcs-state enable-ssr>
+  <script type="module">
+    export default {
+      async $connectedCallback() {
+        const res = await fetch('/api/users');
+        this.users = await res.json();
+      }
+    };
+  </script>
+</wcs-state>
+```
+
+### wcs-fetch を使ったサーバー通信
+
+- `<wcs-fetch>` の auto-fetch（`manual` なし）はサーバーでも実行される
+- `manual` + `$connectedCallback` で明示的に制御する場合：
+
+```html
+<wcs-fetch id="api" url="/api/users" manual></wcs-fetch>
+<wcs-state enable-ssr>
+  <script type="module">
+    export default {
+      async $connectedCallback() {
+        const el = document.getElementById('api');
+        this.users = await el.fetch();
+      }
+    };
+  </script>
+</wcs-state>
+```
+
+> ※ `bootstraps` オプションに `bootstrapFetch` を含める必要あり
+
+### バインディングと構造レンダリング
+
+- `data-wcs` バインディングの適用（text, attribute, class, style, property）
+- `<template data-wcs="for:">` / `if:` / `elseif:` / `else:` の構造レンダリング
+
+```html
+<ul>
+  <template data-wcs="for: users">
+    <li data-wcs="textContent: .name"></li>
+  </template>
+</ul>
+<template data-wcs="if: isAdmin">
+  <div class="admin-panel">...</div>
+</template>
+```
+
+### ハイドレーション
+
+- `enable-ssr` 付き `<wcs-state>` の `<wcs-ssr>` メタデータ自動生成
+- クライアント側でのハイドレーション（再レンダリングなしでバインディング復元）
+- `enable-ssr` を外した `<wcs-state>` はクライアントのみで動作（部分 CSR）
+
+### カスタム要素の待機
+
+- `static hasConnectedCallbackPromise = true` プロトコル準拠の全カスタム要素を自動待機
+
+## SSR でできないこと
+
+- `<head>` 内の `<script src="...">` や `<link>` の自動実行
+- ブラウザ固有 API（localStorage, sessionStorage, navigator 等）
+- Shadow DOM のレンダリング（Declarative Shadow DOM 非対応）
+- イベントハンドラの登録（クライアント側のハイドレーションで復元）
+- `<wcs-autoloader>` による動的コンポーネント読み込み
+
+## HTML の分割パターン
+
+`renderToString` には `<body>` の中身だけを渡し、`<head>` や `<script>` タグは外側のテンプレートで囲む：
+
+```javascript
+// server.js
+const ssrBody = await renderToString(template, {
+  baseUrl: 'http://localhost:3001',
+});
+const page = `<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <script type="module" src="/packages/state/dist/auto.js"></script>
+</head>
+<body>${ssrBody}</body>
+</html>`;
+```
+
+### 複数パッケージを使う場合
+
+```javascript
+import { bootstrapState, getBindingsReady } from '@wcstack/state';
+import { bootstrapFetch } from '@wcstack/fetch';
+
+const ssrBody = await renderToString(template, {
+  baseUrl: 'http://localhost:3001',
+  bootstraps: [bootstrapState, bootstrapFetch],
+  ready: [(doc) => getBindingsReady(doc)],
+});
+```
+
+## 仕組み
+
+### レンダリングパイプライン
+
+1. **グローバルのセットアップ**: happy-dom の `Window` を作成し、ブラウザグローバル（`document`、`HTMLElement`、`MutationObserver` 等）を `globalThis` に一時的にインストール。`URL.createObjectURL` を無効化し、インラインスクリプトの base64 data URL フォールバックを強制。
+
+2. **SSR モード**: `<html>` 要素に `data-wcs-server` 属性を設定。`@wcstack/state` はこの属性を検出して SSR 動作を有効化。
+
+3. **ブートストラップ**: ユーザー提供の bootstrap 関数を呼び出す（省略時は `bootstrapState()` をデフォルト使用）。
+
+4. **HTML パースとコールバック**: `document.body.innerHTML` に HTML をセットすることで、happy-dom の要素ライフサイクルが発火。各 `<wcs-state>` がデータソースをロードし `$connectedCallback` を実行。`hasConnectedCallbackPromise` を持つ全カスタム要素を待機。
+
+5. **Ready**: ユーザー提供の ready 関数を待機（デフォルトは `getBindingsReady()`） — テキスト補間、属性マッピング、リスト展開、条件評価。
+
+6. **SSR メタデータ**: 各 `<wcs-state enable-ssr>` が `connectedCallback` 内で自動的に `<wcs-ssr>` 要素を生成。
+
+7. **クリーンアップ**: 元のグローバルを復元し、happy-dom ウィンドウを閉じる。
+
+### クライアント側のハイドレーション
+
+クライアント側の `@wcstack/state` は `<wcs-ssr>` 要素を検出し、以下を行います：
+1. JSON スナップショットから状態を復元（ネットワークリクエストをスキップ）
+2. UUID 参照を使ってテンプレートフラグメントを再接続
+3. props スクリプトから属性で代替不可なプロパティを適用
+4. 通常のリアクティブバインディングを再開
+
+レンダリング済みの DOM は即座に表示されます — ハイドレーションはインタラクティビティの復元のみを行います。
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,354 @@
+# @wcstack/server
+
+**What if Web Components rendered on the server?**
+
+Imagine a future where your `<wcs-state>` templates are fully rendered before they reach the browser — data is fetched, bindings are resolved, lists are expanded, conditionals are evaluated. The user sees content instantly, and the client picks up exactly where the server left off.
+
+That's what `@wcstack/server` explores. It runs your existing `@wcstack/state` templates through happy-dom, produces fully-rendered HTML with embedded hydration data, and lets the client resume reactivity with zero flicker. No special template syntax, no server-specific markup — just the same HTML you already write.
+
+## Features
+
+### Basic Features
+- **Full Template Rendering**: Runs `@wcstack/state` bindings server-side — text, attributes, `for` loops, `if`/`elseif`/`else` conditionals, filters, and mustache `{{ }}` syntax.
+- **Automatic Hydration Data**: Generates `<wcs-ssr>` elements containing state snapshots, template fragments, and property maps for seamless client-side hydration.
+- **Async Data Fetching**: Supports `$connectedCallback` with `fetch()` — server waits for all async operations before rendering.
+- **RenderCore**: A headless, event-driven rendering class that follows the `wc-bindable` protocol for observable `html` / `loading` / `error` state.
+- **Zero Browser Dependencies**: Runs in Node.js with happy-dom as the only runtime dependency.
+
+### Unique Features
+- **Drop-in SSR**: No changes to your client-side templates. Add `enable-ssr` to `<wcs-state>` and render with `renderToString()`.
+- **Template Fragment Preservation**: `for`/`if` template sources are captured with UUID references so the client can re-execute structural directives.
+- **Property Hydration**: DOM properties that can't be expressed as attributes (e.g., `innerHTML`) are serialized separately and restored during hydration.
+- **wc-bindable Protocol**: `RenderCore` exposes rendering state via the standard protocol, enabling the same `bind()` pattern on both server and client.
+
+## Installation
+
+```bash
+npm install @wcstack/server
+```
+
+## Quick Start
+
+### `renderToString()` — One-shot rendering
+
+```javascript
+import { renderToString } from "@wcstack/server";
+
+const html = await renderToString(`
+  <wcs-state json='{"items":["Apple","Banana","Cherry"]}' enable-ssr>
+  </wcs-state>
+  <ul>
+    <template data-wcs="for: items">
+      <li data-wcs="textContent: items.*"></li>
+    </template>
+  </ul>
+`);
+
+console.log(html);
+// Fully rendered HTML with <wcs-ssr> hydration data
+```
+
+### `RenderCore` — Observable rendering with caching
+
+```javascript
+import { RenderCore } from "@wcstack/server";
+
+const renderer = new RenderCore();
+
+// Listen to state changes via wc-bindable protocol
+renderer.addEventListener("wcs-render:loading-changed", (e) => {
+  console.log("loading:", e.detail);
+});
+
+renderer.addEventListener("wcs-render:html-changed", (e) => {
+  console.log("rendered:", e.detail.length, "bytes");
+});
+
+// Render and cache
+await renderer.render(templateHtml);
+
+// Subsequent reads use the cached result
+console.log(renderer.html);
+```
+
+## API Reference
+
+### `renderToString(html: string): Promise<string>`
+
+Renders an HTML string containing `@wcstack/state` templates. Returns fully-rendered HTML with hydration data for any `<wcs-state enable-ssr>` elements.
+
+**Rendering pipeline:**
+1. Creates a happy-dom window and installs browser globals
+2. Parses HTML and triggers `connectedCallback` on all `<wcs-state>` elements
+3. Awaits all `$connectedCallback` promises (including `fetch()` calls)
+4. Waits for `buildBindings` to complete
+5. Generates `<wcs-ssr>` elements for states with `enable-ssr`
+6. Restores globals and returns the rendered HTML
+
+### `RenderCore`
+
+Headless rendering class extending `EventTarget`. Implements the `wc-bindable` protocol.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `html` | `string \| null` | Rendered HTML (cached after `render()`) |
+| `loading` | `boolean` | `true` while rendering is in progress |
+| `error` | `Error \| null` | Error from the last `render()` call, if any |
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `render(html)` | `Promise<string \| null>` | Renders the template and caches the result. Returns `null` on error. |
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `wcs-render:html-changed` | `string` | Fired when rendering completes successfully |
+| `wcs-render:loading-changed` | `boolean` | Fired when loading state changes |
+| `wcs-render:error` | `Error` | Fired when rendering fails |
+
+**wc-bindable declaration:**
+
+```typescript
+static wcBindable = {
+  protocol: "wc-bindable",
+  version: 1,
+  properties: [
+    { name: "html", event: "wcs-render:html-changed" },
+    { name: "loading", event: "wcs-render:loading-changed" },
+    { name: "error", event: "wcs-render:error" },
+  ],
+};
+```
+
+### Helper Functions
+
+| Function | Description |
+|----------|-------------|
+| `installGlobals(window)` | Installs happy-dom globals on `globalThis`. Returns a restore function. |
+| `extractStateData(stateEl)` | Extracts data properties from a `<wcs-state>` element (excludes `$`-prefixed keys and functions). |
+
+### Constants
+
+| Name | Description |
+|------|-------------|
+| `GLOBALS_KEYS` | Array of browser global keys installed during SSR (`document`, `HTMLElement`, `Node`, etc.) |
+| `VERSION` | Package version string from `package.json` |
+
+## SSR Output Structure
+
+When a `<wcs-state>` has the `enable-ssr` attribute, `renderToString()` inserts a `<wcs-ssr>` element immediately before it containing all hydration data:
+
+```html
+<!-- Generated by renderToString() -->
+<wcs-ssr name="default" version="0.1.0">
+
+  <!-- State snapshot -->
+  <script type="application/json">{"items":["Apple","Banana","Cherry"]}</script>
+
+  <!-- Template fragments (for client-side re-execution) -->
+  <template id="uuid-1234" data-wcs="for: items">
+    <li data-wcs="textContent: items.*"></li>
+  </template>
+
+  <!-- Non-attribute properties (optional) -->
+  <script type="application/json" data-wcs-ssr-props>
+    {"wcs-ssr-0": {"innerHTML": "<b>rich</b>"}}
+  </script>
+
+</wcs-ssr>
+
+<wcs-state json='...' enable-ssr></wcs-state>
+
+<!-- Rendered output (visible immediately) -->
+<ul>
+  <li>Apple</li>
+  <li>Banana</li>
+  <li>Cherry</li>
+</ul>
+```
+
+The client-side `@wcstack/state` reads the `<wcs-ssr>` element during hydration, restores state and templates, and resumes reactivity without re-rendering.
+
+## Server Integration Example
+
+```javascript
+import { createServer } from "node:http";
+import { RenderCore } from "@wcstack/server";
+
+const renderer = new RenderCore();
+
+const template = `
+  <wcs-state enable-ssr>
+    <script type="module">
+      export default {
+        async $connectedCallback() {
+          const res = await fetch("http://localhost:3000/api/data");
+          this.items = await res.json();
+        },
+        items: []
+      };
+    </script>
+  </wcs-state>
+  <ul>
+    <template data-wcs="for: items">
+      <li data-wcs="textContent: items.*"></li>
+    </template>
+  </ul>
+`;
+
+createServer(async (req, res) => {
+  if (!renderer.html) {
+    await renderer.render(template);
+  }
+  res.writeHead(200, { "Content-Type": "text/html" });
+  res.end(renderer.html);
+}).listen(3000);
+```
+
+## Input HTML Rules
+
+- Pass only the contents of `<body>` — do not include `<html>`, `<head>`, or `<body>` tags.
+- `<script>` / `<link>` external resource loading is not executed.
+  → Provide required packages via `options.bootstraps`.
+
+## What SSR Can Do
+
+### State Initialization & Data Fetching
+
+- Load `<wcs-state>` from `json` attribute, `src` attribute, or inline `<script type="module">`
+- Execute `$connectedCallback` for server-side fetch (API calls, etc.)
+
+```html
+<!-- Direct JSON -->
+<wcs-state enable-ssr json='{"title":"Hello"}'></wcs-state>
+
+<!-- Fetch data from API in $connectedCallback -->
+<!-- $connectedCallback is defined as a method on the state object; `this` is the state proxy -->
+<wcs-state enable-ssr>
+  <script type="module">
+    export default {
+      async $connectedCallback() {
+        const res = await fetch('/api/users');
+        this.users = await res.json();
+      }
+    };
+  </script>
+</wcs-state>
+```
+
+### Server Communication with wcs-fetch
+
+- `<wcs-fetch>` auto-fetch (without `manual`) also executes on the server
+- Use `manual` + `$connectedCallback` for explicit control:
+
+```html
+<wcs-fetch id="api" url="/api/users" manual></wcs-fetch>
+<wcs-state enable-ssr>
+  <script type="module">
+    export default {
+      async $connectedCallback() {
+        const el = document.getElementById('api');
+        this.users = await el.fetch();
+      }
+    };
+  </script>
+</wcs-state>
+```
+
+> Note: `bootstrapFetch` must be included in the `bootstraps` option.
+
+### Bindings & Structural Rendering
+
+- `data-wcs` binding application (text, attribute, class, style, property)
+- `<template data-wcs="for:">` / `if:` / `elseif:` / `else:` structural rendering
+
+```html
+<ul>
+  <template data-wcs="for: users">
+    <li data-wcs="textContent: .name"></li>
+  </template>
+</ul>
+<template data-wcs="if: isAdmin">
+  <div class="admin-panel">...</div>
+</template>
+```
+
+### Hydration
+
+- Automatic `<wcs-ssr>` metadata generation for `<wcs-state enable-ssr>`
+- Client-side hydration restores bindings without re-rendering
+- `<wcs-state>` without `enable-ssr` runs client-only (partial CSR)
+
+### Custom Element Waiting
+
+- Automatically awaits all custom elements with `static hasConnectedCallbackPromise = true`
+
+## What SSR Cannot Do
+
+- Execute `<script src="...">` or `<link>` in `<head>`
+- Access browser-specific APIs (localStorage, sessionStorage, navigator, etc.)
+- Render Shadow DOM (Declarative Shadow DOM not supported)
+- Register event handlers (restored via client-side hydration)
+- Load components dynamically via `<wcs-autoloader>`
+
+## HTML Splitting Pattern
+
+`renderToString` receives only the `<body>` contents. Wrap the result with `<head>` and `<script>` tags on the outside:
+
+```javascript
+// server.js
+const ssrBody = await renderToString(template, {
+  baseUrl: 'http://localhost:3001',
+});
+const page = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script type="module" src="/packages/state/dist/auto.js"></script>
+</head>
+<body>${ssrBody}</body>
+</html>`;
+```
+
+### Using Multiple Packages
+
+```javascript
+import { bootstrapState, getBindingsReady } from '@wcstack/state';
+import { bootstrapFetch } from '@wcstack/fetch';
+
+const ssrBody = await renderToString(template, {
+  baseUrl: 'http://localhost:3001',
+  bootstraps: [bootstrapState, bootstrapFetch],
+  ready: [(doc) => getBindingsReady(doc)],
+});
+```
+
+## How It Works
+
+### Rendering Pipeline
+
+1. **Global Setup**: Creates a happy-dom `Window` and temporarily installs browser globals (`document`, `HTMLElement`, `MutationObserver`, etc.) on `globalThis`. Disables `URL.createObjectURL` to force the base64 data URL fallback for inline scripts.
+
+2. **SSR Mode**: Sets `data-wcs-server` attribute on the `<html>` element. `@wcstack/state` detects this attribute to enable SSR behavior.
+
+3. **Bootstrap**: Calls user-provided bootstrap functions (defaults to `bootstrapState()` if omitted).
+
+4. **HTML Parse & Callback**: Sets `document.body.innerHTML`, which triggers happy-dom's element lifecycle. Each `<wcs-state>` loads its data source and runs `$connectedCallback`. Awaits all custom elements with `hasConnectedCallbackPromise`.
+
+5. **Ready**: Awaits user-provided ready functions (defaults to `getBindingsReady()`) — text interpolation, attribute mapping, list expansion, conditional evaluation.
+
+6. **SSR Metadata**: Each `<wcs-state enable-ssr>` automatically generates a `<wcs-ssr>` element in its `connectedCallback`.
+
+7. **Cleanup**: Restores original globals and closes the happy-dom window.
+
+### Client-Side Hydration
+
+The client-side `@wcstack/state` detects `<wcs-ssr>` elements and:
+1. Restores state from the JSON snapshot (skipping network requests)
+2. Re-attaches template fragments using UUID references
+3. Applies non-attribute properties from the props script
+4. Resumes normal reactive binding
+
+The rendered DOM is visible immediately — hydration only wires up interactivity.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,159 @@
+import { Window } from 'happy-dom';
+
+declare const GLOBALS_KEYS: string[];
+declare function installGlobals(window: Window): () => void;
+declare function installBaseUrl(baseUrl: string): () => void;
+/** @deprecated Use Ssr.extractStateData() from @wcstack/state instead */
+declare function extractStateData(stateEl: any): Record<string, any>;
+type BootstrapFunction = () => void;
+type ReadyFunction = (doc: Document) => Promise<void>;
+interface RenderOptions {
+    /** 相対 URL を解決するベース URL (例: "http://localhost:3001") */
+    baseUrl?: string;
+    /** bootstrap 関数の配列。省略時は @wcstack/state を自動ロード */
+    bootstraps?: BootstrapFunction[];
+    /** バインディング等の非同期初期化完了を待機する関数の配列 */
+    ready?: ReadyFunction[];
+}
+/**
+ * HTML 文字列を SSR レンダリングして返す。
+ *
+ * ## 入力 HTML のルール
+ * - `<body>` の中身だけを渡す（`<html>`, `<head>`, `<body>` タグは含めない）
+ * - `<script>` / `<link>` による外部リソース読み込みは実行されない
+ *   → 必要なパッケージは `options.bootstraps` で明示的に渡す
+ *
+ * ## SSR でできること
+ *
+ * ### 状態の初期化とデータ取得
+ * - `<wcs-state>` の状態ロード（json 属性, src 属性, inline `<script type="module">`）
+ * - `$connectedCallback` でのサーバーサイド fetch（API 呼び出し、DB 問い合わせ等）
+ *
+ * ```html
+ * <!-- JSON 直接指定 -->
+ * <wcs-state enable-ssr json='{"title":"Hello"}'></wcs-state>
+ *
+ * <!-- $connectedCallback で API からデータ取得 -->
+ * <!-- $connectedCallback は状態オブジェクトのメソッドとして定義し、this が state proxy -->
+ * <wcs-state enable-ssr>
+ *   <script type="module">
+ *     export default {
+ *       async $connectedCallback() {
+ *         const res = await fetch('/api/users');
+ *         this.users = await res.json();
+ *       }
+ *     };
+ *   </script>
+ * </wcs-state>
+ * ```
+ *
+ * ### wcs-fetch を使ったサーバー通信
+ * - `<wcs-fetch>` の auto-fetch（`manual` なし）はサーバーでも実行される
+ * - `manual` + `$connectedCallback` で明示的に制御する場合:
+ *
+ * ```html
+ * <wcs-fetch id="api" url="/api/users" manual></wcs-fetch>
+ * <wcs-state enable-ssr>
+ *   <script type="module">
+ *     export default {
+ *       async $connectedCallback() {
+ *         const el = document.getElementById('api');
+ *         this.users = await el.fetch();
+ *       }
+ *     };
+ *   </script>
+ * </wcs-state>
+ * ```
+ * ※ `bootstraps` に `bootstrapFetch` を含める必要あり
+ *
+ * ### バインディングと構造レンダリング
+ * - `data-wcs` バインディングの適用（text, attribute, class, style, property）
+ * - `<template data-wcs="for:">` / `if:` / `elseif:` / `else:` の構造レンダリング
+ *
+ * ```html
+ * <ul>
+ *   <template data-wcs="for: users">
+ *     <li data-wcs="textContent: .name"></li>
+ *   </template>
+ * </ul>
+ * <template data-wcs="if: isAdmin">
+ *   <div class="admin-panel">...</div>
+ * </template>
+ * ```
+ *
+ * ### ハイドレーション
+ * - `enable-ssr` 付き `<wcs-state>` の `<wcs-ssr>` メタデータ自動生成
+ * - クライアント側でのハイドレーション（再レンダリングなしでバインディング復元）
+ * - `enable-ssr` を外した `<wcs-state>` はクライアントのみで動作（部分 CSR）
+ *
+ * ### カスタム要素の待機
+ * - `static hasConnectedCallbackPromise = true` プロトコル準拠の全カスタム要素を自動待機
+ *
+ * ## SSR でできないこと
+ * - `<head>` 内の `<script src="...">` や `<link>` の自動実行
+ * - ブラウザ固有 API（localStorage, sessionStorage, navigator 等）
+ * - Shadow DOM のレンダリング（Declarative Shadow DOM 非対応）
+ * - イベントハンドラの登録（クライアント側のハイドレーションで復元）
+ * - `<wcs-autoloader>` による動的コンポーネント読み込み
+ *
+ * ## HTML の分割パターン
+ * ```
+ * // server.js
+ * const ssrBody = await renderToString(template, { ... });
+ * const page = `<!DOCTYPE html>
+ * <html lang="ja">
+ * <head>
+ *   <script type="module" src="/packages/state/dist/auto.js"></script>
+ * </head>
+ * <body>${ssrBody}</body>
+ * </html>`;
+ * ```
+ * `renderToString` には `<body>` の中身だけを渡し、
+ * `<head>` や `<script>` タグは外側のテンプレートで囲む。
+ */
+declare function renderToString(html: string, options?: RenderOptions): Promise<string>;
+
+declare const VERSION: string;
+
+interface IWcBindableProperty {
+    readonly name: string;
+    readonly event: string;
+    readonly getter?: (event: Event) => any;
+}
+interface IWcBindable {
+    readonly protocol: "wc-bindable";
+    readonly version: number;
+    readonly properties: IWcBindableProperty[];
+}
+/**
+ * Value types for RenderCore (headless) — the 3 async state properties.
+ * Use with `bind()` from `@wc-bindable/core` for compile-time type checking.
+ *
+ * @example
+ * ```typescript
+ * const core = new RenderCore();
+ * bind(core, (name: keyof WcsRenderValues, value) => { ... });
+ * ```
+ */
+interface WcsRenderValues {
+    html: string | null;
+    loading: boolean;
+    error: Error | null;
+}
+
+declare class RenderCore extends EventTarget {
+    static wcBindable: IWcBindable;
+    private _html;
+    private _loading;
+    private _error;
+    get html(): string | null;
+    get loading(): boolean;
+    get error(): Error | null;
+    private _setLoading;
+    private _setHtml;
+    private _setError;
+    render(html: string): Promise<string | null>;
+}
+
+export { GLOBALS_KEYS, RenderCore, VERSION, extractStateData, installBaseUrl, installGlobals, renderToString };
+export type { BootstrapFunction, IWcBindable, IWcBindableProperty, ReadyFunction, RenderOptions, WcsRenderValues };

package/dist/index.esm.js

@@ -0,0 +1,265 @@
+import { Window } from 'happy-dom';
+
+const GLOBALS_KEYS = [
+    'document', 'customElements', 'HTMLElement',
+    'DocumentFragment', 'Node', 'NodeFilter', 'Comment', 'Text',
+    'MutationObserver', 'ShadowRoot', 'Element', 'HTMLTemplateElement',
+];
+function installGlobals(window) {
+    const saved = {};
+    for (const key of GLOBALS_KEYS) {
+        saved[key] = globalThis[key];
+        globalThis[key] = window[key];
+    }
+    // URL.createObjectURL を無効化して、
+    // loadFromInnerScript が base64 data: URL フォールバックを使うようにする
+    const origCreateObjectURL = URL.createObjectURL;
+    URL.createObjectURL = undefined;
+    return () => {
+        URL.createObjectURL = origCreateObjectURL;
+        for (const key of GLOBALS_KEYS) {
+            globalThis[key] = saved[key];
+        }
+    };
+}
+function installBaseUrl(baseUrl) {
+    const OrigURL = globalThis.URL;
+    const base = baseUrl;
+    globalThis.URL = class extends OrigURL {
+        constructor(input, inputBase) {
+            if (typeof input === 'string' && input.startsWith('/') && inputBase === undefined) {
+                super(input, base);
+            }
+            else {
+                super(input, inputBase);
+            }
+        }
+    };
+    // 静的メソッドを引き継ぐ
+    globalThis.URL.createObjectURL = OrigURL.createObjectURL;
+    globalThis.URL.revokeObjectURL = OrigURL.revokeObjectURL;
+    return () => { globalThis.URL = OrigURL; };
+}
+/** @deprecated Use Ssr.extractStateData() from @wcstack/state instead */
+function extractStateData(stateEl) {
+    const raw = stateEl.__state;
+    if (!raw || typeof raw !== 'object')
+        return {};
+    const data = {};
+    for (const [key, value] of Object.entries(raw)) {
+        if (!key.startsWith('$') && typeof value !== 'function') {
+            data[key] = value;
+        }
+    }
+    return data;
+}
+async function loadDefaultBootstraps() {
+    const { bootstrapState, getBindingsReady } = await import('@wcstack/state');
+    return {
+        bootstraps: [bootstrapState],
+        ready: [(doc) => getBindingsReady(doc)],
+    };
+}
+/**
+ * HTML 文字列を SSR レンダリングして返す。
+ *
+ * ## 入力 HTML のルール
+ * - `<body>` の中身だけを渡す（`<html>`, `<head>`, `<body>` タグは含めない）
+ * - `<script>` / `<link>` による外部リソース読み込みは実行されない
+ *   → 必要なパッケージは `options.bootstraps` で明示的に渡す
+ *
+ * ## SSR でできること
+ *
+ * ### 状態の初期化とデータ取得
+ * - `<wcs-state>` の状態ロード（json 属性, src 属性, inline `<script type="module">`）
+ * - `$connectedCallback` でのサーバーサイド fetch（API 呼び出し、DB 問い合わせ等）
+ *
+ * ```html
+ * <!-- JSON 直接指定 -->
+ * <wcs-state enable-ssr json='{"title":"Hello"}'></wcs-state>
+ *
+ * <!-- $connectedCallback で API からデータ取得 -->
+ * <!-- $connectedCallback は状態オブジェクトのメソッドとして定義し、this が state proxy -->
+ * <wcs-state enable-ssr>
+ *   <script type="module">
+ *     export default {
+ *       async $connectedCallback() {
+ *         const res = await fetch('/api/users');
+ *         this.users = await res.json();
+ *       }
+ *     };
+ *   </script>
+ * </wcs-state>
+ * ```
+ *
+ * ### wcs-fetch を使ったサーバー通信
+ * - `<wcs-fetch>` の auto-fetch（`manual` なし）はサーバーでも実行される
+ * - `manual` + `$connectedCallback` で明示的に制御する場合:
+ *
+ * ```html
+ * <wcs-fetch id="api" url="/api/users" manual></wcs-fetch>
+ * <wcs-state enable-ssr>
+ *   <script type="module">
+ *     export default {
+ *       async $connectedCallback() {
+ *         const el = document.getElementById('api');
+ *         this.users = await el.fetch();
+ *       }
+ *     };
+ *   </script>
+ * </wcs-state>
+ * ```
+ * ※ `bootstraps` に `bootstrapFetch` を含める必要あり
+ *
+ * ### バインディングと構造レンダリング
+ * - `data-wcs` バインディングの適用（text, attribute, class, style, property）
+ * - `<template data-wcs="for:">` / `if:` / `elseif:` / `else:` の構造レンダリング
+ *
+ * ```html
+ * <ul>
+ *   <template data-wcs="for: users">
+ *     <li data-wcs="textContent: .name"></li>
+ *   </template>
+ * </ul>
+ * <template data-wcs="if: isAdmin">
+ *   <div class="admin-panel">...</div>
+ * </template>
+ * ```
+ *
+ * ### ハイドレーション
+ * - `enable-ssr` 付き `<wcs-state>` の `<wcs-ssr>` メタデータ自動生成
+ * - クライアント側でのハイドレーション（再レンダリングなしでバインディング復元）
+ * - `enable-ssr` を外した `<wcs-state>` はクライアントのみで動作（部分 CSR）
+ *
+ * ### カスタム要素の待機
+ * - `static hasConnectedCallbackPromise = true` プロトコル準拠の全カスタム要素を自動待機
+ *
+ * ## SSR でできないこと
+ * - `<head>` 内の `<script src="...">` や `<link>` の自動実行
+ * - ブラウザ固有 API（localStorage, sessionStorage, navigator 等）
+ * - Shadow DOM のレンダリング（Declarative Shadow DOM 非対応）
+ * - イベントハンドラの登録（クライアント側のハイドレーションで復元）
+ * - `<wcs-autoloader>` による動的コンポーネント読み込み
+ *
+ * ## HTML の分割パターン
+ * ```
+ * // server.js
+ * const ssrBody = await renderToString(template, { ... });
+ * const page = `<!DOCTYPE html>
+ * <html lang="ja">
+ * <head>
+ *   <script type="module" src="/packages/state/dist/auto.js"></script>
+ * </head>
+ * <body>${ssrBody}</body>
+ * </html>`;
+ * ```
+ * `renderToString` には `<body>` の中身だけを渡し、
+ * `<head>` や `<script>` タグは外側のテンプレートで囲む。
+ */
+async function renderToString(html, options) {
+    const window = new Window();
+    const restoreGlobals = installGlobals(window);
+    const document = window.document;
+    // 相対 URL を baseUrl で解決する URL コンストラクタパッチをインストール
+    const restoreBaseUrl = options?.baseUrl
+        ? installBaseUrl(options.baseUrl)
+        : null;
+    // bootstrap / ready の解決
+    const hasCustomBootstraps = options?.bootstraps !== undefined;
+    const defaults = hasCustomBootstraps ? null : await loadDefaultBootstraps();
+    const bootstraps = options?.bootstraps ?? defaults.bootstraps;
+    const readyFns = options?.ready ?? defaults?.ready ?? [];
+    for (const bootstrap of bootstraps) {
+        bootstrap();
+    }
+    try {
+        // SSR モードを html 要素に設定
+        document.documentElement.setAttribute('data-wcs-server', '');
+        // HTML をパース
+        // connectedCallback が自動発火 → state ロード → $connectedCallback 実行
+        document.body.innerHTML = html;
+        // connectedCallbackPromise プロトコル準拠の全カスタム要素の完了を待機
+        const promises = [];
+        for (const el of document.querySelectorAll('*-*')) {
+            const ctor = el.constructor;
+            if (ctor.hasConnectedCallbackPromise) {
+                promises.push(el.connectedCallbackPromise);
+            }
+        }
+        await Promise.all(promises);
+        // 非同期初期化の完了を待機
+        await Promise.all(readyFns.map(fn => fn(document)));
+        return document.body.innerHTML;
+    }
+    finally {
+        restoreBaseUrl?.();
+        restoreGlobals();
+        await window.close();
+    }
+}
+
+var version = "0.2.3";
+var pkg = {
+	version: version};
+
+const VERSION = pkg.version;
+
+class RenderCore extends EventTarget {
+    static wcBindable = {
+        protocol: "wc-bindable",
+        version: 1,
+        properties: [
+            { name: "html", event: "wcs-render:html-changed" },
+            { name: "loading", event: "wcs-render:loading-changed" },
+            { name: "error", event: "wcs-render:error" },
+        ],
+    };
+    _html = null;
+    _loading = false;
+    _error = null;
+    get html() {
+        return this._html;
+    }
+    get loading() {
+        return this._loading;
+    }
+    get error() {
+        return this._error;
+    }
+    _setLoading(loading) {
+        this._loading = loading;
+        this.dispatchEvent(new CustomEvent("wcs-render:loading-changed", {
+            detail: loading,
+        }));
+    }
+    _setHtml(html) {
+        this._html = html;
+        this.dispatchEvent(new CustomEvent("wcs-render:html-changed", {
+            detail: html,
+        }));
+    }
+    _setError(error) {
+        this._error = error;
+        this.dispatchEvent(new CustomEvent("wcs-render:error", {
+            detail: error,
+        }));
+    }
+    async render(html) {
+        this._setLoading(true);
+        this._error = null;
+        try {
+            const result = await renderToString(html);
+            this._setHtml(result);
+            this._setLoading(false);
+            return this._html;
+        }
+        catch (e) {
+            this._setError(e instanceof Error ? e : new Error(String(e)));
+            this._setLoading(false);
+            return null;
+        }
+    }
+}
+
+export { GLOBALS_KEYS, RenderCore, VERSION, extractStateData, installBaseUrl, installGlobals, renderToString };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/render.ts","../../src/version.ts","../../src/RenderCore.ts"],"sourcesContent":["import { Window } from 'happy-dom';\r\n\r\nexport const GLOBALS_KEYS = [\r\n  'document', 'customElements', 'HTMLElement',\r\n  'DocumentFragment', 'Node', 'NodeFilter', 'Comment', 'Text',\r\n  'MutationObserver', 'ShadowRoot', 'Element', 'HTMLTemplateElement',\r\n];\r\n\r\nexport function installGlobals(window: Window): () => void {\r\n  const saved: Record<string, any> = {};\r\n  for (const key of GLOBALS_KEYS) {\r\n    saved[key] = (globalThis as any)[key];\r\n    (globalThis as any)[key] = (window as any)[key];\r\n  }\r\n  // URL.createObjectURL を無効化して、\r\n  // loadFromInnerScript が base64 data: URL フォールバックを使うようにする\r\n  const origCreateObjectURL = URL.createObjectURL;\r\n  (URL as any).createObjectURL = undefined;\r\n  return () => {\r\n    URL.createObjectURL = origCreateObjectURL;\r\n    for (const key of GLOBALS_KEYS) {\r\n      (globalThis as any)[key] = saved[key];\r\n    }\r\n  };\r\n}\r\n\r\nexport function installBaseUrl(baseUrl: string): () => void {\r\n  const OrigURL = globalThis.URL;\r\n  const base = baseUrl;\r\n  globalThis.URL = class extends OrigURL {\r\n    constructor(input: string | URL, inputBase?: string | URL) {\r\n      if (typeof input === 'string' && input.startsWith('/') && inputBase === undefined) {\r\n        super(input, base);\r\n      } else {\r\n        super(input as string, inputBase);\r\n      }\r\n    }\r\n  } as typeof URL;\r\n  // 静的メソッドを引き継ぐ\r\n  globalThis.URL.createObjectURL = OrigURL.createObjectURL;\r\n  globalThis.URL.revokeObjectURL = OrigURL.revokeObjectURL;\r\n  return () => { globalThis.URL = OrigURL; };\r\n}\r\n\r\n/** @deprecated Use Ssr.extractStateData() from @wcstack/state instead */\r\nexport function extractStateData(stateEl: any): Record<string, any> {\r\n  const raw = (stateEl as any).__state;\r\n  if (!raw || typeof raw !== 'object') return {};\r\n  const data: Record<string, any> = {};\r\n  for (const [key, value] of Object.entries(raw)) {\r\n    if (!key.startsWith('$') && typeof value !== 'function') {\r\n      data[key] = value;\r\n    }\r\n  }\r\n  return data;\r\n}\r\n\r\nexport type BootstrapFunction = () => void;\r\nexport type ReadyFunction = (doc: Document) => Promise<void>;\r\n\r\nexport interface RenderOptions {\r\n  /** 相対 URL を解決するベース URL (例: \"http://localhost:3001\") */\r\n  baseUrl?: string;\r\n  /** bootstrap 関数の配列。省略時は @wcstack/state を自動ロード */\r\n  bootstraps?: BootstrapFunction[];\r\n  /** バインディング等の非同期初期化完了を待機する関数の配列 */\r\n  ready?: ReadyFunction[];\r\n}\r\n\r\nasync function loadDefaultBootstraps(): Promise<{\r\n  bootstraps: BootstrapFunction[];\r\n  ready: ReadyFunction[];\r\n}> {\r\n  const { bootstrapState, getBindingsReady } = await import('@wcstack/state');\r\n  return {\r\n    bootstraps: [bootstrapState],\r\n    ready: [(doc: Document) => getBindingsReady(doc as any)],\r\n  };\r\n}\r\n\r\n/**\r\n * HTML 文字列を SSR レンダリングして返す。\r\n *\r\n * ## 入力 HTML のルール\r\n * - `<body>` の中身だけを渡す（`<html>`, `<head>`, `<body>` タグは含めない）\r\n * - `<script>` / `<link>` による外部リソース読み込みは実行されない\r\n *   → 必要なパッケージは `options.bootstraps` で明示的に渡す\r\n *\r\n * ## SSR でできること\r\n *\r\n * ### 状態の初期化とデータ取得\r\n * - `<wcs-state>` の状態ロード（json 属性, src 属性, inline `<script type=\"module\">`）\r\n * - `$connectedCallback` でのサーバーサイド fetch（API 呼び出し、DB 問い合わせ等）\r\n *\r\n * ```html\r\n * <!-- JSON 直接指定 -->\r\n * <wcs-state enable-ssr json='{\"title\":\"Hello\"}'></wcs-state>\r\n *\r\n * <!-- $connectedCallback で API からデータ取得 -->\r\n * <!-- $connectedCallback は状態オブジェクトのメソッドとして定義し、this が state proxy -->\r\n * <wcs-state enable-ssr>\r\n *   <script type=\"module\">\r\n *     export default {\r\n *       async $connectedCallback() {\r\n *         const res = await fetch('/api/users');\r\n *         this.users = await res.json();\r\n *       }\r\n *     };\r\n *   </script>\r\n * </wcs-state>\r\n * ```\r\n *\r\n * ### wcs-fetch を使ったサーバー通信\r\n * - `<wcs-fetch>` の auto-fetch（`manual` なし）はサーバーでも実行される\r\n * - `manual` + `$connectedCallback` で明示的に制御する場合:\r\n *\r\n * ```html\r\n * <wcs-fetch id=\"api\" url=\"/api/users\" manual></wcs-fetch>\r\n * <wcs-state enable-ssr>\r\n *   <script type=\"module\">\r\n *     export default {\r\n *       async $connectedCallback() {\r\n *         const el = document.getElementById('api');\r\n *         this.users = await el.fetch();\r\n *       }\r\n *     };\r\n *   </script>\r\n * </wcs-state>\r\n * ```\r\n * ※ `bootstraps` に `bootstrapFetch` を含める必要あり\r\n *\r\n * ### バインディングと構造レンダリング\r\n * - `data-wcs` バインディングの適用（text, attribute, class, style, property）\r\n * - `<template data-wcs=\"for:\">` / `if:` / `elseif:` / `else:` の構造レンダリング\r\n *\r\n * ```html\r\n * <ul>\r\n *   <template data-wcs=\"for: users\">\r\n *     <li data-wcs=\"textContent: .name\"></li>\r\n *   </template>\r\n * </ul>\r\n * <template data-wcs=\"if: isAdmin\">\r\n *   <div class=\"admin-panel\">...</div>\r\n * </template>\r\n * ```\r\n *\r\n * ### ハイドレーション\r\n * - `enable-ssr` 付き `<wcs-state>` の `<wcs-ssr>` メタデータ自動生成\r\n * - クライアント側でのハイドレーション（再レンダリングなしでバインディング復元）\r\n * - `enable-ssr` を外した `<wcs-state>` はクライアントのみで動作（部分 CSR）\r\n *\r\n * ### カスタム要素の待機\r\n * - `static hasConnectedCallbackPromise = true` プロトコル準拠の全カスタム要素を自動待機\r\n *\r\n * ## SSR でできないこと\r\n * - `<head>` 内の `<script src=\"...\">` や `<link>` の自動実行\r\n * - ブラウザ固有 API（localStorage, sessionStorage, navigator 等）\r\n * - Shadow DOM のレンダリング（Declarative Shadow DOM 非対応）\r\n * - イベントハンドラの登録（クライアント側のハイドレーションで復元）\r\n * - `<wcs-autoloader>` による動的コンポーネント読み込み\r\n *\r\n * ## HTML の分割パターン\r\n * ```\r\n * // server.js\r\n * const ssrBody = await renderToString(template, { ... });\r\n * const page = `<!DOCTYPE html>\r\n * <html lang=\"ja\">\r\n * <head>\r\n *   <script type=\"module\" src=\"/packages/state/dist/auto.js\"></script>\r\n * </head>\r\n * <body>${ssrBody}</body>\r\n * </html>`;\r\n * ```\r\n * `renderToString` には `<body>` の中身だけを渡し、\r\n * `<head>` や `<script>` タグは外側のテンプレートで囲む。\r\n */\r\nexport async function renderToString(html: string, options?: RenderOptions): Promise<string> {\r\n  const window = new Window();\r\n  const restoreGlobals = installGlobals(window);\r\n  const document = window.document;\r\n\r\n  // 相対 URL を baseUrl で解決する URL コンストラクタパッチをインストール\r\n  const restoreBaseUrl = options?.baseUrl\r\n    ? installBaseUrl(options.baseUrl)\r\n    : null;\r\n\r\n  // bootstrap / ready の解決\r\n  const hasCustomBootstraps = options?.bootstraps !== undefined;\r\n  const defaults = hasCustomBootstraps ? null : await loadDefaultBootstraps();\r\n  const bootstraps = options?.bootstraps ?? defaults!.bootstraps;\r\n  const readyFns = options?.ready ?? defaults?.ready ?? [];\r\n\r\n  for (const bootstrap of bootstraps) {\r\n    bootstrap();\r\n  }\r\n\r\n  try {\r\n\r\n    // SSR モードを html 要素に設定\r\n    document.documentElement.setAttribute('data-wcs-server', '');\r\n\r\n    // HTML をパース\r\n    // connectedCallback が自動発火 → state ロード → $connectedCallback 実行\r\n    document.body.innerHTML = html;\r\n\r\n    // connectedCallbackPromise プロトコル準拠の全カスタム要素の完了を待機\r\n    const promises: Promise<void>[] = [];\r\n    for (const el of document.querySelectorAll('*-*')) {\r\n      const ctor = el.constructor as any;\r\n      if (ctor.hasConnectedCallbackPromise) {\r\n        promises.push((el as any).connectedCallbackPromise);\r\n      }\r\n    }\r\n    await Promise.all(promises);\r\n\r\n    // 非同期初期化の完了を待機\r\n    await Promise.all(readyFns.map(fn => fn(document as any)));\r\n\r\n    return document.body.innerHTML;\r\n  } finally {\r\n    restoreBaseUrl?.();\r\n    restoreGlobals();\r\n    await window.close();\r\n  }\r\n}\r\n","import pkg from \"../package.json\" with { type: \"json\" };\r\nexport const VERSION = pkg.version;\r\n","import { renderToString } from \"./render.js\";\r\nimport { IWcBindable } from \"./types.js\";\r\n\r\nexport class RenderCore extends EventTarget {\r\n  static wcBindable: IWcBindable = {\r\n    protocol: \"wc-bindable\",\r\n    version: 1,\r\n    properties: [\r\n      { name: \"html\", event: \"wcs-render:html-changed\" },\r\n      { name: \"loading\", event: \"wcs-render:loading-changed\" },\r\n      { name: \"error\", event: \"wcs-render:error\" },\r\n    ],\r\n  };\r\n\r\n  private _html: string | null = null;\r\n  private _loading: boolean = false;\r\n  private _error: Error | null = null;\r\n\r\n  get html(): string | null {\r\n    return this._html;\r\n  }\r\n\r\n  get loading(): boolean {\r\n    return this._loading;\r\n  }\r\n\r\n  get error(): Error | null {\r\n    return this._error;\r\n  }\r\n\r\n  private _setLoading(loading: boolean): void {\r\n    this._loading = loading;\r\n    this.dispatchEvent(new CustomEvent(\"wcs-render:loading-changed\", {\r\n      detail: loading,\r\n    }));\r\n  }\r\n\r\n  private _setHtml(html: string): void {\r\n    this._html = html;\r\n    this.dispatchEvent(new CustomEvent(\"wcs-render:html-changed\", {\r\n      detail: html,\r\n    }));\r\n  }\r\n\r\n  private _setError(error: Error): void {\r\n    this._error = error;\r\n    this.dispatchEvent(new CustomEvent(\"wcs-render:error\", {\r\n      detail: error,\r\n    }));\r\n  }\r\n\r\n  async render(html: string): Promise<string | null> {\r\n    this._setLoading(true);\r\n    this._error = null;\r\n\r\n    try {\r\n      const result = await renderToString(html);\r\n      this._setHtml(result);\r\n      this._setLoading(false);\r\n      return this._html;\r\n    } catch (e: any) {\r\n      this._setError(e instanceof Error ? e : new Error(String(e)));\r\n      this._setLoading(false);\r\n      return null;\r\n    }\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/index.esm.min.js

@@ -0,0 +1,2 @@
+import{Window as t}from"happy-dom";const e=["document","customElements","HTMLElement","DocumentFragment","Node","NodeFilter","Comment","Text","MutationObserver","ShadowRoot","Element","HTMLTemplateElement"];function r(t){const r={};for(const n of e)r[n]=globalThis[n],globalThis[n]=t[n];const n=URL.createObjectURL;return URL.createObjectURL=void 0,()=>{URL.createObjectURL=n;for(const t of e)globalThis[t]=r[t]}}function n(t){const e=globalThis.URL,r=t;return globalThis.URL=class extends e{constructor(t,e){"string"==typeof t&&t.startsWith("/")&&void 0===e?super(t,r):super(t,e)}},globalThis.URL.createObjectURL=e.createObjectURL,globalThis.URL.revokeObjectURL=e.revokeObjectURL,()=>{globalThis.URL=e}}function o(t){const e=t.__state;if(!e||"object"!=typeof e)return{};const r={};for(const[t,n]of Object.entries(e))t.startsWith("$")||"function"==typeof n||(r[t]=n);return r}async function s(e,o){const s=new t,a=r(s),i=s.document,c=o?.baseUrl?n(o.baseUrl):null,l=void 0!==o?.bootstraps?null:await async function(){const{bootstrapState:t,getBindingsReady:e}=await import("@wcstack/state");return{bootstraps:[t],ready:[t=>e(t)]}}(),d=o?.bootstraps??l.bootstraps,h=o?.ready??l?.ready??[];for(const t of d)t();try{i.documentElement.setAttribute("data-wcs-server",""),i.body.innerHTML=e;const t=[];for(const e of i.querySelectorAll("*-*")){e.constructor.hasConnectedCallbackPromise&&t.push(e.connectedCallbackPromise)}return await Promise.all(t),await Promise.all(h.map(t=>t(i))),i.body.innerHTML}finally{c?.(),a(),await s.close()}}const a="0.2.3";class i extends EventTarget{static wcBindable={protocol:"wc-bindable",version:1,properties:[{name:"html",event:"wcs-render:html-changed"},{name:"loading",event:"wcs-render:loading-changed"},{name:"error",event:"wcs-render:error"}]};_html=null;_loading=!1;_error=null;get html(){return this._html}get loading(){return this._loading}get error(){return this._error}_setLoading(t){this._loading=t,this.dispatchEvent(new CustomEvent("wcs-render:loading-changed",{detail:t}))}_setHtml(t){this._html=t,this.dispatchEvent(new CustomEvent("wcs-render:html-changed",{detail:t}))}_setError(t){this._error=t,this.dispatchEvent(new CustomEvent("wcs-render:error",{detail:t}))}async render(t){this._setLoading(!0),this._error=null;try{const e=await s(t);return this._setHtml(e),this._setLoading(!1),this._html}catch(t){return this._setError(t instanceof Error?t:new Error(String(t))),this._setLoading(!1),null}}}export{e as GLOBALS_KEYS,i as RenderCore,a as VERSION,o as extractStateData,n as installBaseUrl,r as installGlobals,s as renderToString};
+//# sourceMappingURL=index.esm.min.js.map

package/dist/index.esm.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.min.js","sources":["../../src/render.ts","../../src/version.ts","../../src/RenderCore.ts"],"sourcesContent":["import { Window } from 'happy-dom';\r\n\r\nexport const GLOBALS_KEYS = [\r\n  'document', 'customElements', 'HTMLElement',\r\n  'DocumentFragment', 'Node', 'NodeFilter', 'Comment', 'Text',\r\n  'MutationObserver', 'ShadowRoot', 'Element', 'HTMLTemplateElement',\r\n];\r\n\r\nexport function installGlobals(window: Window): () => void {\r\n  const saved: Record<string, any> = {};\r\n  for (const key of GLOBALS_KEYS) {\r\n    saved[key] = (globalThis as any)[key];\r\n    (globalThis as any)[key] = (window as any)[key];\r\n  }\r\n  // URL.createObjectURL を無効化して、\r\n  // loadFromInnerScript が base64 data: URL フォールバックを使うようにする\r\n  const origCreateObjectURL = URL.createObjectURL;\r\n  (URL as any).createObjectURL = undefined;\r\n  return () => {\r\n    URL.createObjectURL = origCreateObjectURL;\r\n    for (const key of GLOBALS_KEYS) {\r\n      (globalThis as any)[key] = saved[key];\r\n    }\r\n  };\r\n}\r\n\r\nexport function installBaseUrl(baseUrl: string): () => void {\r\n  const OrigURL = globalThis.URL;\r\n  const base = baseUrl;\r\n  globalThis.URL = class extends OrigURL {\r\n    constructor(input: string | URL, inputBase?: string | URL) {\r\n      if (typeof input === 'string' && input.startsWith('/') && inputBase === undefined) {\r\n        super(input, base);\r\n      } else {\r\n        super(input as string, inputBase);\r\n      }\r\n    }\r\n  } as typeof URL;\r\n  // 静的メソッドを引き継ぐ\r\n  globalThis.URL.createObjectURL = OrigURL.createObjectURL;\r\n  globalThis.URL.revokeObjectURL = OrigURL.revokeObjectURL;\r\n  return () => { globalThis.URL = OrigURL; };\r\n}\r\n\r\n/** @deprecated Use Ssr.extractStateData() from @wcstack/state instead */\r\nexport function extractStateData(stateEl: any): Record<string, any> {\r\n  const raw = (stateEl as any).__state;\r\n  if (!raw || typeof raw !== 'object') return {};\r\n  const data: Record<string, any> = {};\r\n  for (const [key, value] of Object.entries(raw)) {\r\n    if (!key.startsWith('$') && typeof value !== 'function') {\r\n      data[key] = value;\r\n    }\r\n  }\r\n  return data;\r\n}\r\n\r\nexport type BootstrapFunction = () => void;\r\nexport type ReadyFunction = (doc: Document) => Promise<void>;\r\n\r\nexport interface RenderOptions {\r\n  /** 相対 URL を解決するベース URL (例: \"http://localhost:3001\") */\r\n  baseUrl?: string;\r\n  /** bootstrap 関数の配列。省略時は @wcstack/state を自動ロード */\r\n  bootstraps?: BootstrapFunction[];\r\n  /** バインディング等の非同期初期化完了を待機する関数の配列 */\r\n  ready?: ReadyFunction[];\r\n}\r\n\r\nasync function loadDefaultBootstraps(): Promise<{\r\n  bootstraps: BootstrapFunction[];\r\n  ready: ReadyFunction[];\r\n}> {\r\n  const { bootstrapState, getBindingsReady } = await import('@wcstack/state');\r\n  return {\r\n    bootstraps: [bootstrapState],\r\n    ready: [(doc: Document) => getBindingsReady(doc as any)],\r\n  };\r\n}\r\n\r\n/**\r\n * HTML 文字列を SSR レンダリングして返す。\r\n *\r\n * ## 入力 HTML のルール\r\n * - `<body>` の中身だけを渡す（`<html>`, `<head>`, `<body>` タグは含めない）\r\n * - `<script>` / `<link>` による外部リソース読み込みは実行されない\r\n *   → 必要なパッケージは `options.bootstraps` で明示的に渡す\r\n *\r\n * ## SSR でできること\r\n *\r\n * ### 状態の初期化とデータ取得\r\n * - `<wcs-state>` の状態ロード（json 属性, src 属性, inline `<script type=\"module\">`）\r\n * - `$connectedCallback` でのサーバーサイド fetch（API 呼び出し、DB 問い合わせ等）\r\n *\r\n * ```html\r\n * <!-- JSON 直接指定 -->\r\n * <wcs-state enable-ssr json='{\"title\":\"Hello\"}'></wcs-state>\r\n *\r\n * <!-- $connectedCallback で API からデータ取得 -->\r\n * <!-- $connectedCallback は状態オブジェクトのメソッドとして定義し、this が state proxy -->\r\n * <wcs-state enable-ssr>\r\n *   <script type=\"module\">\r\n *     export default {\r\n *       async $connectedCallback() {\r\n *         const res = await fetch('/api/users');\r\n *         this.users = await res.json();\r\n *       }\r\n *     };\r\n *   </script>\r\n * </wcs-state>\r\n * ```\r\n *\r\n * ### wcs-fetch を使ったサーバー通信\r\n * - `<wcs-fetch>` の auto-fetch（`manual` なし）はサーバーでも実行される\r\n * - `manual` + `$connectedCallback` で明示的に制御する場合:\r\n *\r\n * ```html\r\n * <wcs-fetch id=\"api\" url=\"/api/users\" manual></wcs-fetch>\r\n * <wcs-state enable-ssr>\r\n *   <script type=\"module\">\r\n *     export default {\r\n *       async $connectedCallback() {\r\n *         const el = document.getElementById('api');\r\n *         this.users = await el.fetch();\r\n *       }\r\n *     };\r\n *   </script>\r\n * </wcs-state>\r\n * ```\r\n * ※ `bootstraps` に `bootstrapFetch` を含める必要あり\r\n *\r\n * ### バインディングと構造レンダリング\r\n * - `data-wcs` バインディングの適用（text, attribute, class, style, property）\r\n * - `<template data-wcs=\"for:\">` / `if:` / `elseif:` / `else:` の構造レンダリング\r\n *\r\n * ```html\r\n * <ul>\r\n *   <template data-wcs=\"for: users\">\r\n *     <li data-wcs=\"textContent: .name\"></li>\r\n *   </template>\r\n * </ul>\r\n * <template data-wcs=\"if: isAdmin\">\r\n *   <div class=\"admin-panel\">...</div>\r\n * </template>\r\n * ```\r\n *\r\n * ### ハイドレーション\r\n * - `enable-ssr` 付き `<wcs-state>` の `<wcs-ssr>` メタデータ自動生成\r\n * - クライアント側でのハイドレーション（再レンダリングなしでバインディング復元）\r\n * - `enable-ssr` を外した `<wcs-state>` はクライアントのみで動作（部分 CSR）\r\n *\r\n * ### カスタム要素の待機\r\n * - `static hasConnectedCallbackPromise = true` プロトコル準拠の全カスタム要素を自動待機\r\n *\r\n * ## SSR でできないこと\r\n * - `<head>` 内の `<script src=\"...\">` や `<link>` の自動実行\r\n * - ブラウザ固有 API（localStorage, sessionStorage, navigator 等）\r\n * - Shadow DOM のレンダリング（Declarative Shadow DOM 非対応）\r\n * - イベントハンドラの登録（クライアント側のハイドレーションで復元）\r\n * - `<wcs-autoloader>` による動的コンポーネント読み込み\r\n *\r\n * ## HTML の分割パターン\r\n * ```\r\n * // server.js\r\n * const ssrBody = await renderToString(template, { ... });\r\n * const page = `<!DOCTYPE html>\r\n * <html lang=\"ja\">\r\n * <head>\r\n *   <script type=\"module\" src=\"/packages/state/dist/auto.js\"></script>\r\n * </head>\r\n * <body>${ssrBody}</body>\r\n * </html>`;\r\n * ```\r\n * `renderToString` には `<body>` の中身だけを渡し、\r\n * `<head>` や `<script>` タグは外側のテンプレートで囲む。\r\n */\r\nexport async function renderToString(html: string, options?: RenderOptions): Promise<string> {\r\n  const window = new Window();\r\n  const restoreGlobals = installGlobals(window);\r\n  const document = window.document;\r\n\r\n  // 相対 URL を baseUrl で解決する URL コンストラクタパッチをインストール\r\n  const restoreBaseUrl = options?.baseUrl\r\n    ? installBaseUrl(options.baseUrl)\r\n    : null;\r\n\r\n  // bootstrap / ready の解決\r\n  const hasCustomBootstraps = options?.bootstraps !== undefined;\r\n  const defaults = hasCustomBootstraps ? null : await loadDefaultBootstraps();\r\n  const bootstraps = options?.bootstraps ?? defaults!.bootstraps;\r\n  const readyFns = options?.ready ?? defaults?.ready ?? [];\r\n\r\n  for (const bootstrap of bootstraps) {\r\n    bootstrap();\r\n  }\r\n\r\n  try {\r\n\r\n    // SSR モードを html 要素に設定\r\n    document.documentElement.setAttribute('data-wcs-server', '');\r\n\r\n    // HTML をパース\r\n    // connectedCallback が自動発火 → state ロード → $connectedCallback 実行\r\n    document.body.innerHTML = html;\r\n\r\n    // connectedCallbackPromise プロトコル準拠の全カスタム要素の完了を待機\r\n    const promises: Promise<void>[] = [];\r\n    for (const el of document.querySelectorAll('*-*')) {\r\n      const ctor = el.constructor as any;\r\n      if (ctor.hasConnectedCallbackPromise) {\r\n        promises.push((el as any).connectedCallbackPromise);\r\n      }\r\n    }\r\n    await Promise.all(promises);\r\n\r\n    // 非同期初期化の完了を待機\r\n    await Promise.all(readyFns.map(fn => fn(document as any)));\r\n\r\n    return document.body.innerHTML;\r\n  } finally {\r\n    restoreBaseUrl?.();\r\n    restoreGlobals();\r\n    await window.close();\r\n  }\r\n}\r\n","import pkg from \"../package.json\" with { type: \"json\" };\r\nexport const VERSION = pkg.version;\r\n","import { renderToString } from \"./render.js\";\r\nimport { IWcBindable } from \"./types.js\";\r\n\r\nexport class RenderCore extends EventTarget {\r\n  static wcBindable: IWcBindable = {\r\n    protocol: \"wc-bindable\",\r\n    version: 1,\r\n    properties: [\r\n      { name: \"html\", event: \"wcs-render:html-changed\" },\r\n      { name: \"loading\", event: \"wcs-render:loading-changed\" },\r\n      { name: \"error\", event: \"wcs-render:error\" },\r\n    ],\r\n  };\r\n\r\n  private _html: string | null = null;\r\n  private _loading: boolean = false;\r\n  private _error: Error | null = null;\r\n\r\n  get html(): string | null {\r\n    return this._html;\r\n  }\r\n\r\n  get loading(): boolean {\r\n    return this._loading;\r\n  }\r\n\r\n  get error(): Error | null {\r\n    return this._error;\r\n  }\r\n\r\n  private _setLoading(loading: boolean): void {\r\n    this._loading = loading;\r\n    this.dispatchEvent(new CustomEvent(\"wcs-render:loading-changed\", {\r\n      detail: loading,\r\n    }));\r\n  }\r\n\r\n  private _setHtml(html: string): void {\r\n    this._html = html;\r\n    this.dispatchEvent(new CustomEvent(\"wcs-render:html-changed\", {\r\n      detail: html,\r\n    }));\r\n  }\r\n\r\n  private _setError(error: Error): void {\r\n    this._error = error;\r\n    this.dispatchEvent(new CustomEvent(\"wcs-render:error\", {\r\n      detail: error,\r\n    }));\r\n  }\r\n\r\n  async render(html: string): Promise<string | null> {\r\n    this._setLoading(true);\r\n    this._error = null;\r\n\r\n    try {\r\n      const result = await renderToString(html);\r\n      this._setHtml(result);\r\n      this._setLoading(false);\r\n      return this._html;\r\n    } catch (e: any) {\r\n      this._setError(e instanceof Error ? e : new Error(String(e)));\r\n      this._setLoading(false);\r\n      return null;\r\n    }\r\n  }\r\n}\r\n"],"names":["GLOBALS_KEYS","installGlobals","window","saved","key","globalThis","origCreateObjectURL","URL","createObjectURL","undefined","installBaseUrl","baseUrl","OrigURL","base","constructor","input","inputBase","startsWith","super","revokeObjectURL","extractStateData","stateEl","raw","__state","data","value","Object","entries","async","renderToString","html","options","Window","restoreGlobals","document","restoreBaseUrl","defaults","bootstraps","bootstrapState","getBindingsReady","import","ready","doc","loadDefaultBootstraps","readyFns","bootstrap","documentElement","setAttribute","body","innerHTML","promises","el","querySelectorAll","hasConnectedCallbackPromise","push","connectedCallbackPromise","Promise","all","map","fn","close","VERSION","RenderCore","EventTarget","static","protocol","version","properties","name","event","_html","_loading","_error","this","loading","error","_setLoading","dispatchEvent","CustomEvent","detail","_setHtml","_setError","render","result","e","Error","String"],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@wcstack/server",
+  "version": "0.2.3",
+  "description": "Server-side rendering for wcstack Web Components.",
+  "type": "module",
+  "main": "./dist/index.esm.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist .tsc-out",
+    "build": "rimraf dist .tsc-out && tsc && rollup -c",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "vitest run --config vitest.e2e.config.ts",
+    "lint": "eslint src"
+  },
+  "keywords": [
+    "web-components",
+    "ssr",
+    "server-side-rendering",
+    "wcstack"
+  ],
+  "author": "mogera551",
+  "homepage": "https://wcstack.github.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wcstack/wcstack.git",
+    "directory": "packages/server"
+  },
+  "bugs": {
+    "url": "https://github.com/wcstack/wcstack/issues"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@wcstack/state": "file:../state",
+    "happy-dom": "^20.0.11"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.0.15",
+    "rimraf": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "rollup": "^4.22.4",
+    "rollup-plugin-dts": "^6.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.15"
+  }
+}