@mittwald/flow-remote-react-renderer 0.2.0-alpha.1032 → 0.2.0-alpha.1034

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.
Files changed (38) hide show
  1. package/dist/js/RemoteRenderer.mjs +11 -12
  2. package/dist/js/RemoteRenderer.mjs.map +1 -1
  3. package/dist/js/RemoteRendererBrowser.mjs +121 -185
  4. package/dist/js/RemoteRendererBrowser.mjs.map +1 -1
  5. package/dist/js/auto-generated/index.mjs +138 -345
  6. package/dist/js/auto-generated/index.mjs.map +1 -1
  7. package/dist/js/components/Form.mjs +21 -28
  8. package/dist/js/components/Form.mjs.map +1 -1
  9. package/dist/js/components/HostRenderErrorBoundary.mjs +29 -41
  10. package/dist/js/components/HostRenderErrorBoundary.mjs.map +1 -1
  11. package/dist/js/components/NotificationRenderController.mjs +20 -21
  12. package/dist/js/components/NotificationRenderController.mjs.map +1 -1
  13. package/dist/js/components/SlotRootWrapper.mjs +7 -6
  14. package/dist/js/components/SlotRootWrapper.mjs.map +1 -1
  15. package/dist/js/components/index.mjs +4 -0
  16. package/dist/js/components.mjs +42 -49
  17. package/dist/js/components.mjs.map +1 -1
  18. package/dist/js/hooks/useControllableSuspenseTrigger.mjs +23 -26
  19. package/dist/js/hooks/useControllableSuspenseTrigger.mjs.map +1 -1
  20. package/dist/js/hooks/useMergedComponents.mjs +11 -21
  21. package/dist/js/hooks/useMergedComponents.mjs.map +1 -1
  22. package/dist/js/hooks/useUpdateHostPathnameOnRemote.mjs +13 -13
  23. package/dist/js/hooks/useUpdateHostPathnameOnRemote.mjs.map +1 -1
  24. package/dist/js/index.mjs +4 -5
  25. package/dist/js/integrations/react-hook-form/Form.mjs +22 -12
  26. package/dist/js/integrations/react-hook-form/Form.mjs.map +1 -1
  27. package/dist/js/lib/componentUsage.mjs +7 -5
  28. package/dist/js/lib/componentUsage.mjs.map +1 -1
  29. package/dist/js/lib/createFlowRemoteComponentRenderer.mjs +27 -42
  30. package/dist/js/lib/createFlowRemoteComponentRenderer.mjs.map +1 -1
  31. package/dist/js/lib/elementFactory.mjs +15 -19
  32. package/dist/js/lib/elementFactory.mjs.map +1 -1
  33. package/dist/js/lib/mapAttributeToReactProperty.mjs +9 -10
  34. package/dist/js/lib/mapAttributeToReactProperty.mjs.map +1 -1
  35. package/dist/js/lib/propClassifiers.mjs +6 -4
  36. package/dist/js/lib/propClassifiers.mjs.map +1 -1
  37. package/package.json +11 -13
  38. package/dist/js/index.mjs.map +0 -1
@@ -1,24 +1,14 @@
1
1
  "use client"
2
2
  /* */
