@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

package/dist/esm/runtimes/react/css-runtime/serialize-css.js

@@ -0,0 +1,25 @@
+import { serializeStyles as emotionSerializeStyles } from "@emotion/serialize";
+import { serialize, compile, stringify, prefixer, middleware } from "stylis";
+function toCssStatements(stylesObject, className) {
+  const { content: rawCssContent, contentHash } = toRawCss([stylesObject]);
+  const classNameRawCss = `.${className} {${rawCssContent}}`;
+  const css = processCss({ content: classNameRawCss });
+  return { css, contentHash };
+}
+function processCss({ content }) {
+  const cssElementTree = compile(content);
+  return serialize(cssElementTree, middleware([prefixer, stringify]));
+}
+function toRawCss(styles) {
+  const emotionSerializationResult = emotionSerializeStyles(styles);
+  return {
+    content: emotionSerializationResult.styles,
+    contentHash: emotionSerializationResult.name
+  };
+}
+export {
+  processCss,
+  toCssStatements,
+  toRawCss
+};
+//# sourceMappingURL=serialize-css.js.map

package/dist/esm/runtimes/react/css-runtime/serialize-css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/serialize-css.ts"],"sourcesContent":["import { CSSObject, serializeStyles as emotionSerializeStyles } from '@emotion/serialize'\nimport { serialize, compile, stringify, prefixer, middleware } from 'stylis'\n\n/**\n * Creates a css string from the styles object and provided class name.\n *\n * The output of this function is the \"final\" css that is intended to be used directly\n * as `<style>` content, constructible stylesheet content, etc.\n *\n * For \"controlled\" styles, this represents the last step in the conversion of:\n *    Makeswift prop data -> JS styles object -> css string\n *\n * For \"uncontrolled\" styles, this is used to convert an inline JS styles object\n * into a css string.\n */\nexport function toCssStatements(\n  stylesObject: CSSObject,\n  className: string,\n): { css: string; contentHash: string } {\n  const { content: rawCssContent, contentHash } = toRawCss([stylesObject])\n  const classNameRawCss = `.${className} {${rawCssContent}}`\n  const css = processCss({ content: classNameRawCss })\n  return { css, contentHash }\n}\n\n/**\n * This is a layer in the css pipeline that uses a css preprocessor\n * to apply select transformations to \"raw\" css input.\n *\n * Converts the inputted css content into an abstract syntax tree for manipulation\n * (performing unnesting, applying vendor prefixes, etc.). Re-serializes and returns\n * the transformed css string.\n */\nexport function processCss({ content }: { content: string }): string {\n  const cssElementTree = compile(content)\n  return serialize(cssElementTree, middleware([prefixer, stringify]))\n}\n\n/**\n * Uses Emotion's `serializeStyles` function to create a css string\n * which is returned along with a content hash.\n *\n * The resulting css content is \"raw\" in the sense that it hasn't been passed\n * through our css preprocessing layer.\n */\nexport function toRawCss(styles: Array<CSSObject>): { content: string; contentHash: string } {\n  const emotionSerializationResult = emotionSerializeStyles(styles)\n  return {\n    content: emotionSerializationResult.styles,\n    contentHash: emotionSerializationResult.name,\n  }\n}\n"],"mappings":"AAAA,SAAoB,mBAAmB,8BAA8B;AACrE,SAAS,WAAW,SAAS,WAAW,UAAU,kBAAkB;AAc7D,SAAS,gBACd,cACA,WACsC;AACtC,QAAM,EAAE,SAAS,eAAe,YAAY,IAAI,SAAS,CAAC,YAAY,CAAC;AACvE,QAAM,kBAAkB,IAAI,SAAS,KAAK,aAAa;AACvD,QAAM,MAAM,WAAW,EAAE,SAAS,gBAAgB,CAAC;AACnD,SAAO,EAAE,KAAK,YAAY;AAC5B;AAUO,SAAS,WAAW,EAAE,QAAQ,GAAgC;AACnE,QAAM,iBAAiB,QAAQ,OAAO;AACtC,SAAO,UAAU,gBAAgB,WAAW,CAAC,UAAU,SAAS,CAAC,CAAC;AACpE;AASO,SAAS,SAAS,QAAoE;AAC3F,QAAM,6BAA6B,uBAAuB,MAAM;AAChE,SAAO;AAAA,IACL,SAAS,2BAA2B;AAAA,IACpC,aAAa,2BAA2B;AAAA,EAC1C;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/style-element-updater.js

@@ -0,0 +1,32 @@
+class StyleElementUpdater {
+  constructor() {
+  }
+  apply({ className, css }) {
+    const styleElement = this.findStyleElement(className);
+    if (styleElement) {
+      styleElement.textContent = css;
+    }
+  }
+  findStyleElement(className) {
+    const matchingStyleElements = document.querySelectorAll(
+      `style[data-href="${className}"]`
+    );
+    if (matchingStyleElements.length === 0) {
+      console.warn(
+        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found no corresponding style element`
+      );
+      return null;
+    }
+    if (matchingStyleElements.length > 1) {
+      console.warn(
+        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found multiple corresponding style elements`
+      );
+      return null;
+    }
+    return matchingStyleElements[0];
+  }
+}
+export {
+  StyleElementUpdater
+};
+//# sourceMappingURL=style-element-updater.js.map

package/dist/esm/runtimes/react/css-runtime/style-element-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/style-element-updater.ts"],"sourcesContent":["import { BrowserStyleApplier } from './types'\n\nexport class StyleElementUpdater implements BrowserStyleApplier {\n  constructor() {}\n\n  apply({ className, css }: { className: string; css: string }): void {\n    const styleElement = this.findStyleElement(className)\n    if (styleElement) {\n      styleElement.textContent = css\n    }\n  }\n\n  private findStyleElement(className: string): HTMLStyleElement | null {\n    const matchingStyleElements = document.querySelectorAll<HTMLStyleElement>(\n      `style[data-href=\"${className}\"]`,\n    )\n    if (matchingStyleElements.length === 0) {\n      console.warn(\n        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found no corresponding style element`,\n      )\n      return null\n    }\n    if (matchingStyleElements.length > 1) {\n      console.warn(\n        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found multiple corresponding style elements`,\n      )\n      return null\n    }\n    return matchingStyleElements[0]\n  }\n}\n"],"mappings":"AAEO,MAAM,oBAAmD;AAAA,EAC9D,cAAc;AAAA,EAAC;AAAA,EAEf,MAAM,EAAE,WAAW,IAAI,GAA6C;AAClE,UAAM,eAAe,KAAK,iBAAiB,SAAS;AACpD,QAAI,cAAc;AAChB,mBAAa,cAAc;AAAA,IAC7B;AAAA,EACF;AAAA,EAEQ,iBAAiB,WAA4C;AACnE,UAAM,wBAAwB,SAAS;AAAA,MACrC,oBAAoB,SAAS;AAAA,IAC/B;AACA,QAAI,sBAAsB,WAAW,GAAG;AACtC,cAAQ;AAAA,QACN,0EAA0E,SAAS;AAAA,MACrF;AACA,aAAO;AAAA,IACT;AACA,QAAI,sBAAsB,SAAS,GAAG;AACpC,cAAQ;AAAA,QACN,0EAA0E,SAAS;AAAA,MACrF;AACA,aAAO;AAAA,IACT;AACA,WAAO,sBAAsB,CAAC;AAAA,EAChC;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/styles-registry.js

