@mittwald/flow-remote-react-renderer 0.2.0-alpha.45 → 0.2.0-alpha.46
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.
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
"use client";
|
|
4
|
-
import {
|
|
5
|
-
import { RemoteReceiver, RemoteRootRenderer } from "@remote-dom/react/host";
|
|
6
|
-
import { useMemo } from "react";
|
|
4
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
7
5
|
import { components } from "./components.mjs";
|
|
8
|
-
import { reduce } from "remeda";
|
|
9
6
|
import { connectRemoteIframeRef } from "@mittwald/flow-remote-core";
|
|
7
|
+
import { RemoteReceiver, RemoteRootRenderer } from "@remote-dom/react/host";
|
|
8
|
+
import { useMemo, useRef, useEffect, useState } from "react";
|
|
9
|
+
import { reduce } from "remeda";
|
|
10
10
|
const RemoteRendererClient = (props) => {
|
|
11
|
-
const { integrations = [], src, iframeStyle } = props;
|
|
11
|
+
const { integrations = [], src, iframeStyle, data, fallback } = props;
|
|
12
12
|
const receiver = useMemo(() => new RemoteReceiver(), []);
|
|
13
13
|
const mergedComponents = useMemo(() => {
|
|
14
14
|
return new Map(
|
|
@@ -24,10 +24,23 @@ const RemoteRendererClient = (props) => {
|
|
|
24
24
|
)
|
|
25
25
|
);
|
|
26
26
|
}, [...integrations]);
|
|
27
|
+
const connect = connectRemoteIframeRef(receiver.connection);
|
|
28
|
+
const connection = useRef(null);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
var _a;
|
|
31
|
+
(_a = connection.current) == null ? void 0 : _a.receiveData(data);
|
|
32
|
+
}, [data, connection]);
|
|
33
|
+
const [iframeHasLoaded, setIframeHasLoaded] = useState(false);
|
|
27
34
|
const remoteFrame = /* @__PURE__ */ jsx(
|
|
28
35
|
"iframe",
|
|
29
36
|
{
|
|
30
|
-
|
|
37
|
+
onLoad: () => setIframeHasLoaded(true),
|
|
38
|
+
ref: (iframe) => {
|
|
39
|
+
if (iframe) {
|
|
40
|
+
connection.current = connect(iframe);
|
|
41
|
+
connection.current.receiveData(data);
|
|
42
|
+
}
|
|
43
|
+
},
|
|
31
44
|
src,
|
|
32
45
|
style: iframeStyle ?? {
|
|
33
46
|
visibility: "hidden",
|
|
@@ -40,6 +53,7 @@ const RemoteRendererClient = (props) => {
|
|
|
40
53
|
}
|
|
41
54
|
);
|
|
42
55
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
56
|
+
!iframeHasLoaded && fallback,
|
|
43
57
|
/* @__PURE__ */ jsx(RemoteRootRenderer, { components: mergedComponents, receiver }),
|
|
44
58
|
remoteFrame
|
|
45
59
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemoteRendererClient.mjs","sources":["../../src/RemoteRendererClient.tsx"],"sourcesContent":["\"use client\";\nimport
|
|
1
|
+
{"version":3,"file":"RemoteRendererClient.mjs","sources":["../../src/RemoteRendererClient.tsx"],"sourcesContent":["\"use client\";\nimport { components } from \"@/components\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport { connectRemoteIframeRef } from \"@mittwald/flow-remote-core\";\nimport type { RemoteComponentRendererProps } from \"@remote-dom/react/host\";\nimport { RemoteReceiver, RemoteRootRenderer } from \"@remote-dom/react/host\";\nimport type { ComponentType, CSSProperties, FC, ReactNode } from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { reduce } from \"remeda\";\n\nexport interface RemoteRendererProps {\n integrations?: RemoteComponentsMap<never>[];\n src: string;\n iframeStyle?: CSSProperties;\n data?: unknown;\n fallback?: ReactNode;\n}\n\nexport const RemoteRendererClient: FC<RemoteRendererProps> = (props) => {\n const { integrations = [], src, iframeStyle, data, fallback } = props;\n const receiver = useMemo(() => new RemoteReceiver(), []);\n\n const mergedComponents = useMemo(() => {\n return new Map<string, ComponentType<RemoteComponentRendererProps>>(\n Object.entries(\n reduce(\n [...integrations, components],\n (merged, current) => ({\n ...merged,\n ...current,\n }),\n {},\n ),\n ),\n );\n }, [...integrations]);\n\n const connect = connectRemoteIframeRef(receiver.connection);\n const connection = useRef<ReturnType<typeof connect>>(null);\n\n useEffect(() => {\n connection.current?.receiveData(data);\n }, [data, connection]);\n\n const [iframeHasLoaded, setIframeHasLoaded] = useState(false);\n\n const remoteFrame = (\n <iframe\n onLoad={() => setIframeHasLoaded(true)}\n ref={(iframe) => {\n if (iframe) {\n connection.current = connect(iframe);\n connection.current.receiveData(data);\n }\n }}\n src={src}\n style={\n iframeStyle ?? {\n visibility: \"hidden\",\n height: 0,\n width: 0,\n border: \"none\",\n position: \"absolute\",\n marginLeft: \"-9999px\",\n }\n }\n />\n );\n\n return (\n <>\n {!iframeHasLoaded && fallback}\n <RemoteRootRenderer components={mergedComponents} receiver={receiver} />\n {remoteFrame}\n </>\n );\n};\n\nexport default RemoteRendererClient;\n"],"names":[],"mappings":";;;;;;;AAkBa,MAAA,uBAAgD,CAAC,UAAU;AAChE,QAAA,EAAE,eAAe,IAAI,KAAK,aAAa,MAAM,aAAa;AAChE,QAAM,WAAW,QAAQ,MAAM,IAAI,eAAe,GAAG,CAAA,CAAE;AAEjD,QAAA,mBAAmB,QAAQ,MAAM;AACrC,WAAO,IAAI;AAAA,MACT,OAAO;AAAA,QACL;AAAA,UACE,CAAC,GAAG,cAAc,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa;AAAA,YACpB,GAAG;AAAA,YACH,GAAG;AAAA,UAAA;AAAA,UAEL,CAAA;AAAA,QAAC;AAAA,MACH;AAAA,IAEJ;AAAA,EAAA,GACC,CAAC,GAAG,YAAY,CAAC;AAEd,QAAA,UAAU,uBAAuB,SAAS,UAAU;AACpD,QAAA,aAAa,OAAmC,IAAI;AAE1D,YAAU,MAAM;;AACH,qBAAA,YAAA,mBAAS,YAAY;AAAA,EAAI,GACnC,CAAC,MAAM,UAAU,CAAC;AAErB,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,cACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,MAAM,mBAAmB,IAAI;AAAA,MACrC,KAAK,CAAC,WAAW;AACf,YAAI,QAAQ;AACC,qBAAA,UAAU,QAAQ,MAAM;AACxB,qBAAA,QAAQ,YAAY,IAAI;AAAA,QAAA;AAAA,MAEvC;AAAA,MACA;AAAA,MACA,OACE,eAAe;AAAA,QACb,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAEJ;AAGF,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,CAAC,mBAAmB;AAAA,IACpB,oBAAA,oBAAA,EAAmB,YAAY,kBAAkB,SAAoB,CAAA;AAAA,IACrE;AAAA,EAAA,GACH;AAEJ;"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { CSSProperties, FC } from 'react';
|
|
2
1
|
import { RemoteComponentsMap } from './lib/types';
|
|
2
|
+
import { CSSProperties, FC, ReactNode } from 'react';
|
|
3
3
|
export interface RemoteRendererProps {
|
|
4
4
|
integrations?: RemoteComponentsMap<never>[];
|
|
5
5
|
src: string;
|
|
6
6
|
iframeStyle?: CSSProperties;
|
|
7
|
+
data?: unknown;
|
|
8
|
+
fallback?: ReactNode;
|
|
7
9
|
}
|
|
8
10
|
export declare const RemoteRendererClient: FC<RemoteRendererProps>;
|
|
9
11
|
export default RemoteRendererClient;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemoteRendererClient.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererClient.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RemoteRendererClient.d.ts","sourceRoot":"","sources":["../../src/RemoteRendererClient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,OAAO,KAAK,EAAiB,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzE,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,mBAAmB,CA0DxD,CAAC;AAEF,eAAe,oBAAoB,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.46",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React rendering for Flow Remote Elements",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"test:compile": "tsc --noEmit"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@mittwald/flow-remote-core": "0.2.0-alpha.
|
|
32
|
-
"@mittwald/flow-remote-elements": "0.2.0-alpha.
|
|
31
|
+
"@mittwald/flow-remote-core": "0.2.0-alpha.46",
|
|
32
|
+
"@mittwald/flow-remote-elements": "0.2.0-alpha.46",
|
|
33
33
|
"@remote-dom/react": "^1.2.1",
|
|
34
34
|
"@types/react": "^19.0.10",
|
|
35
35
|
"clsx": "^2.1.1",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"remeda": "^2.20.2"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@mittwald/flow-react-components": "0.2.0-alpha.
|
|
40
|
+
"@mittwald/flow-react-components": "0.2.0-alpha.46",
|
|
41
41
|
"@mittwald/typescript-config": "",
|
|
42
42
|
"@types/node": "^22.13.4",
|
|
43
|
-
"nx": "^20.4.
|
|
43
|
+
"nx": "^20.4.5",
|
|
44
44
|
"prettier": "^3.5.1",
|
|
45
45
|
"react": "^19.0.0",
|
|
46
46
|
"react-dom": "^19.0.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"rimraf": "^6.0.1",
|
|
49
49
|
"rollup-preserve-directives": "^1.1.3",
|
|
50
50
|
"typescript": "^5.7.3",
|
|
51
|
-
"vite": "^6.1.
|
|
51
|
+
"vite": "^6.1.1",
|
|
52
52
|
"vite-plugin-banner": "^0.8.0",
|
|
53
53
|
"vite-plugin-checker": "^0.8.0",
|
|
54
54
|
"vite-plugin-dts": "^4.5.0",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"optional": true
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "ef82ec9b2b1c6a47574ef2e1ec0ecc76a39aad54"
|
|
69
69
|
}
|