@mittwald/flow-remote-react-renderer 0.2.0-alpha.169 → 0.2.0-alpha.170
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.
|
@@ -45,7 +45,10 @@ const RemoteRendererBrowser = (props) => {
|
|
|
45
45
|
}, [src]);
|
|
46
46
|
useLayoutEffect(() => {
|
|
47
47
|
if (hostPathname && connection.current) {
|
|
48
|
-
connection.current
|
|
48
|
+
const { thread, version } = connection.current;
|
|
49
|
+
if (version >= 2) {
|
|
50
|
+
thread.imports.setPathname(hostPathname);
|
|
51
|
+
}
|
|
49
52
|
}
|
|
50
53
|
}, [hostPathname]);
|
|
51
54
|
const connect = connectRemoteIframeRef({
|
|
@@ -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 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 {\n type CSSProperties,\n type FC,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} 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 useLayoutEffect(() => {\n if (hostPathname && connection.current) {\n connection.current.imports.setPathname(hostPathname);\n }\n }, [hostPathname]);\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":";;;;;;;;AAmCA,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;AAER,kBAAgB,MAAM;AAChB,QAAA,gBAAgB,WAAW,SAAS;
|
|
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 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 {\n type CSSProperties,\n type FC,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} 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 useLayoutEffect(() => {\n if (hostPathname && connection.current) {\n const { thread, version } = connection.current;\n if (version >= 2) {\n thread.imports.setPathname(hostPathname);\n }\n }\n }, [hostPathname]);\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":";;;;;;;;AAmCA,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;AAER,kBAAgB,MAAM;AAChB,QAAA,gBAAgB,WAAW,SAAS;AACtC,YAAM,EAAE,QAAQ,QAAQ,IAAI,WAAW;AACvC,UAAI,WAAW,GAAG;AACT,eAAA,QAAQ,YAAY,YAAY;AAAA,MAAA;AAAA,IACzC;AAAA,EACF,GACC,CAAC,YAAY,CAAC;AAEjB,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemoteRendererBrowser.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererBrowser.tsx"],"names":[],"mappings":"AAIA,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,EAEL,KAAK,EAAE,EAKR,MAAM,OAAO,CAAC;AAEf,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,
|
|
1
|
+
{"version":3,"file":"RemoteRendererBrowser.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererBrowser.tsx"],"names":[],"mappings":"AAIA,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,EAEL,KAAK,EAAE,EAKR,MAAM,OAAO,CAAC;AAEf,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,CA+FhE,CAAC;AAEF,eAAe,qBAAqB,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.
|
|
3
|
+
"version": "0.2.0-alpha.170",
|
|
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.
|
|
32
|
-
"@mittwald/flow-remote-core": "0.2.0-alpha.
|
|
33
|
-
"@mittwald/flow-remote-elements": "0.2.0-alpha.
|
|
31
|
+
"@mittwald/ext-bridge": "0.2.0-alpha.170",
|
|
32
|
+
"@mittwald/flow-remote-core": "0.2.0-alpha.170",
|
|
33
|
+
"@mittwald/flow-remote-elements": "0.2.0-alpha.170",
|
|
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.
|
|
42
|
+
"@mittwald/flow-react-components": "0.2.0-alpha.170",
|
|
43
43
|
"@mittwald/typescript-config": "",
|
|
44
44
|
"@types/node": "^22.13.10",
|
|
45
45
|
"nx": "^20.5.0",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"optional": true
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "c37bd78517ed5576148347076540b43f8d84e087"
|
|
71
71
|
}
|