npm - @makeswift/runtime - Versions diffs - 0.28.9 → 0.28.10-canary.1 - Mend

@makeswift/runtime 0.28.9 → 0.28.10-canary.1

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 (226) hide show

package/dist/cjs/api/graphql-api-client.js CHANGED Viewed

@@ -27,7 +27,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new import_client.GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.28.9"
+      "makeswift-runtime-version": "0.28.10-canary.1"
     });
   }
   async createTableRecord(tableId, columns) {

package/dist/cjs/api/rest-api-client.js CHANGED Viewed

@@ -172,7 +172,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.9"
+      "makeswift-runtime-version": "0.28.10-canary.1"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/cjs/api-handler/handlers/manifest.js CHANGED Viewed

@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return import_request_response.ApiResponse.json({
-    version: "0.28.9",
+    version: "0.28.10-canary.1",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

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

@@ -77,6 +77,22 @@ async function serverSideRender(children) {
   );
   return dom.window.document;
 }
+function stubBuilderMessageChannel() {
+  const postMessageSpy = jest.spyOn(window, "postMessage").mockImplementation(() => {
+  });
+  const originalMessageChannel = window.MessageChannel;
+  const stubPort = () => ({ onmessage: null, postMessage: () => {
+  }, close: () => {
+  } });
+  window.MessageChannel = class {
+    port1 = stubPort();
+    port2 = stubPort();
+  };
+  return () => {
+    postMessageSpy.mockRestore();
+    window.MessageChannel = originalMessageChannel;
+  };
+}
 async function testPageControlPropRendering(controlDefinition, {
   toData,
   value,
@@ -86,7 +102,8 @@ async function testPageControlPropRendering(controlDefinition, {
   registerComponents,
   action,
   rootElements = [],
-  isInBuilder = false
+  isInBuilder = false,
+  isReadOnly = true
 }) {
   const controlData = value !== void 0 ? toData ? toData(value) : controlDefinition.toData(value) : void 0;
   const testComponentMeta = {
@@ -121,8 +138,12 @@ async function testPageControlPropRendering(controlDefinition, {
       }
     }
   );
-  const testElementTree = (component) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Testing.ReactProvider, { runtime, children: component });
+  const testElementTree = (component) => {
+    const siteVersion = isReadOnly ? null : { token: "test-token", version: "draft" };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Testing.ReactProvider, { runtime, siteVersion, children: component });
+  };
   if (!(0, import_is_server.isServer)()) {
+    const restoreMessageChannel = isReadOnly ? null : stubBuilderMessageChannel();
     const rootElementData = Testing.createRootComponent(
       [elementData, ...rootElements],
       ROOT_ID
@@ -139,6 +160,7 @@ async function testPageControlPropRendering(controlDefinition, {
     if (expectedRenders != null) {
       expect(Number(import_react2.screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders);
     }
+    restoreMessageChannel?.();
   } else {
     console.assert(action == null);
     console.assert(rootElements.length === 0);

package/dist/cjs/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":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement, act } from 'react'\nimport { renderToReadableStream } from 'react-dom/server'\nimport { JSDOM } from 'jsdom'\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/api-resources-client'\nimport { ElementData } from '../../../../state/read-only-state'\nimport { setIsInBuilder } from '../../../../state/actions/internal/read-only-actions'\nimport { ReactRuntime } from '../../../../runtimes/react/react-runtime'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\nimport * as Testing from '../../../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 isInBuilder = false,\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 isInBuilder?: boolean\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 = Testing.createReactRuntime()\n runtime.protoStore.dispatch(setIsInBuilder(isInBuilder))\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsDI;AAtDJ,mBAAkF;AAClF,oBAAuC;AACvC,mBAAsB;AACtB,IAAAA,gBAA+B;AAC/B,sBAAO;AACP,wBAA0C;AAM1C,+BAA+B;AAE/B,gCAAmC;AACnC,kBAAqB;AACrB,uBAAyB;AACzB,cAAyB;AAEzB,MAAM,UAAU;AAChB,MAAM,aAAa;AAEnB,MAAM,aAAa,CAAC,SAClB,SAAS,SAAY,kBAAc,6BAAe,IAAI,IAAI,OAAO,KAAK,UAAU,IAAI;AAEtF,MAAM,eAAe,CAAC,SACpB,MAAM,oBAAoB,KAAK,aAAa,qBAAqB,MAAM,eAAe,EAAE;AAE1F,MAAM,uBAAuB,CAAC,SAAkB,SAAS,cAAc,SAAY,KAAK,MAAM,IAAI;AAElG,eAAe,eAAe,QAAwB;AACpD,QAAM,SAAS,OAAO,UAAU;AAChC,QAAM,UAAU,IAAI,YAAY;AAEhC,MAAI,SAAS;AAEb,SAAO,MAAM;AACX,UAAM,EAAE,MAAM,MAAM,IAAI,MAAM,OAAO,KAAK;AAC1C,QAAI;AAAM;AACV,cAAU,QAAQ,OAAO,OAAO,EAAE,QAAQ,KAAK,CAAC;AAAA,EAClD;AAEA,SAAO;AACT;AAEA,eAAe,eAAe,SAAoB;AAChD,SAAO,MAAM,eAAe,UAAM,sCAAuB,OAAO,CAAC;AACnE;AAEA,eAAe,iBAAiB,UAAqB;AAGnD,QAAM,0BAAqD,CAAC;AAE5D,QAAM,cACJ,4CAAC,4CAA0B,UAA1B,EAAmC,OAAO,aAAW,wBAAwB,KAAK,OAAO,GACvF,UACH;AAGF,QAAM,eAAe,MAAM,eAAe,WAAW;AAErD,QAAM,sBAAsB,wBAAwB,IAAI,CAAC,UAAU,UACjE,4CAAC,yBAAmD,mBAAS,KAA9C,6BAA6B,KAAmB,CAChE;AAED,QAAM,WAAW,MAAM,eAAe,mBAAmB;AAEzD,QAAM,MAAM,IAAI;AAAA,IACd,wBAAwB,QAAQ,+BAA+B,YAAY;AAAA,IAC3E;AAAA,MACE,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,IAAI,OAAO;AACpB;AAEA,eAAsB,6BACpB,mBACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,cAAc;AAChB,GAWA;AAEA,QAAM,cACJ,UAAU,SAAa,SAAS,OAAO,KAAK,IAAI,kBAAkB,OAAO,KAAK,IAAK;AAErF,QAAM,oBAAoB;AAAA,IACxB,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,SAAS;AACf,QAAM,oBAAoB;AAC1B,QAAM,cAA2B;AAAA,IAC/B,KAAK;AAAA,IACL,MAAM,kBAAkB;AAAA,IACxB,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAEA,QAAM,UAAU,QAAQ,mBAAmB;AAC3C,UAAQ,WAAW,aAAS,yCAAe,WAAW,CAAC;AACvD,uBAAqB,OAAO;AAG5B,UAAQ;AAAA,QACN,yBAA8C,CAAC,EAAE,QAAQ,GAAG,QAAQ;AAClE,YAAM,kBAAc,qBAAO,CAAC;AAC5B,QAAE,YAAY;AAEd,aACE,6CAAC,SAAI,KACH;AAAA,oDAAC,SAAI,eAAa,mBAAoB,sBAAY,SAAQ;AAAA,QAC1D,4CAAC,SAAI,eAAa,QAAS,qBAAW,OAAO,GAAE;AAAA,SACjD;AAAA,IAEJ,CAAC;AAAA,IACD;AAAA,MACE,GAAG;AAAA,MACH,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,cACvB,4CAAC,QAAQ,eAAR,EAAsB,SAAmB,qBAAU;AAGtD,MAAI,KAAC,2BAAS,GAAG;AACf,UAAM,kBAA+B,QAAQ;AAAA,MAC3C,CAAC,aAAa,GAAG,YAAY;AAAA,MAC7B;AAAA,IACF;AAEA,UAAM,WAAW,QAAQ,4BAA4B,iBAAiB,EAAE,QAAQ,UAAU,CAAC;AAG3F,cAAM,kBAAI,gBAAY,sBAAO,gBAAgB,4CAAC,oBAAK,UAAoB,CAAE,CAAC,CAAC;AAE3E,QAAI,QAAQ;AACV,gBAAM,kBAAI,YAAY;AACpB,cAAM,OAAO,qBAAO,YAAY,MAAM,CAAC;AAAA,MACzC,CAAC;AAAA,IACH;AAEA,WAAO,QAAQ,EAAE,gBAAgB,UAAU;AAC3C,WAAO,aAAa,qBAAO,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AAEhF,QAAI,mBAAmB,MAAM;AAC3B,aAAO,OAAO,qBAAO,YAAY,iBAAiB,EAAE,WAAW,CAAC,EAAE,KAAK,eAAe;AAAA,IACxF;AAAA,EACF,OAAO;AAEL,YAAQ,OAAO,UAAU,IAAI;AAC7B,YAAQ,OAAO,aAAa,WAAW,CAAC;AAExC,UAAM,WAAW,QAAQ,iCAAiC,aAAa,EAAE,QAAQ,UAAU,CAAC;AAC5F,UAAM,cAAc;AAAA,MAClB,4CAAC,gDAAmB,UAAqB,GAAG,mBAAmB;AAAA,IACjE;AAEA,UAAM,WAAW,MAAM,iBAAiB,WAAW;AACnD,UAAM,cAAc,CAAC,OACnB,SAAS,cAAc,iBAAiB,EAAE,IAAI;AAEhD,WAAO,aAAa,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AACzE,WAAO,CAAC,GAAG,SAAS,iBAAiB,OAAO,CAAC,EAAE,IAAI,OAAK,EAAE,WAAW,CAAC,EAAE;AAAA,MACtE;AAAA,IACF;AACA,WAAO,OAAO,YAAY,iBAAiB,GAAG,WAAW,CAAC,EAAE,KAAK,CAAC;AAAA,EACpE;AACF;","names":["import_react"]}
1	+ {"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement, act } from 'react'\nimport { renderToReadableStream } from 'react-dom/server'\nimport { JSDOM } from 'jsdom'\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/api-resources-client'\nimport { ElementData } from '../../../../state/read-only-state'\nimport { setIsInBuilder } from '../../../../state/actions/internal/read-only-actions'\nimport { ReactRuntime } from '../../../../runtimes/react/react-runtime'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\nimport * as Testing from '../../../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\n/*\n In read-write mode, the runtime opens a `MessageChannel` to the builder\n * parent frame; jsdom doesn't implement `MessageChannel`, so stub them to keep\n * the read-write setup from throwing.\n */\nfunction stubBuilderMessageChannel(): () => void {\n const postMessageSpy = jest.spyOn(window, 'postMessage').mockImplementation(() => {})\n\n const originalMessageChannel = window.MessageChannel\n const stubPort = () => ({ onmessage: null, postMessage: () => {}, close: () => {} })\n window.MessageChannel = class {\n port1 = stubPort()\n port2 = stubPort()\n } as unknown as typeof MessageChannel\n\n return () => {\n postMessageSpy.mockRestore()\n window.MessageChannel = originalMessageChannel\n }\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 isInBuilder = false,\n isReadOnly = true,\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 isInBuilder?: boolean\n isReadOnly?: boolean\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 = Testing.createReactRuntime()\n runtime.protoStore.dispatch(setIsInBuilder(isInBuilder))\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 // The runtime enters the read-write state when a non-null site version is\n // passed\n const siteVersion = isReadOnly ? null : { token: 'test-token', version: 'draft' }\n return (\n <Testing.ReactProvider runtime={runtime} siteVersion={siteVersion}>\n {component}\n </Testing.ReactProvider>\n )\n }\n\n if (!isServer()) {\n const restoreMessageChannel = isReadOnly ? null : stubBuilderMessageChannel()\n\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\n restoreMessageChannel?.()\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":["import_react"]}

package/dist/cjs/react/server/index.js ADDED Viewed

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var server_exports = {};
+__export(server_exports, {
+  MakeswiftComponent: () => import_server.MakeswiftComponent,
+  MakeswiftRenderContext: () => import_server.RenderContext,
+  RSCElementRenderer: () => import_server.RSCElementRenderer,
+  RenderElementPayload: () => import_server.RenderElementPayload,
+  ServerCSSCollector: () => import_server.ServerCSSCollector,
+  ServerElement: () => import_server.ServerElement,
+  Slot: () => import_server.Slot,
+  getRenderContext: () => import_server.getRenderContext,
+  setRenderContext: () => import_server.setRenderContext
+});
+module.exports = __toCommonJS(server_exports);
+var import_server = require("../../runtimes/react/server");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MakeswiftComponent,
+  MakeswiftRenderContext,
+  RSCElementRenderer,
+  RenderElementPayload,
+  ServerCSSCollector,
+  ServerElement,
+  Slot,
+  getRenderContext,
+  setRenderContext
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/react/server/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/react/server/index.ts"],"sourcesContent":["export {\n type ServerRenderContext,\n RenderElementPayload,\n RenderContext as MakeswiftRenderContext,\n setRenderContext,\n getRenderContext,\n ServerCSSCollector,\n ServerElement,\n RSCElementRenderer,\n MakeswiftComponent,\n Slot,\n} from '../../runtimes/react/server'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWO;","names":[]}

package/dist/cjs/runtimes/react/components/ElementData.js CHANGED Viewed

@@ -24,24 +24,57 @@ module.exports = __toCommonJS(ElementData_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react2 = require("react");
+var import_FallbackComponent = require("../../../components/shared/FallbackComponent");
+var import_editable_server_element = require("../server/components/editable-server-element");
+var import_server_elements_cache = require("../server/components/server-elements-cache");
 var import_use_builtin_suspense = require("../hooks/use-builtin-suspense");
 var import_use_component = require("../hooks/use-component");
+var import_use_is_read_only = require("../hooks/use-is-read-only");
 var import_can_accept_ref = require("../utils/can-accept-ref");
-var import_FallbackComponent = require("../../../components/shared/FallbackComponent");
 var import_resolve_props = require("./resolve-props");
 var import_activity_with_fallback = require("./activity-with-fallback");
 const ElementData = (0, import_react2.memo)(
   (0, import_react2.forwardRef)(function ElementData2({ elementData }, ref) {
-    const Component = (0, import_use_component.useComponent)(elementData.type);
-    const builtinSuspense = (0, import_use_builtin_suspense.useBuiltinSuspense)(elementData.type);
-    if (Component == null) {
-      console.warn(`Unknown component '${elementData.type}'`, { elementData });
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FallbackComponent.FallbackComponent, { ref, text: "Component not found" });
+    const componentMeta = (0, import_use_component.useComponentMeta)(elementData.type);
+    if (componentMeta == null) {
+      const msg = `Component metadata not found for '${elementData.type}'`;
+      console.warn(msg);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_FallbackComponent.FallbackComponent,
+        {
+          ref,
+          text: "Component not found",
+          details: msg
+        }
+      );
     }
-    const forwardRef2 = (0, import_can_accept_ref.canAcceptRef)(Component);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_activity_with_fallback.ActivityOrFallback, { suspenseFallback: builtinSuspense, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resolve_props.ResolveProps, { element: elementData, children: (props) => forwardRef2 ? /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key, ref }) : /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key }) }) });
+    return componentMeta.server ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ElementDataServer, { elementData, ref }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ElementDataClient, { elementData, ref });
   })
 );
