@wcstack/state 1.5.2 → 1.6.2

package/dist/index.esm.js

@@ -1,3 +1,11 @@
+let _inSsrCache = null;
+function inSsr() {
+    if (_inSsrCache !== null)
+        return _inSsrCache;
+    const html = document.querySelector('html');
+    _inSsrCache = html ? html.hasAttribute('data-wcs-server') : false;
+    return _inSsrCache;
+}
 const _config = {
     bindAttributeName: 'data-wcs',
     commentTextPrefix: 'wcs-text',
@@ -7,6 +15,7 @@ const _config = {
     commentElsePrefix: 'wcs-else',
     tagNames: {
         state: 'wcs-state',
+        ssr: 'wcs-ssr',
     },
     locale: 'en',
     debug: false,
@@ -14,6 +23,9 @@ const _config = {
 };
 // backward compatible export (read-only usage)
 const config = _config;
+function getConfig() {
+    return config;
+}
 function setConfig(partialConfig) {
     if (partialConfig.tagNames) {
         Object.assign(_config.tagNames, partialConfig.tagNames);
@@ -47,73 +59,16 @@ function setConfig(partialConfig) {
     }
 }
 
-async function loadFromInnerScript(script, name) {
-    let scriptModule = null;
-    const uniq_comment = `\n//# sourceURL=${name}\n`;
-    if (typeof URL.createObjectURL === 'function') {
-        // Create a blob URL for the script and dynamically import it
-        const blob = new Blob([script.text + uniq_comment], { type: "application/javascript" });
-        const url = URL.createObjectURL(blob);
-        try {
-            scriptModule = await import(url);
-        }
-        finally {
-            // Clean up blob URL to prevent memory leak
-            URL.revokeObjectURL(url);
-        }
-    }
-    else {
-        // Fallback: Base64 encoding method (for test environment)
-        // Convert script to Base64 and import via data: URL
-        const b64 = btoa(String.fromCodePoint(...new TextEncoder().encode(script.text + uniq_comment)));
-        scriptModule = await import(`data:application/javascript;base64,${b64}`);
-    }
-    return (scriptModule && typeof scriptModule.default === 'object') ? scriptModule.default : {};
-}
+var version$1 = "1.6.2";
+var pkg = {
+	version: version$1};
+
+const VERSION = pkg.version;
 
 function raiseError(message) {
     throw new Error(`[@wcstack/state] ${message}`);
 }
 
-async function loadFromJsonFile(url) {
-    try {
-        const response = await fetch(url);
-        if (!response.ok) {
-            raiseError(`Failed to fetch JSON file: ${response.statusText}`);
-        }
-        const data = await response.json();
-        return data;
-    }
-    catch (e) {
-        console.error('Failed to load JSON file:', e);
-        return {};
-    }
-}
-
-async function loadFromScriptFile(url) {
-    try {
-        const module = await import(/* @vite-ignore */ url);
-        return module.default || {};
-    }
-    catch (e) {
-        raiseError(`Failed to load script file: ${e}`);
-    }
-}
-
-function loadFromScriptJson(id) {
-    const script = document.getElementById(id);
-    if (script && script.type === 'application/json') {
-        try {
-            const data = JSON.parse(script.textContent || '{}');
-            return data;
-        }
-        catch (e) {
-            raiseError('Failed to parse JSON from script element:' + e);
-        }
-    }
-    return {};
-}
-
 const bindingPromiseByNode = new WeakMap();
 let id$1 = 0;
 function getInitializeBindingPromiseByNode(node) {
@@ -1410,34 +1365,6 @@ function parseBindTextForEmbeddedNode(bindText) {
     };
 }
 
-const fragmentInfoByUUID = new Map();
-function setFragmentInfoByUUID(uuid, rootNode, fragmentInfo) {
-    if (fragmentInfo === null) {
-        fragmentInfoByUUID.delete(uuid);
-    }
-    else {
-        fragmentInfoByUUID.set(uuid, fragmentInfo);
-        const bindingPartial = fragmentInfo.parseBindTextResult;
-        const stateElement = getStateElementByName(rootNode, bindingPartial.stateName);
-        if (stateElement === null) {
-            raiseError(`State element with name "${bindingPartial.stateName}" not found for fragment info.`);
-        }
-        stateElement.setPathInfo(bindingPartial.statePathName, bindingPartial.bindingType);
-        for (const nodeInfo of fragmentInfo.nodeInfos) {
-            for (const nodeBindingPartial of nodeInfo.parseBindTextResults) {
-                const nodeStateElement = getStateElementByName(rootNode, nodeBindingPartial.stateName);
-                if (nodeStateElement === null) {
-                    raiseError(`State element with name "${nodeBindingPartial.stateName}" not found for fragment info node.`);
-                }
-                nodeStateElement.setPathInfo(nodeBindingPartial.statePathName, nodeBindingPartial.bindingType);
-            }
-        }
-    }
-}
-function getFragmentInfoByUUID(uuid) {
-    return fragmentInfoByUUID.get(uuid) || null;
-}
-
 function getParseBindTextResults(node) {
     if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
@@ -2650,6 +2577,21 @@ class Content {
         this._mounted = false;
     }
 }
+/**
+ * SSR ハイドレーション用: 既存の DOM ノード配列から Content を生成する。
+ * テンプレートからの clone ではなく、SSR で描画済みのノードをそのまま使う。
+ */
+function createContentFromNodes(nodes) {
+    const fragment = document.createDocumentFragment();
+    // ノードを fragment に移動せず、参照だけ持つ Content を作る
+    const content = new Content(fragment);
+    // Content の内部状態を直接設定
+    content._childNodeArray = nodes;
+    content._firstNode = nodes.length > 0 ? nodes[0] : null;
+    content._lastNode = nodes.length > 0 ? nodes[nodes.length - 1] : null;
+    content._mounted = true; // SSR で既にマウント済み
+    return content;
+}
 function createContent(bindingInfo) {
     if (typeof bindingInfo.uuid === 'undefined' || bindingInfo.uuid === null) {
         raiseError(`BindingInfo.uuid is null.`);
@@ -2678,6 +2620,13 @@ const lastNodeByNode = new WeakMap();
 const contentByListIndexByNode = new WeakMap();
 const pooledContentsByNode = new WeakMap();
 const isOnlyNodeInParentContentByNode = new WeakMap();
+// SSR ハイドレーション用: Content を ListIndex に登録する
+function hydrateSetContent(node, index, content) {
+    setContent(node, index, content);
+}
+function hydrateSetLastNode(node, lastNode) {
+    lastNodeByNode.set(node, lastNode);
+}
 function getPooledContents(bindingInfo) {
     return pooledContentsByNode.get(bindingInfo.node) || [];
 }
@@ -2779,6 +2728,8 @@ function applyChangeToFor(bindingInfo, context, newValue) {
         fragment = document.createDocumentFragment();
         setRootNodeByFragment(fragment, context.rootNode);
     }
+    const ssrMode = inSsr();
+    const uuid = bindingInfo.uuid ?? '';
     for (const index of diff.newIndexes) {
         let content;
         // add
@@ -2792,14 +2743,30 @@ function applyChangeToFor(bindingInfo, context, newValue) {
                 }
                 // コンテント活性化の前にDOMツリーに追加しておく必要がある
                 if (fragment !== null) {
+                    if (ssrMode) {
+                        fragment.appendChild(document.createComment(`@@wcs-for-start:${uuid}:${listPathInfo.path}:${index.index}`));
+                    }
                     content.appendTo(fragment);
+                    if (ssrMode) {
+                        fragment.appendChild(document.createComment(`@@wcs-for-end:${uuid}:${listPathInfo.path}:${index.index}`));
+                    }
                 }
                 else {
                     // Update lastNode for next iteration to ensure correct order
                     // Ensure content is in correct position (e.g. if previous siblings were deleted/moved)
                     if (lastNode.nextSibling !== content.firstNode) {
+                        if (ssrMode) {
+                            const startComment = document.createComment(`@@wcs-for-start:${uuid}:${listPathInfo.path}:${index.index}`);
+                            lastNode.parentNode.insertBefore(startComment, lastNode.nextSibling);
+                            lastNode = startComment;
+                        }
                         content.mountAfter(lastNode);
                     }
+                    if (ssrMode) {
+                        const endComment = document.createComment(`@@wcs-for-end:${uuid}:${listPathInfo.path}:${index.index}`);
+                        const afterNode = content.lastNode ?? lastNode;
+                        afterNode.parentNode.insertBefore(endComment, afterNode.nextSibling);
+                    }
                 }
                 // コンテントを活性化
                 activateContent(content, loopContext, context);
@@ -2852,6 +2819,9 @@ function applyChangeToIf(bindingInfo, context, rawNewValue) {
     else {
         content = contents.values().next().value;
     }
+    const ssrMode = inSsr();
+    const uuid = bindingInfo.uuid ?? '';
+    const keyword = bindingInfo.bindingType; // if, elseif, else
     try {
         if (!newValue) {
             if (config.debug) {
@@ -2864,7 +2834,17 @@ function applyChangeToIf(bindingInfo, context, rawNewValue) {
             if (config.debug) {
                 console.log(`mount if content : ${bindingInfoText(bindingInfo)}`);
             }
-            content.mountAfter(bindingInfo.node);
+            if (ssrMode) {
+                const startComment = document.createComment(`@@wcs-${keyword}-start:${uuid}:${bindingInfo.statePathName}`);
+                bindingInfo.node.parentNode.insertBefore(startComment, bindingInfo.node.nextSibling);
+                content.mountAfter(startComment);
+                const endComment = document.createComment(`@@wcs-${keyword}-end:${uuid}:${bindingInfo.statePathName}`);
+                const afterNode = content.lastNode ?? startComment;
+                afterNode.parentNode.insertBefore(endComment, afterNode.nextSibling);
+            }
+            else {
+                content.mountAfter(bindingInfo.node);
+            }
             const loopContext = getLoopContextByNode(bindingInfo.node);
             activateContent(content, loopContext, context);
         }
@@ -2874,6 +2854,82 @@ function applyChangeToIf(bindingInfo, context, rawNewValue) {
     }
 }
 
+/**
+ * SSR 時に HTML 属性で表現できないプロパティバインディングを蓄積するストア。
+ * ハイドレーション時にクライアント側で復元する。
+ */
+// node → プロパティエントリのリスト
+const store = new WeakMap();
+function addSsrProperty(node, propName, value) {
+    let entries = store.get(node);
+    if (!entries) {
+        entries = [];
+        store.set(node, entries);
+    }
+    // 同じプロパティの既存エントリは上書き
+    const existing = entries.find(e => e.propName === propName);
+    if (existing) {
+        existing.value = value;
+    }
+    else {
+        entries.push({ propName, value });
+    }
+}
+function getSsrProperties(node) {
+    return store.get(node) ?? [];
+}
+function getAllSsrPropertyNodes() {
+    // WeakMap は列挙不可なので、別途トラッキングが必要
+    return Array.from(trackedNodes);
+}
+const trackedNodes = new Set();
+function trackSsrPropertyNode(node) {
+    trackedNodes.add(node);
+}
+function clearSsrPropertyStore() {
+    trackedNodes.clear();
+}
+
+// SSR 時に HTML 属性で代替可能なプロパティ
+// これら以外のプロパティは ssrPropertyStore に蓄積してハイドレーション時に復元
+const SSR_ATTR_PROPS = {
+    value(element, value) {
+        if (element.tagName === 'TEXTAREA') {
+            element.textContent = String(value ?? '');
+        }
+        else {
+            element.setAttribute('value', String(value ?? ''));
+        }
+    },
+    checked(element, value) {
+        if (value)
+            element.setAttribute('checked', '');
+        else
+            element.removeAttribute('checked');
+    },
+    selected(element, value) {
+        if (value)
+            element.setAttribute('selected', '');
+        else
+            element.removeAttribute('selected');
+    },
+    disabled(element, value) {
+        if (value)
+            element.setAttribute('disabled', '');
+        else
+            element.removeAttribute('disabled');
+    },
+    selectedIndex(element, value) {
+        const options = element.querySelectorAll('option');
+        const idx = Number(value);
+        for (let i = 0; i < options.length; i++) {
+            if (i === idx)
+                options[i].setAttribute('selected', '');
+            else
+                options[i].removeAttribute('selected');
+        }
+    },
+};
 function applyChangeToProperty(binding, _context, newValue) {
     const element = binding.node;
     const propSegments = binding.propSegments;
@@ -2893,6 +2949,18 @@ function applyChangeToProperty(binding, _context, newValue) {
                 }
             }
         }
+        if (inSsr()) {
+            const attrHandler = SSR_ATTR_PROPS[firstSegment];
+            if (attrHandler) {
+                // 属性で代替可能 → HTML 属性に反映
+                attrHandler(element, newValue);
+            }
+            else {
+                // 属性で代替不可 → ハイドレーション用ストアに蓄積
+                addSsrProperty(element, firstSegment, newValue);
+                trackSsrPropertyNode(element);
+            }
+        }
         return;
     }
     const firstSegment = propSegments[0];
@@ -2932,6 +3000,7 @@ function applyChangeToProperty(binding, _context, newValue) {
             }
         }
     }
+    // サブオブジェクトプロパティ (e.g. style.xxx) は属性に反映済みなのでストア不要
 }
 
 function applyChangeToRadio(binding, _context, newValue) {
@@ -2950,10 +3019,23 @@ function applyChangeToStyle(binding, _context, newValue) {
     }
 }
 
+const ssrWrappedNodes = new WeakSet();
 function applyChangeToText(binding, _context, newValue) {
     if (binding.replaceNode.nodeValue !== newValue) {
         binding.replaceNode.nodeValue = newValue;
     }
+    // SSR モード時: テキストノードの前後にコメントを挿入して境界を明示
+    if (inSsr() && !ssrWrappedNodes.has(binding.replaceNode)) {
+        ssrWrappedNodes.add(binding.replaceNode);
+        const parentNode = binding.replaceNode.parentNode;
+        if (parentNode) {
+            const path = binding.statePathName;
+            const startComment = document.createComment(`@@wcs-text-start:${path}`);
+            const endComment = document.createComment(`@@wcs-text-end:${path}`);
+            parentNode.insertBefore(startComment, binding.replaceNode);
+            parentNode.insertBefore(endComment, binding.replaceNode.nextSibling);
+        }
+    }
 }
 
 function applyChangeToWebComponent(binding, _context, newValue) {
@@ -3806,7 +3888,391 @@ async function buildBindings(root) {
     }
 }
 
+// ハイドレーション時にスキップするバインディングタイプ
+const STRUCTURAL_TYPES = new Set(['for', 'if', 'elseif', 'else']);
+/**
+ * SSR ブロック境界コメントを走査して、start〜end 間のノードを収集する
+ */
+function collectSsrBlocks(root) {
+    const blocks = [];
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+    const startComments = [];
+    // まず全コメントを収集
+    while (walker.nextNode()) {
+        startComments.push(walker.currentNode);
+    }
+    for (const comment of startComments) {
+        const startMatch = SSR_BLOCK_START.exec(comment.data);
+        if (!startMatch)
+            continue;
+        const type = startMatch[1];
+        const info = startMatch[2]; // "uuid:path:index" or "uuid:path"
+        const parts = info.split(':');
+        let uuid;
+        let path;
+        let index = null;
+        if (type === 'for') {
+            // uuid:path:index
+            uuid = parts[0];
+            path = parts[1];
+            index = parseInt(parts[2], 10);
+        }
+        else {
+            // uuid:path
+            uuid = parts[0];
+            path = parts.slice(1).join(':');
+        }
+        // start と end の間のノードを収集
+        const nodes = [];
+        let sibling = comment.nextSibling;
+        const endPattern = `@@wcs-${type}-end:${info}`;
+        while (sibling) {
+            if (sibling.nodeType === Node.COMMENT_NODE && sibling.data === endPattern) {
+                break;
+            }
+            nodes.push(sibling);
+            sibling = sibling.nextSibling;
+        }
+        blocks.push({ type, uuid, path, index, nodes });
+    }
+    return blocks;
+}
+/**
+ * live DOM ノード群からバインディングを収集する。
+ * ノードを一時的に DocumentFragment に移動して collectNodesAndBindingInfos を実行し、
+ * 元の位置に戻す。
+ */
+function collectBindingsFromLiveNodes(nodes) {
+    if (nodes.length === 0)
+        return { bindingInfos: [], subscriberNodes: [] };
+    // ノードの元の位置を記録
+    const parent = nodes[0].parentNode;
+    const nextSibling = nodes[nodes.length - 1].nextSibling;
+    // 一時的に wrapper 要素に移動（collectNodesAndBindingInfos は Element を受け付ける）
+    const wrapper = document.createElement('div');
+    for (const node of nodes) {
+        wrapper.appendChild(node);
+    }
+    // バインディング収集
+    const [subscriberNodes, allBindings] = collectNodesAndBindingInfos(wrapper);
+    // _initializeBindings 相当の処理
+    for (const binding of allBindings) {
+        replaceToReplaceNode(binding);
+        if (attachEventHandler(binding))
+            continue;
+        attachTwowayEventHandler(binding);
+        attachRadioEventHandler(binding);
+        attachCheckboxEventHandler(binding);
+    }
+    // 元の位置に戻す
+    if (parent) {
+        while (wrapper.firstChild) {
+            parent.insertBefore(wrapper.firstChild, nextSibling);
+        }
+    }
+    return {
+        bindingInfos: allBindings,
+        subscriberNodes,
+    };
+}
+/**
+ * SSR ブロックの DOM ノードを Content 化し、バインディングを登録する。
+ */
+function hydrateBlocks(root, blocks) {
+    // for ブロックの listIndex を UUID ごとに収集
+    const listIndexesByUuid = new Map();
+    for (const block of blocks) {
+        if (block.nodes.length === 0)
+            continue;
+        const content = createContentFromNodes(block.nodes);
+        // Content のバインディングを収集
+        const { bindingInfos, subscriberNodes } = collectBindingsFromLiveNodes(block.nodes);
+        // Content 内のノードに data-wcs-completed を付与
+        // （メインの collectNodesAndBindingInfos で重複登録されないようにする）
+        for (const node of subscriberNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                node.setAttribute('data-wcs-completed', '');
+            }
+        }
+        setBindingsByContent(content, bindingInfos);
+        setNodesByContent(content, subscriberNodes);
+        const indexBindings = [];
+        for (const binding of bindingInfos) {
+            if (binding.statePathName in INDEX_BY_INDEX_NAME) {
+                indexBindings.push(binding);
+            }
+        }
+        setIndexBindingsByContent(content, indexBindings);
+        if (block.type === 'for' && block.index !== null) {
+            const placeholderComment = findPlaceholderComment(root, 'for', block.uuid);
+            if (placeholderComment) {
+                const listIndex = createListIndex(null, block.index);
+                hydrateSetContent(placeholderComment, listIndex, content);
+                const lastNode = block.nodes[block.nodes.length - 1];
+                hydrateSetLastNode(placeholderComment, lastNode);
+                setContentByNode(placeholderComment, content);
+                // ループコンテキストをバインドし、バインディングをアドレスに登録
+                const pathInfo = getPathInfo(block.path + '.' + WILDCARD);
+                const stateAddress = createStateAddress(pathInfo, listIndex);
+                // ILoopContext は IStateAddress + listIndex なので、stateAddress をそのまま使う
+                bindLoopContextToContent(content, stateAddress);
+                for (const binding of bindingInfos) {
+                    const absAddr = getAbsoluteStateAddressByBinding(binding);
+                    addBindingByAbsoluteStateAddress(absAddr, binding);
+                }
+                // listIndex を UUID ごとに収集（後で setListIndexesByList に渡す）
+                let indexes = listIndexesByUuid.get(block.uuid);
+                if (!indexes) {
+                    indexes = [];
+                    listIndexesByUuid.set(block.uuid, indexes);
+                }
+                indexes.push(listIndex);
+            }
+        }
+        else {
+            const placeholderComment = findPlaceholderComment(root, block.type, block.uuid);
+            if (placeholderComment) {
+                setContentByNode(placeholderComment, content);
+                // バインディングをアドレスに登録
+                for (const binding of bindingInfos) {
+                    const absAddr = getAbsoluteStateAddressByBinding(binding);
+                    addBindingByAbsoluteStateAddress(absAddr, binding);
+                }
+            }
+        }
+    }
+    // for ブロックの listIndex を state のリスト値に紐づける
+    for (const [uuid, indexes] of listIndexesByUuid) {
+        const placeholderComment = findPlaceholderComment(root, 'for', uuid);
+        if (!placeholderComment)
+            continue;
+        // state から現在のリスト値を取得して listIndexes を設定
+        const rootNode = placeholderComment.getRootNode();
+        // structuralBindings はまだ登録前なので、getParseBindTextResults を直接使う
+        const fragmentInfo = getFragmentInfoByUUID(uuid);
+        if (!fragmentInfo)
+            continue;
+        const stateName = fragmentInfo.parseBindTextResult.stateName;
+        const statePathName = fragmentInfo.parseBindTextResult.statePathName;
+        const stateElement = getStateElementByName(rootNode, stateName);
+        if (!stateElement)
+            continue;
+        stateElement.createState("readonly", (state) => {
+            const list = state[statePathName];
+            if (Array.isArray(list)) {
+                setListIndexesByList(list, indexes);
+            }
+        });
+    }
+}
+function findPlaceholderComment(root, type, uuid) {
+    const keywordMap = {
+        'for': config.commentForPrefix,
+        'if': config.commentIfPrefix,
+        'elseif': config.commentElseIfPrefix,
+        'else': config.commentElsePrefix,
+    };
+    const keyword = keywordMap[type];
+    if (!keyword)
+        return null;
+    const pattern = `@@${keyword}:${uuid}`;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+    while (walker.nextNode()) {
+        const comment = walker.currentNode;
+        if (comment.data === pattern) {
+            return comment;
+        }
+    }
+    return null;
+}
+/**
+ * <wcs-ssr> 内のテンプレートを fragmentInfoByUUID に復帰させる。
+ */
+function restoreFragments(root, ssrEl) {
+    const rootNode = root;
+    let lastIfParseResult = null;
+    for (const [uuid, tpl] of ssrEl.templates) {
+        const bindText = tpl.getAttribute(config.bindAttributeName) || '';
+        const parseBindTextResults = parseBindTextsForElement(bindText);
+        let parseBindTextResult = parseBindTextResults[0];
+        const bindingType = parseBindTextResult.bindingType;
+        // else: 直前の if 条件の not → 条件反転
+        // elseif: 独自条件を持つが stateName は if から引き継ぐ
+        if (bindingType === 'else' && lastIfParseResult) {
+            parseBindTextResult = {
+                ...lastIfParseResult,
+                outFilters: [...lastIfParseResult.outFilters, createNotFilter()],
+                bindingType: 'else',
+            };
+        }
+        else if (bindingType === 'elseif' && lastIfParseResult) {
+            parseBindTextResult = {
+                ...parseBindTextResult,
+                stateName: lastIfParseResult.stateName,
+            };
+        }
+        // if chain の追跡
+        if (bindingType === 'if') {
+            lastIfParseResult = parseBindTextResult;
+        }
+        else if (bindingType === 'elseif') {
+            lastIfParseResult = parseBindTextResult;
+        }
+        else if (bindingType === 'else') {
+            lastIfParseResult = null;
+        }
+        const fragment = document.importNode(tpl.content, true);
+        const forPath = bindingType === "for" ? parseBindTextResult.statePathName : undefined;
+        optimizeFragment(fragment);
+        if (typeof forPath === "string") {
+            expandShorthandPaths(fragment, forPath);
+        }
+        collectStructuralFragments(rootNode, fragment, forPath);
+        const fragmentInfo = {
+            fragment,
+            parseBindTextResult,
+            nodeInfos: getFragmentNodeInfos(fragment),
+        };
+        setFragmentInfoByUUID(uuid, rootNode, fragmentInfo);
+    }
+}
+/**
+ * SSR ハイドレーション用バインディング初期化。
+ * バージョン不一致時は DOM をクリーンアップして false を返す
+ * （呼び出し元で buildBindings にフォールバック）。
+ */
+async function hydrateBindings(root) {
+    await waitForStateInitialize(root);
+    // バージョン検証
+    const ssrElements = root.querySelectorAll(config.tagNames.ssr);
+    for (const ssrNode of ssrElements) {
+        const ssrEl = ssrNode;
+        if (!ssrEl.verifyVersion()) {
+            console.warn(`[@wcstack/state] SSR version mismatch: server="${ssrEl.version}", client="${VERSION}". Falling back to full render.`);
+            Ssr.cleanupDom(root);
+            return false;
+        }
+    }
+    // <wcs-ssr> からテンプレートを fragmentInfoByUUID に復帰
+    for (const ssrNode of ssrElements) {
+        restoreFragments(root, ssrNode);
+    }
+    // SSR ブロック境界コメントから既存 DOM を Content 化
+    const blocks = collectSsrBlocks(document.body);
+    hydrateBlocks(document.body, blocks);
+    // ブロック境界コメント (start/end) を除去
+    Ssr.removeBlockBoundaryComments(document.body);
+    // <wcs-ssr> を一時除去（バインディング走査に含めない）
+    const ssrParents = [];
+    for (const el of ssrElements) {
+        if (el.parentNode) {
+            ssrParents.push({ el, parent: el.parentNode, next: el.nextSibling });
+            el.remove();
+        }
+    }
+    // 構造プレースホルダーコメント (@@wcs-for:uuid 等) は残す
+    // → バインディング走査で拾われ、状態変化時の再レンダリングに使われる
+    // SSR テキストバインディングを @@: 形式に復元
+    Ssr.restoreTextBindings(document.body);
+    // ノードとバインディングを収集
+    const [subscriberNodes, allBindings] = collectNodesAndBindingInfos(document.body);
+    // 収集完了したノードに data-wcs-completed 属性を付与
+    // for ブロック内ノード（hydrateBlocks で登録済み）にはループコンテキストをリセットしない
+    for (const node of subscriberNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (!el.hasAttribute('data-wcs-completed')) {
+                setLoopContextByNode(node, null);
+                el.setAttribute('data-wcs-completed', '');
+            }
+        }
+        else {
+            // コメントノード等
+            setLoopContextByNode(node, null);
+        }
+    }
+    // バインディングを構造系とそれ以外に分離
+    const normalBindings = [];
+    const structuralBindings = [];
+    for (const binding of allBindings) {
+        replaceToReplaceNode(binding);
+        if (attachEventHandler(binding)) {
+            continue;
+        }
+        attachTwowayEventHandler(binding);
+        attachRadioEventHandler(binding);
+        attachCheckboxEventHandler(binding);
+        if (STRUCTURAL_TYPES.has(binding.bindingType)) {
+            structuralBindings.push(binding);
+        }
+        else if (binding.statePathName.includes(WILDCARD)) {
+            // for ブロック内のバインディング → Content のバインディングとして登録済み
+            continue;
+        }
+        else {
+            normalBindings.push(binding);
+        }
+    }
+    // 全バインディング（通常 + 構造）をアドレスに登録
+    for (const binding of [...normalBindings, ...structuralBindings]) {
+        const absoluteStateAddress = getAbsoluteStateAddressByBinding(binding);
+        addBindingByAbsoluteStateAddress(absoluteStateAddress, binding);
+        const rootNode = binding.replaceNode.getRootNode();
+        const stateElement = getStateElementByName(rootNode, binding.stateName);
+        if (stateElement === null) {
+            raiseError(`State element with name "${binding.stateName}" not found for binding.`);
+        }
+        if (binding.bindingType !== 'event') {
+            stateElement.setPathInfo(binding.statePathName, binding.bindingType);
+        }
+    }
+    // for バインディングの lastListValue を初期値として設定
+    // （次回の状態変化時に差分計算の基準になる）
+    for (const binding of structuralBindings) {
+        if (binding.bindingType === 'for') {
+            const absAddr = getAbsoluteStateAddressByBinding(binding);
+            const rootNode = binding.replaceNode.getRootNode();
+            const stateElement = getStateElementByName(rootNode, binding.stateName);
+            if (stateElement) {
+                stateElement.createState("readonly", (state) => {
+                    const value = state[binding.statePathName];
+                    if (Array.isArray(value)) {
+                        setLastListValueByAbsoluteStateAddress(absAddr, value);
+                    }
+                });
+            }
+        }
+    }
+    // 通常バインディングのみ初回値適用（構造バインディングはSSR描画済み）
+    applyChangeFromBindings(normalBindings);
+    // <wcs-ssr> を元に戻す
+    for (const { el, parent, next } of ssrParents) {
+        parent.insertBefore(el, next);
+    }
+    // hydrateProps 復元
+    const restoredSsrElements = root.querySelectorAll(config.tagNames.ssr);
+    for (const ssrNode of restoredSsrElements) {
+        const ssrEl = ssrNode;
+        const props = ssrEl.hydrateProps;
+        for (const [id, propMap] of Object.entries(props)) {
+            const target = root.querySelector(`[data-wcs-ssr-id="${id}"]`);
+            if (!target)
+                continue;
+            for (const [propName, value] of Object.entries(propMap)) {
+                target[propName] = value;
+            }
+        }
+    }
+    // ハイドレーション中の重複登録防止用属性を除去
+    const completedEls = root.querySelectorAll('[data-wcs-completed]');
+    for (const el of completedEls) {
+        el.removeAttribute('data-wcs-completed');
+    }
+    return true;
+}
+
 const stateElementByNameByNode = new WeakMap();
+const bindingsReadyByNode = new WeakMap();
 function getStateElementByName(rootNode, name) {
     let stateElementByName = stateElementByNameByNode.get(rootNode);
     if (!stateElementByName) {
@@ -3814,6 +4280,12 @@ function getStateElementByName(rootNode, name) {
     }
     return stateElementByName.get(name) || null;
 }
+/**
+ * 指定された rootNode のバインディング初期化が完了するまで待機する Promise を返す。
+ */
+function getBindingsReady(rootNode) {
+    return bindingsReadyByNode.get(rootNode) ?? Promise.resolve();
+}
 function setStateElementByName(rootNode, name, element) {
     let stateElementByName = stateElementByNameByNode.get(rootNode);
     if (element === null) {
@@ -3835,15 +4307,33 @@ function setStateElementByName(rootNode, name, element) {
             stateElementByName = new Map();
             stateElementByNameByNode.set(rootNode, stateElementByName);
             // 初めてルートノードに登録する場合
+            // enable-ssr 属性があり、サーバーサイドでない場合はハイドレーション
+            const enableSsr = !inSsr() && element.hasAttribute?.('enable-ssr');
             if (rootNode.constructor.name === 'HTMLDocument' || rootNode.constructor.name === 'Document') {
-                queueMicrotask(() => {
-                    buildBindings(rootNode);
+                const ready = new Promise((resolve) => {
+                    queueMicrotask(async () => {
+                        if (enableSsr) {
+                            const success = await hydrateBindings(rootNode);
+                            if (!success) {
+                                await buildBindings(rootNode);
+                            }
+                        }
+                        else {
+                            await buildBindings(rootNode);
+                        }
+                        resolve();
+                    });
                 });
+                bindingsReadyByNode.set(rootNode, ready);
             }
             else if (rootNode.constructor.name === 'ShadowRoot') {
-                queueMicrotask(() => {
-                    buildBindings(rootNode);
+                const ready = new Promise((resolve) => {
+                    queueMicrotask(async () => {
+                        await buildBindings(rootNode);
+                        resolve();
+                    });
                 });
+                bindingsReadyByNode.set(rootNode, ready);
             }
         }
         if (stateElementByName.has(name)) {
@@ -3856,6 +4346,427 @@ function setStateElementByName(rootNode, name, element) {
     }
 }
 
+const fragmentInfoByUUID = new Map();
+function setFragmentInfoByUUID(uuid, rootNode, fragmentInfo) {
+    if (fragmentInfo === null) {
+        fragmentInfoByUUID.delete(uuid);
+    }
+    else {
+        fragmentInfoByUUID.set(uuid, fragmentInfo);
+        const bindingPartial = fragmentInfo.parseBindTextResult;
+        const stateElement = getStateElementByName(rootNode, bindingPartial.stateName);
+        if (stateElement === null) {
+            raiseError(`State element with name "${bindingPartial.stateName}" not found for fragment info.`);
+        }
+        stateElement.setPathInfo(bindingPartial.statePathName, bindingPartial.bindingType);
+        for (const nodeInfo of fragmentInfo.nodeInfos) {
+            for (const nodeBindingPartial of nodeInfo.parseBindTextResults) {
+                const nodeStateElement = getStateElementByName(rootNode, nodeBindingPartial.stateName);
+                if (nodeStateElement === null) {
+                    raiseError(`State element with name "${nodeBindingPartial.stateName}" not found for fragment info node.`);
+                }
+                nodeStateElement.setPathInfo(nodeBindingPartial.statePathName, nodeBindingPartial.bindingType);
+            }
+        }
+    }
+}
+function getFragmentInfoByUUID(uuid) {
+    return fragmentInfoByUUID.get(uuid) || null;
+}
+function getAllFragmentUUIDs() {
+    return Array.from(fragmentInfoByUUID.keys());
+}
+
+// SSR コメントパターン
+const SSR_PLACEHOLDER_COMMENT = /^@@wcs-(?:for|if|elseif|else):[^-]/;
+const SSR_BLOCK_START = /^@@wcs-(for|if|elseif|else)-start:(.+)$/;
+const SSR_BLOCK_END = /^@@wcs-(for|if|elseif|else)-end:(.+)$/;
+const SSR_TEXT_START = /^@@wcs-text-start:(.+)$/;
+class Ssr extends HTMLElement {
+    _stateData = null;
+    _templates = null;
+    _hydrateProps = null;
+    get name() {
+        return this.getAttribute('name') || 'default';
+    }
+    get version() {
+        return this.getAttribute('version') || '';
+    }
+    get stateData() {
+        if (this._stateData === null) {
+            this._stateData = this._loadStateData();
+        }
+        return this._stateData;
+    }
+    get templates() {
+        if (this._templates === null) {
+            this._templates = this._loadTemplates();
+        }
+        return this._templates;
+    }
+    get hydrateProps() {
+        if (this._hydrateProps === null) {
+            this._hydrateProps = this._loadHydrateProps();
+        }
+        return this._hydrateProps;
+    }
+    getTemplate(uuid) {
+        return this.templates.get(uuid) ?? null;
+    }
+    /**
+     * サーバーの SSR バージョンとクライアントの state バージョンを検証する。
+     * メジャー・マイナーバージョンが一致すればtrue。
+     * version 属性がない場合は検証スキップ（true）。
+     */
+    verifyVersion() {
+        const serverVersion = this.version;
+        if (!serverVersion)
+            return true;
+        const serverParts = serverVersion.split('.');
+        const clientParts = VERSION.split('.');
+        // メジャー・マイナーが一致すれば互換
+        return serverParts[0] === clientParts[0] && serverParts[1] === clientParts[1];
+    }
+    setStateData(data) {
+        this._stateData = data;
+    }
+    setHydrateProps(props) {
+        this._hydrateProps = props;
+    }
+    _loadStateData() {
+        const script = this.querySelector(`script[type="application/json"]:not([data-wcs-ssr-props])`);
+        if (!script)
+            return {};
+        try {
+            return JSON.parse(script.textContent || '{}');
+        }
+        catch {
+            return {};
+        }
+    }
+    _loadTemplates() {
+        const map = new Map();
+        const templates = this.querySelectorAll('template[id]');
+        for (const tpl of templates) {
+            const id = tpl.getAttribute('id');
+            if (id) {
+                map.set(id, tpl);
+            }
+        }
+        return map;
+    }
+    _loadHydrateProps() {
+        const script = this.querySelector('script[data-wcs-ssr-props]');
+        if (!script)
+            return {};
+        try {
+            return JSON.parse(script.textContent || '{}');
+        }
+        catch {
+            return {};
+        }
+    }
+    static findByName(root, name) {
+        const tagName = config.tagNames.ssr;
+        const parentEl = root instanceof Element
+            ? root
+            : root instanceof Document
+                ? root.documentElement
+                : null;
+        if (!parentEl)
+            return null;
+        const el = parentEl.querySelector(`${tagName}[name="${name}"]`);
+        return el;
+    }
+    /**
+     * stateData と構造テンプレート・プロパティから <wcs-ssr> の中身を構築する。
+     * server パッケージの renderToString から呼ばれる。
+     */
+    /**
+     * wcs-state 要素から $ プレフィックスや関数を除いたデータを抽出する。
+     */
+    static 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;
+    }
+    static buildContent(ssrEl, stateData) {
+        // 初期データ JSON
+        const jsonScript = document.createElement('script');
+        jsonScript.setAttribute('type', 'application/json');
+        jsonScript.textContent = JSON.stringify(stateData);
+        ssrEl.appendChild(jsonScript);
+        // UUID で管理されているテンプレートを復元して格納
+        const uuids = getAllFragmentUUIDs();
+        for (const uuid of uuids) {
+            const fragmentInfo = getFragmentInfoByUUID(uuid);
+            if (!fragmentInfo)
+                continue;
+            const tpl = document.createElement('template');
+            tpl.setAttribute('id', uuid);
+            const bindResult = fragmentInfo.parseBindTextResult;
+            const bindText = bindResult.bindingType === 'else'
+                ? 'else:'
+                : `${bindResult.bindingType}: ${bindResult.statePathName}`;
+            tpl.setAttribute(config.bindAttributeName, bindText);
+            const content = fragmentInfo.fragment.cloneNode(true);
+            tpl.content.appendChild(content);
+            ssrEl.appendChild(tpl);
+        }
+        // 属性で代替不可なプロパティをハイドレーション用に格納
+        const ssrNodes = getAllSsrPropertyNodes();
+        if (ssrNodes.length > 0) {
+            const propsData = {};
+            for (let i = 0; i < ssrNodes.length; i++) {
+                const node = ssrNodes[i];
+                const entries = getSsrProperties(node);
+                if (entries.length === 0)
+                    continue;
+                const id = `wcs-ssr-${i}`;
+                node.setAttribute('data-wcs-ssr-id', id);
+                const props = {};
+                for (const entry of entries) {
+                    props[entry.propName] = entry.value;
+                }
+                propsData[id] = props;
+            }
+            if (Object.keys(propsData).length > 0) {
+                const propsScript = document.createElement('script');
+                propsScript.setAttribute('type', 'application/json');
+                propsScript.setAttribute('data-wcs-ssr-props', '');
+                propsScript.textContent = JSON.stringify(propsData);
+                ssrEl.appendChild(propsScript);
+            }
+        }
+        clearSsrPropertyStore();
+    }
+    /**
+     * SSR ブロック境界コメント (@@wcs-*-start/end) を除去する
+     */
+    static removeBlockBoundaryComments(root) {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+        const toRemove = [];
+        while (walker.nextNode()) {
+            const comment = walker.currentNode;
+            if (SSR_BLOCK_START.test(comment.data) || SSR_BLOCK_END.test(comment.data)) {
+                toRemove.push(comment);
+            }
+        }
+        for (const comment of toRemove) {
+            comment.remove();
+        }
+    }
+    /**
+     * SSR の構造プレースホルダーコメント (@@wcs-for:uuid 等) を除去する
+     */
+    static removeStructuralComments(root) {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+        const toRemove = [];
+        while (walker.nextNode()) {
+            const comment = walker.currentNode;
+            if (SSR_PLACEHOLDER_COMMENT.test(comment.data)) {
+                toRemove.push(comment);
+            }
+        }
+        for (const comment of toRemove) {
+            comment.remove();
+        }
+    }
+    /**
+     * SSR テキストバインディングコメントを復元する。
+     * <!--@@wcs-text-start:path-->text<!--@@wcs-text-end:path-->
+     * → <!--@@: path--> (バインディングシステムが認識する形式)
+     */
+    static restoreTextBindings(root) {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+        const startComments = [];
+        while (walker.nextNode()) {
+            const comment = walker.currentNode;
+            const match = SSR_TEXT_START.exec(comment.data);
+            if (match) {
+                startComments.push({ comment, path: match[1] });
+            }
+        }
+        for (const { comment, path } of startComments) {
+            const bindComment = document.createComment(`@@: ${path}`);
+            comment.parentNode.insertBefore(bindComment, comment);
+            let sibling = comment.nextSibling;
+            comment.remove();
+            const endPattern = `@@wcs-text-end:${path}`;
+            while (sibling) {
+                const next = sibling.nextSibling;
+                if (sibling.nodeType === Node.COMMENT_NODE && sibling.data === endPattern) {
+                    sibling.parentNode.removeChild(sibling);
+                    break;
+                }
+                sibling.parentNode.removeChild(sibling);
+                sibling = next;
+            }
+        }
+    }
+    /**
+     * SSR DOM をクリーンアップし、buildBindings が動作できる状態に戻す。
+     * バージョン不一致時のフォールバック用。
+     *
+     * 1. SSR ブロック境界コメント間のレンダリング済みノードを除去
+     * 2. SSR テキストバインディングを @@: 形式に復元
+     * 3. プレースホルダーコメントを <wcs-ssr> 内のテンプレートで差し替え
+     * 4. data-wcs-ssr-id 属性を除去
+     * 5. <wcs-ssr> を除去
+     */
+    static cleanupDom(root) {
+        const body = document.body;
+        // <wcs-ssr> からテンプレート UUID マップを構築（カスタム要素未定義でも動作するよう DOM 直接走査）
+        const ssrElements = root.querySelectorAll(config.tagNames.ssr);
+        const templateByUuid = new Map();
+        for (const ssrNode of ssrElements) {
+            const templates = ssrNode.querySelectorAll('template[id]');
+            for (const tpl of templates) {
+                const id = tpl.getAttribute('id');
+                if (id) {
+                    templateByUuid.set(id, tpl);
+                }
+            }
+        }
+        // SSR ブロック境界コメント間のレンダリング済みノードと境界コメントを除去
+        const walker1 = document.createTreeWalker(body, NodeFilter.SHOW_COMMENT);
+        const startComments = [];
+        while (walker1.nextNode()) {
+            const comment = walker1.currentNode;
+            if (SSR_BLOCK_START.test(comment.data)) {
+                startComments.push(comment);
+            }
+        }
+        for (const startComment of startComments) {
+            const match = SSR_BLOCK_START.exec(startComment.data);
+            const type = match[1];
+            const info = match[2];
+            const endPattern = `@@wcs-${type}-end:${info}`;
+            let sibling = startComment.nextSibling;
+            while (sibling) {
+                const next = sibling.nextSibling;
+                if (sibling.nodeType === Node.COMMENT_NODE && sibling.data === endPattern) {
+                    sibling.remove();
+                    break;
+                }
+                sibling.remove();
+                sibling = next;
+            }
+            startComment.remove();
+        }
+        // SSR テキストバインディングを @@: 形式に復元
+        Ssr.restoreTextBindings(body);
+        // プレースホルダーコメント (@@wcs-for:uuid 等) をテンプレートに差し替え
+        const walker2 = document.createTreeWalker(body, NodeFilter.SHOW_COMMENT);
+        const placeholders = [];
+        while (walker2.nextNode()) {
+            const comment = walker2.currentNode;
+            if (SSR_PLACEHOLDER_COMMENT.test(comment.data)) {
+                const uuid = comment.data.split(':')[1];
+                placeholders.push({ comment, uuid });
+            }
+        }
+        for (const { comment, uuid } of placeholders) {
+            const tpl = templateByUuid.get(uuid);
+            if (tpl) {
+                const restored = document.createElement('template');
+                const bindAttr = tpl.getAttribute(config.bindAttributeName);
+                if (bindAttr)
+                    restored.setAttribute(config.bindAttributeName, bindAttr);
+                const imported = document.importNode(tpl.content, true);
+                if (imported.childNodes.length > 0) {
+                    restored.content.appendChild(imported);
+                }
+                else {
+                    for (const child of Array.from(tpl.childNodes)) {
+                        restored.content.appendChild(document.importNode(child, true));
+                    }
+                }
+                comment.parentNode.replaceChild(restored, comment);
+            }
+        }
+        // data-wcs-ssr-id 属性を除去
+        const ssrIdElements = root.querySelectorAll('[data-wcs-ssr-id]');
+        for (const el of ssrIdElements) {
+            el.removeAttribute('data-wcs-ssr-id');
+        }
+        // <wcs-ssr> を除去
+        for (const el of ssrElements) {
+            el.remove();
+        }
+    }
+}
+
+async function loadFromInnerScript(script, name) {
+    let scriptModule = null;
+    const uniq_comment = `\n//# sourceURL=${name}\n`;
+    if (typeof URL.createObjectURL === 'function') {
+        // Create a blob URL for the script and dynamically import it
+        const blob = new Blob([script.text + uniq_comment], { type: "application/javascript" });
+        const url = URL.createObjectURL(blob);
+        try {
+            scriptModule = await import(url);
+        }
+        finally {
+            // Clean up blob URL to prevent memory leak
+            URL.revokeObjectURL(url);
+        }
+    }
+    else {
+        // Fallback: Base64 encoding method (for test environment)
+        // Convert script to Base64 and import via data: URL
+        const b64 = btoa(String.fromCodePoint(...new TextEncoder().encode(script.text + uniq_comment)));
+        scriptModule = await import(`data:application/javascript;base64,${b64}`);
+    }
+    return (scriptModule && typeof scriptModule.default === 'object') ? scriptModule.default : {};
+}
+
+async function loadFromJsonFile(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            raiseError(`Failed to fetch JSON file: ${response.statusText}`);
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (e) {
+        console.error('Failed to load JSON file:', e);
+        return {};
+    }
+}
+
+async function loadFromScriptFile(url) {
+    try {
+        const module = await import(/* @vite-ignore */ url);
+        return module.default || {};
+    }
+    catch (e) {
+        raiseError(`Failed to load script file: ${e}`);
+    }
+}
+
+function loadFromScriptJson(id) {
+    const script = document.getElementById(id);
+    if (script && script.type === 'application/json') {
+        try {
+            const data = JSON.parse(script.textContent || '{}');
+            return data;
+        }
+        catch (e) {
+            raiseError('Failed to parse JSON from script element:' + e);
+        }
+    }
+    return {};
+}
+
 class LoopContextStack {
     _loopContextStack = Array(MAX_LOOP_DEPTH).fill(undefined);
     _length = 0;
@@ -5531,11 +6442,14 @@ function getStateInfo(state) {
     };
 }
 class State extends HTMLElement {
+    static hasConnectedCallbackPromise = true;
     __state;
     _name = 'default';
     _initialized = false;
     _initializePromise;
     _resolveInitialize = null;
+    _connectedCallbackPromise;
+    _resolveConnectedCallback = null;
     _loadingPromise;
     _resolveLoading = null;
     _setStatePromise = null;
@@ -5557,6 +6471,9 @@ class State extends HTMLElement {
         this._initializePromise = new Promise((resolve) => {
             this._resolveInitialize = resolve;
         });
+        this._connectedCallbackPromise = new Promise((resolve) => {
+            this._resolveConnectedCallback = resolve;
+        });
         this._loadingPromise = new Promise((resolve) => {
             this._resolveLoading = resolve;
         });
@@ -5588,7 +6505,22 @@ class State extends HTMLElement {
     get name() {
         return this._name;
     }
+    _loadFromSsrElement() {
+        if (!this.hasAttribute('enable-ssr'))
+            return null;
+        const name = this.getAttribute('name') || 'default';
+        const root = this.parentNode;
+        if (!root)
+            return null;
+        const ssrEl = Ssr.findByName(root, name);
+        if (!ssrEl)
+            return null;
+        const data = ssrEl.stateData;
+        return Object.keys(data).length > 0 ? data : null;
+    }
     async _initialize() {
+        // enable-ssr (クライアント側のみ): <wcs-ssr> から初期データを取得
+        const ssrState = !inSsr() ? this._loadFromSsrElement() : null;
         try {
             if (this.hasAttribute('state')) {
                 const state = this.getAttribute('state');
@@ -5628,6 +6560,21 @@ class State extends HTMLElement {
         catch (e) {
             raiseError(`Failed to initialize state: ${e}`);
         }
+        // SSR データがある場合、state 定義（メソッド/getter）を維持しつつデータ値を上書き
+        if (ssrState !== null && this.__state) {
+            for (const [key, value] of Object.entries(ssrState)) {
+                if (key in this.__state) {
+                    const desc = Object.getOwnPropertyDescriptor(this.__state, key);
+                    // getter/setter はスキップ（定義側を優先）
+                    if (desc && (desc.get || desc.set))
+                        continue;
+                    // 関数はスキップ
+                    if (typeof this.__state[key] === 'function')
+                        continue;
+                }
+                this.__state[key] = value;
+            }
+        }
         await this._loadingPromise;
         this._name = this.getAttribute('name') || 'default';
         setStateElementByName(this.rootNode, this._name, this);
@@ -5693,7 +6640,23 @@ class State extends HTMLElement {
             this._initialized = true;
             this._resolveInitialize?.();
         }
-        await this._callStateConnectedCallback();
+        // enable-ssr (クライアント側): SSR で $connectedCallback 済みなのでスキップ
+        // inSsr() (サーバー側): レンダリング中なので実行する
+        if (!this.hasAttribute('enable-ssr') || inSsr()) {
+            await this._callStateConnectedCallback();
+        }
+        // サーバーモード + enable-ssr: バインディング完了後に <wcs-ssr> を生成
+        if (inSsr() && this.hasAttribute('enable-ssr')) {
+            await getBindingsReady(this.rootNode);
+            const name = this.getAttribute('name') || 'default';
+            const stateData = Ssr.extractStateData(this);
+            const ssrEl = document.createElement(config.tagNames.ssr);
+            ssrEl.setAttribute('name', name);
+            ssrEl.setAttribute('version', VERSION);
+            Ssr.buildContent(ssrEl, stateData);
+            this.parentNode?.insertBefore(ssrEl, this);
+        }
+        this._resolveConnectedCallback?.();
     }
     disconnectedCallback() {
         if (this._rootNode !== null) {
@@ -5705,6 +6668,9 @@ class State extends HTMLElement {
     get initializePromise() {
         return this._initializePromise;
     }
+    get connectedCallbackPromise() {
+        return this._connectedCallbackPromise;
+    }
     get listPaths() {
         return this._listPaths;
     }
@@ -5832,7 +6798,9 @@ class State extends HTMLElement {
 }
 
 function registerComponents() {
-    // Register custom element
+    if (!customElements.get(config.tagNames.ssr)) {
+        customElements.define(config.tagNames.ssr, Ssr);
+    }
     if (!customElements.get(config.tagNames.state)) {
         customElements.define(config.tagNames.state, State);
     }
@@ -5931,5 +6899,5 @@ function defineState(definition) {
     return definition;
 }
 
-export { bootstrapState, defineState };
+export { Ssr, VERSION, bootstrapState, buildBindings, defineState, getBindingsReady, getConfig };
 //# sourceMappingURL=index.esm.js.map