@dooboostore/simple-web-component 1.0.10 → 1.0.11

package/README.md

@@ -671,14 +671,40 @@ const MyComponent = createMyComponent(window);
 
 ## SPA Routing — Full Working Example
 
-This example uses `@dooboostore/simple-boot` for DI and routing.  
-Copy and paste the following into a single `index.ts` file.
+SWC provides two ways to bootstrap a SPA. Choose the one that fits your setup.
 
+---
+
+### Option A — `<swc-app>` Custom Element (HTML-first, no JS bootstrap)
+
+The simplest approach. Drop `<swc-app>` into your HTML and point it at a config function via `swc-get-application-config`. No manual `DOMContentLoaded` wiring needed.
+
+**`index.html`**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>SWC SPA</title>
+  <script type="module" src="./index.js"></script>
+</head>
+<body>
+  <!--
+    swc-get-application-config: a global function name that returns SwcAttributeConfigType.
+    SwcApp calls this function after the script is evaluated.
+  -->
+  <swc-app swc-get-application-config="applicationConfig(this)"></swc-app>
+</body>
+</html>
+```
+
+**`index.ts`**
 ```typescript
 import 'reflect-metadata';
 import {
   elementDefine, innerHtml, state, attribute,
-  query, addEventListener, onAfterConnected, Swc
+  query, addEventListener, onAfterConnected, onMutationSubscribe,
+  SwcApp, SwcAppInterface, SwcAttributeConfigType
 } from '@dooboostore/simple-web-component';
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
 import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
@@ -686,10 +712,240 @@ import { Router as WebRouter } from '@dooboostore/core-web/routers/Router';
 import { Router } from '@dooboostore/simple-boot/decorators/route/Router';
 import { RouterAction } from '@dooboostore/simple-boot/route/RouterAction';
 import { RoutingDataSet } from '@dooboostore/simple-boot/route/RouterManager';
+import createMyComponent from './MyComponent';
 
 const w = window;
 
