feat: add reference option

Author: danielpza

Diff for: global.d.ts

@@ -2,13 +2,16 @@ type Assign<T, K> = Pick<T, Exclude<keyof T, keyof K>> & K;
 
 declare namespace JSX {
   type Element = Node;
+  type Reference<T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = {
+    value?: HTMLElementTagNameMap[T];
+  };
   interface ElementChildrenAttribute {
     children: any;
   }
   type IntrinsicElements = {
     [id in keyof HTMLElementTagNameMap]: Assign<
       Partial<HTMLElementTagNameMap[id]>,
-      { children?: any }
+      { children?: any; ref?: Reference<id> }
     >
   };
 }

Diff for: index.ts

@@ -1,22 +1,32 @@
 /// <reference path="global.d.ts" />
 
-export type Properties<P> = P & { children?: any };
+export type Properties<P> = P & { children?: any; ref?: JSX.Reference };
 export interface FunctionElement<P> {
   (props: Properties<P>): JSX.Element;
 }
 
-export function createElement<T extends keyof HTMLElementTagNameMap, L>(
+export function createElement<T extends keyof JSX.IntrinsicElements, L>(
   name: T | FunctionElement<L>,
-  props: HTMLElementTagNameMap[T] | L,
+  props: (JSX.IntrinsicElements[T]) | L,
   ...children: any[]
 ) {
   if (typeof name === "string") {
+    const { ref, ...rest } = (props || {}) as JSX.IntrinsicElements[T];
     const el = document.createElement(name);
-    Object.assign(el, props);
+    Object.assign(el, rest);
     el.append(...flat(children));
+    if (ref) {
+      ref.value = el;
+    }
+    return el;
+  } else {
+    const { ref, ...rest } = (props || {}) as L & { ref?: any };
+    const el = name({ ...(rest as L), children });
+    if (ref) {
+      ref.value = el;
+    }
     return el;
   }
-  return name({ ...(props as L), children });
 }
 
 function flat(arr: any[]): any[] {

Diff for: package.json

@@ -13,7 +13,7 @@
     "clean": "rm -f index.js index.d.ts test.js test.d.ts",
     "build": "tsc",
     "release": "standard-version",
-    "prepublish": "npm test && npm run build",
+    "prepublish": "npm run clean && npm test && npm run build",
     "test": "jest"
   },
   "jest": {

Diff for: test.tsx

@@ -15,18 +15,25 @@ global.document = {
 };
 
 test("jsx", () => {
-  expect(<div>hello</div>).toMatchObject({
+  const ref: JSX.Reference<"h1"> = {};
+  expect(
+    <div>
+      <h1 ref={ref}>hello</h1>
+    </div>
+  ).toMatchObject({
     name: "div",
-    children: ["hello"]
+    children: [{ name: "h1", children: ["hello"] }]
   });
+  expect(ref.value).toMatchObject({ name: "h1", children: ["hello"] });
 });
 
 test("function", () => {
   function Layout(props: any) {
     return <div className="container">{props.children}</div>;
   }
+  const ref: JSX.Reference<"div"> = {};
   expect(
-    <Layout>
+    <Layout ref={ref}>
       <h1>hello</h1>
     </Layout>
   ).toMatchObject({
@@ -39,4 +46,14 @@ test("function", () => {
       }
     ]
   });
+  expect(ref.value).toMatchObject({
+    name: "div",
+    className: "container",
+    children: [
+      {
+        name: "h1",
+        children: ["hello"]
+      }
+    ]
+  });
 });