cotomy 0.3.16 → 0.4.0

package/README.md

@@ -38,6 +38,7 @@ The View layer provides thin wrappers around DOM elements and window events.
 - Scoped CSS
   - `scopeId: string` - Returns the value stored in the element's `data-cotomy-scopeid` attribute
   - `[scope]` placeholder in provided CSS is replaced by `[data-cotomy-scopeid="..."]`
+  - Scoped CSS text is kept on the instance; if the `<style id="css-${scopeId}">` is missing when the element is attached, it will be re-generated automatically
   - `stylable: boolean` - False for tags like `script`, `style`, `link`, `meta`
 - Static helpers
   - `CotomyElement.encodeHtml(text)`
@@ -77,7 +78,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `insertBefore(sibling): this` / `insertAfter(sibling): this`
   - `appendTo(target): this` / `prependTo(target): this`
   - `comesBefore(target): boolean` / `comesAfter(target): boolean` — Checks DOM order (returns `false` for the same element or disconnected nodes)
-  - `clone(type?): CotomyElement` - Returns a deep-cloned element, optionally typed, and reassigns new `data-cotomy-instance`/`data-cotomy-scopeid` values (and strips `data-cotomy-moving`). Cloning an invalidated element (`data-cotomy-invalidated`) throws.
+  - `clone(type?): CotomyElement` - Returns a deep-cloned element, optionally typed, and reassigns a new `data-cotomy-instance` while preserving the `data-cotomy-scopeid` for scoped CSS sharing (strips `data-cotomy-moving`). Cloning an invalidated element (`data-cotomy-invalidated`) throws.
   - `clear(): this` — Removes all descendants and text
   - `remove(): void` — Explicitly non-chainable after removal
 - Geometry & visibility
@@ -107,6 +108,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - Layout (custom): `resize`, `scroll`, `changelayout` — requires `listenLayoutEvents()` on the element
   - Move lifecycle: `cotomy:transitstart`, `cotomy:transitend` — emitted automatically by `append`, `prepend`, `insertBefore/After`, `appendTo`, and `prependTo`. While moving, the element (and its descendants) receive a temporary `data-cotomy-moving` attribute so removal observers know the node is still in transit.
   - Removal: `removed` — fired when an element actually leaves the DOM (MutationObserver-backed). Because `cotomy:transitstart`/`transitend` manage the `data-cotomy-moving` flag, `removed` only runs for true detachments, making it safe for cleanup.
+  - Registry isolation: イベントレジストリは `data-cotomy-instance`（インスタンスID）単位で管理され、クローンは新しいインスタンスIDを持つため、同じ `scopeId` を共有していてもリスナーが混線しません。
   - File: `filedrop(handler: (files: File[]) => void)`
 
 Example (scoped CSS and events):
@@ -128,18 +130,20 @@ document.body.appendChild(panel.element);
 
 ## Testing
 
-The scoped CSS replacement and scope-id isolation logic are covered by `tests/view.spec.ts`. Run the focused specs below to verify the behavior:
+Scoped CSS sharing/re-hydrationとインスタンス単位のイベント管理は `tests/view.spec.ts` に含まれています。主に確認したい場合は以下のコマンドで個別に実行できます:
 
 ```bash
-npx vitest run tests/view.spec.ts -t "constructs from multiple sources and applies scoped css"
-npx vitest run tests/view.spec.ts -t "assigns fresh scope ids when cloning, including descendants"
-npx vitest run tests/view.spec.ts -t "regenerates instance ids and lifecycle hooks when cloning"
-npx vitest run tests/view.spec.ts -t "strips moving flags when cloning"
-npx vitest run tests/view.spec.ts -t "throws when cloning an invalidated element"
-npx vitest run tests/view.spec.ts -t "compares document order with comesBefore/comesAfter"
+npm test -- --run tests/view.spec.ts -t "constructs from multiple sources and applies scoped css"
+npm test -- --run tests/view.spec.ts -t "preserves scope ids when cloning, including descendants"
+npm test -- --run tests/view.spec.ts -t "regenerates instance ids and lifecycle hooks when cloning"
+npm test -- --run tests/view.spec.ts -t "keeps event handlers isolated by instance even when sharing scope"
+npm test -- --run tests/view.spec.ts -t "rehydrates scoped css when a clone shares scope after the original was removed"
+npm test -- --run tests/view.spec.ts -t "strips moving flags when cloning"
+npm test -- --run tests/view.spec.ts -t "throws when cloning an invalidated element"
+npm test -- --run tests/view.spec.ts -t "compares document order with comesBefore/comesAfter"
 ```
 