-// ─── Page: Home ──────────────────────────────────────────────────────────────
+// ─── Pages ───────────────────────────────────────────────────────────────────
+
+// MyComponent is defined in a separate file and receives `window` via factory
+const MyComponent = createMyComponent(w);
+
+@Sim
+@elementDefine({ name: 'my-component2', window: w })
+class MyComponent2 extends HTMLElement {
+  say() { console.log('hello MyComponent2'); }
+
+  @innerHtml
+  render() {
+    return `
+      <div style="padding: 10px; border: 1px solid #ccc;">
+        <h3>My Component2</h3>
+      </div>
+    `;
+  }
+}
+
+// ─── Sub Router ──────────────────────────────────────────────────────────────
+
+@Sim
+@Router({
+  path: '/hello',
+  route: {
+    '/good': MyComponent,
+    '/good2': MyComponent2,
+  }
+})
+@elementDefine('my-router')
+class MyRouter extends HTMLElement implements RouterAction.CanActivate {
+  @query('#my-route') myRoute!: HTMLElement;
+
+  @innerHtml
+  render() {
+    return `
+      <div style="padding: 10px; border: 1px solid #ccc;">
+        <h3>My Router</h3>
+        <div id="my-route"></div>
+      </div>
+    `;
+  }
+
+  async canActivate(url: RoutingDataSet, data?: any): Promise<void> {
+    if (data instanceof Node && !this.myRoute.contains(data)) {
+      this.myRoute.replaceChildren(data);
+    }
+  }
+}
+
+// ─── Root Router ─────────────────────────────────────────────────────────────
+
+@Sim
+@Router({ routers: [MyRouter] })
+@elementDefine({ name: 'root-router', window: w })
+class RootRouter extends HTMLDivElement implements RouterAction.CanActivate {
+  @state route = '';
+  @state name = 'Root Name';
+
+  constructor(
+    private router: WebRouter,
+    private sim: SimpleApplication
+  ) {
+    super();
+  }
+
+  async canActivate(url: RoutingDataSet, data?: any): Promise<void> {
+    this.route = url.intent.pathname;
+    if (data instanceof Node && !this.contains(data)) {
+      this.replaceChildren(data);
+    }
+  }
+
+  @addEventListener({ type: 'click', query: '#route-btn' })
+  onRouteBtnClick() {
+    this.name = 'Changed Root ' + new Date().getSeconds();
+    this.router.go('/hello/good');
+  }
+
+  // @onMutationSubscribe — fires when MutationObserver detects DOM changes
+  @onMutationSubscribe({ root: 'all' })
+  onDomChanged(mutations: MutationRecord[], observer: MutationObserver) {
+    console.log('DOM changed:', mutations);
+  }
+
+  @innerHtml({ useShadow: true })
+  render() {
+    return `
+      <style>
+        .container { padding: 10px; border: 1px solid #ccc; }
+      </style>
+      <div class="container">
+        <h3>Root Router</h3>
+        <p>Current Route: <strong>{{route}}</strong></p>
+        <p>Current name: <strong>{{name}}</strong></p>
+        <button id="route-btn">Go to /hello/good</button>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// ─── Bootstrap (Option A) ────────────────────────────────────────────────────
+// Export a config factory function and expose it on window.
+// <swc-app swc-get-application-config="applicationConfig(this)"> calls this.
+
+export const applicationConfig = (app: SwcAppInterface): SwcAttributeConfigType => ({
+  rootRouter: RootRouter,
+  path: '/hello/good',
+  window: w,
+});
+
+(w as any).applicationConfig = applicationConfig;
+```
+
+**`MyComponent.ts`** — separate file, receives `window` via factory
+```typescript
+import { elementDefine, innerHtml, state, attribute, onAfterConnected, addEventListener } from '@dooboostore/simple-web-component';
+import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
+import { Router as WebRouter } from '@dooboostore/core-web/routers/Router';
+
+// export default (w: Window) => {...} pattern
+// — keeps the file decoupled from the global window
+export default (w: Window) => {
+  @Sim
+  @elementDefine({ name: 'my-component', window: w })
+  class MyComponent extends HTMLElement {
+    @state route = 'zz';
+    @state @attribute name?: string | null;
+    @state showExtra = false;
+    @state showRealIf = true;
+
+    constructor(private router: WebRouter) {
+      super();
+    }
+
+    @innerHtml({ useShadow: true })
+    render() {
+      return `
+        <div style="padding: 10px; border: 1px solid #ccc;">
+          <h3>My Component</h3>
+          <p>Route: <strong>{{route}}</strong></p>
+          <p>Name: <strong>{{name}}</strong></p>
+          <button id="change-name-btn">Change Name</button>
+          <button id="toggle-extra-btn">Toggle IfChildren</button>
+          <button id="toggle-real-if-btn">Toggle Real If</button>
+
+          <!-- Inline event: this = button, $host = my-component -->
+          <button swc-on-click="console.log('host:', $host);">Log Host</button>
+
+          <!-- Two-way binding via inline event -->
+          <input swc-on-input="$host.name = event.target.value" value="{{name}}" />
+
+          <h4>IfChildren (wrapper stays)</h4>
+          <div is="swc-if-children-div" swc-value="{{showExtra}}">
+            <p style="color: blue;">Extra content!</p>
+          </div>
+
+          <h4>Real If (removed from DOM)</h4>
+          <div is="swc-if-div" swc-value="{{showRealIf}}" style="background: yellow; padding: 5px;"
+            swc-on-click="console.log(this, $host, $firstHost, 'clicked')"
+            swc-on-connected="console.log('connected', $host)">
+            <b>Toggle me to disappear from DOM.</b>
+          </div>
+        </div>
+      `;
+    }
+
+    @onAfterConnected
+    init() { console.log('MyComponent connected', this.name); }
+
+    @addEventListener({ type: 'click', query: '#change-name-btn' })
+    onChangeName() { this.name = 'Changed ' + new Date().getSeconds(); }
+
+    @addEventListener({ type: 'click', query: '#toggle-extra-btn' })
+    onToggleExtra() { this.showExtra = !this.showExtra; }
+
+    @addEventListener({ type: 'click', query: '#toggle-real-if-btn' })
+    onToggleRealIf() { this.showRealIf = !this.showRealIf; }
+  }
+
+  return MyComponent;
+};
+```
+
+---
+
+### Option B — Programmatic Bootstrap (`Swc` class)
+
+Use this when you need full control over the bootstrap lifecycle.
+
+```typescript
+import 'reflect-metadata';
+import { Swc } from '@dooboostore/simple-web-component';
+// ... same component definitions as Option A ...
+
+const swc = new Swc({ rootRouter: RootRouter, window: w });
+
+window.addEventListener('DOMContentLoaded', async () => {
+  document.body.appendChild(swc.run());
+  await swc.routing('/hello/good');
+});
+```
+
+---
+
+### Routing Architecture
+
+```
+RootRouter (extends HTMLDivElement)
+  └── implements RouterAction.CanActivate
+  └── replaceChildren(data)  ← routed component docks here (Light DOM)
+        │
+        └── MyRouter  (@Router path: '/hello')
+              └── implements RouterAction.CanActivate
+              └── #my-route.replaceChildren(data)
+                    ├── /good  → MyComponent
+                    └── /good2 → MyComponent2
+```
+
+Key points:
+- `canActivate(url, data)` receives the instantiated component node as `data`
+- `replaceChildren(data)` swaps the routed component atomically — no flicker
+- `RootRouter` can extend any built-in element (`HTMLDivElement`, `HTMLElement`, etc.)
+- The `@Router` decorator wires path matching; `canActivate` decides where to mount
+
+---
+
+## Complete Component Example
 
 @Sim
 @elementDefine({ name: 'page-home', window: w })

package/dist/cjs/config/config.js

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var config_exports = {};
+__export(config_exports, {
+  HTML_TAG_ENTRIES: () => HTML_TAG_ENTRIES
+});
+module.exports = __toCommonJS(config_exports);
+const HTML_TAG_ENTRIES = [
+  ["HTMLAnchorElement", "a"],
+  ["HTMLAreaElement", "area"],
+  ["HTMLAudioElement", "audio"],
+  ["HTMLBaseElement", "base"],
+  ["HTMLButtonElement", "button"],
+  ["HTMLCanvasElement", "canvas"],
+  ["HTMLDataElement", "data"],
+  ["HTMLDataListElement", "datalist"],
+  ["HTMLDetailsElement", "details"],
+  ["HTMLDialogElement", "dialog"],
+  ["HTMLDivElement", "div"],
+  ["HTMLDListElement", "dl"],
+  ["HTMLEmbedElement", "embed"],
+  ["HTMLFieldSetElement", "fieldset"],
+  ["HTMLFormElement", "form"],
+  ["HTMLHRElement", "hr"],
+  ["HTMLIFrameElement", "iframe"],
+  ["HTMLImageElement", "img"],
+  ["HTMLInputElement", "input"],
+  ["HTMLLabelElement", "label"],
+  ["HTMLLegendElement", "legend"],
+  ["HTMLLIElement", "li"],
+  ["HTMLLinkElement", "link"],
+  ["HTMLMapElement", "map"],
+  ["HTMLMetaElement", "meta"],
+  ["HTMLMeterElement", "meter"],
+  ["HTMLModElement", "del"],
+  ["HTMLObjectElement", "object"],
+  ["HTMLOListElement", "ol"],
+  ["HTMLOptGroupElement", "optgroup"],
+  ["HTMLOptionElement", "option"],
+  ["HTMLOutputElement", "output"],
+  ["HTMLParagraphElement", "p"],
+  ["HTMLParamElement", "param"],
+  ["HTMLPictureElement", "picture"],
+  ["HTMLPreElement", "pre"],
+  ["HTMLProgressElement", "progress"],
+  ["HTMLQuoteElement", "blockquote"],
+  ["HTMLScriptElement", "script"],
+  ["HTMLSelectElement", "select"],
+  ["HTMLSlotElement", "slot"],
+  ["HTMLSourceElement", "source"],
+  ["HTMLSpanElement", "span"],
+  ["HTMLStyleElement", "style"],
+  ["HTMLTableElement", "table"],
+  ["HTMLTableSectionElement", "tbody"],
+  ["HTMLTableCellElement", "td"],
+  ["HTMLTemplateElement", "template"],
+  ["HTMLTextAreaElement", "textarea"],
+  ["HTMLTimeElement", "time"],
+  ["HTMLTitleElement", "title"],
+  ["HTMLTableRowElement", "tr"],
+  ["HTMLTrackElement", "track"],
+  ["HTMLUListElement", "ul"],
+  ["HTMLVideoElement", "video"],
+  ["HTMLHeadingElement", "h1"],
+  ["HTMLBodyElement", "body"]
+];
+//# sourceMappingURL=config.js.map

package/dist/cjs/config/config.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/config.ts"],
+  "sourcesContent": ["export const HTML_TAG_ENTRIES: [string, string][] = [\n  ['HTMLAnchorElement', 'a'],\n  ['HTMLAreaElement', 'area'],\n  ['HTMLAudioElement', 'audio'],\n  ['HTMLBaseElement', 'base'],\n  ['HTMLButtonElement', 'button'],\n  ['HTMLCanvasElement', 'canvas'],\n  ['HTMLDataElement', 'data'],\n  ['HTMLDataListElement', 'datalist'],\n  ['HTMLDetailsElement', 'details'],\n  ['HTMLDialogElement', 'dialog'],\n  ['HTMLDivElement', 'div'],\n  ['HTMLDListElement', 'dl'],\n  ['HTMLEmbedElement', 'embed'],\n  ['HTMLFieldSetElement', 'fieldset'],\n  ['HTMLFormElement', 'form'],\n  ['HTMLHRElement', 'hr'],\n  ['HTMLIFrameElement', 'iframe'],\n  ['HTMLImageElement', 'img'],\n  ['HTMLInputElement', 'input'],\n  ['HTMLLabelElement', 'label'],\n  ['HTMLLegendElement', 'legend'],\n  ['HTMLLIElement', 'li'],\n  ['HTMLLinkElement', 'link'],\n  ['HTMLMapElement', 'map'],\n  ['HTMLMetaElement', 'meta'],\n  ['HTMLMeterElement', 'meter'],\n  ['HTMLModElement', 'del'],\n  ['HTMLObjectElement', 'object'],\n  ['HTMLOListElement', 'ol'],\n  ['HTMLOptGroupElement', 'optgroup'],\n  ['HTMLOptionElement', 'option'],\n  ['HTMLOutputElement', 'output'],\n  ['HTMLParagraphElement', 'p'],\n  ['HTMLParamElement', 'param'],\n  ['HTMLPictureElement', 'picture'],\n  ['HTMLPreElement', 'pre'],\n  ['HTMLProgressElement', 'progress'],\n  ['HTMLQuoteElement', 'blockquote'],\n  ['HTMLScriptElement', 'script'],\n  ['HTMLSelectElement', 'select'],\n  ['HTMLSlotElement', 'slot'],\n  ['HTMLSourceElement', 'source'],\n  ['HTMLSpanElement', 'span'],\n  ['HTMLStyleElement', 'style'],\n  ['HTMLTableElement', 'table'],\n  ['HTMLTableSectionElement', 'tbody'],\n  ['HTMLTableCellElement', 'td'],\n  ['HTMLTemplateElement', 'template'],\n  ['HTMLTextAreaElement', 'textarea'],\n  ['HTMLTimeElement', 'time'],\n  ['HTMLTitleElement', 'title'],\n  ['HTMLTableRowElement', 'tr'],\n  ['HTMLTrackElement', 'track'],\n  ['HTMLUListElement', 'ul'],\n  ['HTMLVideoElement', 'video'],\n  ['HTMLHeadingElement', 'h1'],\n  ['HTMLBodyElement', 'body']\n];\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,mBAAuC;AAAA,EAClD,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,sBAAsB,SAAS;AAAA,EAChC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,iBAAiB,IAAI;AAAA,EACtB,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,oBAAoB,KAAK;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,iBAAiB,IAAI;AAAA,EACtB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,wBAAwB,GAAG;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,sBAAsB,SAAS;AAAA,EAChC,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,oBAAoB,YAAY;AAAA,EACjC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,2BAA2B,OAAO;AAAA,EACnC,CAAC,wBAAwB,IAAI;AAAA,EAC7B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,uBAAuB,IAAI;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,sBAAsB,IAAI;AAAA,EAC3B,CAAC,mBAAmB,MAAM;AAC5B;",
+  "names": []
+}

package/dist/cjs/decorators/elementDefine.js

@@ -33,71 +33,14 @@ var import_attribute = require("./attribute");
 var import_state = require("./state");
 var import_emitCustomEvent = require("./emitCustomEvent");
 var import_Utils = require("../utils/Utils");
+var import_config = require("../config/config");
 const ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
 const STATE_CHANGE_EVENT = "swc:state-change";
-const HTML_TAG_ENTRIES = [
-  ["HTMLAnchorElement", "a"],
-  ["HTMLAreaElement", "area"],
-  ["HTMLAudioElement", "audio"],
-  ["HTMLBaseElement", "base"],
-  ["HTMLButtonElement", "button"],
-  ["HTMLCanvasElement", "canvas"],
-  ["HTMLDataElement", "data"],
-  ["HTMLDataListElement", "datalist"],
-  ["HTMLDetailsElement", "details"],
-  ["HTMLDialogElement", "dialog"],
-  ["HTMLDivElement", "div"],
-  ["HTMLDListElement", "dl"],
-  ["HTMLEmbedElement", "embed"],
-  ["HTMLFieldSetElement", "fieldset"],
-  ["HTMLFormElement", "form"],
-  ["HTMLHRElement", "hr"],
-  ["HTMLIFrameElement", "iframe"],
-  ["HTMLImageElement", "img"],
-  ["HTMLInputElement", "input"],
-  ["HTMLLabelElement", "label"],
-  ["HTMLLegendElement", "legend"],
-  ["HTMLLIElement", "li"],
-  ["HTMLLinkElement", "link"],
-  ["HTMLMapElement", "map"],
-  ["HTMLMetaElement", "meta"],
-  ["HTMLMeterElement", "meter"],
-  ["HTMLModElement", "del"],
-  ["HTMLObjectElement", "object"],
-  ["HTMLOListElement", "ol"],
-  ["HTMLOptGroupElement", "optgroup"],
-  ["HTMLOptionElement", "option"],
-  ["HTMLOutputElement", "output"],
-  ["HTMLParagraphElement", "p"],
-  ["HTMLParamElement", "param"],
-  ["HTMLPictureElement", "picture"],
-  ["HTMLPreElement", "pre"],
-  ["HTMLProgressElement", "progress"],
-  ["HTMLQuoteElement", "blockquote"],
-  ["HTMLScriptElement", "script"],
-  ["HTMLSelectElement", "select"],
-  ["HTMLSlotElement", "slot"],
-  ["HTMLSourceElement", "source"],
-  ["HTMLSpanElement", "span"],
-  ["HTMLStyleElement", "style"],
-  ["HTMLTableElement", "table"],
-  ["HTMLTableSectionElement", "tbody"],
-  ["HTMLTableCellElement", "td"],
-  ["HTMLTemplateElement", "template"],
-  ["HTMLTextAreaElement", "textarea"],
-  ["HTMLTimeElement", "time"],
-  ["HTMLTitleElement", "title"],
-  ["HTMLTableRowElement", "tr"],
-  ["HTMLTrackElement", "track"],
-  ["HTMLUListElement", "ul"],
-  ["HTMLVideoElement", "video"],
-  ["HTMLHeadingElement", "h1"]
-];
 function buildEnv(configWindow) {
   const win = configWindow || (typeof window !== "undefined" ? window : void 0);
   const doc = win?.document;
   const builtInTagMap = /* @__PURE__ */ new Map();
-  for (const [cls, tag] of HTML_TAG_ENTRIES) {
+  for (const [cls, tag] of import_config.HTML_TAG_ENTRIES) {
     if (win?.[cls]) builtInTagMap.set(win[cls], tag);
   }
   const domHelpers = {
@@ -112,16 +55,18 @@ function buildEnv(configWindow) {
 const elementDefine = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
   const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
+  config.window = win;
   const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS);
   const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map((k) => SWC_DOM_HELPERS[k]);
   let extendsTagName = config.extends;
   if (!extendsTagName) {
-    let proto = Object.getPrototypeOf(constructor);
+    let proto = constructor;
     while (proto && proto !== HTMLElement && proto !== Function.prototype) {
       extendsTagName = BUILT_IN_TAG_MAP.get(proto);
       if (extendsTagName) break;
       proto = Object.getPrototypeOf(proto);
     }
+    config.extends = extendsTagName;
   }
   const attributePropsList = (0, import_attribute.getAttributeMetadataList)(constructor);
   const emitCustomEventList = (0, import_emitCustomEvent.getEmitCustomEventMetadataList)(constructor);
@@ -732,12 +677,13 @@ const elementDefine = (inConfig) => (constructor) => {
       this._executeSwcScript("swc-on-attribute-changed", { $new: newValue, $old: oldValue, $name: name });
     }
   };
+  import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
+  import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, constructor);
   const registry = config.customElementRegistry || (typeof win !== "undefined" ? win.customElements : void 0);
   if (registry && !registry.get(config.name)) {
     const options = config.extends ? { extends: config.extends } : void 0;
     registry.define(config.name, NewClass, options);
   }
-  import_ReflectUtils.ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
   return NewClass;
 };
 const getElementConfig = (target) => {