From ea5268c871b127511a45b0bc1f7eb971e084ecf2 Mon Sep 17 00:00:00 2001
From: CoolElectronics <me@coolelectronics.me>
Date: Tue, 23 Jan 2024 22:29:50 -0500
Subject: [PATCH] fix alicecss speed, root element, misc refactors

---
 .npmignore   |  3 ++-
 AliceJS.d.ts | 11 +++++++++++
 AliceJS.js   | 26 +++++++++++++++++++-------
 package.json | 12 ++++--------
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/.npmignore b/.npmignore
index d682083..408d02a 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,3 +1,4 @@
 examples/
 node_modules
-a.html
+index.html
+a.js
diff --git a/AliceJS.d.ts b/AliceJS.d.ts
index 4a3b00e..0cdacdd 100644
--- a/AliceJS.d.ts
+++ b/AliceJS.d.ts
@@ -22,3 +22,14 @@ declare function handle<T>(references: AliceJSReferenceSink<T>, callback: (value
 
 declare function css(strings: TemplateStringsArray, ...values: any): string;
 declare var styled: { new: typeof css };
+
+type DLCSS = string;
+
+interface Element {
+  $: DLComponent<any>
+}
+
+type DLComponent<T> = {
+  css: DLCSS,
+  root: Element,
+} & T;
diff --git a/AliceJS.js b/AliceJS.js
index 9fcd305..d3878a2 100644
--- a/AliceJS.js
+++ b/AliceJS.js
@@ -130,7 +130,7 @@ export function useValue(references) {
 // Actual JSX factory. Responsible for creating the HTML elements and all of the *reactive* syntactic sugar
 export function h(type, props, ...children) {
   if (typeof type === "function") {
-    let newthis = stateful({});
+    let newthis = stateful(Object.create(type.prototype));
 
     for (const name in props) {
       const references = props[name];
@@ -163,12 +163,17 @@ export function h(type, props, ...children) {
         delete props[name];
       }
     }
+    Object.assign(newthis, props);
+
     let slot = [];
     for (const child of children) {
       JSXAddChild(child, slot.push.bind(slot));
     }
 
-    return type.apply(newthis, [props, slot]);
+    let elm = type.apply(newthis, [slot]);
+    elm.$ = newthis;
+    newthis.root = elm;
+    return elm;
   }
 
 
@@ -359,7 +364,13 @@ function JSXAddChild(child, cb) {
         appended.forEach(n => n.remove());
         appended = JSXAddChild(val, cb);
       } else if (appended.length > 0) {
-        appended[0].replaceWith((appended = JSXAddChild(val, cb))[0]);
+        let old = appended[0];
+        appended = JSXAddChild(val, cb);
+        if (appended[0]) {
+          old.replaceWith(appended[0])
+        } else {
+          old.remove();
+        }
       } else {
         appended = JSXAddChild(val, cb);
       }
@@ -421,14 +432,15 @@ function JSXAddAttributes(elm, name, prop) {
 
   elm.setAttribute(name, prop);
 }
+
+const virtualDoc = document.implementation.createHTMLDocument("");
+const virtualStyleElement = document.createElement("style");
+virtualDoc.body.appendChild(virtualStyleElement);
+
 function parse_css(uid, css) {
   let cssParsed = "";
 
-  const virtualDoc = document.implementation.createHTMLDocument("");
-  const virtualStyleElement = document.createElement("style");
-
   virtualStyleElement.textContent = css;
-  virtualDoc.body.appendChild(virtualStyleElement);
 
   //@ts-ignore
   for (const rule of virtualStyleElement.sheet.cssRules) {
diff --git a/package.json b/package.json
index 47b05a8..7cd9460 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mercuryworkshop/alicejs",
-  "version": "1.1.3",
+  "version": "1.3.1",
   "description": "A utilitarian HTML rendering library",
   "scripts": {
     "build": "esbuild --minify --bundle AliceJS.js --outfile=index.js && tsc",
@@ -10,13 +10,9 @@
   "author": "MercuryWorkshop",
   "repository": "https://github.com/MercuryWorkshop/AliceJS",
   "license": "MIT",
-  "exports": {
-    ".": {
-      "browser": "./index.js",
-      "node": "./index.js",
-      "types":"./AliceJS.d.ts"
-    }
-  },
+  "browser": "./index.js",
+  "node": "./index.js",
+  "types":"./AliceJS.d.ts",
   "devDependencies": {
     "esbuild": "^0.19.11",
     "typescript": "^5.3.3"