haori 0.22.3 → 0.23.0

package/dist/haori.es.js

@@ -1320,7 +1320,7 @@ const me = class me {
   }
 };
 me.ASYNC_QUEUE = new ge();
-let P = me;
+let k = me;
 const F = class F {
   /**
    * 集計状態を初期化します。
@@ -1595,7 +1595,7 @@ const X = class X {
       return Promise.resolve();
     if (this.parent) {
       const e = this.parent, t = e.skipMutationNodes;
-      return P.enqueue(() => {
+      return k.enqueue(() => {
         e.skipMutationNodes = !0, this.target.parentNode === e.getTarget() && e.getTarget().removeChild(this.target), this.mounted = !1;
       }).finally(() => {
         e.skipMutationNodes = t;
@@ -1603,7 +1603,7 @@ const X = class X {
     } else {
       const e = this.target.parentNode;
       if (e)
-        return P.enqueue(() => {
+        return k.enqueue(() => {
           this.target.parentNode === e && e.removeChild(this.target), this.mounted = !1;
         });
       this.mounted = !1;
@@ -1620,7 +1620,7 @@ const X = class X {
       return Promise.resolve();
     if (this.parent) {
       const e = this.parent, t = e.skipMutationNodes;
-      return P.enqueue(() => {
+      return k.enqueue(() => {
         e.skipMutationNodes = !0, this.target.parentNode !== e.getTarget() && e.getTarget().appendChild(this.target), this.mounted = !0;
       }).finally(() => {
         e.skipMutationNodes = t;
@@ -2092,14 +2092,25 @@ const K = class K extends T {
     if (r instanceof HTMLInputElement && (r.type === "checkbox" || r.type === "radio")) {
       const i = this.getAttribute("value"), n = r.type === "checkbox" && i === "true";
       let s;
-      return n ? s = e === !0 || e === "true" : i === "false" ? s = e === !1 : Array.isArray(e) ? s = e.map(String).includes(String(i)) : s = i === String(e), n ? this.value = s : s ? Array.isArray(e) ? this.value = String(i) : this.value = e : this.value = null, r.checked === s ? Promise.resolve() : (this.skipChangeValue = !0, P.enqueue(() => {
+      return n ? s = e === !0 || e === "true" : i === "false" ? s = e === !1 : Array.isArray(e) ? s = e.map(String).includes(String(i)) : s = i === String(e), n ? this.value = s : s ? Array.isArray(e) ? this.value = String(i) : this.value = e : this.value = null, r.checked === s ? Promise.resolve() : (this.skipChangeValue = !0, k.enqueue(() => {
         r.checked = s, t && r.dispatchEvent(new Event("change", { bubbles: !0 }));
       }).finally(() => {
         this.skipChangeValue = !1;
       }));
+    } else if (r instanceof HTMLSelectElement && r.multiple) {
+      const i = (Array.isArray(e) ? e : e === null ? [] : [e]).map(String);
+      return this.value = i.slice(), this.skipChangeValue = !0, k.enqueue(() => {
+        let n = !1;
+        Array.from(r.options).forEach((s) => {
+          const a = i.includes(s.value);
+          s.selected !== a && (s.selected = a, n = !0);
+        }), n && t && r.dispatchEvent(new Event("change", { bubbles: !0 }));
+      }).finally(() => {
+        this.skipChangeValue = !1;
+      });
     } else if (r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || r instanceof HTMLSelectElement) {
       const i = Array.isArray(e) ? e.join(",") : e;
-      return this.value = this.normalizeValueForElement(r, i), this.skipChangeValue = !0, P.enqueue(() => {
+      return this.value = this.normalizeValueForElement(r, i), this.skipChangeValue = !0, k.enqueue(() => {
         r.value = i === null ? "" : String(i), t && ((r instanceof HTMLInputElement && this.INPUT_EVENT_TYPES.includes(r.type) || r instanceof HTMLTextAreaElement) && r.dispatchEvent(new Event("input", { bubbles: !0 })), r.dispatchEvent(new Event("change", { bubbles: !0 })));
       }).finally(() => {
         this.skipChangeValue = !1;
@@ -2164,7 +2175,9 @@ const K = class K extends T {
         }
       } else
         this.value = this.normalizeValueForElement(e, e.value);
-    else e instanceof HTMLTextAreaElement ? this.value = e.value : e instanceof HTMLSelectElement && (this.value = e.value);
+    else e instanceof HTMLTextAreaElement ? this.value = e.value : e instanceof HTMLSelectElement && (e.multiple ? this.value = Array.from(e.selectedOptions).map(
+      (t) => t.value
+    ) : this.value = e.value);
   }
   /**
    * 属性の値を評価して設定します。
@@ -2207,7 +2220,7 @@ const K = class K extends T {
       return Promise.resolve();
     this.attributeMap.delete(e), this.skipMutationAttributes = !0;
     const r = this.getTarget();
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       r.removeAttribute(e), t !== e && r.removeAttribute(t);
     }).finally(() => {
       this.skipMutationAttributes = !1;
@@ -2231,7 +2244,7 @@ const K = class K extends T {
     if (n) {
       const ce = this.attributeMap.get(e);
       if (ce && (ce.isEvaluate || ce.isForceEvaluation()) && !s.isEvaluate && !s.isForceEvaluation())
-        return this.skipMutationAttributes = !0, P.enqueue(() => {
+        return this.skipMutationAttributes = !0, k.enqueue(() => {
         }).finally(() => {
           this.skipMutationAttributes = !1;
         });
@@ -2242,9 +2255,9 @@ const K = class K extends T {
       element: a,
       rawName: e,
       template: r
-    }), l = s.isEvaluate || s.isRawEvaluate, h = e === t && K.BOOLEAN_ATTRIBUTES.has(t.toLowerCase()), u = s.isSingleExpression(), p = G.joinEvaluateResults(o.results), v = o.results.length === 1 ? o.results[0] : p, R = !s.isForceEvaluation() && (t !== e || h || u ? o.hasUnresolvedReference || v === null || v === void 0 || v === !1 : l && p === ""), I = s.isForceEvaluation() ? r : u ? v : p, A = i && s.isEvaluate && t === "value" && (a instanceof HTMLInputElement && this.INPUT_EVENT_TYPES.includes(a.type) || a instanceof HTMLTextAreaElement || a instanceof HTMLSelectElement), y = a.getRootNode(), b = A && a === y.activeElement, S = R || I === null || I === !1 ? null : String(I), k = e !== t && a.getAttribute(e) !== r, C = S === null ? a.hasAttribute(t) : a.getAttribute(t) !== S, O = A && !b && S !== null && a.value !== S, j = t === "checked" && a instanceof HTMLInputElement && (a.type === "checkbox" || a.type === "radio"), $ = t === "selected" && a instanceof HTMLOptionElement, ee = y.activeElement, be = ee !== null && (j && a === ee || $ && a.closest("select") === ee), te = S !== null, ve = j && !be && a.checked !== te, ye = $ && !be && a.selected !== te;
-    return !k && !C && !O && !ve && !ye ? (A && !b && S !== null && (this.value = this.normalizeValueForElement(a, S)), Promise.resolve()) : (this.skipMutationAttributes = !0, P.enqueue(() => {
-      k && a.setAttribute(e, r), S === null ? a.removeAttribute(t) : (C && (a.setAttribute(t, S), t === `${c.prefix}bind` && this.recordSelfWrittenBind(S)), A && !b && (this.value = this.normalizeValueForElement(a, S), O && (a.value = S))), ve && (a.checked = te), ye && (a.selected = te);
+    }), l = s.isEvaluate || s.isRawEvaluate, h = e === t && K.BOOLEAN_ATTRIBUTES.has(t.toLowerCase()), u = s.isSingleExpression(), p = G.joinEvaluateResults(o.results), v = o.results.length === 1 ? o.results[0] : p, R = !s.isForceEvaluation() && (t !== e || h || u ? o.hasUnresolvedReference || v === null || v === void 0 || v === !1 : l && p === ""), I = s.isForceEvaluation() ? r : u ? v : p, A = i && s.isEvaluate && t === "value" && (a instanceof HTMLInputElement && this.INPUT_EVENT_TYPES.includes(a.type) || a instanceof HTMLTextAreaElement || a instanceof HTMLSelectElement), y = a.getRootNode(), b = A && a === y.activeElement, S = R || I === null || I === !1 ? null : String(I), P = e !== t && a.getAttribute(e) !== r, C = S === null ? a.hasAttribute(t) : a.getAttribute(t) !== S, O = A && !b && S !== null && a.value !== S, j = t === "checked" && a instanceof HTMLInputElement && (a.type === "checkbox" || a.type === "radio"), $ = t === "selected" && a instanceof HTMLOptionElement, ee = y.activeElement, be = ee !== null && (j && a === ee || $ && a.closest("select") === ee), te = S !== null, ve = j && !be && a.checked !== te, ye = $ && !be && a.selected !== te;
+    return !P && !C && !O && !ve && !ye ? (A && !b && S !== null && (this.value = this.normalizeValueForElement(a, S)), Promise.resolve()) : (this.skipMutationAttributes = !0, k.enqueue(() => {
+      P && a.setAttribute(e, r), S === null ? a.removeAttribute(t) : (C && (a.setAttribute(t, S), t === `${c.prefix}bind` && this.recordSelfWrittenBind(S)), A && !b && (this.value = this.normalizeValueForElement(a, S), O && (a.value = S))), ve && (a.checked = te), ye && (a.selected = te);
     }).finally(() => {
       this.skipMutationAttributes = !1;
     }));
@@ -2260,7 +2273,7 @@ const K = class K extends T {
       return Promise.resolve();
     this.attributeMap.delete(e), this.skipMutationAttributes = !0;
     const t = this.getTarget();
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       t.removeAttribute(e);
     }).finally(() => {
       this.skipMutationAttributes = !1;
@@ -2395,7 +2408,7 @@ const K = class K extends T {
     }
     e.setParent(this), e.setMounted(this.mounted);
     const u = this.skipMutationNodes;
-    return this.skipMutationNodes = !0, P.enqueue(() => {
+    return this.skipMutationNodes = !0, k.enqueue(() => {
       this.target.insertBefore(e.getTarget(), h);
     }).finally(() => {
       this.skipMutationNodes = u;
@@ -2582,7 +2595,7 @@ class V extends T {
   evaluate() {
     return this.contents.isRawEvaluate && this.parent === null ? Promise.reject(
       new Error("Parent fragment is required for raw evaluation")
-    ) : P.enqueue(() => {
+    ) : k.enqueue(() => {
       this.skipMutation = !0;
       let e = this.text;
       this.contents.isRawEvaluate ? e = this.contents.evaluate(
@@ -2642,7 +2655,7 @@ class pe extends T {
    * @return 更新のPromise
    */
   setContent(e) {
-    return this.skipMutation || this.text === e ? Promise.resolve() : (this.text = e, P.enqueue(() => {
+    return this.skipMutation || this.text === e ? Promise.resolve() : (this.text = e, k.enqueue(() => {
       this.skipMutation = !0, this.target.textContent = this.text;
     }).finally(() => {
       this.skipMutation = !1;
@@ -2876,7 +2889,7 @@ class Q {
    * @return すべてのレンダリングが完了したら解決される Promise
    */
   static waitForRenders() {
-    return P.waitForIdle();
+    return k.waitForIdle();
   }
   /**
    * 通知ダイアログを表示します。
@@ -2885,7 +2898,7 @@ class Q {
    * @returns 通知が閉じられると解決されるPromise
    */
   static dialog(e) {
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       window.alert(e);
     }, !0);
   }
@@ -2913,7 +2926,7 @@ class Q {
    * @returns ユーザーがOKをクリックした場合はtrue、キャンセルした場合はfalseが解決されるPromise
    */
   static confirm(e) {
-    return P.enqueue(() => window.confirm(e), !0);
+    return k.enqueue(() => window.confirm(e), !0);
   }
   /**
    * ダイアログを開きます。
@@ -2921,7 +2934,7 @@ class Q {
    * @param element 開くダイアログのHTML要素
    */
   static openDialog(e) {
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       e instanceof HTMLDialogElement ? (Q.clearMessagesSync(e), e.showModal()) : m.error("[Haori]", "Element is not a dialog: ", e);
     }, !0);
   }
@@ -2931,7 +2944,7 @@ class Q {
    * @param element 閉じるダイアログのHTML要素
    */
   static closeDialog(e) {
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       e instanceof HTMLDialogElement ? e.close() : m.error("[Haori]", "Element is not a dialog: ", e);
     }, !0);
   }
@@ -2952,7 +2965,7 @@ class Q {
    * @param level メッセージのレベル（省略可能）
    */
   static addMessage(e, t, r) {
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       const i = e instanceof HTMLFormElement ? e : e.parentElement ?? e;
       i.setAttribute("data-message", t), r !== void 0 ? i.setAttribute("data-message-level", r) : i.removeAttribute("data-message-level");
     }, !0);
@@ -2963,7 +2976,7 @@ class Q {
    * @param parent メッセージをクリアする親要素
    */
   static clearMessages(e) {
-    return P.enqueue(() => {
+    return k.enqueue(() => {
       Q.clearMessagesSync(e);
     }, !0);
   }
@@ -3220,6 +3233,16 @@ class E {
     const t = e.getTarget();
     return t instanceof HTMLInputElement ? t.type === "radio" ? !0 : t.type !== "checkbox" ? !1 : t.value !== "true" && t.value !== "false" : !1;
   }
+  /**
+   * 複数選択の select 要素かどうかを判定します。
+   *
+   * @param fragment 対象フラグメント
+   * @returns `<select multiple>` の場合 true
+   */
+  static isMultipleSelect(e) {
+    const t = e.getTarget();
+    return t instanceof HTMLSelectElement && t.multiple;
+  }
   /**
    * 単一フラグメントへ値を設定します。
    *
@@ -3247,7 +3270,7 @@ class E {
         const u = t[String(a)];
         l && Array.isArray(u) && r !== null ? s.push(
           E.applyFragmentValue(e, u[r] ?? null, n)
-        ) : typeof u > "u" || (Array.isArray(u) && E.isGroupedCheckable(e) || typeof u == "string" || typeof u == "number" || typeof u == "boolean" || u === null ? s.push(
+        ) : typeof u > "u" || (Array.isArray(u) && E.isGroupedCheckable(e) || Array.isArray(u) && E.isMultipleSelect(e) || typeof u == "string" || typeof u == "number" || typeof u == "boolean" || u === null ? s.push(
           E.applyFragmentValue(
             e,
             u,
@@ -3306,7 +3329,7 @@ class E {
     E.clearValues(e), await Promise.all([
       E.clearMessages(e),
       E.clearEachClones(e)
-    ]), await P.enqueue(() => {
+    ]), await k.enqueue(() => {
       const r = e.getTarget();
       if (r instanceof HTMLFormElement)
         r.reset();
@@ -3541,14 +3564,6 @@ class N {
   static ready(e) {
     N.dispatch(document, "ready", { version: e });
   }
-  /**
-   * renderイベントを発火します。
-   *
-   * @param target 評価対象要素
-   */
-  static render(e) {
-    N.dispatch(e, "render", { target: e });
-  }
   /**
    * importstartイベントを発火します。
    *
@@ -4281,8 +4296,8 @@ ${y}
         );
         if (b) {
           const S = document.body.querySelectorAll(b);
-          S.length > 0 ? (r.adjustFragments = [], S.forEach((k) => {
-            const C = T.get(k);
+          S.length > 0 ? (r.adjustFragments = [], S.forEach((P) => {
+            const C = T.get(P);
             C && r.adjustFragments.push(C);
           })) : m.error(
             "Haori",
@@ -4292,8 +4307,8 @@ ${y}
         if (e.hasAttribute(g.attrName(t, "adjust-value"))) {
           const S = e.getRawAttribute(
             g.attrName(t, "adjust-value")
-          ), k = Number(S);
-          isNaN(k) || (r.adjustValue = k);
+          ), P = Number(S);
+          isNaN(P) || (r.adjustValue = P);
         }
       }
       if (e.hasAttribute(g.attrName(t, "row-add")) && (r.rowAdd = !0), e.hasAttribute(g.attrName(t, "row-remove")) && (r.rowRemove = !0), e.hasAttribute(g.attrName(t, "row-prev")) && (r.rowMovePrev = !0), e.hasAttribute(g.attrName(t, "row-next")) && (r.rowMoveNext = !0), e.hasAttribute(`${c.prefix}${t}-after-run`)) {
@@ -4319,8 +4334,8 @@ ${b}
         );
         const b = e.getRawAttribute(
           g.attrName(t, "toast-level")
-        ), k = ["info", "warning", "error", "success"].includes(b);
-        r.toastLevel = k ? b : null;
+        ), P = ["info", "warning", "error", "success"].includes(b);
+        r.toastLevel = P ? b : null;
       }
       if (e.hasAttribute(g.attrName(t, "redirect"))) {
         r.redirectUrl = e.getAttribute(
@@ -4365,12 +4380,12 @@ ${b}
         const S = g.attrName(t, b);
         if (!e.hasAttribute(S))
           return;
-        const k = e.getRawAttribute(S), C = [];
-        if (k)
-          document.body.querySelectorAll(k).forEach((j) => {
+        const P = e.getRawAttribute(S), C = [];
+        if (P)
+          document.body.querySelectorAll(P).forEach((j) => {
             const $ = T.get(j);
             $ && C.push($);
-          }), C.length === 0 && m.error("Haori", `Element not found: ${k} (${S})`);
+          }), C.length === 0 && m.error("Haori", `Element not found: ${P} (${S})`);
         else if (b === "open" || b === "close") {
           const O = e.getTarget().closest("dialog");
           O ? C.push(T.get(O)) : m.error("Haori", `Ancestor <dialog> not found (${S})`);
@@ -4409,8 +4424,8 @@ ${b}
         if (b) {
           const S = document.body.querySelector(b);
           if (S !== null) {
-            const k = T.get(S);
-            k ? r.copySourceFragment = k : m.error(
+            const P = T.get(S);
+            P ? r.copySourceFragment = P : m.error(
               "Haori",
               `Element is not managed by Haori: ${b} (${y})`
             );
@@ -5407,7 +5422,7 @@ const d = class d {
     const s = performance.now();
     return t.setAttribute(`${c.prefix}importing`, ""), N.importStart(t, n), nt.load(n).then((a) => {
       const o = new TextEncoder().encode(a).length;
-      return P.enqueue(() => {
+      return k.enqueue(() => {
         t.innerHTML = a;
       }).then(() => {
         if (t.removeAttribute(`${c.prefix}importing`), N.importEnd(t, n, o, s), !document.body.hasAttribute("data-haori-ready")) {
@@ -6046,13 +6061,52 @@ const d = class d {
         do
           t.rerunRequested = !1, await d.performEachUpdate(e);
         while (t.rerunRequested);
-        e.getTarget().setAttribute(`${c.prefix}each-done`, "");
+        const i = e.getTarget();
+        i.setAttribute(`${c.prefix}each-done`, ""), d.runEachRenderedScript(i);
       } finally {
         t.running = !1, t.settled = null;
       }
     })();
     return t.settled = r, r;
   }
+  /**
+   * data-each-rendered-run 属性に指定された JS を、描画確定後に一度実行します。
+   *
+   * data-each の再描画が安定し `data-each-done` が付与されるたびに呼び出され、
+   * 再 fetch・再バインドのたびに確実な再同期契機を提供します。本体内の `this`
+   * は対象コンテナ要素に束縛され、外部の select 拡張ライブラリ（Choices.js 等）
+   * の再同期フック（例: `window.__choicesRefresh(this)`）として利用できます。
+   *
+   * @param target data-each コンテナ要素
+   */
+  static runEachRenderedScript(e) {
+    const t = `${c.prefix}each-rendered-run`;
+    if (!e.hasAttribute(t))
+      return;
+    const r = String(e.getAttribute(t) ?? "");
+    let i = null;
+    try {
+      i = new Function(
+        `"use strict"; return (
+${r}
+);`
+      );
+    } catch {
+      try {
+        i = new Function(`"use strict";
+${r}
+`);
+      } catch (n) {
+        m.error("Haori", `Invalid each-rendered-run script: ${n}`);
+      }
+    }
+    if (i)
+      try {
+        i.call(e);
+      } catch (n) {
+        m.error("Haori", `each-rendered-run execution error: ${n}`);
+      }
+  }
   /**
    * data-each の差分更新本体を実行します（再入制御は呼び出し側で行います）。
    *
@@ -6337,12 +6391,12 @@ const d = class d {
     i && (i = String(i));
     const n = e.getAttribute(`${c.prefix}each-key`), s = e.getAttribute(`${c.prefix}each-arg`), a = /* @__PURE__ */ new Map(), o = [];
     t.forEach((b, S) => {
-      const k = d.createListKey(
+      const P = d.createListKey(
         b,
         n ? String(n) : null,
         S
       );
-      o.push(k), a.set(k, { item: b, itemIndex: S });
+      o.push(P), a.set(P, { item: b, itemIndex: S });
     });
     const l = new Set(o), h = [];
     let u = e.getChildren().filter((b) => b instanceof M).filter(
@@ -6360,14 +6414,14 @@ const d = class d {
     ).length;
     let y = Promise.resolve();
     return o.forEach((b, S) => {
-      const { item: k, itemIndex: C } = a.get(b);
+      const { item: P, itemIndex: C } = a.get(b);
       let O;
       const j = R.get(b);
       if (j)
         O = j, y = y.then(
           () => d.updateRowFragment(
             O,
-            k,
+            P,
             i,
             C,
             s ? String(s) : null,
@@ -6383,7 +6437,7 @@ const d = class d {
         y = y.then(
           () => d.updateRowFragment(
             O,
-            k,
+            P,
             i,
             C,
             s ? String(s) : null,
@@ -6401,7 +6455,7 @@ const d = class d {
         ($) => $ !== null
       ), S = v.filter(
         ($) => $ !== null
-      ), k = new Set(S), C = b.filter(($) => !k.has($)), j = p.filter(
+      ), P = new Set(S), C = b.filter(($) => !P.has($)), j = p.filter(
         ($) => $ !== null
       ).filter(
         ($) => !l.has($)
@@ -7194,7 +7248,23 @@ const H = class H {
       x.scan(document.head),
       x.scan(document.body)
     ]), [t, r] = e;
-    t.status !== "fulfilled" && m.error("[Haori]", "Failed to build head fragment:", t.reason), r.status !== "fulfilled" && m.error("[Haori]", "Failed to build body fragment:", r.reason), await P.wait(), document.body.setAttribute("data-haori-ready", ""), H.observe(document.head), H.observe(document.body), new fe().start(), Z.syncTree(document.body), Y.syncTree(document.body);
+    t.status !== "fulfilled" && m.error("[Haori]", "Failed to build head fragment:", t.reason), r.status !== "fulfilled" && m.error("[Haori]", "Failed to build body fragment:", r.reason), await k.wait(), document.body.setAttribute("data-haori-ready", ""), H.observe(document.head), H.observe(document.body), new fe().start(), Z.syncTree(document.body), Y.syncTree(document.body);
+  }
+  /**
+   * 指定ノードが「外部管理」サブツリーに属するかどうかを判定します。
+   *
+   * `data-external` 属性を持つ要素とその子孫で発生した DOM 変更は、外部の
+   * select 拡張ライブラリ（Choices.js など）が生成・更新する DOM とみなし、
+   * Haori の監視・自動更新の対象から除外します。これにより、外部生成 DOM が
+   * Haori に破壊・干渉されることを防ぎます。`data-each` による `<option>` の
+   * 配列バインドは Haori のバインド評価パイプラインが駆動するため、監視除外
+   * 下でも維持されます。
+   *
+   * @param node 判定対象のノード（要素・テキスト・コメントいずれも可）
+   * @returns 外部管理サブツリーに属する場合 true
+   */
+  static isExternallyManaged(e) {
+    return (e instanceof Element ? e : e?.parentElement ?? null)?.closest(`[${c.prefix}external]`) != null;
   }
   /**
    * 指定された要素を監視します。
@@ -7205,6 +7275,8 @@ const H = class H {
     const t = new MutationObserver(async (r) => {
       for (const i of r)
         try {
+          if (H.isExternallyManaged(i.target))
+            continue;
           switch (i.type) {
             case "attributes": {
               const n = i.target;
@@ -7266,7 +7338,7 @@ export {
   T as Fragment,
   Q as Haori,
   m as Log,
-  P as Queue,
+  k as Queue,
   Q as default,
   ot as version,
   at as waitForRenders