@valbuild/react 0.17.0 → 0.19.0

package/src/ValRichText.tsx

@@ -1,177 +1,193 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import {
-  HeadingNode,
-  ListItemNode,
-  ListNode,
-  ParagraphNode,
   RichText,
+  RichTextNode,
+  AnyRichTextOptions,
   SourcePath,
-  TextNode,
+  RichTextOptions,
 } from "@valbuild/core";
-import { createElement } from "react";
-import parse from "style-to-object";
+import React from "react";
 
-export function ValRichText({ children }: { children: RichText }) {
-  const root: RichText = children;
-  const path = root.valPath;
-  return (
-    <div data-val-path={path}>
-      {root.children.map((child, i) => {
-        const childType = child.type;
-        const childPath = `${path}.${i}` as SourcePath;
-        switch (childType) {
-          case "heading":
-            return (
-              <HeadingNodeComponent
-                key={childPath}
-                path={childPath}
-                node={child}
-              />
-            );
-          case "paragraph":
-            return (
-              <ParagraphNodeComponent
-                key={childPath}
-                path={childPath}
-                node={child}
-              />
-            );
-          case "list":
-            return (
-              <ListNodeComponent
-                key={childPath}
-                path={childPath}
-                node={child}
-              />
-            );
-          default:
-            throw Error("Unknown root node type: " + childType);
-        }
-      })}
-    </div>
-  );
-}
+// Pick is used to make sure we do not add a tag or class that is not in options:
+type Tags = keyof Pick<RichTextOptions, "img" | "ul" | "ol">;
+type Classes = keyof Pick<RichTextOptions, "bold" | "italic" | "lineThrough">;
 
