@makeswift/runtime 0.29.0-canary.21 → 0.29.0-canary.23

package/dist/cjs/runtimes/react/css-runtime/hooks/use-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-style.ts"],"sourcesContent":["import { generateClassName } from '../utils'\nimport { CSSObject } from '@emotion/serialize'\nimport React from 'react'\nimport clsx from 'clsx'\nimport { useStylesContext } from './use-styles-context'\nimport { toCssStatements } from '../serialize-css'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\n/**\n * Generates a css class name and corresponding style element based on the provided\n * styles object.\n *\n * This is intended to be used for \"uncontrolled\" (not editable in Makeswift) styles\n * such as those defined inline in builtin components.\n */\nexport function useStyle(style: CSSObject) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const className = generateClassName({\n    data: JSON.stringify(style),\n    classNamePrefix,\n  })\n  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className)\n  if (styleData == null) {\n    const { css } = toCssStatements(style, className)\n    styleData = {\n      className,\n      css,\n      cssObject: style,\n    }\n    stylesRegistry.setUncontrolledClassStyle(styleData)\n  }\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: className,\n    href: className,\n    css: styleData.css,\n  })\n  return {\n    className,\n    styleElement,\n  }\n}\n\n/**\n * Supplements `useStyle` by providing call sites with a similarly-shaped successor to Emotion's `cx`\n * utility, which was used heavily by builtin components to \"compose\" class names through the following\n * pattern:\n *\n * ```tsx\n * const className = cx(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * The new pattern using `composeStyles` looks like:\n *\n * ```tsx\n * const { className, styleElements } = composeStyles(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * Followed by rendering `styleElements` alongside the element\n * where they're used:\n *\n * ```tsx\n * return (\n *  <>\n *   {styleElements}\n *   <div\n *     {...props}\n *     className={className}>\n *   />\n *  </>\n * )\n * ```\n */\nexport function composeStyles(...args: Array<string | ReturnType<typeof useStyle> | undefined>) {\n  const classNames: string[] = []\n  const styleElements: React.ReactElement[] = []\n  args.forEach(arg => {\n    if (arg == null) return\n    if (typeof arg === 'string') {\n      classNames.push(arg)\n    } else {\n      classNames.push(arg.className)\n      styleElements.push(arg.styleElement)\n    }\n  })\n  const combinedClassName = clsx(classNames)\n  return {\n    className: combinedClassName,\n    styleElements,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAElC,mBAAkB;AAClB,kBAAiB;AACjB,gCAAiC;AACjC,2BAAgC;AAChC,6BAA+B;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,eAAe,QAAI,4CAAiB;AAC7D,QAAM,gBAAY,gCAAkB;AAAA,IAClC,MAAM,KAAK,UAAU,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AACD,MAAI,YAAY,eAAe,2BAA2B,EAAE,IAAI,SAAS;AACzE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,IAAI,QAAI,sCAAgB,OAAO,SAAS;AAChD,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AACA,QAAM,eAAe,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM;AAAA,IACN,KAAK,UAAU;AAAA,EACjB,CAAC;AACD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AA0CO,SAAS,iBAAiB,MAA+D;AAC9F,QAAM,aAAuB,CAAC;AAC9B,QAAM,gBAAsC,CAAC;AAC7C,OAAK,QAAQ,SAAO;AAClB,QAAI,OAAO;AAAM;AACjB,QAAI,OAAO,QAAQ,UAAU;AAC3B,iBAAW,KAAK,GAAG;AAAA,IACrB,OAAO;AACL,iBAAW,KAAK,IAAI,SAAS;AAC7B,oBAAc,KAAK,IAAI,YAAY;AAAA,IACrC;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,YAAAC,SAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":["React","clsx"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-style.ts"],"sourcesContent":["import { generateClassName } from '../utils'\nimport { CSSObject } from '@emotion/serialize'\nimport React from 'react'\nimport clsx from 'clsx'\nimport { useStylesContext } from './use-styles-context'\nimport { toCssStatements } from '../serialize-css'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\n/**\n * Generates a css class name and corresponding style element based on the provided\n * styles object.\n *\n * This is intended to be used for \"uncontrolled\" (not editable in Makeswift) styles\n * such as those defined inline in builtin components.\n */\nexport function useStyle(style: CSSObject) {\n  const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext()\n  const serializedStyle = JSON.stringify(style)\n  const className = generateClassName({\n    data: forceImportant ? `${serializedStyle}-important` : serializedStyle,\n    classNamePrefix,\n  })\n\n  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className)\n  if (styleData == null) {\n    const { css } = toCssStatements(style, className, { forceImportant })\n    styleData = {\n      className,\n      css,\n      cssObject: style,\n    }\n    stylesRegistry.setUncontrolledClassStyle(styleData)\n  }\n\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: className,\n    href: className,\n    css: styleData.css,\n  })\n\n  return {\n    className,\n    styleElement,\n  }\n}\n\n/**\n * Supplements `useStyle` by providing call sites with a similarly-shaped successor to Emotion's `cx`\n * utility, which was used heavily by builtin components to \"compose\" class names through the following\n * pattern:\n *\n * ```tsx\n * const className = cx(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * The new pattern using `composeStyles` looks like:\n *\n * ```tsx\n * const { className, styleElements } = composeStyles(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * Followed by rendering `styleElements` alongside the element\n * where they're used:\n *\n * ```tsx\n * return (\n *  <>\n *   {styleElements}\n *   <div\n *     {...props}\n *     className={className}>\n *   />\n *  </>\n * )\n * ```\n */\nexport function composeStyles(...args: Array<string | ReturnType<typeof useStyle> | undefined>) {\n  const classNames: string[] = []\n  const styleElements: React.ReactElement[] = []\n  args.forEach(arg => {\n    if (arg == null) return\n    if (typeof arg === 'string') {\n      classNames.push(arg)\n    } else {\n      classNames.push(arg.className)\n      styleElements.push(arg.styleElement)\n    }\n  })\n  const combinedClassName = clsx(classNames)\n  return {\n    className: combinedClassName,\n    styleElements,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAElC,mBAAkB;AAClB,kBAAiB;AACjB,gCAAiC;AACjC,2BAAgC;AAChC,6BAA+B;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,QAAI,4CAAiB;AAC7E,QAAM,kBAAkB,KAAK,UAAU,KAAK;AAC5C,QAAM,gBAAY,gCAAkB;AAAA,IAClC,MAAM,iBAAiB,GAAG,eAAe,eAAe;AAAA,IACxD;AAAA,EACF,CAAC;AAED,MAAI,YAAY,eAAe,2BAA2B,EAAE,IAAI,SAAS;AACzE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,IAAI,QAAI,sCAAgB,OAAO,WAAW,EAAE,eAAe,CAAC;AACpE,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AAEA,QAAM,eAAe,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM;AAAA,IACN,KAAK,UAAU;AAAA,EACjB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AA0CO,SAAS,iBAAiB,MAA+D;AAC9F,QAAM,aAAuB,CAAC;AAC9B,QAAM,gBAAsC,CAAC;AAC7C,OAAK,QAAQ,SAAO;AAClB,QAAI,OAAO;AAAM;AACjB,QAAI,OAAO,QAAQ,UAAU;AAC3B,iBAAW,KAAK,GAAG;AAAA,IACrB,OAAO;AACL,iBAAW,KAAK,IAAI,SAAS;AAC7B,oBAAc,KAAK,IAAI,YAAY;AAAA,IACrC;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,YAAAC,SAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":["React","clsx"]}

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

@@ -25,21 +25,38 @@ __export(serialize_css_exports, {
 module.exports = __toCommonJS(serialize_css_exports);
 var import_serialize = require("@emotion/serialize");
 var import_stylis = require("stylis");
-function toCssStatements(stylesObject, className) {
+function toCssStatements(stylesObject, className, { forceImportant = false } = {}) {
   const { content: rawCssContent, contentHash } = toRawCss([stylesObject]);
   const classNameRawCss = `.${className} {${rawCssContent}}`;
-  const css = processCss({ content: classNameRawCss });
+  const css = processCss({ content: classNameRawCss, forceImportant });
   return { css, contentHash };
 }
-function processCss({ content }) {
+function processCss({
+  content,
+  forceImportant = false
+}) {
   const cssElementTree = (0, import_stylis.compile)(content);
-  return (0, import_stylis.serialize)(cssElementTree, (0, import_stylis.middleware)([import_stylis.prefixer, import_stylis.stringify]));
+  return (0, import_stylis.serialize)(
+    cssElementTree,
+    (0, import_stylis.middleware)([...forceImportant ? [appendImportant] : [], import_stylis.prefixer, import_stylis.stringify])
+  );
 }
+const appendImportant = (element) => {
+  if (element.type !== import_stylis.DECLARATION || element.root?.type !== import_stylis.RULESET)
+    return;
+  for (let ancestor = element.parent; ancestor != null; ancestor = ancestor.parent) {
+    if (ancestor.type === import_stylis.KEYFRAMES)
+      return;
+  }
+  if (/!important\s*;$/i.test(element.value))
+    return;
+  element.value = element.value.replace(/;$/, "!important;");
+};
 function toRawCss(styles) {
-  const emotionSerializationResult = (0, import_serialize.serializeStyles)(styles);
+  const { styles: serializedStyles, name } = (0, import_serialize.serializeStyles)(styles);
   return {
-    content: emotionSerializationResult.styles,
-    contentHash: emotionSerializationResult.name
+    content: serializedStyles,
+    contentHash: name
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAqE;AACrE,oBAAoE;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,qBAAiB,uBAAQ,OAAO;AACtC,aAAO,yBAAU,oBAAgB,0BAAW,CAAC,wBAAU,uBAAS,CAAC,CAAC;AACpE;AASO,SAAS,SAAS,QAAoE;AAC3F,QAAM,iCAA6B,iBAAAA,iBAAuB,MAAM;AAChE,SAAO;AAAA,IACL,SAAS,2BAA2B;AAAA,IACpC,aAAa,2BAA2B;AAAA,EAC1C;AACF;","names":["emotionSerializeStyles"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/serialize-css.ts"],"sourcesContent":["import { CSSObject, serializeStyles as emotionSerializeStyles } from '@emotion/serialize'\nimport {\n  DECLARATION,\n  KEYFRAMES,\n  RULESET,\n  serialize,\n  compile,\n  stringify,\n  prefixer,\n  middleware,\n  type Element as StylisElement,\n  type Middleware,\n} from 'stylis'\n\ntype SerializationOptions = {\n  forceImportant?: boolean\n}\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  { forceImportant = false }: SerializationOptions = {},\n): { css: string; contentHash: string } {\n  const { content: rawCssContent, contentHash } = toRawCss([stylesObject])\n  const classNameRawCss = `.${className} {${rawCssContent}}`\n  const css = processCss({ content: classNameRawCss, forceImportant })\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({\n  content,\n  forceImportant = false,\n}: { content: string } & SerializationOptions): string {\n  const cssElementTree = compile(content)\n  return serialize(\n    cssElementTree,\n    middleware([...(forceImportant ? [appendImportant] : []), prefixer, stringify]),\n  )\n}\n\nconst appendImportant: Middleware = element => {\n  // Skip non-declarative elements and declarations that don't belong to a ruleset (e.g. `@font-face`)\n  if (element.type !== DECLARATION || element.root?.type !== RULESET) return\n\n  // Skip declarations within keyframes, which don't support `!important`\n  for (\n    let ancestor: StylisElement | null = element.parent;\n    ancestor != null;\n    ancestor = ancestor.parent\n  ) {\n    if (ancestor.type === KEYFRAMES) return\n  }\n\n  // Don't append if it's already present\n  if (/!important\\s*;$/i.test(element.value)) return\n\n  element.value = element.value.replace(/;$/, '!important;')\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 { styles: serializedStyles, name } = emotionSerializeStyles(styles)\n  return {\n    content: serializedStyles,\n    contentHash: name,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAqE;AACrE,oBAWO;AAkBA,SAAS,gBACd,cACA,WACA,EAAE,iBAAiB,MAAM,IAA0B,CAAC,GACd;AACtC,QAAM,EAAE,SAAS,eAAe,YAAY,IAAI,SAAS,CAAC,YAAY,CAAC;AACvE,QAAM,kBAAkB,IAAI,SAAS,KAAK,aAAa;AACvD,QAAM,MAAM,WAAW,EAAE,SAAS,iBAAiB,eAAe,CAAC;AACnE,SAAO,EAAE,KAAK,YAAY;AAC5B;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,iBAAiB;AACnB,GAAuD;AACrD,QAAM,qBAAiB,uBAAQ,OAAO;AACtC,aAAO;AAAA,IACL;AAAA,QACA,0BAAW,CAAC,GAAI,iBAAiB,CAAC,eAAe,IAAI,CAAC,GAAI,wBAAU,uBAAS,CAAC;AAAA,EAChF;AACF;AAEA,MAAM,kBAA8B,aAAW;AAE7C,MAAI,QAAQ,SAAS,6BAAe,QAAQ,MAAM,SAAS;AAAS;AAGpE,WACM,WAAiC,QAAQ,QAC7C,YAAY,MACZ,WAAW,SAAS,QACpB;AACA,QAAI,SAAS,SAAS;AAAW;AAAA,EACnC;AAGA,MAAI,mBAAmB,KAAK,QAAQ,KAAK;AAAG;AAE5C,UAAQ,QAAQ,QAAQ,MAAM,QAAQ,MAAM,aAAa;AAC3D;AASO,SAAS,SAAS,QAAoE;AAC3F,QAAM,EAAE,QAAQ,kBAAkB,KAAK,QAAI,iBAAAA,iBAAuB,MAAM;AACxE,SAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;","names":["emotionSerializeStyles"]}

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

@@ -31,13 +31,15 @@ class StylesheetEngine {
   propPathComponents;
   onDefineStyle;
   classNamePrefix;
+  forceImportant;
   constructor({
     breakpointsData,
     documentKey,
     elementKey,
     propPathComponents,
     onDefineStyle,
-    classNamePrefix
+    classNamePrefix,
+    forceImportant = false
   }) {
     this.breakpointsData = breakpointsData;
     this.documentKey = documentKey;
@@ -45,6 +47,7 @@ class StylesheetEngine {
     this.propPathComponents = propPathComponents;
     this.onDefineStyle = onDefineStyle;
     this.classNamePrefix = classNamePrefix;
+    this.forceImportant = forceImportant;
   }
   breakpoints() {
     return this.breakpointsData;
@@ -56,7 +59,9 @@ class StylesheetEngine {
       classNamePrefix: this.classNamePrefix
     });
     const cssObject = (0, import_resolved_style_to_css.resolvedStyleToCss)(this.breakpointsData, resolvedStyle);
-    const { css, contentHash } = (0, import_serialize_css.toCssStatements)(cssObject, className);
+    const { css, contentHash } = (0, import_serialize_css.toCssStatements)(cssObject, className, {
+      forceImportant: this.forceImportant
+    });
     this.onDefineStyle?.({
       className,
       css,
@@ -75,7 +80,8 @@ class StylesheetEngine {
       elementKey: this.elementKey,
       propPathComponents: [...this.propPathComponents, propName],
       onDefineStyle: this.onDefineStyle,
-      classNamePrefix: this.classNamePrefix
+      classNamePrefix: this.classNamePrefix,
+      forceImportant: this.forceImportant
     });
   }
   key() {

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAElC,mCAAmC;AACnC,2BAAgC;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,gBAAY,gCAAkB;AAAA,MAClC,MAAM,KAAK,IAAI;AAAA,MACf,iBAAiB,KAAK;AAAA,IACxB,CAAC;AACD,UAAM,gBAAY,iDAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,QAAI,sCAAgB,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":[]}
+{"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  private forceImportant: boolean\n\n  constructor({\n    breakpointsData,\n    documentKey,\n    elementKey,\n    propPathComponents,\n    onDefineStyle,\n    classNamePrefix,\n    forceImportant = false,\n  }: {\n    breakpointsData: Breakpoints\n    documentKey: string\n    elementKey: string\n    propPathComponents: readonly string[]\n    onDefineStyle: (data: ControlledStyleData) => void\n    classNamePrefix?: string\n    forceImportant?: boolean\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    this.forceImportant = forceImportant\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\n    const cssObject = resolvedStyleToCss(this.breakpointsData, resolvedStyle)\n    const { css, contentHash } = toCssStatements(cssObject, className, {\n      forceImportant: this.forceImportant,\n    })\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      forceImportant: this.forceImportant,\n    })\n  }\n\n  key(): string {\n    return `${this.documentKey}-${this.elementKey}-${this.propPathComponents.join('.')}`\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAElC,mCAAmC;AACnC,2BAAgC;AAEzB,MAAM,iBAAuC;AAAA,EAC1C;AAAA,EACA;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,IACA,iBAAiB;AAAA,EACnB,GAQG;AACD,SAAK,kBAAkB;AACvB,SAAK,cAAc;AACnB,SAAK,aAAa;AAClB,SAAK,qBAAqB;AAC1B,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AACvB,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,cAA2B;AACzB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YACE,eACA,kBACQ;AACR,UAAM,iBAAiB,KAAK,mBAAmB,KAAK,GAAG;AACvD,UAAM,gBAAY,gCAAkB;AAAA,MAClC,MAAM,KAAK,IAAI;AAAA,MACf,iBAAiB,KAAK;AAAA,IACxB,CAAC;AAED,UAAM,gBAAY,iDAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,QAAI,sCAAgB,WAAW,WAAW;AAAA,MACjE,gBAAgB,KAAK;AAAA,IACvB,CAAC;AAED,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,MACtB,gBAAgB,KAAK;AAAA,IACvB,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/cjs/runtimes/react/hooks/use-async-effect.js

@@ -22,6 +22,7 @@ __export(use_async_effect_exports, {
 });
 module.exports = __toCommonJS(use_async_effect_exports);
 var import_react = require("react");
+var import_error_message = require("../../../utils/error-message");
 function useAsyncEffect(effect, deps) {
   (0, import_react.useEffect)(() => {
     let cancelled = false;
@@ -34,16 +35,16 @@ function useAsyncEffect(effect, deps) {
           cleanup = null;
         }
       } catch (error) {
-        console.error("Async effect error:", { error, deps });
+        console.error(`Async effect error: ${(0, import_error_message.errorMessage)(error)}`, { error, deps });
       }
     };
-    runAsyncEffect();
+    void runAsyncEffect();
     return () => {
       cancelled = true;
       try {
         cleanup?.();
       } catch (error) {
-        console.error("Async effect cleanup error:", { error, deps });
+        console.error(`Async effect cleanup error: ${(0, import_error_message.errorMessage)(error)}`, { error, deps });
       }
     };
   }, deps);

package/dist/cjs/runtimes/react/hooks/use-async-effect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-async-effect.ts"],"sourcesContent":["import { type DependencyList, useEffect } from 'react'\n\nexport function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps: DependencyList) {\n  useEffect(() => {\n    let cancelled = false\n    let cleanup: void | (() => void) | null = null\n\n    const runAsyncEffect = async () => {\n      try {\n        cleanup = await effect()\n\n        if (cancelled) {\n          cleanup?.()\n          cleanup = null\n        }\n      } catch (error) {\n        console.error('Async effect error:', { error, deps })\n      }\n    }\n\n    runAsyncEffect()\n\n    return () => {\n      cancelled = true\n      try {\n        cleanup?.()\n      } catch (error) {\n        console.error('Async effect cleanup error:', { error, deps })\n      }\n    }\n  }, deps)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+C;AAExC,SAAS,eAAe,QAA4C,MAAsB;AAC/F,8BAAU,MAAM;AACd,QAAI,YAAY;AAChB,QAAI,UAAsC;AAE1C,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,kBAAU,MAAM,OAAO;AAEvB,YAAI,WAAW;AACb,oBAAU;AACV,oBAAU;AAAA,QACZ;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,uBAAuB,EAAE,OAAO,KAAK,CAAC;AAAA,MACtD;AAAA,IACF;AAEA,mBAAe;AAEf,WAAO,MAAM;AACX,kBAAY;AACZ,UAAI;AACF,kBAAU;AAAA,MACZ,SAAS,OAAO;AACd,gBAAQ,MAAM,+BAA+B,EAAE,OAAO,KAAK,CAAC;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,IAAI;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-async-effect.ts"],"sourcesContent":["import { type DependencyList, useEffect } from 'react'\n\nimport { errorMessage } from '../../../utils/error-message'\n\nexport function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps: DependencyList) {\n  useEffect(() => {\n    let cancelled = false\n    let cleanup: void | (() => void) | null = null\n\n    const runAsyncEffect = async () => {\n      try {\n        cleanup = await effect()\n\n        if (cancelled) {\n          cleanup?.()\n          cleanup = null\n        }\n      } catch (error) {\n        console.error(`Async effect error: ${errorMessage(error)}`, { error, deps })\n      }\n    }\n\n    void runAsyncEffect()\n\n    return () => {\n      cancelled = true\n      try {\n        cleanup?.()\n      } catch (error) {\n        console.error(`Async effect cleanup error: ${errorMessage(error)}`, { error, deps })\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+C;AAE/C,2BAA6B;AAEtB,SAAS,eAAe,QAA4C,MAAsB;AAC/F,8BAAU,MAAM;AACd,QAAI,YAAY;AAChB,QAAI,UAAsC;AAE1C,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,kBAAU,MAAM,OAAO;AAEvB,YAAI,WAAW;AACb,oBAAU;AACV,oBAAU;AAAA,QACZ;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,2BAAuB,mCAAa,KAAK,CAAC,IAAI,EAAE,OAAO,KAAK,CAAC;AAAA,MAC7E;AAAA,IACF;AAEA,SAAK,eAAe;AAEpB,WAAO,MAAM;AACX,kBAAY;AACZ,UAAI;AACF,kBAAU;AAAA,MACZ,SAAS,OAAO;AACd,gBAAQ,MAAM,mCAA+B,mCAAa,KAAK,CAAC,IAAI,EAAE,OAAO,KAAK,CAAC;AAAA,MACrF;AAAA,IACF;AAAA,EAEF,GAAG,IAAI;AACT;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-server-element-refresh.js

@@ -29,36 +29,31 @@ var import_use_api_resources_client = require("./use-api-resources-client");
 const useServerElementRefresh = ({
   elementKey
 }) => {
-  const requestIdRef = (0, import_react.useRef)(0);
-  const lastAppliedRequestId = (0, import_react.useRef)(0);
   const { renderRSCElement } = (0, import_use_framework_context.useFrameworkContext)();
-  const { updateElement } = (0, import_server_elements_cache.useServerElementsCache)();
+  const { beginRefresh } = (0, import_server_elements_cache.useServerElementsCache)();
   const documentKey = (0, import_use_document_context.useDocumentKey)();
   const documentLocale = (0, import_use_document_context.useDocumentLocale)();
   const apiResourcesClient = (0, import_use_api_resources_client.useApiResourcesClient)();
-  (0, import_react.useEffect)(() => {
-    return () => {
-      lastAppliedRequestId.current = ++requestIdRef.current;
-    };
-  }, []);
   return (0, import_react.useCallback)(
-    async (elementData) => {
+    async (elementData, onCommitted) => {
       if (!documentKey)
-        return false;
+        return;
       if (elementData.key !== elementKey) {
         console.error(
           `Cannot refresh server element: mismatching element key '${elementData.key}' != '${elementKey}'`
         );
-        return false;
+        return;
       }
       if (!renderRSCElement) {
         console.error(
           `Cannot refresh server element '${elementKey}' of type '${elementData.type}': \`renderRSCElement\` callback is null`
         );
-        return false;
+        return;
       }
       try {
-        const requestId = ++requestIdRef.current;
+        const commit = beginRefresh(elementKey, onCommitted);
+        if (commit == null)
+          return;
         const reactNode = await renderRSCElement({
           elementData,
           cacheData: apiResourcesClient.cacheData,
@@ -67,20 +62,15 @@ const useServerElementRefresh = ({
             locale: documentLocale ?? void 0
           }
         });
-        if (requestId > lastAppliedRequestId.current) {
-          updateElement(elementKey, reactNode);
-          lastAppliedRequestId.current = requestId;
-          return true;
-        }
+        commit(reactNode);
       } catch (error) {
         console.error(
           `Failed to refresh server element '${elementKey}' of type '${elementData.type}'`,
           error
         );
       }
-      return false;
     },
-    [renderRSCElement, documentKey, documentLocale, elementKey, apiResourcesClient, updateElement]
+    [renderRSCElement, documentKey, documentLocale, elementKey, apiResourcesClient, beginRefresh]
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/runtimes/react/hooks/use-server-element-refresh.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-server-element-refresh.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useFrameworkContext } from '../components/hooks/use-framework-context'\nimport { useServerElementsCache } from '../server/components/server-elements-cache'\n\nimport { useDocumentKey, useDocumentLocale } from './use-document-context'\nimport { useApiResourcesClient } from './use-api-resources-client'\n\n/**\n * Returns a element-scoped callback that renders the provided element data on\n * the server and stores the result in the server element cache under the\n * provided element key.\n *\n * The callback returns true only if the element render succeeds and is committed\n * to the cache. Returns false when rendering is unavailable, fails, or produces a\n * stale/out-of-order result.\n */\nexport const useServerElementRefresh = ({\n  elementKey,\n}: {\n  elementKey: string\n}): ((elementData: ElementData) => Promise<boolean>) => {\n  const requestIdRef = useRef(0)\n  const lastAppliedRequestId = useRef(0)\n\n  const { renderRSCElement } = useFrameworkContext()\n  const { updateElement } = useServerElementsCache()\n\n  const documentKey = useDocumentKey()\n  const documentLocale = useDocumentLocale()\n  const apiResourcesClient = useApiResourcesClient()\n\n  useEffect(() => {\n    // Invalidate all in-flight requests on unmount so they cannot update the cache\n    return () => {\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      lastAppliedRequestId.current = ++requestIdRef.current\n    }\n  }, [])\n\n  return useCallback(\n    async (elementData: ElementData): Promise<boolean> => {\n      if (!documentKey) return false\n      if (elementData.key !== elementKey) {\n        console.error(\n          `Cannot refresh server element: mismatching element key '${elementData.key}' != '${elementKey}'`,\n        )\n        return false\n      }\n\n      if (!renderRSCElement) {\n        console.error(\n          `Cannot refresh server element '${elementKey}' of type '${elementData.type}': \\`renderRSCElement\\` callback is null`,\n        )\n        return false\n      }\n\n      try {\n        // Assign each server refresh a sequential ID so we can track response\n        // arrival and ignore out-of-order results\n        const requestId = ++requestIdRef.current\n        const reactNode = await renderRSCElement({\n          elementData,\n          cacheData: apiResourcesClient.cacheData,\n          documentContext: {\n            key: documentKey,\n            locale: documentLocale ?? undefined,\n          },\n        })\n\n        if (requestId > lastAppliedRequestId.current) {\n          updateElement(elementKey, reactNode)\n          lastAppliedRequestId.current = requestId\n          return true\n        }\n      } catch (error) {\n        console.error(\n          `Failed to refresh server element '${elementKey}' of type '${elementData.type}'`,\n          error,\n        )\n      }\n\n      return false\n    },\n    [renderRSCElement, documentKey, documentLocale, elementKey, apiResourcesClient, updateElement],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+C;AAI/C,mCAAoC;AACpC,mCAAuC;AAEvC,kCAAkD;AAClD,sCAAsC;AAW/B,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAEwD;AACtD,QAAM,mBAAe,qBAAO,CAAC;AAC7B,QAAM,2BAAuB,qBAAO,CAAC;AAErC,QAAM,EAAE,iBAAiB,QAAI,kDAAoB;AACjD,QAAM,EAAE,cAAc,QAAI,qDAAuB;AAEjD,QAAM,kBAAc,4CAAe;AACnC,QAAM,qBAAiB,+CAAkB;AACzC,QAAM,yBAAqB,uDAAsB;AAEjD,8BAAU,MAAM;AAEd,WAAO,MAAM;AAEX,2BAAqB,UAAU,EAAE,aAAa;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO,gBAA+C;AACpD,UAAI,CAAC;AAAa,eAAO;AACzB,UAAI,YAAY,QAAQ,YAAY;AAClC,gBAAQ;AAAA,UACN,2DAA2D,YAAY,GAAG,SAAS,UAAU;AAAA,QAC/F;AACA,eAAO;AAAA,MACT;AAEA,UAAI,CAAC,kBAAkB;AACrB,gBAAQ;AAAA,UACN,kCAAkC,UAAU,cAAc,YAAY,IAAI;AAAA,QAC5E;AACA,eAAO;AAAA,MACT;AAEA,UAAI;AAGF,cAAM,YAAY,EAAE,aAAa;AACjC,cAAM,YAAY,MAAM,iBAAiB;AAAA,UACvC;AAAA,UACA,WAAW,mBAAmB;AAAA,UAC9B,iBAAiB;AAAA,YACf,KAAK;AAAA,YACL,QAAQ,kBAAkB;AAAA,UAC5B;AAAA,QACF,CAAC;AAED,YAAI,YAAY,qBAAqB,SAAS;AAC5C,wBAAc,YAAY,SAAS;AACnC,+BAAqB,UAAU;AAC/B,iBAAO;AAAA,QACT;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ;AAAA,UACN,qCAAqC,UAAU,cAAc,YAAY,IAAI;AAAA,UAC7E;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,kBAAkB,aAAa,gBAAgB,YAAY,oBAAoB,aAAa;AAAA,EAC/F;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-server-element-refresh.tsx"],"sourcesContent":["import { useCallback } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useFrameworkContext } from '../components/hooks/use-framework-context'\nimport { useServerElementsCache } from '../server/components/server-elements-cache'\n\nimport { useDocumentKey, useDocumentLocale } from './use-document-context'\nimport { useApiResourcesClient } from './use-api-resources-client'\n\n/**\n * Returns a element-scoped callback that renders the provided element data on\n * the server and stores the result in the server element cache under the\n * provided element key.\n *\n * Calls the `onCommitted` callback once after a successfully rendered node is\n * committed to the current React tree.\n */\nexport const useServerElementRefresh = ({\n  elementKey,\n}: {\n  elementKey: string\n}): ((elementData: ElementData, onCommitted?: () => void) => Promise<void>) => {\n  const { renderRSCElement } = useFrameworkContext()\n  const { beginRefresh } = useServerElementsCache()\n\n  const documentKey = useDocumentKey()\n  const documentLocale = useDocumentLocale()\n  const apiResourcesClient = useApiResourcesClient()\n\n  return useCallback(\n    async (elementData: ElementData, onCommitted?: () => void): Promise<void> => {\n      if (!documentKey) return\n      if (elementData.key !== elementKey) {\n        console.error(\n          `Cannot refresh server element: mismatching element key '${elementData.key}' != '${elementKey}'`,\n        )\n        return\n      }\n\n      if (!renderRSCElement) {\n        console.error(\n          `Cannot refresh server element '${elementKey}' of type '${elementData.type}': \\`renderRSCElement\\` callback is null`,\n        )\n        return\n      }\n\n      try {\n        const commit = beginRefresh(elementKey, onCommitted)\n        if (commit == null) return\n\n        const reactNode = await renderRSCElement({\n          elementData,\n          cacheData: apiResourcesClient.cacheData,\n          documentContext: {\n            key: documentKey,\n            locale: documentLocale ?? undefined,\n          },\n        })\n\n        commit(reactNode)\n      } catch (error) {\n        console.error(\n          `Failed to refresh server element '${elementKey}' of type '${elementData.type}'`,\n          error,\n        )\n      }\n    },\n    [renderRSCElement, documentKey, documentLocale, elementKey, apiResourcesClient, beginRefresh],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4B;AAI5B,mCAAoC;AACpC,mCAAuC;AAEvC,kCAAkD;AAClD,sCAAsC;AAU/B,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAE+E;AAC7E,QAAM,EAAE,iBAAiB,QAAI,kDAAoB;AACjD,QAAM,EAAE,aAAa,QAAI,qDAAuB;AAEhD,QAAM,kBAAc,4CAAe;AACnC,QAAM,qBAAiB,+CAAkB;AACzC,QAAM,yBAAqB,uDAAsB;AAEjD,aAAO;AAAA,IACL,OAAO,aAA0B,gBAA4C;AAC3E,UAAI,CAAC;AAAa;AAClB,UAAI,YAAY,QAAQ,YAAY;AAClC,gBAAQ;AAAA,UACN,2DAA2D,YAAY,GAAG,SAAS,UAAU;AAAA,QAC/F;AACA;AAAA,MACF;AAEA,UAAI,CAAC,kBAAkB;AACrB,gBAAQ;AAAA,UACN,kCAAkC,UAAU,cAAc,YAAY,IAAI;AAAA,QAC5E;AACA;AAAA,MACF;AAEA,UAAI;AACF,cAAM,SAAS,aAAa,YAAY,WAAW;AACnD,YAAI,UAAU;AAAM;AAEpB,cAAM,YAAY,MAAM,iBAAiB;AAAA,UACvC;AAAA,UACA,WAAW,mBAAmB;AAAA,UAC9B,iBAAiB;AAAA,YACf,KAAK;AAAA,YACL,QAAQ,kBAAkB;AAAA,UAC5B;AAAA,QACF,CAAC;AAED,eAAO,SAAS;AAAA,MAClB,SAAS,OAAO;AACd,gBAAQ;AAAA,UACN,qCAAqC,UAAU,cAAc,YAAY,IAAI;AAAA,UAC7E;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,gBAAgB,YAAY,oBAAoB,YAAY;AAAA,EAC9F;AACF;","names":[]}

package/dist/cjs/runtimes/react/root-style-registry.js

@@ -34,6 +34,7 @@ function RootStyleRegistry({
   stylesRegistry,
   classNamePrefix = import_constants.DEFAULT_CSS_CLASS_NAME_PREFIX,
   enableCssReset = import_constants.DEFAULT_CSS_RESET_ENABLED,
+  forceImportant = import_constants.DEFAULT_CSS_FORCE_IMPORTANT,
   shouldRenderStyleElements = import_constants.DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
 }) {
   (0, import_use_dynamic_browser_style_updates.useDynamicBrowserStyleUpdates)(stylesRegistry);
@@ -42,6 +43,7 @@ function RootStyleRegistry({
     {
       classNamePrefix,
       enableCssReset,
+      forceImportant,
       stylesRegistry,
       shouldRenderStyleElements,
       children
@@ -51,7 +53,8 @@ function RootStyleRegistry({
 function DefaultRootStyleRegistry({
   children,
   classNamePrefix,
-  enableCssReset
+  enableCssReset,
+  forceImportant
 }) {
   const [stylesRegistry] = (0, import_react.useState)(import_utils.createMakeswiftStylesRegistry);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -60,6 +63,7 @@ function DefaultRootStyleRegistry({
       stylesRegistry,
       classNamePrefix,
       enableCssReset,
+      forceImportant,
       children
     }
   );

package/dist/cjs/runtimes/react/root-style-registry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n  DEFAULT_CSS_CLASS_NAME_PREFIX,\n  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n  DEFAULT_CSS_RESET_ENABLED,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\nexport type RootStyleProps = {\n  /**\n   * The prefix used for generated class names.\n   * If not provided, a default prefix will be used.\n   */\n  classNamePrefix?: string\n  /**\n   * Toggle the built-in CSS reset.\n   * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n   */\n  enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({\n  children,\n  stylesRegistry,\n  classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n  enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n  shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n  classNamePrefix?: string\n  enableCssReset?: boolean\n  shouldRenderStyleElements?: boolean\n}>) {\n  useDynamicBrowserStyleUpdates(stylesRegistry)\n\n  return (\n    <StylesContextProvider\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={shouldRenderStyleElements}\n    >\n      {children}\n    </StylesContextProvider>\n  )\n}\n\nexport function DefaultRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n}: PropsWithChildren<RootStyleProps>) {\n  const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n  return (\n    <RootStyleRegistry\n      stylesRegistry={stylesRegistry}\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCI;AAvCJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAIO;AACP,mBAA8C;AAevC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAKI;AACF,8EAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n  DEFAULT_CSS_CLASS_NAME_PREFIX,\n  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n  DEFAULT_CSS_RESET_ENABLED,\n  DEFAULT_CSS_FORCE_IMPORTANT,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\n/**\n * Style configuration must remain unchanged while the document is mounted.\n * Changing it during development may require a full page reload.\n */\nexport type RootStyleProps = {\n  /**\n   * The prefix used for generated class names.\n   * If not provided, a default prefix will be used.\n   */\n  classNamePrefix?: string\n  /**\n   * Toggle the built-in CSS reset.\n   * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n   */\n  enableCssReset?: boolean\n  /**\n   * Append `!important` to Makeswift-generated style rule declarations to\n   * increase their priority relative to external styles.\n   */\n  forceImportant?: boolean\n}\n\nexport function RootStyleRegistry({\n  children,\n  stylesRegistry,\n  classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n  enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n  forceImportant = DEFAULT_CSS_FORCE_IMPORTANT,\n  shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n  classNamePrefix?: string\n  enableCssReset?: boolean\n  forceImportant?: boolean\n  shouldRenderStyleElements?: boolean\n}>) {\n  useDynamicBrowserStyleUpdates(stylesRegistry)\n\n  return (\n    <StylesContextProvider\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      forceImportant={forceImportant}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={shouldRenderStyleElements}\n    >\n      {children}\n    </StylesContextProvider>\n  )\n}\n\nexport function DefaultRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n  forceImportant,\n}: PropsWithChildren<RootStyleProps>) {\n  const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n  return (\n    <RootStyleRegistry\n      stylesRegistry={stylesRegistry}\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      forceImportant={forceImportant}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDI;AAnDJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAKO;AACP,mBAA8C;AAwBvC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAMI;AACF,8EAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/server/components/editable-server-element.js

@@ -24,6 +24,8 @@ __export(editable_server_element_exports, {
 module.exports = __toCommonJS(editable_server_element_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_read_write_state = require("../../../../state/read-write-state");
+var import_unified_state = require("../../../../state/unified-state");
 var import_read_write_actions = require("../../../../state/actions/internal/read-write-actions");
 var import_use_server_element_refresh = require("../../hooks/use-server-element-refresh");
 var import_use_element_data = require("../../hooks/use-element-data");
@@ -31,6 +33,7 @@ var import_use_control_defs = require("../../hooks/use-control-defs");
 var import_use_resolved_props = require("../../hooks/use-resolved-props");
 var import_control_instances_context = require("../../components/control-instances-context");
 var import_use_dispatch = require("../../hooks/use-dispatch");
+var import_use_store = require("../../hooks/use-store");
 var import_use_document_context = require("../../hooks/use-document-context");
 var import_prop_by_path = require("../../../../utils/prop-by-path");
 var import_set = require("../../../../utils/set");
@@ -52,6 +55,7 @@ const EditableServerElementWrapper = ({
   children
 }) => {
   const elementKey = initialElementData.key;
+  const store = (0, import_use_store.useStore)();
   const dispatch = (0, import_use_dispatch.useDispatch)();
   const documentKey = (0, import_use_document_context.useDocumentKey)();
   const [_legacyDefs, definitions] = (0, import_use_control_defs.useControlDefs)({ elementType: initialElementData.type });
@@ -70,17 +74,18 @@ const EditableServerElementWrapper = ({
   );
   const serverRefresh = (0, import_use_server_element_refresh.useServerElementRefresh)({ elementKey });
   const applyServerRefresh = (0, import_react.useCallback)(
-    (elementData2, leafInstances, documentKey2) => (0, import_react.startTransition)(async () => {
-      const applied = await serverRefresh(elementData2);
-      if (!applied)
-        return;
-      (0, import_react.startTransition)(() => {
-        leafInstances.forEach(
-          (c) => dispatch((0, import_read_write_actions.clearResolvedValueOverride)({ documentKey: documentKey2, instanceKey: c.instanceKey }))
-        );
+    (elementData2, documentKey2) => (0, import_react.startTransition)(async () => {
+      const state = store.getState();
+      const generation = (0, import_unified_state.isReadWriteState)(state) ? (0, import_read_write_state.getResolvedValueOverridesGeneration)(state) : null;
+      await serverRefresh(elementData2, () => {
+        if (generation == null)
+          return;
+        (0, import_react.startTransition)(() => {
+          dispatch((0, import_read_write_actions.clearStaleResolvedValueOverrides)({ documentKey: documentKey2, elementKey, generation }));
+        });
       });
     }),
-    [serverRefresh, dispatch]
+    [serverRefresh, dispatch, store, elementKey]
   );
   const applyResolvedValueOverrides = (0, import_react.useCallback)(
     (instances, props, documentKey2) => instances.forEach(
@@ -98,21 +103,21 @@ const EditableServerElementWrapper = ({
     if (documentKey == null)
       return;
     if (children == null) {
-      const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances);
-      applyServerRefresh(elementData, leafInstances, documentKey);
+      const { leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances);
+      applyServerRefresh(elementData, documentKey);
       prevPropsRef.current = resolvedProps;
       prevLeafPropsRef.current = leafProps;
       return;
     }
     if (resolvedProps !== prevPropsRef.current) {
-      const { needsRefresh, leafInstances, leafProps, reactNodeInstances } = needsServerRefresh({
+      const { needsRefresh, leafProps, reactNodeInstances } = needsServerRefresh({
         resolvedProps,
         controlInstances,
         prevProps: prevPropsRef.current,
         prevLeafProps: prevLeafPropsRef.current
       });
       if (needsRefresh) {
-        applyServerRefresh(elementData, leafInstances, documentKey);
+        applyServerRefresh(elementData, documentKey);
       } else {
         applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey);
       }
@@ -155,7 +160,6 @@ const needsServerRefresh = ({
   const needsRefresh = (0, import_set.setDifference)(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0;
   return {
     needsRefresh,
-    leafInstances,
     leafProps,
     reactNodeInstances
   };

package/dist/cjs/runtimes/react/server/components/editable-server-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/editable-server-element.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, useEffect, useRef, startTransition, useCallback } from 'react'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { type ElementData } from '../../../../state/read-only-state'\nimport {\n  setResolvedValueOverride,\n  clearResolvedValueOverride,\n} from '../../../../state/actions/internal/read-write-actions'\n\nimport { useServerElementRefresh } from '../../hooks/use-server-element-refresh'\nimport { useElementData } from '../../hooks/use-element-data'\nimport { useControlDefs } from '../../hooks/use-control-defs'\nimport { useResolvedProps } from '../../hooks/use-resolved-props'\nimport { useControlInstances } from '../../components/control-instances-context'\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nimport { getProp } from '../../../../utils/prop-by-path'\nimport { setUnion, setDifference } from '../../../../utils/set'\nimport { useControlledStyles } from '../../css-runtime/hooks/use-controlled-styles'\n\nexport const EditableServerElement = ({\n  initialElementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const elementData = useElementData({ elementKey })\n  if (elementData == null) {\n    // Element has been deleted\n    return null\n  }\n\n  return (\n    <EditableServerElementWrapper {...{ initialElementData, elementData }}>\n      {children}\n    </EditableServerElementWrapper>\n  )\n}\n\n/**\n * Reflects edits to `elementData.props` in the server-rendered `children`.\n * Changes limited to existing `ReactNode` props are applied through client-side\n * overrides. Style prop changes are handled by the stylesheet engine during\n * prop resolution. All other prop changes trigger a server refresh.\n */\nconst EditableServerElementWrapper = ({\n  initialElementData,\n  elementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData; elementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type })\n  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey })\n\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: elementData.props,\n    controlInstances,\n    getStylesheet,\n  })\n\n  const prevPropsRef = useRef(resolvedProps)\n  const prevLeafPropsRef = useRef(\n    getLeafPropsAndInstances(resolvedProps, controlInstances).leafProps,\n  )\n\n  const serverRefresh = useServerElementRefresh({ elementKey })\n  const applyServerRefresh = useCallback(\n    (elementData: ElementData, leafInstances: ControlInstance[], documentKey: string) =>\n      startTransition(async () => {\n        const applied = await serverRefresh(elementData)\n        if (!applied) return\n\n        // need a nested `startTransition` here, see\n        // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n        startTransition(() => {\n          // reset instance overrides, if any\n          leafInstances.forEach(c =>\n            dispatch(clearResolvedValueOverride({ documentKey, instanceKey: c.instanceKey })),\n          )\n        })\n      }),\n    [serverRefresh, dispatch],\n  )\n\n  const applyResolvedValueOverrides = useCallback(\n    (instances: ControlInstance[], props: Record<string, unknown>, documentKey: string) =>\n      instances.forEach(c =>\n        dispatch(\n          setResolvedValueOverride({\n            documentKey,\n            instanceKey: c.instanceKey,\n            value: getProp(props, c.propPath),\n          }),\n        ),\n      ),\n    [dispatch],\n  )\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    if (children == null) {\n      // If we don't have a server-rendered node (i.e. user just dropped the element to the page),\n      // trigger a server re-render\n      const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n      applyServerRefresh(elementData, leafInstances, documentKey)\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n      return\n    }\n\n    if (resolvedProps !== prevPropsRef.current) {\n      // If there was a change in resolved value, check if any of the changed props necessitate\n      // a server refresh.\n      //\n      // Note that style props have stable class names and updating a style prop will not result\n      // in a change to the resolved value, which is what we want. Dynamic style updates are handled\n      // through a subscription mechanism that listens for changes to controlled style data in the\n      // styles registry.\n      const { needsRefresh, leafInstances, leafProps, reactNodeInstances } = needsServerRefresh({\n        resolvedProps,\n        controlInstances,\n        prevProps: prevPropsRef.current,\n        prevLeafProps: prevLeafPropsRef.current,\n      })\n\n      if (needsRefresh) {\n        applyServerRefresh(elementData, leafInstances, documentKey)\n      } else {\n        applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey)\n      }\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n    }\n  }, [\n    children,\n    resolvedProps,\n    documentKey,\n    elementData,\n    controlInstances,\n    applyServerRefresh,\n    applyResolvedValueOverrides,\n  ])\n\n  return (\n    <>\n      {children}\n      {styleElements}\n    </>\n  )\n}\n\n/**\n * Determines whether resolved prop changes require a server refresh and returns\n * the control-instance state needed to apply the update.\n */\nconst needsServerRefresh = ({\n  resolvedProps,\n  controlInstances,\n  prevProps,\n  prevLeafProps,\n}: {\n  resolvedProps: Record<string, unknown>\n  controlInstances: Record<string, ControlInstance> | null\n  prevProps: Record<string, unknown>\n  prevLeafProps: Set<string>\n}): {\n  needsRefresh: boolean\n  leafInstances: ControlInstance[]\n  leafProps: Set<string>\n  reactNodeInstances: ControlInstance[]\n} => {\n  const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n  const combinedLeafProps = setUnion(leafProps, prevLeafProps).values()\n  const updatedLeafProps = new Set(\n    [...combinedLeafProps].filter(\n      propName => getProp(resolvedProps, propName) !== getProp(prevProps, propName),\n    ),\n  )\n\n  const updatedLeafInstances = leafInstances.filter(instance =>\n    updatedLeafProps.has(instance.propPath),\n  )\n\n  const reactNodeInstances = updatedLeafInstances.filter(c => c.resolvesToRenderableNode())\n\n  const reactNodePropKeys = new Set(reactNodeInstances.map(c => c.propPath))\n  const newlyAddedLeafProps = setDifference(leafProps, prevLeafProps)\n\n  // A server refresh is needed if some of the updated props are not `ReactNode` props, or we\n  // have newly observed props (typically `List` items). Even when newly observed props are\n  // `ReactNode` props, we have to first render them on the server to get them in the element\n  // tree before they can be updated client-side.\n  const needsRefresh =\n    setDifference(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0\n\n  return {\n    needsRefresh,\n    leafInstances,\n    leafProps,\n    reactNodeInstances,\n  }\n}\n\n/**\n *  Returns terminal prop paths with the corresponding control instances.\n */\nconst getLeafPropsAndInstances = (\n  props: Record<string, unknown>,\n  controlInstances: Record<string, ControlInstance> | null,\n): {\n  leafProps: Set<string>\n  leafInstances: ControlInstance[]\n} => {\n  const topLevelInstances = Object.keys(props)\n    .map(prop => controlInstances?.[prop])\n    .filter(inst => inst != null)\n\n  const leafInstances = getLeafInstances(topLevelInstances)\n  const leafProps = new Set(leafInstances.map(c => c.propPath))\n  return { leafProps, leafInstances }\n}\n\n/**\n * Flattens a control instance tree to its leaf (terminal) instances.\n */\nconst getLeafInstances = (instances: ControlInstance[]): ControlInstance[] =>\n  instances.flatMap(instance =>\n    instance.isCompositeProp() ? getLeafInstances(instance.children()) : [instance],\n  )\n"],"mappings":"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","names":["elementData","documentKey"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/editable-server-element.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, useEffect, useRef, startTransition, useCallback } from 'react'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { type ElementData } from '../../../../state/read-only-state'\nimport { getResolvedValueOverridesGeneration } from '../../../../state/read-write-state'\nimport { isReadWriteState } from '../../../../state/unified-state'\nimport {\n  setResolvedValueOverride,\n  clearStaleResolvedValueOverrides,\n} from '../../../../state/actions/internal/read-write-actions'\n\nimport { useServerElementRefresh } from '../../hooks/use-server-element-refresh'\nimport { useElementData } from '../../hooks/use-element-data'\nimport { useControlDefs } from '../../hooks/use-control-defs'\nimport { useResolvedProps } from '../../hooks/use-resolved-props'\nimport { useControlInstances } from '../../components/control-instances-context'\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useStore } from '../../hooks/use-store'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nimport { getProp } from '../../../../utils/prop-by-path'\nimport { setUnion, setDifference } from '../../../../utils/set'\nimport { useControlledStyles } from '../../css-runtime/hooks/use-controlled-styles'\n\nexport const EditableServerElement = ({\n  initialElementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const elementData = useElementData({ elementKey })\n  if (elementData == null) {\n    // Element has been deleted\n    return null\n  }\n\n  return (\n    <EditableServerElementWrapper {...{ initialElementData, elementData }}>\n      {children}\n    </EditableServerElementWrapper>\n  )\n}\n\n/**\n * Reflects edits to `elementData.props` in the server-rendered `children`.\n * Changes limited to existing `ReactNode` props are applied through client-side\n * overrides. Style prop changes are handled by the stylesheet engine during\n * prop resolution. All other prop changes trigger a server refresh.\n */\nconst EditableServerElementWrapper = ({\n  initialElementData,\n  elementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData; elementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const store = useStore()\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type })\n  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey })\n\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: elementData.props,\n    controlInstances,\n    getStylesheet,\n  })\n\n  const prevPropsRef = useRef(resolvedProps)\n  const prevLeafPropsRef = useRef(\n    getLeafPropsAndInstances(resolvedProps, controlInstances).leafProps,\n  )\n\n  const serverRefresh = useServerElementRefresh({ elementKey })\n  const applyServerRefresh = useCallback(\n    (elementData: ElementData, documentKey: string) =>\n      startTransition(async () => {\n        const state = store.getState()\n        // Capture the overrides generation prior to initiating server refresh so that we\n        // only clear the overrides that haven't been updated while the refresh is in flight\n        const generation = isReadWriteState(state)\n          ? getResolvedValueOverridesGeneration(state)\n          : null\n\n        await serverRefresh(elementData, () => {\n          if (generation == null) return\n          // need a nested `startTransition` here, see\n          // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n          startTransition(() => {\n            dispatch(clearStaleResolvedValueOverrides({ documentKey, elementKey, generation }))\n          })\n        })\n      }),\n    [serverRefresh, dispatch, store, elementKey],\n  )\n\n  const applyResolvedValueOverrides = useCallback(\n    (instances: ControlInstance[], props: Record<string, unknown>, documentKey: string) =>\n      instances.forEach(c =>\n        dispatch(\n          setResolvedValueOverride({\n            documentKey,\n            instanceKey: c.instanceKey,\n            value: getProp(props, c.propPath),\n          }),\n        ),\n      ),\n    [dispatch],\n  )\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    if (children == null) {\n      // If we don't have a server-rendered node (i.e. user just dropped the element to the page),\n      // trigger a server re-render\n      const { leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n      applyServerRefresh(elementData, documentKey)\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n      return\n    }\n\n    if (resolvedProps !== prevPropsRef.current) {\n      // If there was a change in resolved value, check if any of the changed props necessitate\n      // a server refresh.\n      //\n      // Note that style props have stable class names and updating a style prop will not result\n      // in a change to the resolved value, which is what we want. Dynamic style updates are handled\n      // through a subscription mechanism that listens for changes to controlled style data in the\n      // styles registry.\n      const { needsRefresh, leafProps, reactNodeInstances } = needsServerRefresh({\n        resolvedProps,\n        controlInstances,\n        prevProps: prevPropsRef.current,\n        prevLeafProps: prevLeafPropsRef.current,\n      })\n\n      if (needsRefresh) {\n        applyServerRefresh(elementData, documentKey)\n      } else {\n        applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey)\n      }\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n    }\n  }, [\n    children,\n    resolvedProps,\n    documentKey,\n    elementData,\n    controlInstances,\n    applyServerRefresh,\n    applyResolvedValueOverrides,\n  ])\n\n  return (\n    <>\n      {children}\n      {styleElements}\n    </>\n  )\n}\n\n/**\n * Determines whether resolved prop changes require a server refresh and returns\n * the control-instance state needed to apply the update.\n */\nconst needsServerRefresh = ({\n  resolvedProps,\n  controlInstances,\n  prevProps,\n  prevLeafProps,\n}: {\n  resolvedProps: Record<string, unknown>\n  controlInstances: Record<string, ControlInstance> | null\n  prevProps: Record<string, unknown>\n  prevLeafProps: Set<string>\n}): {\n  needsRefresh: boolean\n  leafProps: Set<string>\n  reactNodeInstances: ControlInstance[]\n} => {\n  const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n  const combinedLeafProps = setUnion(leafProps, prevLeafProps).values()\n  const updatedLeafProps = new Set(\n    [...combinedLeafProps].filter(\n      propName => getProp(resolvedProps, propName) !== getProp(prevProps, propName),\n    ),\n  )\n\n  const updatedLeafInstances = leafInstances.filter(instance =>\n    updatedLeafProps.has(instance.propPath),\n  )\n\n  const reactNodeInstances = updatedLeafInstances.filter(c => c.resolvesToRenderableNode())\n\n  const reactNodePropKeys = new Set(reactNodeInstances.map(c => c.propPath))\n  const newlyAddedLeafProps = setDifference(leafProps, prevLeafProps)\n\n  // A server refresh is needed if some of the updated props are not `ReactNode` props, or we\n  // have newly observed props (typically `List` items). Even when newly observed props are\n  // `ReactNode` props, we have to first render them on the server to get them in the element\n  // tree before they can be updated client-side.\n  const needsRefresh =\n    setDifference(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0\n\n  return {\n    needsRefresh,\n    leafProps,\n    reactNodeInstances,\n  }\n}\n\n/**\n *  Returns terminal prop paths with the corresponding control instances.\n */\nconst getLeafPropsAndInstances = (\n  props: Record<string, unknown>,\n  controlInstances: Record<string, ControlInstance> | null,\n): {\n  leafProps: Set<string>\n  leafInstances: ControlInstance[]\n} => {\n  const topLevelInstances = Object.keys(props)\n    .map(prop => controlInstances?.[prop])\n    .filter(inst => inst != null)\n\n  const leafInstances = getLeafInstances(topLevelInstances)\n  const leafProps = new Set(leafInstances.map(c => c.propPath))\n  return { leafProps, leafInstances }\n}\n\n/**\n * Flattens a control instance tree to its leaf (terminal) instances.\n */\nconst getLeafInstances = (instances: ControlInstance[]): ControlInstance[] =>\n  instances.flatMap(instance =>\n    instance.isCompositeProp() ? getLeafInstances(instance.children()) : [instance],\n  )\n"],"mappings":"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","names":["elementData","documentKey"]}

package/dist/cjs/runtimes/react/server/components/element-data.js

@@ -59,6 +59,7 @@ async function ServerElementData({
   const stylesheet = new import_stylesheet_engine.StylesheetEngine({
     breakpointsData: (0, import_read_only_state.getBreakpoints)(state),
     classNamePrefix: context.rootStyleProps?.classNamePrefix,
+    forceImportant: context.rootStyleProps?.forceImportant,
     documentKey,
     elementKey: elementData.key,
     propPathComponents: [],

package/dist/cjs/runtimes/react/server/components/element-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const classStyleData = new Map<string, ControlledStyleData>()\n  const stylesheet = new StylesheetEngine({\n    breakpointsData: getBreakpoints(state),\n    classNamePrefix: context.rootStyleProps?.classNamePrefix,\n    documentKey,\n    elementKey: elementData.key,\n    propPathComponents: [],\n    onDefineStyle: styleData => {\n      const { onBoxModelChange, ...serializableStyleData } = styleData\n      classStyleData.set(styleData.className, serializableStyleData)\n    },\n  })\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n    <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n  ))\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      {styleElements}\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const classStyleData = new Map<string, ControlledStyleData>()\n  const stylesheet = new StylesheetEngine({\n    breakpointsData: getBreakpoints(state),\n    classNamePrefix: context.rootStyleProps?.classNamePrefix,\n    forceImportant: context.rootStyleProps?.forceImportant,\n    documentKey,\n    elementKey: elementData.key,\n    propPathComponents: [],\n    onDefineStyle: styleData => {\n      const { onBoxModelChange, ...serializableStyleData } = styleData\n      classStyleData.set(styleData.className, serializableStyleData)\n    },\n  })\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n    <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n  ))\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      {styleElements}\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC,gBAAgB,QAAQ,gBAAgB;AAAA,IACxC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}