@jxsuite/studio 0.23.1 → 0.24.0

package/src/panels/{left-panel.js → left-panel.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Left panel — orchestrator that delegates to per-tab render functions.
  *
@@ -7,50 +8,46 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { leftPanel, updateSession } from "../store.js";
-import { effect, effectScope } from "../reactivity.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { transact, mutateUpdateFrontmatter } from "../tabs/transact.js";
+import type { TemplateResult } from "lit-html";
+import { leftPanel, updateSession } from "../store";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
+import { transact, mutateUpdateFrontmatter } from "../tabs/transact";
+import type { GitDiffState, JsonValue } from "../types";
 
-import { renderLayersTemplate } from "./layers-panel.js";
-import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
-import { renderElementsTemplate } from "./elements-panel.js";
-import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
+import { renderLayersTemplate } from "./layers-panel";
+import { renderStylebookLayersTemplate } from "./stylebook-layers-panel";
+import { renderElementsTemplate } from "./elements-panel";
+import { selectStylebookTag, stylebookMeta } from "./stylebook-panel";
 
-/** @typedef {import("lit-html").TemplateResult} TemplateResult */
-
-/**
- * @typedef {{
- *   getCanvasMode: () => string;
- *   setCanvasMode: (mode: string) => void;
- *   renderImportsTemplate: Function;
- *   renderFilesTemplate: Function;
- *   renderSignalsTemplate: Function;
- *   renderDataExplorerTemplate: Function;
- *   renderHeadTemplate: Function;
- *   renderGitPanel: Function;
- *   renderCanvas: () => void;
- *   defCategory: (def: unknown) => string;
- *   defBadgeLabel: (def: unknown) => string;
- *   navigateToComponent: (path: string) => void;
- *   webdata: object;
- *   defaultDef: (tag: string) => object;
- *   registerLayersDnD: () => void;
- *   registerElementsDnD: () => void;
- *   registerComponentsDnD: () => void;
- *   setupTreeKeyboard: (tree: HTMLElement) => void;
- *   registerFileTreeDnD: (ctx: { renderLeftPanel: () => void }) => void;
- *   setGitDiffState: (state: import("../canvas/canvas-render.js").GitDiffState | null) => void;
- *   cloneRepository?: () => void;
- * }} LeftPanelCtx
- */
+interface LeftPanelCtx {
+  getCanvasMode: () => string;
+  setCanvasMode: (mode: string) => void;
+  renderImportsTemplate: (...args: any[]) => TemplateResult;
+  renderFilesTemplate: (...args: any[]) => TemplateResult;
+  renderSignalsTemplate: (...args: any[]) => TemplateResult;
+  renderDataExplorerTemplate: (...args: any[]) => TemplateResult;
+  renderHeadTemplate: (...args: any[]) => TemplateResult;
+  renderGitPanel: (...args: any[]) => TemplateResult;
+  renderCanvas: () => void;
+  defCategory: (def: unknown) => string;
+  defBadgeLabel: (def: unknown) => string;
+  navigateToComponent: (path: string) => void;
+  webdata: Record<string, unknown>;
+  defaultDef: (tag: string) => Record<string, unknown>;
+  registerLayersDnD: () => void;
+  registerElementsDnD: () => void;
+  registerComponentsDnD: () => void;
+  setupTreeKeyboard: (tree: HTMLElement) => void;
+  registerFileTreeDnD: (ctx: { renderLeftPanel: () => void }) => void;
+  setGitDiffState: (state: GitDiffState | null) => void;
+  cloneRepository?: () => void;
+}
 
-/** @type {LeftPanelCtx | null} */
-let _ctx = null;
+let _ctx: LeftPanelCtx | null = null;
 
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
 let _rendering = false;
 let _scheduled = false;
@@ -70,7 +67,7 @@ function _onFocusOut() {
  *
  * @param {LeftPanelCtx} ctx
  */
-export function mount(ctx) {
+export function mount(ctx: LeftPanelCtx) {
   _ctx = ctx;
   leftPanel.addEventListener("focusin", _onFocusIn);
   leftPanel.addEventListener("focusout", _onFocusOut);
@@ -141,14 +138,14 @@ function _flush() {
 }
 
 function _render() {
-  const ctx = /** @type {LeftPanelCtx} */ (_ctx);
+  const ctx = _ctx as LeftPanelCtx;
   const tab = view.leftTab;
 
   // ── Project-level panels: render based on projectState, independent of active tab ──
 
   if (tab === "files") {
     litRender(html`<div class="panel-body">${ctx.renderFilesTemplate()}</div>`, leftPanel);
-    const tree = /** @type {HTMLElement | null} */ (leftPanel.querySelector(".file-tree"));
+    const tree = leftPanel.querySelector(".file-tree") as HTMLElement | null;
     if (tree) ctx.setupTreeKeyboard(tree);
     ctx.registerFileTreeDnD({ renderLeftPanel: render });
     return;
@@ -162,13 +159,11 @@ function _render() {
   }
 
   if (tab === "blocks") {
-    const content = renderElementsTemplate(
-      /** @type {Parameters<typeof renderElementsTemplate>[0]} */ ({
-        webdata: ctx.webdata,
-        defaultDef: ctx.defaultDef,
-        rerender: render,
-      }),
-    );
+    const content = renderElementsTemplate({
+      webdata: ctx.webdata,
+      defaultDef: ctx.defaultDef,
+      rerender: render,
+    } as Parameters<typeof renderElementsTemplate>[0]);
     litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
     ctx.registerElementsDnD();
     ctx.registerComponentsDnD();
@@ -208,12 +203,10 @@ function _render() {
   if (tab === "layers")
     content =
       ctx.getCanvasMode() === "stylebook"
-        ? renderStylebookLayersTemplate(
-            /** @type {Parameters<typeof renderStylebookLayersTemplate>[0]} */ ({
-              selectStylebookTag,
-              stylebookMeta,
-            }),
-          )
+        ? renderStylebookLayersTemplate({
+            selectStylebookTag,
+            stylebookMeta,
+          } as Parameters<typeof renderStylebookLayersTemplate>[0])
         : renderLayersTemplate({
             navigateToComponent: ctx.navigateToComponent,
             rerender: render,
@@ -223,7 +216,7 @@ function _render() {
       renderLeftPanel: render,
       documentPath: S.documentPath,
       documentElements: S.document.$elements || [],
-      applyMutation: (/** @type {(doc: object) => void} */ fn) => {
+      applyMutation: (fn: (doc: object) => void) => {
         transact(activeTab.value, fn);
       },
     });
@@ -247,19 +240,19 @@ function _render() {
     content = ctx.renderHeadTemplate({
       document: headDoc,
       applyMutation: isContent
-        ? (/** @type {(doc: object) => void} */ fn) => {
-            const tab = activeTab.value;
-            const fm = /** @type {Record<string, unknown>} */ (tab.doc.content?.frontmatter ?? {});
-            const fmHead = /** @type {unknown[] | undefined} */ (fm.$head);
+        ? (fn: (doc: object) => void) => {
+            const tab = activeTab.value!;
+            const fm = (tab.doc.content?.frontmatter ?? {}) as Record<string, unknown>;
+            const fmHead = fm.$head as unknown[] | undefined;
             const tmp = { title: fm.title, $head: fmHead ? [...fmHead] : undefined };
             fn(tmp);
             if (tmp.title !== fm.title)
-              mutateUpdateFrontmatter(tab, "title", /** @type {JsonValue} */ (tmp.title));
+              mutateUpdateFrontmatter(tab, "title", tmp.title as JsonValue);
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
             mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ (newHead));
             render();
           }
-        : (/** @type {(doc: object) => void} */ fn) => {
+        : (fn: (doc: object) => void) => {
             transact(activeTab.value, fn);
           },
       renderLeftPanel: render,

package/src/panels/{overlays.js → overlays.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Overlays panel — renders hover/selection overlay boxes on canvas panels. Delegates block action
  * bar rendering to studio.js via ctx callback.
@@ -5,38 +6,32 @@
 
 import { html, render as litRender, nothing } from "lit-html";
 import { styleMap } from "lit-html/directives/style-map.js";
-import { canvasPanels, pathsEqual } from "../store.js";
-import { effect, effectScope } from "../reactivity.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { findCanvasElement, getActivePanel, effectiveZoom } from "../canvas/canvas-helpers.js";
-import { layoutElements } from "../canvas/canvas-live-render.js";
-
-/**
- * @typedef {{
- *   cls: string;
- *   top: string;
- *   left: string;
- *   width: string;
- *   height: string;
- *   border?: string;
- *   isLayout?: boolean;
- * }} OverlayBox
- */
+import { canvasPanels, pathsEqual } from "../store";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
+import { findCanvasElement, getActivePanel, effectiveZoom } from "../canvas/canvas-helpers";
+import { layoutElements } from "../canvas/canvas-live-render";
+
+interface OverlayBox {
+  cls: string;
+  top: string;
+  left: string;
+  width: string;
+  height: string;
+  border?: string;
+  isLayout?: boolean;
+}
 
-/**
- * @typedef {{
- *   getCanvasMode: () => string;
- *   isEditing: () => boolean;
- *   renderBlockActionBar: () => void;
- * }} OverlaysCtx
- */
+interface OverlaysCtx {
+  getCanvasMode: () => string;
+  isEditing: () => boolean;
+  renderBlockActionBar: () => void;
+}
 
-/** @type {OverlaysCtx | null} */
-let _ctx = null;
+let _ctx: OverlaysCtx | null = null;
 
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
 let _scheduled = false;
 
@@ -45,7 +40,7 @@ let _scheduled = false;
  *
  * @param {OverlaysCtx} ctx
  */
-export function mount(ctx) {
+export function mount(ctx: OverlaysCtx) {
   _ctx = ctx;
   _scope = effectScope();
   _scope.run(() => {
@@ -114,8 +109,7 @@ function _flush() {
   }
 
   for (const p of canvasPanels) {
-    /** @type {OverlayBox[]} */
-    const boxes = [];
+    const boxes: OverlayBox[] = [];
 
     // Batch layout reads: read viewport geometry once per panel
     if (!p.viewport) continue;
@@ -128,8 +122,7 @@ function _flush() {
       const el = findCanvasElement(hover, p.canvas);
       if (el) {
         const elRect = el.getBoundingClientRect();
-        /** @type {OverlayBox} */
-        const desc = {
+        const desc: OverlayBox = {
           cls: "overlay-box overlay-hover",
           top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
           left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,
@@ -145,8 +138,7 @@ function _flush() {
       const el = findCanvasElement(selection, p.canvas);
       if (el) {
         const elRect = el.getBoundingClientRect();
-        /** @type {OverlayBox} */
-        const desc = {
+        const desc: OverlayBox = {
           cls: "overlay-box overlay-selection",
           top: `${(elRect.top - vpRect.top + scrollTop) / scale}px`,
           left: `${(elRect.left - vpRect.left + scrollLeft) / scale}px`,

package/src/panels/{panel-events.js → panel-events.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Panel events — extracted from studio.js (Phase 4m). Unified event handler system for canvas
  * panels: click-to-select, double-click inline edit, context menu, hover tracking, insertion
@@ -12,49 +13,48 @@ import {
   childIndex,
   getNodeAtPath,
   renderOnly,
-} from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.js";
-import { showContextMenu } from "../editor/context-menu.js";
-import * as insertionHelper from "../editor/insertion-helper.js";
-import { defaultDef } from "../panels/shared.js";
-import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers.js";
-import { layoutElements, activeLayoutPath } from "../canvas/canvas-live-render.js";
+} from "../store";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
+import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit";
+import { showContextMenu } from "../editor/context-menu";
+import * as insertionHelper from "../editor/insertion-helper";
+import { defaultDef } from "../panels/shared";
+import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers";
+import { layoutElements, activeLayoutPath } from "../canvas/canvas-live-render";
+import type { CanvasPanel } from "./canvas-dnd";
+import type { JxPath } from "../state";
 
-/** @type {PanelEventsCtx | null} */
-let _ctx = null;
+interface PanelEventsCtx {
+  getCanvasMode: () => string;
+  enterInlineEdit: (el: HTMLElement, path: JxPath) => void;
+  navigateToComponent: (path: string) => void;
+}
 
-/**
- * @typedef {{
- *   getCanvasMode: () => string;
- *   enterInlineEdit: (el: HTMLElement, path: JxPath) => void;
- *   navigateToComponent: (path: string) => void;
- * }} PanelEventsCtx
- */
+let _ctx: PanelEventsCtx | null = null;
 
 /**
  * Initialize the panel events module.
  *
  * @param {PanelEventsCtx} ctx
  */
-export function initPanelEvents(ctx) {
+export function initPanelEvents(ctx: PanelEventsCtx) {
   _ctx = ctx;
 }
 
 /** @param {import("../canvas/canvas-render.js").CanvasPanel} panel */
-export function registerPanelEvents(panel) {
-  const ctx = /** @type {PanelEventsCtx} */ (_ctx);
-  const canvas = /** @type {HTMLElement} */ (panel.canvas);
-  const overlayClk = /** @type {HTMLElement} */ (panel.overlayClk);
+export function registerPanelEvents(panel: CanvasPanel) {
+  const ctx = _ctx as PanelEventsCtx;
+  const canvas = panel.canvas as HTMLElement;
+  const overlayClk = panel.overlayClk as HTMLElement;
   const { mediaName } = panel;
   const ac = new AbortController();
   const opts = { signal: ac.signal };
   view.canvasEventCleanups.push(() => ac.abort());
 
-  /** @param {Function} fn */
-  function withPanelPointerEvents(fn) {
-    const els = /** @type {NodeListOf<HTMLElement>} */ (canvas.querySelectorAll("*"));
+  /** @param {() => unknown} fn */
+  function withPanelPointerEvents(fn: () => unknown) {
+    const els = canvas.querySelectorAll("*") as NodeListOf<HTMLElement>;
     for (const el of els) el.style.pointerEvents = "auto";
     overlayClk.style.display = "none";
     const result = fn();
@@ -65,7 +65,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "click",
-    (/** @type {MouseEvent} */ e) => {
+    (e: MouseEvent) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -84,9 +84,9 @@ export function registerPanelEvents(panel) {
       const tab = activeTab.value;
       const canvasMode = ctx.getCanvasMode();
 
-      const elements = /** @type {Element[]} */ (
-        withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY))
-      );
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      ) as Element[];
 
       if (!tab) return;
 
@@ -106,9 +106,11 @@ export function registerPanelEvents(panel) {
             let path = bubbleInlinePath(tab.doc.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
 
-            const resolvedEl = /** @type {HTMLElement} */ (
-              path === originalPath ? el : findCanvasElement(path, canvas) || el
-            );
+            const resolvedEl = (
+              path === originalPath
+                ? el
+                : (findCanvasElement(path, canvas) as HTMLElement | null) || el
+            ) as HTMLElement;
 
             if (
               pathsEqual(path, tab.session.selection) &&
@@ -140,7 +142,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "dblclick",
-    (/** @type {MouseEvent} */ e) => {
+    (e: MouseEvent) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -156,9 +158,9 @@ export function registerPanelEvents(panel) {
       if (canvasMode !== "edit" && canvasMode !== "design") return;
 
       const tab = activeTab.value;
-      const elements = /** @type {Element[]} */ (
-        withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY))
-      );
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      ) as Element[];
 
       if (!tab) return;
 
@@ -167,9 +169,11 @@ export function registerPanelEvents(panel) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
             const path = bubbleInlinePath(tab.doc.document, originalPath);
-            const resolvedEl = /** @type {HTMLElement} */ (
-              path === originalPath ? el : findCanvasElement(path, canvas) || el
-            );
+            const resolvedEl = (
+              path === originalPath
+                ? el
+                : (findCanvasElement(path, canvas) as HTMLElement | null) || el
+            ) as HTMLElement;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
               tab.session.ui.activeMedia = newMedia;
@@ -186,7 +190,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "contextmenu",
-    (/** @type {MouseEvent} */ e) => {
+    (e: MouseEvent) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -199,9 +203,9 @@ export function registerPanelEvents(panel) {
           return;
       }
       const tab = activeTab.value;
-      const elements = /** @type {Element[]} */ (
-        withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY))
-      );
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      ) as Element[];
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
           let path = elToPath.get(el);
@@ -219,7 +223,7 @@ export function registerPanelEvents(panel) {
 
   overlayClk.addEventListener(
     "mousemove",
-    (/** @type {MouseEvent} */ e) => {
+    (e: MouseEvent) => {
       const barInner = view.blockActionBarEl?.firstElementChild;
       if (barInner) {
         const r = barInner.getBoundingClientRect();
@@ -233,9 +237,9 @@ export function registerPanelEvents(panel) {
       }
       const tab = activeTab.value;
       if (!tab) return;
-      const el = /** @type {Element | null} */ (
-        withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY))
-      );
+      const el = withPanelPointerEvents(() =>
+        document.elementFromPoint(e.clientX, e.clientY),
+      ) as Element | null;
       if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
@@ -273,9 +277,7 @@ export function registerPanelEvents(panel) {
     childIndex,
     getNodeAtPath,
     elToPath,
-    panel: /** @type {import("../editor/insertion-helper.js").CanvasPanel} */ (
-      /** @type {unknown} */ (panel)
-    ),
+    panel: panel as unknown as Parameters<typeof insertionHelper.mount>[0]["panel"],
   });
   view.canvasEventCleanups.push(() => insertionHelper.unmount());
 }

package/src/panels/{preview-render.js → preview-render.ts}

@@ -1,12 +1,15 @@
+/// <reference lib="dom" />
 /**
  * Preview render — extracted from studio.js (Phase 4m). Structural preview renderer that creates
  * DOM from Jx node trees as a fallback when runtime rendering fails.
  */
 
-import { elToPath } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { applyCanvasStyle } from "../utils/canvas-media.js";
-import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
+import { elToPath } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { applyCanvasStyle } from "../utils/canvas-media";
+import { resolveDefaultForCanvas } from "../panels/signals-panel";
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 
 /**
  * Recursively render a Jx node to the canvas DOM. Media-aware: applies base styles + active
@@ -18,7 +21,13 @@ import { resolveDefaultForCanvas } from "../panels/signals-panel.js";
  * @param {Set<string>} activeBreakpoints
  * @param {Record<string, boolean>} featureToggles
  */
-export function renderCanvasNode(node, path, parent, activeBreakpoints, featureToggles) {
+export function renderCanvasNode(
+  node: JxMutableNode | string | number | boolean | null | undefined,
+  path: JxPath,
+  parent: HTMLElement,
+  activeBreakpoints: Set<string>,
+  featureToggles: Record<string, boolean>,
+) {
   if (typeof node === "string" || typeof node === "number" || typeof node === "boolean") {
     parent.appendChild(document.createTextNode(String(node)));
     return;
@@ -33,10 +42,10 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   if (typeof node.textContent === "string") {
     el.textContent = node.textContent;
   } else if (typeof node.textContent === "object" && node.textContent !== null) {
-    const tc = /** @type {Record<string, unknown>} */ (node.textContent);
+    const tc = node.textContent as Record<string, unknown>;
     if (tc.$ref) {
       const resolved = resolveDefaultForCanvas(tc, activeTab.value?.doc.document?.state);
-      el.textContent = /** @type {string | null} */ (resolved);
+      el.textContent = resolved as string | null;
       el.style.opacity = "0.7";
       el.style.fontStyle = "italic";
       el.title = `Bound: ${tc.$ref}`;
@@ -51,13 +60,9 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   if (node.attributes && typeof node.attributes === "object") {
     for (const [attr, val] of Object.entries(node.attributes)) {
       try {
-        if (
-          typeof val === "object" &&
-          val !== null &&
-          /** @type {Record<string, unknown>} */ (val).$ref
-        ) {
+        if (typeof val === "object" && val !== null && (val as Record<string, unknown>).$ref) {
           const resolved = resolveDefaultForCanvas(val, activeTab.value?.doc.document?.state);
-          el.setAttribute(attr, /** @type {string} */ (resolved));
+          el.setAttribute(attr, resolved as string);
         } else {
           el.setAttribute(attr, val);
         }
@@ -78,9 +83,9 @@ export function renderCanvasNode(node, path, parent, activeBreakpoints, featureT
   } else if (
     node.children &&
     typeof node.children === "object" &&
-    /** @type {Record<string, unknown>} */ (node.children).$prototype === "Array"
+    (node.children as Record<string, unknown>).$prototype === "Array"
   ) {
-    const childrenObj = /** @type {Record<string, unknown>} */ (node.children);
+    const childrenObj = node.children as Record<string, unknown>;
     const template = childrenObj.map;
     if (template && typeof template === "object") {
       const wrapper = document.createElement("div");