@valbuild/react 0.12.0 → 0.13.0

package/jest.config.js

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

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@valbuild/react",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.12.0",
-    "@valbuild/ui": "~0.12.0",
+    "@valbuild/core": "~0.13.0",
+    "@valbuild/ui": "~0.13.0",
     "base64-arraybuffer": "^1.0.2",
     "react-shadow": "^20.0.0",
     "style-to-object": "^0.4.1"

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,424 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useContext, useEffect, useMemo, useState } 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;
+}
+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;
+};
+
+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",
+  });
+  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,
+      }}
+    >
+      {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>
+      )}
+    </ValContext.Provider>
+  );
+}

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);
+  };
+}

package/src/assets.ts

@@ -0,0 +1,124 @@
+import * as base64 from "base64-arraybuffer";
+
+function dataUrl(mimeType: string, data: string): string {
+  return `data:${mimeType};base64,${base64.encode(
+    new TextEncoder().encode(data)
+  )}`;
+}
+
+// TODO: stroke should be currentColor
+export const editIcon = (size: number, stroke: string) =>
+  dataUrl(
+    "image/svg+xml",
+    `
+<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+   `
+  );
+
+export const logo = dataUrl(
+  "image/svg+xml",
+  `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="101.83195mm"
+   height="103.55328mm"
+   viewBox="0 0 101.83195 103.55328"
+   version="1.1"
+   id="svg974"
+   inkscape:export-filename="logo.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview976"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="1.4040232"
+     inkscape:cx="39.173141"
+     inkscape:cy="503.90904"
+     inkscape:window-width="3832"
+     inkscape:window-height="2087"
+     inkscape:window-x="0"
+     inkscape:window-y="69"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs971" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-46.162121,-16.863144)">
+    <ellipse
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:4.41854;stroke-dasharray:none;stroke-opacity:1"
+       id="path2242"
+       ry="49.567371"
+       rx="48.706703"
+       cy="68.639786"
+       cx="97.078094" />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#f2f2f2;stroke-width:9.9912;stroke-dasharray:none;stroke-opacity:1"
+       d="m 65.105895,44.462411 18.85692,45.934668 13.064363,-39.90188 15.829132,39.947835 23.07956,-0.1822"
+       id="path4245"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000;fill-opacity:1;stroke:#f2f2f2;stroke-width:4.85097;stroke-dasharray:none;stroke-opacity:1"
+       d="M 108.18755,79.963752 C 101.58768,84.940963 94.021144,82.50121 86.406627,79.693345"
+       id="path4249"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>`
+);
+
+export const valcmsLogo = dataUrl(
+  "image/svg+xml",
+  `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="20"
+   height="20"
+   viewBox="0 0 52.916665 52.916668"
+   version="1.1"
+   id="svg8">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1">
+    <path
+       style="fill:none;stroke:white;stroke-width:5.00377;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 3.9337727,9.883415 14.718441,43.556958 25.597715,9.9678121 35.530965,43.388176 h 15.798599 v 0 h 0.09461"
+       id="path10" />
+    <path
+       style="fill:none;stroke:white;stroke-width:5.00377;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 19.826972,27.859518 11.257682,0.0844 v 0 0"
+       id="path837" />
+  </g>
+</svg>`
+);

package/src/hooks/useVal.test.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useVal } from "./useVal";
+import { initVal, Val } from "@valbuild/core";
+import { renderHook } from "@testing-library/react";
+import { ValContext } from "../ValProvider";
+import { ReactElement } from "react";
+import { ValStore } from "../ValStore";
+import { ValApi } from "../ValApi";
+
+const valApi = new ValApi("mock");
+const valStore = new ValStore(valApi);
+
+const Providers = ({ children }: { children: ReactElement }) => (
+  <ValContext.Provider
+    value={{
+      valStore,
+      valApi,
+    }}
+  >
+    {children}
+  </ValContext.Provider>
+);
+
+// const { s, val } = initVal();
+
+describe("useVal", () => {
+  test.skip("extracts ValString from string", () => {
+    // const mod = val.content("foo", s.string(), "bar");
+    // const { result } = renderHook(() => useVal(mod, "en_US"), {
+    //   wrapper: Providers,
+    // });
+    // expect(result.current).toStrictEqual<Val<string>>({
+    //   val: "bar",
+    //   valSrc: "foo?en_US?",
+    // });
+  });
+
+  test.skip("extracts ValString from ValObject", () => {
+    // const mod = val.content("baz", s.object({ foo: s.string() }), {
+    //   foo: "bar",
+    // });
+    // const { result } = renderHook(() => useVal(mod, "en_US"), {
+    //   wrapper: Providers,
+    // });
+    // const vo: Val<{ foo: string }> = result.current;
+    // expect(vo.foo).toStrictEqual<Val<string>>({
+    //   valSrc: `baz?en_US?."foo"`,
+    //   val: "bar",
+    // });
+    // expect(val).toStrictEqual<ValObject<{ foo: string }>>({
+    //   foo: {
+    //     id: "baz.foo",
+    //     val: "bar",
+    //   },
+    // });
+  });
+});

package/src/hooks/useVal.ts

