cotomy 0.4.0 → 0.4.2

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
@@ -74,8 +76,8 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `lastChild(selector = "*", type?)`
   - `closest(selector, type?)`
   - `find(selector, type?)` / `first(selector = "*", type?)` / `last(selector = "*", type?)` / `contains(selector)`
-  - `append(child): this` / `prepend(child): this` / `appendAll(children): this`
-  - `insertBefore(sibling): this` / `insertAfter(sibling): this`
+  - `append(child): this` / `prepend(child): this` / `appendAll(children): this` — accepts `CotomyElement`, HTML string, or `{ html, css? }`
+  - `insertBefore(sibling): this` / `insertAfter(sibling): this` — accepts `CotomyElement`, HTML string, or `{ html, css? }`
   - `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 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.
@@ -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
 
@@ -158,7 +160,7 @@ npm test -- --run tests/view.spec.ts -t "compares document order with comesBefor
   - `initialize(): this`
 - DOM helpers
   - `body: CotomyElement`
-  - `append(element: CotomyElement): this`
+  - `append(element: CotomyElement | string | { html: string, css?: string }): this`
   - `scrollTo(target, options?: CotomyScrollOptions | Partial<CotomyScrollOptions>): this` — Scrolls to reveal a target (`selector | CotomyElement | HTMLElement`)
   - `moveNext(focused: CotomyElement, shift = false)` — Move focus to next/previous focusable
 - Window events
@@ -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

@@ -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;
@@ -1614,18 +1616,23 @@ class CotomyElement {
             target.trigger("cotomy:transitend");
         }
     }
+    static toElement(target) {
+        return target instanceof CotomyElement ? target : new CotomyElement(target);
+    }
     prepend(prepend) {
-        CotomyElement.runWithMoveEvents(prepend, () => {
-            this.element.prepend(prepend.element);
+        const e = CotomyElement.toElement(prepend);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.prepend(e.element);
         });
-        prepend.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     append(target) {
-        CotomyElement.runWithMoveEvents(target, () => {
-            this.element.append(target.element);
+        const e = CotomyElement.toElement(target);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.append(e.element);
         });
-        target.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     appendAll(targets) {
@@ -1633,17 +1640,19 @@ class CotomyElement {
         return this;
     }
     insertBefore(append) {
-        CotomyElement.runWithMoveEvents(append, () => {
-            this.element.before(append.element);
+        const e = CotomyElement.toElement(append);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.before(e.element);
         });
-        append.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     insertAfter(append) {
-        CotomyElement.runWithMoveEvents(append, () => {
-            this.element.after(append.element);
+        const e = CotomyElement.toElement(append);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.after(e.element);
         });
-        append.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     appendTo(target) {