fix: internals

jviide · jviide · commit e3659979e143 · 2024-04-21T15:31:43.000Z
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "exports": {
     "./api": "./dist/api/index.js",
     "./ui": "./dist/ui/index.js",
-    "./ui/experimental": "./dist/experimental/index.js",
+    "./ui/experimental": "./dist/ui/experimental/index.js",
     "./jsx-runtime": "./dist/jsx-runtime.js",
     "./jsx-dev-runtime": "./dist/jsx-dev-runtime.js"
   },
diff --git a/src/jsx-runtime.ts b/src/jsx-runtime.ts
@@ -3,7 +3,7 @@ import {
   UiNode,
   FunctionalComponent,
   Fragment,
-  createElement,
+  element,
 } from "./ui/internal.js";
 
 export { UiNode, FunctionalComponent, Fragment };
@@ -13,8 +13,7 @@ type ClassList = string | Record<string, boolean> | ClassList[];
 export function jsx<
   T extends FunctionalComponent | keyof JSX.IntrinsicElements,
 >(type: T, props: Record<string, unknown>): UiNode {
-  const { children, ...rest } = props;
-  return createElement(type, rest, children as UiNode);
+  return element(type, props);
 }
 
 export const jsxs = jsx;
diff --git a/src/ui/experimental/Box.ts b/src/ui/experimental/Box.ts
@@ -1,4 +1,4 @@
-import { Responsive, Space, UiNode, createElement } from "../internal.js";
+import { Responsive, Space, UiNode, element } from "../internal.js";
 
 type BoxProps = {
   width?: Responsive<string>;
@@ -22,6 +22,5 @@ type BoxProps = {
 };
 
 export function Box(props: BoxProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-box", rest, children);
+  return element("ui-box", props);
 }
diff --git a/src/ui/experimental/Button.ts b/src/ui/experimental/Button.ts
@@ -1,4 +1,4 @@
-import { Json, UiNode, createElement } from "../internal.js";
+import { Json, UiNode, element } from "../internal.js";
 
 type ButtonProps = {
   variant?: "default" | "primary" | "danger";
@@ -10,6 +10,5 @@ type ButtonProps = {
 };
 
 export function Button(props: ButtonProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-button", rest, children);
+  return element("ui-button", props);
 }
diff --git a/src/ui/experimental/Callout.ts b/src/ui/experimental/Callout.ts
@@ -1,4 +1,4 @@
-import { UiNode, createElement } from "../internal.js";
+import { UiNode, element } from "../internal.js";
 
 type CalloutProps = {
   type?: "info" | "success" | "warning" | "error";
@@ -7,6 +7,5 @@ type CalloutProps = {
 };
 
 export function Callout(props: CalloutProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-alert", rest, children);
+  return element("ui-alert", props);
 }
diff --git a/src/ui/experimental/Checkbox.ts b/src/ui/experimental/Checkbox.ts
@@ -1,4 +1,4 @@
-import { Json, UiNode, createElement } from "../internal.js";
+import { Json, UiNode, element } from "../internal.js";
 
 type CheckboxProps = {
   name?: string;
@@ -9,5 +9,5 @@ type CheckboxProps = {
 };
 
 export function Checkbox(props: CheckboxProps): UiNode {
-  return createElement("ui-checkbox", props);
+  return element("ui-checkbox", props);
 }
diff --git a/src/ui/experimental/CopyButton.ts b/src/ui/experimental/CopyButton.ts
@@ -1,4 +1,4 @@
-import { UiNode, createElement } from "../internal.js";
+import { UiNode, element } from "../internal.js";
 
 type CopyButtonProps = {
   variant?: "default" | "primary" | "danger";
@@ -9,6 +9,5 @@ type CopyButtonProps = {
 };
 
 export function CopyButton(props: CopyButtonProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-copy-button", rest, children);
+  return element("ui-copy-button", props);
 }
diff --git a/src/ui/experimental/Divider.ts b/src/ui/experimental/Divider.ts
@@ -1,9 +1,9 @@
-import { Responsive, UiNode, createElement } from "../internal.js";
+import { Responsive, UiNode, element } from "../internal.js";
 
 type DividerProps = {
   orientation?: Responsive<"horizontal" | "vertical">;
 };
 
 export function Divider(props: DividerProps): UiNode {
-  return createElement("ui-divider", props);
+  return element("ui-divider", props);
 }
diff --git a/src/ui/experimental/DownloadButton.ts b/src/ui/experimental/DownloadButton.ts
@@ -1,4 +1,4 @@
-import { Json, UiNode, createElement } from "../internal.js";
+import { Json, UiNode, element } from "../internal.js";
 
 type DownloadButtonProps = {
   variant?: "default" | "primary" | "danger";
@@ -10,6 +10,5 @@ type DownloadButtonProps = {
 };
 
 export function DownloadButton(props: DownloadButtonProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-download-button", rest, children);
+  return element("ui-download-button", props);
 }
diff --git a/src/ui/experimental/Flex.ts b/src/ui/experimental/Flex.ts
@@ -1,4 +1,4 @@
-import { Responsive, Space, UiNode, createElement } from "../internal.js";
+import { Responsive, Space, UiNode, element } from "../internal.js";
 
 type FlexProps = {
   width?: Responsive<string>;
@@ -30,6 +30,5 @@ type FlexProps = {
 };
 
 export function Flex(props: FlexProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-flex", rest, children);
+  return element("ui-flex", props);
 }
diff --git a/src/ui/experimental/Form.ts b/src/ui/experimental/Form.ts
@@ -1,10 +1,9 @@
-import { UiNode, createElement } from "../internal.js";
+import { UiNode, element } from "../internal.js";
 
 type FormProps = {
   children?: UiNode;
 };
 
 export function Form(props: FormProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-form", rest, children);
+  return element("ui-form", props);
 }
diff --git a/src/ui/experimental/HiddenInput.ts b/src/ui/experimental/HiddenInput.ts
@@ -1,4 +1,4 @@
-import { Json, UiNode, createElement } from "../internal.js";
+import { Json, UiNode, element } from "../internal.js";
 
 type HiddenInputProps = {
   name: string;
@@ -7,5 +7,5 @@ type HiddenInputProps = {
 };
 
 export function HiddenInput(props: HiddenInputProps): UiNode {
-  return createElement("ui-hidden-input", props);
+  return element("ui-hidden-input", props);
 }
diff --git a/src/ui/experimental/Link.ts b/src/ui/experimental/Link.ts
@@ -1,11 +1,10 @@
-import { UiNode, createElement } from "../internal.js";
+import { UiNode, element } from "../internal.js";
 
 type LinkProps = {
   href: string;
   children?: UiNode;
 };
 
 export function Link(props: LinkProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-link", rest, children);
+  return element("ui-link", props);
 }
diff --git a/src/ui/experimental/Redirect.ts b/src/ui/experimental/Redirect.ts
@@ -1,9 +1,9 @@
-import { UiNode, createElement } from "../internal.js";
+import { UiNode, element } from "../internal.js";
 
 type RedirectProps = {
   to: string;
 };
 
 export function Redirect(props: RedirectProps): UiNode {
-  return createElement("ui-redirect", props);
+  return element("ui-redirect", props);
 }
diff --git a/src/ui/experimental/Switch.ts b/src/ui/experimental/Switch.ts
@@ -1,4 +1,4 @@
-import { Json, UiNode, createElement } from "../internal.js";
+import { Json, UiNode, element } from "../internal.js";
 
 type SwitchProps = {
   name?: string;
@@ -9,5 +9,5 @@ type SwitchProps = {
 };
 
 export function Switch(props: SwitchProps): UiNode {
-  return createElement("ui-switch", props);
+  return element("ui-switch", props);
 }
diff --git a/src/ui/experimental/Text.ts b/src/ui/experimental/Text.ts
@@ -1,4 +1,4 @@
-import { Responsive, UiNode, createElement } from "../internal.js";
+import { Responsive, UiNode, element } from "../internal.js";
 
 type TextProps = {
   size?: Responsive<"1" | "2" | "3">;
@@ -10,6 +10,5 @@ type TextProps = {
 };
 
 export function Text(props: TextProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-text", rest, children);
+  return element("ui-text", props);
 }
diff --git a/src/ui/experimental/TextField.ts b/src/ui/experimental/TextField.ts
@@ -1,4 +1,4 @@
-import { UiNode, createElement } from "../internal.js";
+import { UiNode, element } from "../internal.js";
 
 type TextFieldProps = {
   name: string;
@@ -11,5 +11,5 @@ type TextFieldProps = {
 };
 
 export function TextField(props: TextFieldProps): UiNode {
-  return createElement("ui-text-field", props);
+  return element("ui-text-field", props);
 }
diff --git a/src/ui/experimental/UploadButton.ts b/src/ui/experimental/UploadButton.ts
@@ -1,4 +1,4 @@
-import { Json, UiNode, createElement } from "../internal.js";
+import { Json, UiNode, element } from "../internal.js";
 
 type UploadButtonProps = {
   name: string;
@@ -10,6 +10,5 @@ type UploadButtonProps = {
 };
 
 export function UploadButton(props: UploadButtonProps): UiNode {
-  const { children, ...rest } = props;
-  return createElement("ui-upload-button", rest, children);
+  return element("ui-upload-button", props);
 }
diff --git a/src/ui/internal.ts b/src/ui/internal.ts
@@ -28,14 +28,15 @@ export function Fragment(props: { children: UiNode }): UiNode {
   return props.children;
 }
 
-export function createElement(
+export function element(
   type: string | FunctionalComponent,
   props: Record<string, unknown>,
-  ...children: UiNode[]
 ): UiNode {
   if (typeof type === "string") {
+    const { children, ...rest } = props;
+
     let jsonProps: Record<string, unknown> | undefined;
-    for (const [key, value] of Object.entries(props)) {
+    for (const [key, value] of Object.entries(rest)) {
       if (value === undefined) {
         continue;
       }
@@ -50,13 +51,15 @@ export function createElement(
       type,
       props: jsonProps,
       children: Array.isArray(children)
-        ? children
+        ? children.length === 0
+          ? undefined
+          : children
         : children === undefined || children === null
           ? undefined
           : [children],
     };
   }
-  return type({ ...props, children });
+  return type(props);
 }
 
 export type Responsive<T> = T | { base?: T; xs?: T; sm?: T; md?: T; lg?: T };
