@valbuild/react 0.12.0 → 0.13.3

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import("jest").Config} */
+module.exports = {
+  preset: "../../jest.preset",
+  testEnvironment: "./jest-environment.mjs",
+};

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.12.0",
+  "version": "0.13.3",
+  "private": false,
+  "description": "Val - React",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.12.0",
-    "@valbuild/ui": "~0.12.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/ValApi.ts

@@ -0,0 +1,65 @@
+import { SerializedModule } from "@valbuild/core";
+import { PatchJSON } from "@valbuild/core/patch";
+
+export class ValApi {
+  constructor(readonly host: string) {}
+
+  async getModule(sourcePath: string): Promise<SerializedModule> {
+    const res = await fetch(`${this.host}/ids${sourcePath}`);
+    if (res.ok) {
+      const serializedVal = await res.json(); // TODO: validate
+      return serializedVal;
+    } else {
+      throw Error(
+        `Failed to get content of module "${sourcePath}". Status: ${
+          res.status
+        }. Error: ${await res.text()}`
+      );
+    }
+  }
+
+  async patchModuleContent(
+    moduleId: string,
+    patch: PatchJSON
+  ): Promise<SerializedModule> {
+    const res = await fetch(`${this.host}/ids${moduleId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json-patch+json",
+      },
+      body: JSON.stringify(patch),
+    });
+    if (res.ok) {
+      return res.json(); // TODO: validate
+    } else {
+      throw Error(
+        `Failed to patch content of module "${moduleId}". Error: ${await res.text()}`
+      );
+    }
+  }
+
+  async commit(): Promise<void> {
+    const res = await fetch(`${this.host}/commit`, {
+      method: "POST",
+    });
+    if (res.ok) {
+      return;
+    } else {
+      throw Error(`Failed to commit. Error: ${await res.text()}`);
+    }
+  }
+
+  getSession() {
+    return fetch(`${this.host}/session`);
+  }
+
+  loginUrl() {
+    return `${this.host}/authorize?redirect_to=${encodeURIComponent(
+      location.href
+    )}`;
+  }
+
+  logout() {
+    return fetch(`${this.host}/logout`);
+  }
+}

package/src/ValProvider.tsx

@@ -0,0 +1,51 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { lazy, useContext, useMemo } from "react";
+import { ValApi } from "./ValApi";
+import { ValStore } from "./ValStore";
+
+export function useValStore() {
+  return useContext(ValContext).valStore;
+}
+export function useValApi() {
+  return useContext(ValContext).valApi;
+}
+
+export type ValContext = {
+  readonly valStore: ValStore;
+  readonly valApi: ValApi;
+};
+
+export const ValContext = React.createContext<ValContext>({
+  get valStore(): never {
+    throw Error(
+      "Val context not found. Ensure components are wrapped by ValProvider!"
+    );
+  },
+  get valApi(): never {
+    throw Error(
+      "Val context not found. Ensure components are wrapped by ValProvider!"
+    );
+  },
+});
+
+export type ValProviderProps = {
+  host?: string;
+  children?: React.ReactNode;
+};
+const ValUI =
+  typeof window !== "undefined" ? lazy(() => import("./ValUI")) : null;
+
+export default function ValProvider({
+  host = "/api/val",
+  children,
+}: ValProviderProps) {
+  const valApi = useMemo(() => new ValApi(host), [host]);
+  const valStore = useMemo(() => new ValStore(valApi), [valApi]);
+  return (
+    <ValContext.Provider value={{ valApi, valStore }}>
+      {children}
+      {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>;
+}

package/src/ValRichText.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  HeadingNode,
+  ListItemNode,
+  ListNode,
+  ParagraphNode,
+  RichText,
+  TextNode,
+  Val,
+} from "@valbuild/core";
+import { Internal } from "@valbuild/core";
+import { createElement } from "react";
+import parse from "style-to-object";
+
+const getValPath = Internal.getValPath;
+export function ValRichText({ children }: { children: Val<RichText> }) {
+  return (
+    <div data-val-path={getValPath(children)}>
+      {children.children.map((child) => {
+        switch (child.type.val) {
+          case "heading":
+            return (
+              <HeadingNodeComponent
+                key={getValPath(child)}
+                node={child as Val<HeadingNode>}
+              />
+            );
+          case "paragraph":
+            return (
+              <ParagraphNodeComponent
+                key={getValPath(child)}
+                node={child as Val<ParagraphNode>}
+              />
+            );
+          case "list":
+            return (
+              <ListNodeComponent
+                key={getValPath(child)}
+                node={child as Val<ListNode>}
+              />
+            );
+          default:
+            throw Error("Unknown node type: " + (child as any)?.type);
+        }
+      })}
+    </div>
+  );
+}
+
+function TextNodeComponent({ node }: { node: Val<TextNode> }) {
+  const actualVal = node.val;
+  const styleProps = actualVal.style ? parse(actualVal.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 = actualVal.format.toString(2);
+  const bitmaskOffset = bitmask.length - 1;
+  function isBitOne(bit: number) {
+    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";
+    }
+  }
+  if (isBitOne(3)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "underline";
+    } else {
+      styleProps["textDecoration"] += " underline";
+    }
+  }
+  return <span style={styleProps}>{actualVal.text}</span>;
+}
+
+function HeadingNodeComponent({ node }: { node: Val<HeadingNode> }) {
+  return createElement(
+    node.tag.val,
+    {},
+    node.children.map((child) => (
+      <TextNodeComponent key={getValPath(child)} node={child} />
+    ))
+  );
+}
+
+function ParagraphNodeComponent({ node }: { node: Val<ParagraphNode> }) {
+  return (
+    <p>
+      {node.children.map((child) => {
+        switch (child.type.val) {
+          case "text":
+            return <TextNodeComponent key={getValPath(child)} node={child} />;
+          default:
+            throw Error("Unknown node type: " + (child as any)?.type);
+        }
+      })}
+    </p>
+  );
+}
+
+function ListNodeComponent({ node }: { node: Val<ListNode> }) {
+  return createElement(
+    node.val.tag,
+    {},
+    node.children.map((child) => (
+      <ListItemComponent key={getValPath(child)} node={child} />
+    ))
+  );
+}
+
+function ListItemComponent({ node }: { node: Val<ListItemNode> }) {
+  return (
+    <li>
+      {node.children.map((child, i) => {
+        switch (child.val.type) {
+          case "text":
+            return <TextNodeComponent key={i} node={child} />;
+          default:
+            throw Error("Unknown node type: " + (child as any)?.type);
+        }
+      })}
+    </li>
+  );
+}

package/src/ValStore.ts

@@ -0,0 +1,62 @@
+import { ValModule, SelectorSource } from "@valbuild/core";
+import { ValApi } from "./ValApi";
+
+export class ValStore {
+  private readonly vals: Map<string, ValModule<SelectorSource>>;
+  private readonly listeners: { [moduleId: string]: (() => void)[] };
+
+  constructor(private readonly api: ValApi) {
+    this.vals = new Map();
+    this.listeners = {};
+  }
+
+  async updateAll() {
+    await Promise.all(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      Object.keys(this.listeners).map(async (moduleId) => {
+        // this.set(
+        //   moduleId,
+        //   await this.api.getModule(moduleId)
+        //   // ModuleContent.deserialize(await this.api.getModule(moduleId))
+        // );
+      })
+    );
+  }
+
+  subscribe = (moduleId: string) => (listener: () => void) => {
+    const listeners = (this.listeners[moduleId] =
+      moduleId in this.listeners ? this.listeners[moduleId] : []);
+    listeners.push(listener);
+    return () => {
+      listeners.splice(listeners.indexOf(listener), 1);
+      if (listeners.length === 0) {
+        delete this.listeners[moduleId];
+      }
+    };
+  };
+
+  set(moduleId: string, val: ValModule<SelectorSource>) {
+    this.vals.set(moduleId, val);
+    this.emitChange(moduleId);
+  }
+
+  get(moduleId: string) {
+    return this.vals.get(moduleId);
+  }
+
+  emitChange(moduleId: string) {
+    const listeners = this.listeners[moduleId];
+    if (typeof listeners === "undefined") return;
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+
+  getSnapshot = (moduleId: string) => () => {
+    return this.vals.get(moduleId);
+  };
+
+  getServerSnapshot = (moduleId: string) => () => {
+    return this.vals.get(moduleId);
+  };
+}