fix: renderer bugs fix

Author: 1ncounter

packages/react-renderer/src/api/app.tsx

@@ -1,7 +1,8 @@
 import { createRenderer } from '@alilc/lowcode-renderer-core';
 import { type Root, createRoot } from 'react-dom/client';
-import { type ReactAppOptions, RendererContext } from './context';
+import { RendererContext } from './context';
 import { ApplicationView, boosts } from '../app';
+import { type ReactAppOptions } from './types';
 
 export const createApp = async (options: ReactAppOptions) => {
   return createRenderer(async (context) => {

packages/react-renderer/src/api/component.tsx

@@ -1,17 +1,26 @@
-import { createRenderer, type AppOptions } from '@alilc/lowcode-renderer-core';
+import { createRenderer } from '@alilc/lowcode-renderer-core';
 import { FunctionComponent } from 'react';
-import { type LowCodeComponentProps, createComponentBySchema } from '../runtime/schema';
-import { RendererContext } from '../api/context';
+import {
+  type LowCodeComponentProps,
+  createComponent as createSchemaComponent,
+} from '../runtime/createComponent';
+import { RendererContext } from './context';
+import { type ReactAppOptions } from './types';
 
 interface Render {
   toComponent(): FunctionComponent<LowCodeComponentProps>;
 }
 
-export async function createComponent(options: AppOptions) {
+export async function createComponent(options: ReactAppOptions) {
   const creator = createRenderer<Render>((context) => {
     const { schema } = context;
+    const componentsTree = schema.get('componentsTree')[0];
+
+    const LowCodeComponent = createSchemaComponent(componentsTree, {
+      displayName: componentsTree.componentName,
+      ...options.component,
+    });
 
-    const LowCodeComponent = createComponentBySchema(schema.get('componentsTree')[0]);
     const contextValue = { ...context, options };
 
     function Component(props: LowCodeComponentProps) {

packages/react-renderer/src/api/context.ts

@@ -1,9 +1,6 @@
-import { type ComponentType, createContext, useContext } from 'react';
-import { type AppOptions, type RenderContext } from '@alilc/lowcode-renderer-core';
-
-export interface ReactAppOptions extends AppOptions {
-  faultComponent?: ComponentType<any>;
-}
+import { createContext, useContext } from 'react';
+import { type RenderContext } from '@alilc/lowcode-renderer-core';
+import { type ReactAppOptions } from './types';
 
 export const RendererContext = createContext<RenderContext & { options: ReactAppOptions }>(
   undefined!,

packages/react-renderer/src/api/types.ts

@@ -0,0 +1,11 @@
+import { type AppOptions } from '@alilc/lowcode-renderer-core';
+import { type ComponentType } from 'react';
+import { type ComponentOptions } from '../runtime/createComponent';
+
+export interface ReactAppOptions extends AppOptions {
+  component?: Pick<
+    ComponentOptions,
+    'beforeElementCreate' | 'elementCreated' | 'componentRefAttached'
+  >;
+  faultComponent?: ComponentType<any>;
+}

packages/react-renderer/src/app/view.tsx

@@ -1,10 +1,10 @@
 import { useRendererContext } from '../api/context';
-import { getComponentByName } from '../runtime/schema';
+import { getComponentByName } from '../runtime/createComponent';
 import { boosts } from './boosts';
 
 export function ApplicationView() {
   const rendererContext = useRendererContext();
-  const { schema } = rendererContext;
+  const { schema, options } = rendererContext;
   const appWrappers = boosts.getAppWrappers();
   const Outlet = boosts.getOutlet();
 
@@ -16,7 +16,7 @@ export function ApplicationView() {
 
   if (layoutConfig) {
     const componentName = layoutConfig.componentName;
-    const Layout = getComponentByName(componentName, rendererContext);
+    const Layout = getComponentByName(componentName, rendererContext, options.component);
 
     if (Layout) {
       const layoutProps: any = layoutConfig.props ?? {};

packages/react-renderer/src/index.ts

@@ -6,5 +6,11 @@ export * from './router';
 export { LifecyclePhase } from '@alilc/lowcode-renderer-core';
 
 export type { Spec, ProCodeComponent, LowCodeComponent } from '@alilc/lowcode-shared';
-export type { PackageLoader, CodeScope, Plugin } from '@alilc/lowcode-renderer-core';
+export type {
+  PackageLoader,
+  CodeScope,
+  Plugin,
+  ModelDataSourceCreator,
+  ModelStateCreator,
+} from '@alilc/lowcode-renderer-core';
 export type { ReactRendererBoostsApi } from './app/boosts';

packages/react-renderer/src/router/route.tsx

@@ -2,12 +2,12 @@ import { useMemo } from 'react';
 import { useRendererContext } from '../api/context';
 import { OutletProps } from '../app/boosts';
 import { useRouteLocation } from './context';
-import { createComponentBySchema } from '../runtime/schema';
+import { createComponent } from '../runtime/createComponent';
 
 export function RouteOutlet(props: OutletProps) {
   const context = useRendererContext();
   const location = useRouteLocation();
-  const { schema, packageManager } = context;
+  const { schema, packageManager, options } = context;
 
   const pageConfig = useMemo(() => {
     const pages = schema.get('pages') ?? [];
@@ -27,11 +27,12 @@ export function RouteOutlet(props: OutletProps) {
     const componentsMap = schema.get('componentsMap');
     packageManager.resolveComponentMaps(componentsMap);
 
-    const LowCodeComponent = createComponentBySchema(pageConfig.mappingId, {
+    const LowCodeComponent = createComponent(pageConfig.mappingId, {
       displayName: pageConfig.id,
       modelOptions: {
         metadata: pageConfig,
       },
+      ...options.component,
     });
 
     return <LowCodeComponent {...props} />;

packages/react-renderer/src/runtime/context.ts

@@ -3,23 +3,23 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { isValidElementType } from 'react-is';
 import { useRendererContext } from '../api/context';
 import { reactiveStateFactory } from './reactiveState';
-import { type ReactComponent, type ReactWidget, createElementByWidget } from './components';
-import { ModelContextProvider } from './context';
+import { type ReactComponent, type ReactWidget, createElementByWidget } from './elements';
 import { appendExternalStyle } from '../utils/element';
 
 import type {
   RenderContext,
   IComponentTreeModel,
-  ComponentTreeModelOptions,
+  CreateComponentTreeModelOptions,
 } from '@alilc/lowcode-renderer-core';
-import type { ReactInstance, CSSProperties, ForwardedRef } from 'react';
+import type { ReactInstance, CSSProperties, ForwardedRef, ReactNode } from 'react';
 
 export interface ComponentOptions {
   displayName?: string;
-  modelOptions?: ComponentTreeModelOptions;
+  modelOptions?: Pick<CreateComponentTreeModelOptions, 'id' | 'metadata'>;
 
-  widgetCreated?(widget: ReactWidget): void;
-  componentRefAttached?(widget: ReactWidget, instance: ReactInstance): void;
+  beforeElementCreate?(widget: ReactWidget): ReactWidget;
+  elementCreated?(widget: ReactWidget, element: ReactNode): ReactNode;
+  componentRefAttached?(widget: ReactWidget, instance: ReactInstance | null): void;
 }
 
 export interface LowCodeComponentProps {
@@ -37,6 +37,7 @@ const lowCodeComponentsCache = new Map<string, ReactComponent>();
 export function getComponentByName(
   name: string,
   { packageManager, boostsManager }: RenderContext,
+  componentOptions: ComponentOptions = {},
 ): ReactComponent {
   const result = lowCodeComponentsCache.get(name) || packageManager.getComponent(name);
 
@@ -58,7 +59,8 @@ export function getComponentByName(
       });
     }
 
-    const lowCodeComponent = createComponentBySchema(componentsTree[0], {
+    const lowCodeComponent = createComponent(componentsTree[0], {
+      ...componentOptions,
       displayName: name,
       modelOptions: {
         id: metadata.id,
@@ -76,40 +78,49 @@ export function getComponentByName(
   return result;
 }
 
-export function createComponentBySchema(
+export function createComponent(
   schema: string | Spec.ComponentTreeRoot,
-  { displayName = '__LowCodeComponent__', modelOptions }: ComponentOptions = {},
+  componentOptions: ComponentOptions = {},
 ) {
+  const { displayName = '__LowCodeComponent__', modelOptions } = componentOptions;
+
   const LowCodeComponent = forwardRef(function (
     props: LowCodeComponentProps,
     ref: ForwardedRef<any>,
   ) {
-    const renderContext = useRendererContext();
-    const { options, componentTreeModel } = renderContext;
+    const context = useRendererContext();
+    const { options: globalOptions, componentTreeModel } = context;
 
     const modelRef = useRef<IComponentTreeModel<ReactComponent, ReactInstance>>();
 
     if (!modelRef.current) {
+      const finalOptions: CreateComponentTreeModelOptions = {
+        ...modelOptions,
+        codeScopeValue: {
+          props,
+        },
+        stateCreator: reactiveStateFactory,
+        dataSourceCreator: globalOptions.dataSourceCreator,
+      };
+
       if (typeof schema === 'string') {
-        modelRef.current = componentTreeModel.createById(schema, modelOptions);
+        modelRef.current = componentTreeModel.createById(schema, finalOptions);
       } else {
-        modelRef.current = componentTreeModel.create(schema, modelOptions);
+        modelRef.current = componentTreeModel.create(schema, finalOptions);
       }
+      console.log(
+        '%c [ model ]-103',
+        'font-size:13px; background:pink; color:#bf2c9f;',
+        modelRef.current,
+      );
     }
 
     const model = modelRef.current!;
-    console.log('%c [ model ]-103', 'font-size:13px; background:pink; color:#bf2c9f;', model);
 
     const isConstructed = useRef(false);
     const isMounted = useRef(false);
 
     if (!isConstructed.current) {
-      model.initialize({
-        defaultProps: props,
-        stateCreator: reactiveStateFactory,
-        dataSourceCreator: options.dataSourceCreator,
-      });
-
       model.triggerLifeCycle('constructor');
       isConstructed.current = true;
 
@@ -142,11 +153,9 @@ export function createComponentBySchema(
     }, []);
 
     return (
-      <ModelContextProvider value={model}>
-        <div id={props.id} className={props.className} style={props.style} ref={ref}>
-          {model.widgets.map((w) => createElementByWidget(w, model.codeScope))}
-        </div>
-      </ModelContextProvider>
+      <div id={props.id} className={props.className} style={props.style} ref={ref}>
+        {model.widgets.map((w) => createElementByWidget(w, w.model.codeRuntime, componentOptions))}
+      </div>
     );
   });