@valbuild/react 0.25.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "private": false,
   "description": "Val - React internal helpers",
   "sideEffects": false,
@@ -9,8 +9,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.25.0",
-    "@valbuild/ui": "~0.25.0",
+    "@valbuild/core": "~0.27.0",
+    "@valbuild/ui": "~0.27.0",
     "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2",
     "style-to-object": "^0.4.1"
@@ -88,5 +88,11 @@
     },
     "./package.json": "./package.json"
   },
-  "types": "dist/valbuild-react.cjs.d.ts"
+  "types": "dist/valbuild-react.cjs.d.ts",
+  "files": [
+    "dist",
+    "jsx-runtime",
+    "jsx-dev-runtime",
+    "stega"
+  ]
 }

package/.babelrc.json

@@ -1,10 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-react",
-      {
-        "runtime": "automatic"
-      }
-    ]
-  ]
-}

package/jest-environment.mjs

@@ -1,17 +0,0 @@
-import { TestEnvironment as JSDOMEnvironment } from "jest-environment-jsdom";
-
-/**
- * JSDOM currently does not support TextEncoder/TextDecoder...
- * @see https://github.com/jsdom/jsdom/issues/2524
- */
-class TestEnvironment extends JSDOMEnvironment {
-  async setup() {
-    await super.setup();
-    if (typeof this.global.TextEncoder === "undefined") {
-      this.global.TextEncoder = TextEncoder;
-      this.global.TextDecoder = TextDecoder;
-    }
-  }
-}
-
-export default TestEnvironment;

package/jest.config.js

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

package/src/ShadowRoot.tsx

@@ -1,42 +0,0 @@
-import { useState, useLayoutEffect, useRef, CSSProperties } 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,
-  style,
-}: {
-  children: React.ReactNode;
-  style?: CSSProperties;
-}) => {
-  const node = useRef<HTMLDivElement>(null);
-  const [root, setRoot] = useState<ShadowRoot | null>(null);
-
-  useLayoutEffect(() => {
-    if (node.current) {
-      if (node.current.shadowRoot) {
-        setRoot(node.current.shadowRoot);
-      } else {
-        const root = node.current.attachShadow({
-          mode: "open",
-        });
-        setRoot(root);
-      }
-    }
-  }, []);
-
-  return (
-    <div ref={node} style={style} id="val-ui">
-      {root && <ShadowContent root={root}>{children}</ShadowContent>}
-    </div>
-  );
-};

package/src/ValProvider.tsx

@@ -1,48 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { lazy, useContext, useMemo } from "react";
-import { ValStore } from "./ValStore";
-import { ValApi } from "@valbuild/core";
-
-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 function ValProvider({ children }: ValProviderProps) {
-  const host = "/api/val";
-  const valApi = useMemo(() => new ValApi(host), [host]);
-  const valStore = useMemo(() => new ValStore(valApi), [valApi]);
-  return (
-    <ValContext.Provider value={{ valApi, valStore }}>
-      {children}
-      {ValUI && <ValUI />}
-    </ValContext.Provider>
-  );
-}

package/src/ValRichText.tsx

