cotomy 0.3.17 → 0.4.1

package/README.md

@@ -37,7 +37,9 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `new CotomyElement({ tagname, text?, css? })`
 - 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="..."]`
+  - `[root]` placeholder in provided CSS is replaced by `[data-cotomy-scopeid="..."]`
+  - `[scope]` is deprecated and will be removed in a future release (use `[root]` instead)
+  - If neither `[root]` nor `[scope]` is present, `[root]` is treated as if it were prefixed automatically
   - 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
@@ -119,8 +121,8 @@ import { CotomyElement } from "cotomy";
 const panel = new CotomyElement({
   html: `<div class="panel"><button class="ok">OK</button></div>`,
   css: `
-    [scope] .panel { padding: 8px; }
-    [scope] .ok { color: green; }
+    [root] .panel { padding: 8px; }
+    [root] .ok { color: green; }
   `,
 });
 
@@ -143,7 +145,7 @@ npm test -- --run tests/view.spec.ts -t "throws when cloning an invalidated elem
 npm test -- --run tests/view.spec.ts -t "compares document order with comesBefore/comesAfter"
 ```
 
-普段は `npm test` で全体を実行できます。上記のコマンドでは `[scope]` 展開、スコープID共有のクローン挙動、インスタンス単位のイベント隔離、クローン後のスコープCSS再生成、移動フラグの除去、無効化要素のクローン拒否、DOM順序判定などをピンポイントで確認できます。
+普段は `npm test` で全体を実行できます。上記のコマンドでは `[root]/[scope]` 展開、スコープID共有のクローン挙動、インスタンス単位のイベント隔離、クローン後のスコープCSS再生成、移動フラグの除去、無効化要素のクローン拒否、DOM順序判定などをピンポイントで確認できます。
 
 ### CotomyMetaElement
 
@@ -237,9 +239,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
@@ -293,7 +295,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.
@@ -306,10 +308,10 @@ By passing HTML and CSS strings to the constructor, it is possible to generate E
               </div>
             `,
         css: /* css */`
-            [scope] {
+            [root] {
               display: block;
             }
-            [scope] > p {
+            [root] > p {
               text-align: center;
             }
           `

package/dist/browser/cotomy.js

@@ -856,7 +856,7 @@ class CotomyScrollOptions {
         if (init.inline !== undefined)
             this.inline = init.inline;
     }
-    resolveBehavior() {
+    get resolveBehavior() {
         return this.behavior;
     }
     static from(options) {
@@ -1008,7 +1008,9 @@ class CotomyElement {
             const cssid = this.scopedCssElementId;
             CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
             const element = document.createElement("style");
-            const writeCss = css.replace(/\[scope\]/g, `[data-cotomy-scopeid="${this.scopeId}"]`);
+            const hasScopeOrRoot = /\[(?:scope|root)\]/.test(css);
+            const normalizedCss = hasScopeOrRoot ? css : `[root] ${css}`;
+            const writeCss = normalizedCss.replace(/\[(?:scope|root)\]/g, `[data-cotomy-scopeid="${this.scopeId}"]`);
             const node = document.createTextNode(writeCss);
             element.appendChild(node);
             element.id = cssid;
@@ -1404,7 +1406,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;
@@ -3009,7 +3011,7 @@ class CotomyEntityFillApiForm extends CotomyEntityApiForm {
     async reloadAsync() {
         await this.loadAsync();
     }
-    loadActionUrl() {
+    get loadActionUrl() {
         return this.actionUrl;
     }
     bindNameGenerator() {
@@ -3018,16 +3020,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;
         }
@@ -3197,11 +3199,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;
             }