@valbuild/react 0.13.0 → 0.13.3

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.browser.esm.js

@@ -1,7 +1,8 @@
-import { a as _slicedToArray, b as _typeof } from '../../dist/slicedToArray-236143cd.browser.esm.js';
+import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-1a246338.browser.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
+import '../../dist/unsupportedIterableToArray-d3087ed5.browser.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.cjs.dev.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-0ead6329.cjs.dev.js');
+var slicedToArray = require('../../dist/slicedToArray-b7cf26e0.cjs.dev.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
+require('../../dist/unsupportedIterableToArray-9e97e24a.cjs.dev.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.cjs.prod.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-57b117df.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-0eb0bcdb.cjs.prod.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
+require('../../dist/unsupportedIterableToArray-afbea1dd.cjs.prod.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.esm.js

@@ -1,7 +1,8 @@
-import { a as _slicedToArray, b as _typeof } from '../../dist/slicedToArray-390fde8c.esm.js';
+import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-d846e1d2.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
+import '../../dist/unsupportedIterableToArray-51bb61c2.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.worker.esm.js

@@ -1,7 +1,8 @@
-import { a as _slicedToArray, b as _typeof } from '../../dist/slicedToArray-bf9b195a.worker.esm.js';
+import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-9e7d1407.worker.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
+import '../../dist/unsupportedIterableToArray-738344ef.worker.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-runtime/dist/valbuild-react-jsx-runtime.browser.esm.js

@@ -1,7 +1,8 @@
-import { a as _slicedToArray, b as _typeof } from '../../dist/slicedToArray-236143cd.browser.esm.js';
+import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-1a246338.browser.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 export * from 'react/jsx-runtime';
+import '../../dist/unsupportedIterableToArray-d3087ed5.browser.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-runtime/dist/valbuild-react-jsx-runtime.cjs.dev.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-0ead6329.cjs.dev.js');
+var slicedToArray = require('../../dist/slicedToArray-b7cf26e0.cjs.dev.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
+require('../../dist/unsupportedIterableToArray-9e97e24a.cjs.dev.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-runtime/dist/valbuild-react-jsx-runtime.cjs.prod.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-57b117df.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-0eb0bcdb.cjs.prod.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
+require('../../dist/unsupportedIterableToArray-afbea1dd.cjs.prod.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-runtime/dist/valbuild-react-jsx-runtime.esm.js

@@ -1,7 +1,8 @@
-import { a as _slicedToArray, b as _typeof } from '../../dist/slicedToArray-390fde8c.esm.js';
+import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-d846e1d2.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 export * from 'react/jsx-runtime';
+import '../../dist/unsupportedIterableToArray-51bb61c2.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-runtime/dist/valbuild-react-jsx-runtime.worker.esm.js

@@ -1,7 +1,8 @@
-import { a as _slicedToArray, b as _typeof } from '../../dist/slicedToArray-bf9b195a.worker.esm.js';
+import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-9e7d1407.worker.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 export * from 'react/jsx-runtime';
+import '../../dist/unsupportedIterableToArray-738344ef.worker.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/package.json

@@ -1,26 +1,29 @@
 {
   "name": "@valbuild/react",
-  "version": "0.13.0",
+  "version": "0.13.3",
+  "private": false,
+  "description": "Val - React",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.13.0",
-    "@valbuild/ui": "~0.13.0",
+    "@valbuild/core": "~0.13.3",
+    "@valbuild/ui": "~0.13.3",
     "base64-arraybuffer": "^1.0.2",
-    "react-shadow": "^20.0.0",
     "style-to-object": "^0.4.1"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.26",
     "jest-environment-jsdom": "^29.5.0",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/src/AuthStatus.tsx

@@ -0,0 +1,13 @@
+export type AuthStatus =
+  | {
+      status:
+        | "not-asked"
+        | "authenticated"
+        | "unauthenticated"
+        | "loading"
+        | "local";
+    }
+  | {
+      status: "error";
+      message: string;
+    };

package/src/ShadowRoot.tsx

@@ -0,0 +1,32 @@
+import { useState, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+function ShadowContent({
+  root,
+  children,
+}: {
+  children: React.ReactNode;
+  root: Element | DocumentFragment;
+}) {
+  return createPortal(children, root);
+}
+
+export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
+  const node = useRef<HTMLDivElement>(null);
+  const [root, setRoot] = useState<ShadowRoot | null>(null);
+
+  useLayoutEffect(() => {
+    if (node.current) {
+      const root = node.current.attachShadow({
+        mode: "closed",
+      });
+      setRoot(root);
+    }
+  }, []);
+
+  return (
+    <div ref={node}>
+      {root && <ShadowContent root={root}>{children}</ShadowContent>}
+    </div>
+  );
+};

package/src/ValProvider.tsx

@@ -1,19 +1,8 @@
+"use client";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { lazy, useContext, useMemo } from "react";
 import { ValApi } from "./ValApi";
 import { ValStore } from "./ValStore";
-import { Inputs, Style, ValOverlay } from "@valbuild/ui";
-import root from "react-shadow"; // TODO: remove dependency on react-shadow here?
-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";
 
 export function useValStore() {
   return useContext(ValContext).valStore;
@@ -44,381 +33,19 @@ export type ValProviderProps = {
   host?: string;
   children?: React.ReactNode;
 };
+const ValUI =
+  typeof window !== "undefined" ? lazy(() => import("./ValUI")) : null;
 
-type AuthStatus =
-  | {
-      status:
-        | "not-asked"
-        | "authenticated"
-        | "unauthenticated"
-        | "loading"
-        | "local";
-    }
-  | {
-      status: "error";
-      message: string;
-    };
-
-export function ValProvider({ host = "/api/val", children }: ValProviderProps) {
-  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",
-  });
+export default function ValProvider({
+  host = "/api/val",
+  children,
+}: ValProviderProps) {
   const valApi = useMemo(() => new ValApi(host), [host]);
   const valStore = useMemo(() => new ValStore(valApi), [valApi]);
-
-  useEffect(() => {
-    if (editMode) {
-      valStore.updateAll();
-    }
-  }, [editMode]);
-  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: black solid 2px;
-          outline-offset: 4px;
-          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
-      );
-    }
-    return () => {
-      if (openValFormListener) {
-        document.removeEventListener(
-          "click",
-          openValFormListener,
-          editButtonClickOptions
-        );
-      }
-      styleElement?.remove();
-    };
-  }, [editMode]);
-
-  // useEffect(() => {
-  //   const requestAuth = !(
-  //     authentication.status === "authenticated" ||
-  //     authentication.status === "local"
-  //   );
-  //   if (requestAuth) {
-  //     setSelectedSources([]);
-  //     console.log("request auth");
-  //     setEditFormPosition(null);
-  //   }
-  //   if (!editMode) {
-  //     // reset state when disabled
-  //     setSelectedSources([]);
-  //     console.log("reset state");
-  //     setEditFormPosition(null);
-  //   }
-  // }, [editMode, selectedSources.length, authentication.status]);
-
-  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",
-        });
-      }
-    }
-  }, [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(",")]);
   return (
-    <ValContext.Provider
-      value={{
-        valApi,
-        valStore,
-      }}
-    >
+    <ValContext.Provider value={{ valApi, valStore }}>
       {children}
-      {showEditButton && (
-        <root.div>
-          {/* 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
-              }
-            />
-          </div>
-        </root.div>
-      )}
+      {ValUI && <ValUI valApi={valApi} valStore={valStore} />}
     </ValContext.Provider>
   );
 }

package/src/ValProviderWrapper.tsx

@@ -0,0 +1,15 @@
+import { lazy } from "react";
+import { ValProviderProps } from "./ValProvider";
+
+const ValProvider =
+  typeof window === "undefined" && lazy(() => import("./ValProvider"));
+
+export function ValProviderWrapper({
+  host = "/api/val",
+  children,
+}: ValProviderProps) {
+  if (!ValProvider) {
+    return null;
+  }
+  return <ValProvider host={host}>{children}</ValProvider>;
+}