@@ -1,198 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import {
-  RichText,
-  RichTextNode,
-  AnyRichTextOptions,
-  SourcePath,
-  RichTextOptions,
-} from "@valbuild/core";
-import React from "react";
-
-// Pick is used to make sure we do not add a tag or class that is not in options:
-type Tags = keyof Pick<RichTextOptions, "img" | "ul" | "ol">;
-type Classes = keyof Pick<RichTextOptions, "bold" | "italic" | "lineThrough">;
-
-type ThemeOptions<O extends RichTextOptions> = {
-  tags: (O["headings"] extends Array<unknown>
-    ? {
-        [Key in O["headings"][number]]: string;
-      }
-    : {}) & {
-    [Key in Tags & keyof O as O[Key] extends true
-      ? Key extends "ul" | "ol"
-        ? Key | "li"
-        : Key
-      : never]: string;
-  } & { p?: string };
-  classes: {
-    [Key in Classes & keyof O as O[Key] extends true ? Key : never]: string;
-  };
-};
-
-export function ValRichText<O extends RichTextOptions>({
-  theme,
-  children,
-}: {
-  theme: ThemeOptions<O>;
-  children: RichText<O>;
-}) {
-  const root = children as RichText<AnyRichTextOptions> & {
-    valPath: SourcePath;
-  };
-  function withRenderTag(
-    clazz: keyof ThemeOptions<AnyRichTextOptions>["tags"],
-    current?: string
-  ) {
-    const renderClass = (theme as ThemeOptions<AnyRichTextOptions>).tags[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  function withRenderClass(
-    clazz: keyof ThemeOptions<AnyRichTextOptions>["classes"],
-    current?: string
-  ) {
-    const renderClass = (theme as ThemeOptions<AnyRichTextOptions>).classes[
-      clazz
-    ];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-
-  function toReact(
-    node: RichTextNode<AnyRichTextOptions>,
-    key: number | string
-  ): React.ReactNode {
-    if (typeof node === "string") {
-      return node;
-    }
-    if (node.tag === "p") {
-      return (
-        <p className={withRenderTag("p")} key={key}>
-          {node.children.map(toReact)}
-        </p>
-      );
-    }
-    if (node.tag === "img") {
-      return <img className={withRenderTag("img")} key={key} src={node.src} />;
-    }
-    if (node.tag === "ul") {
-      return (
-        <ul className={withRenderTag("ul")} key={key}>
-          {node.children.map(toReact)}
-        </ul>
-      );
-    }
-    if (node.tag === "ol") {
-      return (
-        <ol className={withRenderTag("ol")} key={key}>
-          {node.children.map(toReact)}
-        </ol>
-      );
-    }
-    if (node.tag === "li") {
-      return (
-        <li className={withRenderTag("li")} key={key}>
-          {node.children.map(toReact)}
-        </li>
-      );
-    }
-    if (node.tag === "span") {
-      return (
-        <span
-          key={key}
-          className={node.classes
-            .map((nodeClass) => {
-              switch (nodeClass) {
-                case "bold":
-                  return withRenderClass("bold");
-                case "line-through":
-                  return withRenderClass("lineThrough");
-                case "italic":
-                  return withRenderClass("italic");
-              }
-            })
-            .join(" ")}
-        >
-          {node.children.map(toReact)}
-        </span>
-      );
-    }
-    if (node.tag === "h1") {
-      return (
-        <h1 className={withRenderTag("h1")} key={key}>
-          {node.children.map(toReact)}
-        </h1>
-      );
-    }
-    if (node.tag === "h2") {
-      return (
-        <h2 className={withRenderTag("h2")} key={key}>
-          {node.children.map(toReact)}
-        </h2>
-      );
-    }
-    if (node.tag === "h3") {
-      return (
-        <h3 className={withRenderTag("h3")} key={key}>
-          {node.children.map(toReact)}
-        </h3>
-      );
-    }
-    if (node.tag === "h4") {
-      return (
-        <h4 className={withRenderTag("h4")} key={key}>
-          {node.children.map(toReact)}
-        </h4>
-      );
-    }
-    if (node.tag === "h5") {
-      return (
-        <h5 className={withRenderTag("h5")} key={key}>
-          {node.children.map(toReact)}
-        </h5>
-      );
-    }
-    if (node.tag === "h6") {
-      return (
-        <h6 className={withRenderTag("h6")} key={key}>
-          {node.children.map(toReact)}
-        </h6>
-      );
-    }
-
-    if (node.tag === "br") {
-      return <br key={key} />;
-    }
-    if (node.tag === "a") {
-      return (
-        <a href={node.href} key={key}>
-          {node.children.map(toReact)}
-        </a>
-      );
-    }
-    console.error("Unknown tag", node.tag);
-    const _exhaustiveCheck: never = node.tag;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const anyNode = _exhaustiveCheck as any;
-    if (!anyNode?.tag) {
-      return null;
-    }
-    return React.createElement(anyNode.tag, {
-      key,
-      className: anyNode.class?.join(" "),
-      children: anyNode.children?.map(toReact),
-    });
-  }
-
-  return <div data-val-path={root.valPath}>{root.children.map(toReact)}</div>;
-}

package/src/ValStore.ts

@@ -1,110 +0,0 @@
-import { Json, ModuleId, ValApi } from "@valbuild/core";
-import { result } from "@valbuild/core/fp";
-import { IValStore } from "@valbuild/ui";
-
-type SubscriberId = string & {
-  readonly _tag: unique symbol;
-};
-
-export class ValStore implements IValStore {
-  private readonly subscribers: Map<SubscriberId, Record<ModuleId, Json>>; // uncertain whether this is the optimal way of returning
-  private readonly listeners: Record<SubscriberId, (() => void)[]>;
-
-  constructor(private readonly api: ValApi) {
-    this.subscribers = new Map();
-    this.listeners = {};
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async update(moduleIds: ModuleId[]) {
-    // TODO: update only the modules that have changed
-    return this.updateAll();
-  }
-
-  async updateAll() {
-    const data = await this.api.getModules({
-      patch: true,
-      includeSource: true,
-    });
-    if (result.isOk(data)) {
-      const updatedSubscriberIds = new Map<SubscriberId, ModuleId[]>();
-      const subscriberIds = Array.from(this.subscribers.keys());
-
-      // Figure out which modules have been updated and map to updated subscribed id
-      for (const moduleId of Object.keys(data.value.modules) as ModuleId[]) {
-        const source = data.value.modules[moduleId].source;
-        if (typeof source !== "undefined") {
-          const updatedSubscriberId = subscriberIds.find(
-            (subscriberId) => subscriberId.includes(moduleId) // NOTE: dependent on
-          );
-          if (updatedSubscriberId) {
-            updatedSubscriberIds.set(
-              updatedSubscriberId,
-              (updatedSubscriberIds.get(updatedSubscriberId) || []).concat(
-                moduleId
-              )
-            );
-          }
-        }
-      }
-
-      // For all updated subscribers: set new module data and emit change
-      for (const [updatedSubscriberId, moduleIds] of Array.from(
-        updatedSubscriberIds.entries()
-      )) {
-        const subscriberModules = Object.fromEntries(
-          moduleIds.flatMap((moduleId) => {
-            const source = data.value.modules[moduleId].source;
-            if (!source) {
-              return [];
-            }
-            return [[moduleId, source]];
-          })
-        );
-        this.subscribers.set(updatedSubscriberId, subscriberModules);
-        this.emitChange(updatedSubscriberId);
-      }
-    } else {
-      console.error("Val: failed to update modules", data.error.message);
-    }
-  }
-
-  subscribe = (moduleIds: ModuleId[]) => (listener: () => void) => {
-    const subscriberId = createSubscriberId(moduleIds);
-    if (!this.listeners[subscriberId]) {
-      this.listeners[subscriberId] = [];
-      this.subscribers.set(subscriberId, {});
-    }
-    this.listeners[subscriberId].push(listener);
-
-    return () => {
-      this.listeners[subscriberId].splice(
-        this.listeners[subscriberId].indexOf(listener),
-        1
-      );
-    };
-  };
-
-  private emitChange(subscriberId: SubscriberId) {
-    for (const listener of this.listeners[subscriberId]) {
-      listener();
-    }
-  }
-
-  getSnapshot = (moduleIds: ModuleId[]) => () => {
-    return this.get(moduleIds);
-  };
-
-  getServerSnapshot = (moduleIds: ModuleId[]) => () => {
-    return this.get(moduleIds);
-  };
-
-  get = (moduleIds: ModuleId[]): Record<ModuleId, Json> | undefined => {
-    const subscriberId = createSubscriberId(moduleIds);
-    return this.subscribers.get(subscriberId);
-  };
-}
-
-function createSubscriberId(moduleIds: ModuleId[]): SubscriberId {
-  return moduleIds.slice().sort().join("&") as SubscriberId;
-}

package/src/ValUI.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Internal } from "@valbuild/core";
-import { Style, ValOverlay } from "@valbuild/ui";
-import { useEffect, useState } from "react";
-import { ShadowRoot } from "./ShadowRoot";
-import { useValApi, useValStore } from "./ValProvider";
-
-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();
-  const store = useValStore();
-  useEffect(() => {
-    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);
-    }
-    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);
-    }
-  }, []);
-  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
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          zIndex: 8999, // 1 less than the NextJS error z-index: 9000
-        }}
-      >
-        {/* TODO: */}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap"
-          rel="stylesheet"
-        />
-        <Style />
-        <ValOverlay api={api} store={store} />
-      </ShadowRoot>
-    </>
-  );
-}

