@valbuild/react 0.15.0 → 0.17.0

package/src/ValUI.tsx

@@ -1,353 +1,64 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { Internal } from "@valbuild/core";
+import { Style, ValOverlay } from "@valbuild/ui";
 import { useEffect, useState } from "react";
-import { ValApi } from "./ValApi";
-import { ValStore } from "./ValStore";
-import { Inputs, Style, ValOverlay } from "@valbuild/ui";
-import {
-  FileSource,
-  FILE_REF_PROP,
-  Internal,
-  RichText,
-  SourcePath,
-  VAL_EXTENSION,
-} from "@valbuild/core";
-import { PatchJSON } from "@valbuild/core/patch";
-import { ImageMetadata } from "@valbuild/core/src/schema/image";
-import { AuthStatus } from "./AuthStatus";
 import { ShadowRoot } from "./ShadowRoot";
+import { useValApi } from "./ValProvider";
 
-export type ValUIProps = {
-  valStore: ValStore;
-  valApi: ValApi;
-};
-
-export default function ValUI({ valApi, valStore }: ValUIProps) {
-  const [selectedSources, setSelectedSources] = useState<string[]>([]);
-  const [editMode, setEditMode] = useState(false);
-  const [editFormPosition, setEditFormPosition] = useState<{
-    left: number;
-    top: number;
-  } | null>(null);
-
-  const [authentication, setAuthentication] = useState<AuthStatus>({
-    status: "not-asked",
-  });
-
-  useEffect(() => {
-    if (editMode) {
-      valStore.updateAll();
-    }
-  }, [editMode]);
+export default function ValUI() {
+  const [isClient, setIsClient] = useState(false);
+  const [enabled, setEnabled] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isDraftMode, setDraftMode] = useState(false); // TODO: if enabled, but not in draft mode: show something
+  const api = useValApi();
   useEffect(() => {
-    let openValFormListener: ((e: MouseEvent) => void) | undefined = undefined;
-    let styleElement: HTMLStyleElement | undefined = undefined;
-    const editButtonClickOptions = {
-      capture: true,
-      passive: true,
-    };
-    if (editMode) {
-      // highlight val element by appending a new style
-      styleElement = document.createElement("style");
-      styleElement.id = "val-edit-highlight";
-      styleElement.innerHTML = `
-        .val-edit-mode >* [data-val-path] {
-          outline: #ffff00 solid 1px;
-          cursor: pointer;
-        }
-      `;
-      document.body.appendChild(styleElement);
-
-      // capture event clicks on data-val-path elements
-      openValFormListener = (e: MouseEvent) => {
-        if (e.target instanceof Element) {
-          let parent = e.target;
-          while (parent && parent !== document.body) {
-            if (parent.getAttribute("data-val-path")) {
-              break;
-            }
-            if (parent.parentElement) {
-              parent = parent.parentElement;
-            } else {
-              break;
-            }
-          }
-          const valSources = parent?.getAttribute("data-val-path");
-          if (valSources) {
-            e.stopPropagation();
-            setSelectedSources(
-              valSources.split(
-                ","
-              ) /* TODO: just split on commas will not work if path contains , */
-            );
-            setEditFormPosition({
-              left: e.pageX,
-              top: e.pageY,
-            });
-            // } else if (!isValElement(e.target)) {
-            //   console.log("click outside", e.target);
-            //   setEditFormPosition(null);
-            //   setSelectedSources([]);
-          }
-        }
-      };
-      document.addEventListener(
-        "click",
-        openValFormListener,
-        editButtonClickOptions
+    setIsClient(true);
+    try {
+      const valEnabled = document.cookie?.includes(
+        `${Internal.VAL_ENABLE_COOKIE_NAME}=true`
       );
+      setEnabled(valEnabled);
+    } catch (e) {
+      console.warn("Could not read Val enabled state", e);
     }
-    return () => {
-      if (openValFormListener) {
-        document.removeEventListener(
-          "click",
-          openValFormListener,
-          editButtonClickOptions
-        );
-      }
-      styleElement?.remove();
-    };
-  }, [editMode]);
-  useEffect(() => {
-    if (editMode) {
-      document.body.classList.add("val-edit-mode");
-    } else {
-      document.body.classList.remove("val-edit-mode");
-    }
-
-    if (editMode) {
-      if (authentication.status !== "authenticated") {
-        valApi
-          .getSession()
-          .then(async (res) => {
-            if (res.status === 401) {
-              setAuthentication({
-                status: "unauthenticated",
-              });
-            } else if (res.ok) {
-              const data = await res.json();
-              if (data.mode === "local") {
-                setAuthentication({ status: "local" });
-              } else if (data.mode === "proxy") {
-                setAuthentication({
-                  status: "authenticated",
-                });
-              } else {
-                setAuthentication({
-                  status: "error",
-                  message: "Unknown authentication mode",
-                });
-              }
-            } else {
-              let message = "Unknown error";
-              try {
-                message = await res.text();
-              } catch {
-                // ignore
-              }
-              setAuthentication({
-                status: "error",
-                message,
-              });
-            }
-          })
-          .catch((err) => {
-            console.error("Failed to fetch session", err);
-            setAuthentication({
-              status: "error",
-              message: "Unknown authentication mode",
-            });
-          });
-      }
-    } else {
-      if (authentication.status === "error") {
-        setAuthentication({
-          status: "not-asked",
-        });
-      }
+    try {
+      const valDraftMode = document.cookie?.includes(
+        `${Internal.VAL_DRAFT_MODE_COOKIE}=true`
+      );
+      setDraftMode(valDraftMode);
+    } catch (e) {
+      console.warn("Could not read Val draft mode", e);
     }
-  }, [editMode, authentication.status]);
-
-  const [showEditButton, setShowEditButton] = useState(false);
-  useEffect(() => {
-    setShowEditButton(true);
   }, []);
-
-  const [inputs, setInputs] = useState<Inputs>({});
-
-  useEffect(() => {
-    setInputs({});
-    for (const path of selectedSources) {
-      valApi.getModule(path).then((serializedModule) => {
-        let input: Inputs[string] | undefined;
-        if (
-          serializedModule.schema.type === "string" &&
-          typeof serializedModule.source === "string"
-        ) {
-          input = {
-            status: "completed",
-            type: "text",
-            data: serializedModule.source,
-          };
-        } else if (
-          serializedModule.schema.type === "richtext" &&
-          typeof serializedModule.source === "object"
-        ) {
-          input = {
-            status: "completed",
-            type: "richtext",
-            data: serializedModule.source as RichText, // TODO: validate
-          };
-        } else if (
-          serializedModule.schema.type === "image" &&
-          serializedModule.source &&
-          typeof serializedModule.source === "object" &&
-          FILE_REF_PROP in serializedModule.source &&
-          typeof serializedModule.source[FILE_REF_PROP] === "string" &&
-          VAL_EXTENSION in serializedModule.source &&
-          typeof serializedModule.source[VAL_EXTENSION] === "string"
-        ) {
-          input = {
-            status: "completed",
-            type: "image",
-            data: Internal.convertImageSource(
-              serializedModule.source as FileSource<ImageMetadata>
-            ),
-          };
-        }
-        console.log("input path", path);
-        console.log("serialized path", serializedModule.path);
-        if (!input) {
-          throw new Error(
-            `Unsupported module type: ${serializedModule.schema.type}`
-          );
-        }
-        setInputs((inputs) => {
-          return {
-            ...inputs,
-            [serializedModule.path]: input,
-          } as Inputs;
-        });
-      });
-    }
-  }, [selectedSources.join(",")]);
-  if (!showEditButton) {
+  if (isClient && !enabled && process.env.NODE_ENV === "development") {
+    console.log(
+      `Val is disabled. Enable it by going here ${window.origin}${
+        api.host
+      }/enable?redirect_to=${encodeURIComponent(
+        window.location.href
+      )}. NOTE: this message appears because NODE_ENV is set to development.`
+    );
+  }
+  if (!isClient || !enabled) {
     return null;
   }
   return (
-    <ShadowRoot>
-      {/* TODO: */}
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link
-        rel="preconnect"
-        href="https://fonts.gstatic.com"
-        crossOrigin="anonymous"
-      />
-      <link
-        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap"
-        rel="stylesheet"
-      />
-      <Style />
-      <div data-mode="dark">
-        <ValOverlay
-          editMode={editMode}
-          setEditMode={setEditMode}
-          closeValWindow={() => {
-            setEditFormPosition(null);
-            setSelectedSources([]);
-            setInputs({});
-          }}
-          valWindow={
-            (editFormPosition && {
-              position: editFormPosition,
-              inputs,
-              onSubmit: (inputs) => {
-                Promise.all(
-                  Object.entries(inputs).map(([path, input]) => {
-                    if (input.status === "completed") {
-                      const [moduleId, modulePath] =
-                        Internal.splitModuleIdAndModulePath(path as SourcePath);
-                      if (input.type === "text") {
-                        const patch: PatchJSON = [
-                          {
-                            value: input.data,
-                            op: "replace",
-                            path: `/${modulePath
-                              .split(".")
-                              .map((p) => JSON.parse(p))
-                              .join("/")}`,
-                          },
-                        ];
-                        return valApi.patchModuleContent(moduleId, patch);
-                      } else if (input.type === "image") {
-                        const pathParts = modulePath
-                          .split(".")
-                          .map((p) => JSON.parse(p));
-
-                        if (!input?.data || !("src" in input.data)) {
-                          // TODO: We probably need to have an Output type that is different from the Input: we have a union of both cases in Input right now, and we believe we do not want that
-                          console.warn(
-                            "No .src on input provided - this might mean no changes was made"
-                          );
-                          return;
-                        }
-                        const patch: PatchJSON = [
-                          {
-                            value: input.data.src,
-                            op: "replace",
-                            path: `/${pathParts.slice(0, -1).join("/")}/$${
-                              pathParts[pathParts.length - 1]
-                            }`,
-                          },
-                        ];
-                        if (input.data.metadata) {
-                          if (input.data.addMetadata) {
-                            patch.push({
-                              value: input.data.metadata,
-                              op: "add",
-                              path: `/${pathParts.join("/")}/metadata`,
-                            });
-                          } else {
-                            patch.push({
-                              value: input.data.metadata,
-                              op: "replace",
-                              path: `/${pathParts.join("/")}/metadata`,
-                            });
-                          }
-                        }
-                        console.log("patch", patch);
-                        return valApi.patchModuleContent(moduleId, patch);
-                      } else if (input.type === "richtext") {
-                        const patch: PatchJSON = [
-                          {
-                            value: input.data,
-                            op: "replace",
-                            path: `/${modulePath
-                              .split(".")
-                              .map((p) => JSON.parse(p))
-                              .join("/")}`,
-                          },
-                        ];
-                        return valApi.patchModuleContent(moduleId, patch);
-                      }
-                      throw new Error(
-                        `Unsupported input type: ${(input as any).type}`
-                      );
-                    } else {
-                      console.error("Submitted incomplete input, ignoring...");
-                      return Promise.resolve();
-                    }
-                  })
-                ).then(() => {
-                  setEditFormPosition(null);
-                  setSelectedSources([]);
-                  setInputs({});
-                });
-              },
-            }) ??
-            undefined
-          }
+    <>
+      <ShadowRoot>
+        {/* TODO: */}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap"
+          rel="stylesheet"
         />
-      </div>
-    </ShadowRoot>
+        <Style />
+        <ValOverlay api={api} />
+      </ShadowRoot>
+    </>
   );
 }

package/src/index.ts

@@ -1,4 +1,3 @@
 // NOTE: the exports of this file needs to be kept in sync with ValQuickJSRuntime
-export { ValProvider } from "./ValProvider";
-export { useVal } from "./hooks/useVal";
+export { ValProvider, useValStore, useValApi } from "./ValProvider";
 export { ValRichText } from "./ValRichText";

package/src/stega/autoTagJSX.ts

@@ -30,9 +30,9 @@ const addValPathIfFound = (type: any, props: any) => {
         ) {
           const valPath = encodedBits?.data?.valPath;
           if (valPath) {
-            console.log("Found encoded valPath", valPath);
             valSources.push(valPath);
             props[key] = vercelStegaSplit(value).cleaned;
+            props[`data-val-attr-${key}`] = valPath;
           }
         }
       }

package/src/stega/index.ts

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

package/src/stega/transform.test.ts

@@ -0,0 +1,145 @@
+import { getModuleIds, transform } from "./transform";
+import { initVal } from "@valbuild/core";
+import { vercelStegaDecode, vercelStegaSplit } from "@vercel/stega";
+
+const { s, val } = initVal();
+
+describe("stega transform", () => {
+  test("basic", () => {
+    const schema = s.array(
+      s.object({
+        image: s.image(),
+        text: s.richtext(),
+        n: s.number(),
+        b: s.boolean(),
+      })
+    );
+
+    const valModule = val.content("/test", schema, [
+      {
+        image: val.file("/public/test1.png", {
+          sha256: "1231",
+          width: 100,
+          height: 100,
+        }),
+        text: val.richtext("Test1"),
+        n: 1,
+        b: true,
+      },
+      {
+        image: val.file("/public/test2.png", {
+          sha256: "1232",
+          width: 100,
+          height: 100,
+        }),
+        text: val.richtext("Test2"),
+        n: 2,
+        b: false,
+      },
+    ]);
+    const transformed = transform(valModule, {});
+
+    expect(transformed).toHaveLength(2);
+
+    expect(vercelStegaDecode(transformed[0].image.url)).toStrictEqual({
+      data: {
+        valPath: '/test.0."image"',
+      },
+      origin: "val.build",
+    });
+    expect(vercelStegaDecode(transformed[1].image.url)).toStrictEqual({
+      data: {
+        valPath: '/test.1."image"',
+      },
+      origin: "val.build",
+    });
+    //
+    expect(vercelStegaSplit(transformed[0].image.url).cleaned).toStrictEqual(
+      "/test1.png?sha256=1231"
+    );
+    expect(vercelStegaSplit(transformed[1].image.url).cleaned).toStrictEqual(
+      "/test2.png?sha256=1232"
+    );
+
+    expect(transformed[0].text.valPath).toStrictEqual('/test.0."text"');
+    expect(transformed[1].text.valPath).toStrictEqual('/test.1."text"');
+  });
+
+  test("get modules", () => {
+    const schema = s.array(s.string());
+
+    expect(
+      getModuleIds({
+        foo: [
+          { test: val.content("/test1", schema, ["one", "two"]) },
+          { test: val.content("/test2", schema, ["one", "two"]) },
+        ],
+        test: val.content("/test3", schema, ["one", "two"]),
+      })
+    ).toStrictEqual(["/test1", "/test2", "/test3"]);
+  });
+
+  test("basic transform with get modules", () => {
+    const schema = s.array(s.string());
+    const transformed = transform(
+      val.content("/test1", schema, ["one", "two"]),
+      {
+        getModule: (moduleId) => {
+          if (moduleId === "/test1") {
+            return ["1", "2"];
+          }
+        },
+      }
+    );
+
+    expect(vercelStegaSplit(transformed[0]).cleaned).toStrictEqual("1");
+    expect(vercelStegaDecode(transformed[0])).toStrictEqual({
+      data: {
+        valPath: "/test1.0",
+      },
+      origin: "val.build",
+    });
+  });
+
+  test("transform with get modules", () => {
+    const schema = s.array(s.string());
+    const transformed = transform(
+      {
+        foo: [
+          { test: val.content("/test1", schema, ["one", "two"]) },
+          { test: val.content("/test2", schema, ["one", "two"]) },
+        ],
+        test: val.content("/test3", schema, ["one", "two"]),
+      },
+      {
+        getModule: (moduleId) => {
+          if (moduleId === "/test2") {
+            return ["1", "2"];
+          }
+        },
+      }
+    );
+
+    expect(vercelStegaSplit(transformed.foo[0].test[0]).cleaned).toStrictEqual(
+      "one"
+    );
+    expect(vercelStegaDecode(transformed.foo[0].test[0])).toStrictEqual({
+      data: {
+        valPath: "/test1.0",
+      },
+      origin: "val.build",
+    });
+
+    //
+
+    expect(vercelStegaSplit(transformed.foo[1].test[0]).cleaned).toStrictEqual(
+      "1"
+    );
+    expect(vercelStegaDecode(transformed.foo[1].test[0])).toStrictEqual({
+      data: {
+        valPath: "/test2.0",
+      },
+      origin: "val.build",
+    });
+  });
+});