@@ -0,0 +1,35 @@
+import {
+  SelectorSource,
+  SelectorOf,
+  GenericSelector,
+  Val,
+  Internal,
+} from "@valbuild/core";
+import { JsonOfSource } from "@valbuild/core/src/val";
+
+export function useVal<T extends SelectorSource>(
+  selector: T,
+  locale?: string
+): SelectorOf<T> extends GenericSelector<infer S>
+  ? Val<JsonOfSource<S>>
+  : never {
+  // const mod = selectable.getModule();
+  // const valStore = useValStore();
+  // const remoteContent = useSyncExternalStore(
+  //   valStore.subscribe(mod.id),
+  //   valStore.getSnapshot(mod.id),
+  //   valStore.getServerSnapshot(mod.id)
+  // );
+  // if (remoteContent) {
+  //   return selectable.getVal(remoteContent.source as S, locale);
+  // }
+  // const content = mod.content;
+  // const validationError = content.validate();
+  // if (validationError) {
+  //   throw new Error(
+  //     `Invalid source value. Errors:\n${validationError.join("\n")}`
+  //   );
+  // }
+
+  return Internal.getVal(selector, locale);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+/* export { useContent } from "./useContent";
+export { useText } from "./useText";
+export { WithVal } from "./WithVal"; */
+export { ValProvider } from "./ValProvider";
+export { useVal } from "./hooks/useVal";
+export { ValRichText } from "./ValRichText";

package/src/jsx-dev-runtime.js

@@ -0,0 +1,47 @@
+import { Internal } from "@valbuild/core";
+import * as ReactJSXRuntimeDev from "react/jsx-dev-runtime";
+export * from "react/jsx-dev-runtime";
+
+const isIntrinsicElement = (type) => {
+  // TODO: think this is not correct, but good enough for now?
+  return typeof type === "string";
+};
+
+const devalProps = (type, props) => {
+  const valSources = [];
+
+  if (isIntrinsicElement(type)) {
+    for (const [key, value] of Object.entries(props)) {
+      if (typeof value === "object" && value !== null && "val" in value) {
+        const valPath = Internal.getValPath(value);
+        if (valPath) {
+          valSources.push(valPath);
+          if (typeof value.val === "string" || value.val === null) {
+            props[key] = value.val;
+          } else {
+            throw Error("TODO: unhandled value type");
+          }
+        }
+      }
+    }
+  }
+
+  if (valSources.length > 0) {
+    props["data-val-path"] = valSources.join(",");
+  }
+};
+
+export function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
+
+  devalProps(type, props);
+
+  return ReactJSXRuntimeDev.jsxDEV(
+    type,
+    props,
+    key,
+    isStaticChildren,
+    source,
+    self
+  );
+}

package/src/jsx-namespace.d.ts

@@ -0,0 +1,46 @@
+import { Source, Val } from "@valbuild/core";
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<
+  C,
+  P
+>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+
+type MaybeVal<T> = T extends Source ? Val<T> | T : T;
+type WithVal<T extends object> = {
+  [K in keyof T]: K extends "key" | "ref" | "className"
+    ? T[K]
+    : K extends "style"
+    ? WithVal<React.CSSProperties>
+    : T[K] extends object
+    ? T[K]
+    : MaybeVal<T[K]>;
+};
+
+export namespace ValJSX {
+  export type Element = ReactJSXElement;
+  export type ElementClass = ReactJSXElementClass;
+  export type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+  export type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+
+  export type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<
+    C,
+    P
+  >;
+
+  export type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+  export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+
+  export type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: WithVal<
+      ReactJSXIntrinsicElements[K]
+    >;
+  };
+}

package/src/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export { ValJSX as JSX } from "./jsx-namespace";

package/src/jsx-runtime.dev.d.ts

@@ -0,0 +1 @@
+export { ValJSX as JSX } from "./jsx-namespace";

package/src/jsx-runtime.js

@@ -0,0 +1,52 @@
+import { Internal } from "@valbuild/core";
+import * as ReactJSXRuntime from "react/jsx-runtime";
+export * from "react/jsx-runtime";
+
+const isIntrinsicElement = (type) => {
+  // TODO: think this is not correct, but good enough for now?
+  return typeof type === "string";
+};
+
+const devalProps = (type, props) => {
+  const valSources = [];
+
+  if (isIntrinsicElement(type)) {
+    for (const [key, value] of Object.entries(props)) {
+      if (typeof value === "object" && value !== null && "val" in value) {
+        const valPath = Internal.getValPath(value);
+        if (valPath) {
+          valSources.push(valPath);
+          if (typeof value.val === "string" || value.val === null) {
+            props[key] = value.val;
+          } else {
+            throw Error("TODO: unhandled value type");
+          }
+        }
+      }
+    }
+  }
+
+  if (valSources.length > 0) {
+    props["data-val-path"] = valSources.join(",");
+  }
+};
+
+export function jsx(type, props, key) {
+  // console.log("jsx", type, props, key);
+
+  devalProps(type, props);
+
+  return ReactJSXRuntime.jsx(type, props, key);
+}
+
+export function jsxs(type, props, key) {
+  // console.log("jsxs", type, props, key);
+
+  if (key === "key") {
+    console.log("jsxDEV", type, props, key, self);
+  }
+
+  devalProps(type, props);
+
+  return ReactJSXRuntime.jsxs(type, props, key);
+}