@@ -0,0 +1,261 @@
+import { getControlledStylePrecedence, styleTagHtml } from "./utils";
+import {
+  MakeswiftStylePrecedence
+} from "./types";
+class StylesRegistry {
+  // Keyed by class name
+  uncontrolledClassStyles;
+  // Outer map keyed by namespace, inner map keyed by class name
+  namespaceControlledStyles;
+  // Keyed by keyframes name
+  keyframes;
+  // Keyed by content hash
+  cssResets;
+  // Keyed by content hash
+  baseStyles;
+  // Keyed by class name
+  controlledStylesInitialData;
+  controlledStyleWriteListeners;
+  constructor() {
+    this.uncontrolledClassStyles = /* @__PURE__ */ new Map();
+    this.namespaceControlledStyles = /* @__PURE__ */ new Map();
+    this.keyframes = /* @__PURE__ */ new Map();
+    this.cssResets = /* @__PURE__ */ new Map();
+    this.baseStyles = /* @__PURE__ */ new Map();
+    this.controlledStyleWriteListeners = /* @__PURE__ */ new Set();
+    this.controlledStylesInitialData = /* @__PURE__ */ new Map();
+  }
+  /*
+    Getters
+  */
+  getUncontrolledClassStyles() {
+    return this.uncontrolledClassStyles;
+  }
+  getControlledStyles(namespace) {
+    return this.getOrCreateControlledStylesMapForNamespace(namespace);
+  }
+  getKeyframes() {
+    return this.keyframes;
+  }
+  getCssResets() {
+    return this.cssResets;
+  }
+  getBaseStyles() {
+    return this.baseStyles;
+  }
+  /*
+    Setters
+  */
+  setControlledStyle({
+    namespace,
+    className,
+    data
+  }) {
+    const namespaceControlledStyleData = this.getOrCreateControlledStylesMapForNamespace(namespace);
+    const previousData = namespaceControlledStyleData.get(className);
+    if (previousData != null && previousData.contentHash === data.contentHash) {
+      return;
+    }
+    namespaceControlledStyleData.set(className, data);
+    let initialData = this.controlledStylesInitialData.get(className);
+    if (initialData == null) {
+      initialData = data;
+      this.controlledStylesInitialData.set(className, data);
+    }
+    this.notifyOnControlledStyleWrite({
+      className,
+      currentData: data,
+      initialData
+    });
+  }
+  setUncontrolledClassStyle(data) {
+    this.uncontrolledClassStyles.set(data.className, data);
+  }
+  setKeyframes(data) {
+    this.keyframes.set(data.keyframesName, data);
+  }
+  setCssReset(data) {
+    this.cssResets.set(data.contentHash, data);
+  }
+  setBaseStyles(data) {
+    this.baseStyles.set(data.contentHash, data);
+  }
+  /*
+    Serialization
+  */
+  /**
+   * Creates an HTML string containing `<style>` elements for the contents of the
+   * registry, ordered by precedence (lower precedences first).
+   *
+   * This is intended to be used server-side in scenarios where we can't
+   * depend on React's hoisting behavior to place `<style>` elements in the page
+   * `<head>`.
+   *
+   * When using this for SSR, the `RootStyleRegistry` should be configured so that
+   * it does not render `<style>` elements alongside components (to avoid creating
+   * duplicates).
+   *
+   * There's an argument for providing these as an array of raw style data so
+   * that applications which render multiple React roots can deduplicate styles
+   * between them.
+   */
+  serializeToHtmlStyleTags() {
+    return this.serializeToStyleProps().map((stylePropsForPrecedence) => styleTagHtml(stylePropsForPrecedence)).join("");
+  }
+  /**
+   * Returns an array of `MakeswiftStyle` component props for the contents of the
+   * registry, ordered by precedence (lower precedences first).
+   *
+   * It might be desirable in some cases to avoid filtering out empty data, since
+   * an empty `<style>` tag in the page `<head>` can still serve as an anchor to
+   * which client-side React can hoist `<style>`s added after page load.
+   */
+  serializeToStyleProps(includeEmpty = false) {
+    const resetPrecedenceStylesProps = this.getPropsForResetPrecedenceStyles();
+    const mediumPrecedenceStylesProps = this.getPropsForMediumPrecedenceStyles();
+    const highPrecedenceStylesProps = this.getPropsForHighPrecedenceStyles();
+    const perPrecedenceProps = [
+      resetPrecedenceStylesProps,
+      mediumPrecedenceStylesProps,
+      highPrecedenceStylesProps,
+      ...this.getPropsForCustomPrecedenceStyles()
+    ];
+    return includeEmpty ? perPrecedenceProps : perPrecedenceProps.filter((props) => props.href.length > 0);
+  }
+  /*
+    Subscriptions
+  */
+  subscribeToControlledStyleWrites(listener) {
+    this.controlledStyleWriteListeners.add(listener);
+    const unsubscribe = () => {
+      this.controlledStyleWriteListeners.delete(listener);
+    };
+    return unsubscribe;
+  }
+  notifyOnControlledStyleWrite({
+    className,
+    currentData,
+    initialData
+  }) {
+    if (this.controlledStyleWriteListeners.size > 0) {
+      queueMicrotask(() => {
+        for (const listener of this.controlledStyleWriteListeners) {
+          try {
+            listener({ className, currentData, initialData });
+          } catch (e) {
+            console.error(`Error notifying listener for className ${className}:`, e);
+          }
+        }
+      });
+    }
+  }
+  /*
+    Helpers
+  */
+  getOrCreateControlledStylesMapForNamespace(namespace) {
+    let namespaceControlledStyles = this.namespaceControlledStyles.get(namespace);
+    if (namespaceControlledStyles == null) {
+      namespaceControlledStyles = /* @__PURE__ */ new Map();
+      this.namespaceControlledStyles.set(namespace, namespaceControlledStyles);
+    }
+    return namespaceControlledStyles;
+  }
+  getAllControlledStyles() {
+    const result = /* @__PURE__ */ new Map();
+    const controlledStyleNamespaces = Array.from(this.namespaceControlledStyles.keys());
+    for (const namespace of controlledStyleNamespaces) {
+      const namespaceControlledStyles = this.namespaceControlledStyles.get(namespace);
+      if (namespaceControlledStyles == null)
+        continue;
+      for (const [className, data] of namespaceControlledStyles.entries()) {
+        result.set(className, data);
+      }
+    }
+    return result;
+  }
+  getPropsForResetPrecedenceStyles() {
+    const cssResets = this.getCssResets();
+    const hrefValues = new Array();
+    const allCss = new Array();
+    for (const [contentHash, cssResetData] of cssResets.entries()) {
+      hrefValues.push(`makeswift-css-reset-${contentHash}`);
+      allCss.push(cssResetData.css);
+    }
+    const combinedHref = hrefValues.join(" ");
+    const combinedCss = allCss.join("");
+    return {
+      href: combinedHref,
+      css: combinedCss,
+      precedence: MakeswiftStylePrecedence.RESET
+    };
+  }
+  getPropsForMediumPrecedenceStyles() {
+    const styles = this.getUncontrolledClassStyles();
+    const keyframes = this.getKeyframes();
+    const hrefValues = new Array();
+    const allCss = new Array();
+    for (const [className, uncontrolledStyleData] of styles.entries()) {
+      hrefValues.push(className);
+      allCss.push(uncontrolledStyleData.css);
+    }
+    for (const [keyframesName, keyframesData] of keyframes.entries()) {
+      hrefValues.push(keyframesName);
+      allCss.push(keyframesData.css);
+    }
+    const combinedHref = hrefValues.join(" ");
+    const combinedCss = allCss.join("");
+    return {
+      href: combinedHref,
+      css: combinedCss,
+      precedence: MakeswiftStylePrecedence.MEDIUM
+    };
+  }
+  getPropsForHighPrecedenceStyles() {
+    const baseStyles = this.getBaseStyles();
+    const hrefValues = new Array();
+    const allCss = new Array();
+    for (const [contentHash, baseStylesData] of baseStyles.entries()) {
+      hrefValues.push(`makeswift-base-styles-${contentHash}`);
+      allCss.push(baseStylesData.css);
+    }
+    const combinedHref = hrefValues.join(" ");
+    const combinedCss = allCss.join("");
+    return {
+      href: combinedHref,
+      css: combinedCss,
+      precedence: MakeswiftStylePrecedence.HIGH
+    };
+  }
+  getPropsForCustomPrecedenceStyles() {
+    const controlledStyles = this.getAllControlledStyles();
+    const customPrecedenceValues = /* @__PURE__ */ new Set();
+    const customPrecedenceToHrefValues = /* @__PURE__ */ new Map();
+    const customPrecedenceToCss = /* @__PURE__ */ new Map();
+    for (const [className, controlledStyleData] of controlledStyles.entries()) {
+      const precedence = getControlledStylePrecedence(controlledStyleData);
+      customPrecedenceValues.add(precedence);
+      const hrefValues = customPrecedenceToHrefValues.get(precedence) ?? [];
+      const css = customPrecedenceToCss.get(precedence) ?? [];
+      hrefValues.push(className);
+      css.push(controlledStyleData.css);
+      customPrecedenceToHrefValues.set(precedence, hrefValues);
+      customPrecedenceToCss.set(precedence, css);
+    }
+    return Array.from(customPrecedenceValues.values()).map((customPrecedenceValue) => {
+      const hrefValues = customPrecedenceToHrefValues.get(customPrecedenceValue) ?? [];
+      const allCss = customPrecedenceToCss.get(customPrecedenceValue) ?? [];
+      const combinedHref = hrefValues.join(" ");
+      const combinedCss = allCss.join("");
+      const propsForCustomPrecedence = {
+        href: combinedHref,
+        css: combinedCss,
+        precedence: customPrecedenceValue
+      };
+      return propsForCustomPrecedence;
+    });
+  }
+}
+export {
+  StylesRegistry
+};
+//# sourceMappingURL=styles-registry.js.map

