fix(Root): Fix custom element redefining due to the constructor usage

dist/cjs/index.js

@@ -1,7 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.load = exports.launch = exports.Router = exports.Route = exports.FunctionalComponent = exports.useEffect = exports.useState = exports.LightComponent = exports.Component = void 0;
-const reactToCSS = require('react-style-object-to-css');
+const react_style_object_to_css_1 = __importDefault(require("react-style-object-to-css"));
 function processGenerator(generator) {
     let processedGenerator = generator.replace(/<\/?[^>]+>/g, match => {
         let element = match.slice(0, -1);
@@ -31,7 +34,7 @@ function parseCSS(cssString) {
 }
 function createInlineStyle(cssString) {
     if (typeof cssString !== 'string')
-        return reactToCSS(cssString).trim();
+        return (0, react_style_object_to_css_1.default)(cssString).trim();
     const styleObj = parseCSS(cssString);
     let inlineStyle = '';
     for (const property in styleObj) {
@@ -245,7 +248,7 @@ function launch(component, name) {
         console.warn(`Custom element ${vanillaElement(name)} already defined`);
         return;
     }
-    customElements.define(vanillaElement(name), component.constructor);
+    customElements.define(vanillaElement(name), component);
 }
 exports.launch = launch;
 function createPageComponent(url, name) {
@@ -265,10 +268,10 @@ function load(func, name) {
                 super(func);
             }
         }
-        launch(new X, name);
+        launch(X, name);
     }
     return launch(func, name);
 }
 exports.load = load;
-load(new Route, 'Route');
-load(new Router, 'Router');
+load(Route, 'Route');
+load(Router, 'Router');

dist/esm/index.js

@@ -1,4 +1,4 @@
-const reactToCSS = require('react-style-object-to-css');
+import reactToCSS from 'react-style-object-to-css';
 function processGenerator(generator) {
     let processedGenerator = generator.replace(/<\/?[^>]+>/g, match => {
         let element = match.slice(0, -1);
@@ -235,7 +235,7 @@ export function launch(component, name) {
         console.warn(`Custom element ${vanillaElement(name)} already defined`);
         return;
     }
-    customElements.define(vanillaElement(name), component.constructor);
+    customElements.define(vanillaElement(name), component);
 }
 function createPageComponent(url, name) {
     fetch(url)
@@ -254,9 +254,9 @@ export function load(func, name) {
                 super(func);
             }
         }
-        launch(new X, name);
+        launch(X, name);
     }
     return launch(func, name);
 }
-load(new Route, 'Route');
-load(new Router, 'Router');
+load(Route, 'Route');
+load(Router, 'Router');

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "tsc": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
     "build": "npm run tsc && vitest run",
-    "commit": "npm run build && git add . && sui-mono commit",
+    "commit": "npm run build && git add . && sui-mono commit && git push",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "prepublishOnly": "npm run build"

src/index.ts

@@ -1,4 +1,4 @@
-const reactToCSS = require('react-style-object-to-css');
+import reactToCSS from 'react-style-object-to-css';
 
 type HTMLGenerator = ((component: EmmyComponent) => string) | ((component?: EmmyComponent) => string) | (() => string);
 type Callback = ((component: EmmyComponent) => void) | ((component?: EmmyComponent) => void) | (() => void);
@@ -303,7 +303,7 @@ export function launch (component: ClassComponent | FunctionalComponent, name: s
         console.warn(`Custom element ${vanillaElement(name)} already defined`);
         return;
     }
-    customElements.define(vanillaElement(name), component.constructor as CustomElementConstructor);
+    customElements.define(vanillaElement(name), component as unknown as CustomElementConstructor);
 }
 
 function createPageComponent (url: string, name: string) {
@@ -325,11 +325,11 @@ export function load (func: ComponentType, name: string) {
                 super(func as HTMLGenerator);
             }
         }
-        launch(new X, name);
+        launch(X as unknown as FunctionalComponent, name);
     }
 
     return launch(func as ClassComponent, name);
 }
 
-load(new Route, 'Route');
-load(new Router, 'Router');
+load(Route as unknown as ComponentType, 'Route');
+load(Router as unknown as ComponentType, 'Router');