@derivesome/tree 0.1.1

package/src/tree.ts

@@ -0,0 +1,226 @@
+import { derived, has, isReference, ref, Reference } from "@derivesome/core";
+import { TreeNodeBrand } from "./brands";
+import { TreeNodeProps } from "./props";
+
+export type TreeNodeFn<T extends TreeNodeProps = TreeNodeProps> = (
+  props: TreeNodeProps & T,
+) => unknown;
+
+export type Component<T extends TreeNodeProps = TreeNodeProps> = TreeNodeFn<T>;
+
+export interface TreeNodeBase<Type extends string> {
+  type: Type;
+  props: TreeNodeProps;
+  [TreeNodeBrand]: true;
+}
+
+export interface TreeNodeElement extends TreeNodeBase<"element"> {
+  tag: string;
+  children: TreeNode[];
+}
+
+export interface TreeNodeValue extends TreeNodeBase<"value"> {
+  value: unknown;
+}
+
+export interface TreeNodeVoid extends TreeNodeBase<"void"> {}
+
+export interface TreeNodeFunction<
+  P extends TreeNodeProps = TreeNodeProps,
+> extends TreeNodeBase<"function"> {
+  fn: TreeNodeFn<P>;
+}
+
+export interface TreeNodeList<T = any> extends TreeNodeBase<"list"> {
+  props: Omit<TreeNodeProps, "children"> & {
+    children: Reference<T[]>;
+  };
+  items: Reference<TreeNode[]>;
+  map: (item: T, idx: number) => TreeNode;
+}
+
+export type TreeNode =
+  | TreeNodeElement
+  | TreeNodeValue
+  | TreeNodeVoid
+  | TreeNodeFunction
+  | TreeNodeList;
+
+const makeBase = <Type extends string>(
+  t: Type,
+): { type: Type; [TreeNodeBrand]: true } => {
+  return {
+    type: t,
+    [TreeNodeBrand]: true,
+  };
+};
+
+export function isTreeNode(x: unknown): x is TreeNode {
+  return has(x, TreeNodeBrand) && x[TreeNodeBrand] === true;
+}
+
+// tn - short for (TreeNode)
+export namespace tn {
+  export function none(): TreeNodeVoid {
+    return {
+      ...makeBase("void"),
+      props: {},
+    };
+  }
+
+  export function list<T>(
+    items: Reference<T[]> | T[],
+    map?: (item: T, idx: number) => TreeNode,
+  ): TreeNodeList {
+    const mapFn = map || ((x) => tnu.normalizeOne(x));
+    const its = isReference(items) ? items : ref(items);
+    return {
+      ...makeBase("list"),
+      props: {
+        children: its,
+      },
+      map: mapFn,
+      items: derived(() => its.get().map(mapFn)),
+    };
+  }
+
+  export function value(v: unknown): TreeNodeValue {
+    return {
+      ...makeBase("value"),
+      props: {},
+      value: v,
+    };
+  }
+
+  export function element(tag: string, props: TreeNodeProps): TreeNodeElement {
+    return {
+      ...makeBase("element"),
+      tag,
+      props,
+      children: tnu.normalizeChildren(props.children),
+    };
+  }
+
+  export function fn(
+    fun: TreeNodeFn,
+    props: TreeNodeProps = {},
+  ): TreeNodeFunction {
+    return {
+      ...makeBase("function"),
+      fn: fun,
+      props: props,
+    };
+  }
+}
+
+// tnu - short for (TreeNode Utils)
+export namespace tnu {
+  export const normalizeOne = (x: unknown): TreeNode => {
+    if (isTreeNode(x)) return x;
+    if (typeof x === "undefined" || x === null || x === false) return tn.none();
+    if (
+      typeof x === "string" ||
+      typeof x === "number" ||
+      typeof x === "boolean"
+    )
+      return tn.value(x);
+    if (Array.isArray(x)) {
+      if (x.length === 1) {
+        const first = x[0]!;
+        if (isTreeNode(first) && first.type === "list") return first;
+      }
+      return tn.list(x.map((v) => normalizeOne(v)));
+    }
+    if (typeof x === "function")
+      return tn.fn((props) => normalizeOne((x as TreeNodeFn)(props)));
+    throw new Error(`normalizeOne: unhandled ${typeof x}`);
+  };
+
+  export const normalizeChildren = (x: unknown): TreeNode[] => {
+    if (isTreeNode(x)) return [x];
+    if (typeof x === "function") return [tn.value(x)];
+    if (Array.isArray(x)) return x.flatMap((v) => normalizeChildren(v));
+
+    if (isReference(x)) {
+      // Try to understand the intent by peeking at the value
+      const val = x.peek();
+
+      if (Array.isArray(val)) {
+        // assume we're trying to render a list
+        return [
+          tn.list(
+            derived(() =>
+              ((x.get() || []) as Array<unknown>).flatMap((v) =>
+                tnu.normalizeChildren(v),
+              ),
+            ),
+          ),
+        ];
+      } else if (isTreeNode(val)) {
+        /*
+           we turn this into a list so that we can allow syntax like:
+           ```
+           <div>
+             {derived(() => <span/>)}
+           </div>
+           ```
+           instead of
+           ```
+           <div>
+             {derived(() => [<span/>])}
+           </div>
+           ```
+         */
+        return [
+          tn.list(
+            derived(() => {
+              return normalizeChildren(x.get());
+            }),
+          ),
+        ];
+      }
+      return [tn.value(x)];
+    }
+    return [normalizeOne(x)];
+  };
+
+  export const assertGetKey = (x: TreeNode): string | number => {
+    const k = x.props.key;
+    if (!(typeof k === "string" || typeof k === "number"))
+      throw new Error(`Each item in a list must have a key`);
+    return k;
+  };
+}
+
+export function createNode(
+  tag: string,
+  props?: TreeNodeProps | null,
+  ...children: unknown[]
+): TreeNodeElement;
+export function createNode<P extends TreeNodeProps>(
+  tag: TreeNodeFn<P>,
+  props?: P | null,
+  ...children: unknown[]
+): TreeNodeFunction;
+export function createNode(
+  tag: string | TreeNodeFn,
+  props?: TreeNodeProps | null,
+  ...children: unknown[]
+): TreeNode {
+  const normalizedProps: TreeNodeProps = props ?? {};
+  const normalizedChildren = tnu.normalizeChildren(children);
+
+  if (typeof tag === "function") {
+    return tn.fn(tag, {
+      ...normalizedProps,
+      ...(normalizedChildren.length > 0
+        ? { children: normalizedChildren }
+        : {}),
+    });
+  }
+
+  return tn.element(tag, {
+    ...props,
+    children: normalizedChildren,
+  });
+}

