@dooboostore/simple-web-component 1.0.29 → 1.0.30

package/dist/esm/elements/SwcChoose.js

@@ -15,6 +15,7 @@ class SwcChoose extends HTMLTemplateElement {
     super(...arguments);
     this._nodes = [];
     this._value = null;
+    this._previousTemplate = null;
   }
   get value() {
     return this._value;
@@ -23,70 +24,85 @@ class SwcChoose extends HTMLTemplateElement {
     this._value = nv;
     this.render();
   }
-  _resolvePortal() {
-    const portalScript = this.getAttribute("on-get-portal");
-    if (!portalScript)
-      return this.parentElement;
-    const win = this.ownerDocument?.defaultView || window;
-    const res = FunctionUtils.executeReturn({
-      script: portalScript,
-      context: this,
-      args: SwcUtils.getHelperAndHostSet(win, this)
-    });
-    if (res instanceof HTMLElement)
-      return res;
-    if (typeof res === "string")
-      return win.document.querySelector(res);
-    return this.parentElement;
-  }
   _executeCloneCallback(attr, args) {
     const script = this.getAttribute(attr);
     if (!script)
       return;
     FunctionUtils.execute({ script, context: this, args });
   }
-  refresh() {
-    const script = this.getAttribute("on-get-value");
-    if (!script) {
+  refresh(valueAttr) {
+    valueAttr ?? (valueAttr = this.getAttribute("value"));
+    if (valueAttr === null) {
       this.value = null;
       return;
     }
-    const win = this.ownerDocument?.defaultView || window;
-    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
-    this.value = result;
+    if (valueAttr.startsWith("{{") && valueAttr.endsWith("}}")) {
+      const script = valueAttr.slice(2, -2).trim();
+      const win = this.ownerDocument?.defaultView || window;
+      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+      this.value = result;
+    } else {
+      this.value = valueAttr;
+    }
   }
   render() {
-    this.cleanup();
-    const portal = this._resolvePortal();
-    if (!portal)
-      return;
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
     const templates = Array.from(this.content.querySelectorAll("template"));
     let selected = null;
     for (const t of templates) {
-      if (t.getAttribute("is") === "swc-when" && String(t.getAttribute("value")) === String(this._value)) {
-        selected = t;
-        break;
+      if (t.getAttribute("is") === "swc-when") {
+        let matches = false;
+        const value = t.getAttribute("value") || "";
+        if (value.startsWith("{{") && value.endsWith("}}")) {
+          const script = value.slice(2, -2).trim();
+          const result = FunctionUtils.executeReturn({
+            script,
+            context: t,
+            args: { ...helperSet, $value: this._value }
+          });
+          matches = result === true;
+        } else {
+          matches = String(value) === String(this._value);
+        }
+        if (matches) {
+          selected = t;
+          break;
+        }
       }
     }
     const target = selected || this.content.querySelector('template[is="swc-otherwise"]');
+    const targetHasSkipIfSame = target?.hasAttribute("skip-if-same");
+    const shouldSkip = (this.hasAttribute("skip-if-same") || targetHasSkipIfSame) && this._previousTemplate === target;
+    if (shouldSkip) {
+      return;
+    }
+    this.cleanup();
+    this._previousTemplate = target;
     if (target) {
       const clone = target.content.cloneNode(true);
       this._nodes = Array.from(clone.childNodes);
       const elements = this._nodes.filter((n) => n.nodeType === 1);
       const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
       this._nodes.forEach((n, nodeIdx) => {
-        if (n instanceof HTMLElement)
-          n.__swc_host = this;
         this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+        if (n instanceof HTMLElement) {
+          Array.from(n.attributes).forEach((attr) => {
+            const value = attr.value || "";
+            if (value.startsWith("{{") && value.endsWith("}}")) {
+              const script = value.slice(2, -2).trim();
+              const result = FunctionUtils.executeReturn({
+                script,
+                context: n,
+                args: { ...groupArgs, $value: this._value }
+              });
+              n.setAttribute(attr.name, String(result));
+            }
+          });
+        }
       });
       this._executeCloneCallback("on-clone-nodes", groupArgs);
-      if (portal === this.parentElement) {
-        portal.insertBefore(clone, this.nextSibling);
-      } else {
-        portal.appendChild(clone);
-      }
+      this.parentElement?.insertBefore(clone, this.nextSibling);
     }
   }
   cleanup() {
@@ -101,9 +117,9 @@ class SwcChoose extends HTMLTemplateElement {
   }
 }
 __decorate([
-  changedAttributeHost("on-get-value"),
+  changedAttributeHost("value"),
   __metadata("design:type", Function),
-  __metadata("design:paramtypes", []),
+  __metadata("design:paramtypes", [String]),
   __metadata("design:returntype", void 0)
 ], SwcChoose.prototype, "refresh", null);
 export {

package/dist/esm/elements/SwcChoose.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcChoose.ts"],
-  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcChoose extends HTMLTemplateElement {\n  private _nodes: Node[] = [];\n  private _value: any = null;\n\n  get value(): any {\n    return this._value;\n  }\n  set value(nv: any) {\n    this._value = nv;\n    this.render();\n  }\n\n  private _resolvePortal(): Element | null {\n    const portalScript = this.getAttribute('on-get-portal');\n    if (!portalScript) return this.parentElement;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script: portalScript,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof HTMLElement) return res;\n    if (typeof res === 'string') return win.document.querySelector(res);\n    return this.parentElement;\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('on-get-value')\n  private refresh() {\n    const script = this.getAttribute('on-get-value');\n    if (!script) {\n      this.value = null;\n      return;\n    }\n    const win = this.ownerDocument?.defaultView || window;\n    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });\n    this.value = result;\n  }\n\n  private render() {\n    this.cleanup();\n    const portal = this._resolvePortal();\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    const templates = Array.from(this.content.querySelectorAll('template'));\n    let selected: HTMLTemplateElement | null = null;\n    for (const t of templates) {\n      if (t.getAttribute('is') === 'swc-when' && String(t.getAttribute('value')) === String(this._value)) {\n        selected = t;\n        break;\n      }\n    }\n    const target = selected || (this.content.querySelector('template[is=\"swc-otherwise\"]') as HTMLTemplateElement);\n\n    if (target) {\n      const clone = target.content.cloneNode(true) as DocumentFragment;\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };\n\n      this._nodes.forEach((n, nodeIdx) => {\n        if (n instanceof HTMLElement) (n as any).__swc_host = this;\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      if (portal === this.parentElement) {\n        portal.insertBefore(clone, this.nextSibling);\n      } else {\n        portal.appendChild(clone);\n      }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    this.refresh();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;AAAA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAExB,MAAO,kBAAkB,oBAAmB;EAAlD,cAAA;;AACU,SAAA,SAAiB,CAAA;AACjB,SAAA,SAAc;EA8FxB;EA5FE,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EACA,IAAI,MAAM,IAAO;AACf,SAAK,SAAS;AACd,SAAK,OAAM;EACb;EAEQ,iBAAc;AACpB,UAAM,eAAe,KAAK,aAAa,eAAe;AACtD,QAAI,CAAC;AAAc,aAAO,KAAK;AAE/B,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,MAAM,cAAc,cAAc;MACtC,QAAQ;MACR,SAAS;MACT,MAAM,SAAS,oBAAoB,KAAK,IAAI;KAC7C;AAED,QAAI,eAAe;AAAa,aAAO;AACvC,QAAI,OAAO,QAAQ;AAAU,aAAO,IAAI,SAAS,cAAc,GAAG;AAClE,WAAO,KAAK;EACd;EAEQ,sBAAsB,MAAc,MAAS;AACnD,UAAM,SAAS,KAAK,aAAa,IAAI;AACrC,QAAI,CAAC;AAAQ;AACb,kBAAc,QAAQ,EAAE,QAAQ,SAAS,MAAM,KAAI,CAAE;EACvD;EAGQ,UAAO;AACb,UAAM,SAAS,KAAK,aAAa,cAAc;AAC/C,QAAI,CAAC,QAAQ;AACX,WAAK,QAAQ;AACb;IACF;AACA,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,SAAS,cAAc,cAAc,EAAE,QAAQ,SAAS,MAAM,MAAM,SAAS,oBAAoB,KAAK,IAAI,EAAC,CAAE;AACnH,SAAK,QAAQ;EACf;EAEQ,SAAM;AACZ,SAAK,QAAO;AACZ,UAAM,SAAS,KAAK,eAAc;AAClC,QAAI,CAAC;AAAQ;AAEb,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AAExD,UAAM,YAAY,MAAM,KAAK,KAAK,QAAQ,iBAAiB,UAAU,CAAC;AACtE,QAAI,WAAuC;AAC3C,eAAW,KAAK,WAAW;AACzB,UAAI,EAAE,aAAa,IAAI,MAAM,cAAc,OAAO,EAAE,aAAa,OAAO,CAAC,MAAM,OAAO,KAAK,MAAM,GAAG;AAClG,mBAAW;AACX;MACF;IACF;AACA,UAAM,SAAS,YAAa,KAAK,QAAQ,cAAc,8BAA8B;AAErF,QAAI,QAAQ;AACV,YAAM,QAAQ,OAAO,QAAQ,UAAU,IAAI;AAC3C,WAAK,SAAS,MAAM,KAAK,MAAM,UAAU;AACzC,YAAM,WAAW,KAAK,OAAO,OAAO,OAAK,EAAE,aAAa,CAAC;AACzD,YAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ,WAAW,UAAU,eAAe,SAAS,CAAC,EAAC;AAE3H,WAAK,OAAO,QAAQ,CAAC,GAAG,YAAW;AACjC,YAAI,aAAa;AAAc,YAAU,aAAa;AACtD,aAAK,sBAAsB,iBAAiB,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,SAAS,YAAY,EAAE,aAAa,EAAC,CAAE;MAC3H,CAAC;AAED,WAAK,sBAAsB,kBAAkB,SAAS;AAEtD,UAAI,WAAW,KAAK,eAAe;AACjC,eAAO,aAAa,OAAO,KAAK,WAAW;MAC7C,OAAO;AACL,eAAO,YAAY,KAAK;MAC1B;IACF;EACF;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC;AACxD,SAAK,SAAS,CAAA;EAChB;EAEA,oBAAiB;AACf,SAAK,QAAO;EACd;EACA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AA5DQ,WAAA;EADP,qBAAqB,cAAc;;;;;",
+  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcChoose extends HTMLTemplateElement {\n  private _nodes: Node[] = [];\n  private _value: any = null;\n  private _previousTemplate: HTMLTemplateElement | null = null;\n\n  get value(): any {\n    return this._value;\n  }\n  set value(nv: any) {\n    this._value = nv;\n    this.render();\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('value')\n  private refresh(valueAttr?: string | null) {\n    valueAttr ??= this.getAttribute('value');\n    if (valueAttr === null) {\n      this.value = null;\n      return;\n    }\n\n    // {{ }} 브레이스로 감싸진 값은 스크립트 실행\n    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {\n      const script = valueAttr.slice(2, -2).trim();\n      const win = this.ownerDocument?.defaultView || window;\n      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });\n      this.value = result;\n    } else {\n      // 일반 문자열 값\n      this.value = valueAttr;\n    }\n  }\n\n  private render() {\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    const templates = Array.from(this.content.querySelectorAll('template'));\n    let selected: HTMLTemplateElement | null = null;\n\n    for (const t of templates) {\n      if (t.getAttribute('is') === 'swc-when') {\n        let matches = false;\n        const value = t.getAttribute('value') || '';\n\n        // {{ }} 브레이스로 감싸진 값은 스크립트 실행\n        if (value.startsWith('{{') && value.endsWith('}}')) {\n          const script = value.slice(2, -2).trim();\n          const result = FunctionUtils.executeReturn({\n            script,\n            context: t,\n            args: { ...helperSet, $value: this._value }\n          });\n          // console.log('rrrrrrrrrrrrrr', result);\n          matches = result === true;\n        } else {\n          // 일반 문자열 비교 (기존 방식)\n          matches = String(value) === String(this._value);\n        }\n\n        if (matches) {\n          selected = t;\n          break;\n        }\n      }\n    }\n\n    const target = selected || (this.content.querySelector('template[is=\"swc-otherwise\"]') as HTMLTemplateElement);\n\n    // skip-if-same attribute가 있고 이전과 같은 template이면 렌더링 스킵\n    // 최상위 skip-if-same 또는 각 when/otherwise의 skip-if-same 체크\n    const targetHasSkipIfSame = target?.hasAttribute('skip-if-same');\n    const shouldSkip = (this.hasAttribute('skip-if-same') || targetHasSkipIfSame) && this._previousTemplate === target;\n    if (shouldSkip) {\n      return;\n    }\n\n    this.cleanup();\n    this._previousTemplate = target;\n\n    if (target) {\n      const clone = target.content.cloneNode(true) as DocumentFragment;\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };\n\n      // 복제된 최상위 요소들은 SwcChoose의 직접 자식이 될 것이므로 __swc_host 설정 안 함\n      this._nodes.forEach((n, nodeIdx) => {\n        // if (n instanceof HTMLElement) (n as any).__swc_host = this;  // 제거: 부모 체인 유지\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });\n\n        // Attribute {{ }} 치환 - HTML string 차원에서 동적 치환\n        if (n instanceof HTMLElement) {\n          Array.from(n.attributes).forEach(attr => {\n            const value = attr.value || '';\n            if (value.startsWith('{{') && value.endsWith('}}')) {\n              const script = value.slice(2, -2).trim();\n              const result = FunctionUtils.executeReturn({\n                script,\n                context: n,\n                args: { ...groupArgs, $value: this._value }\n              });\n              n.setAttribute(attr.name, String(result));\n            }\n          });\n        }\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      this.parentElement?.insertBefore(clone, this.nextSibling);\n      // if (portal === this.parentElement) {\n      //   portal.insertBefore(clone, this.nextSibling);\n      // } else {\n      //   portal.appendChild(clone);\n      // }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    this.refresh();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/elements/register.js

@@ -335,6 +335,7 @@ const registerAllElements = (w) => {
       super(...arguments);
       this._nodes = [];
       this._value = null;
+      this._previousTemplate = null;
     }
     get value() {
       return this._value;
@@ -343,70 +344,85 @@ const registerAllElements = (w) => {
       this._value = nv;
       this.render();
     }
-    _resolvePortal() {
-      const portalScript = this.getAttribute("on-get-portal");
-      if (!portalScript)
-        return this.parentElement;
-      const win = this.ownerDocument?.defaultView || window;
-      const res = FunctionUtils.executeReturn({
-        script: portalScript,
-        context: this,
-        args: SwcUtils.getHelperAndHostSet(win, this)
-      });
-      if (res instanceof HTMLElement)
-        return res;
-      if (typeof res === "string")
-        return win.document.querySelector(res);
-      return this.parentElement;
-    }
     _executeCloneCallback(attr, args) {
       const script = this.getAttribute(attr);
       if (!script)
         return;
       FunctionUtils.execute({ script, context: this, args });
     }
-    refresh() {
-      const script = this.getAttribute("on-get-value");
-      if (!script) {
+    refresh(valueAttr) {
+      valueAttr ?? (valueAttr = this.getAttribute("value"));
+      if (valueAttr === null) {
         this.value = null;
         return;
       }
-      const win = this.ownerDocument?.defaultView || window;
-      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
-      this.value = result;
+      if (valueAttr.startsWith("{{") && valueAttr.endsWith("}}")) {
+        const script = valueAttr.slice(2, -2).trim();
+        const win = this.ownerDocument?.defaultView || window;
+        const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+        this.value = result;
+      } else {
+        this.value = valueAttr;
+      }
     }
     render() {
-      this.cleanup();
-      const portal = this._resolvePortal();
-      if (!portal)
-        return;
       const win = this.ownerDocument?.defaultView || window;
       const helperSet = SwcUtils.getHelperAndHostSet(win, this);
       const templates = Array.from(this.content.querySelectorAll("template"));
       let selected = null;
       for (const t of templates) {
-        if (t.getAttribute("is") === "swc-when" && String(t.getAttribute("value")) === String(this._value)) {
-          selected = t;
-          break;
+        if (t.getAttribute("is") === "swc-when") {
+          let matches = false;
+          const value = t.getAttribute("value") || "";
+          if (value.startsWith("{{") && value.endsWith("}}")) {
+            const script = value.slice(2, -2).trim();
+            const result = FunctionUtils.executeReturn({
+              script,
+              context: t,
+              args: { ...helperSet, $value: this._value }
+            });
+            matches = result === true;
+          } else {
+            matches = String(value) === String(this._value);
+          }
+          if (matches) {
+            selected = t;
+            break;
+          }
         }
       }
       const target = selected || this.content.querySelector('template[is="swc-otherwise"]');
+      const targetHasSkipIfSame = target?.hasAttribute("skip-if-same");
+      const shouldSkip = (this.hasAttribute("skip-if-same") || targetHasSkipIfSame) && this._previousTemplate === target;
+      if (shouldSkip) {
+        return;
+      }
+      this.cleanup();
+      this._previousTemplate = target;
       if (target) {
         const clone = target.content.cloneNode(true);
         this._nodes = Array.from(clone.childNodes);
         const elements = this._nodes.filter((n) => n.nodeType === 1);
         const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
         this._nodes.forEach((n, nodeIdx) => {
-          if (n instanceof HTMLElement)
-            n.__swc_host = this;
           this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+          if (n instanceof HTMLElement) {
+            Array.from(n.attributes).forEach((attr) => {
+              const value = attr.value || "";
+              if (value.startsWith("{{") && value.endsWith("}}")) {
+                const script = value.slice(2, -2).trim();
+                const result = FunctionUtils.executeReturn({
+                  script,
+                  context: n,
+                  args: { ...groupArgs, $value: this._value }
+                });
+                n.setAttribute(attr.name, String(result));
+              }
+            });
+          }
         });
         this._executeCloneCallback("on-clone-nodes", groupArgs);
-        if (portal === this.parentElement) {
-          portal.insertBefore(clone, this.nextSibling);
-        } else {
-          portal.appendChild(clone);
-        }
+        this.parentElement?.insertBefore(clone, this.nextSibling);
       }
     }
     cleanup() {
@@ -421,9 +437,9 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
   ], SwcChoose.prototype, "refresh", null);
   SwcChoose = __decorate([
@@ -459,8 +475,10 @@ const registerAllElements = (w) => {
     }
     refresh() {
       const script = this.getAttribute("on-get-value");
-      if (!script)
+      if (!script) {
+        this.render("default");
         return;
+      }
       const win = this.ownerDocument?.defaultView || window;
       const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
       if (result instanceof Promise) {
@@ -505,6 +523,7 @@ const registerAllElements = (w) => {
       this._nodes = [];
     }
     connectedCallback() {
+      console.log("[SwcAsync] connectedCallback called");
       this.refresh();
     }
     disconnectedCallback() {
@@ -805,6 +824,79 @@ const registerAllElements = (w) => {
   SwcAppBody = __decorate([
     elementDefine("swc-app-body", { extends: "body", window: w })
   ], SwcAppBody);
+  return {
+    // Sub Templates
+    SwcLoading,
+    SwcError,
+    SwcSuccess,
+    SwcWhen,
+    SwcOtherwise,
+    SwcDefault,
+    // Core Elements
+    SwcApp,
+    SwcIf,
+    SwcLoop,
+    SwcChoose,
+    SwcAsync,
+    // App Elements
+    SwcAppAnchor,
+    SwcAppArea,
+    SwcAppAudio,
+    SwcAppBase,
+    SwcAppButton,
+    SwcAppCanvas,
+    SwcAppData,
+    SwcAppDataList,
+    SwcAppDetails,
+    SwcAppDialog,
+    SwcAppDiv,
+    SwcAppDList,
+    SwcAppEmbed,
+    SwcAppFieldSet,
+    SwcAppForm,
+    SwcAppHR,
+    SwcAppIFrame,
+    SwcAppImage,
+    SwcAppInput,
+    SwcAppLabel,
+    SwcAppLegend,
+    SwcAppLI,
+    SwcAppLink,
+    SwcAppMap,
+    SwcAppMeta,
+    SwcAppMeter,
+    SwcAppMod,
+    SwcAppObject,
+    SwcAppOList,
+    SwcAppOptGroup,
+    SwcAppOption,
+    SwcAppOutput,
+    SwcAppParagraph,
+    SwcAppParam,
+    SwcAppPicture,
+    SwcAppPre,
+    SwcAppProgress,
+    SwcAppQuote,
+    SwcAppScript,
+    SwcAppSelect,
+    SwcAppSlot,
+    SwcAppSource,
+    SwcAppSpan,
+    SwcAppStyle,
+    SwcAppTable,
+    SwcAppTableSection,
+    SwcAppTableCell,
+    SwcAppTemplate,
+    SwcAppTextArea,
+    SwcAppTime,
+    SwcAppTitle,
+    SwcAppTableRow,
+    SwcAppTrack,
+    SwcAppUList,
+    SwcAppVideo,
+    SwcAppHeading,
+    SwcAppBody
+  };
 };
 export {
   registerAllElements