@mittwald/flow-remote-react-renderer 0.2.0-alpha.165 → 0.2.0-alpha.167
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.
|
@@ -7,7 +7,7 @@ import { useMergedComponents } from "./hooks/useMergedComponents.mjs";
|
|
|
7
7
|
import { RemoteError, connectRemoteIframeRef } from "@mittwald/flow-remote-core";
|
|
8
8
|
import { usePromise } from "@mittwald/react-use-promise";
|
|
9
9
|
import { RemoteReceiver, RemoteRootRenderer } from "@mittwald/remote-dom-react/host";
|
|
10
|
-
import { useState, useMemo } from "react";
|
|
10
|
+
import { useState, useRef, useMemo, useLayoutEffect } from "react";
|
|
11
11
|
const hiddenIframeStyle = {
|
|
12
12
|
visibility: "hidden",
|
|
13
13
|
height: 0,
|
|
@@ -21,13 +21,16 @@ const RemoteRendererBrowser = (props) => {
|
|
|
21
21
|
integrations = [],
|
|
22
22
|
timeoutMs = 1e4,
|
|
23
23
|
src,
|
|
24
|
-
extBridgeImplementation
|
|
24
|
+
extBridgeImplementation,
|
|
25
|
+
onNavigationStateChanged,
|
|
26
|
+
hostPathname
|
|
25
27
|
} = props;
|
|
26
28
|
const renderAwaiter = useAwaiter([src]);
|
|
27
29
|
const connectionAwaiter = useAwaiter([src]);
|
|
28
30
|
const loadingAwaiter = useAwaiter([src]);
|
|
29
31
|
const [connectedSrc, setConnectedSrc] = useState(null);
|
|
30
32
|
const [remoteError, setRemoteError] = useState();
|
|
33
|
+
const connection = useRef(void 0);
|
|
31
34
|
if (remoteError) {
|
|
32
35
|
throw new RemoteError(`Remote rendering failed: ${remoteError}`);
|
|
33
36
|
}
|
|
@@ -40,11 +43,17 @@ const RemoteRendererBrowser = (props) => {
|
|
|
40
43
|
);
|
|
41
44
|
return remoteReceiver;
|
|
42
45
|
}, [src]);
|
|
46
|
+
useLayoutEffect(() => {
|
|
47
|
+
if (hostPathname && connection.current) {
|
|
48
|
+
connection.current.imports.setPathname(hostPathname);
|
|
49
|
+
}
|
|
50
|
+
}, [hostPathname]);
|
|
43
51
|
const connect = connectRemoteIframeRef({
|
|
44
52
|
connection: receiver.connection,
|
|
45
53
|
extBridgeImplementation,
|
|
46
54
|
onReady: connectionAwaiter.resolve,
|
|
47
|
-
onError: setRemoteError
|
|
55
|
+
onError: setRemoteError,
|
|
56
|
+
onNavigationStateChanged
|
|
48
57
|
});
|
|
49
58
|
const timeoutPromise = (message) => new Promise((_, rej) => {
|
|
50
59
|
setTimeout(() => {
|
|
@@ -76,14 +85,13 @@ const RemoteRendererBrowser = (props) => {
|
|
|
76
85
|
{
|
|
77
86
|
src,
|
|
78
87
|
ref: (ref) => {
|
|
79
|
-
connect(ref);
|
|
88
|
+
connection.current = connect(ref);
|
|
80
89
|
setConnectedSrc(src);
|
|
81
90
|
},
|
|
82
91
|
onLoad: loadingAwaiter.resolve,
|
|
83
92
|
onError: loadingAwaiter.reject,
|
|
84
93
|
style: hiddenIframeStyle
|
|
85
|
-
}
|
|
86
|
-
src
|
|
94
|
+
}
|
|
87
95
|
)
|
|
88
96
|
] });
|
|
89
97
|
};
|
|
@@ -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} 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 {
|
|
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;AAC3B,iBAAA,QAAQ,QAAQ,YAAY,YAAY;AAAA,IAAA;AAAA,EACrD,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,10 +1,13 @@
|
|
|
1
1
|
import { RemoteComponentsMap } from './lib/types';
|
|
2
2
|
import { ExtBridgeConnectionApi } from '@mittwald/ext-bridge';
|
|
3
|
+
import { NavigationState } from '@mittwald/flow-remote-core';
|
|
3
4
|
import { FC } from 'react';
|
|
4
5
|
export interface RemoteRendererBrowserProps {
|
|
5
6
|
integrations?: RemoteComponentsMap<never>[];
|
|
6
7
|
src: string;
|
|
7
8
|
timeoutMs?: number;
|
|
9
|
+
onNavigationStateChanged?: (state: NavigationState) => void;
|
|
10
|
+
hostPathname?: string;
|
|
8
11
|
extBridgeImplementation?: ExtBridgeConnectionApi;
|
|
9
12
|
}
|
|
10
13
|
export declare const RemoteRendererBrowser: FC<RemoteRendererBrowserProps>;
|
|
@@ -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;
|
|
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,CA4FhE,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.167",
|
|
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.167",
|
|
32
|
+
"@mittwald/flow-remote-core": "0.2.0-alpha.167",
|
|
33
|
+
"@mittwald/flow-remote-elements": "0.2.0-alpha.167",
|
|
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.167",
|
|
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": "1927f615a0de12f79fd3b7062161c91f6efa4d7c"
|
|
71
71
|
}
|