package/dist/esm/runtimes/react/css-runtime/styles-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/styles-registry.ts"],"sourcesContent":["import { getControlledStylePrecedence, styleTagHtml } from './utils'\nimport {\n  BaseStylesData,\n  ClassStyleData,\n  ControlledStyleData,\n  CssResetData,\n  KeyframesData,\n  MakeswiftStylePrecedence,\n  OnControlledStyleDataWrite,\n} from './types'\nimport { ComponentProps } from 'react'\nimport { MakeswiftStyle } from './components/makeswift-style'\n\nexport class StylesRegistry {\n  // Keyed by class name\n  private uncontrolledClassStyles: Map<string, ClassStyleData>\n\n  // Outer map keyed by namespace, inner map keyed by class name\n  private namespaceControlledStyles: Map<string, Map<string, ControlledStyleData>>\n\n  // Keyed by keyframes name\n  private keyframes: Map<string, KeyframesData>\n\n  // Keyed by content hash\n  private cssResets: Map<string, CssResetData>\n\n  // Keyed by content hash\n  private baseStyles: Map<string, BaseStylesData>\n\n  // Keyed by class name\n  private controlledStylesInitialData: Map<string, ControlledStyleData>\n  private controlledStyleWriteListeners: Set<OnControlledStyleDataWrite>\n\n  constructor() {\n    this.uncontrolledClassStyles = new Map()\n    this.namespaceControlledStyles = new Map()\n    this.keyframes = new Map()\n    this.cssResets = new Map()\n    this.baseStyles = new Map()\n    this.controlledStyleWriteListeners = new Set()\n    this.controlledStylesInitialData = new Map()\n  }\n\n  /*\n    Getters\n  */\n\n  getUncontrolledClassStyles(): ReadonlyMap<string, ClassStyleData> {\n    return this.uncontrolledClassStyles\n  }\n\n  getControlledStyles(namespace: string): ReadonlyMap<string, ControlledStyleData> {\n    return this.getOrCreateControlledStylesMapForNamespace(namespace)\n  }\n\n  getKeyframes(): ReadonlyMap<string, KeyframesData> {\n    return this.keyframes\n  }\n\n  getCssResets(): ReadonlyMap<string, CssResetData> {\n    return this.cssResets\n  }\n\n  getBaseStyles(): ReadonlyMap<string, BaseStylesData> {\n    return this.baseStyles\n  }\n\n  /*\n    Setters\n  */\n\n  setControlledStyle({\n    namespace,\n    className,\n    data,\n  }: {\n    namespace: string\n    className: string\n    data: ControlledStyleData\n  }) {\n    const namespaceControlledStyleData = this.getOrCreateControlledStylesMapForNamespace(namespace)\n\n    const previousData = namespaceControlledStyleData.get(className)\n    if (previousData != null && previousData.contentHash === data.contentHash) {\n      return\n    }\n\n    namespaceControlledStyleData.set(className, data)\n\n    let initialData = this.controlledStylesInitialData.get(className)\n    if (initialData == null) {\n      initialData = data\n      this.controlledStylesInitialData.set(className, data)\n    }\n    this.notifyOnControlledStyleWrite({\n      className,\n      currentData: data,\n      initialData,\n    })\n  }\n\n  setUncontrolledClassStyle(data: ClassStyleData) {\n    this.uncontrolledClassStyles.set(data.className, data)\n  }\n\n  setKeyframes(data: KeyframesData) {\n    this.keyframes.set(data.keyframesName, data)\n  }\n\n  setCssReset(data: CssResetData) {\n    this.cssResets.set(data.contentHash, data)\n  }\n\n  setBaseStyles(data: BaseStylesData) {\n    this.baseStyles.set(data.contentHash, data)\n  }\n\n  /*\n    Serialization\n  */\n\n  /**\n   * Creates an HTML string containing `<style>` elements for the contents of the\n   * registry, ordered by precedence (lower precedences first).\n   *\n   * This is intended to be used server-side in scenarios where we can't\n   * depend on React's hoisting behavior to place `<style>` elements in the page\n   * `<head>`.\n   *\n   * When using this for SSR, the `RootStyleRegistry` should be configured so that\n   * it does not render `<style>` elements alongside components (to avoid creating\n   * duplicates).\n   *\n   * There's an argument for providing these as an array of raw style data so\n   * that applications which render multiple React roots can deduplicate styles\n   * between them.\n   */\n  serializeToHtmlStyleTags(): string {\n    return this.serializeToStyleProps()\n      .map(stylePropsForPrecedence => styleTagHtml(stylePropsForPrecedence))\n      .join('')\n  }\n\n  /**\n   * Returns an array of `MakeswiftStyle` component props for the contents of the\n   * registry, ordered by precedence (lower precedences first).\n   *\n   * It might be desirable in some cases to avoid filtering out empty data, since\n   * an empty `<style>` tag in the page `<head>` can still serve as an anchor to\n   * which client-side React can hoist `<style>`s added after page load.\n   */\n  serializeToStyleProps(\n    includeEmpty: boolean = false,\n  ): Array<ComponentProps<typeof MakeswiftStyle>> {\n    const resetPrecedenceStylesProps = this.getPropsForResetPrecedenceStyles()\n    const mediumPrecedenceStylesProps = this.getPropsForMediumPrecedenceStyles()\n    const highPrecedenceStylesProps = this.getPropsForHighPrecedenceStyles()\n\n    const perPrecedenceProps = [\n      resetPrecedenceStylesProps,\n      mediumPrecedenceStylesProps,\n      highPrecedenceStylesProps,\n      ...this.getPropsForCustomPrecedenceStyles(),\n    ]\n    return includeEmpty\n      ? perPrecedenceProps\n      : perPrecedenceProps.filter(props => props.href.length > 0)\n  }\n\n  /*\n    Subscriptions\n  */\n  subscribeToControlledStyleWrites(listener: OnControlledStyleDataWrite): () => void {\n    this.controlledStyleWriteListeners.add(listener)\n    const unsubscribe = () => {\n      this.controlledStyleWriteListeners.delete(listener)\n    }\n    return unsubscribe\n  }\n\n  notifyOnControlledStyleWrite({\n    className,\n    currentData,\n    initialData,\n  }: {\n    className: string\n    currentData: ControlledStyleData\n    initialData: ControlledStyleData\n  }) {\n    if (this.controlledStyleWriteListeners.size > 0) {\n      queueMicrotask(() => {\n        for (const listener of this.controlledStyleWriteListeners) {\n          try {\n            listener({ className, currentData, initialData })\n          } catch (e) {\n            console.error(`Error notifying listener for className ${className}:`, e)\n          }\n        }\n      })\n    }\n  }\n\n  /*\n    Helpers\n  */\n\n  private getOrCreateControlledStylesMapForNamespace(\n    namespace: string,\n  ): Map<string, ControlledStyleData> {\n    let namespaceControlledStyles = this.namespaceControlledStyles.get(namespace)\n    if (namespaceControlledStyles == null) {\n      namespaceControlledStyles = new Map()\n      this.namespaceControlledStyles.set(namespace, namespaceControlledStyles)\n    }\n    return namespaceControlledStyles\n  }\n\n  private getAllControlledStyles(): Map<string, ControlledStyleData> {\n    const result = new Map<string, ControlledStyleData>()\n    const controlledStyleNamespaces = Array.from(this.namespaceControlledStyles.keys())\n    for (const namespace of controlledStyleNamespaces) {\n      const namespaceControlledStyles = this.namespaceControlledStyles.get(namespace)\n      if (namespaceControlledStyles == null) continue\n      for (const [className, data] of namespaceControlledStyles.entries()) {\n        result.set(className, data)\n      }\n    }\n    return result\n  }\n\n  private getPropsForResetPrecedenceStyles(): ComponentProps<typeof MakeswiftStyle> {\n    const cssResets = this.getCssResets()\n    const hrefValues = new Array<string>()\n    const allCss = new Array<string>()\n    for (const [contentHash, cssResetData] of cssResets.entries()) {\n      hrefValues.push(`makeswift-css-reset-${contentHash}`)\n      allCss.push(cssResetData.css)\n    }\n    const combinedHref = hrefValues.join(' ')\n    const combinedCss = allCss.join('')\n    return {\n      href: combinedHref,\n      css: combinedCss,\n      precedence: MakeswiftStylePrecedence.RESET,\n    }\n  }\n\n  private getPropsForMediumPrecedenceStyles(): ComponentProps<typeof MakeswiftStyle> {\n    const styles = this.getUncontrolledClassStyles()\n    const keyframes = this.getKeyframes()\n\n    const hrefValues = new Array<string>()\n    const allCss = new Array<string>()\n    for (const [className, uncontrolledStyleData] of styles.entries()) {\n      hrefValues.push(className)\n      allCss.push(uncontrolledStyleData.css)\n    }\n    for (const [keyframesName, keyframesData] of keyframes.entries()) {\n      hrefValues.push(keyframesName)\n      allCss.push(keyframesData.css)\n    }\n    const combinedHref = hrefValues.join(' ')\n    const combinedCss = allCss.join('')\n    return {\n      href: combinedHref,\n      css: combinedCss,\n      precedence: MakeswiftStylePrecedence.MEDIUM,\n    }\n  }\n\n  private getPropsForHighPrecedenceStyles(): ComponentProps<typeof MakeswiftStyle> {\n    const baseStyles = this.getBaseStyles()\n    const hrefValues = new Array<string>()\n    const allCss = new Array<string>()\n    for (const [contentHash, baseStylesData] of baseStyles.entries()) {\n      hrefValues.push(`makeswift-base-styles-${contentHash}`)\n      allCss.push(baseStylesData.css)\n    }\n    const combinedHref = hrefValues.join(' ')\n    const combinedCss = allCss.join('')\n    return {\n      href: combinedHref,\n      css: combinedCss,\n      precedence: MakeswiftStylePrecedence.HIGH,\n    }\n  }\n\n  private getPropsForCustomPrecedenceStyles(): Array<ComponentProps<typeof MakeswiftStyle>> {\n    const controlledStyles = this.getAllControlledStyles()\n    const customPrecedenceValues = new Set<string>()\n    const customPrecedenceToHrefValues = new Map<string, Array<string>>()\n    const customPrecedenceToCss = new Map<string, Array<string>>()\n    for (const [className, controlledStyleData] of controlledStyles.entries()) {\n      const precedence = getControlledStylePrecedence(controlledStyleData)\n      customPrecedenceValues.add(precedence)\n\n      const hrefValues = customPrecedenceToHrefValues.get(precedence) ?? []\n      const css = customPrecedenceToCss.get(precedence) ?? []\n\n      hrefValues.push(className)\n      css.push(controlledStyleData.css)\n\n      customPrecedenceToHrefValues.set(precedence, hrefValues)\n      customPrecedenceToCss.set(precedence, css)\n    }\n\n    return Array.from(customPrecedenceValues.values()).map(customPrecedenceValue => {\n      const hrefValues = customPrecedenceToHrefValues.get(customPrecedenceValue) ?? []\n      const allCss = customPrecedenceToCss.get(customPrecedenceValue) ?? []\n      const combinedHref = hrefValues.join(' ')\n      const combinedCss = allCss.join('')\n      const propsForCustomPrecedence: ComponentProps<typeof MakeswiftStyle> = {\n        href: combinedHref,\n        css: combinedCss,\n        precedence: customPrecedenceValue,\n      }\n      return propsForCustomPrecedence\n    })\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/runtimes/react/css-runtime/stylesheet-engine.js

@@ -0,0 +1,65 @@
+import { generateClassName } from "./utils";
+import { resolvedStyleToCss } from "../lib/resolved-style-to-css";
+import { toCssStatements } from "./serialize-css";
+class StylesheetEngine {
+  breakpointsData;
+  documentKey;
+  elementKey;
+  propPathComponents;
+  onDefineStyle;
+  classNamePrefix;
+  constructor({
+    breakpointsData,
+    documentKey,
+    elementKey,
+    propPathComponents,
+    onDefineStyle,
+    classNamePrefix
+  }) {
+    this.breakpointsData = breakpointsData;
+    this.documentKey = documentKey;
+    this.elementKey = elementKey;
+    this.propPathComponents = propPathComponents;
+    this.onDefineStyle = onDefineStyle;
+    this.classNamePrefix = classNamePrefix;
+  }
+  breakpoints() {
+    return this.breakpointsData;
+  }
+  defineStyle(resolvedStyle, onBoxModelChange) {
+    const joinedPropPath = this.propPathComponents.join(".");
+    const className = generateClassName({
+      data: this.key(),
+      classNamePrefix: this.classNamePrefix
+    });
+    const cssObject = resolvedStyleToCss(this.breakpointsData, resolvedStyle);
+    const { css, contentHash } = toCssStatements(cssObject, className);
+    this.onDefineStyle?.({
+      className,
+      css,
+      cssObject,
+      contentHash,
+      elementKey: this.elementKey,
+      joinedPropPath,
+      onBoxModelChange
+    });
+    return className;
+  }
+  child(propName) {
+    return new StylesheetEngine({
+      breakpointsData: this.breakpointsData,
+      documentKey: this.documentKey,
+      elementKey: this.elementKey,
+      propPathComponents: [...this.propPathComponents, propName],
+      onDefineStyle: this.onDefineStyle,
+      classNamePrefix: this.classNamePrefix
+    });
+  }
+  key() {
+    return `${this.documentKey}-${this.elementKey}-${this.propPathComponents.join(".")}`;
+  }
+}
+export {
+  StylesheetEngine
+};
+//# sourceMappingURL=stylesheet-engine.js.map

package/dist/esm/runtimes/react/css-runtime/stylesheet-engine.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/stylesheet-engine.ts"],"sourcesContent":["import { BoxDisplayModel, Breakpoints, ResolvedStyle, Stylesheet } from '@makeswift/controls'\nimport { generateClassName } from './utils'\nimport { ControlledStyleData } from './types'\nimport { resolvedStyleToCss } from '../lib/resolved-style-to-css'\nimport { toCssStatements } from './serialize-css'\n\nexport class StylesheetEngine implements Stylesheet {\n  private breakpointsData: Breakpoints\n  private documentKey: string\n  private elementKey: string\n  private propPathComponents: readonly string[]\n  private onDefineStyle: (data: ControlledStyleData) => void\n  private classNamePrefix?: string\n\n  constructor({\n    breakpointsData,\n    documentKey,\n    elementKey,\n    propPathComponents,\n    onDefineStyle,\n    classNamePrefix,\n  }: {\n    breakpointsData: Breakpoints\n    documentKey: string\n    elementKey: string\n    propPathComponents: readonly string[]\n    onDefineStyle: (data: ControlledStyleData) => void\n    classNamePrefix?: string\n  }) {\n    this.breakpointsData = breakpointsData\n    this.documentKey = documentKey\n    this.elementKey = elementKey\n    this.propPathComponents = propPathComponents\n    this.onDefineStyle = onDefineStyle\n    this.classNamePrefix = classNamePrefix\n  }\n\n  breakpoints(): Breakpoints {\n    return this.breakpointsData\n  }\n\n  defineStyle(\n    resolvedStyle: ResolvedStyle,\n    onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void,\n  ): string {\n    const joinedPropPath = this.propPathComponents.join('.')\n    const className = generateClassName({\n      data: this.key(),\n      classNamePrefix: this.classNamePrefix,\n    })\n    const cssObject = resolvedStyleToCss(this.breakpointsData, resolvedStyle)\n    const { css, contentHash } = toCssStatements(cssObject, className)\n\n    this.onDefineStyle?.({\n      className,\n      css,\n      cssObject,\n      contentHash,\n      elementKey: this.elementKey,\n      joinedPropPath,\n      onBoxModelChange,\n    })\n    return className\n  }\n\n  child(propName: string): Stylesheet {\n    return new StylesheetEngine({\n      breakpointsData: this.breakpointsData,\n      documentKey: this.documentKey,\n      elementKey: this.elementKey,\n      propPathComponents: [...this.propPathComponents, propName],\n      onDefineStyle: this.onDefineStyle,\n      classNamePrefix: this.classNamePrefix,\n    })\n  }\n\n  key(): string {\n    return `${this.documentKey}-${this.elementKey}-${this.propPathComponents.join('.')}`\n  }\n}\n"],"mappings":"AACA,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAEzB,MAAM,iBAAuC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAOG;AACD,SAAK,kBAAkB;AACvB,SAAK,cAAc;AACnB,SAAK,aAAa;AAClB,SAAK,qBAAqB;AAC1B,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,cAA2B;AACzB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YACE,eACA,kBACQ;AACR,UAAM,iBAAiB,KAAK,mBAAmB,KAAK,GAAG;AACvD,UAAM,YAAY,kBAAkB;AAAA,MAClC,MAAM,KAAK,IAAI;AAAA,MACf,iBAAiB,KAAK;AAAA,IACxB,CAAC;AACD,UAAM,YAAY,mBAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,IAAI,gBAAgB,WAAW,SAAS;AAEjE,SAAK,gBAAgB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK;AAAA,MACjB;AAAA,MACA;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AAAA,EAEA,MAAM,UAA8B;AAClC,WAAO,IAAI,iBAAiB;AAAA,MAC1B,iBAAiB,KAAK;AAAA,MACtB,aAAa,KAAK;AAAA,MAClB,YAAY,KAAK;AAAA,MACjB,oBAAoB,CAAC,GAAG,KAAK,oBAAoB,QAAQ;AAAA,MACzD,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAEA,MAAc;AACZ,WAAO,GAAG,KAAK,WAAW,IAAI,KAAK,UAAU,IAAI,KAAK,mBAAmB,KAAK,GAAG,CAAC;AAAA,EACpF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/types.js

@@ -0,0 +1,10 @@
+const MakeswiftStylePrecedence = {
+  RESET: "reset",
+  LOW: "low",
+  MEDIUM: "medium",
+  HIGH: "high"
+};
+export {
+  MakeswiftStylePrecedence
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/runtimes/react/css-runtime/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/types.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { BoxDisplayModel, Breakpoints, Stylesheet } from '@makeswift/controls'\n\n/*\n  Per React's `<style>` documentation:\n  \"React will infer that precedence values it discovers first are 'lower' and precedence\n  values it discovers later are 'higher'\"\n*/\nexport const MakeswiftStylePrecedence = {\n  RESET: 'reset',\n  LOW: 'low',\n  MEDIUM: 'medium',\n  HIGH: 'high',\n} as const\nexport type MakeswiftStylePrecedence =\n  (typeof MakeswiftStylePrecedence)[keyof typeof MakeswiftStylePrecedence]\n\nexport interface BrowserStyleApplier {\n  apply({ className, css }: { className: string; css: string }): void\n  dispose?(): void\n}\n\nexport type GetStylesheet = ({\n  breakpointsData,\n  elementKey,\n  propPathComponents,\n}: {\n  breakpointsData: Breakpoints\n  elementKey: string\n  propPathComponents: readonly string[]\n}) => Stylesheet\n\nexport type ClassStyleData = {\n  className: string\n  css: string\n  cssObject: CSSObject\n}\n\nexport type ControlledStyleData = ClassStyleData & {\n  contentHash: string\n  elementKey: string\n  joinedPropPath: string\n  onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void\n}\n\nexport type OnControlledStyleDataWrite = ({\n  className,\n  currentData,\n  initialData,\n}: {\n  className: string\n  currentData: ControlledStyleData\n  initialData: ControlledStyleData\n}) => void\n\nexport type CssResetData = {\n  css: string\n  contentHash: string\n\n  // This array type is to accommodate our use of `normalize` from `polished`\n  cssObjects: Array<CSSObject>\n}\n\nexport type KeyframesData = {\n  keyframesName: string\n  css: string\n}\n\nexport type BaseStylesData = {\n  css: string\n  contentHash: string\n  cssObject: CSSObject\n}\n"],"mappings":"AAQO,MAAM,2BAA2B;AAAA,EACtC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AACR;","names":[]}

package/dist/esm/runtimes/react/css-runtime/utils.js

@@ -0,0 +1,26 @@
+import { murmur3 } from "murmurhash-js";
+import { DEFAULT_CSS_CLASS_NAME_PREFIX, DEFAULT_CSS_PRECEDENCE } from "./constants";
+import { StylesRegistry } from "./styles-registry";
+function generateClassName({
+  data,
+  classNamePrefix
+}) {
+  const prefix = classNamePrefix ?? DEFAULT_CSS_CLASS_NAME_PREFIX;
+  return `${prefix}-${murmur3(data).toString(36)}`;
+}
+function createMakeswiftStylesRegistry() {
+  return new StylesRegistry();
+}
+function styleTagHtml({ href, precedence, css }) {
+  return `<style data-href="${href}" data-precedence="${precedence ?? DEFAULT_CSS_PRECEDENCE}">${css}</style>`;
+}
+function getControlledStylePrecedence(styleData) {
+  return styleData.className;
+}
+export {
+  createMakeswiftStylesRegistry,
+  generateClassName,
+  getControlledStylePrecedence,
+  styleTagHtml
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/runtimes/react/css-runtime/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/utils.ts"],"sourcesContent":["import { murmur3 } from 'murmurhash-js'\nimport { DEFAULT_CSS_CLASS_NAME_PREFIX, DEFAULT_CSS_PRECEDENCE } from './constants'\nimport { StylesRegistry } from './styles-registry'\nimport { MakeswiftStyle } from './components/makeswift-style'\nimport { ComponentProps } from 'react'\nimport { ControlledStyleData } from './types'\n\nexport function generateClassName({\n  data,\n  classNamePrefix,\n}: {\n  data: string\n  classNamePrefix?: string\n}): string {\n  const prefix = classNamePrefix ?? DEFAULT_CSS_CLASS_NAME_PREFIX\n  return `${prefix}-${murmur3(data).toString(36)}`\n}\n\nexport function createMakeswiftStylesRegistry(): StylesRegistry {\n  return new StylesRegistry()\n}\n\n/**\n * Creates an html string of a style element in the format that React's hoisting mechanism\n * would create.\n *\n * If that format is not matched, then client-side React will not recognize\n * the `<style>` elements derived from the string returned below, and will hoist new\n * (duplicate) `<style>` elements during hydration.\n */\nexport function styleTagHtml({ href, precedence, css }: ComponentProps<typeof MakeswiftStyle>) {\n  return `<style data-href=\"${href}\" data-precedence=\"${precedence ?? DEFAULT_CSS_PRECEDENCE}\">${css}</style>`\n}\n\nexport function getControlledStylePrecedence(styleData: ControlledStyleData): string {\n  return styleData.className\n}\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,+BAA+B,8BAA8B;AACtE,SAAS,sBAAsB;AAKxB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAGW;AACT,QAAM,SAAS,mBAAmB;AAClC,SAAO,GAAG,MAAM,IAAI,QAAQ,IAAI,EAAE,SAAS,EAAE,CAAC;AAChD;AAEO,SAAS,gCAAgD;AAC9D,SAAO,IAAI,eAAe;AAC5B;AAUO,SAAS,aAAa,EAAE,MAAM,YAAY,IAAI,GAA0C;AAC7F,SAAO,qBAAqB,IAAI,sBAAsB,cAAc,sBAAsB,KAAK,GAAG;AACpG;AAEO,SAAS,6BAA6B,WAAwC;AACnF,SAAO,UAAU;AACnB;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-props.js

@@ -4,14 +4,16 @@ import {
 } from "@makeswift/controls";
 import { useResourceResolver } from "./use-resource-resolver";
 import { propErrorHandlingProxy } from "../utils/prop-error-handling-proxy";
+import { useBreakpoints } from "./use-breakpoints";
 import { useResolvableRecord } from "./use-resolvable-record";
 function useResolvedProps({
   elementKey,
   propDefs,
   propData,
   controlInstances,
-  stylesheetFactory
+  getStylesheet
 }) {
+  const breakpoints = useBreakpoints();
   const resourceResolver = useResourceResolver();
   const cache = useRef({}).current;
   const resolveProp = useCallback(
@@ -21,16 +23,16 @@ function useResolvedProps({
       if (cache[propName] != null && data === cache[propName].data && control === cache[propName].control) {
         return cache[propName].resolvedValue;
       }
-      const resolvedValue = def.resolveValue(
-        data,
-        resourceResolver,
-        stylesheetFactory.get(propName),
-        control
-      );
+      const stylesheet = getStylesheet({
+        breakpointsData: breakpoints,
+        elementKey,
+        propPathComponents: [propName]
+      });
+      const resolvedValue = def.resolveValue(data, resourceResolver, stylesheet, control);
       cache[propName] = { data, control, resolvedValue };
       return resolvedValue;
     },
-    [propData, cache, resourceResolver, controlInstances, stylesheetFactory]
+    [propData, cache, resourceResolver, controlInstances, breakpoints, elementKey, getStylesheet]
   );
   const resolvables = useMemo(
     () => mapValues(propDefs, (def, propName) => {
@@ -51,7 +53,6 @@ function useResolvedProps({
     });
   }, [props, elementKey]);
   const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable);
-  stylesheetFactory.useDefinedStyles();
   return resolvedProps;
 }
 export {

package/dist/esm/runtimes/react/hooks/use-resolved-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nimport { useResolvableRecord } from './use-resolvable-record'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\n/**\n * Client-side prop resolution. See `resolveProps` for server-side counterpart.\n */\nexport function useResolvedProps({\n  elementKey,\n  propDefs,\n  propData,\n  controlInstances,\n  stylesheetFactory,\n}: {\n  elementKey: string\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  controlInstances: Record<string, ControlInstance> | null\n  stylesheetFactory: StylesheetFactory\n}): Record<string, unknown> {\n  const resourceResolver = useResourceResolver()\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = propData[propName]\n      const control = controlInstances?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const resolvedValue = def.resolveValue(\n        data,\n        resourceResolver,\n        stylesheetFactory.get(propName),\n        control,\n      )\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [propData, cache, resourceResolver, controlInstances, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\" of element ${elementKey}, falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp, elementKey],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve().catch(err => {\n      console.log(`Error while resolving props for element ${elementKey}`, err)\n    })\n  }, [props, elementKey])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AAEvC,SAAS,2BAA2B;AAW7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM4B;AAC1B,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,SAAS,QAAQ;AAC9B,YAAM,UAAU,mBAAmB,QAAQ;AAE3C,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,kBAAkB,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,OAAO,kBAAkB,kBAAkB,iBAAiB;AAAA,EACzE;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,gBAAgB,UAAU,uBAAuB,YAAY;AAAA,UACtG,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,aAAa,UAAU;AAAA,EACpC;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe,EAAE,MAAM,SAAO;AAClC,cAAQ,IAAI,2CAA2C,UAAU,IAAI,GAAG;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,UAAU,CAAC;AAItB,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\nimport { useBreakpoints } from './use-breakpoints'\n\nimport { useResolvableRecord } from './use-resolvable-record'\nimport { GetStylesheet } from '../css-runtime/types'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\n/**\n * Client-side prop resolution. See `resolveProps` for server-side counterpart.\n */\nexport function useResolvedProps({\n  elementKey,\n  propDefs,\n  propData,\n  controlInstances,\n  getStylesheet,\n}: {\n  elementKey: string\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  controlInstances: Record<string, ControlInstance> | null\n  getStylesheet: GetStylesheet\n}): Record<string, unknown> {\n  const breakpoints = useBreakpoints()\n  const resourceResolver = useResourceResolver()\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = propData[propName]\n      const control = controlInstances?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const stylesheet = getStylesheet({\n        breakpointsData: breakpoints,\n        elementKey,\n        propPathComponents: [propName],\n      })\n\n      const resolvedValue = def.resolveValue(data, resourceResolver, stylesheet, control)\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [propData, cache, resourceResolver, controlInstances, breakpoints, elementKey, getStylesheet],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\" of element ${elementKey}, falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp, elementKey],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve().catch(err => {\n      console.log(`Error while resolving props for element ${elementKey}`, err)\n    })\n  }, [props, elementKey])\n\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAEpC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAY7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM4B;AAC1B,QAAM,cAAc,eAAe;AACnC,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,SAAS,QAAQ;AAC9B,YAAM,UAAU,mBAAmB,QAAQ;AAE3C,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,aAAa,cAAc;AAAA,QAC/B,iBAAiB;AAAA,QACjB;AAAA,QACA,oBAAoB,CAAC,QAAQ;AAAA,MAC/B,CAAC;AAED,YAAM,gBAAgB,IAAI,aAAa,MAAM,kBAAkB,YAAY,OAAO;AAElF,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,OAAO,kBAAkB,kBAAkB,aAAa,YAAY,aAAa;AAAA,EAC9F;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,gBAAgB,UAAU,uBAAuB,YAAY;AAAA,UACtG,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,aAAa,UAAU;AAAA,EACpC;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe,EAAE,MAAM,SAAO;AAClC,cAAQ,IAAI,2CAA2C,UAAU,IAAI,GAAG;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-value.js

@@ -1,13 +1,13 @@
 import { useMemo, useEffect, useSyncExternalStore } from "react";
 import { useResourceResolver } from "./use-resource-resolver";
 import { propErrorHandlingProxy } from "../utils/prop-error-handling-proxy";
-function useResolvedValue(data, resolver, defaultValue) {
+function useResolvedValue(data, resolver, defaultValue, extraDeps = []) {
   const resourceResolver = useResourceResolver();
   const resolvable = useMemo(() => {
     return propErrorHandlingProxy(resolver(data, resourceResolver), defaultValue, (error) => {
       console.warn(`Error resolving data, falling back to \`${defaultValue}\`.`, { error, data });
     });
-  }, [data, resourceResolver, defaultValue]);
+  }, [data, resourceResolver, defaultValue, ...extraDeps]);
   useEffect(() => {
     resolvable.triggerResolve();
   }, [resolvable]);

package/dist/esm/runtimes/react/hooks/use-resolved-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value.ts"],"sourcesContent":["import { useMemo, useEffect, useSyncExternalStore } from 'react'\nimport { Resolvable, ResourceResolver } from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nexport function useResolvedValue<D, T>(\n  data: D,\n  resolver: (data: D, resourceResolver: ResourceResolver) => Resolvable<T>,\n  defaultValue?: T,\n): T | undefined {\n  const resourceResolver = useResourceResolver()\n  const resolvable = useMemo(() => {\n    return propErrorHandlingProxy(resolver(data, resourceResolver), defaultValue, error => {\n      console.warn(`Error resolving data, falling back to \\`${defaultValue}\\`.`, { error, data })\n    })\n  }, [data, resourceResolver, defaultValue])\n\n  useEffect(() => {\n    resolvable.triggerResolve()\n  }, [resolvable])\n\n  return useSyncExternalStore(resolvable.subscribe, resolvable.readStable, resolvable.readStable)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,4BAA4B;AAGzD,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AAEhC,SAAS,iBACd,MACA,UACA,cACe;AACf,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,aAAa,QAAQ,MAAM;AAC/B,WAAO,uBAAuB,SAAS,MAAM,gBAAgB,GAAG,cAAc,WAAS;AACrF,cAAQ,KAAK,2CAA2C,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,IAC5F,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,YAAY,CAAC;AAEzC,YAAU,MAAM;AACd,eAAW,eAAe;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,qBAAqB,WAAW,WAAW,WAAW,YAAY,WAAW,UAAU;AAChG;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value.ts"],"sourcesContent":["import { useMemo, useEffect, useSyncExternalStore } from 'react'\nimport { Resolvable, ResourceResolver } from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nexport function useResolvedValue<D, T>(\n  data: D,\n  resolver: (data: D, resourceResolver: ResourceResolver) => Resolvable<T>,\n  defaultValue?: T,\n  extraDeps: readonly unknown[] = [],\n): T | undefined {\n  const resourceResolver = useResourceResolver()\n  const resolvable = useMemo(() => {\n    return propErrorHandlingProxy(resolver(data, resourceResolver), defaultValue, error => {\n      console.warn(`Error resolving data, falling back to \\`${defaultValue}\\`.`, { error, data })\n    })\n  }, [data, resourceResolver, defaultValue, ...extraDeps])\n\n  useEffect(() => {\n    resolvable.triggerResolve()\n  }, [resolvable])\n\n  return useSyncExternalStore(resolvable.subscribe, resolvable.readStable, resolvable.readStable)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,4BAA4B;AAGzD,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AAEhC,SAAS,iBACd,MACA,UACA,cACA,YAAgC,CAAC,GAClB;AACf,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,aAAa,QAAQ,MAAM;AAC/B,WAAO,uBAAuB,SAAS,MAAM,gBAAgB,GAAG,cAAc,WAAS;AACrF,cAAQ,KAAK,2CAA2C,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,IAC5F,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,kBAAkB,cAAc,GAAG,SAAS,CAAC;AAEvD,YAAU,MAAM;AACd,eAAW,eAAe;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,qBAAqB,WAAW,WAAW,WAAW,YAAY,WAAW,UAAU;AAChG;","names":[]}