@wcstack/state 1.3.17 → 1.3.18

package/README.ja.md

@@ -8,6 +8,28 @@
 
 CDNスクリプトはカスタム要素の定義を登録するだけ — ロード時にはそれ以外何も起きない。`<wcs-state>` 要素がDOMに接続されたとき、状態ソースを読み取り、兄弟要素の `data-wcs` バインディングを走査し、リアクティビティを構築する。すべての初期化は要素のライフサイクルが駆動する。あなたのコードではなく。
 
+## 4ステップで動く
+
+```html
+<!-- 1. CDN を読み込む -->
+<script type="module" src="https://esm.run/@wcstack/state/auto"></script>
+
+<!-- 2. <wcs-state> タグを書く -->
+<wcs-state>
+  <!-- 3. 状態オブジェクトを定義する -->
+  <script type="module">
+    export default {
+      message: "Hello, World!"
+    };
+  </script>
+</wcs-state>
+
+<!-- 4. data-wcs 属性でバインドする -->
+<div data-wcs="textContent: message"></div>
+```
+
+これだけ。ビルドなし、初期化コードなし、フレームワークなし。
+
 ## 特徴
 
 - **宣言的データバインディング** — `data-wcs` 属性によるプロパティ / テキスト / イベント / 構造バインディング
@@ -1077,12 +1099,21 @@ bootstrapState();
 
 ```
 bootstrapState()
-  ├── registerComponents()    // <wcs-state> カスタム要素を登録
-  └── registerHandler()       // DOMContentLoaded ハンドラ
-        ├── waitForStateInitialize()    // 全 <wcs-state> の読み込み待機
-        ├── convertMustacheToComments() // {{ }} → コメントノードに変換
-        ├── collectStructuralFragments() // for/if テンプレートを収集
-        └── initializeBindings()        // DOM 走査、data-wcs 解析、バインディング設定
+  └── registerComponents()              // <wcs-state> カスタム要素を登録
+
+<wcs-state> connectedCallback
+  ├── _initializeBindWebComponent()     // bind-component: 親コンポーネントから状態を取得
+  ├── _initialize()                     // 状態をロード (state属性 / src / json / script / API)
+  │     └── setStateElementByName()     // WeakMap<Node, Map<name, element>> に登録
+  │           └── (rootNode への初回登録時)
+  │                 └── queueMicrotask → buildBindings()
+  ├── _callStateConnectedCallback()     // $connectedCallback が定義されていれば呼び出し
+
+buildBindings(root)
+  ├── waitForStateInitialize()          // 全 <wcs-state> の initializePromise を待機
+  ├── convertMustacheToComments()       // {{ }} → コメントノードに変換
+  ├── collectStructuralFragments()      // for/if テンプレートを収集
+  └── initializeBindings()              // DOM 走査、data-wcs 解析、バインディング設定
 ```
 
 ### リアクティビティフロー

package/README.md

@@ -8,6 +8,28 @@ That's what `<wcs-state>` and `data-wcs` explore. One CDN import, zero dependenc
 
 The CDN script only registers the custom element definition — nothing else happens at load time. When a `<wcs-state>` element connects to the DOM, it reads its state source, scans sibling elements for `data-wcs` bindings, and wires up reactivity. All initialization is driven by the element's lifecycle, not by your code.
 
+## 4 Steps to Reactive HTML
+
+```html
+<!-- 1. Load the CDN -->
+<script type="module" src="https://esm.run/@wcstack/state/auto"></script>
+
+<!-- 2. Write a <wcs-state> tag -->
+<wcs-state>
+  <!-- 3. Define your state object -->
+  <script type="module">
+    export default {
+      message: "Hello, World!"
+    };
+  </script>
+</wcs-state>
+
+<!-- 4. Bind with data-wcs attributes -->
+<div data-wcs="textContent: message"></div>
+```
+
+That's it. No build, no bootstrap code, no framework.
+
 ## Features
 
 - **Declarative data binding** — `data-wcs` attribute for property / text / event / structural binding
