@mittwald/flow-remote-react-renderer 0.2.0-alpha.1032 → 0.2.0-alpha.1033
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.
- package/dist/js/RemoteRenderer.mjs +11 -12
- package/dist/js/RemoteRenderer.mjs.map +1 -1
- package/dist/js/RemoteRendererBrowser.mjs +121 -185
- package/dist/js/RemoteRendererBrowser.mjs.map +1 -1
- package/dist/js/auto-generated/index.mjs +138 -345
- package/dist/js/auto-generated/index.mjs.map +1 -1
- package/dist/js/components/Form.mjs +21 -28
- package/dist/js/components/Form.mjs.map +1 -1
- package/dist/js/components/HostRenderErrorBoundary.mjs +29 -41
- package/dist/js/components/HostRenderErrorBoundary.mjs.map +1 -1
- package/dist/js/components/NotificationRenderController.mjs +20 -21
- package/dist/js/components/NotificationRenderController.mjs.map +1 -1
- package/dist/js/components/SlotRootWrapper.mjs +7 -6
- package/dist/js/components/SlotRootWrapper.mjs.map +1 -1
- package/dist/js/components/index.mjs +4 -0
- package/dist/js/components.mjs +42 -49
- package/dist/js/components.mjs.map +1 -1
- package/dist/js/hooks/useControllableSuspenseTrigger.mjs +23 -26
- package/dist/js/hooks/useControllableSuspenseTrigger.mjs.map +1 -1
- package/dist/js/hooks/useMergedComponents.mjs +11 -21
- package/dist/js/hooks/useMergedComponents.mjs.map +1 -1
- package/dist/js/hooks/useUpdateHostPathnameOnRemote.mjs +13 -13
- package/dist/js/hooks/useUpdateHostPathnameOnRemote.mjs.map +1 -1
- package/dist/js/index.mjs +4 -5
- package/dist/js/integrations/react-hook-form/Form.mjs +22 -12
- package/dist/js/integrations/react-hook-form/Form.mjs.map +1 -1
- package/dist/js/lib/componentUsage.mjs +7 -5
- package/dist/js/lib/componentUsage.mjs.map +1 -1
- package/dist/js/lib/createFlowRemoteComponentRenderer.mjs +27 -42
- package/dist/js/lib/createFlowRemoteComponentRenderer.mjs.map +1 -1
- package/dist/js/lib/elementFactory.mjs +15 -19
- package/dist/js/lib/elementFactory.mjs.map +1 -1
- package/dist/js/lib/mapAttributeToReactProperty.mjs +9 -10
- package/dist/js/lib/mapAttributeToReactProperty.mjs.map +1 -1
- package/dist/js/lib/propClassifiers.mjs +6 -4
- package/dist/js/lib/propClassifiers.mjs.map +1 -1
- package/package.json +11 -13
- package/dist/js/index.mjs.map +0 -1
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { components } from
|
|
4
|
-
import { useMemo } from
|
|
5
|
-
import { reduce } from
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
(merged, current) => ({
|
|
13
|
-
...merged,
|
|
14
|
-
...current
|
|
15
|
-
}),
|
|
16
|
-
{}
|
|
17
|
-
)
|
|
18
|
-
)
|
|
19
|
-
),
|
|
20
|
-
[...integrations]
|
|
21
|
-
);
|
|
22
|
-
|
|
3
|
+
import { components } from "../components.mjs";
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { reduce } from "remeda";
|
|
6
|
+
//#region src/hooks/useMergedComponents.ts
|
|
7
|
+
var useMergedComponents = (integrations) => useMemo(() => new Map(Object.entries(reduce([...integrations, components], (merged, current) => ({
|
|
8
|
+
...merged,
|
|
9
|
+
...current
|
|
10
|
+
}), {}))), [...integrations]);
|
|
11
|
+
//#endregion
|
|
23
12
|
export { useMergedComponents };
|
|
24
|
-
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=useMergedComponents.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMergedComponents.mjs","sources":["../../../src/hooks/useMergedComponents.ts"],"sourcesContent":["import { components } from \"@/components\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { RemoteComponentRendererProps } from \"@mittwald/remote-dom-react/host\";\nimport { type ComponentType, useMemo } from \"react\";\nimport { reduce } from \"remeda\";\n\nexport const useMergedComponents = (\n integrations: RemoteComponentsMap<never>[],\n) =>\n useMemo(\n () =>\n 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"],"
|
|
1
|
+
{"version":3,"file":"useMergedComponents.mjs","names":[],"sources":["../../../src/hooks/useMergedComponents.ts"],"sourcesContent":["import { components } from \"@/components\";\nimport type { RemoteComponentsMap } from \"@/lib/types\";\nimport type { RemoteComponentRendererProps } from \"@mittwald/remote-dom-react/host\";\nimport { type ComponentType, useMemo } from \"react\";\nimport { reduce } from \"remeda\";\n\nexport const useMergedComponents = (\n integrations: RemoteComponentsMap<never>[],\n) =>\n useMemo(\n () =>\n 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"],"mappings":";;;;;;AAMA,IAAa,uBACX,iBAEA,cAEI,IAAI,IACF,OAAO,QACL,OACE,CAAC,GAAG,cAAc,UAAU,IAC3B,QAAQ,aAAa;CACpB,GAAG;CACH,GAAG;AACL,IACA,CAAC,CACH,CACF,CACF,GACF,CAAC,GAAG,YAAY,CAClB"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, [hostPathname, connection]);
|
|
3
|
+
import { useLayoutEffect } from "react";
|
|
4
|
+
import "@mittwald/flow-remote-core";
|
|
5
|
+
//#region src/hooks/useUpdateHostPathnameOnRemote.ts
|
|
6
|
+
/** Updates the host pathname in the remote connection. */
|
|
7
|
+
var useUpdateHostPathnameOnRemote = (hostPathname, connection) => {
|
|
8
|
+
useLayoutEffect(() => {
|
|
9
|
+
if (hostPathname === void 0 || !connection) return;
|
|
10
|
+
const { updateHostPathname } = connection;
|
|
11
|
+
updateHostPathname(hostPathname);
|
|
12
|
+
}, [hostPathname, connection]);
|
|
14
13
|
};
|
|
15
|
-
|
|
14
|
+
//#endregion
|
|
16
15
|
export { useUpdateHostPathnameOnRemote };
|
|
17
|
-
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=useUpdateHostPathnameOnRemote.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUpdateHostPathnameOnRemote.mjs","sources":["../../../src/hooks/useUpdateHostPathnameOnRemote.ts"],"sourcesContent":["import { type HostToRemoteConnection } from \"@mittwald/flow-remote-core\";\nimport { useLayoutEffect } from \"react\";\n\n/** Updates the host pathname in the remote connection. */\nexport const useUpdateHostPathnameOnRemote = (\n hostPathname?: string,\n connection?: HostToRemoteConnection,\n) => {\n useLayoutEffect(() => {\n if (hostPathname === undefined || !connection) {\n return;\n }\n\n const { updateHostPathname } = connection;\n updateHostPathname(hostPathname);\n }, [hostPathname, connection]);\n};\n"],"
|
|
1
|
+
{"version":3,"file":"useUpdateHostPathnameOnRemote.mjs","names":[],"sources":["../../../src/hooks/useUpdateHostPathnameOnRemote.ts"],"sourcesContent":["import { type HostToRemoteConnection } from \"@mittwald/flow-remote-core\";\nimport { useLayoutEffect } from \"react\";\n\n/** Updates the host pathname in the remote connection. */\nexport const useUpdateHostPathnameOnRemote = (\n hostPathname?: string,\n connection?: HostToRemoteConnection,\n) => {\n useLayoutEffect(() => {\n if (hostPathname === undefined || !connection) {\n return;\n }\n\n const { updateHostPathname } = connection;\n updateHostPathname(hostPathname);\n }, [hostPathname, connection]);\n};\n"],"mappings":";;;;;;AAIA,IAAa,iCACX,cACA,eACG;CACH,sBAAsB;EACpB,IAAI,iBAAiB,KAAA,KAAa,CAAC,YACjC;EAGF,MAAM,EAAE,uBAAuB;EAC/B,mBAAmB,YAAY;CACjC,GAAG,CAAC,cAAc,UAAU,CAAC;AAC/B"}
|
package/dist/js/index.mjs
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export { RemoteError }
|
|
5
|
-
//# sourceMappingURL=index.mjs.map
|
|
1
|
+
|
|
2
|
+
import { RemoteRenderer } from "./RemoteRenderer.mjs";
|
|
3
|
+
import { RemoteError } from "@mittwald/flow-remote-core";
|
|
4
|
+
export { RemoteError, RemoteRenderer };
|
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/integrations/react-hook-form/Form.tsx
|
|
6
|
+
/**
|
|
7
|
+
* ReactHookForm won't send the data over onSubmit, the form state is
|
|
8
|
+
* transferred over onChange. To avoid sending unnecessary data, this RemoteForm
|
|
9
|
+
* sends only the onSubmit without any formData.
|
|
10
|
+
*/
|
|
11
|
+
var Form = (props) => {
|
|
12
|
+
const { onSubmit: onSubmitFromProps, ref, ...rest } = props;
|
|
13
|
+
const onSubmit = async (event) => {
|
|
14
|
+
event.preventDefault();
|
|
15
|
+
await onSubmitFromProps?.();
|
|
16
|
+
};
|
|
17
|
+
return /* @__PURE__ */ jsx("form", {
|
|
18
|
+
...rest,
|
|
19
|
+
ref,
|
|
20
|
+
onSubmit
|
|
21
|
+
});
|
|
13
22
|
};
|
|
14
|
-
|
|
23
|
+
//#endregion
|
|
15
24
|
export { Form };
|
|
16
|
-
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=Form.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.mjs","sources":["../../../../src/integrations/react-hook-form/Form.tsx"],"sourcesContent":["import {\n type FC,\n type FormEvent,\n type PropsWithChildren,\n type Ref,\n} from \"react\";\n\ntype FormProps = {\n onSubmit?: () => void | Promise<void>;\n ref?: Ref<HTMLFormElement>;\n} & PropsWithChildren;\n\n/**\n * ReactHookForm won't send the data over onSubmit, the form state is\n * transferred over onChange. To avoid sending unnecessary data, this RemoteForm\n * sends only the onSubmit without any formData.\n */\nexport const Form: FC<FormProps> = (props) => {\n const { onSubmit: onSubmitFromProps, ref, ...rest } = props;\n\n const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n await onSubmitFromProps?.();\n };\n\n return <form {...rest} ref={ref} onSubmit={onSubmit} />;\n};\n"],"
|
|
1
|
+
{"version":3,"file":"Form.mjs","names":[],"sources":["../../../../src/integrations/react-hook-form/Form.tsx"],"sourcesContent":["import {\n type FC,\n type FormEvent,\n type PropsWithChildren,\n type Ref,\n} from \"react\";\n\ntype FormProps = {\n onSubmit?: () => void | Promise<void>;\n ref?: Ref<HTMLFormElement>;\n} & PropsWithChildren;\n\n/**\n * ReactHookForm won't send the data over onSubmit, the form state is\n * transferred over onChange. To avoid sending unnecessary data, this RemoteForm\n * sends only the onSubmit without any formData.\n */\nexport const Form: FC<FormProps> = (props) => {\n const { onSubmit: onSubmitFromProps, ref, ...rest } = props;\n\n const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n await onSubmitFromProps?.();\n };\n\n return <form {...rest} ref={ref} onSubmit={onSubmit} />;\n};\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,UAAU,mBAAmB,KAAK,GAAG,SAAS;CAEtD,MAAM,WAAW,OAAO,UAAsC;EAC5D,MAAM,eAAe;EACrB,MAAM,oBAAoB;CAC5B;CAEA,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAW;EAAe;CAAW,CAAA;AACxD"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
//#region src/lib/componentUsage.ts
|
|
4
|
+
var toComponentUsageEvent = (event, resolveStatus) => ({
|
|
5
|
+
...event.data,
|
|
6
|
+
status: resolveStatus(event.data.component)
|
|
6
7
|
});
|
|
7
|
-
|
|
8
|
+
//#endregion
|
|
8
9
|
export { toComponentUsageEvent };
|
|
9
|
-
|
|
10
|
+
|
|
11
|
+
//# sourceMappingURL=componentUsage.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentUsage.mjs","sources":["../../../src/lib/componentUsage.ts"],"sourcesContent":["import type { FlowComponentStatus } from \"@mittwald/flow-react-components/internal\";\nimport type { ComponentRenderedEvent } from \"@mittwald/flow-remote-core\";\n\n/**\n * A Flow component an extension used, as reported by the remote. Renders that\n * arrive through a Flow view are composition rather than usage and are not\n * reported at all.\n */\nexport interface ComponentUsageEvent {\n /** Display name of the used Flow component, e.g. `\"Button\"`. */\n component: string;\n /**\n * The component's lifecycle status (ADR 0003) from the generated status\n * registry. `undefined` for components the registry does not track as an\n * independent contract unit — subcomponents like `TableCell` or `XAxis`.\n */\n status?: FlowComponentStatus;\n}\n\nexport type ComponentUsageHandler = (event: ComponentUsageEvent) => void;\n\nexport type ComponentStatusResolver = (\n component: string,\n) => FlowComponentStatus | undefined;\n\nexport const toComponentUsageEvent = (\n event: ComponentRenderedEvent,\n resolveStatus: ComponentStatusResolver,\n): ComponentUsageEvent => ({\n ...event.data,\n status: resolveStatus(event.data.component),\n});\n"],"
|
|
1
|
+
{"version":3,"file":"componentUsage.mjs","names":[],"sources":["../../../src/lib/componentUsage.ts"],"sourcesContent":["import type { FlowComponentStatus } from \"@mittwald/flow-react-components/internal\";\nimport type { ComponentRenderedEvent } from \"@mittwald/flow-remote-core\";\n\n/**\n * A Flow component an extension used, as reported by the remote. Renders that\n * arrive through a Flow view are composition rather than usage and are not\n * reported at all.\n */\nexport interface ComponentUsageEvent {\n /** Display name of the used Flow component, e.g. `\"Button\"`. */\n component: string;\n /**\n * The component's lifecycle status (ADR 0003) from the generated status\n * registry. `undefined` for components the registry does not track as an\n * independent contract unit — subcomponents like `TableCell` or `XAxis`.\n */\n status?: FlowComponentStatus;\n}\n\nexport type ComponentUsageHandler = (event: ComponentUsageEvent) => void;\n\nexport type ComponentStatusResolver = (\n component: string,\n) => FlowComponentStatus | undefined;\n\nexport const toComponentUsageEvent = (\n event: ComponentRenderedEvent,\n resolveStatus: ComponentStatusResolver,\n): ComponentUsageEvent => ({\n ...event.data,\n status: resolveStatus(event.data.component),\n});\n"],"mappings":";;;AAyBA,IAAa,yBACX,OACA,mBACyB;CACzB,GAAG,MAAM;CACT,QAAQ,cAAc,MAAM,KAAK,SAAS;AAC5C"}
|
|
@@ -1,47 +1,32 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import { mapValues } from
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
return {};
|
|
19
|
-
}
|
|
20
|
-
return val;
|
|
3
|
+
import { isReactSuspendedStyle, isStyleProp } from "./propClassifiers.mjs";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Version } from "@mittwald/flow-remote-core";
|
|
7
|
+
import { createRemoteComponentRenderer } from "@mittwald/remote-dom-react/host";
|
|
8
|
+
import { FlowRemoteElement } from "@mittwald/flow-remote-elements";
|
|
9
|
+
import { mapValues } from "remeda";
|
|
10
|
+
//#region src/lib/createFlowRemoteComponentRenderer.tsx
|
|
11
|
+
var mapProperty = (val, key) => {
|
|
12
|
+
if (isStyleProp(key)) {
|
|
13
|
+
if (isReactSuspendedStyle(val)) return { display: "none" };
|
|
14
|
+
return {};
|
|
15
|
+
}
|
|
16
|
+
return val;
|
|
21
17
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = hostComponentProps;
|
|
33
|
-
if (version >= Version.v3) {
|
|
34
|
-
if (!initialized) {
|
|
35
|
-
return null;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
return /* @__PURE__ */ jsx(Component, { ...restProps });
|
|
39
|
-
}
|
|
40
|
-
HostComponent.displayName = `FlowRemoteRenderer(${name})`;
|
|
41
|
-
return createRemoteComponentRenderer(HostComponent, {
|
|
42
|
-
name: `RemoteRenderer(${name})`
|
|
43
|
-
});
|
|
18
|
+
var createFlowRemoteComponentRenderer = (name, Component) => {
|
|
19
|
+
function HostComponent(props) {
|
|
20
|
+
const { [FlowRemoteElement.versionPropertyName]: version = Version.v1, [FlowRemoteElement.initializationPropertyName]: initialized = false, ...restProps } = mapValues(props, (v, k) => mapProperty(v, k));
|
|
21
|
+
if (version >= Version.v3) {
|
|
22
|
+
if (!initialized) return null;
|
|
23
|
+
}
|
|
24
|
+
return /* @__PURE__ */ jsx(Component, { ...restProps });
|
|
25
|
+
}
|
|
26
|
+
HostComponent.displayName = `FlowRemoteRenderer(${name})`;
|
|
27
|
+
return createRemoteComponentRenderer(HostComponent, { name: `RemoteRenderer(${name})` });
|
|
44
28
|
};
|
|
45
|
-
|
|
29
|
+
//#endregion
|
|
46
30
|
export { createFlowRemoteComponentRenderer };
|
|
47
|
-
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=createFlowRemoteComponentRenderer.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFlowRemoteComponentRenderer.mjs","sources":["../../../src/lib/createFlowRemoteComponentRenderer.tsx"],"sourcesContent":["import { isReactSuspendedStyle, isStyleProp } from \"@/lib/propClassifiers\";\nimport type { RemoteComponentRendererProps } from \"@mittwald/remote-dom-react/host\";\nimport { createRemoteComponentRenderer } from \"@mittwald/remote-dom-react/host\";\nimport { FlowRemoteElement } from \"@mittwald/flow-remote-elements\";\nimport type { FlowRemoteElementMetaData } from \"@mittwald/flow-remote-elements\";\nimport { Version } from \"@mittwald/flow-remote-core\";\nimport { type ComponentType } from \"react\";\nimport { mapValues } from \"remeda\";\n\nconst mapProperty = (val: unknown, key: string) => {\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 & FlowRemoteElementMetaData) {\n const hostComponentProps = mapValues(props, (v, k) =>\n mapProperty(v, k),\n ) as P & FlowRemoteElementMetaData;\n\n const {\n [FlowRemoteElement.versionPropertyName]: version = Version.v1,\n [FlowRemoteElement.initializationPropertyName]: initialized = false,\n ...restProps\n } = hostComponentProps;\n\n if (version >= Version.v3) {\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"],"
|
|
1
|
+
{"version":3,"file":"createFlowRemoteComponentRenderer.mjs","names":[],"sources":["../../../src/lib/createFlowRemoteComponentRenderer.tsx"],"sourcesContent":["import { isReactSuspendedStyle, isStyleProp } from \"@/lib/propClassifiers\";\nimport type { RemoteComponentRendererProps } from \"@mittwald/remote-dom-react/host\";\nimport { createRemoteComponentRenderer } from \"@mittwald/remote-dom-react/host\";\nimport { FlowRemoteElement } from \"@mittwald/flow-remote-elements\";\nimport type { FlowRemoteElementMetaData } from \"@mittwald/flow-remote-elements\";\nimport { Version } from \"@mittwald/flow-remote-core\";\nimport { type ComponentType } from \"react\";\nimport { mapValues } from \"remeda\";\n\nconst mapProperty = (val: unknown, key: string) => {\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 & FlowRemoteElementMetaData) {\n const hostComponentProps = mapValues(props, (v, k) =>\n mapProperty(v, k),\n ) as P & FlowRemoteElementMetaData;\n\n const {\n [FlowRemoteElement.versionPropertyName]: version = Version.v1,\n [FlowRemoteElement.initializationPropertyName]: initialized = false,\n ...restProps\n } = hostComponentProps;\n\n if (version >= Version.v3) {\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"],"mappings":";;;;;;;;;;AASA,IAAM,eAAe,KAAc,QAAgB;CACjD,IAAI,YAAY,GAAG,GAAG;EACpB,IAAI,sBAAsB,GAAG,GAC3B,OAAO,EACL,SAAS,OACX;EAEF,OAAO,CAAC;CACV;CACA,OAAO;AACT;AAEA,IAAa,qCACX,MACA,cACgD;CAChD,SAAS,cAAc,OAAsC;EAK3D,MAAM,GACH,kBAAkB,sBAAsB,UAAU,QAAQ,KAC1D,kBAAkB,6BAA6B,cAAc,OAC9D,GAAG,cAPsB,UAAU,QAAQ,GAAG,MAC9C,YAAY,GAAG,CAAC,CAOd;EAEJ,IAAI,WAAW,QAAQ,IAEjB;OAAA,CAAC,aACH,OAAO;EAAA;EAIX,OAAO,oBAAC,WAAD,EAAW,GAAK,UAAkB,CAAA;CAC3C;CACA,cAAc,cAAc,sBAAsB,KAAK;CACvD,OAAO,8BAA8B,eAAe,EAClD,MAAM,kBAAkB,KAAK,GAC/B,CAAC;AACH"}
|
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { mapAttributeToReactProperty } from
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"className" in result && String(result["className"]),
|
|
16
|
-
"class" in result && String(result["class"])
|
|
17
|
-
);
|
|
18
|
-
delete result["class"];
|
|
19
|
-
return createElement(element, mapKeys(result, mapAttributeToReactProperty));
|
|
3
|
+
import { mapAttributeToReactProperty } from "./mapAttributeToReactProperty.mjs";
|
|
4
|
+
import { createElement } from "react";
|
|
5
|
+
import { mapKeys } from "remeda";
|
|
6
|
+
import clsx from "clsx";
|
|
7
|
+
//#region src/lib/elementFactory.ts
|
|
8
|
+
var elementFactory = (element, options = {}) => (props) => {
|
|
9
|
+
const result = { ...props };
|
|
10
|
+
const { isVoidElement = false } = options;
|
|
11
|
+
if (isVoidElement) delete result["children"];
|
|
12
|
+
result["className"] = clsx("className" in result && String(result["className"]), "class" in result && String(result["class"]));
|
|
13
|
+
delete result["class"];
|
|
14
|
+
return createElement(element, mapKeys(result, mapAttributeToReactProperty));
|
|
20
15
|
};
|
|
21
|
-
|
|
16
|
+
//#endregion
|
|
22
17
|
export { elementFactory };
|
|
23
|
-
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=elementFactory.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elementFactory.mjs","sources":["../../../src/lib/elementFactory.ts"],"sourcesContent":["import { mapAttributeToReactProperty } from \"@/lib/mapAttributeToReactProperty\";\nimport clsx from \"clsx\";\nimport { createElement } from \"react\";\nimport { mapKeys } from \"remeda\";\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n Pick<\n SVGElementTagNameMap,\n Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>\n >;\n\ninterface Options {\n isVoidElement?: boolean;\n}\n\nexport const elementFactory =\n <E extends keyof ElementTagNameMap>(element: E, options: Options = {}) =>\n (props: Record<string, unknown>) => {\n const result = { ...props };\n const { isVoidElement = false } = options;\n\n if (isVoidElement) {\n delete result[\"children\"];\n }\n\n // merge className and class\n result[\"className\"] = clsx(\n \"className\" in result && String(result[\"className\"]),\n \"class\" in result && String(result[\"class\"]),\n );\n\n delete result[\"class\"];\n\n return createElement(element, mapKeys(result, mapAttributeToReactProperty));\n };\n"],"
|
|
1
|
+
{"version":3,"file":"elementFactory.mjs","names":[],"sources":["../../../src/lib/elementFactory.ts"],"sourcesContent":["import { mapAttributeToReactProperty } from \"@/lib/mapAttributeToReactProperty\";\nimport clsx from \"clsx\";\nimport { createElement } from \"react\";\nimport { mapKeys } from \"remeda\";\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n Pick<\n SVGElementTagNameMap,\n Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>\n >;\n\ninterface Options {\n isVoidElement?: boolean;\n}\n\nexport const elementFactory =\n <E extends keyof ElementTagNameMap>(element: E, options: Options = {}) =>\n (props: Record<string, unknown>) => {\n const result = { ...props };\n const { isVoidElement = false } = options;\n\n if (isVoidElement) {\n delete result[\"children\"];\n }\n\n // merge className and class\n result[\"className\"] = clsx(\n \"className\" in result && String(result[\"className\"]),\n \"class\" in result && String(result[\"class\"]),\n );\n\n delete result[\"class\"];\n\n return createElement(element, mapKeys(result, mapAttributeToReactProperty));\n };\n"],"mappings":";;;;;;;AAeA,IAAa,kBACyB,SAAY,UAAmB,CAAC,OACnE,UAAmC;CAClC,MAAM,SAAS,EAAE,GAAG,MAAM;CAC1B,MAAM,EAAE,gBAAgB,UAAU;CAElC,IAAI,eACF,OAAO,OAAO;CAIhB,OAAO,eAAe,KACpB,eAAe,UAAU,OAAO,OAAO,YAAY,GACnD,WAAW,UAAU,OAAO,OAAO,QAAQ,CAC7C;CAEA,OAAO,OAAO;CAEd,OAAO,cAAc,SAAS,QAAQ,QAAQ,2BAA2B,CAAC;AAC5E"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { toCamelCase } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
return toCamelCase(key);
|
|
3
|
+
import { toCamelCase } from "remeda";
|
|
4
|
+
//#region src/lib/mapAttributeToReactProperty.ts
|
|
5
|
+
var keepWhenStartsWith = ["aria-", "data-"];
|
|
6
|
+
var mapAttributeToReactProperty = (key) => {
|
|
7
|
+
if (keepWhenStartsWith.some((prefix) => key.startsWith(prefix))) return key;
|
|
8
|
+
return toCamelCase(key);
|
|
11
9
|
};
|
|
12
|
-
|
|
10
|
+
//#endregion
|
|
13
11
|
export { mapAttributeToReactProperty };
|
|
14
|
-
|
|
12
|
+
|
|
13
|
+
//# sourceMappingURL=mapAttributeToReactProperty.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mapAttributeToReactProperty.mjs","sources":["../../../src/lib/mapAttributeToReactProperty.ts"],"sourcesContent":["import { toCamelCase } from \"remeda\";\n\nconst keepWhenStartsWith = [\"aria-\", \"data-\"];\n\nexport const mapAttributeToReactProperty = (key: string) => {\n if (keepWhenStartsWith.some((prefix) => key.startsWith(prefix))) {\n return key;\n }\n\n return toCamelCase(key);\n};\n"],"
|
|
1
|
+
{"version":3,"file":"mapAttributeToReactProperty.mjs","names":[],"sources":["../../../src/lib/mapAttributeToReactProperty.ts"],"sourcesContent":["import { toCamelCase } from \"remeda\";\n\nconst keepWhenStartsWith = [\"aria-\", \"data-\"];\n\nexport const mapAttributeToReactProperty = (key: string) => {\n if (keepWhenStartsWith.some((prefix) => key.startsWith(prefix))) {\n return key;\n }\n\n return toCamelCase(key);\n};\n"],"mappings":";;;;AAEA,IAAM,qBAAqB,CAAC,SAAS,OAAO;AAE5C,IAAa,+BAA+B,QAAgB;CAC1D,IAAI,mBAAmB,MAAM,WAAW,IAAI,WAAW,MAAM,CAAC,GAC5D,OAAO;CAGT,OAAO,YAAY,GAAG;AACxB"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
//#region src/lib/propClassifiers.ts
|
|
4
|
+
var isStyleProp = (name) => name === "style";
|
|
5
|
+
var isReactSuspendedStyle = (value) => value === "display: none !important;";
|
|
6
|
+
//#endregion
|
|
6
7
|
export { isReactSuspendedStyle, isStyleProp };
|
|
7
|
-
|
|
8
|
+
|
|
9
|
+
//# sourceMappingURL=propClassifiers.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propClassifiers.mjs","sources":["../../../src/lib/propClassifiers.ts"],"sourcesContent":["export const isStyleProp = (name: string): boolean => name === \"style\";\n\nexport const isReactSuspendedStyle = (value: unknown): boolean =>\n value === \"display: none !important;\";\n"],"
|
|
1
|
+
{"version":3,"file":"propClassifiers.mjs","names":[],"sources":["../../../src/lib/propClassifiers.ts"],"sourcesContent":["export const isStyleProp = (name: string): boolean => name === \"style\";\n\nexport const isReactSuspendedStyle = (value: unknown): boolean =>\n value === \"display: none !important;\";\n"],"mappings":";;;AAAA,IAAa,eAAe,SAA0B,SAAS;AAE/D,IAAa,yBAAyB,UACpC,UAAU"}
|
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.1033",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React rendering for Flow Remote Elements",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"test:unit": "vitest run --passWithNoTests"
|
|
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.1033",
|
|
32
|
+
"@mittwald/flow-remote-core": "0.2.0-alpha.1033",
|
|
33
|
+
"@mittwald/flow-remote-elements": "0.2.0-alpha.1033",
|
|
34
34
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
35
35
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
36
36
|
"@types/react": "^19.2",
|
|
@@ -39,26 +39,24 @@
|
|
|
39
39
|
"remeda": "^2.39.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@mittwald/flow-
|
|
43
|
-
"@mittwald/
|
|
42
|
+
"@mittwald/flow-core": "0.2.0-alpha.1033",
|
|
43
|
+
"@mittwald/flow-react-components": "0.2.0-alpha.1033",
|
|
44
|
+
"@mittwald/typescript-config": "0.2.0-alpha.1033",
|
|
44
45
|
"@types/node": "^25.9.3",
|
|
45
46
|
"nx": "^22.7.5",
|
|
46
|
-
"prettier": "^3.8.4",
|
|
47
47
|
"react": "^19.2.0",
|
|
48
48
|
"react-dom": "^19.2.0",
|
|
49
49
|
"react-hook-form": "^7.79.0",
|
|
50
50
|
"rimraf": "^6.1.3",
|
|
51
51
|
"rollup-preserve-directives": "^1.1.3",
|
|
52
52
|
"typescript": "^6.0.3",
|
|
53
|
-
"
|
|
54
|
-
"vite
|
|
55
|
-
"vite-plugin-checker": "^0.14.1",
|
|
56
|
-
"vite-plugin-dts": "^5.0.3",
|
|
53
|
+
"unplugin-dts": "^1.0.3",
|
|
54
|
+
"vite": "^8.2.1",
|
|
57
55
|
"vite-plugin-externalize-deps": "^0.10.0",
|
|
58
56
|
"vitest": "^4.1.10"
|
|
59
57
|
},
|
|
60
58
|
"peerDependencies": {
|
|
61
|
-
"@mittwald/flow-react-components": "0.2.0-alpha.
|
|
59
|
+
"@mittwald/flow-react-components": "0.2.0-alpha.1033",
|
|
62
60
|
"react": "^19.2.0",
|
|
63
61
|
"react-dom": "^19.2.0",
|
|
64
62
|
"react-hook-form": "^7.65.0"
|
|
@@ -68,5 +66,5 @@
|
|
|
68
66
|
"optional": true
|
|
69
67
|
}
|
|
70
68
|
},
|
|
71
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "1e93dee00797e8702e30c53c403f9a33029c9634"
|
|
72
70
|
}
|
package/dist/js/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|