npm - @makeswift/runtime - Versions diffs - 0.23.1-canary.0 → 0.23.2 - Mend

@makeswift/runtime 0.23.1-canary.0 → 0.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/dist/esm/next/components/tests/controls/page-control-prop-rendering.js CHANGED Viewed

@@ -1,20 +1,50 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, isValidElement } from "react";
+import { Fragment, forwardRef, useRef, isValidElement } from "react";
+import { renderToReadableStream } from "react-dom/server";
+import { JSDOM } from "jsdom";
 import { act } from "react-dom/test-utils";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { Page } from "../../page";
-import { ReactRuntimeProvider } from "../../../../runtimes/react";
+import { ServerInsertedHTMLContext } from "next/navigation";
 import { ReactRuntime } from "../../../../react";
-import {
-  createMakeswiftPageSnapshot,
-  createRootComponent
-} from "../../../../utils/tests/element-data-test-test";
+import { MakeswiftComponent } from "../../MakeswiftComponent";
+import { Page } from "../../page";
+import { isServer } from "../../../../utils/is-server";
+import * as Testing from "../../../../runtimes/react/testing";
 const ROOT_ID = "00000000-0000-0000-0000-000000000000";
 const ELEMENT_ID = "11111111-1111-1111-1111-111111111111";
 const renderProp = (prop) => prop === void 0 ? "undefined" : isValidElement(prop) ? prop : JSON.stringify(prop);
-const propSnapshot = (prop) => prop.childElementCount ? prop.childNodes : parseStringifiedProp(prop.textContent ?? "");
+const propSnapshot = (prop) => prop?.childElementCount ? prop.childNodes : parseStringifiedProp(prop?.textContent ?? "");
 const parseStringifiedProp = (prop) => prop === "undefined" ? void 0 : JSON.parse(prop);
+async function streamToString(stream) {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let result = "";
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    result += decoder.decode(value, { stream: true });
+  }
+  return result;
+}
+async function renderToString(element) {
+  return await streamToString(await renderToReadableStream(element));
+}
+async function serverSideRender(children) {
+  const serverInsertedCallbacks = [];
+  const elementTree = /* @__PURE__ */ jsx(ServerInsertedHTMLContext.Provider, { value: (handler) => serverInsertedCallbacks.push(handler), children });
+  const elementsHTML = await renderToString(elementTree);
+  const serverInsertedNodes = serverInsertedCallbacks.map((callback, index) => /* @__PURE__ */ jsx(Fragment, { children: callback() }, "__next_server_inserted__" + index));
+  const headHTML = await renderToString(serverInsertedNodes);
+  const dom = new JSDOM(
+    `<!DOCTYPE html><head>${headHTML}</head><body><div id="root">${elementsHTML}</div></body></div>`,
+    {
+      runScripts: "dangerously"
+    }
+  );
+  return dom.window.document;
+}
 async function testPageControlPropRendering(controlDefinition, {
   toData,
   value,
@@ -26,23 +56,19 @@ async function testPageControlPropRendering(controlDefinition, {
   rootElements = []
 }) {
   const controlData = value !== void 0 ? toData ? toData(value) : controlDefinition.toData(value) : void 0;
-  const TestComponentType = "TestComponent";
+  const testComponentMeta = {
+    type: "TestComponent",
+    label: "Test Component"
+  };
   const testId = "test-id";
   const renderCountTestId = "render-count-test-id";
-  const elementData = createRootComponent(
-    [
-      {
-        key: ELEMENT_ID,
-        type: TestComponentType,
-        props: {
-          propKey: controlData
-        }
-      },
-      ...rootElements
-    ],
-    ROOT_ID
-  );
-  const snapshot = createMakeswiftPageSnapshot(elementData, { locale, cacheData });
+  const elementData = {
+    key: ELEMENT_ID,
+    type: testComponentMeta.type,
+    props: {
+      propKey: controlData
+    }
+  };
   const runtime = new ReactRuntime();
   registerComponents?.(runtime);
   runtime.registerComponent(
@@ -55,27 +81,44 @@ async function testPageControlPropRendering(controlDefinition, {
       ] });
     }),
     {
-      type: TestComponentType,
-      label: "TestComponent",
+      ...testComponentMeta,
       props: {
         propKey: controlDefinition
       }
     }
   );
