fix(build): tsconfig jsx preserve->react

This probably broke when TypeScript upgraded to v5.

.gitignore

@@ -1,8 +1,5 @@
+# runtime
 node_modules
 
-package-lock.lock
-yarn.lock
-.pnpm-debug.log
-yarn-error.log
-
-coverage
+# application
+test/demo/index.js

README.md

@@ -41,7 +41,7 @@ Using jsDelivr CDN:
 With TypeScript, add these options in your `tsconfig`
 
 ```json
-    "jsx":"preserve",
+    "jsx":"react",
     "jsxFactory": "VSX.createElement",
     "jsxFragmentFactory": "VSX.createFragment",
 ```

dist/index.cjs

@@ -1,2 +1,180 @@
-var E=Object.create;var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var A=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},f=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of S(e))!w.call(t,r)&&r!==n&&m(t,r,{get:()=>e[r],enumerable:!(o=b(e,r))||o.enumerable});return t};var x=(t,e,n)=>(n=t!=null?E(v(t)):{},f(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),k=t=>f(m({},"__esModule",{value:!0}),t);var B={};A(B,{createEffect:()=>c,createState:()=>p,default:()=>T});module.exports=k(B);var C=(t,e)=>{window.onload=()=>{if(Array.isArray(e)&&e.length===0)t();else for(let n of e){let o=document.getElementById(n().key),r={attributes:!0,childList:!0,subtree:!0},s=i=>{for(let u of i)t()};new MutationObserver(s).observe(o,r)}}},c=C;var F=(t,e,...n)=>{if(typeof t!="string"&&Array.isArray(t())){let o=new DocumentFragment;return o.append(...n),o}else{if(typeof t!="string"&&!Array.isArray(t()))return t();if(typeof t=="string"){let o=document.createElement(t);return e!==null&&Object.entries(e).forEach(([r,s])=>{if(r.startsWith("on")&&r.toLowerCase()in window&&o.addEventListener(r.toLowerCase().substring(2),s),r==="style"){let a="";for(let i in s)a+=`${i.replace(/([A-Z])/g,u=>`-${u[0].toLowerCase()}`)}: ${s[i]};
-`;o.setAttribute(r,a)}else o.setAttribute(r,s.toString())}),n.forEach(r=>l(o,r)),o}else return document.createElement("div")}},l=(t,e)=>{Array.isArray(e)?e.forEach(n=>l(t,n)):typeof e=="boolean"?t.appendChild(document.createElement(e.toString())):typeof e=="string"?t.appendChild(document.createTextNode(e)):typeof e=="number"?t.appendChild(document.createTextNode(e.toString())):typeof e=="function"?(t.id=e().key,l(t,e().value)):(e==null?void 0:e.nodeType)===1&&t.appendChild(e)},d=F;var D=(t,...e)=>e,g=D;var y=x(require("uniqid"),1),L=t=>{let e=typeof t,n=(0,y.default)();return[()=>{var s;if(document.getElementById(n)===null)return{key:n,value:t};{let a=(s=document.getElementById(n))==null?void 0:s.innerText;switch(e){case"boolean":a=a==="true";break;case"number":a=Number(a);break;case"object":a==="null"&&(a=null);break;case"string":a=String(a);break;default:break}return{key:n,value:a}}},s=>{let a=document.getElementById(n);if(a===null)throw new Error(`Element with id ${n} does not exist.`);a.innerText=String(s)}]},p=L;var T={createElement:d,createFragment:g};0&&(module.exports={createEffect,createState});
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createEffect: () => createEffect_default,
+  createState: () => createState_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/api/state/createEffect.ts
+var createEffect = (fn, deps) => {
+  window.onload = () => {
+    if (Array.isArray(deps) && deps.length === 0) {
+      fn();
+    } else {
+      for (const dep of deps) {
+        const target = document.getElementById(dep().key);
+        const config = { attributes: true, childList: true, subtree: true };
+        const callback = (mutations) => {
+          for (const mutation of mutations) {
+            fn();
+          }
+        };
+        const observer = new MutationObserver(callback);
+        observer.observe(target, config);
+      }
+    }
+  };
+};
+var createEffect_default = createEffect;
+
+// src/api/runtime/createElement.ts
+var createElement = (tag, props, ...children) => {
+  if (typeof tag !== "string" && Array.isArray(tag())) {
+    const fragment = new DocumentFragment();
+    fragment.append(...children);
+    return fragment;
+  } else if (typeof tag !== "string" && !Array.isArray(tag())) {
+    const fn = tag;
+    return fn();
+  } else if (typeof tag === "string") {
+    const element = document.createElement(tag);
+    if (props !== null) {
+      Object.entries(props).forEach(([key, value]) => {
+        if (key.startsWith("on") && key.toLowerCase() in window) {
+          element.addEventListener(key.toLowerCase().substring(2), value);
+        }
+        if (key === "style") {
+          let style = "";
+          for (const obj in value) {
+            style += `${obj.replace(
+              /([A-Z])/g,
+              (g) => `-${g[0].toLowerCase()}`
+            )}: ${value[obj]};
+`;
+          }
+          element.setAttribute(key, style);
+        } else {
+          element.setAttribute(key, value.toString());
+        }
+      });
+    }
+    children.forEach((child) => appendChild(element, child));
+    return element;
+  } else {
+    const element = document.createElement("div");
+    return element;
+  }
+};
+var appendChild = (parent, child) => {
+  if (Array.isArray(child)) {
+    child.forEach((nestedChild) => appendChild(parent, nestedChild));
+  } else if (typeof child === "boolean") {
+    parent.appendChild(document.createElement(child.toString()));
+  } else if (typeof child === "string") {
+    parent.appendChild(document.createTextNode(child));
+  } else if (typeof child === "number") {
+    parent.appendChild(document.createTextNode(child.toString()));
+  } else if (typeof child === "function") {
+    parent.id = child().key;
+    appendChild(parent, child().value);
+  } else if (child?.nodeType === 1) {
+    parent.appendChild(child);
+  }
+};
+var createElement_default = createElement;
+
+// src/api/runtime/createFragment.ts
+var createFragment = (_, ...children) => {
+  return children;
+};
+var createFragment_default = createFragment;
+
+// src/api/state/createState.ts
+var import_uniqid = __toESM(require("uniqid"), 1);
+var createState = (initialValue) => {
+  const type = typeof initialValue;
+  const id = (0, import_uniqid.default)();
+  const get = () => {
+    if (document.getElementById(id) === null) {
+      return {
+        key: id,
+        value: initialValue
+      };
+    } else {
+      let typedValue = document.getElementById(id)?.innerText;
+      switch (type) {
+        case "boolean":
+          typedValue = typedValue === "true";
+          break;
+        case "number":
+          typedValue = Number(typedValue);
+          break;
+        case "object":
+          if (typedValue === "null") {
+            typedValue = null;
+          }
+          break;
+        case "string":
+          typedValue = String(typedValue);
+          break;
+        default:
+          break;
+      }
+      return {
+        key: id,
+        value: typedValue
+      };
+    }
+  };
+  const set = (updatedValue) => {
+    const element = document.getElementById(id);
+    if (element === null) {
+      throw new Error(`Element with id ${id} does not exist.`);
+    } else {
+      element.innerText = String(updatedValue);
+    }
+  };
+  return [get, set];
+};
+var createState_default = createState;
+
+// src/index.ts
+var src_default = {
+  createElement: createElement_default,
+  createFragment: createFragment_default
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createEffect,
+  createState
+});