-The first command ensures `[scope]` expands to `[data-cotomy-scopeid="..."]` in injected styles, the second confirms that cloning reassigns new `data-cotomy-scopeid` attributes to the cloned tree, the third verifies fresh `data-cotomy-instance` values and lifecycle hooks, and the last two cover stripping transit flags and rejecting invalidated nodes during cloning.
+普段は `npm test` で全体を実行できます。上記のコマンドでは `[scope]` 展開、スコープID共有のクローン挙動、インスタンス単位のイベント隔離、クローン後のスコープCSS再生成、移動フラグの除去、無効化要素のクローン拒否、DOM順序判定などをピンポイントで確認できます。
 
 ### CotomyMetaElement
 
@@ -233,9 +237,9 @@ The Form layer builds on `CotomyElement` for common form flows.
 - Data loading and field filling
   - `initialize()` — Adds default fillers and triggers `loadAsync()` on `CotomyWindow.ready`
   - `reloadAsync()` — Alias to `loadAsync()`
-  - `loadAsync(): Promise<CotomyApiResponse>` — Calls `CotomyApi.getAsync` when `canLoad()` is true
-  - `loadActionUrl(): string` — Defaults to `actionUrl`; override for custom endpoints
-  - `canLoad(): boolean` — Defaults to `hasEntityKey`
+  - `loadAsync(): Promise<CotomyApiResponse>` — Calls `CotomyApi.getAsync` when `canLoad` is true
+  - `loadActionUrl: string` — Defaults to `actionUrl`; override or set for custom endpoints
+  - `canLoad: boolean` — Defaults to `hasEntityKey`
 - Naming & binding
   - `bindNameGenerator(): ICotomyBindNameGenerator` — Defaults to `CotomyBracketBindNameGenerator` (`user[name]`)
   - `renderer(): CotomyViewRenderer` — Applies `[data-cotomy-bind]` to view elements
@@ -289,7 +293,7 @@ form.submitFailed(e => console.warn("Submit failed", e.response.status));
 Attach `data-cotomy-entity-key="<id>"` to the form when editing an existing entity; omit the attribute (or leave it empty) to issue a `POST` to the base `action` URL.  
 On `201 Created`, the form reads the `Location` header and stores the generated key back into `data-cotomy-entity-key`, enabling subsequent `PUT` submissions.  
 Composite or natural keys are no longer supported—migrate any legacy markup that relied on `data-cotomy-keyindex` or multiple key inputs to the new surrogate-key flow.
-When you must integrate with endpoints that still expect natural identifiers, subclass `CotomyEntityApiForm`/`CotomyEntityFillApiForm`, override `canLoad()` to supply your own load condition, and adjust `loadActionUrl()` (plus any submission hooks) to build the appropriate URL fragments.
+When you must integrate with endpoints that still expect natural identifiers, subclass `CotomyEntityApiForm`/`CotomyEntityFillApiForm`, override `canLoad` to supply your own load condition, and adjust `loadActionUrl` (plus any submission hooks) to build the appropriate URL fragments.
 
 The core of Cotomy is `CotomyElement`, which is constructed as a wrapper for `Element`.  
 By passing HTML and CSS strings to the constructor, it is possible to generate Element designs with a limited scope.

package/dist/browser/cotomy.js

@@ -811,11 +811,11 @@ class EventRegistry {
         return this._instance ?? (this._instance = new EventRegistry());
     }
     map(target) {
-        const scopeId = target.scopeId;
-        let registry = this._registry.get(scopeId);
+        const instanceId = target.instanceId;
+        let registry = this._registry.get(instanceId);
         if (!registry) {
             registry = new HandlerRegistory(target);
-            this._registry.set(scopeId, registry);
+            this._registry.set(instanceId, registry);
         }
         return registry;
     }