-  await act(
-    async () => render(
-      /* @__PURE__ */ jsx(ReactRuntimeProvider, { runtime, previewMode: false, children: /* @__PURE__ */ jsx(Page, { snapshot }) })
-    )
-  );
-  if (action) {
-    await act(async () => {
-      await action(screen.getByTestId(testId));
-    });
-  }
-  expect(snapshot).toMatchSnapshot("snapshot");
-  expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot("resolvedValue");
-  if (expectedRenders != null) {
-    expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders);
+  const testElementTree = (component) => /* @__PURE__ */ jsx(Testing.ReactProvider, { runtime, children: component });
+  if (!isServer()) {
+    const rootElementData = Testing.createRootComponent(
+      [elementData, ...rootElements],
+      ROOT_ID
+    );
+    const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData });
+    await act(async () => render(testElementTree(/* @__PURE__ */ jsx(Page, { snapshot }))));
+    if (action) {
+      await act(async () => {
+        await action(screen.getByTestId(testId));
+      });
+    }
+    expect(snapshot).toMatchSnapshot("snapshot");
+    expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot("resolvedValue");
+    if (expectedRenders != null) {
+      expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders);
+    }
+  } else {
+    console.assert(action == null);
+    console.assert(rootElements.length === 0);
+    const snapshot = Testing.createMakeswiftComponentSnapshot(elementData, { locale, cacheData });
+    const elementTree = testElementTree(
+      /* @__PURE__ */ jsx(MakeswiftComponent, { snapshot, ...testComponentMeta })
+    );
+    const document = await serverSideRender(elementTree);
+    const getByTestId = (id) => document.querySelector(`[data-testid="${id}"]`);
+    expect(propSnapshot(getByTestId(testId))).toMatchSnapshot("resolvedValue");
+    expect([...document.querySelectorAll("style")].map((n) => n.textContent)).toMatchSnapshot(
+      "component styles"
+    );
+    expect(Number(getByTestId(renderCountTestId)?.textContent)).toBe(1);
   }
 }
 export {

package/dist/esm/next/components/tests/controls/page-control-prop-rendering.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["/** ~~@jest-environment~~ ~~jsdom~~ */\n\nimport { forwardRef, useRef, isValidElement } from 'react'\nimport { act } from 'react-dom/test-utils'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport { type Data, type ValueType, type DataType, ControlDefinition } from '@makeswift/controls'\n\nimport { ElementData } from '../../../../state/react-page'\nimport { ~~Page~~ } from '~~../../page~~'\nimport { ~~ReactRuntimeProvider~~ } from '~~../../../../runtimes/react~~'\nimport { ~~ReactRuntime~~ } from '~~../../../../react~~'\n\nimport {~~\n createMakeswiftPageSnapshot,\n createRootComponent,\n~~} from '../../../../utils/~~tests/element~~-~~data-test-test~~'\n\nimport { ~~type~~ ~~MakeswiftPageSnapshot~~ } from '../../../../~~next~~'\n\nconst ROOT_ID = '00000000-0000-0000-0000-000000000000'\nconst ELEMENT_ID = '11111111-1111-1111-1111-111111111111'\n\nconst renderProp = (prop: any) =>\n prop === undefined ? 'undefined' : isValidElement(prop) ? prop : JSON.stringify(prop)\n\nconst propSnapshot = (prop: HTMLElement) =>\n prop.childElementCount ? prop.childNodes : parseStringifiedProp(prop.textContent ?? '')\n\nconst parseStringifiedProp = (prop: string) => (prop === 'undefined' ? undefined : JSON.parse(prop))\n\nexport async function testPageControlPropRendering<D extends ControlDefinition>(\n controlDefinition: D,\n {\n toData,\n value,\n locale,\n cacheData,\n expectedRenders,\n registerComponents,\n action,\n rootElements = [],\n }: {\n toData?: (value: ValueType<D>) => DataType<D>\n value: ValueType<D> \| undefined\n locale?: string \| null\n cacheData?: Partial<~~MakeswiftPageSnapshot['cacheData']~~>\n expectedRenders?: number\n registerComponents?: (runtime: ReactRuntime) => void\n action?: (element: HTMLElement) => Promise<void>\n rootElements?: ElementData[]\n },\n) {\n // Arrange\n const controlData: DataType<D> \| Data =\n value !== undefined ? (toData ? toData(value) : controlDefinition.toData(value)) : undefined\n\n const ~~TestComponentType~~ = 'TestComponent'\n const testId = 'test-id'\n const renderCountTestId = 'render-count-test-id'\n const elementData: ElementData = ~~createRootComponent(~~\n ~~[\n {\n~~ key: ELEMENT_ID,\n type: ~~TestComponentType~~,\n props: {\n propKey: controlData,\n },\n }~~,\n ...rootElements,\n ],\n ROOT_ID,\n )~~\n ~~const snapshot = createMakeswiftPageSnapshot(elementData, { locale, cacheData })~~\n const runtime = new ReactRuntime()\n registerComponents?.(runtime)\n\n // Act\n runtime.registerComponent(\n forwardRef<HTMLDivElement, { propKey?: any }>(({ propKey }, ref) => {\n const renderCount = useRef(0)\n ++renderCount.current\n\n return (\n <div ref={ref}>\n <div data-testid={renderCountTestId}>{renderCount.current}</div>\n <div data-testid={testId}>{renderProp(propKey)}</div>\n </div>\n )\n }),\n {\n ~~type: TestComponentType~~,\n ~~label: 'TestComponent',\n~~ props: {\n propKey: controlDefinition as any,\n },\n },\n )\n\n // ~~Assert~~\n ~~await~~ ~~act~~(~~async~~ () ~~=>\~~n ~~render~~(\n ~~<ReactRuntimeProvider~~ ~~runtime~~={~~runtime}~~ ~~previewMode={false~~}>\n <Page snapshot={snapshot} ~~/>\n </ReactRuntimeProvider>,\n~~ )~~,\n~~ )\n\n if (action) {\n await act(async () => {\n await action(screen.getByTestId(testId))\n })\n }\n\n expect(snapshot).toMatchSnapshot('snapshot')\n expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot('resolvedValue')\n\n if (expectedRenders != null) {\n expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders)\n }\n}\n"],"mappings":"~~AAqFQ~~,~~SACE~~,~~KADF~~;~~AAnFR~~,~~SAAS~~,YAAY,QAAQ,sBAAsB;~~AACnD~~,SAAS,WAAW;AACpB,SAAS,QAAQ,cAAc;AAC/B,OAAO;~~AAKP~~,SAAS,~~YAAY~~;~~AACrB~~,SAAS,~~4BAA4B~~;~~AACrC~~,SAAS,~~oBAAoB~~;~~AAE7B;AAAA~~,~~EACE~~;~~AAAA~~,~~EACA~~;~~AAAA~~,~~OACK~~;~~AAIP~~,MAAM,UAAU;AAChB,MAAM,aAAa;AAEnB,MAAM,aAAa,CAAC,SAClB,SAAS,SAAY,cAAc,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,IAAI;AAEtF,MAAM,eAAe,CAAC,SACpB,~~KAAK~~,oBAAoB,KAAK,aAAa,qBAAqB,~~KAAK~~,eAAe,EAAE;~~AAExF~~,MAAM,uBAAuB,CAAC,SAAkB,SAAS,cAAc,SAAY,KAAK,MAAM,IAAI;AAElG,eAAsB,6BACpB,mBACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAClB,GAUA;AAEA,QAAM,cACJ,UAAU,SAAa,SAAS,OAAO,KAAK,IAAI,kBAAkB,OAAO,KAAK,IAAK;AAErF,QAAM,oBAAoB;~~AAC1B~~,QAAM,SAAS;AACf,QAAM,oBAAoB;AAC1B,QAAM,cAA2B;AAAA,IAC/B~~;AAAA~~,~~MACE;AAAA,QACE,~~KAAK;AAAA,~~QACL~~,MAAM;AAAA,~~QACN~~,OAAO;AAAA,~~UACL~~,SAAS;AAAA,~~QACX~~;AAAA,~~MACF;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA;AAAA,~~EACF;~~AACA~~,QAAM,~~WAAW,4BAA4B,aAAa,EAAE,QAAQ,~~UAAU,~~CAAC;AAC/E,QAAM,UAAU,~~IAAI,aAAa;AACjC,uBAAqB,OAAO;AAG5B,UAAQ;AAAA,IACN,WAA8C,CAAC,EAAE,QAAQ,GAAG,QAAQ;AAClE,YAAM,cAAc,OAAO,CAAC;AAC5B,QAAE,YAAY;AAEd,aACE,qBAAC,SAAI,KACH;AAAA,4BAAC,SAAI,eAAa,mBAAoB,sBAAY,SAAQ;AAAA,QAC1D,oBAAC,SAAI,eAAa,QAAS,qBAAW,OAAO,GAAE;AAAA,SACjD;AAAA,IAEJ,CAAC;AAAA,IACD;AAAA,MACE,~~MAAM~~;AAAA,~~MACN~~,OAAO;AAAA,~~MACP,OAAO;AAAA,~~QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;~~AAGA~~,QAAM~~;AAAA~~,~~IAAI~~,~~YACR;AAAA~~,~~MACE~~,oBAAC,~~wBAAqB~~,~~SAAkB~~,~~aAAa~~,~~OACnD~~,~~8BAAC~~,~~QAAK~~,~~UAAoB~~,~~GAC5B~~;AAAA,~~IACF~~;AAAA,~~EACF~~;AAEA,~~MAAI~~,QAAQ;~~AACV~~,UAAM,IAAI,YAAY;~~AACpB~~,YAAM,OAAO,OAAO,YAAY,MAAM,CAAC;AAAA,~~IACzC~~,CAAC;AAAA,~~EACH~~;AAEA,~~SAAO~~,QAAQ,EAAE,gBAAgB,UAAU;AAC3C,~~SAAO~~,aAAa,OAAO,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AAEhF,~~MAAI~~,mBAAmB,MAAM;AAC3B,~~WAAO~~,OAAO,OAAO,YAAY,iBAAiB,EAAE,WAAW,CAAC,EAAE,KAAK,eAAe;AAAA,~~EACxF~~;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement } from 'react'\nimport { renderToReadableStream } from 'react-dom/server'\nimport { JSDOM } from 'jsdom'\nimport { act } from 'react-dom/test-utils'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport { ServerInsertedHTMLContext } from 'next/navigation'\n\nimport { type Data, type ValueType, type DataType, ControlDefinition } from '@makeswift/controls'\n\nimport { type CacheData } from '../../../../api/react'\nimport { ElementData } from '../../../../state/react-page'\nimport { ReactRuntime } from '../../../../react'\nimport { MakeswiftComponent } from '../../MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\nimport * as Testing from '../../../../runtimes/react/testing'\n\nconst ROOT_ID = '00000000-0000-0000-0000-000000000000'\nconst ELEMENT_ID = '11111111-1111-1111-1111-111111111111'\n\nconst renderProp = (prop: any) =>\n prop === undefined ? 'undefined' : isValidElement(prop) ? prop : JSON.stringify(prop)\n\nconst propSnapshot = (prop: HTMLElement \| null) =>\n prop?.childElementCount ? prop.childNodes : parseStringifiedProp(prop?.textContent ?? '')\n\nconst parseStringifiedProp = (prop: string) => (prop === 'undefined' ? undefined : JSON.parse(prop))\n\nasync function streamToString(stream: ReadableStream) {\n const reader = stream.getReader()\n const decoder = new TextDecoder()\n\n let result = ''\n\n while (true) {\n const { done, value } = await reader.read()\n if (done) break\n result += decoder.decode(value, { stream: true })\n }\n\n return result\n}\n\nasync function renderToString(element: ReactNode) {\n return await streamToString(await renderToReadableStream(element))\n}\n\nasync function serverSideRender(children: ReactNode) {\n // wrap the children in a context provider to capture server-inserted HTML, see\n // https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/server-inserted-html.tsx\n const serverInsertedCallbacks: (() => React.ReactNode)[] = []\n\n const elementTree = (\n <ServerInsertedHTMLContext.Provider value={handler => serverInsertedCallbacks.push(handler)}>\n {children}\n </ServerInsertedHTMLContext.Provider>\n )\n\n const elementsHTML = await renderToString(elementTree)\n\n const serverInsertedNodes = serverInsertedCallbacks.map((callback, index) => (\n <Fragment key={'__next_server_inserted__' + index}>{callback()}</Fragment>\n ))\n\n const headHTML = await renderToString(serverInsertedNodes)\n\n const dom = new JSDOM(\n `<!DOCTYPE html><head>${headHTML}</head><body><div id=\"root\">${elementsHTML}</div></body></div>`,\n {\n runScripts: 'dangerously',\n },\n )\n\n return dom.window.document\n}\n\nexport async function testPageControlPropRendering<D extends ControlDefinition>(\n controlDefinition: D,\n {\n toData,\n value,\n locale,\n cacheData,\n expectedRenders,\n registerComponents,\n action,\n rootElements = [],\n }: {\n toData?: (value: ValueType<D>) => DataType<D>\n value: ValueType<D> \| undefined\n locale?: string \| null\n cacheData?: Partial<CacheData>\n expectedRenders?: number\n registerComponents?: (runtime: ReactRuntime) => void\n action?: (element: HTMLElement) => Promise<void>\n rootElements?: ElementData[]\n },\n) {\n // Arrange\n const controlData: DataType<D> \| Data =\n value !== undefined ? (toData ? toData(value) : controlDefinition.toData(value)) : undefined\n\n const testComponentMeta = {\n type: 'TestComponent',\n label: 'Test Component',\n }\n\n const testId = 'test-id'\n const renderCountTestId = 'render-count-test-id'\n const elementData: ElementData = {\n key: ELEMENT_ID,\n type: testComponentMeta.type,\n props: {\n propKey: controlData,\n },\n }\n\n const runtime = new ReactRuntime()\n registerComponents?.(runtime)\n\n // Act\n runtime.registerComponent(\n forwardRef<HTMLDivElement, { propKey?: any }>(({ propKey }, ref) => {\n const renderCount = useRef(0)\n ++renderCount.current\n\n return (\n <div ref={ref}>\n <div data-testid={renderCountTestId}>{renderCount.current}</div>\n <div data-testid={testId}>{renderProp(propKey)}</div>\n </div>\n )\n }),\n {\n ...testComponentMeta,\n props: {\n propKey: controlDefinition as any,\n },\n },\n )\n\n const testElementTree = (component: ReactNode) => (\n <Testing.ReactProvider runtime={runtime}>{component}</Testing.ReactProvider>\n )\n\n if (!isServer()) {\n const rootElementData: ElementData = Testing.createRootComponent(\n [elementData, ...rootElements],\n ROOT_ID,\n )\n\n const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData })\n\n // Assert\n await act(async () => render(testElementTree(<Page snapshot={snapshot} />)))\n\n if (action) {\n await act(async () => {\n await action(screen.getByTestId(testId))\n })\n }\n\n expect(snapshot).toMatchSnapshot('snapshot')\n expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot('resolvedValue')\n\n if (expectedRenders != null) {\n expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders)\n }\n } else {\n // test server-side rendering using a component snapshot\n console.assert(action == null)\n console.assert(rootElements.length === 0)\n\n const snapshot = Testing.createMakeswiftComponentSnapshot(elementData, { locale, cacheData })\n const elementTree = testElementTree(\n <MakeswiftComponent snapshot={snapshot} {...testComponentMeta} />,\n )\n\n const document = await serverSideRender(elementTree)\n const getByTestId = (id: string): HTMLElement \| null =>\n document.querySelector(`[data-testid=\"${id}\"]`)\n\n expect(propSnapshot(getByTestId(testId))).toMatchSnapshot('resolvedValue')\n expect([...document.querySelectorAll('style')].map(n => n.textContent)).toMatchSnapshot(\n 'component styles',\n )\n expect(Number(getByTestId(renderCountTestId)?.textContent)).toBe(1)\n }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/next/components/tests/controls/rich-text-v2-control/fixtures.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { APIResourceType } from "../../../../../api";
+import * as Fixture from "../fixtures/rich-text-v2";
+const swatchId = "U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA==";
+const swatch = {
+  __typename: APIResourceType.Swatch,
+  id: swatchId,
+  hue: 238,
+  saturation: 87,
+  lightness: 49
+};
+const typographyId = "VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=";
+const typography = {
+  __typename: APIResourceType.Typography,
+  id: typographyId,
+  name: "Body",
+  style: [
+    {
+      deviceId: "desktop",
+      value: {
+        fontFamily: "Lato",
+        fontSize: { value: 16, unit: "px" },
+        color: null,
+        lineHeight: null,
+        letterSpacing: null,
+        fontWeight: null,
+        textAlign: null,
+        uppercase: null,
+        underline: null,
+        strikethrough: null,
+        italic: null
+      }
+    }
+  ]
+};
+const value = Fixture.data;
+const cacheData = () => ({
+  apiResources: {
+    Swatch: [
+      {
+        id: swatchId,
+        value: swatch
+      }
+    ],
+    Typography: [
+      {
+        id: typographyId,
+        value: typography
+      }
+    ]
+  }
+});
+export {
+  cacheData,
+  value
+};
+//# sourceMappingURL=fixtures.js.map

package/dist/esm/next/components/tests/controls/rich-text-v2-control/fixtures.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../../src/next/components/tests/controls/rich-text-v2-control/fixtures.tsx"],"sourcesContent":["import { APIResourceType, type Swatch, type Typography } from '../../../../../api'\n\nimport * as Fixture from '../fixtures/rich-text-v2'\nimport { type CacheData } from '../../../../../api/react'\n\nconst swatchId = 'U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA=='\nconst swatch: Swatch = {\n __typename: APIResourceType.Swatch,\n id: swatchId,\n hue: 238,\n saturation: 87,\n lightness: 49,\n}\n\nconst typographyId = 'VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc='\nconst typography: Typography = {\n __typename: APIResourceType.Typography,\n id: typographyId,\n name: 'Body',\n style: [\n {\n deviceId: 'desktop',\n value: {\n fontFamily: 'Lato',\n fontSize: { value: 16, unit: 'px' },\n color: null,\n lineHeight: null,\n letterSpacing: null,\n fontWeight: null,\n textAlign: null,\n uppercase: null,\n underline: null,\n strikethrough: null,\n italic: null,\n },\n },\n ],\n}\n\nexport const value = Fixture.data\nexport const cacheData = (): Partial<CacheData> => ({\n apiResources: {\n Swatch: [\n {\n id: swatchId,\n value: swatch,\n },\n ],\n Typography: [\n {\n id: typographyId,\n value: typography,\n },\n ],\n },\n})\n"],"mappings":"AAAA,SAAS,uBAAqD;AAE9D,YAAY,aAAa;AAGzB,MAAM,WAAW;AACjB,MAAM,SAAiB;AAAA,EACrB,YAAY,gBAAgB;AAAA,EAC5B,IAAI;AAAA,EACJ,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,WAAW;AACb;AAEA,MAAM,eAAe;AACrB,MAAM,aAAyB;AAAA,EAC7B,YAAY,gBAAgB;AAAA,EAC5B,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,OAAO;AAAA,IACL;AAAA,MACE,UAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,QAClC,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,QACX,eAAe;AAAA,QACf,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,QAAQ,QAAQ;AACtB,MAAM,YAAY,OAA2B;AAAA,EAClD,cAAc;AAAA,IACZ,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV;AAAA,QACE,IAAI;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/next/components/tests/controls/style-control/fixtures.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { Style, TextInput } from "../../../../../controls";
+import { MakeswiftComponentType } from "../../../../../components/builtin/constants";
+function Button({ className, title }) {
+  return /* @__PURE__ */ jsx("button", { className, children: title });
+}
+const value = {
+  width: [{ deviceId: "desktop", value: { value: 80, unit: "%" } }],
+  margin: [
+    {
+      deviceId: "desktop",
+      value: {
+        marginTop: { value: 4, unit: "px" },
+        marginLeft: void 0,
+        marginRight: void 0,
+        marginBottom: void 0
+      }
+    }
+  ]
+};
+const registerComponents = (runtime) => {
+  runtime.registerComponent(Button, {
+    type: MakeswiftComponentType.Button,
+    label: "Button",
+    props: {
+      className: Style(),
+      title: TextInput({ defaultValue: "Button" })
+    }
+  });
+};
+export {
+  registerComponents,
+  value
+};
+//# sourceMappingURL=fixtures.js.map

package/dist/esm/next/components/tests/controls/style-control/fixtures.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../../src/next/components/tests/controls/style-control/fixtures.tsx"],"sourcesContent":["import { type ValueType } from '@makeswift/controls'\nimport { Style, StyleDefinition, TextInput } from '../../../../../controls'\nimport { MakeswiftComponentType } from '../../../../../components/builtin/constants'\nimport { ReactRuntime } from '../../../../../react'\n\nfunction Button({ className, title }: { className: string; title: string }) {\n return <button className={className}>{title}</button>\n}\n\nexport const value: ValueType<StyleDefinition> = {\n width: [{ deviceId: 'desktop', value: { value: 80, unit: '%' } }],\n margin: [\n {\n deviceId: 'desktop',\n value: {\n marginTop: { value: 4, unit: 'px' },\n marginLeft: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n },\n },\n ],\n}\n\nexport const registerComponents = (runtime: ReactRuntime) => {\n runtime.registerComponent(Button, {\n type: MakeswiftComponentType.Button,\n label: 'Button',\n props: {\n className: Style(),\n title: TextInput({ defaultValue: 'Button' }),\n },\n })\n}\n"],"mappings":"AAMS;AALT,SAAS,OAAwB,iBAAiB;AAClD,SAAS,8BAA8B;AAGvC,SAAS,OAAO,EAAE,WAAW,MAAM,GAAyC;AAC1E,SAAO,oBAAC,YAAO,WAAuB,iBAAM;AAC9C;AAEO,MAAM,QAAoC;AAAA,EAC/C,OAAO,CAAC,EAAE,UAAU,WAAW,OAAO,EAAE,OAAO,IAAI,MAAM,IAAI,EAAE,CAAC;AAAA,EAChE,QAAQ;AAAA,IACN;AAAA,MACE,UAAU;AAAA,MACV,OAAO;AAAA,QACL,WAAW,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,QAClC,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,qBAAqB,CAAC,YAA0B;AAC3D,UAAQ,kBAAkB,QAAQ;AAAA,IAChC,MAAM,uBAAuB;AAAA,IAC7B,OAAO;AAAA,IACP,OAAO;AAAA,MACL,WAAW,MAAM;AAAA,MACjB,OAAO,UAAU,EAAE,cAAc,SAAS,CAAC;AAAA,IAC7C;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/esm/next/components/tests/prop-controllers/page-prop-controller.js CHANGED Viewed

@@ -7,12 +7,8 @@ import {
 import { randomUUID } from "crypto";
 import { Page } from "../../page";
 import { act } from "react-dom/test-utils";
-import { ReactRuntimeProvider } from "../../../../runtimes/react";
 import { ReactRuntime } from "../../../../react";
-import {
-  createMakeswiftPageSnapshot,
-  createRootComponent
-} from "../../../../utils/tests/element-data-test-test";
+import * as Testing from "../../../../runtimes/react/testing";
 const pagePropControllerTest = (propDef, value, component, assert, options) => describe("Page", () => {
   test(`can render ${propDef.type} v0 data`, async () => {
     const descriptorV0 = {
@@ -21,7 +17,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
     };
     const TestComponentType = "TestComponent";
     const testId = "test-id";
-    const elementData = createRootComponent([
+    const elementData = Testing.createRootComponent([
       {
         key: randomUUID(),
         type: TestComponentType,
@@ -30,7 +26,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
         }
       }
     ]);
-    const snapshot = createMakeswiftPageSnapshot(elementData);
+    const snapshot = Testing.createMakeswiftPageSnapshot(elementData);
     const runtime = new ReactRuntime();
     runtime.registerComponent(component(testId), {
       type: TestComponentType,
@@ -41,7 +37,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
     });
     await act(
       async () => render(
-        /* @__PURE__ */ jsx(ReactRuntimeProvider, { runtime, previewMode: false, children: /* @__PURE__ */ jsx(Page, { snapshot }) })
+        /* @__PURE__ */ jsx(Testing.ReactProvider, { runtime, children: /* @__PURE__ */ jsx(Page, { snapshot }) })
       )
     );
     assert(screen.getByTestId(testId));
@@ -54,7 +50,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
     };
     const TestComponentType = "TestComponent";
     const testId = "test-id";
-    const elementData = createRootComponent([
+    const elementData = Testing.createRootComponent([
       {
         key: randomUUID(),
         type: TestComponentType,
@@ -63,7 +59,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
         }
       }
     ]);
-    const snapshot = createMakeswiftPageSnapshot(elementData);
+    const snapshot = Testing.createMakeswiftPageSnapshot(elementData);
     const runtime = new ReactRuntime();
     runtime.registerComponent(component(testId), {
       type: TestComponentType,
@@ -74,7 +70,7 @@ const pagePropControllerTest = (propDef, value, component, assert, options) => d
     });
     await act(
       async () => render(
-        /* @__PURE__ */ jsx(ReactRuntimeProvider, { runtime, previewMode: false, children: /* @__PURE__ */ jsx(Page, { snapshot }) })
+        /* @__PURE__ */ jsx(Testing.ReactProvider, { runtime, children: /* @__PURE__ */ jsx(Page, { snapshot }) })
       )
     );
     assert(screen.getByTestId(testId));

package/dist/esm/next/components/tests/prop-controllers/page-prop-controller.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/next/components/tests/prop-controllers/page-prop-controller.tsx"],"sourcesContent":["/** @jest-environment jsdom */\n\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport {\n type OptionsType,\n Types,\n type Descriptor,\n type PropDef,\n type Value,\n} from '@makeswift/prop-controllers'\n\nimport { type ElementData, type ComponentType } from '../../../../state/react-page'\nimport { randomUUID } from 'crypto'\n\nimport { Page } from '../../page'\nimport { act } from 'react-dom/test-utils'\nimport { ~~ReactRuntimeProvider~~ } from '../../../../~~runtimes/~~react'\nimport { ~~ReactRuntime~~ } from '../../../../react~~'\nimport {\n createMakeswiftPageSnapshot,\n createRootComponent,\n} from '../../../../utils~~/~~tests/element-data-test-test~~'\n\nexport const pagePropControllerTest = <\n P extends PropDef & ((options?: any) => any),\n C extends ComponentType<{ propKey: Value<P> \| undefined }>,\n>(\n propDef: P,\n value: Value<typeof propDef>,\n component: (testId: string) => C,\n assert: (element: HTMLElement) => void,\n options?: OptionsType<P>,\n) =>\n describe('Page', () => {\n test(`can render ${propDef.type} v0 data`, async () => {\n // Arrange\n const descriptorV0: Descriptor<typeof propDef> = {\n type: propDef.type,\n options,\n }\n\n const TestComponentType = 'TestComponent'\n const testId = 'test-id'\n\n const elementData: ElementData = createRootComponent([\n {\n key: randomUUID(),\n type: TestComponentType,\n props: {\n propKey: propDef.toPropData(value, descriptorV0),\n },\n },\n ])\n const snapshot = createMakeswiftPageSnapshot(elementData)\n const runtime = new ReactRuntime()\n\n runtime.registerComponent(component(testId), {\n type: TestComponentType,\n label: 'TestComponent',\n props: {\n propKey: propDef(options),\n },\n })\n\n await act(async () =>\n render(\n <~~ReactRuntimeProvider~~ runtime={runtime} ~~previewMode={false}~~>\n <Page snapshot={snapshot} />\n </~~ReactRuntimeProvider~~>,\n ),\n )\n\n assert(screen.getByTestId(testId))\n })\n\n test(`can render ${propDef.type} v1 data`, async () => {\n // Arrange\n const gapXDefinitionV1: Descriptor<typeof propDef> = {\n type: Types.GapX,\n version: 1,\n options: {},\n }\n\n const TestComponentType = 'TestComponent'\n const testId = 'test-id'\n const elementData: ElementData = createRootComponent([\n {\n key: randomUUID(),\n type: TestComponentType,\n props: {\n propKey: propDef.toPropData(value, gapXDefinitionV1),\n },\n },\n ])\n const snapshot = createMakeswiftPageSnapshot(elementData)\n const runtime = new ReactRuntime()\n\n runtime.registerComponent(component(testId), {\n type: TestComponentType,\n label: 'TestComponent',\n props: {\n propKey: propDef(options),\n },\n })\n\n await act(async () =>\n render(\n <~~ReactRuntimeProvider~~ runtime={runtime} ~~previewMode={false}~~>\n <Page snapshot={snapshot} />\n </~~ReactRuntimeProvider~~>,\n ),\n )\n\n assert(screen.getByTestId(testId))\n })\n })\n"],"mappings":"~~AAqEY~~;~~AAnEZ~~,SAAS,QAAQ,cAAc;AAC/B,OAAO;AAEP;AAAA,EAEE;AAAA,OAIK;AAGP,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB,SAAS,~~4BAA4B;AACrC,SAAS,~~oBAAoB;AAC7B~~;AAAA~~,~~EACE;AAAA~~,~~EACA~~;~~AAAA~~,~~OACK;AAEA,~~MAAM,yBAAyB,CAIpC,SACA,OACA,WACA,QACA,YAEA,SAAS,QAAQ,MAAM;AACrB,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,eAA2C;AAAA,MAC/C,MAAM,QAAQ;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AAEf,UAAM,cAA2B,oBAAoB;AAAA,~~MACnD~~;AAAA,QACE,KAAK,WAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,YAAY;AAAA,QACjD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,4BAA4B,WAAW;~~AACxD~~,UAAM,UAAU,IAAI,aAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,~~wBAAqB~~,~~SAAkB~~,~~aAAa~~,~~OACnD~~,8BAAC,QAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,OAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AAED,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,mBAA+C;AAAA,MACnD,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,MACT,SAAS,CAAC;AAAA,IACZ;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AACf,UAAM,cAA2B,oBAAoB;AAAA,~~MACnD~~;AAAA,QACE,KAAK,WAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,gBAAgB;AAAA,QACrD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,4BAA4B,WAAW;~~AACxD~~,UAAM,UAAU,IAAI,aAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,~~wBAAqB~~,~~SAAkB~~,~~aAAa~~,~~OACnD~~,8BAAC,QAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,OAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AACH,CAAC;","names":[]}
1	+ {"version":3,"sources":["../../../../../../src/next/components/tests/prop-controllers/page-prop-controller.tsx"],"sourcesContent":["/** @jest-environment jsdom /\n\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\n\nimport {\n type OptionsType,\n Types,\n type Descriptor,\n type PropDef,\n type Value,\n} from '@makeswift/prop-controllers'\n\nimport { type ElementData, type ComponentType } from '../../../../state/react-page'\nimport { randomUUID } from 'crypto'\n\nimport { Page } from '../../page'\nimport { act } from 'react-dom/test-utils'\nimport { ReactRuntime } from '../../../../react'\nimport as Testing from '../../../../runtimes/react/testing'\n\nexport const pagePropControllerTest = <\n P extends PropDef & ((options?: any) => any),\n C extends ComponentType<{ propKey: Value<P> \| undefined }>,\n>(\n propDef: P,\n value: Value<typeof propDef>,\n component: (testId: string) => C,\n assert: (element: HTMLElement) => void,\n options?: OptionsType<P>,\n) =>\n describe('Page', () => {\n test(`can render ${propDef.type} v0 data`, async () => {\n // Arrange\n const descriptorV0: Descriptor<typeof propDef> = {\n type: propDef.type,\n options,\n }\n\n const TestComponentType = 'TestComponent'\n const testId = 'test-id'\n\n const elementData: ElementData = Testing.createRootComponent([\n {\n key: randomUUID(),\n type: TestComponentType,\n props: {\n propKey: propDef.toPropData(value, descriptorV0),\n },\n },\n ])\n const snapshot = Testing.createMakeswiftPageSnapshot(elementData)\n const runtime = new ReactRuntime()\n\n runtime.registerComponent(component(testId), {\n type: TestComponentType,\n label: 'TestComponent',\n props: {\n propKey: propDef(options),\n },\n })\n\n await act(async () =>\n render(\n <Testing.ReactProvider runtime={runtime}>\n <Page snapshot={snapshot} />\n </Testing.ReactProvider>,\n ),\n )\n\n assert(screen.getByTestId(testId))\n })\n\n test(`can render ${propDef.type} v1 data`, async () => {\n // Arrange\n const gapXDefinitionV1: Descriptor<typeof propDef> = {\n type: Types.GapX,\n version: 1,\n options: {},\n }\n\n const TestComponentType = 'TestComponent'\n const testId = 'test-id'\n const elementData: ElementData = Testing.createRootComponent([\n {\n key: randomUUID(),\n type: TestComponentType,\n props: {\n propKey: propDef.toPropData(value, gapXDefinitionV1),\n },\n },\n ])\n const snapshot = Testing.createMakeswiftPageSnapshot(elementData)\n const runtime = new ReactRuntime()\n\n runtime.registerComponent(component(testId), {\n type: TestComponentType,\n label: 'TestComponent',\n props: {\n propKey: propDef(options),\n },\n })\n\n await act(async () =>\n render(\n <Testing.ReactProvider runtime={runtime}>\n <Page snapshot={snapshot} />\n </Testing.ReactProvider>,\n ),\n )\n\n assert(screen.getByTestId(testId))\n })\n })\n"],"mappings":"AAiEY;AA/DZ,SAAS,QAAQ,cAAc;AAC/B,OAAO;AAEP;AAAA,EAEE;AAAA,OAIK;AAGP,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,YAAY,aAAa;AAElB,MAAM,yBAAyB,CAIpC,SACA,OACA,WACA,QACA,YAEA,SAAS,QAAQ,MAAM;AACrB,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,eAA2C;AAAA,MAC/C,MAAM,QAAQ;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AAEf,UAAM,cAA2B,QAAQ,oBAAoB;AAAA,MAC3D;AAAA,QACE,KAAK,WAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,YAAY;AAAA,QACjD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,QAAQ,4BAA4B,WAAW;AAChE,UAAM,UAAU,IAAI,aAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,QAAQ,eAAR,EAAsB,SACrB,8BAAC,QAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,OAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AAED,OAAK,cAAc,QAAQ,IAAI,YAAY,YAAY;AAErD,UAAM,mBAA+C;AAAA,MACnD,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,MACT,SAAS,CAAC;AAAA,IACZ;AAEA,UAAM,oBAAoB;AAC1B,UAAM,SAAS;AACf,UAAM,cAA2B,QAAQ,oBAAoB;AAAA,MAC3D;AAAA,QACE,KAAK,WAAW;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,UACL,SAAS,QAAQ,WAAW,OAAO,gBAAgB;AAAA,QACrD;AAAA,MACF;AAAA,IACF,CAAC;AACD,UAAM,WAAW,QAAQ,4BAA4B,WAAW;AAChE,UAAM,UAAU,IAAI,aAAa;AAEjC,YAAQ,kBAAkB,UAAU,MAAM,GAAG;AAAA,MAC3C,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS,QAAQ,OAAO;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,UAAM;AAAA,MAAI,YACR;AAAA,QACE,oBAAC,QAAQ,eAAR,EAAsB,SACrB,8BAAC,QAAK,UAAoB,GAC5B;AAAA,MACF;AAAA,IACF;AAEA,WAAO,OAAO,YAAY,MAAM,CAAC;AAAA,EACnC,CAAC;AACH,CAAC;","names":[]}

package/dist/esm/next/root-style-registry.js CHANGED Viewed

@@ -5,26 +5,27 @@ import { cache } from "@emotion/css";
 import { useServerInsertedHTML } from "next/navigation";
 import { createContext, useContext, useState } from "react";
 const CacheContext = createContext(cache);
+const createRootStyleCache = () => {
+  const cache2 = createCache({ key: "css" });
+  cache2.compat = true;
+  const prevInsert = cache2.insert;
+  let inserted = [];
+  cache2.insert = (...args) => {
+    const serialized = args[1];
+    if (cache2.inserted[serialized.name] === void 0) {
+      inserted.push(serialized.name);
+    }
+    return prevInsert(...args);
+  };
+  const flush = () => {
+    const prevInserted = inserted;
+    inserted = [];
+    return prevInserted;
+  };
+  return { cache: cache2, flush };
+};
 function RootStyleRegistry({ children }) {
-  const [{ cache: cache2, flush }] = useState(() => {
-    const cache3 = createCache({ key: "css" });
-    cache3.compat = true;
-    const prevInsert = cache3.insert;
-    let inserted = [];
-    cache3.insert = (...args) => {
-      const serialized = args[1];
-      if (cache3.inserted[serialized.name] === void 0) {
-        inserted.push(serialized.name);
-      }
-      return prevInsert(...args);
-    };
-    const flush2 = () => {
-      const prevInserted = inserted;
-      inserted = [];
-      return prevInserted;
-    };
-    return { cache: cache3, flush: flush2 };
-  });
+  const [{ cache: cache2, flush }] = useState(() => createRootStyleCache());
   useServerInsertedHTML(() => {
     const names = flush();
     if (names.length === 0)

package/dist/esm/next/root-style-registry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/next/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport createCache, { EmotionCache } from '@emotion/cache'\nimport { cache } from '@emotion/css'\nimport { useServerInsertedHTML } from 'next/navigation'\nimport { ReactNode, createContext, useContext, useState } from 'react'\n\nconst CacheContext = createContext(cache)\n\~~nexport~~ ~~function~~ ~~RootStyleRegistry({ children }: { children: ReactNode }) {\n const [{ cache, flush }]~~ = ~~useState~~(() => {\n const cache = createCache({ key: 'css' })\n cache.compat = true\n const prevInsert = cache.insert\n let inserted: string[] = []\n cache.insert = (...args) => {\n const serialized = args[1]\n if (cache.inserted[serialized.name] === undefined) {\n inserted.push(serialized.name)\n }\n return prevInsert(...args)\n }\n const flush = () => {\n const prevInserted = inserted\n inserted = []\n return prevInserted\n }\n return { cache, flush }\n })\n\n useServerInsertedHTML(() => {\n const names = flush()\n if (names.length === 0) return null\n let styles = ''\n for (const name of names) {\n styles += cache.inserted[name]\n }\n return (\n <style\n data-emotion={`${cache.key} ${names.join(' ')}`}\n dangerouslySetInnerHTML={{\n __html: styles,\n }}\n />\n )\n })\n\n return <CacheContext.Provider value={cache}>{children}</CacheContext.Provider>\n}\n\nexport function useCache(): EmotionCache {\n return useContext(CacheContext)\n}\n"],"mappings":";~~AAsCM~~;~~AApCN~~,OAAO,iBAAmC;AAC1C,SAAS,aAAa;AACtB,SAAS,6BAA6B;AACtC,SAAoB,eAAe,YAAY,gBAAgB;AAE/D,MAAM,eAAe,cAAc,KAAK;~~AAEjC~~,~~SAAS,kBAAkB,EAAE,SAAS,GAA4B;AACvE,QAAM,CAAC,EAAE,OAAAA,QAAO,~~MAAM,~~CAAC~~,~~IAAI,SAAS,~~MAAM;~~AACxC~~,~~UAAMA~~,SAAQ,YAAY,EAAE,KAAK,MAAM,CAAC;AACxC,~~IAAAA~~,OAAM,SAAS;~~AACf~~,~~UAAM~~,aAAaA,OAAM;AACzB,~~QAAI~~,WAAqB,CAAC;~~AAC1B~~,~~IAAAA~~,OAAM,SAAS,IAAI,SAAS;AAC1B,~~YAAM~~,aAAa,KAAK,CAAC;AACzB,~~UAAIA~~,OAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,~~iBAAS~~,KAAK,WAAW,IAAI;AAAA,~~MAC~~/B;AACA,~~aAAO~~,WAAW,GAAG,IAAI;AAAA,~~IAC3B~~;~~AACA~~,~~UAAMC~~,~~SAAQ~~,MAAM;AAClB,~~YAAM~~,eAAe;AACrB,~~iBAAW~~,CAAC;AACZ,~~aAAO~~;AAAA,~~IACT~~;~~AACA~~,~~WAAO~~,EAAE,~~OAAAD~~,QAAO,~~OAAAC~~,~~OAAM~~;~~AAAA~~,~~EACxB~~,CAAC;~~AAED~~,wBAAsB,MAAM;AAC1B,UAAM,QAAQ,MAAM;AACpB,QAAI,MAAM,WAAW;AAAG,aAAO;AAC/B,QAAI,SAAS;AACb,eAAW,QAAQ,OAAO;AACxB,~~gBAAUD~~,OAAM,SAAS,IAAI;AAAA,IAC/B;~~AACA~~,WACE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc,GAAGA,OAAM,GAAG,IAAI,MAAM,KAAK,GAAG,CAAC;AAAA,QAC7C,yBAAyB;AAAA,UACvB,QAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAOA,QAAQ,UAAS;AACxD;AAEO,SAAS,WAAyB;AACvC,SAAO,WAAW,YAAY;AAChC;","names":["cache"~~,"flush"~~]}
1	+ {"version":3,"sources":["../../../src/next/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport createCache, { EmotionCache } from '@emotion/cache'\nimport { cache } from '@emotion/css'\nimport { useServerInsertedHTML } from 'next/navigation'\nimport { ReactNode, createContext, useContext, useState } from 'react'\n\nconst CacheContext = createContext(cache)\n\nconst createRootStyleCache = () => {\n const cache = createCache({ key: 'css' })\n cache.compat = true\n\n const prevInsert = cache.insert\n let inserted: string[] = []\n\n cache.insert = (...args) => {\n const serialized = args[1]\n if (cache.inserted[serialized.name] === undefined) {\n inserted.push(serialized.name)\n }\n return prevInsert(...args)\n }\n\n const flush = () => {\n const prevInserted = inserted\n inserted = []\n return prevInserted\n }\n\n return { cache, flush }\n}\n\nexport function RootStyleRegistry({ children }: { children: ReactNode }) {\n const [{ cache, flush }] = useState(() => createRootStyleCache())\n\n useServerInsertedHTML(() => {\n const names = flush()\n if (names.length === 0) return null\n let styles = ''\n for (const name of names) {\n styles += cache.inserted[name]\n }\n\n return (\n <style\n data-emotion={`${cache.key} ${names.join(' ')}`}\n dangerouslySetInnerHTML={{\n __html: styles,\n }}\n />\n )\n })\n\n return <CacheContext.Provider value={cache}>{children}</CacheContext.Provider>\n}\n\nexport function useCache(): EmotionCache {\n return useContext(CacheContext)\n}\n"],"mappings":";AA6CM;AA3CN,OAAO,iBAAmC;AAC1C,SAAS,aAAa;AACtB,SAAS,6BAA6B;AACtC,SAAoB,eAAe,YAAY,gBAAgB;AAE/D,MAAM,eAAe,cAAc,KAAK;AAExC,MAAM,uBAAuB,MAAM;AACjC,QAAMA,SAAQ,YAAY,EAAE,KAAK,MAAM,CAAC;AACxC,EAAAA,OAAM,SAAS;AAEf,QAAM,aAAaA,OAAM;AACzB,MAAI,WAAqB,CAAC;AAE1B,EAAAA,OAAM,SAAS,IAAI,SAAS;AAC1B,UAAM,aAAa,KAAK,CAAC;AACzB,QAAIA,OAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,eAAS,KAAK,WAAW,IAAI;AAAA,IAC/B;AACA,WAAO,WAAW,GAAG,IAAI;AAAA,EAC3B;AAEA,QAAM,QAAQ,MAAM;AAClB,UAAM,eAAe;AACrB,eAAW,CAAC;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,EAAE,OAAAA,QAAO,MAAM;AACxB;AAEO,SAAS,kBAAkB,EAAE,SAAS,GAA4B;AACvE,QAAM,CAAC,EAAE,OAAAA,QAAO,MAAM,CAAC,IAAI,SAAS,MAAM,qBAAqB,CAAC;AAEhE,wBAAsB,MAAM;AAC1B,UAAM,QAAQ,MAAM;AACpB,QAAI,MAAM,WAAW;AAAG,aAAO;AAC/B,QAAI,SAAS;AACb,eAAW,QAAQ,OAAO;AACxB,gBAAUA,OAAM,SAAS,IAAI;AAAA,IAC/B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc,GAAGA,OAAM,GAAG,IAAI,MAAM,KAAK,GAAG,CAAC;AAAA,QAC7C,yBAAyB;AAAA,UACvB,QAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAOA,QAAQ,UAAS;AACxD;AAEO,SAAS,WAAyB;AACvC,SAAO,WAAW,YAAY;AAChC;","names":["cache"]}

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

@@ -53,11 +53,12 @@ function useResolvedProps(propDefs, elementData, elementKey) {
     [propDefs, resolveProp]
   );
   const props = useMemo(() => resolvableRecord(resolvables), [resolvables]);
-  stylesheetFactory.useDefinedStyles();
   useEffect(() => {
     props.triggerResolve();
   }, []);
-  return useSyncExternalStore(props.subscribe, props.readStable, props.readStable);
+  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable);
+  stylesheetFactory.useDefinedStyles();
+  return resolvedProps;
 }
 export {
   useResolvedProps

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

	@@ -1 +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 * as ReactPage from '../../../state/react-page'\nimport { useResourceResolver } from './use-resource-resolver'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nimport { useStylesheetFactory } from './use-stylesheet-factory'\n\nimport { resolvableRecord } from '../resolvable-record'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nfunction useControlInstances(elementKey: string): Record<string, ControlInstance> \| null {\n const documentKey = useDocumentKey()\n\n return useSelector(state => {\n if (documentKey == null) return null\n\n return ReactPage.getPropControllers(state, documentKey, elementKey)\n })\n}\n\ntype CacheItem = {\n data: Data\n control: ControlInstance \| undefined\n resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps(\n propDefs: Record<string, ControlDefinition>,\n elementData: Record<string, Data>,\n elementKey: string,\n): Record<string, unknown> {\n const stylesheetFactory = useStylesheetFactory()\n const resourceResolver = useResourceResolver()\n const controls = useControlInstances(elementKey)\n\n const cache = useRef<Record<string, CacheItem>>({}).current\n const resolveProp = useCallback(\n (def: ControlDefinition, propName: string) => {\n const data = elementData[propName]\n const control = controls?.[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 [controls, elementData, resourceResolver, stylesheetFactory],\n )\n\n const resolvables = useMemo(\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}\", falling back to \\`${defaultValue}\\`.`,\n { control: def, error },\n )\n })\n }),\n [propDefs, resolveProp],\n )\n\n const props = useMemo(() => resolvableRecord(resolvables), [resolvables])\n\n ~~stylesheetFactory.useDefinedStyles~~()\n\n useEffect(() => {\n props.triggerResolve()\n }, [])\n\n ~~return~~ useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,YAAY,eAAe;AAC3B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAErC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB,YAA4D;AACvF,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,UAAU,mBAAmB,OAAO,aAAa,UAAU;AAAA,EACpE,CAAC;AACH;AAQO,SAAS,iBACd,UACA,aACA,YACyB;AACzB,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,YAAY,QAAQ;AACjC,YAAM,UAAU,WAAW,QAAQ;AAEnC,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,aAAa,kBAAkB,iBAAiB;AAAA,EAC7D;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,wBAAwB,YAAY;AAAA,UAC7E,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,QAAQ,QAAQ,MAAM,iBAAiB,WAAW,GAAG,CAAC,WAAW,CAAC;~~AAExE~~,~~oBAAkB,iBAAiB;AAEnC,~~YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,CAAC;~~AAEL~~,~~SAAO~~,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;~~AACjF~~;","names":[]}
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 * as ReactPage from '../../../state/react-page'\nimport { useResourceResolver } from './use-resource-resolver'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nimport { useStylesheetFactory } from './use-stylesheet-factory'\n\nimport { resolvableRecord } from '../resolvable-record'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nfunction useControlInstances(elementKey: string): Record<string, ControlInstance> \| null {\n const documentKey = useDocumentKey()\n\n return useSelector(state => {\n if (documentKey == null) return null\n\n return ReactPage.getPropControllers(state, documentKey, elementKey)\n })\n}\n\ntype CacheItem = {\n data: Data\n control: ControlInstance \| undefined\n resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps(\n propDefs: Record<string, ControlDefinition>,\n elementData: Record<string, Data>,\n elementKey: string,\n): Record<string, unknown> {\n const stylesheetFactory = useStylesheetFactory()\n const resourceResolver = useResourceResolver()\n const controls = useControlInstances(elementKey)\n\n const cache = useRef<Record<string, CacheItem>>({}).current\n const resolveProp = useCallback(\n (def: ControlDefinition, propName: string) => {\n const data = elementData[propName]\n const control = controls?.[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 [controls, elementData, resourceResolver, stylesheetFactory],\n )\n\n const resolvables = useMemo(\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}\", falling back to \\`${defaultValue}\\`.`,\n { control: def, error },\n )\n })\n }),\n [propDefs, resolveProp],\n )\n\n const props = useMemo(() => resolvableRecord(resolvables), [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()\n }, [])\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,YAAY,eAAe;AAC3B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAErC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB,YAA4D;AACvF,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,UAAU,mBAAmB,OAAO,aAAa,UAAU;AAAA,EACpE,CAAC;AACH;AAQO,SAAS,iBACd,UACA,aACA,YACyB;AACzB,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,YAAY,QAAQ;AACjC,YAAM,UAAU,WAAW,QAAQ;AAEnC,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,aAAa,kBAAkB,iBAAiB;AAAA,EAC7D;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,wBAAwB,YAAY;AAAA,UAC7E,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,QAAQ,QAAQ,MAAM,iBAAiB,WAAW,GAAG,CAAC,WAAW,CAAC;AAIxE,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,CAAC;AAIL,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}

package/dist/esm/{utils/tests/breakpoint-test-util.js → runtimes/react/testing/breakpoints.js} RENAMED Viewed

@@ -6,4 +6,4 @@ export {
   MOBILE_MEDIA_QUERY,
   TABLET_MEDIA_QUERY
 };
-//# sourceMappingURL=breakpoint-test-util.js.map
+//# sourceMappingURL=breakpoints.js.map

package/dist/esm/runtimes/react/testing/breakpoints.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/runtimes/react/testing/breakpoints.ts"],"sourcesContent":["export const DESKTOP_MEDIA_QUERY = 'only screen and (min-width: 769px)'\nexport const TABLET_MEDIA_QUERY = 'only screen and (min-width: 769px)'\nexport const MOBILE_MEDIA_QUERY = 'only screen and (min-width: 769px)'\n"],"mappings":"AAAO,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;","names":[]}

package/dist/esm/{utils/tests/element-data-test-test.js → runtimes/react/testing/element-data.js} RENAMED Viewed

@@ -1,5 +1,6 @@
 import { randomUUID } from "crypto";
-import { MakeswiftComponentType } from "../../components";
+import { CacheData } from "../../../api/react";
+import { MakeswiftComponentType } from "../../../components";
 function createRootComponent(elements, rootId) {
   return {
     key: rootId ?? randomUUID(),
@@ -37,14 +38,38 @@ function createMakeswiftPageSnapshot(elementData, {
       locale
     },
     cacheData: {
-      apiResources: {},
-      localizedResourcesMap: {},
+      ...CacheData.empty(),
+      ...cacheData
+    }
+  };
+}
+function createMakeswiftComponentSnapshot(elementData, {
+  cacheData = {},
+  locale = null
+} = {}) {
+  return {
+    key: randomUUID(),
+    document: {
+      id: "test-component-id",
+      name: "Test Component Document",
+      siteId: "test-site-id",
+      data: elementData,
+      inheritsFromParent: false,
+      locale
+    },
+    meta: {
+      allowLocaleFallback: false,
+      requestedLocale: locale
+    },
+    cacheData: {
+      ...CacheData.empty(),
       ...cacheData
     }
   };
 }
 export {
+  createMakeswiftComponentSnapshot,
   createMakeswiftPageSnapshot,
   createRootComponent
 };
-//# sourceMappingURL=element-data-test-test.js.map
+//# sourceMappingURL=element-data.js.map

package/dist/esm/runtimes/react/testing/element-data.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/runtimes/react/testing/element-data.ts"],"sourcesContent":["import { randomUUID } from 'crypto'\nimport { type MakeswiftPageSnapshot, type MakeswiftComponentSnapshot } from '../../../next/client'\nimport { type ElementData } from '../../../state/react-page'\nimport { CacheData } from '../../../api/react'\nimport { MakeswiftComponentType } from '../../../components'\n\nexport function createRootComponent(elements: ElementData[], rootId?: string) {\n return {\n key: rootId ?? randomUUID(),\n type: MakeswiftComponentType.Root,\n props: {\n children: {\n columns: [\n {\n deviceId: 'desktop',\n value: {\n count: 12,\n spans: elements?.map(() => [12]),\n },\n },\n ],\n elements,\n },\n },\n }\n}\n\nexport function createMakeswiftPageSnapshot(\n elementData: ElementData,\n {\n cacheData = {},\n locale = null,\n }: { cacheData?: Partial<MakeswiftPageSnapshot['cacheData']>; locale?: string | null } = {},\n): MakeswiftPageSnapshot {\n return {\n document: {\n id: 'test-page-id',\n site: { id: 'test-site-id' },\n data: elementData,\n snippets: [],\n fonts: [],\n meta: {},\n seo: {},\n localizedPages: [],\n locale,\n },\n cacheData: {\n ...CacheData.empty(),\n ...cacheData,\n },\n }\n}\n\nexport function createMakeswiftComponentSnapshot(\n elementData: ElementData,\n {\n cacheData = {},\n locale = null,\n }: { cacheData?: Partial<MakeswiftComponentSnapshot['cacheData']>; locale?: string | null } = {},\n): MakeswiftComponentSnapshot {\n return {\n key: randomUUID(),\n document: {\n id: 'test-component-id',\n name: 'Test Component Document',\n siteId: 'test-site-id',\n data: elementData,\n inheritsFromParent: false,\n locale,\n },\n meta: {\n allowLocaleFallback: false,\n requestedLocale: locale,\n },\n cacheData: {\n ...CacheData.empty(),\n ...cacheData,\n },\n }\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEhC,SAAS,oBAAoB,UAAyB,QAAiB;AAC5E,SAAO;AAAA,IACL,KAAK,UAAU,WAAW;AAAA,IAC1B,MAAM,uBAAuB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU;AAAA,QACR,SAAS;AAAA,UACP;AAAA,YACE,UAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,OAAO,UAAU,IAAI,MAAM,CAAC,EAAE,CAAC;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,4BACd,aACA;AAAA,EACE,YAAY,CAAC;AAAA,EACb,SAAS;AACX,IAAyF,CAAC,GACnE;AACvB,SAAO;AAAA,IACL,UAAU;AAAA,MACR,IAAI;AAAA,MACJ,MAAM,EAAE,IAAI,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN,UAAU,CAAC;AAAA,MACX,OAAO,CAAC;AAAA,MACR,MAAM,CAAC;AAAA,MACP,KAAK,CAAC;AAAA,MACN,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,GAAG,UAAU,MAAM;AAAA,MACnB,GAAG;AAAA,IACL;AAAA,EACF;AACF;AAEO,SAAS,iCACd,aACA;AAAA,EACE,YAAY,CAAC;AAAA,EACb,SAAS;AACX,IAA8F,CAAC,GACnE;AAC5B,SAAO;AAAA,IACL,KAAK,WAAW;AAAA,IAChB,UAAU;AAAA,MACR,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,oBAAoB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,qBAAqB;AAAA,MACrB,iBAAiB;AAAA,IACnB;AAAA,IACA,WAAW;AAAA,MACT,GAAG,UAAU,MAAM;AAAA,MACnB,GAAG;AAAA,IACL;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/testing/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export * from "./breakpoints";
+export * from "./element-data";
+export * from "./react-provider";
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/testing/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/testing/index.ts"],"sourcesContent":["export * from './breakpoints'\nexport * from './element-data'\nexport * from './react-provider'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/esm/runtimes/react/testing/react-provider.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { RootStyleRegistry } from "../../../next";
+import { ReactRuntimeProvider } from "../components/RuntimeProvider";
+function ReactProvider({
+  children,
+  runtime,
+  previewMode = false
+}) {
+  return /* @__PURE__ */ jsx(ReactRuntimeProvider, { previewMode, runtime, children: /* @__PURE__ */ jsx(RootStyleRegistry, { children }) });
+}
+export {
+  ReactProvider
+};
+//# sourceMappingURL=react-provider.js.map

package/dist/esm/runtimes/react/testing/react-provider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/runtimes/react/testing/react-provider.tsx"],"sourcesContent":["import { RootStyleRegistry } from '../../../next'\nimport { ReactRuntimeProvider } from '../components/RuntimeProvider'\nimport { ReactRuntime } from '../react-runtime'\n\nexport function ReactProvider({\n children,\n runtime,\n previewMode = false,\n}: {\n children: React.ReactNode\n runtime: ReactRuntime\n previewMode?: boolean\n}) {\n return (\n <ReactRuntimeProvider previewMode={previewMode} runtime={runtime}>\n <RootStyleRegistry>{children}</RootStyleRegistry>\n </ReactRuntimeProvider>\n )\n}\n"],"mappings":"AAeM;AAfN,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAG9B,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAIG;AACD,SACE,oBAAC,wBAAqB,aAA0B,SAC9C,8BAAC,qBAAmB,UAAS,GAC/B;AAEJ;","names":[]}

package/dist/esm/runtimes/react/use-style.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from "react";
 import { serializeStyles } from "@emotion/serialize";
 import { registerStyles, insertStyles } from "@emotion/utils";
 import { useCache } from "../../next/root-style-registry";
-const isServer = typeof window === "undefined";
+import { isServer } from "../../utils/is-server";
 const useInsertionEffectSpecifier = "useInsertionEffect";
 const useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect;
 function useStyle(style) {
@@ -22,7 +22,7 @@ function useStyles(cache, styles) {
 }
 function useUniversalInsertionEffect(effect) {
   useInsertionEffect(effect);
-  if (isServer)
+  if (isServer())
     effect();
 }
 function serializedStyleClassName(cache, serialized) {