@mittwald/flow-remote-react-renderer 0.2.0-alpha.205 → 0.2.0-alpha.207

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.
@@ -2,6 +2,7 @@
2
2
  /* */
3
3
  "use client";
4
4
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
5
+ import { RemoteRendererContextProvider } from "./context.mjs";
5
6
  import { useAwaiter } from "./hooks/useAwaiter.mjs";
6
7
  import { useMergedComponents } from "./hooks/useMergedComponents.mjs";
7
8
  import { useUpdateHostPathnameOnRemote } from "./hooks/useUpdateHostPathnameOnRemote.mjs";
@@ -75,8 +76,9 @@ const RemoteRendererBrowser = (props) => {
75
76
  usePromise(overallLoading, awaitLoadingPromise ? [] : null, {
76
77
  loaderId: src
77
78
  });
79
+ const context = connection.current ? { remoteVersion: connection.current.version } : null;
78
80
  return /* @__PURE__ */ jsxs(Fragment, { children: [
79
- /* @__PURE__ */ jsx(RemoteRootRenderer, { components: remoteComponents, receiver }),
81
+ /* @__PURE__ */ jsx(RemoteRendererContextProvider, { value: context, children: /* @__PURE__ */ jsx(RemoteRootRenderer, { components: remoteComponents, receiver }) }),
80
82
  /* @__PURE__ */ jsx(
81
83
  "iframe",
82
84
  {
@@ -1 +1 @@
1
- {"version":3,"file":"RemoteRendererBrowser.mjs","sources":["../../src/RemoteRendererBrowser.tsx"],"sourcesContent":["\"use client\";\n\nimport { useAwaiter } from \"@/hooks/useAwaiter\";\nimport { useMergedComponents } from \"@/hooks/useMergedComponents\";\nimport { useUpdateHostPathnameOnRemote } from \"@/hooks/useUpdateHostPathnameOnRemote\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { ExtBridgeConnectionApi } from \"@mittwald/ext-bridge\";\nimport {\n connectRemoteIframeRef,\n RemoteError,\n type HostToRemoteConnection,\n type NavigationState,\n} from \"@mittwald/flow-remote-core\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport {\n RemoteReceiver,\n RemoteRootRenderer,\n} from \"@mittwald/remote-dom-react/host\";\nimport { type CSSProperties, type FC, useMemo, useRef, useState } from \"react\";\n\nexport interface RemoteRendererBrowserProps {\n integrations?: RemoteComponentsMap<never>[];\n src: string;\n timeoutMs?: number;\n onNavigationStateChanged?: (state: NavigationState) => void;\n hostPathname?: string;\n extBridgeImplementation?: ExtBridgeConnectionApi;\n}\n\nconst hiddenIframeStyle: CSSProperties = {\n visibility: \"hidden\",\n height: 0,\n width: 0,\n border: \"none\",\n position: \"absolute\",\n marginLeft: \"-9999px\",\n};\n\nexport const RemoteRendererBrowser: FC<RemoteRendererBrowserProps> = (\n props,\n) => {\n const {\n integrations = [],\n timeoutMs = 10_000,\n src,\n extBridgeImplementation,\n onNavigationStateChanged,\n hostPathname,\n } = props;\n\n const renderAwaiter = useAwaiter([src]);\n const connectionAwaiter = useAwaiter([src]);\n const loadingAwaiter = useAwaiter([src]);\n\n const [connectedSrc, setConnectedSrc] = useState<string | null>(null);\n const [remoteError, setRemoteError] = useState<string | undefined>();\n const connection = useRef<HostToRemoteConnection | undefined>(undefined);\n\n if (remoteError) {\n throw new RemoteError(`Remote rendering failed: ${remoteError}`);\n }\n\n const remoteComponents = useMergedComponents(integrations);\n\n const receiver = useMemo(() => {\n const remoteReceiver = new RemoteReceiver();\n remoteReceiver.subscribe(\n { id: remoteReceiver.root.id },\n renderAwaiter.resolve,\n );\n return remoteReceiver;\n }, [src]);\n\n useUpdateHostPathnameOnRemote(hostPathname, connection.current);\n\n const connect = connectRemoteIframeRef({\n connection: receiver.connection,\n extBridgeImplementation: extBridgeImplementation,\n onReady: connectionAwaiter.resolve,\n onError: setRemoteError,\n onNavigationStateChanged,\n });\n\n const timeoutPromise = (message: string) =>\n new Promise((_, rej) => {\n setTimeout(() => {\n rej(new RemoteError(`${message}: Timeout reached`));\n }, timeoutMs);\n });\n\n const overallLoading = () =>\n Promise.all([\n Promise.race([\n loadingAwaiter.promise,\n timeoutPromise(\"Remote URL could not be loaded\"),\n ]),\n Promise.race([\n connectionAwaiter.promise,\n timeoutPromise(\"Could not establish remote connection\"),\n ]),\n Promise.race([\n renderAwaiter.promise,\n timeoutPromise(\"Remote rendering failed\"),\n ]),\n ]);\n\n const awaitLoadingPromise = connectedSrc === src;\n usePromise(overallLoading, awaitLoadingPromise ? [] : null, {\n loaderId: src,\n });\n\n return (\n <>\n <RemoteRootRenderer components={remoteComponents} receiver={receiver} />\n <iframe\n src={src}\n ref={(ref) => {\n connection.current = connect(ref);\n setConnectedSrc(src);\n }}\n onLoad={loadingAwaiter.resolve}\n onError={loadingAwaiter.reject}\n style={hiddenIframeStyle}\n />\n </>\n );\n};\n\nexport default RemoteRendererBrowser;\n"],"names":[],"mappings":";;;;;;;;;AA6BA,MAAM,oBAAmC;AAAA,EACvC,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AACd;AAEa,MAAA,wBAAwD,CACnE,UACG;AACG,QAAA;AAAA,IACJ,eAAe,CAAC;AAAA,IAChB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,gBAAgB,WAAW,CAAC,GAAG,CAAC;AACtC,QAAM,oBAAoB,WAAW,CAAC,GAAG,CAAC;AAC1C,QAAM,iBAAiB,WAAW,CAAC,GAAG,CAAC;AAEvC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAC7D,QAAA,aAAa,OAA2C,MAAS;AAEvE,MAAI,aAAa;AACf,UAAM,IAAI,YAAY,4BAA4B,WAAW,EAAE;AAAA,EAAA;AAG3D,QAAA,mBAAmB,oBAAoB,YAAY;AAEnD,QAAA,WAAW,QAAQ,MAAM;AACvB,UAAA,iBAAiB,IAAI,eAAe;AAC3B,mBAAA;AAAA,MACb,EAAE,IAAI,eAAe,KAAK,GAAG;AAAA,MAC7B,cAAc;AAAA,IAChB;AACO,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,CAAC;AAEsB,gCAAA,cAAc,WAAW,OAAO;AAE9D,QAAM,UAAU,uBAAuB;AAAA,IACrC,YAAY,SAAS;AAAA,IACrB;AAAA,IACA,SAAS,kBAAkB;AAAA,IAC3B,SAAS;AAAA,IACT;AAAA,EAAA,CACD;AAED,QAAM,iBAAiB,CAAC,YACtB,IAAI,QAAQ,CAAC,GAAG,QAAQ;AACtB,eAAW,MAAM;AACf,UAAI,IAAI,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAAA,OACjD,SAAS;AAAA,EAAA,CACb;AAEG,QAAA,iBAAiB,MACrB,QAAQ,IAAI;AAAA,IACV,QAAQ,KAAK;AAAA,MACX,eAAe;AAAA,MACf,eAAe,gCAAgC;AAAA,IAAA,CAChD;AAAA,IACD,QAAQ,KAAK;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe,uCAAuC;AAAA,IAAA,CACvD;AAAA,IACD,QAAQ,KAAK;AAAA,MACX,cAAc;AAAA,MACd,eAAe,yBAAyB;AAAA,IACzC,CAAA;AAAA,EAAA,CACF;AAEH,QAAM,sBAAsB,iBAAiB;AAC7C,aAAW,gBAAgB,sBAAsB,CAAA,IAAK,MAAM;AAAA,IAC1D,UAAU;AAAA,EAAA,CACX;AAED,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,oBAAA,EAAmB,YAAY,kBAAkB,SAAoB,CAAA;AAAA,IACtE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,KAAK,CAAC,QAAQ;AACD,qBAAA,UAAU,QAAQ,GAAG;AAChC,0BAAgB,GAAG;AAAA,QACrB;AAAA,QACA,QAAQ,eAAe;AAAA,QACvB,SAAS,eAAe;AAAA,QACxB,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACT,GACF;AAEJ;"}
1
+ {"version":3,"file":"RemoteRendererBrowser.mjs","sources":["../../src/RemoteRendererBrowser.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n RemoteRendererContextProvider,\n type RemoteRendererContext,\n} from \"@/context\";\nimport { useAwaiter } from \"@/hooks/useAwaiter\";\nimport { useMergedComponents } from \"@/hooks/useMergedComponents\";\nimport { useUpdateHostPathnameOnRemote } from \"@/hooks/useUpdateHostPathnameOnRemote\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { ExtBridgeConnectionApi } from \"@mittwald/ext-bridge\";\nimport {\n connectRemoteIframeRef,\n RemoteError,\n type HostToRemoteConnection,\n type NavigationState,\n} from \"@mittwald/flow-remote-core\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport {\n RemoteReceiver,\n RemoteRootRenderer,\n} from \"@mittwald/remote-dom-react/host\";\nimport { type CSSProperties, type FC, useMemo, useRef, useState } from \"react\";\n\nexport interface RemoteRendererBrowserProps {\n integrations?: RemoteComponentsMap<never>[];\n src: string;\n timeoutMs?: number;\n onNavigationStateChanged?: (state: NavigationState) => void;\n hostPathname?: string;\n extBridgeImplementation?: ExtBridgeConnectionApi;\n}\n\nconst hiddenIframeStyle: CSSProperties = {\n visibility: \"hidden\",\n height: 0,\n width: 0,\n border: \"none\",\n position: \"absolute\",\n marginLeft: \"-9999px\",\n};\n\nexport const RemoteRendererBrowser: FC<RemoteRendererBrowserProps> = (\n props,\n) => {\n const {\n integrations = [],\n timeoutMs = 10_000,\n src,\n extBridgeImplementation,\n onNavigationStateChanged,\n hostPathname,\n } = props;\n\n const renderAwaiter = useAwaiter([src]);\n const connectionAwaiter = useAwaiter([src]);\n const loadingAwaiter = useAwaiter([src]);\n\n const [connectedSrc, setConnectedSrc] = useState<string | null>(null);\n const [remoteError, setRemoteError] = useState<string | undefined>();\n const connection = useRef<HostToRemoteConnection | undefined>(undefined);\n\n if (remoteError) {\n throw new RemoteError(`Remote rendering failed: ${remoteError}`);\n }\n\n const remoteComponents = useMergedComponents(integrations);\n\n const receiver = useMemo(() => {\n const remoteReceiver = new RemoteReceiver();\n remoteReceiver.subscribe(\n { id: remoteReceiver.root.id },\n renderAwaiter.resolve,\n );\n return remoteReceiver;\n }, [src]);\n\n useUpdateHostPathnameOnRemote(hostPathname, connection.current);\n\n const connect = connectRemoteIframeRef({\n connection: receiver.connection,\n extBridgeImplementation: extBridgeImplementation,\n onReady: connectionAwaiter.resolve,\n onError: setRemoteError,\n onNavigationStateChanged,\n });\n\n const timeoutPromise = (message: string) =>\n new Promise((_, rej) => {\n setTimeout(() => {\n rej(new RemoteError(`${message}: Timeout reached`));\n }, timeoutMs);\n });\n\n const overallLoading = () =>\n Promise.all([\n Promise.race([\n loadingAwaiter.promise,\n timeoutPromise(\"Remote URL could not be loaded\"),\n ]),\n Promise.race([\n connectionAwaiter.promise,\n timeoutPromise(\"Could not establish remote connection\"),\n ]),\n Promise.race([\n renderAwaiter.promise,\n timeoutPromise(\"Remote rendering failed\"),\n ]),\n ]);\n\n const awaitLoadingPromise = connectedSrc === src;\n usePromise(overallLoading, awaitLoadingPromise ? [] : null, {\n loaderId: src,\n });\n\n const context: RemoteRendererContext | null = connection.current\n ? { remoteVersion: connection.current.version }\n : null;\n\n return (\n <>\n <RemoteRendererContextProvider value={context}>\n <RemoteRootRenderer components={remoteComponents} receiver={receiver} />\n </RemoteRendererContextProvider>\n <iframe\n src={src}\n ref={(ref) => {\n connection.current = connect(ref);\n setConnectedSrc(src);\n }}\n onLoad={loadingAwaiter.resolve}\n onError={loadingAwaiter.reject}\n style={hiddenIframeStyle}\n />\n </>\n );\n};\n\nexport default RemoteRendererBrowser;\n"],"names":[],"mappings":";;;;;;;;;;AAiCA,MAAM,oBAAmC;AAAA,EACvC,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AACd;AAEa,MAAA,wBAAwD,CACnE,UACG;AACG,QAAA;AAAA,IACJ,eAAe,CAAC;AAAA,IAChB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,gBAAgB,WAAW,CAAC,GAAG,CAAC;AACtC,QAAM,oBAAoB,WAAW,CAAC,GAAG,CAAC;AAC1C,QAAM,iBAAiB,WAAW,CAAC,GAAG,CAAC;AAEvC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B;AAC7D,QAAA,aAAa,OAA2C,MAAS;AAEvE,MAAI,aAAa;AACf,UAAM,IAAI,YAAY,4BAA4B,WAAW,EAAE;AAAA,EAAA;AAG3D,QAAA,mBAAmB,oBAAoB,YAAY;AAEnD,QAAA,WAAW,QAAQ,MAAM;AACvB,UAAA,iBAAiB,IAAI,eAAe;AAC3B,mBAAA;AAAA,MACb,EAAE,IAAI,eAAe,KAAK,GAAG;AAAA,MAC7B,cAAc;AAAA,IAChB;AACO,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,CAAC;AAEsB,gCAAA,cAAc,WAAW,OAAO;AAE9D,QAAM,UAAU,uBAAuB;AAAA,IACrC,YAAY,SAAS;AAAA,IACrB;AAAA,IACA,SAAS,kBAAkB;AAAA,IAC3B,SAAS;AAAA,IACT;AAAA,EAAA,CACD;AAED,QAAM,iBAAiB,CAAC,YACtB,IAAI,QAAQ,CAAC,GAAG,QAAQ;AACtB,eAAW,MAAM;AACf,UAAI,IAAI,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAAA,OACjD,SAAS;AAAA,EAAA,CACb;AAEG,QAAA,iBAAiB,MACrB,QAAQ,IAAI;AAAA,IACV,QAAQ,KAAK;AAAA,MACX,eAAe;AAAA,MACf,eAAe,gCAAgC;AAAA,IAAA,CAChD;AAAA,IACD,QAAQ,KAAK;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe,uCAAuC;AAAA,IAAA,CACvD;AAAA,IACD,QAAQ,KAAK;AAAA,MACX,cAAc;AAAA,MACd,eAAe,yBAAyB;AAAA,IACzC,CAAA;AAAA,EAAA,CACF;AAEH,QAAM,sBAAsB,iBAAiB;AAC7C,aAAW,gBAAgB,sBAAsB,CAAA,IAAK,MAAM;AAAA,IAC1D,UAAU;AAAA,EAAA,CACX;AAEK,QAAA,UAAwC,WAAW,UACrD,EAAE,eAAe,WAAW,QAAQ,YACpC;AAEJ,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,+BAAA,EAA8B,OAAO,SACpC,UAAA,oBAAC,sBAAmB,YAAY,kBAAkB,UAAoB,EACxE,CAAA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,KAAK,CAAC,QAAQ;AACD,qBAAA,UAAU,QAAQ,GAAG;AAChC,0BAAgB,GAAG;AAAA,QACrB;AAAA,QACA,QAAQ,eAAe;AAAA,QACvB,SAAS,eAAe;AAAA,QACxB,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACT,GACF;AAEJ;"}
@@ -0,0 +1,11 @@
1
+ "use client"
2
+ /* */
3
+ import { createContext, useContext } from "react";
4
+ const remoteRendererContext = createContext(null);
5
+ const RemoteRendererContextProvider = remoteRendererContext.Provider;
6
+ const useRemoteRendererContext = () => useContext(remoteRendererContext);
7
+ export {
8
+ RemoteRendererContextProvider,
9
+ useRemoteRendererContext
10
+ };
11
+ //# sourceMappingURL=context.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.mjs","sources":["../../src/context.ts"],"sourcesContent":["import type { Version } from \"@mittwald/flow-remote-core\";\nimport { createContext, useContext } from \"react\";\n\nexport interface RemoteRendererContext {\n remoteVersion: Version;\n}\n\nconst remoteRendererContext = createContext<RemoteRendererContext | null>(null);\n\nexport const RemoteRendererContextProvider = remoteRendererContext.Provider;\n\nexport const useRemoteRendererContext = () => useContext(remoteRendererContext);\n"],"names":[],"mappings":";AAOA,MAAM,wBAAwB,cAA4C,IAAI;AAEvE,MAAM,gCAAgC,sBAAsB;AAEtD,MAAA,2BAA2B,MAAM,WAAW,qBAAqB;"}
@@ -7,6 +7,7 @@ import { mapEventHandler } from "@mittwald/flow-remote-core";
7
7
  import { FlowRemoteElement } from "@mittwald/flow-remote-elements";
8
8
  import "react";
9
9
  import { mapValues } from "remeda";
10
+ import { useRemoteRendererContext } from "../context.mjs";
10
11
  const mapProperty = (val, key) => {
11
12
  if (isEventProp(key, val)) {
12
13
  return mapEventHandler(val, key);
@@ -27,13 +28,19 @@ const createFlowRemoteComponentRenderer = (name, Component) => {
27
28
  props,
28
29
  (v, k) => mapProperty(v, k)
29
30
  );
31
+ const rendererContext = useRemoteRendererContext();
30
32
  const {
31
33
  [FlowRemoteElement.initializationPropertyName]: initialized,
32
34
  ...restProps
33
35
  } = hostComponentProps;
34
- if (!initialized) {
36
+ if (rendererContext === null) {
35
37
  return null;
36
38
  }
39
+ if (rendererContext.remoteVersion >= 3) {
40
+ if (!initialized) {
41
+ return null;
42
+ }
43
+ }
37
44
  return /* @__PURE__ */ jsx(Component, { ...restProps });
38
45
  }
39
46
  HostComponent.displayName = `FlowRemoteRenderer(${name})`;
@@ -1 +1 @@
1
- {"version":3,"file":"createFlowRemoteComponentRenderer.mjs","sources":["../../../src/lib/createFlowRemoteComponentRenderer.tsx"],"sourcesContent":["import {\n isEventProp,\n isReactSuspendedStyle,\n isStyleProp,\n} from \"@/lib/propClassifiers\";\nimport type { RemoteComponentRendererProps } from \"@mittwald/remote-dom-react/host\";\nimport { createRemoteComponentRenderer } from \"@mittwald/remote-dom-react/host\";\nimport { mapEventHandler } from \"@mittwald/flow-remote-core\";\nimport { FlowRemoteElement } from \"@mittwald/flow-remote-elements\";\nimport { type ComponentType } from \"react\";\nimport { mapValues } from \"remeda\";\n\nconst mapProperty = (val: unknown, key: string) => {\n if (isEventProp(key, val)) {\n return mapEventHandler(val, key);\n }\n if (isStyleProp(key)) {\n if (isReactSuspendedStyle(val)) {\n return {\n display: \"none\",\n };\n }\n return {};\n }\n return val;\n};\n\nexport const createFlowRemoteComponentRenderer = <P extends object>(\n name: string,\n Component: ComponentType<P>,\n): ComponentType<RemoteComponentRendererProps> => {\n function HostComponent(props: P) {\n const hostComponentProps = mapValues(props, (v, k) =>\n mapProperty(v, k),\n ) as P & { [FlowRemoteElement.initializationPropertyName]?: boolean };\n\n const {\n [FlowRemoteElement.initializationPropertyName]: initialized,\n ...restProps\n } = hostComponentProps;\n\n if (!initialized) {\n return null;\n }\n\n return <Component {...(restProps as P)} />;\n }\n HostComponent.displayName = `FlowRemoteRenderer(${name})`;\n return createRemoteComponentRenderer(HostComponent, {\n name: `RemoteRenderer(${name})`,\n });\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,cAAc,CAAC,KAAc,QAAgB;AAC7C,MAAA,YAAY,KAAK,GAAG,GAAG;AAClB,WAAA,gBAAgB,KAAK,GAAG;AAAA,EAAA;AAE7B,MAAA,YAAY,GAAG,GAAG;AAChB,QAAA,sBAAsB,GAAG,GAAG;AACvB,aAAA;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IAAA;AAEF,WAAO,CAAC;AAAA,EAAA;AAEH,SAAA;AACT;AAEa,MAAA,oCAAoC,CAC/C,MACA,cACgD;AAChD,WAAS,cAAc,OAAU;AAC/B,UAAM,qBAAqB;AAAA,MAAU;AAAA,MAAO,CAAC,GAAG,MAC9C,YAAY,GAAG,CAAC;AAAA,IAClB;AAEM,UAAA;AAAA,MACJ,CAAC,kBAAkB,0BAA0B,GAAG;AAAA,MAChD,GAAG;AAAA,IAAA,IACD;AAEJ,QAAI,CAAC,aAAa;AACT,aAAA;AAAA,IAAA;AAGF,WAAA,oBAAC,WAAW,EAAA,GAAI,UAAiB,CAAA;AAAA,EAAA;AAE5B,gBAAA,cAAc,sBAAsB,IAAI;AACtD,SAAO,8BAA8B,eAAe;AAAA,IAClD,MAAM,kBAAkB,IAAI;AAAA,EAAA,CAC7B;AACH;"}
1
+ {"version":3,"file":"createFlowRemoteComponentRenderer.mjs","sources":["../../../src/lib/createFlowRemoteComponentRenderer.tsx"],"sourcesContent":["import {\n isEventProp,\n isReactSuspendedStyle,\n isStyleProp,\n} from \"@/lib/propClassifiers\";\nimport type { RemoteComponentRendererProps } from \"@mittwald/remote-dom-react/host\";\nimport { createRemoteComponentRenderer } from \"@mittwald/remote-dom-react/host\";\nimport { mapEventHandler } from \"@mittwald/flow-remote-core\";\nimport { FlowRemoteElement } from \"@mittwald/flow-remote-elements\";\nimport { type ComponentType } from \"react\";\nimport { mapValues } from \"remeda\";\nimport { useRemoteRendererContext } from \"@/context\";\n\nconst mapProperty = (val: unknown, key: string) => {\n if (isEventProp(key, val)) {\n return mapEventHandler(val, key);\n }\n if (isStyleProp(key)) {\n if (isReactSuspendedStyle(val)) {\n return {\n display: \"none\",\n };\n }\n return {};\n }\n return val;\n};\n\nexport const createFlowRemoteComponentRenderer = <P extends object>(\n name: string,\n Component: ComponentType<P>,\n): ComponentType<RemoteComponentRendererProps> => {\n function HostComponent(props: P) {\n const hostComponentProps = mapValues(props, (v, k) =>\n mapProperty(v, k),\n ) as P & { [FlowRemoteElement.initializationPropertyName]?: boolean };\n\n const rendererContext = useRemoteRendererContext();\n\n const {\n [FlowRemoteElement.initializationPropertyName]: initialized,\n ...restProps\n } = hostComponentProps;\n\n if (rendererContext === null) {\n return null;\n }\n\n if (rendererContext.remoteVersion >= 3) {\n // \"initialized\" handling introduced in version 3\n if (!initialized) {\n return null;\n }\n }\n\n return <Component {...(restProps as P)} />;\n }\n HostComponent.displayName = `FlowRemoteRenderer(${name})`;\n return createRemoteComponentRenderer(HostComponent, {\n name: `RemoteRenderer(${name})`,\n });\n};\n"],"names":[],"mappings":";;;;;;;;AAaA,MAAM,cAAc,CAAC,KAAc,QAAgB;AAC7C,MAAA,YAAY,KAAK,GAAG,GAAG;AAClB,WAAA,gBAAgB,KAAK,GAAG;AAAA,EAAA;AAE7B,MAAA,YAAY,GAAG,GAAG;AAChB,QAAA,sBAAsB,GAAG,GAAG;AACvB,aAAA;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IAAA;AAEF,WAAO,CAAC;AAAA,EAAA;AAEH,SAAA;AACT;AAEa,MAAA,oCAAoC,CAC/C,MACA,cACgD;AAChD,WAAS,cAAc,OAAU;AAC/B,UAAM,qBAAqB;AAAA,MAAU;AAAA,MAAO,CAAC,GAAG,MAC9C,YAAY,GAAG,CAAC;AAAA,IAClB;AAEA,UAAM,kBAAkB,yBAAyB;AAE3C,UAAA;AAAA,MACJ,CAAC,kBAAkB,0BAA0B,GAAG;AAAA,MAChD,GAAG;AAAA,IAAA,IACD;AAEJ,QAAI,oBAAoB,MAAM;AACrB,aAAA;AAAA,IAAA;AAGL,QAAA,gBAAgB,iBAAiB,GAAG;AAEtC,UAAI,CAAC,aAAa;AACT,eAAA;AAAA,MAAA;AAAA,IACT;AAGK,WAAA,oBAAC,WAAW,EAAA,GAAI,UAAiB,CAAA;AAAA,EAAA;AAE5B,gBAAA,cAAc,sBAAsB,IAAI;AACtD,SAAO,8BAA8B,eAAe;AAAA,IAClD,MAAM,kBAAkB,IAAI;AAAA,EAAA,CAC7B;AACH;"}
@@ -1 +1 @@
1
- {"version":3,"file":"RemoteRendererBrowser.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererBrowser.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAsB,KAAK,EAAE,EAA6B,MAAM,OAAO,CAAC;AAE/E,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,sBAAsB,CAAC;CAClD;AAWD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAwFhE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
1
+ {"version":3,"file":"RemoteRendererBrowser.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererBrowser.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAsB,KAAK,EAAE,EAA6B,MAAM,OAAO,CAAC;AAE/E,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,sBAAsB,CAAC;CAClD;AAWD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CA8FhE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { Version } from '@mittwald/flow-remote-core';
2
+ export interface RemoteRendererContext {
3
+ remoteVersion: Version;
4
+ }
5
+ export declare const RemoteRendererContextProvider: import('react').Provider<RemoteRendererContext | null>;
6
+ export declare const useRemoteRendererContext: () => RemoteRendererContext | null;
7
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAG1D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,OAAO,CAAC;CACxB;AAID,eAAO,MAAM,6BAA6B,wDAAiC,CAAC;AAE5E,eAAO,MAAM,wBAAwB,oCAA0C,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"createFlowRemoteComponentRenderer.d.ts","sourceRoot":"","sources":["../../../src/lib/createFlowRemoteComponentRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAIpF,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAkB3C,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,MAAM,EAChE,MAAM,MAAM,EACZ,WAAW,aAAa,CAAC,CAAC,CAAC,KAC1B,aAAa,CAAC,4BAA4B,CAqB5C,CAAC"}
1
+ {"version":3,"file":"createFlowRemoteComponentRenderer.d.ts","sourceRoot":"","sources":["../../../src/lib/createFlowRemoteComponentRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAIpF,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAmB3C,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,MAAM,EAChE,MAAM,MAAM,EACZ,WAAW,aAAa,CAAC,CAAC,CAAC,KAC1B,aAAa,CAAC,4BAA4B,CA8B5C,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-remote-react-renderer",
3
- "version": "0.2.0-alpha.205",
3
+ "version": "0.2.0-alpha.207",
4
4
  "type": "module",
5
5
  "description": "React rendering for Flow Remote Elements",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -28,9 +28,9 @@
28
28
  "test:compile": "tsc --noEmit"
29
29
  },
30
30
  "dependencies": {
31
- "@mittwald/ext-bridge": "0.2.0-alpha.205",
32
- "@mittwald/flow-remote-core": "0.2.0-alpha.205",
33
- "@mittwald/flow-remote-elements": "0.2.0-alpha.205",
31
+ "@mittwald/ext-bridge": "0.2.0-alpha.207",
32
+ "@mittwald/flow-remote-core": "0.2.0-alpha.207",
33
+ "@mittwald/flow-remote-elements": "0.2.0-alpha.207",
34
34
  "@mittwald/react-use-promise": "^3.0.4",
35
35
  "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
36
36
  "@types/react": "^19",
@@ -39,7 +39,7 @@
39
39
  "remeda": "^2.21.1"
40
40
  },
41
41
  "devDependencies": {
42
- "@mittwald/flow-react-components": "0.2.0-alpha.205",
42
+ "@mittwald/flow-react-components": "0.2.0-alpha.207",
43
43
  "@mittwald/typescript-config": "",
44
44
  "@types/node": "^22.13.10",
45
45
  "nx": "^20.8.1",
@@ -67,5 +67,5 @@
67
67
  "optional": true
68
68
  }
69
69
  },
70
- "gitHead": "27b5e30036a6b88713c2a726c58b797a6b70b33c"
70
+ "gitHead": "6a74d4e70acd8199a3f030fa932c2d2bc2e2f456"
71
71
  }