+const ElementDataServer = (0, import_react2.forwardRef)(function ElementDataServer2({ elementData }, ref) {
+  const rscNode = (0, import_server_elements_cache.useServerElementsCache)().getElement(elementData.key);
+  const isReadOnly = (0, import_use_is_read_only.useIsReadOnly)();
+  if (isReadOnly) {
+    if (rscNode == null) {
+      console.error(
+        `React node not found for server component ${elementData.type}, element key ${elementData.key}`
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FallbackComponent.FallbackComponent, { ref, text: "Server component not found" });
+    }
+    return rscNode;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editable_server_element.EditableServerElement, { initialElementData: elementData, children: rscNode });
+});
+const ElementDataClient = (0, import_react2.forwardRef)(function ElementDataClient2({ elementData }, ref) {
+  const Component = (0, import_use_component.useComponent)(elementData.type);
+  const builtinSuspense = (0, import_use_builtin_suspense.useBuiltinSuspense)(elementData.type);
+  if (Component == null) {
+    console.warn(`Unknown component '${elementData.type}'`, { elementData });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FallbackComponent.FallbackComponent, { ref, text: "Component not found" });
+  }
+  const forwardRef2 = (0, import_can_accept_ref.canAcceptRef)(Component);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_activity_with_fallback.ActivityOrFallback, { suspenseFallback: builtinSuspense, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_resolve_props.ResolveProps, { element: elementData, children: (props) => forwardRef2 ? /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key, ref }) : /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key }) }) });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ElementData