package/src/assets.ts

@@ -1,124 +0,0 @@
-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/index.ts

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

package/src/jsx-dev-runtime.js

@@ -1,47 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

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

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

package/src/jsx-runtime.js

@@ -1,52 +0,0 @@
-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);
-}

package/src/stega/autoTagJSX.ts

@@ -1,81 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import jsxRuntime from "react/jsx-runtime";
-import jsxRuntimeDev from "react/jsx-dev-runtime";
-import React from "react";
-import {
-  vercelStegaSplit,
-  vercelStegaDecode,
-  VERCEL_STEGA_REGEX,
-} from "@vercel/stega";
-
-const isIntrinsicElement = (type: any) => {
-  // TODO: think this is not correct, but good enough for now?
-  return typeof type === "string";
-};
-
-const addValPathIfFound = (type: any, props: any) => {
-  const valSources: any = [];
-  if (props && typeof props === "object") {
-    for (const [key, value] of Object.entries(props)) {
-      if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
-        const encodedBits = vercelStegaDecode(value);
-        if (!encodedBits || typeof encodedBits !== "object") continue;
-        if (
-          "origin" in encodedBits &&
-          "data" in encodedBits &&
-          typeof encodedBits.data === "object" &&
-          encodedBits.data &&
-          "valPath" in encodedBits.data
-        ) {
-          const valPath = encodedBits?.data?.valPath;
-          if (valPath) {
-            valSources.push(valPath);
-            props[key] = isIntrinsicElement(type)
-              ? vercelStegaSplit(value).cleaned
-              : value;
-            props[`data-val-attr-${key}`] = valPath;
-          }
-        }
-      }
-    }
-
-    if (valSources.length > 0) {
-      props["data-val-path"] = valSources.join(",");
-    }
-  }
-};
-
-function WrapJsx<T>(jsx: T): T {
-  if (typeof jsx !== "function") return jsx;
-
-  return function (type: any, props: any, ...rest: any[]) {
-    addValPathIfFound(type, props);
-    return jsx.call(jsx, type, props, ...rest);
-  } as any as T;
-}
-
-interface JsxRuntimeModule {
-  jsx?(type: any, ...rest: any[]): unknown;
-  jsxs?(type: any, ...rest: any[]): unknown;
-  jsxDEV?(type: any, ...rest: any[]): unknown;
-}
-
-export function autoTagJSX() {
-  const JsxPro: JsxRuntimeModule = jsxRuntime;
-  const JsxDev: JsxRuntimeModule = jsxRuntimeDev;
-
-  /**
-   * createElement _may_ be called by jsx runtime as a fallback in certain cases,
-   * so we need to wrap it regardless.
-   *
-   * The jsx exports depend on the `NODE_ENV` var to ensure the users' bundler doesn't
-   * include both, so one of them will be set with `undefined` values.
-   */
-  React.createElement = WrapJsx(React.createElement);
-  JsxDev.jsx && /*   */ (JsxDev.jsx = WrapJsx(JsxDev.jsx));
-  JsxPro.jsx && /*   */ (JsxPro.jsx = WrapJsx(JsxPro.jsx));
-  JsxDev.jsxs && /*  */ (JsxDev.jsxs = WrapJsx(JsxDev.jsxs));
-  JsxPro.jsxs && /*  */ (JsxPro.jsxs = WrapJsx(JsxPro.jsxs));
-  JsxDev.jsxDEV && /**/ (JsxDev.jsxDEV = WrapJsx(JsxDev.jsxDEV));
-  JsxPro.jsxDEV && /**/ (JsxPro.jsxDEV = WrapJsx(JsxPro.jsxDEV));
-}