-function TextNodeComponent({ node }: { node: TextNode }) {
-  const styleProps = node.style ? parse(node.style) ?? {} : {};
-  // TODO: Ugly! We should do this before serializing instead
-  if (styleProps["font-family"]) {
-    styleProps["fontFamily"] = styleProps["font-family"];
-    delete styleProps["font-family"];
-  }
-  if (styleProps["font-size"]) {
-    styleProps["fontSize"] = styleProps["font-size"];
-    delete styleProps["font-size"];
-  }
-  const bitmask = node.format?.toString(2);
-  const bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
-  function isBitOne(bit: number) {
-    if (!bitmask) {
-      return false;
-    }
-    return (
-      bitmask.length >= bitmaskOffset - bit &&
-      bitmask[bitmaskOffset - bit] === "1"
-    );
-  }
-  if (isBitOne(0)) {
-    styleProps["fontWeight"] = "bold";
-  }
-  if (isBitOne(1)) {
-    styleProps["fontStyle"] = "italic";
-  }
-  if (isBitOne(2)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "line-through";
-    } else {
-      styleProps["textDecoration"] += " line-through";
+type ThemeOptions<O extends RichTextOptions> = {
+  tags: (O["headings"] extends Array<unknown>
+    ? {
+        [Key in O["headings"][number]]: string;
+      }
+    : {}) & {
+    [Key in Tags & keyof O as O[Key] extends true
+      ? Key extends "ul" | "ol"
+        ? Key | "li"
+        : Key
+      : never]: string;
+  } & { p?: string };
+  classes: {
+    [Key in Classes & keyof O as O[Key] extends true ? Key : never]: string;
+  } & (O["img"] extends true ? { imgContainer?: string } : {});
+};
+
+export function ValRichText<O extends RichTextOptions>({
+  theme,
+  children,
+}: {
+  theme: ThemeOptions<O>;
+  children: RichText<O>;
+}) {
+  const root = children as RichText<AnyRichTextOptions> & {
+    valPath: SourcePath;
+  };
+  function withRenderTag(
+    clazz: keyof ThemeOptions<AnyRichTextOptions>["tags"],
+    current?: string
+  ) {
+    const renderClass = (theme as ThemeOptions<AnyRichTextOptions>).tags[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
+    }
+    if (renderClass) {
+      return renderClass;
     }
+    return current;
   }
-  if (isBitOne(3)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "underline";
-    } else {
-      styleProps["textDecoration"] += " underline";
+  function withRenderClass(
+    clazz: keyof ThemeOptions<AnyRichTextOptions>["classes"],
+    current?: string
+  ) {
+    const renderClass = (theme as ThemeOptions<AnyRichTextOptions>).classes[
+      clazz
+    ];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
     }
+    if (renderClass) {
+      return renderClass;
+    }
+    return current;
   }
-  return <span style={styleProps}>{node.text}</span>;
-}
-
-function HeadingNodeComponent({
-  node,
-  path,
-}: {
-  path: SourcePath;
-  node: HeadingNode;
-}) {
-  return createElement(
-    node.tag,
-    {},
-    node.children.map((child, i) => {
-      const childPath = `${path}.${i}` as SourcePath;
-      return <TextNodeComponent key={childPath} node={child} />;
-    })
-  );
-}
 
-function ParagraphNodeComponent({
-  node,
-  path,
-}: {
-  path: SourcePath;
-  node: ParagraphNode;
-}) {
-  return (
-    <p>
-      {node.children.map((child, i) => {
-        const childPath = `${path}.${i}` as SourcePath;
-        switch (child.type) {
-          case "text":
-            return <TextNodeComponent key={childPath} node={child} />;
-          default:
-            throw Error("Unknown paragraph node type: " + child?.type);
-        }
-      })}
-    </p>
-  );
-}
-
-function ListNodeComponent({
-  node,
-  path,
-}: {
-  path: SourcePath;
-  node: ListNode;
-}) {
-  return createElement(
-    node.tag,
-    {},
-    node.children.map((child, i) => {
-      const childPath = `${path}.${i}` as SourcePath;
+  function toReact(
+    node: RichTextNode<AnyRichTextOptions>,
+    key: number | string
+  ): React.ReactNode {
+    if (typeof node === "string") {
+      return node;
+    }
+    if (node.tag === "p") {
       return (
-        <ListItemComponent key={childPath} path={childPath} node={child} />
+        <p className={withRenderTag("p")} key={key}>
+          {node.children.map(toReact)}
+        </p>
       );
-    })
-  );
-}
+    }
+    if (node.tag === "img") {
+      return (
+        <div className={withRenderClass("imgContainer")} key={key}>
+          <img className={withRenderTag("img")} src={node.src} />
+        </div>
+      );
+    }
+    // if (node.tag === "blockquote") {
+    //   return <blockquote key={key}>{node.children.map(toReact)}</blockquote>;
+    // }
+    if (node.tag === "ul") {
+      return (
+        <ul className={withRenderTag("ul")} key={key}>
+          {node.children.map(toReact)}
+        </ul>
+      );
+    }
+    if (node.tag === "ol") {
+      return (
+        <ol className={withRenderTag("ol")} key={key}>
+          {node.children.map(toReact)}
+        </ol>
+      );
+    }
+    if (node.tag === "li") {
+      return (
+        <li className={withRenderTag("li")} key={key}>
+          {node.children.map(toReact)}
+        </li>
+      );
+    }
+    if (node.tag === "span") {
+      return (
+        <span
+          key={key}
+          className={node.classes
+            .map((nodeClass) => {
+              switch (nodeClass) {
+                case "bold":
+                  return withRenderClass("bold");
+                case "line-through":
+                  return withRenderClass("lineThrough");
+                case "italic":
+                  return withRenderClass("italic");
+              }
+            })
+            .join(" ")}
+        >
+          {node.children.map(toReact)}
+        </span>
+      );
+    }
+    if (node.tag === "h1") {
+      return (
+        <h1 className={withRenderTag("h1")} key={key}>
+          {node.children.map(toReact)}
+        </h1>
+      );
+    }
+    if (node.tag === "h2") {
+      return (
+        <h2 className={withRenderTag("h2")} key={key}>
+          {node.children.map(toReact)}
+        </h2>
+      );
+    }
+    if (node.tag === "h3") {
+      return (
+        <h3 className={withRenderTag("h3")} key={key}>
+          {node.children.map(toReact)}
+        </h3>
+      );
+    }
+    if (node.tag === "h4") {
+      return (
+        <h4 className={withRenderTag("h4")} key={key}>
+          {node.children.map(toReact)}
+        </h4>
+      );
+    }
+    if (node.tag === "h5") {
+      return (
+        <h5 className={withRenderTag("h5")} key={key}>
+          {node.children.map(toReact)}
+        </h5>
+      );
+    }
+    if (node.tag === "h6") {
+      return (
+        <h6 className={withRenderTag("h6")} key={key}>
+          {node.children.map(toReact)}
+        </h6>
+      );
+    }
+    console.error("Unknown tag", node.tag);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const anyNode = node as any;
+    if (!anyNode?.tag) {
+      return null;
+    }
+    return React.createElement(anyNode.tag, {
+      key,
+      className: anyNode.class?.join(" "),
+      children: anyNode.children?.map(toReact),
+    });
+  }
 
-function ListItemComponent({
-  node,
-  path,
-}: {
-  path: SourcePath;
-  node: ListItemNode;
-}) {
-  return (
-    <li>
-      {node.children.map((child, i) => {
-        const childPath = `${path}.${i}` as SourcePath;
-        switch (child.type) {
-          case "text":
-            return <TextNodeComponent key={childPath} node={child} />;
-          default:
-            throw Error("Unknown list item node type: " + child?.type);
-        }
-      })}
-    </li>
-  );
+  return <div data-val-path={root.valPath}>{root.children.map(toReact)}</div>;
 }

package/src/ValUI.tsx

@@ -44,7 +44,14 @@ export default function ValUI() {
   }
   return (
     <>
-      <ShadowRoot>
+      <ShadowRoot
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: 8999, // 1 less than the NextJS error z-index: 9000
+        }}
+      >
         {/* TODO: */}
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link

package/src/stega/autoTagJSX.ts

@@ -15,8 +15,7 @@ const isIntrinsicElement = (type: any) => {
 
 const addValPathIfFound = (type: any, props: any) => {
   const valSources: any = [];
-
-  if (isIntrinsicElement(type) && props && typeof props === "object") {
+  if (props && typeof props === "object") {
     for (const [key, value] of Object.entries(props)) {
       if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
         const encodedBits = vercelStegaDecode(value);
@@ -31,7 +30,9 @@ const addValPathIfFound = (type: any, props: any) => {
           const valPath = encodedBits?.data?.valPath;
           if (valPath) {
             valSources.push(valPath);
-            props[key] = vercelStegaSplit(value).cleaned;
+            props[key] = isIntrinsicElement(type)
+              ? vercelStegaSplit(value).cleaned
+              : value;
             props[`data-val-attr-${key}`] = valPath;
           }
         }

package/src/stega/index.ts

@@ -1,8 +1,8 @@
 // NOTE: the exports of this file needs to be kept in sync with ValQuickJSRuntime
 export { autoTagJSX } from "./autoTagJSX";
 export {
-  transform,
+  stegaEncode,
   getModuleIds,
   type ValEncodedString,
   type StegaOfSource,
-} from "./transform";
+} from "./stegaEncode";

package/src/stega/{transform.test.ts → stegaEncode.test.ts}

@@ -1,4 +1,4 @@
-import { getModuleIds, transform } from "./transform";
+import { getModuleIds, stegaEncode } from "./stegaEncode";
 import { initVal } from "@valbuild/core";
 import { vercelStegaDecode, vercelStegaSplit } from "@vercel/stega";
 
@@ -9,7 +9,7 @@ describe("stega transform", () => {
     const schema = s.array(
       s.object({
         image: s.image(),
-        text: s.richtext(),
+        text: s.richtext({}),
         n: s.number(),
         b: s.boolean(),
       })
@@ -22,7 +22,7 @@ describe("stega transform", () => {
           width: 100,
           height: 100,
         }),
-        text: val.richtext("Test1"),
+        text: val.richtext`Test`,
         n: 1,
         b: true,
       },
@@ -32,12 +32,12 @@ describe("stega transform", () => {
           width: 100,
           height: 100,
         }),
-        text: val.richtext("Test2"),
+        text: val.richtext`Test`,
         n: 2,
         b: false,
       },
     ]);
-    const transformed = transform(valModule, {});
+    const transformed = stegaEncode(valModule, {});
 
     expect(transformed).toHaveLength(2);
 
@@ -81,7 +81,7 @@ describe("stega transform", () => {
 
   test("basic transform with get modules", () => {
     const schema = s.array(s.string());
-    const transformed = transform(
+    const transformed = stegaEncode(
       val.content("/test1", schema, ["one", "two"]),
       {
         getModule: (moduleId) => {
@@ -101,9 +101,18 @@ describe("stega transform", () => {
     });
   });
 
+  test("Dont stegaEncode raw strings schema", () => {
+    const schema = s.object({ str: s.string(), rawStr: s.string().raw() });
+    const transformed = stegaEncode(
+      val.content("/test1", schema, { str: "one", rawStr: "two" }),
+      {}
+    );
+    //expect(transformed.str).toStrictEqual("one");
+    expect(transformed.rawStr).toStrictEqual("two");
+  });
   test("transform with get modules", () => {
     const schema = s.array(s.string());
-    const transformed = transform(
+    const transformed = stegaEncode(
       {
         foo: [
           { test: val.content("/test1", schema, ["one", "two"]) },

package/src/stega/{transform.ts → stegaEncode.ts}

@@ -28,8 +28,8 @@ export type ValEncodedString = string & {
 
 export type StegaOfSource<T extends Source> = Json extends T
   ? Json
-  : T extends RichTextSource
-  ? RichText
+  : T extends RichTextSource<infer O>
+  ? RichText<O>
   : T extends FileSource
   ? { url: ValEncodedString }
   : T extends SourceObject
@@ -44,34 +44,41 @@ export type StegaOfSource<T extends Source> = Json extends T
   ? T
   : never;
 
-export function transform(
+export function stegaEncode(
   input: any,
   opts: {
     getModule?: (moduleId: string) => any;
     disabled?: boolean;
   }
 ): any {
-  function rec(sourceOrSelector: any, path?: any): any {
+  function rec(
+    sourceOrSelector: any,
+    recOpts?: { path: any; schema: any }
+  ): any {
     if (typeof sourceOrSelector === "object") {
+      if (!sourceOrSelector) {
+        return null;
+      }
       const selectorPath = Internal.getValPath(sourceOrSelector);
       if (selectorPath) {
+        const newSchema = Internal.getSchema(sourceOrSelector);
         return rec(
           (opts.getModule && opts.getModule(selectorPath)) ||
             Internal.getSource(sourceOrSelector),
-          opts.disabled ? undefined : selectorPath
+          opts.disabled ? undefined : { path: selectorPath, schema: newSchema }
         );
       }
 
-      if (!sourceOrSelector) {
-        return null;
-      }
-
       if (VAL_EXTENSION in sourceOrSelector) {
         if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
-          return {
-            ...sourceOrSelector,
-            valPath: path,
-          };
+          if (recOpts?.path) {
+            return {
+              ...Internal.convertRichTextSource(sourceOrSelector),
+              valPath: recOpts.path,
+            };
+          }
+
+          return Internal.convertRichTextSource(sourceOrSelector);
         }
 
         if (
@@ -81,7 +88,7 @@ export function transform(
           const fileSelector = Internal.convertFileSource(sourceOrSelector);
           return {
             ...fileSelector,
-            url: rec(fileSelector.url, path),
+            url: rec(fileSelector.url, recOpts),
           };
         }
         console.error(
@@ -92,7 +99,13 @@ export function transform(
 
       if (Array.isArray(sourceOrSelector)) {
         return sourceOrSelector.map((el, i) =>
-          rec(el, path && Internal.createValPathOfItem(path, i))
+          rec(
+            el,
+            recOpts && {
+              path: Internal.createValPathOfItem(recOpts.path, i),
+              schema: recOpts.schema.item,
+            }
+          )
         );
       }
 
@@ -101,7 +114,12 @@ export function transform(
         for (const [key, value] of Object.entries(sourceOrSelector)) {
           res[key] = rec(
             value,
-            path && Internal.createValPathOfItem(path, key)
+            recOpts && {
+              path: Internal.createValPathOfItem(recOpts.path, key),
+              schema:
+                recOpts.schema.item || // Record
+                recOpts.schema.items[key], // Object
+            }
           );
         }
         return res;
@@ -117,11 +135,17 @@ export function transform(
     }
 
     if (typeof sourceOrSelector === "string") {
+      if (!recOpts) {
+        return sourceOrSelector;
+      }
+      if (recOpts.schema.isRaw) {
+        return sourceOrSelector;
+      }
       return vercelStegaCombine(
         sourceOrSelector,
         {
           origin: "val.build",
-          data: { valPath: path },
+          data: { valPath: recOpts.path },
         },
         false // auto detection on urls and dates is disabled, isDate could be used but it is also disabled (users should use a date schema instead): isDate(sourceOrSelector) // skip = true if isDate
       );
@@ -146,16 +170,15 @@ export function getModuleIds(input: any): string[] {
   const modules: Set<string> = new Set();
   function rec(sourceOrSelector: any): undefined {
     if (typeof sourceOrSelector === "object") {
+      if (!sourceOrSelector) {
+        return;
+      }
       const selectorPath = Internal.getValPath(sourceOrSelector);
       if (selectorPath) {
         modules.add(selectorPath);
         return;
       }
 
-      if (!sourceOrSelector) {
-        return;
-      }
-
       if (VAL_EXTENSION in sourceOrSelector) {
         if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
           return;