fix:replace render prop with renderer (#4444)

packages/app-page-builder/src/plugins/PbEditorPageElementPlugin.tsx

@@ -1,24 +1,35 @@
 import type { PbEditorPageElementPlugin as BasePbEditorPageElementPlugin } from "~/types";
+import type { Renderer } from "@webiny/app-page-builder-elements/types";
+
 import { legacyPluginToReactComponent } from "@webiny/app/utils";
 
-export const PbEditorPageElementPlugin = legacyPluginToReactComponent<
-    Pick<
+export interface PbEditorPageElementPluginProps
+    extends Pick<
         BasePbEditorPageElementPlugin,
         | "elementType"
         | "toolbar"
         | "help"
         | "target"
         | "settings"
         | "create"
-        | "render"
         | "canDelete"
         | "canReceiveChildren"
         | "onReceived"
         | "onChildDeleted"
         | "onCreate"
         | "renderElementPreview"
-    >
->({
-    pluginType: "pb-editor-page-element",
-    componentDisplayName: "PbEditorPageElementPlugin"
-});
+    > {
+    renderer: Renderer;
+}
+
+export const PbEditorPageElementPlugin =
+    legacyPluginToReactComponent<PbEditorPageElementPluginProps>({
+        pluginType: "pb-editor-page-element",
+        componentDisplayName: "PbEditorPageElementPlugin",
+        mapProps: props => {
+            return {
+                ...props,
+                render: props.renderer
+            };
+        }
+    });

packages/app-page-builder/src/plugins/PbRenderElementPlugin.tsx

@@ -1,9 +1,17 @@
 import type { PbRenderElementPlugin as BasePbRenderElementPlugin } from "~/types";
 import { legacyPluginToReactComponent } from "@webiny/app/utils";
 
-export const PbRenderElementPlugin = legacyPluginToReactComponent<
-    Pick<BasePbRenderElementPlugin, "elementType" | "render">
->({
+interface PbRenderElementPluginProps extends Pick<BasePbRenderElementPlugin, "elementType"> {
+    renderer: BasePbRenderElementPlugin["render"];
+}
+
+export const PbRenderElementPlugin = legacyPluginToReactComponent<PbRenderElementPluginProps>({
     pluginType: "pb-render-page-element",
-    componentDisplayName: "PbRenderElementPlugin"
+    componentDisplayName: "PbRenderElementPlugin",
+    mapProps: props => {
+        return {
+            ...props,
+            render: props.renderer
+        };
+    }
 });

packages/app-website/src/plugins/PbRenderElementPlugin.tsx

@@ -1,9 +1,17 @@
 import type { PbRenderElementPlugin as BasePbRenderElementPlugin } from "@webiny/app-page-builder/types";
 import { legacyPluginToReactComponent } from "@webiny/app/utils";
 
-export const PbRenderElementPlugin = legacyPluginToReactComponent<
-    Pick<BasePbRenderElementPlugin, "elementType" | "render">
->({
+interface PbRenderElementPluginProps extends Pick<BasePbRenderElementPlugin, "elementType"> {
+    renderer: BasePbRenderElementPlugin["render"];
+}
+
+export const PbRenderElementPlugin = legacyPluginToReactComponent<PbRenderElementPluginProps>({
     pluginType: "pb-render-page-element",
-    componentDisplayName: "PbRenderElementPlugin"
+    componentDisplayName: "PbRenderElementPlugin",
+    mapProps: props => {
+        return {
+            ...props,
+            render: props.renderer
+        };
+    }
 });

packages/app/src/utils/legacyPluginToReactComponent.ts

@@ -1,16 +1,21 @@
 import React from "react";
 import { useRegisterLegacyPlugin } from "~/hooks/useRegisterLegacyPlugin";
 
-export interface LegacyPluginToReactComponentParams {
+export interface LegacyPluginToReactComponentParams<TProps extends Record<string, any>> {
     pluginType: string;
     componentDisplayName: string;
+    mapProps?: (props: TProps) => TProps;
 }
 
 export const legacyPluginToReactComponent = function <TProps extends Record<string, any>>(
-    params: LegacyPluginToReactComponentParams
+    params: LegacyPluginToReactComponentParams<TProps>
 ) {
     const Component: React.ComponentType<TProps> = props => {
-        useRegisterLegacyPlugin({ ...props, type: params.pluginType });
+        const plugin = Object.assign(
+            { type: params.pluginType },
+            params.mapProps ? params.mapProps(props) : props
+        );
+        useRegisterLegacyPlugin(plugin);
         return null;
     };