Merge pull request #243 from cqh963852/refactor/van_jsx

refactor: update van_jsx

Author: Tao-VanJS

addons/van_jsx/package.json

@@ -1,13 +1,14 @@
 {
   "name": "vanjs-jsx",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
-  "types": "./src/index.d.ts",
   "description": "jsx-runtime for vanjs",
+  "types": "./src/index.d.ts",
   "exports": {
     ".": {
       "require": "./src/index.js",
-      "import": "./src/index.js"
+      "import": "./src/index.js",
+      "types": "./src/index.d.ts"
     },
     "./jsx-runtime": {
       "require": "./src/jsx-runtime.js",

addons/van_jsx/src/createElement.d.ts

@@ -0,0 +1,13 @@
+import * as CSS from "csstype";
+import { State } from "vanjs-core";
+import { Primitive } from "./type";
+export type VanElement = Element;
+export type JSXElementType<P> = (props: P) => VanNode | VanElement;
+export type PrimitiveChild = Primitive | State<Primitive>;
+export type VanNode = VanElement | PrimitiveChild | VanNode[] | (() => VanNode) | null;
+declare const createElement: (jsxTag: string | Function, { children, style, ref, ...props }: {
+    children?: VanNode | undefined;
+    style?: CSS.Properties<0 | (string & {}), string & {}> | (() => CSS.Properties) | undefined;
+    ref?: State<Element> | undefined;
+}) => any;
+export default createElement;

addons/van_jsx/src/createElement.js

@@ -0,0 +1,33 @@
+import van from "vanjs-core";
+import { setAttribute } from "./hyper";
+const createElement = (jsxTag, { children, style, ref, ...props }) => {
+    if (typeof jsxTag === "string") {
+        // TODO VanNode to VanElement
+        const ele = van.tags[jsxTag](children);
+        for (const [key, value] of Object.entries(props ?? {})) {
+            // Auto Update Attribute
+            if (typeof value === "function" && !key.startsWith("on")) {
+                van.derive(() => {
+                    let attr = value();
+                    setAttribute(ele, key, attr);
+                });
+                continue;
+            }
+            // Add Event Listener
+            if (typeof value === "function" && key.startsWith("on")) {
+                ele.addEventListener(key.replace("on", "").toLowerCase(), value);
+                continue;
+            }
+            setAttribute(ele, key, value);
+            continue;
+        }
+        if (ref != null) {
+            ref.val = ele;
+        }
+        return ele;
+    }
+    if (typeof jsxTag === "function") {
+        return jsxTag({ ...props, ref, style, children });
+    }
+};
+export default createElement;

addons/van_jsx/src/hyper.d.ts

@@ -0,0 +1,3 @@
+import * as CSS from "csstype";
+export declare const styleToString: (style: CSS.Properties) => string;
+export declare const setAttribute: (element: Element, key: string, value: unknown) => void;

addons/van_jsx/src/hyper.js

@@ -0,0 +1,37 @@
+export const styleToString = (style) => {
+    return Object.entries(style).reduce((acc, key) => acc +
+        key[0]
+            .split(/(?=[A-Z])/)
+            .join("-")
+            .toLowerCase() +
+        ":" +
+        key[1] +
+        ";", "");
+};
+export const setAttribute = (element, key, value) => {
+    // Convert Style Object
+    if (key === "style") {
+        const attr = styleToString(value);
+        element.setAttribute(key, attr);
+        return;
+    }
+    if (typeof value === "number") {
+        if (key === "tabIndex") {
+            element.setAttribute("tabindex", value.toString());
+            return;
+        }
+    }
+    // Set String Attribute
+    if (typeof value === "string") {
+        if (key === "className") {
+            element.setAttribute("class", value);
+            return;
+        }
+        if (key === "htmlFor") {
+            element.setAttribute("for", value);
+            return;
+        }
+        element.setAttribute(key, value);
+        return;
+    }
+};

addons/van_jsx/src/index.d.ts

@@ -1,7 +1,6 @@
 import { State, StateView } from "vanjs-core";
-
 export declare function createState<T>(initialValue: T): State<T>;
 export declare function createState<T>(initialValue: T | null): StateView<T>;
 export declare function createState<T = undefined>(): State<T | undefined>;
-export * from "./jsx-runtime";
+export { default as createElement, default as jsx, default as jsxDEV, } from "./createElement";
 export * from "./type";

addons/van_jsx/src/index.js

@@ -1,7 +1,6 @@
 import van from "vanjs-core";
-
 export function createState(v) {
-  return van.state(v);
+    return van.state(v);
 }
-
-export * from "./jsx-runtime";
+export { default as createElement, default as jsx, default as jsxDEV, } from "./createElement";
+export * from "./type";

addons/van_jsx/src/jsx-dev-runtime.d.ts

@@ -1 +1,2 @@
+export * from "./index";
 export * from "./jsx-runtime";

addons/van_jsx/src/jsx-dev-runtime.js

@@ -1 +1,2 @@
+export * from "./index";
 export * from "./jsx-runtime";

addons/van_jsx/src/jsx-internal.d.ts

@@ -1,21 +1,19 @@
-import * as CSS from "csstype";
-import { State, ChildDom } from "vanjs-core";
-
-export declare const jsx: (
-  jsxTag: string | Function,
-  {
-    children,
-    style,
-    ref,
-    ...props
-  }: {
-    children?: ChildDom;
-    style?:
-      | CSS.Properties<0 | (string & {}), string & {}>
-      | (() => CSS.Properties)
-      | undefined;
-    ref?: State<Element> | undefined;
-  }
-) => any;
-export { jsx as jsxDEV, jsx as jsxs };
-export type { JSX } from "./jsx-internal";
+import { JSXElementType, VanElement } from "./createElement";
+import { InnerElement, Key, TagOption } from "./type";
+export declare namespace JSX {
+    type ElementType = string | JSXElementType<any>;
+    interface ElementAttributesProperty {
+        props: object;
+    }
+    interface ElementChildrenAttribute {
+        children: object;
+    }
+    interface Element extends VanElement {
+    }
+    interface IntrinsicAttributes {
+        key?: Key;
+    }
+    type IntrinsicElements = {
+        [K in keyof InnerElement]: TagOption<K>;
+    };
+}