dist/index.d.ts

@@ -1,4 +1,4 @@
-declare type State = {
+type State = {
     key: string;
     value?: null | boolean | string | number | (() => State) | Element | Element[];
 };

dist/index.js

@@ -1,2 +1,143 @@
-var c=(t,e)=>{window.onload=()=>{if(Array.isArray(e)&&e.length===0)t();else for(let r of e){let o=document.getElementById(r().key),a={attributes:!0,childList:!0,subtree:!0},s=i=>{for(let l of i)t()};new MutationObserver(s).observe(o,a)}}},d=c;var g=(t,e,...r)=>{if(typeof t!="string"&&Array.isArray(t())){let o=new DocumentFragment;return o.append(...r),o}else{if(typeof t!="string"&&!Array.isArray(t()))return t();if(typeof t=="string"){let o=document.createElement(t);return e!==null&&Object.entries(e).forEach(([a,s])=>{if(a.startsWith("on")&&a.toLowerCase()in window&&o.addEventListener(a.toLowerCase().substring(2),s),a==="style"){let n="";for(let i in s)n+=`${i.replace(/([A-Z])/g,l=>`-${l[0].toLowerCase()}`)}: ${s[i]};
-`;o.setAttribute(a,n)}else o.setAttribute(a,s.toString())}),r.forEach(a=>m(o,a)),o}else return document.createElement("div")}},m=(t,e)=>{Array.isArray(e)?e.forEach(r=>m(t,r)):typeof e=="boolean"?t.appendChild(document.createElement(e.toString())):typeof e=="string"?t.appendChild(document.createTextNode(e)):typeof e=="number"?t.appendChild(document.createTextNode(e.toString())):typeof e=="function"?(t.id=e().key,m(t,e().value)):(e==null?void 0:e.nodeType)===1&&t.appendChild(e)},u=g;var y=(t,...e)=>e,f=y;import p from"uniqid";var E=t=>{let e=typeof t,r=p();return[()=>{var s;if(document.getElementById(r)===null)return{key:r,value:t};{let n=(s=document.getElementById(r))==null?void 0:s.innerText;switch(e){case"boolean":n=n==="true";break;case"number":n=Number(n);break;case"object":n==="null"&&(n=null);break;case"string":n=String(n);break;default:break}return{key:r,value:n}}},s=>{let n=document.getElementById(r);if(n===null)throw new Error(`Element with id ${r} does not exist.`);n.innerText=String(s)}]},b=E;var L={createElement:u,createFragment:f};export{d as createEffect,b as createState,L as default};
+// src/api/state/createEffect.ts
+var createEffect = (fn, deps) => {
+  window.onload = () => {
+    if (Array.isArray(deps) && deps.length === 0) {
+      fn();
+    } else {
+      for (const dep of deps) {
+        const target = document.getElementById(dep().key);
+        const config = { attributes: true, childList: true, subtree: true };
+        const callback = (mutations) => {
+          for (const mutation of mutations) {
+            fn();
+          }
+        };
+        const observer = new MutationObserver(callback);
+        observer.observe(target, config);
+      }
+    }
+  };
+};
+var createEffect_default = createEffect;
+
+// src/api/runtime/createElement.ts
+var createElement = (tag, props, ...children) => {
+  if (typeof tag !== "string" && Array.isArray(tag())) {
+    const fragment = new DocumentFragment();
+    fragment.append(...children);
+    return fragment;
+  } else if (typeof tag !== "string" && !Array.isArray(tag())) {
+    const fn = tag;
+    return fn();
+  } else if (typeof tag === "string") {
+    const element = document.createElement(tag);
+    if (props !== null) {
+      Object.entries(props).forEach(([key, value]) => {
+        if (key.startsWith("on") && key.toLowerCase() in window) {
+          element.addEventListener(key.toLowerCase().substring(2), value);
+        }
+        if (key === "style") {
+          let style = "";
+          for (const obj in value) {
+            style += `${obj.replace(
+              /([A-Z])/g,
+              (g) => `-${g[0].toLowerCase()}`
+            )}: ${value[obj]};
+`;
+          }
+          element.setAttribute(key, style);
+        } else {
+          element.setAttribute(key, value.toString());
+        }
+      });
+    }
+    children.forEach((child) => appendChild(element, child));
+    return element;
+  } else {
+    const element = document.createElement("div");
+    return element;
+  }
+};
+var appendChild = (parent, child) => {
+  if (Array.isArray(child)) {
+    child.forEach((nestedChild) => appendChild(parent, nestedChild));
+  } else if (typeof child === "boolean") {
+    parent.appendChild(document.createElement(child.toString()));
+  } else if (typeof child === "string") {
+    parent.appendChild(document.createTextNode(child));
+  } else if (typeof child === "number") {
+    parent.appendChild(document.createTextNode(child.toString()));
+  } else if (typeof child === "function") {
+    parent.id = child().key;
+    appendChild(parent, child().value);
+  } else if (child?.nodeType === 1) {
+    parent.appendChild(child);
+  }
+};
+var createElement_default = createElement;
+
+// src/api/runtime/createFragment.ts
+var createFragment = (_, ...children) => {
+  return children;
+};
+var createFragment_default = createFragment;
+
+// src/api/state/createState.ts
+import uniqid from "uniqid";
+var createState = (initialValue) => {
+  const type = typeof initialValue;
+  const id = uniqid();
+  const get = () => {
+    if (document.getElementById(id) === null) {
+      return {
+        key: id,
+        value: initialValue
+      };
+    } else {
+      let typedValue = document.getElementById(id)?.innerText;
+      switch (type) {
+        case "boolean":
+          typedValue = typedValue === "true";
+          break;
+        case "number":
+          typedValue = Number(typedValue);
+          break;
+        case "object":
+          if (typedValue === "null") {
+            typedValue = null;
+          }
+          break;
+        case "string":
+          typedValue = String(typedValue);
+          break;
+        default:
+          break;
+      }
+      return {
+        key: id,
+        value: typedValue
+      };
+    }
+  };
+  const set = (updatedValue) => {
+    const element = document.getElementById(id);
+    if (element === null) {
+      throw new Error(`Element with id ${id} does not exist.`);
+    } else {
+      element.innerText = String(updatedValue);
+    }
+  };
+  return [get, set];
+};
+var createState_default = createState;
+
+// src/index.ts
+var src_default = {
+  createElement: createElement_default,
+  createFragment: createFragment_default
+};
+export {
+  createEffect_default as createEffect,
+  createState_default as createState,
+  src_default as default
+};