package/src/stega/index.ts

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

package/src/stega/stegaEncode.test.ts

@@ -1,154 +0,0 @@
-import { getModuleIds, stegaEncode } from "./stegaEncode";
-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`Test`,
-        n: 1,
-        b: true,
-      },
-      {
-        image: val.file("/public/test2.png", {
-          sha256: "1232",
-          width: 100,
-          height: 100,
-        }),
-        text: val.richtext`Test`,
-        n: 2,
-        b: false,
-      },
-    ]);
-    const transformed = stegaEncode(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 = stegaEncode(
-      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("Dont stegaEncode raw strings schema", () => {
-    const schema = s.object({ str: s.string(), rawStr: s.string().raw() });
-    const transformed = stegaEncode(
-      val.content("/test1", schema, { str: "one", rawStr: "two" }),
-      {}
-    );
-    //expect(transformed.str).toStrictEqual("one");
-    expect(transformed.rawStr).toStrictEqual("two");
-  });
-  test("transform with get modules", () => {
-    const schema = s.array(s.string());
-    const transformed = stegaEncode(
-      {
-        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",
-    });
-  });
-});

package/src/stega/stegaEncode.ts

@@ -1,247 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  Json,
-  Internal,
-  RichTextSource,
-  RichText,
-  VAL_EXTENSION,
-  FILE_REF_PROP,
-} from "@valbuild/core";
-import { vercelStegaCombine } from "@vercel/stega";
-import { FileSource, Source, SourceObject } from "@valbuild/core";
-import { JsonPrimitive } from "@valbuild/core";
-import { SourceArray } from "@valbuild/core";
-import { parseRichTextSource } from "@valbuild/ui";
-import { RawString } from "@valbuild/core/src/schema/string";
-
-declare const brand: unique symbol;
-
-/**
- * ValEncodedString is a string that is encoded using steganography.
- *
- * This means that there is a hidden / non-visible object embedded in the string.
- * This object includes a path, which is used to automatically tag
- * where the content comes from for contextual editing.
- *
- */
-export type ValEncodedString = string & {
-  [brand]: "ValEncodedString";
-};
-
-export type StegaOfSource<T extends Source> = Json extends T
-  ? Json
-  : T extends RichTextSource<infer O>
-  ? RichText<O>
-  : T extends FileSource
-  ? { url: ValEncodedString }
-  : T extends SourceObject
-  ? {
-      [key in keyof T]: StegaOfSource<T[key]>;
-    }
-  : T extends SourceArray
-  ? StegaOfSource<T[number]>[]
-  : T extends RawString
-  ? string
-  : T extends string
-  ? ValEncodedString
-  : T extends JsonPrimitive
-  ? T
-  : never;
-
-export function stegaEncode(
-  input: any,
-  opts: {
-    getModule?: (moduleId: string) => any;
-    disabled?: boolean;
-  }
-): any {
-  function rec(
-    sourceOrSelector: any,
-    recOpts?: { path: any; schema: any }
-  ): any {
-    if (typeof sourceOrSelector === "object") {
-      if (!sourceOrSelector) {
-        return null;
-      }
-      const selectorPath = Internal.getValPath(sourceOrSelector);
-      if (selectorPath) {
-        const newSchema = Internal.getSchema(sourceOrSelector);
-        return rec(
-          (opts.getModule && opts.getModule(selectorPath)) ||
-            Internal.getSource(sourceOrSelector),
-          opts.disabled ? undefined : { path: selectorPath, schema: newSchema }
-        );
-      }
-
-      if (VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
-          if (recOpts?.path) {
-            return {
-              ...parseRichTextSource(sourceOrSelector),
-              valPath: recOpts.path,
-            };
-          }
-
-          return parseRichTextSource(sourceOrSelector);
-        }
-
-        if (
-          sourceOrSelector[VAL_EXTENSION] === "file" &&
-          typeof sourceOrSelector[FILE_REF_PROP] === "string"
-        ) {
-          const fileSelector = Internal.convertFileSource(sourceOrSelector);
-          return {
-            ...fileSelector,
-            url: rec(fileSelector.url, recOpts),
-          };
-        }
-        console.error(
-          `Encountered unexpected extension: ${sourceOrSelector[VAL_EXTENSION]}`
-        );
-        return sourceOrSelector;
-      }
-
-      if (Array.isArray(sourceOrSelector)) {
-        return sourceOrSelector.map((el, i) =>
-          rec(
-            el,
-            recOpts && {
-              path: Internal.createValPathOfItem(recOpts.path, i),
-              schema: recOpts.schema.item,
-            }
-          )
-        );
-      }
-
-      if (!Array.isArray(sourceOrSelector)) {
-        const res: Record<string, any> = {};
-        for (const [key, value] of Object.entries(sourceOrSelector)) {
-          res[key] = rec(
-            value,
-            recOpts && {
-              path: Internal.createValPathOfItem(recOpts.path, key),
-              schema:
-                recOpts.schema.item || // Record
-                recOpts.schema.items[key], // Object
-            }
-          );
-        }
-        return res;
-      }
-
-      console.error(
-        `Could not transform source selector: ${typeof sourceOrSelector} (array: ${Array.isArray(
-          sourceOrSelector
-        )})`,
-        sourceOrSelector
-      );
-      return sourceOrSelector;
-    }
-
-    if (typeof sourceOrSelector === "string") {
-      if (!recOpts) {
-        return sourceOrSelector;
-      }
-      if (recOpts.schema.isRaw) {
-        return sourceOrSelector;
-      }
-      return vercelStegaCombine(
-        sourceOrSelector,
-        {
-          origin: "val.build",
-          data: { valPath: recOpts.path },
-        },
-        false // auto detection on urls and dates is disabled, isDate could be used but it is also disabled (users should use a date schema instead): isDate(sourceOrSelector) // skip = true if isDate
-      );
-    }
-
-    if (
-      typeof sourceOrSelector === "number" ||
-      typeof sourceOrSelector === "boolean"
-    ) {
-      return sourceOrSelector;
-    }
-
-    console.error(
-      `Unexpected type of source selector: ${typeof sourceOrSelector}`
-    );
-    return sourceOrSelector;
-  }
-  return rec(input);
-}
-
-export function getModuleIds(input: any): string[] {
-  const modules: Set<string> = new Set();
-  function rec(sourceOrSelector: any): undefined {
-    if (typeof sourceOrSelector === "object") {
-      if (!sourceOrSelector) {
-        return;
-      }
-      const selectorPath = Internal.getValPath(sourceOrSelector);
-      if (selectorPath) {
-        modules.add(selectorPath);
-        return;
-      }
-
-      if (VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
-          return;
-        }
-
-        if (
-          sourceOrSelector[VAL_EXTENSION] === "file" &&
-          typeof sourceOrSelector[FILE_REF_PROP] === "string"
-        ) {
-          return;
-        }
-        console.error(
-          `Encountered unexpected extension: ${sourceOrSelector[VAL_EXTENSION]}`
-        );
-        return sourceOrSelector;
-      }
-
-      if (Array.isArray(sourceOrSelector)) {
-        sourceOrSelector.forEach(rec);
-        return;
-      }
-
-      if (!Array.isArray(sourceOrSelector)) {
-        for (const [, value] of Object.entries(sourceOrSelector)) {
-          rec(value);
-        }
-        return;
-      }
-
-      console.error(
-        `Could not transform source selector: ${typeof sourceOrSelector} (array: ${Array.isArray(
-          sourceOrSelector
-        )})`,
-        sourceOrSelector
-      );
-      return;
-    }
-
-    if (typeof sourceOrSelector === "string") {
-      return;
-    }
-
-    if (
-      typeof sourceOrSelector === "number" ||
-      typeof sourceOrSelector === "boolean"
-    ) {
-      return;
-    }
-
-    console.error(
-      `Unexpected type of source selector: ${typeof sourceOrSelector}`
-    );
-    return;
-  }
-  rec(input);
-  return Array.from(modules);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function isDate(s: string) {
-  return Boolean(Date.parse(s));
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "strict": true,
-    "allowJs": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "@valbuild/react",
-    "lib": ["es6", "dom"],
-    "module": "CommonJS",
-    "noEmit": true,
-    "target": "ES5",
-    "outDir": "dist",
-    "rootDir": "src",
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["dist/**", "jsx-runtime/dist/**", "jsx-dev-runtime/dist/**"]
-}