package/dist/cjs/runtimes/react/components/ElementData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/runtimes/react/components/ElementData.tsx"],"sourcesContent":["import { Ref, forwardRef, memo, ~~ReactNode~~ } from 'react'\n\nimport { ElementData as ~~ReactPageElementData~~ } from '../../../state/read-only-state'\nimport { useBuiltinSuspense } from '../hooks/use-builtin-suspense'\nimport { useComponent } from '../hooks/use-component'\nimport { ~~canAcceptRef~~ } from '../~~utils~~/~~can~~-~~accept~~-~~ref~~'\nimport { ~~FallbackComponent~~ } from '~~../../../components~~/~~shared/FallbackComponent~~'\nimport { ResolveProps } from './resolve-props'\nimport { ActivityOrFallback } from './activity-with-fallback'\n\ntype ElementDataProps = {\n elementData: ~~ReactPageElementData~~\n}\n\nexport const ElementData = memo(\n forwardRef(function ElementData({ elementData }: ElementDataProps, ref: Ref<unknown>): ReactNode {\n const Component = ~~useComponent~~(elementData.type)\n const builtinSuspense = useBuiltinSuspense(elementData.type)\n\n if (Component == null) {\n console.warn(`Unknown component '${elementData.type}'`, { elementData })\n return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Component not found\" />\n }\n\n const forwardRef = canAcceptRef(Component)\n\n return (\n <ActivityOrFallback suspenseFallback={builtinSuspense}>\n <ResolveProps element={elementData}>\n {props =>\n forwardRef ? (\n <Component {...props} key={elementData.key} ref={ref} />\n ) : (\n <Component {...props} key={elementData.key} />\n )\n }\n </ResolveProps>\n </ActivityOrFallback>\n )\n })~~,\n)~~\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAqBa~~;~~AAUC~~;~~AA/Bd~~,IAAAA,~~gBAAiD~~;~~AAGjD~~,kCAAmC;AACnC,~~2BAA6B~~;~~AAC7B~~,4BAA6B;~~AAC7B,+BAAkC;AAClC~~,2BAA6B;AAC7B,oCAAmC;AAM5B,MAAM,kBAAc;AAAA,MACzB,0BAAW,SAASC,aAAY,EAAE,YAAY,GAAqB,KAA8B;AAC/F,UAAM,gBAAY,mCAAa,YAAY,IAAI;AAC/C,~~UAAM~~,sBAAkB,gDAAmB,YAAY,IAAI;AAE3D,~~QAAI~~,aAAa,MAAM;AACrB,~~cAAQ~~,KAAK,sBAAsB,YAAY,IAAI,KAAK,EAAE,YAAY,CAAC;AACvE,~~aAAO~~,4CAAC,8CAAkB,KAAiC,MAAK,uBAAsB;AAAA,~~IACxF~~;AAEA,~~UAAMC~~,kBAAa,oCAAa,SAAS;AAEzC,~~WACE~~,4CAAC,oDAAmB,kBAAkB,iBACpC,sDAAC,qCAAa,SAAS,aACpB,qBACCA,cACE,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,KAAU,IAEtD,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,GAGlD,GACF;~~AAAA~~,~~EAEJ,~~CAAC;~~AACH;~~","names":["import_react","ElementData","forwardRef"]}
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/components/ElementData.tsx"],"sourcesContent":["import { type ReactNode, type Ref, forwardRef, memo } from 'react'\n\nimport { type ElementData as MakeswiftElementData } from '../../../state/read-only-state'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\n\nimport { EditableServerElement } from '../server/components/editable-server-element'\nimport { useServerElementsCache } from '../server/components/server-elements-cache'\n\nimport { useBuiltinSuspense } from '../hooks/use-builtin-suspense'\nimport { useComponent, useComponentMeta } from '../hooks/use-component'\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\n\nimport { canAcceptRef } from '../utils/can-accept-ref'\n\nimport { ResolveProps } from './resolve-props'\nimport { ActivityOrFallback } from './activity-with-fallback'\n\ntype ElementDataProps = {\n elementData: MakeswiftElementData\n}\n\nexport const ElementData = memo(\n forwardRef(function ElementData({ elementData }: ElementDataProps, ref: Ref<unknown>): ReactNode {\n const componentMeta = useComponentMeta(elementData.type)\n\n if (componentMeta == null) {\n const msg = `Component metadata not found for '${elementData.type}'`\n console.warn(msg)\n return (\n <FallbackComponent\n ref={ref as Ref<HTMLDivElement>}\n text=\"Component not found\"\n details={msg}\n />\n )\n }\n\n return componentMeta.server ? (\n <ElementDataServer elementData={elementData} ref={ref} />\n ) : (\n <ElementDataClient elementData={elementData} ref={ref} />\n )\n }),\n)\n\nconst ElementDataServer = forwardRef(function ElementDataServer(\n { elementData }: ElementDataProps,\n ref: Ref<unknown>,\n): ReactNode {\n // lookup and render RSC node for the element; see the `ServerElementsCache` comment\n const rscNode = useServerElementsCache().getElement(elementData.key)\n const isReadOnly = useIsReadOnly()\n\n if (isReadOnly) {\n if (rscNode == null) {\n console.error(\n `React node not found for server component ${elementData.type}, element key ${elementData.key}`,\n )\n\n return (\n <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Server component not found\" />\n )\n }\n\n return rscNode\n }\n\n return <EditableServerElement initialElementData={elementData}>{rscNode}</EditableServerElement>\n})\n\nconst ElementDataClient = forwardRef(function ElementDataClient(\n { elementData }: ElementDataProps,\n ref: Ref<unknown>,\n): ReactNode {\n const Component = useComponent(elementData.type)\n const builtinSuspense = useBuiltinSuspense(elementData.type)\n\n if (Component == null) {\n console.warn(`Unknown component '${elementData.type}'`, { elementData })\n return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Component not found\" />\n }\n\n const forwardRef = canAcceptRef(Component)\n\n return (\n <ActivityOrFallback suspenseFallback={builtinSuspense}>\n <ResolveProps element={elementData}>\n {props =>\n forwardRef ? (\n <Component {...props} key={elementData.key} ref={ref} />\n ) : (\n <Component {...props} key={elementData.key} />\n )\n }\n </ResolveProps>\n </ActivityOrFallback>\n )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BQ;AA4DI;AAzFZ,IAAAA,gBAA2D;AAG3D,+BAAkC;AAElC,qCAAsC;AACtC,mCAAuC;AAEvC,kCAAmC;AACnC,2BAA+C;AAC/C,8BAA8B;AAE9B,4BAA6B;AAE7B,2BAA6B;AAC7B,oCAAmC;AAM5B,MAAM,kBAAc;AAAA,MACzB,0BAAW,SAASC,aAAY,EAAE,YAAY,GAAqB,KAA8B;AAC/F,UAAM,oBAAgB,uCAAiB,YAAY,IAAI;AAEvD,QAAI,iBAAiB,MAAM;AACzB,YAAM,MAAM,qCAAqC,YAAY,IAAI;AACjE,cAAQ,KAAK,GAAG;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,SAAS;AAAA;AAAA,MACX;AAAA,IAEJ;AAEA,WAAO,cAAc,SACnB,4CAAC,qBAAkB,aAA0B,KAAU,IAEvD,4CAAC,qBAAkB,aAA0B,KAAU;AAAA,EAE3D,CAAC;AACH;AAEA,MAAM,wBAAoB,0BAAW,SAASC,mBAC5C,EAAE,YAAY,GACd,KACW;AAEX,QAAM,cAAU,qDAAuB,EAAE,WAAW,YAAY,GAAG;AACnE,QAAM,iBAAa,uCAAc;AAEjC,MAAI,YAAY;AACd,QAAI,WAAW,MAAM;AACnB,cAAQ;AAAA,QACN,6CAA6C,YAAY,IAAI,iBAAiB,YAAY,GAAG;AAAA,MAC/F;AAEA,aACE,4CAAC,8CAAkB,KAAiC,MAAK,8BAA6B;AAAA,IAE1F;AAEA,WAAO;AAAA,EACT;AAEA,SAAO,4CAAC,wDAAsB,oBAAoB,aAAc,mBAAQ;AAC1E,CAAC;AAED,MAAM,wBAAoB,0BAAW,SAASC,mBAC5C,EAAE,YAAY,GACd,KACW;AACX,QAAM,gBAAY,mCAAa,YAAY,IAAI;AAC/C,QAAM,sBAAkB,gDAAmB,YAAY,IAAI;AAE3D,MAAI,aAAa,MAAM;AACrB,YAAQ,KAAK,sBAAsB,YAAY,IAAI,KAAK,EAAE,YAAY,CAAC;AACvE,WAAO,4CAAC,8CAAkB,KAAiC,MAAK,uBAAsB;AAAA,EACxF;AAEA,QAAMC,kBAAa,oCAAa,SAAS;AAEzC,SACE,4CAAC,oDAAmB,kBAAkB,iBACpC,sDAAC,qCAAa,SAAS,aACpB,qBACCA,cACE,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,KAAU,IAEtD,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,GAGlD,GACF;AAEJ,CAAC;","names":["import_react","ElementData","ElementDataServer","ElementDataClient","forwardRef"]}

package/dist/cjs/runtimes/react/components/framework-context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ReactNode,\n type PropsWithChildren,\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ForwardRefExoticComponent,\n type RefAttributes,\n forwardRef,\n createContext,\n useContext,\n useMemo,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n src: string\n alt: string\n sizes?: string\n width?: number\n height?: number\n priority?: boolean\n fill?: boolean\n style?: CSSProperties\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n linkType?: LinkData['type']\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n Head: HeadComponent\n HeadSnippet: HeadSnippet\n Image: ImageComponent\n Link: LinkComponent\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nconst DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nconst DefaultHeadSnippet = BaseHeadSnippet\n\nconst DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n <img\n {...props}\n style={{\n ...(fill\n ? {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n }\n : {}),\n ...style,\n }}\n loading={priority ? 'eager' : 'lazy'}\n />\n)\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nconst FrameworkContext = createContext<Partial<FrameworkContext>>({})\n\nexport const FrameworkContextProvider = ({\n value,\n children,\n}: PropsWithChildren<{ value: Partial<FrameworkContext> }>) => {\n const parentContext = useContext(FrameworkContext)\n const mergedContext = useMemo(() => ({ ...parentContext, ...value }), [parentContext, value])\n\n return <FrameworkContext.Provider value={mergedContext}>{children}</FrameworkContext.Provider>\n}\n\nconst defaultContext: FrameworkContext = {\n Head: DefaultHead,\n HeadSnippet: DefaultHeadSnippet,\n Image: DefaultImage,\n Link: DefaultLink,\n}\n\nexport function useFrameworkContext(): FrameworkContext {\n return { ...defaultContext, ...useContext(FrameworkContext) }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAkDyD~~;~~AAhDzD~~,mBAYO;~~AAMP~~,yBAAgC;~~AA8BhC~~,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,2EAAG,UAAS;AAErE,MAAM,qBAAqB;AAE3B,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MACtE;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGF,MAAM,kBAA6B;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,4CAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEA,MAAM,uBAAmB,4BAAyC,CAAC,CAAC;AAE7D,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,oBAAgB,yBAAW,gBAAgB;AACjD,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,KAAK,CAAC;AAE5F,SAAO,4CAAC,iBAAiB,UAAjB,EAA0B,OAAO,eAAgB,UAAS;AACpE;AAEA,MAAM,iBAAmC;AAAA,EACvC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,sBAAwC;AACtD,SAAO,EAAE,GAAG,gBAAgB,OAAG,yBAAW,gBAAgB,EAAE;AAC9D;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ReactNode,\n type PropsWithChildren,\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ForwardRefExoticComponent,\n type RefAttributes,\n forwardRef,\n createContext,\n useContext,\n useMemo,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client/page-snapshot'\n\nimport { type RenderElementPayload } from '../server/render-element-payload'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n src: string\n alt: string\n sizes?: string\n width?: number\n height?: number\n priority?: boolean\n fill?: boolean\n style?: CSSProperties\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n linkType?: LinkData['type']\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n Head: HeadComponent\n HeadSnippet: HeadSnippet\n Image: ImageComponent\n Link: LinkComponent\n /*\n Callback to render a single RSC element on the server and return the result.\n */\n renderRSCElement?: (args: RenderElementPayload) => Promise<ReactNode>\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nconst DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nconst DefaultHeadSnippet = BaseHeadSnippet\n\nconst DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n <img\n {...props}\n style={{\n ...(fill\n ? {\n height: '100%',\n width: '100%',\n objectFit: 'cover',\n }\n : {}),\n ...style,\n }}\n loading={priority ? 'eager' : 'lazy'}\n />\n)\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nconst FrameworkContext = createContext<Partial<FrameworkContext>>({})\n\nexport const FrameworkContextProvider = ({\n value,\n children,\n}: PropsWithChildren<{ value: Partial<FrameworkContext> }>) => {\n const parentContext = useContext(FrameworkContext)\n const mergedContext = useMemo(() => ({ ...parentContext, ...value }), [parentContext, value])\n\n return <FrameworkContext.Provider value={mergedContext}>{children}</FrameworkContext.Provider>\n}\n\nconst defaultContext: FrameworkContext = {\n Head: DefaultHead,\n HeadSnippet: DefaultHeadSnippet,\n Image: DefaultImage,\n Link: DefaultLink,\n}\n\nexport function useFrameworkContext(): FrameworkContext {\n return { ...defaultContext, ...useContext(FrameworkContext) }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDyD;AAtDzD,mBAYO;AAQP,yBAAgC;AAkChC,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,2EAAG,UAAS;AAErE,MAAM,qBAAqB;AAE3B,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MACtE;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGF,MAAM,kBAA6B;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,4CAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEA,MAAM,uBAAmB,4BAAyC,CAAC,CAAC;AAE7D,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,oBAAgB,yBAAW,gBAAgB;AACjD,QAAM,oBAAgB,sBAAQ,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,KAAK,CAAC;AAE5F,SAAO,4CAAC,iBAAiB,UAAjB,EAA0B,OAAO,eAAgB,UAAS;AACpE;AAEA,MAAM,iBAAmC;AAAA,EACvC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,sBAAwC;AACtD,SAAO,EAAE,GAAG,gBAAgB,OAAG,yBAAW,gBAAgB,EAAE;AAC9D;","names":[]}

package/dist/cjs/runtimes/react/controls/rich-text/EditableText/editable-text.js CHANGED Viewed

@@ -42,6 +42,7 @@ var import_slate = require("slate");
 var import_slate_react = require("slate-react");
 var import_controls = require("@makeswift/controls");
 var import__ = require("../../..");
+var import_use_slate_reset = require("../../use-slate-reset");
 var import_slate2 = require("../../../../../slate");
 var import_builder_edit_mode = require("../../../../../state/modules/builder-edit-mode");
 var import_poll_box_model = require("../../../poll-box-model");
@@ -101,6 +102,7 @@ const EditableText = (0, import_react.forwardRef)(function EditableText2({ id, t
     },
     [controller, editor]
   );
+  const slateReset = (0, import_use_slate_reset.useSlateReset)();
   const handleBlur = (0, import_react.useCallback)((e) => {
     if (e.relatedTarget == null)
       return;
@@ -116,7 +118,7 @@ const EditableText = (0, import_react.forwardRef)(function EditableText2({ id, t
       onFocus: handleFocus,
       onKeyDown: handleKeyDown,
       onBlur: handleBlur,
-      className: (0, import_css.cx)(width, margin),
+      className: (0, import_css.cx)(slateReset, width, margin),
       readOnly: editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT,
       placeholder: "Write some text..."
     }

package/dist/cjs/runtimes/react/controls/rich-text/EditableText/editable-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/read-write/prop-controllers'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n id?: string\n text?: RichTextValue\n width?: string\n margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n { id, text, width, margin }: Props,\n ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n useSyncDOMSelection(editor, isPreservingDOMSElection)\n const delaySync = useSyncWithBuilder(editor, text)\n const editMode = useBuilderEditMode()\n\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const controller = propControllers?.text\n\n useEffect(() => {\n if (controller == null) return\n\n const element = ReactEditor.toDOMNode(editor, editor)\n\n return pollBoxModel({\n element,\n onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n })\n }, [editor, controller])\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return ReactEditor.toDOMNode(editor, editor)\n },\n getBoxModel() {\n return getBox(ReactEditor.toDOMNode(editor, editor))\n },\n setPropControllers,\n }),\n [editor, setPropControllers],\n )\n\n const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n useEffect(() => {\n controller?.setSlateEditor(editor)\n }, [controller, editor])\n\n const handleFocus = useCallback(() => {\n controller?.focus()\n setIsPreservingDOMSelection(true)\n }, [controller])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (isHotkey('mod+shift+z', e)) return controller?.redo()\n if (isHotkey('mod+z', e)) return controller?.undo()\n if (isHotkey('escape')(e)) return controller?.blur()\n onKeyDown(e, editor)\n },\n [controller, editor],\n )\n\n const handleBlur = useCallback((e: FocusEvent) => {\n // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n if (e.relatedTarget == null) return\n // Otherwise we want to deselect on blur and stop preserving selection.\n setIsPreservingDOMSelection(false)\n ReactEditor.deselect(editor)\n }, [])\n\n return (\n <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n <Editable\n id={id}\n renderLeaf={Leaf}\n renderElement={Element}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n className={cx(width, margin)}\n readOnly={editMode !== BuilderEditMode.CONTENT}\n placeholder=\"Write some text...\"\n />\n </SlateReact>\n )\n})\n\nexport default EditableText\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAkHM~~;~~AAhHN~~,iBAAmB;AACnB,2BAAuB;AACvB,uBAAqB;AACrB,mBAUO;AAEP,mBAA6B;AAC7B,yBAAsE;AAEtE,sBAA4D;AAE5D,eAAmC;~~AAEnC~~,IAAAA,gBAAkE;AAClE,+BAAgC;AAEhC,4BAA6B;AAC7B,wBAA8B;AAE9B,iCAAoC;AACpC,gCAAmC;AASnC,MAAM,cAAiC;AAAA,EACrC,EAAE,MAAM,sBAAM,UAAU,WAAW,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE;AAC9D;AAEO,MAAM,mBAAe,yBAAW,SAASC,cAC9C,EAAE,IAAI,MAAM,OAAO,OAAO,GAC1B,KACA;AACA,QAAM,CAAC,MAAM,QAAI,uBAAS,UAAM,6BAAU,kCAAe,+BAAY,kCAAU,2BAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AACjG,QAAM,CAAC,0BAA0B,2BAA2B,QAAI,uBAAS,KAAK;AAC9E,sDAAoB,QAAQ,wBAAwB;AACpD,QAAM,gBAAY,8CAAmB,QAAQ,IAAI;AACjD,QAAM,eAAW,6BAAmB;AAEpC,QAAM,CAAC,iBAAiB,kBAAkB,QACxC,uBAAyD,IAAI;AAC/D,QAAM,aAAa,iBAAiB;AAEpC,8BAAU,MAAM;AACd,QAAI,cAAc;AAAM;AAExB,UAAM,UAAU,+BAAY,UAAU,QAAQ,MAAM;AAEpD,eAAO,oCAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,WAAW,eAAe,QAAQ;AAAA,IAClE,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AACX,eAAO,+BAAY,UAAU,QAAQ,MAAM;AAAA,MAC7C;AAAA,MACA,cAAc;AACZ,mBAAO,6BAAO,+BAAY,UAAU,QAAQ,MAAM,CAAC;AAAA,MACrD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,kBAAkB;AAAA,EAC7B;AAEA,QAAM,mBAAe,sBAAQ,MAAO,WAAO,kCAAiB,IAAI,IAAI,aAAc,CAAC,IAAI,CAAC;AAExF,8BAAU,MAAM;AACd,gBAAY,eAAe,MAAM;AAAA,EACnC,GAAG,CAAC,YAAY,MAAM,CAAC;AAEvB,QAAM,kBAAc,0BAAY,MAAM;AACpC,gBAAY,MAAM;AAClB,gCAA4B,IAAI;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAqB;AACpB,cAAI,iBAAAC,SAAS,eAAe,CAAC;AAAG,eAAO,YAAY,KAAK;AACxD,cAAI,iBAAAA,SAAS,SAAS,CAAC;AAAG,eAAO,YAAY,KAAK;AAClD,cAAI,iBAAAA,SAAS,QAAQ,EAAE,CAAC;AAAG,eAAO,YAAY,KAAK;AACnD,mCAAU,GAAG,MAAM;AAAA,IACrB;AAAA,IACA,CAAC,YAAY,MAAM;AAAA,EACrB;AAEA,QAAM,iBAAa,0BAAY,CAAC,MAAkB;AAEhD,QAAI,EAAE,iBAAiB;AAAM;AAE7B,gCAA4B,KAAK;AACjC,mCAAY,SAAS,MAAM;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAAC,OAAA,EAAW,QAAgB,OAAO,cAAc,UAAU,WACzD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,eAAW,eAAG,OAAO,MAAM;AAAA,~~MAC3B~~,UAAU,aAAa,yCAAgB;AAAA,MACvC,aAAY;AAAA;AAAA,EACd,GACF;AAEJ,CAAC;AAED,IAAO,wBAAQ;","names":["import_slate","EditableText","isHotkey","SlateReact"]}
1	+ {"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { useSlateReset } from '../../use-slate-reset'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/read-write/prop-controllers'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n id?: string\n text?: RichTextValue\n width?: string\n margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n { id, text, width, margin }: Props,\n ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n useSyncDOMSelection(editor, isPreservingDOMSElection)\n const delaySync = useSyncWithBuilder(editor, text)\n const editMode = useBuilderEditMode()\n\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const controller = propControllers?.text\n\n useEffect(() => {\n if (controller == null) return\n\n const element = ReactEditor.toDOMNode(editor, editor)\n\n return pollBoxModel({\n element,\n onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n })\n }, [editor, controller])\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return ReactEditor.toDOMNode(editor, editor)\n },\n getBoxModel() {\n return getBox(ReactEditor.toDOMNode(editor, editor))\n },\n setPropControllers,\n }),\n [editor, setPropControllers],\n )\n\n const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n useEffect(() => {\n controller?.setSlateEditor(editor)\n }, [controller, editor])\n\n const handleFocus = useCallback(() => {\n controller?.focus()\n setIsPreservingDOMSelection(true)\n }, [controller])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (isHotkey('mod+shift+z', e)) return controller?.redo()\n if (isHotkey('mod+z', e)) return controller?.undo()\n if (isHotkey('escape')(e)) return controller?.blur()\n onKeyDown(e, editor)\n },\n [controller, editor],\n )\n\n const slateReset = useSlateReset()\n\n const handleBlur = useCallback((e: FocusEvent) => {\n // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n if (e.relatedTarget == null) return\n // Otherwise we want to deselect on blur and stop preserving selection.\n setIsPreservingDOMSelection(false)\n ReactEditor.deselect(editor)\n }, [])\n\n return (\n <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n <Editable\n id={id}\n renderLeaf={Leaf}\n renderElement={Element}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n className={cx(slateReset, width, margin)}\n readOnly={editMode !== BuilderEditMode.CONTENT}\n placeholder=\"Write some text...\"\n />\n </SlateReact>\n )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["import_slate","EditableText","isHotkey","SlateReact"]}

package/dist/cjs/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.js CHANGED Viewed

@@ -40,6 +40,7 @@ var import_is_hotkey = __toESM(require("is-hotkey"));
 var import_slate_react = require("slate-react");
 var import_rich_text_v2 = require("../../../../../controls/rich-text-v2");
 var import__ = require("../../..");
+var import_use_slate_reset = require("../../use-slate-reset");
 var import_builder_edit_mode = require("../../../../../state/modules/builder-edit-mode");
 var import_poll_box_model = require("../../../poll-box-model");
 var import_slate2 = require("../../../../../slate");
@@ -147,9 +148,11 @@ function EditableTextV2({ text, definition, control }) {
     if (e.relatedTarget?.getAttribute("contenteditable") === "true")
       isPreservingFocus.current = false;
   }, []);
+  const slateReset = (0, import_use_slate_reset.useSlateReset)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slate_react.Slate, { editor, value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_slate_react.Editable,
     {
+      className: slateReset,
       renderLeaf,
       renderElement,
       onFocus: handleFocus,

package/dist/cjs/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["'use client'\n\nimport {\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n withReact,\n ReactEditor,\n RenderElementProps,\n RenderLeafProps,\n Slate,\n Editable,\n} from 'slate-react'\n\nimport {\n RichTextV2Definition,\n RichText,\n RichTextV2Control,\n type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../..'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { withBuilder, withLocalChanges } from '../../../../../slate'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\ntype Props = {\n text?: RichTextDataV2\n definition: RichTextV2Definition\n control: RichTextV2Control \| null\n}\n\nexport function EditableTextV2({ text, definition, control }: Props) {\n const plugins = useMemo(() => definition.config.plugins, [definition])\n\n const [editor] = useState(() =>\n plugins.reduceRight(\n (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n withLocalChanges(withBuilder(withReact(createEditor()))),\n ),\n )\n\n useEffect(() => {\n if (control == null) return\n\n const element = ReactEditor.toDOMNode(editor, editor)\n return pollBoxModel({\n element,\n onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n })\n }, [editor, control])\n\n // ------ Preserving selection ------\n\n const isPreservingFocus = useRef(false)\n useSyncDOMSelection(editor, isPreservingFocus)\n const editMode = useBuilderEditMode()\n\n useEffect(() => {\n /*\n This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n * - in the case of the overlay we switch to BUILD mode\n * - in the case of the sidebar we preserve the selection\n /\n if (editMode !== BuilderEditMode.CONTENT) {\n isPreservingFocus.current = false\n ReactEditor.deselect(editor)\n }\n }, [editMode])\n\n // ------ Syncing remote changes ------\n\n useSyncRemoteChanges(editor, text)\n\n // ------ Default value ------\n\n const presetValue = usePresetValue(definition)\n\n const initialValue = useMemo(\n () => (text && RichText.dataToNodes(text)) ?? presetValue,\n [text, presetValue],\n )\n\n useEffect(() => {\n control?.setEditor(editor)\n control?.setDefaultValue(defaultValue)\n }, [control, editor])\n\n /\n When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n */\n useEffect(() => {\n if (initialValue === presetValue) {\n control?.onLocalUserChange()\n }\n }, [control, initialValue, presetValue])\n\n // ------ Rendering ------\n\n const renderElement = useCallback(\n (props: RenderElementProps) => {\n return <RichTextV2Element {...props} definition={definition} plugins={plugins} />\n },\n [plugins, definition],\n )\n\n const renderLeaf = useCallback(\n (props: RenderLeafProps) => {\n return <RichTextV2Leaf {...props} definition={definition} plugins={plugins} />\n },\n [plugins, definition],\n )\n\n // ------ Event handlers ------\n\n const handleFocus = useCallback(() => {\n isPreservingFocus.current = true\n control?.select()\n }, [control])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (isHotkey('mod+shift+z', e)) return control?.redo()\n if (isHotkey('mod+z', e)) return control?.undo()\n if (isHotkey('escape')(e)) {\n isPreservingFocus.current = false\n ReactEditor.blur(editor)\n control?.switchToBuildMode()\n }\n\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n }\n\n plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n },\n [control, plugins, editor, editMode],\n )\n\n const handleKeyUp = useCallback(\n (e: KeyboardEvent) => {\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n e.preventDefault()\n }\n },\n [control, editor, editMode],\n )\n\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n e.preventDefault()\n }\n },\n [editMode],\n )\n\n const handleBlur = useCallback((e: FocusEvent) => {\n // outside of iframe (overlay, sidebar, etc)\n if (e.relatedTarget == null) return\n // another text\n if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n isPreservingFocus.current = false\n }, [])\n\n return (\n <Slate editor={editor} value={initialValue}>\n <Editable\n renderLeaf={renderLeaf}\n renderElement={renderElement}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onClick={handleClick}\n onBlur={handleBlur}\n readOnly={editMode !== BuilderEditMode.CONTENT}\n placeholder=\"Write some text...\"\n />\n </Slate>\n )\n}\n\nexport default EditableTextV2\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAwHa~~;~~AAtHb~~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","names":["import_slate","editor","isHotkey"]}
1	+ {"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["'use client'\n\nimport {\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n withReact,\n ReactEditor,\n RenderElementProps,\n RenderLeafProps,\n Slate,\n Editable,\n} from 'slate-react'\n\nimport {\n RichTextV2Definition,\n RichText,\n RichTextV2Control,\n type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../..'\nimport { useSlateReset } from '../../use-slate-reset'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { withBuilder, withLocalChanges } from '../../../../../slate'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\ntype Props = {\n text?: RichTextDataV2\n definition: RichTextV2Definition\n control: RichTextV2Control \| null\n}\n\nexport function EditableTextV2({ text, definition, control }: Props) {\n const plugins = useMemo(() => definition.config.plugins, [definition])\n\n const [editor] = useState(() =>\n plugins.reduceRight(\n (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n withLocalChanges(withBuilder(withReact(createEditor()))),\n ),\n )\n\n useEffect(() => {\n if (control == null) return\n\n const element = ReactEditor.toDOMNode(editor, editor)\n return pollBoxModel({\n element,\n onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n })\n }, [editor, control])\n\n // ------ Preserving selection ------\n\n const isPreservingFocus = useRef(false)\n useSyncDOMSelection(editor, isPreservingFocus)\n const editMode = useBuilderEditMode()\n\n useEffect(() => {\n /*\n This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n * - in the case of the overlay we switch to BUILD mode\n * - in the case of the sidebar we preserve the selection\n /\n if (editMode !== BuilderEditMode.CONTENT) {\n isPreservingFocus.current = false\n ReactEditor.deselect(editor)\n }\n }, [editMode])\n\n // ------ Syncing remote changes ------\n\n useSyncRemoteChanges(editor, text)\n\n // ------ Default value ------\n\n const presetValue = usePresetValue(definition)\n\n const initialValue = useMemo(\n () => (text && RichText.dataToNodes(text)) ?? presetValue,\n [text, presetValue],\n )\n\n useEffect(() => {\n control?.setEditor(editor)\n control?.setDefaultValue(defaultValue)\n }, [control, editor])\n\n /\n When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n */\n useEffect(() => {\n if (initialValue === presetValue) {\n control?.onLocalUserChange()\n }\n }, [control, initialValue, presetValue])\n\n // ------ Rendering ------\n\n const renderElement = useCallback(\n (props: RenderElementProps) => {\n return <RichTextV2Element {...props} definition={definition} plugins={plugins} />\n },\n [plugins, definition],\n )\n\n const renderLeaf = useCallback(\n (props: RenderLeafProps) => {\n return <RichTextV2Leaf {...props} definition={definition} plugins={plugins} />\n },\n [plugins, definition],\n )\n\n // ------ Event handlers ------\n\n const handleFocus = useCallback(() => {\n isPreservingFocus.current = true\n control?.select()\n }, [control])\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (isHotkey('mod+shift+z', e)) return control?.redo()\n if (isHotkey('mod+z', e)) return control?.undo()\n if (isHotkey('escape')(e)) {\n isPreservingFocus.current = false\n ReactEditor.blur(editor)\n control?.switchToBuildMode()\n }\n\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n }\n\n plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n },\n [control, plugins, editor, editMode],\n )\n\n const handleKeyUp = useCallback(\n (e: KeyboardEvent) => {\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n e.preventDefault()\n }\n },\n [control, editor, editMode],\n )\n\n const handleClick = useCallback(\n (e: MouseEvent) => {\n if (editMode === BuilderEditMode.CONTENT) {\n e.stopPropagation()\n e.preventDefault()\n }\n },\n [editMode],\n )\n\n const handleBlur = useCallback((e: FocusEvent) => {\n // outside of iframe (overlay, sidebar, etc)\n if (e.relatedTarget == null) return\n // another text\n if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n isPreservingFocus.current = false\n }, [])\n\n const slateReset = useSlateReset()\n\n return (\n <Slate editor={editor} value={initialValue}>\n <Editable\n className={slateReset}\n renderLeaf={renderLeaf}\n renderElement={renderElement}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n onClick={handleClick}\n onBlur={handleBlur}\n readOnly={editMode !== BuilderEditMode.CONTENT}\n placeholder=\"Write some text...\"\n />\n </Slate>\n )\n}\n\nexport default EditableTextV2\n"],"mappings":"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","names":["import_slate","editor","isHotkey"]}

package/dist/cjs/runtimes/react/controls/use-slate-reset.js ADDED Viewed

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_slate_reset_exports = {};
+__export(use_slate_reset_exports, {
+  useSlateReset: () => useSlateReset
+});
+module.exports = __toCommonJS(use_slate_reset_exports);
+var import_use_style = require("../use-style");
+function useSlateReset() {
+  return (0, import_use_style.useStyle)({
+    // @ts-expect-error: csstype's `all` doesn't accept `!important` annotations
+    "& [data-slate-string], & [data-slate-zero-width]": {
+      all: "revert !important"
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSlateReset
+});
+//# sourceMappingURL=use-slate-reset.js.map

package/dist/cjs/runtimes/react/controls/use-slate-reset.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/runtimes/react/controls/use-slate-reset.ts"],"sourcesContent":["import { useStyle } from '../use-style'\n\n/**\n * `slate-react` renders read-only rich-text within a `` tag containing\n * multiple spans. Makeswift text-styles are applied to these spans via a class\n * on the span tags directly:\n *\n * \n * My text\n * \n *\n * HOWEVER: in the builder, `slate-react` renders the same content as editable\n * text with additional DOM structure; namely, intermediate nested spans (with\n * data attributes like `data-slate-string`, `data-slate-zero-width`) between\n * the `` that carries Makeswift's typography class and the text content:\n *\n * \n * \n * \n * My text\n * \n * \n * \n *\n * If the host contains CSS that matches spans directly (ex: a global `span {\n * color: ... }` rule), the host CSS applies to the innermost spans and beats\n * the Makeswift text styles in terms of specificity. Therefore, setting text\n * styles won't work in the builder: the top-level host styles will win. On the\n * live page, the Makeswift styles win since the intermediate DOM elements are\n * not present.\n *\n * These style updates address this by reverting base styles on these spans,\n * restoring inheritance from Makeswift defined styles, thus matching the live\n * page where the text is a direct child of the classed leaf span.\n */\nexport function useSlateReset(): string {\n return useStyle({\n // @ts-expect-error: csstype's `all` doesn't accept `!important` annotations\n '& [data-slate-string], & [data-slate-zero-width]': {\n all: 'revert !important',\n },\n })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AAmClB,SAAS,gBAAwB;AACtC,aAAO,2BAAS;AAAA;AAAA,IAEd,oDAAoD;AAAA,MAClD,KAAK;AAAA,IACP;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-editable-element-stylesheet-factory.js ADDED Viewed

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_editable_element_stylesheet_factory_exports = {};
+__export(use_editable_element_stylesheet_factory_exports, {
+  useEditableElementStylesheetFactory: () => useEditableElementStylesheetFactory
+});
+module.exports = __toCommonJS(use_editable_element_stylesheet_factory_exports);
+var import_react = require("react");
+var import_css_runtime = require("../server/css/css-runtime");
+var import_client_css = require("../server/css/client-css");
+var import_use_breakpoints = require("./use-breakpoints");
+const useEditableElementStylesheetFactory = ({
+  elementKey: baseElementKey
+}) => {
+  const { updateStyle } = (0, import_client_css.useClientCSS)();
+  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
+  const stylesheetEngine = (0, import_react.useMemo)(
+    () => new import_css_runtime.StylesheetEngine(
+      breakpoints,
+      baseElementKey,
+      void 0,
+      (_className, css, elementKey, propName) => {
+        if (elementKey && propName)
+          updateStyle(elementKey, propName, css);
+      }
+    ),
+    [breakpoints, baseElementKey, updateStyle]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      get: (propName) => stylesheetEngine.child(propName),
+      useDefinedStyles: () => {
+      }
+    }),
+    [stylesheetEngine]
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useEditableElementStylesheetFactory
+});
+//# sourceMappingURL=use-editable-element-stylesheet-factory.js.map

package/dist/cjs/runtimes/react/hooks/use-editable-element-stylesheet-factory.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-editable-element-stylesheet-factory.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { StylesheetEngine } from '../server/css/css-runtime'\nimport { useClientCSS } from '../server/css/client-css'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\n\nimport { useBreakpoints } from './use-breakpoints'\n\nexport const useEditableElementStylesheetFactory = ({\n elementKey: baseElementKey,\n}: {\n elementKey: string\n}): StylesheetFactory => {\n const { updateStyle } = useClientCSS()\n const breakpoints = useBreakpoints()\n\n const stylesheetEngine = useMemo(\n () =>\n new StylesheetEngine(\n breakpoints,\n baseElementKey,\n undefined,\n (_className, css, elementKey, propName) => {\n if (elementKey && propName) updateStyle(elementKey, propName, css)\n },\n ),\n [breakpoints, baseElementKey, updateStyle],\n )\n\n return useMemo(\n () => ({\n get: (propName: string) => stylesheetEngine.child(propName),\n useDefinedStyles: () => {\n // No-op, the styles are updated as they are defined\n },\n }),\n [stylesheetEngine],\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AAExB,yBAAiC;AACjC,wBAA6B;AAI7B,6BAA+B;AAExB,MAAM,sCAAsC,CAAC;AAAA,EAClD,YAAY;AACd,MAEyB;AACvB,QAAM,EAAE,YAAY,QAAI,gCAAa;AACrC,QAAM,kBAAc,uCAAe;AAEnC,QAAM,uBAAmB;AAAA,IACvB,MACE,IAAI;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,YAAY,KAAK,YAAY,aAAa;AACzC,YAAI,cAAc;AAAU,sBAAY,YAAY,UAAU,GAAG;AAAA,MACnE;AAAA,IACF;AAAA,IACF,CAAC,aAAa,gBAAgB,WAAW;AAAA,EAC3C;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL,KAAK,CAAC,aAAqB,iBAAiB,MAAM,QAAQ;AAAA,MAC1D,kBAAkB,MAAM;AAAA,MAExB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACF;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-element-data.js ADDED Viewed

@@ -0,0 +1,35 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_element_data_exports = {};
+__export(use_element_data_exports, {
+  useElementData: () => useElementData
+});
+module.exports = __toCommonJS(use_element_data_exports);
+var import_read_only_state = require("../../../state/read-only-state");
+var import_use_element = require("./use-element");
+const useElementData = ({ elementKey }) => {
+  const element = (0, import_use_element.useElement)({ elementKey });
+  return element && !(0, import_read_only_state.isElementReference)(element) ? element : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useElementData
+});
+//# sourceMappingURL=use-element-data.js.map

package/dist/cjs/runtimes/react/hooks/use-element-data.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-element-data.tsx"],"sourcesContent":["'use client'\n\nimport { type ElementData, isElementReference } from '../../../state/read-only-state'\n\nimport { useElement } from './use-element'\n\nexport const useElementData = ({ elementKey }: { elementKey: string }): ElementData | null => {\n const element = useElement({ elementKey })\n return element && !isElementReference(element) ? element : null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAqD;AAErD,yBAA2B;AAEpB,MAAM,iBAAiB,CAAC,EAAE,WAAW,MAAkD;AAC5F,QAAM,cAAU,+BAAW,EAAE,WAAW,CAAC;AACzC,SAAO,WAAW,KAAC,2CAAmB,OAAO,IAAI,UAAU;AAC7D;","names":[]}