package/src/tree.ts~

@@ -0,0 +1,227 @@
+import { derived, has, isReference, ref, Reference } from "@derivesome/core";
+import { TreeNodeBrand } from "./brands";
+import { TreeNodeProps } from "./props";
+
+export type TreeNodeFn<T extends TreeNodeProps = TreeNodeProps> = (
+  props: TreeNodeProps & T,
+) => unknown;
+
+export type Component<T extends TreeNodeProps = TreeNodeProps> = TreeNodeFn<T>;
+
+export interface TreeNodeBase<Type extends string> {
+  type: Type;
+  props: TreeNodeProps;
+  [TreeNodeBrand]: true;
+}
+
+export interface TreeNodeElement extends TreeNodeBase<"element"> {
+  tag: string;
+  children: TreeNode[];
+}
+
+export interface TreeNodeValue extends TreeNodeBase<"value"> {
+  value: unknown;
+}
+
+export interface TreeNodeVoid extends TreeNodeBase<"void"> {}
+
+export interface TreeNodeFunction<
+  P extends TreeNodeProps = TreeNodeProps,
+> extends TreeNodeBase<"function"> {
+  fn: TreeNodeFn<P>;
+}
+
+export interface TreeNodeList<T = any> extends TreeNodeBase<"list"> {
+  props: Omit<TreeNodeProps, "children"> & {
+    children: Reference<T[]>;
+  };
+  items: Reference<TreeNode[]>;
+  map: (item: T, idx: number) => TreeNode;
+}
+
+export type TreeNode =
+  | TreeNodeElement
+  | TreeNodeValue
+  | TreeNodeVoid
+  | TreeNodeFunction
+  | TreeNodeList;
+
+const makeBase = <Type extends string>(
+  t: Type,
+): { type: Type; [TreeNodeBrand]: true } => {
+  return {
+    type: t,
+    [TreeNodeBrand]: true,
+  };
+};
+
+export function isTreeNode(x: unknown): x is TreeNode {
+  return has(x, TreeNodeBrand) && x[TreeNodeBrand] === true;
+}
+
+// tn - short for (TreeNode)
+export namespace tn {
+  export function none(): TreeNodeVoid {
+    return {
+      ...makeBase("void"),
+      props: {},
+    };
+  }
+
+  export function list<T>(
+    items: Reference<T[]> | T[],
+    map?: (item: T, idx: number) => TreeNode,
+  ): TreeNodeList {
+    const mapFn = map || ((x) => tnu.normalizeOne(x));
+    const its = isReference(items) ? items : ref(items);
+    return {
+      ...makeBase("list"),
+      props: {
+        children: its,
+      },
+      map: mapFn,
+      items: derived(() => its.get().map(mapFn)),
+    };
+  }
+
+  export function value(v: unknown): TreeNodeValue {
+    return {
+      ...makeBase("value"),
+      props: {},
+      value: v,
+    };
+  }
+
+  export function element(tag: string, props: TreeNodeProps): TreeNodeElement {
+    return {
+      ...makeBase("element"),
+      tag,
+      props,
+      children: tnu.normalizeChildren(props.children),
+    };
+  }
+
+  export function fn(
+    fun: TreeNodeFn,
+    props: TreeNodeProps = {},
+  ): TreeNodeFunction {
+    return {
+      ...makeBase("function"),
+      fn: fun,
+      props: props,
+    };
+  }
+}
+
+// tnu - short for (TreeNode Utils)
+export namespace tnu {
+  export const normalizeOne = (x: unknown): TreeNode => {
+    if (isTreeNode(x)) return x;
+    if (typeof x === "undefined" || x === null || x === false) return tn.none();
+    if (
+      typeof x === "string" ||
+      typeof x === "number" ||
+      typeof x === "boolean"
+    )
+      return tn.value(x);
+    if (Array.isArray(x)) {
+      if (x.length === 1) {
+        const first = x[0]!;
+        if (isTreeNode(first) && first.type === "list") return first;
+      }
+      return tn.list(x.map((v) => normalizeOne(v)));
+    }
+    if (typeof x === "function")
+      return tn.fn((props) => normalizeOne((x as TreeNodeFn)(props)));
+    throw new Error(`normalizeOne: unhandled ${typeof x}`);
+  };
+
+  export const normalizeChildren = (x: unknown): TreeNode[] => {
+    if (isTreeNode(x)) return [x];
+    if (typeof x === "function") return [tn.value(x)];
+    if (Array.isArray(x)) return x.flatMap((v) => normalizeChildren(v));
+
+    if (isReference(x)) {
+      // Try to understand the intent by peeking at the value
+      const val = x.peek();
+
+      if (Array.isArray(val)) {
+        // assume we're trying to render a list
+        
+        return [
+          tn.list(
+            derived(() =>
+              ((x.get() || []) as Array<unknown>).flatMap((v) =>
+                tnu.normalizeChildren(v),
+              ),
+            ),
+          ),
+        ];
+      } else if (isTreeNode(val)) {
+        /*
+           we turn this into a list so that we can allow syntax like:
+           ```
+           <div>
+             {derived(() => <span/>)}
+           </div>
+           ```
+           instead of
+           ```
+           <div>
+             {derived(() => [<span/>])}
+           </div>
+           ```
+         */
+        return [
+          tn.list(
+            derived(() => {
+              return normalizeChildren(x.get())
+            }),
+          ),
+        ];
+      }
+      return [tn.value(x)];
+    }
+    return [normalizeOne(x)];
+  };
+
+  export const assertGetKey = (x: TreeNode): string | number => {
+    const k = x.props.key;
+    if (!(typeof k === "string" || typeof k === "number"))
+      throw new Error(`Each item in a list must have a key`);
+    return k;
+  };
+}
+
+export function createNode(
+  tag: string,
+  props?: TreeNodeProps | null,
+  ...children: unknown[]
+): TreeNodeElement;
+export function createNode<P extends TreeNodeProps>(
+  tag: TreeNodeFn<P>,
+  props?: P | null,
+  ...children: unknown[]
+): TreeNodeFunction;
+export function createNode(
+  tag: string | TreeNodeFn,
+  props?: TreeNodeProps | null,
+  ...children: unknown[]
+): TreeNode {
+  const normalizedProps: TreeNodeProps = props ?? {};
+  const normalizedChildren = tnu.normalizeChildren(children);
+
+  if (typeof tag === "function") {
+    return tn.fn(tag, {
+      ...normalizedProps,
+      ...(normalizedChildren.length > 0
+        ? { children: normalizedChildren }
+        : {}),
+    });
+  }
+
+  return tn.element(tag, {
+    ...props,
+    children: normalizedChildren,
+  });
+}