@valbuild/react 0.16.0 → 0.18.0

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-0eb0bcdb.cjs.prod.js');
+var _typeof = require('../../dist/typeof-16c77f45.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-5bddfa58.cjs.prod.js');
 var core = require('@valbuild/core');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
-require('../../dist/unsupportedIterableToArray-afbea1dd.cjs.prod.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -38,7 +38,7 @@ var devalProps = function devalProps(type, props) {
       var _Object$entries$_i = slicedToArray._slicedToArray(_Object$entries[_i], 2),
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
-      if (slicedToArray._typeof(value) === "object" && value !== null && "val" in value) {
+      if (_typeof._typeof(value) === "object" && value !== null && "val" in value) {
         var valPath = core.Internal.getValPath(value);
         if (valPath) {
           valSources.push(valPath);

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

@@ -1,8 +1,8 @@
-import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-d846e1d2.esm.js';
+import { _ as _typeof } from '../../dist/typeof-5c86a240.esm.js';
+import { a as _slicedToArray } from '../../dist/slicedToArray-b4fb91fa.esm.js';
 import { Internal } from '@valbuild/core';
 import * as jsxRuntimeDev 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,8 +1,8 @@
-import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-9e7d1407.worker.esm.js';
+import { _ as _typeof } from '../../dist/typeof-8854ace1.worker.esm.js';
+import { a as _slicedToArray } from '../../dist/slicedToArray-5a51fd33.worker.esm.js';
 import { Internal } from '@valbuild/core';
 import * as jsxRuntimeDev 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,8 +1,8 @@
-import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-1a246338.browser.esm.js';
+import { _ as _typeof } from '../../dist/typeof-52fabea9.browser.esm.js';
+import { a as _slicedToArray } from '../../dist/slicedToArray-0cbb3d34.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,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-b7cf26e0.cjs.dev.js');
+var _typeof = require('../../dist/typeof-1de657a3.cjs.dev.js');
+var slicedToArray = require('../../dist/slicedToArray-7b1713a7.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;
@@ -38,7 +38,7 @@ var devalProps = function devalProps(type, props) {
       var _Object$entries$_i = slicedToArray._slicedToArray(_Object$entries[_i], 2),
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
-      if (slicedToArray._typeof(value) === "object" && value !== null && "val" in value) {
+      if (_typeof._typeof(value) === "object" && value !== null && "val" in value) {
         var valPath = core.Internal.getValPath(value);
         if (valPath) {
           valSources.push(valPath);

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-0eb0bcdb.cjs.prod.js');
+var _typeof = require('../../dist/typeof-16c77f45.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-5bddfa58.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;
@@ -38,7 +38,7 @@ var devalProps = function devalProps(type, props) {
       var _Object$entries$_i = slicedToArray._slicedToArray(_Object$entries[_i], 2),
         key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
-      if (slicedToArray._typeof(value) === "object" && value !== null && "val" in value) {
+      if (_typeof._typeof(value) === "object" && value !== null && "val" in value) {
         var valPath = core.Internal.getValPath(value);
         if (valPath) {
           valSources.push(valPath);

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

@@ -1,8 +1,8 @@
-import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-d846e1d2.esm.js';
+import { _ as _typeof } from '../../dist/typeof-5c86a240.esm.js';
+import { a as _slicedToArray } from '../../dist/slicedToArray-b4fb91fa.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,8 +1,8 @@
-import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-9e7d1407.worker.esm.js';
+import { _ as _typeof } from '../../dist/typeof-8854ace1.worker.esm.js';
+import { a as _slicedToArray } from '../../dist/slicedToArray-5a51fd33.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,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "private": false,
   "description": "Val - React internal helpers",
   "sideEffects": false,
@@ -9,8 +9,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.16.0",
-    "@valbuild/ui": "~0.15.0",
+    "@valbuild/core": "~0.18.0",
+    "@valbuild/ui": "~0.18.0",
     "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2",
     "style-to-object": "^0.4.1"

package/src/ValProvider.tsx

@@ -1,8 +1,7 @@
-"use client";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { lazy, useContext, useMemo } from "react";
-import { ValApi } from "./ValApi";
 import { ValStore } from "./ValStore";
+import { ValApi } from "@valbuild/core";
 
 export function useValStore() {
   return useContext(ValContext).valStore;
@@ -42,7 +41,7 @@ export function ValProvider({ host = "/api/val", children }: ValProviderProps) {
   return (
     <ValContext.Provider value={{ valApi, valStore }}>
       {children}
-      {ValUI && <ValUI valApi={valApi} valStore={valStore} />}
+      {ValUI && <ValUI />}
     </ValContext.Provider>
   );
 }

package/src/ValStore.ts

@@ -1,62 +1,112 @@
-import { ValModule, SelectorSource } from "@valbuild/core";
-import { ValApi } from "./ValApi";
+import { Json, ModuleId, ValApi } from "@valbuild/core";
+import { result } from "@valbuild/core/fp";
+
+type SubscriberId = string & {
+  readonly _tag: unique symbol;
+};
 
 export class ValStore {
-  private readonly vals: Map<string, ValModule<SelectorSource>>;
-  private readonly listeners: { [moduleId: string]: (() => void)[] };
+  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.vals = new Map();
+    this.subscribers = 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))
-        // );
-      })
-    );
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async update(moduleIds: ModuleId[]) {
+    // TODO: update only the modules that have changed
+    return this.updateAll();
   }
 
-  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];
+  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
+              )
+            );
+          }
+        }
       }
-    };
-  };
 
-  set(moduleId: string, val: ValModule<SelectorSource>) {
-    this.vals.set(moduleId, val);
-    this.emitChange(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);
+    }
   }
 
-  get(moduleId: string) {
-    return this.vals.get(moduleId);
-  }
+  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
+      );
+    };
+  };
 
-  emitChange(moduleId: string) {
-    const listeners = this.listeners[moduleId];
-    if (typeof listeners === "undefined") return;
-    for (const listener of listeners) {
+  private emitChange(subscriberId: SubscriberId) {
+    console.log("emitChange");
+    for (const listener of this.listeners[subscriberId]) {
       listener();
     }
   }
 
-  getSnapshot = (moduleId: string) => () => {
-    return this.vals.get(moduleId);
+  getSnapshot = (moduleIds: ModuleId[]) => () => {
+    console.log("getSnapshot", moduleIds);
+    return this.get(moduleIds);
   };
 
-  getServerSnapshot = (moduleId: string) => () => {
-    return this.vals.get(moduleId);
+  getServerSnapshot = (moduleIds: ModuleId[]) => () => {
+    console.log("getServerSnapshot", moduleIds);
+    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;
 }