cotomy 0.3.4 → 0.3.6

package/README.md

@@ -36,10 +36,9 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `new CotomyElement({ html, css? })` — Creates from HTML and injects scoped CSS
   - `new CotomyElement({ tagname, text?, css? })`
 - Scoped CSS
-  - `scopeId: string` — Unique attribute injected into the element for scoping
-  - `scopedSelector: string` — Selector string like `[__cotomy_scope__...]`
-  - `[scope]` placeholder in provided CSS is replaced by the element’s scope
-  - `stylable: boolean` — False for tags like `script`, `style`, `link`, `meta`
+  - `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="..."]`
+  - `stylable: boolean` - False for tags like `script`, `style`, `link`, `meta`
 - Static helpers
   - `CotomyElement.encodeHtml(text)`
   - `CotomyElement.first(selector, type?)`
@@ -76,7 +75,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `append(child): this` / `prepend(child): this` / `appendAll(children): this`
   - `insertBefore(sibling): this` / `insertAfter(sibling): this`
   - `appendTo(target): this` / `prependTo(target): this`
-  - `clone(type?): CotomyElement` — Returns a deep-cloned element, optionally typed
+  - `clone(type?): CotomyElement` - Returns a deep-cloned element, optionally typed, and reassigns new `data-cotomy-scopeid` values to the clone and all descendants so scoped CSS and event registries stay isolated
   - `clear(): this` — Removes all descendants and text
   - `remove(): void`
 - Geometry & visibility
@@ -121,6 +120,17 @@ panel.onSubTree("click", ".ok", () => console.log("clicked!"));
 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:
+
+```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"
+```
+
+The first command ensures `[scope]` expands to `[data-cotomy-scopeid="..."]` in injected styles, while the second confirms that cloning reassigns new `data-cotomy-scopeid` attributes to the cloned tree.
+
 ### CotomyMetaElement
 
 - `CotomyMetaElement.get(name): CotomyMetaElement`
@@ -220,6 +230,28 @@ The Form layer builds on `CotomyElement` for common form flows.
 - `filler(type, (input, value))` — Register fillers; defaults provided for `datetime-local`, `checkbox`, `radio`
   - Fills non-array, non-object fields by matching input/select/textarea `name`
 
+#### View binding renderers
+
+`CotomyViewRenderer` includes a few built-in helpers for `[data-cotomy-bindtype]`:
+
+- `mail`, `tel`, `url` — Wrap the value in a corresponding anchor tag.
+- `number` — Uses `Intl.NumberFormat` with `data-cotomy-locale`/`data-cotomy-currency` inheritance.
+- `utc` — Treats the value as UTC (or appends `Z` when missing) and formats with `data-cotomy-format` (default `YYYY/MM/DD HH:mm`).
+- `date` — Renders local dates with `data-cotomy-format` (default `YYYY/MM/DD`) when the input is a valid `Date` value.
+
+Example:
+
+```ts
+const view = new CotomyViewRenderer(
+  new CotomyElement(document.querySelector("#profile")!),
+  new CotomyBracketBindNameGenerator()
+);
+
+await view.applyAsync(apiResponse); // apiResponse is CotomyApiResponse from CotomyApi
+// <span data-cotomy-bind="user.birthday" data-cotomy-bindtype="date" data-cotomy-format="MMM D, YYYY"></span>
+// → renders localized date text if the API payload contains user.birthday
+```
+
 #### Array binding
 
 - Both `CotomyViewRenderer.applyAsync` and `CotomyEntityFillApiForm.fillAsync` resolve array elements by index via the active `ICotomyBindNameGenerator` (dot style → `items[0].name`, bracket style → `items[0][name]`).

package/dist/browser/cotomy.js

@@ -916,7 +916,6 @@ class CotomyElement {
     }
     constructor(element) {
         this._parentElement = null;
-        this._scopeId = null;
         if (element instanceof HTMLElement) {
             this._element = element;
         }
@@ -944,7 +943,7 @@ class CotomyElement {
             }
         }
         if (!this.instanceId) {
-            this.attribute("data-cotomy-instance", `__cotomy_instance_${cuid_default()()}`);
+            this.attribute("data-cotomy-instance", cuid_default()());
             this.removed(() => {
                 this._element = CotomyElement.createHTMLElement(`<div data-cotomy-invalidated style="display: none;"></div>`);
                 EventRegistry.instance.clear(this);
@@ -963,14 +962,10 @@ class CotomyElement {
         return this.attribute("data-cotomy-instance");
     }
     get scopeId() {
-        if (!this._scopeId) {
-            this._scopeId = `__cotomy_scope__${cuid_default()()}`;
-            this.attribute(this._scopeId, "");
+        if (!this.hasAttribute("data-cotomy-scopeid")) {
+            this.attribute("data-cotomy-scopeid", cuid_default()());
         }
-        return this._scopeId;
-    }
-    get scopedSelector() {
-        return `[${this.scopeId}]`;
+        return this.attribute("data-cotomy-scopeid");
     }
     get stylable() {
         return !["script", "style", "link", "meta"].includes(this.tagname);
@@ -983,7 +978,7 @@ class CotomyElement {
             const cssid = this.scopedCssElementId;
             CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
             const element = document.createElement("style");
-            const writeCss = css.replace(/\[scope\]/g, `[${this.scopeId}]`);
+            const writeCss = css.replace(/\[scope\]/g, `[data-cotomy-scopeid="${this.scopeId}"]`);
             const node = document.createTextNode(writeCss);
             element.appendChild(node);
             element.id = cssid;
@@ -1014,7 +1009,10 @@ class CotomyElement {
     }
     clone(type) {
         const ctor = (type ?? CotomyElement);
-        return new ctor(this.element.cloneNode(true));
+        const cloned = new ctor(this.element.cloneNode(true));
+        cloned.attribute("data-cotomy-scopeid", null);
+        cloned.find("[data-cotomy-scopeid]").forEach(e => e.attribute("data-cotomy-scopeid", null));
+        return cloned;
     }
     get tagname() {
         return this.element.tagName.toLowerCase();
@@ -2220,6 +2218,10 @@ class CotomyViewRenderer {
         this._renderers[type] = callback;
         return this;
     }
+    get renderers() {
+        this.initialize();
+        return this._renderers;
+    }
     get initialized() {
         return this._builded;
     }
@@ -2259,6 +2261,15 @@ class CotomyViewRenderer {
                     }
                 }
             });
+            this.renderer("date", (element, value) => {
+                if (value) {
+                    const date = new Date(value);
+                    if (!isNaN(date.getTime())) {
+                        const format = element.attribute("data-cotomy-format") ?? "YYYY/MM/DD";
+                        element.text = dayjs_min_default()(date).format(format);
+                    }
+                }
+            });
             this._builded = true;
         }
         return this;
@@ -2269,8 +2280,8 @@ class CotomyViewRenderer {
                 console.debug(`Binding data to element [data-cotomy-bind="${propertyName}"]:`, value);
             }
             const type = element.attribute("data-cotomy-bindtype")?.toLowerCase();
-            if (type && this._renderers[type]) {
-                this._renderers[type](element, value);
+            if (type && this.renderers[type]) {
+                this.renderers[type](element, value);
             }
             else {
                 element.text = String(value ?? "");
@@ -2310,9 +2321,6 @@ class CotomyViewRenderer {
         }
     }
     async applyAsync(respose) {
-        if (!this.initialized) {
-            this.initialize();
-        }
         if (!respose.available) {
             throw new Error("Response is not available.");
         }