@@ -824,7 +824,7 @@ class EventRegistry {
         registry.add(event, entry);
     }
     off(event, target, entry) {
-        const registry = this._registry.get(target.scopeId);
+        const registry = this._registry.get(target.instanceId);
         if (!registry)
             return;
         if (entry) {
@@ -834,11 +834,11 @@ class EventRegistry {
             registry.remove(event);
         }
         if (registry.empty) {
-            this._registry.delete(target.scopeId);
+            this._registry.delete(target.instanceId);
         }
     }
     clear(target) {
-        this._registry.delete(target.scopeId);
+        this._registry.delete(target.instanceId);
     }
 }
 class CotomyScrollOptions {
@@ -856,7 +856,7 @@ class CotomyScrollOptions {
         if (init.inline !== undefined)
             this.inline = init.inline;
     }
-    resolveBehavior() {
+    get resolveBehavior() {
         return this.behavior;
     }
     static from(options) {
@@ -1004,6 +1004,7 @@ class CotomyElement {
     }
     useScopedCss(css) {
         if (css && this.stylable) {
+            this._scopedCss = css;
             const cssid = this.scopedCssElementId;
             CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
             const element = document.createElement("style");
@@ -1015,11 +1016,22 @@ class CotomyElement {
                 || new CotomyElement({ html: `<head></head>` }).prependTo(new CotomyElement(document.documentElement));
             head.append(new CotomyElement(element));
             this.removed(() => {
-                CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
+                const hasSameScope = document.querySelector(`[data-cotomy-scopeid="${this.scopeId}"]`) !== null;
+                if (!hasSameScope) {
+                    CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
+                }
             });
         }
         return this;
     }
+    ensureScopedCss() {
+        if (!this._scopedCss || !this.stylable)
+            return;
+        const cssid = this.scopedCssElementId;
+        if (!document.getElementById(cssid)) {
+            this.useScopedCss(this._scopedCss);
+        }
+    }
     listenLayoutEvents() {
         this.attribute(CotomyElement.LISTEN_LAYOUT_EVENTS_ATTRIBUTE, "");
         return this;
@@ -1038,7 +1050,7 @@ class CotomyElement {
     }
     clone(type) {
         const ctor = (type ?? CotomyElement);
-        const ATTRIBUTES_TO_STRIP = ["data-cotomy-instance", "data-cotomy-scopeid", "data-cotomy-moving"];
+        const ATTRIBUTES_TO_STRIP = ["data-cotomy-instance", "data-cotomy-moving"];
         const clonedElement = this.element.cloneNode(true);
         if (clonedElement.hasAttribute("data-cotomy-invalidated")) {
             throw new Error("Cannot clone an invalidated CotomyElement.");
@@ -1048,6 +1060,7 @@ class CotomyElement {
             clonedElement.querySelectorAll(`[${attr}]`).forEach(el => el.removeAttribute(attr));
         });
         const cloned = new ctor(clonedElement);
+        cloned._scopedCss = this._scopedCss;
         return cloned;
     }
     get tagname() {
@@ -1391,7 +1404,7 @@ class CotomyElement {
         if (!this.attached)
             return this;
         const resolved = CotomyScrollOptions.from(options);
-        const behavior = resolved.resolveBehavior();
+        const behavior = resolved.resolveBehavior;
         const onlyIfNeeded = resolved.onlyIfNeeded;
         const block = resolved.block;
         const inline = resolved.inline;
@@ -1605,12 +1618,14 @@ class CotomyElement {
         CotomyElement.runWithMoveEvents(prepend, () => {
             this.element.prepend(prepend.element);
         });
+        prepend.ensureScopedCss();
         return this;
     }
     append(target) {
         CotomyElement.runWithMoveEvents(target, () => {
             this.element.append(target.element);
         });
+        target.ensureScopedCss();
         return this;
     }
     appendAll(targets) {
@@ -1621,24 +1636,28 @@ class CotomyElement {
         CotomyElement.runWithMoveEvents(append, () => {
             this.element.before(append.element);
         });
+        append.ensureScopedCss();
         return this;
     }
     insertAfter(append) {
         CotomyElement.runWithMoveEvents(append, () => {
             this.element.after(append.element);
         });
+        append.ensureScopedCss();
         return this;
     }
     appendTo(target) {
         CotomyElement.runWithMoveEvents(this, () => {
             target.element.append(this.element);
         });
+        this.ensureScopedCss();
         return this;
     }
     prependTo(target) {
         CotomyElement.runWithMoveEvents(this, () => {
             target.element.prepend(this.element);
         });
+        this.ensureScopedCss();
         return this;
     }
     trigger(event, e) {
@@ -2990,7 +3009,7 @@ class CotomyEntityFillApiForm extends CotomyEntityApiForm {
     async reloadAsync() {
         await this.loadAsync();
     }
-    loadActionUrl() {
+    get loadActionUrl() {
         return this.actionUrl;
     }
     bindNameGenerator() {
@@ -2999,16 +3018,16 @@ class CotomyEntityFillApiForm extends CotomyEntityApiForm {
     renderer() {
         return new CotomyViewRenderer(this, this.bindNameGenerator());
     }
-    canLoad() {
+    get canLoad() {
         return this.hasEntityKey;
     }
     async loadAsync() {
-        if (!this.canLoad()) {
+        if (!this.canLoad) {
             return new CotomyApiResponse();
         }
         const api = this.apiClient();
         try {
-            const response = await api.getAsync(this.loadActionUrl());
+            const response = await api.getAsync(this.loadActionUrl);
             await this.fillAsync(response);
             return response;
         }
@@ -3178,11 +3197,11 @@ class CotomyPageController {
         }
         return form;
     }
-    forms() {
+    get forms() {
         return Object.values(this._forms);
     }
     async restoreAsync() {
-        for (const f of this.forms()) {
+        for (const f of this.forms) {
             if (CotomyWindow.instance.reloading) {
                 break;
             }