@@ -1077,12 +1099,21 @@ bootstrapState();
 
 ```
 bootstrapState()
-  ├── registerComponents()    // Register <wcs-state> custom element
-  └── registerHandler()       // DOMContentLoaded handler
-        ├── waitForStateInitialize()    // Wait for all <wcs-state> to load
-        ├── convertMustacheToComments() // {{ }} → comment nodes
-        ├── collectStructuralFragments() // Collect for/if templates
-        └── initializeBindings()        // Walk DOM, parse data-wcs, set up bindings
+  └── registerComponents()              // Register <wcs-state> custom element
+
+<wcs-state> connectedCallback
+  ├── _initializeBindWebComponent()     // bind-component: get state from parent component
+  ├── _initialize()                     // Load state (state attr / src / json / script / API)
+  │     └── setStateElementByName()     // Register to WeakMap<Node, Map<name, element>>
+  │           └── (first registration per rootNode)
+  │                 └── queueMicrotask → buildBindings()
+  ├── _callStateConnectedCallback()     // Call $connectedCallback if defined
+
+buildBindings(root)
+  ├── waitForStateInitialize()          // Wait for all <wcs-state> initializePromise
+  ├── convertMustacheToComments()       // {{ }} → comment nodes
+  ├── collectStructuralFragments()      // Collect for/if templates
+  └── initializeBindings()              // Walk DOM, parse data-wcs, set up bindings
 ```
 
 ### Reactivity Flow

package/dist/index.esm.js

@@ -1910,28 +1910,31 @@ function clearAbsoluteStateAddressByBinding(binding) {
 }
 
 const cache = new WeakMap();
-function isCustomElement(node) {
-    let value = cache.get(node);
-    if (value !== undefined) {
-        return value;
+function getCustomElement(node) {
+    const cached = cache.get(node);
+    if (cached !== undefined) {
+        return cached;
     }
+    let value = null;
     try {
         if (node.nodeType !== Node.ELEMENT_NODE) {
-            return value = false;
+            return value;
         }
         const element = node;
-        if (element.tagName.includes("-")) {
-            return value = true;
+        const tagName = element.tagName.toLowerCase();
+        if (tagName.includes("-")) {
+            return value = tagName;
         }
         if (element.hasAttribute("is")) {
-            if (element.getAttribute("is")?.includes("-")) {
-                return value = true;
+            const is = element.getAttribute("is");
+            if (is.includes("-")) {
+                return value = is;
             }
         }
-        return value = false;
+        return value;
     }
     finally {
-        cache.set(node, value ?? false);
+        cache.set(node, value);
     }
 }
 
@@ -2967,9 +2970,9 @@ function applyChange(binding, context) {
     if (binding.bindingType === "event") {
         return;
     }
-    if (isCustomElement(binding.replaceNode)) {
-        const element = binding.replaceNode;
-        if (customElements.get(element.tagName.toLowerCase()) === undefined) {
+    const customTag = getCustomElement(binding.replaceNode);
+    if (customTag) {
+        if (customElements.get(customTag) === undefined) {
             // cutomElement側の初期化を期待
             return;
         }
@@ -5494,7 +5497,8 @@ class State extends HTMLElement {
                 : parentNode instanceof Element
                     ? parentNode
                     : null;
-            if (boundComponent === null || !isCustomElement(boundComponent)) {
+            const customTagName = boundComponent ? getCustomElement(boundComponent) : null;
+            if (boundComponent === null || customTagName === null) {
                 raiseError(`"bind-component" requires <${config.tagNames.state}> to be a direct child of a custom element.`);
             }
             // LightDOMの場合、名前空間が上位スコープと共有されるためnameが必須
@@ -5502,7 +5506,7 @@ class State extends HTMLElement {
                 raiseError(`"bind-component" in Light DOM requires a "name" attribute to avoid namespace conflicts with the parent scope.`);
             }
             const boundComponentStateProp = this.getAttribute("bind-component");
-            await customElements.whenDefined(boundComponent.tagName.toLowerCase());
+            await customElements.whenDefined(customTagName.toLowerCase());
             // data-wcs属性がある場合は、上位の状態によりbinding情報の設定が完了するまで待機する
             if (boundComponent.hasAttribute(config.bindAttributeName)) {
                 await waitInitializeBinding(boundComponent);