refactor: refactor codes

packages/react-renderer/package.json

@@ -30,15 +30,17 @@
     "hoist-non-react-statics": "^3.3.2",
     "use-sync-external-store": "^1.2.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-is": "^18.3.1"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.0",
     "@types/lodash-es": "^4.17.12",
     "@types/hoist-non-react-statics": "^3.3.5",
     "@types/use-sync-external-store": "^0.0.6",
     "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22"
+    "@types/react-dom": "^18.2.22",
+    "@types/react-is": "^18.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

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

@@ -1,67 +1,37 @@
-import { createRenderer, type AppOptions, type IRender } from '@alilc/lowcode-renderer-core';
+import { createRenderer, type AppOptions } from '@alilc/lowcode-renderer-core';
 import { type ComponentType } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
-import { createRouter, type RouterOptions } from '@alilc/lowcode-renderer-router';
-import AppComponent from '../components/app';
-import { RendererContext } from '../context/render';
-import { createRouterProvider } from '../components/routerView';
-import { rendererExtends } from '../plugin';
+import { ApplicationView, RendererContext, extension } from '../app';
 
 export interface ReactAppOptions extends AppOptions {
   faultComponent?: ComponentType<any>;
 }
 
-const defaultRouterOptions: RouterOptions = {
-  historyMode: 'browser',
-  baseName: '/',
-  routes: [],
-};
-
 export const createApp = async (options: ReactAppOptions) => {
-  const creator = createRenderer<IRender>(async (context) => {
+  return createRenderer(async (context) => {
     const { schema, boostsManager } = context;
-    const boosts = boostsManager.toExpose();
-
-    // router
-    let routerConfig = defaultRouterOptions;
-
-    try {
-      const routerSchema = schema.get('router');
-      if (routerSchema) {
-        routerConfig = boosts.codeRuntime.resolve(routerSchema);
-      }
-    } catch (e) {
-      console.error(`schema's router config is resolve error: `, e);
-    }
-
-    const router = createRouter(routerConfig);
-
-    boosts.codeRuntime.getScope().inject('router', router);
 
     // set config
     // if (options.faultComponent) {
     //   context.config.set('faultComponent', options.faultComponent);
     // }
 
     // extends boosts
-    boostsManager.extend(rendererExtends);
-
-    const RouterProvider = createRouterProvider(router);
+    extension.install(boostsManager);
 
     let root: Root | undefined;
 
     return {
-      async mount(el) {
-        if (root) {
-          return;
-        }
+      async mount(containerOrId) {
+        if (root) return;
+
+        const defaultId = schema.get('config')?.targetRootID ?? 'app';
+        const rootElement = normalizeContainer(containerOrId, defaultId);
 
-        root = createRoot(el);
+        root = createRoot(rootElement);
         root.render(
           <RendererContext.Provider value={context}>
-            <RouterProvider>
-              <AppComponent />
-            </RouterProvider>
+            <ApplicationView />
           </RendererContext.Provider>,
         );
       },
@@ -72,7 +42,23 @@ export const createApp = async (options: ReactAppOptions) => {
         }
       },
     };
-  });
-
-  return creator(options);
+  })(options);
 };
+
+function normalizeContainer(container: Element | string | undefined, defaultId: string): Element {
+  let result: Element | undefined = undefined;
+
+  if (typeof container === 'string') {
+    const el = document.getElementById(container);
+    if (el) result = el;
+  } else if (container instanceof window.Element) {
+    result = container;
+  }
+
+  if (!result) {
+    result = document.createElement('div');
+    result.id = defaultId;
+  }
+
+  return result;
+}

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

@@ -1,7 +1,7 @@
 import { createRenderer, type AppOptions } from '@alilc/lowcode-renderer-core';
 import { FunctionComponent } from 'react';
-import { type LowCodeComponentProps, createComponentBySchema } from '../runtime';
-import { RendererContext } from '../context/render';
+import { type LowCodeComponentProps, createComponentBySchema } from '../runtime/component';
+import { RendererContext } from '../app/context';
 
 interface Render {
   toComponent(): FunctionComponent<LowCodeComponentProps>;

packages/react-renderer/src/context/render.ts → packages/react-renderer/src/app/context.ts

@@ -3,6 +3,6 @@ import { type RenderContext } from '@alilc/lowcode-renderer-core';
 
 export const RendererContext = createContext<RenderContext>(undefined!);
 
-RendererContext.displayName = 'RootContext';
+RendererContext.displayName = 'RendererContext';
 
 export const useRenderContext = () => useContext(RendererContext);

packages/react-renderer/src/app/extension.ts

@@ -0,0 +1,51 @@
+import { type Plugin, type IBoostsService } from '@alilc/lowcode-renderer-core';
+import { type ComponentType, type PropsWithChildren } from 'react';
+
+export type WrapperComponent = ComponentType<PropsWithChildren<any>>;
+
+export interface OutletProps {
+  [key: string]: any;
+}
+
+export type Outlet = ComponentType<OutletProps>;
+
+export interface ReactRendererExtensionApi {
+  addAppWrapper(appWrapper: WrapperComponent): void;
+
+  setOutlet(outlet: Outlet): void;
+}
+
+class ReactRendererExtension {
+  private wrappers: WrapperComponent[] = [];
+
+  private outlet: Outlet | null = null;
+
+  getAppWrappers() {
+    return this.wrappers;
+  }
+
+  getOutlet() {
+    return this.outlet;
+  }
+
+  toExpose(): ReactRendererExtensionApi {
+    return {
+      addAppWrapper: (appWrapper) => {
+        if (appWrapper) this.wrappers.push(appWrapper);
+      },
+      setOutlet: (outletComponent) => {
+        if (outletComponent) this.outlet = outletComponent;
+      },
+    };
+  }
+
+  install(boostsService: IBoostsService) {
+    boostsService.extend(this.toExpose());
+  }
+}
+
+export const extension = new ReactRendererExtension();
+
+export function defineRendererPlugin(plugin: Plugin<ReactRendererExtensionApi>) {
+  return plugin;
+}

packages/react-renderer/src/app/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './extension';
+export * from './view';

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

@@ -0,0 +1,34 @@
+import { useRenderContext } from './context';
+import { getComponentByName } from '../runtime/component';
+import { extension } from './extension';
+
+export function ApplicationView() {
+  const renderContext = useRenderContext();
+  const { schema } = renderContext;
+  const appWrappers = extension.getAppWrappers();
+  const Outlet = extension.getOutlet();
+
+  if (!Outlet) return null;
+
+  let element = <Outlet />;
+
+  const layoutConfig = schema.get('config')?.layout;
+
+  if (layoutConfig) {
+    const componentName = layoutConfig.componentName;
+    const Layout = getComponentByName(componentName, renderContext);
+
+    if (Layout) {
+      const layoutProps: any = layoutConfig.props ?? {};
+      element = <Layout {...layoutProps}>{element}</Layout>;
+    }
+  }
+
+  if (appWrappers.length > 0) {
+    element = appWrappers.reduce((preElement, CurrentWrapper) => {
+      return <CurrentWrapper>{preElement}</CurrentWrapper>;
+    }, element);
+  }
+
+  return element;
+}