3
- import { components } from '../components.mjs';
4
- import { useMemo } from 'react';
5
- import { reduce } from 'remeda';
6
-
7
- const useMergedComponents = (integrations) => useMemo(
8
- () => new Map(
9
- Object.entries(
10
- reduce(
11
- [...integrations, components],
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
- //# sourceMappingURL=useMergedComponents.mjs.map
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"],"names":[],"mappings":";;;;AAMO,MAAM,mBAAA,GAAsB,CACjC,YAAA,KAEA,OAAA;AAAA,EACE,MACE,IAAI,GAAA;AAAA,IACF,MAAA,CAAO,OAAA;AAAA,MACL,MAAA;AAAA,QACE,CAAC,GAAG,YAAA,EAAc,UAAU,CAAA;AAAA,QAC5B,CAAC,QAAQ,OAAA,MAAa;AAAA,UACpB,GAAG,MAAA;AAAA,UACH,GAAG;AAAA,SACL,CAAA;AAAA,QACA;AAAC;AACH;AACF,GACF;AAAA,EACF,CAAC,GAAG,YAAY;AAClB;;;;"}
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 '@mittwald/flow-remote-core';
4
- import { useLayoutEffect } from 'react';
5
-
6
- const useUpdateHostPathnameOnRemote = (hostPathname, connection) => {
7
- useLayoutEffect(() => {
8
- if (hostPathname === void 0 || !connection) {
9
- return;
10
- }
11
- const { updateHostPathname } = connection;
12
- updateHostPathname(hostPathname);
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
- //# sourceMappingURL=useUpdateHostPathnameOnRemote.mjs.map
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"],"names":[],"mappings":";;;AAIO,MAAM,6BAAA,GAAgC,CAC3C,YAAA,EACA,UAAA,KACG;AACH,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,YAAA,KAAiB,MAAA,IAAa,CAAC,UAAA,EAAY;AAC7C,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,EAAE,oBAAmB,GAAI,UAAA;AAC/B,IAAA,kBAAA,CAAmB,YAAY,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,YAAA,EAAc,UAAU,CAAC,CAAA;AAC/B;;;;"}
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
- "use client"
2
- /* */
3
- export { RemoteRenderer } from './RemoteRenderer.mjs';
4
- export { RemoteError } from '@mittwald/flow-remote-core';
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 { jsx } from 'react/jsx-runtime';
4
- import 'react';
5
-
6
- const Form = (props) => {
7
- const { onSubmit: onSubmitFromProps, ref, ...rest } = props;
8
- const onSubmit = async (event) => {
9
- event.preventDefault();
10
- await onSubmitFromProps?.();
11
- };
12
- return /* @__PURE__ */ jsx("form", { ...rest, ref, onSubmit });
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
- //# sourceMappingURL=Form.mjs.map
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"],"names":[],"mappings":";;;AAiBO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM,EAAE,QAAA,EAAU,iBAAA,EAAmB,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEtD,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAsC;AAC5D,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,MAAM,iBAAA,IAAoB;AAAA,EAC5B,CAAA;AAEA,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,KAAU,QAAA,EAAoB,CAAA;AACvD;;;;"}
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
- const toComponentUsageEvent = (event, resolveStatus) => ({
4
- ...event.data,
5
- status: resolveStatus(event.data.component)
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
- //# sourceMappingURL=componentUsage.mjs.map
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"],"names":[],"mappings":"AAyBO,MAAM,qBAAA,GAAwB,CACnC,KAAA,EACA,aAAA,MACyB;AAAA,EACzB,GAAG,KAAA,CAAM,IAAA;AAAA,EACT,MAAA,EAAQ,aAAA,CAAc,KAAA,CAAM,IAAA,CAAK,SAAS;AAC5C,CAAA;;;;"}
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 { jsx } from 'react/jsx-runtime';
4
- import { isStyleProp, isReactSuspendedStyle } from './propClassifiers.mjs';
5
- import { createRemoteComponentRenderer } from '@mittwald/remote-dom-react/host';
6
- import { FlowRemoteElement } from '@mittwald/flow-remote-elements';
7
- import { Version } from '@mittwald/flow-remote-core';
8
- import 'react';
9
- import { mapValues } from 'remeda';
10
-
11
- const mapProperty = (val, key) => {
12
- if (isStyleProp(key)) {
13
- if (isReactSuspendedStyle(val)) {
14
- return {
15
- display: "none"
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
- const createFlowRemoteComponentRenderer = (name, Component) => {
23
- function HostComponent(props) {
24
- const hostComponentProps = mapValues(
25
- props,
26
- (v, k) => mapProperty(v, k)
27
- );
28
- const {
29
- [FlowRemoteElement.versionPropertyName]: version = Version.v1,
30
- [FlowRemoteElement.initializationPropertyName]: initialized = false,
31
- ...restProps
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
- //# sourceMappingURL=createFlowRemoteComponentRenderer.mjs.map
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"],"names":[],"mappings":";;;;;;;;AASA,MAAM,WAAA,GAAc,CAAC,GAAA,EAAc,GAAA,KAAgB;AACjD,EAAA,IAAI,WAAA,CAAY,GAAG,CAAA,EAAG;AACpB,IAAA,IAAI,qBAAA,CAAsB,GAAG,CAAA,EAAG;AAC9B,MAAA,OAAO;AAAA,QACL,OAAA,EAAS;AAAA,OACX;AAAA,IACF;AACA,IAAA,OAAO,EAAC;AAAA,EACV;AACA,EAAA,OAAO,GAAA;AACT,CAAA;AAEO,MAAM,iCAAA,GAAoC,CAC/C,IAAA,EACA,SAAA,KACgD;AAChD,EAAA,SAAS,cAAc,KAAA,EAAsC;AAC3D,IAAA,MAAM,kBAAA,GAAqB,SAAA;AAAA,MAAU,KAAA;AAAA,MAAO,CAAC,CAAA,EAAG,CAAA,KAC9C,WAAA,CAAY,GAAG,CAAC;AAAA,KAClB;AAEA,IAAA,MAAM;AAAA,MACJ,CAAC,iBAAA,CAAkB,mBAAmB,GAAG,UAAU,OAAA,CAAQ,EAAA;AAAA,MAC3D,CAAC,iBAAA,CAAkB,0BAA0B,GAAG,WAAA,GAAc,KAAA;AAAA,MAC9D,GAAG;AAAA,KACL,GAAI,kBAAA;AAEJ,IAAA,IAAI,OAAA,IAAW,QAAQ,EAAA,EAAI;AAEzB,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,OAAO,IAAA;AAAA,MACT;AAAA,IACF;AAEA,IAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAW,GAAI,SAAA,EAAiB,CAAA;AAAA,EAC1C;AACA,EAAA,aAAA,CAAc,WAAA,GAAc,sBAAsB,IAAI,CAAA,CAAA,CAAA;AACtD,EAAA,OAAO,8BAA8B,aAAA,EAAe;AAAA,IAClD,IAAA,EAAM,kBAAkB,IAAI,CAAA,CAAA;AAAA,GAC7B,CAAA;AACH;;;;"}
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 './mapAttributeToReactProperty.mjs';
4
- import clsx from 'clsx';
5
- import { createElement } from 'react';
6
- import { mapKeys } from 'remeda';
7
-
8
- const elementFactory = (element, options = {}) => (props) => {
9
- const result = { ...props };
10
- const { isVoidElement = false } = options;
11
- if (isVoidElement) {
12
- delete result["children"];
13
- }
14
- result["className"] = clsx(
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
- //# sourceMappingURL=elementFactory.mjs.map
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"],"names":[],"mappings":";;;;;AAeO,MAAM,iBACX,CAAoC,OAAA,EAAY,UAAmB,EAAC,KACpE,CAAC,KAAA,KAAmC;AAClC,EAAA,MAAM,MAAA,GAAS,EAAE,GAAG,KAAA,EAAM;AAC1B,EAAA,MAAM,EAAE,aAAA,GAAgB,KAAA,EAAM,GAAI,OAAA;AAElC,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,OAAO,OAAO,UAAU,CAAA;AAAA,EAC1B;AAGA,EAAA,MAAA,CAAO,WAAW,CAAA,GAAI,IAAA;AAAA,IACpB,WAAA,IAAe,MAAA,IAAU,MAAA,CAAO,MAAA,CAAO,WAAW,CAAC,CAAA;AAAA,IACnD,OAAA,IAAW,MAAA,IAAU,MAAA,CAAO,MAAA,CAAO,OAAO,CAAC;AAAA,GAC7C;AAEA,EAAA,OAAO,OAAO,OAAO,CAAA;AAErB,EAAA,OAAO,aAAA,CAAc,OAAA,EAAS,OAAA,CAAQ,MAAA,EAAQ,2BAA2B,CAAC,CAAA;AAC5E;;;;"}
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 'remeda';
4
-
5
- const keepWhenStartsWith = ["aria-", "data-"];
6
- const mapAttributeToReactProperty = (key) => {
7
- if (keepWhenStartsWith.some((prefix) => key.startsWith(prefix))) {
8
- return key;
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
- //# sourceMappingURL=mapAttributeToReactProperty.mjs.map
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"],"names":[],"mappings":";;AAEA,MAAM,kBAAA,GAAqB,CAAC,OAAA,EAAS,OAAO,CAAA;AAErC,MAAM,2BAAA,GAA8B,CAAC,GAAA,KAAgB;AAC1D,EAAA,IAAI,kBAAA,CAAmB,KAAK,CAAC,MAAA,KAAW,IAAI,UAAA,CAAW,MAAM,CAAC,CAAA,EAAG;AAC/D,IAAA,OAAO,GAAA;AAAA,EACT;AAEA,EAAA,OAAO,YAAY,GAAG,CAAA;AACxB;;;;"}
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
- const isStyleProp = (name) => name === "style";
4
- const isReactSuspendedStyle = (value) => value === "display: none !important;";
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
- //# sourceMappingURL=propClassifiers.mjs.map
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"],"names":[],"mappings":"AAAO,MAAM,WAAA,GAAc,CAAC,IAAA,KAA0B,IAAA,KAAS;AAExD,MAAM,qBAAA,GAAwB,CAAC,KAAA,KACpC,KAAA,KAAU;;;;"}
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.1032",
3
+ "version": "0.2.0-alpha.1034",
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.1032",
32
- "@mittwald/flow-remote-core": "0.2.0-alpha.1032",
33
- "@mittwald/flow-remote-elements": "0.2.0-alpha.1032",
31
+ "@mittwald/ext-bridge": "0.2.0-alpha.1034",
32
+ "@mittwald/flow-remote-core": "0.2.0-alpha.1034",
33
+ "@mittwald/flow-remote-elements": "0.2.0-alpha.1034",
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-react-components": "0.2.0-alpha.1032",
43
- "@mittwald/typescript-config": "0.2.0-alpha.1032",
42
+ "@mittwald/flow-core": "0.2.0-alpha.1034",
43
+ "@mittwald/flow-react-components": "0.2.0-alpha.1034",
44
+ "@mittwald/typescript-config": "0.2.0-alpha.1034",
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
- "vite": "7.3.6",
54
- "vite-plugin-banner": "^0.8.1",
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.1032",
59
+ "@mittwald/flow-react-components": "0.2.0-alpha.1034",
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": "8851c00e700eb59216ce6bc4496aa4bd90240952"
69
+ "gitHead": "f86c44ffa927037a7f77b40d6df99d5603ac1782"
72
70
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}