fix: fix some bugs

Author: 1ncounter

package.json

@@ -3,7 +3,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "playground": "pnpm --filter playground dev",
     "build": "node ./scripts/build.js",
     "test": "vitest",
     "clean": "rimraf ./packages/*/dist",
@@ -35,6 +34,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "globals": "^15.0.0",
     "husky": "^9.0.11",
+    "jsdom": "^24.1.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.2",

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

@@ -26,6 +26,11 @@ function RouteOutlet({ pageConfig }: OutletProps) {
   const context = useRenderContext();
   const { schema, packageManager } = context;
   const { type = 'lowCode', mappingId } = pageConfig;
+  console.log(
+    '%c [ pageConfig ]-29',
+    'font-size:13px; background:pink; color:#bf2c9f;',
+    pageConfig,
+  );
 
   if (type === 'lowCode') {
     // 在页面渲染时重新获取 componentsMap

packages/react-renderer/src/components/routerView.tsx

@@ -13,12 +13,12 @@ export const createRouterProvider = (router: Router) => {
       return () => remove();
     }, []);
 
-    const pageSchema = useMemo(() => {
+    const pageConfig = useMemo(() => {
       const pages = schema.get('pages') ?? [];
       const matched = location.matched[location.matched.length - 1];
 
       if (matched) {
-        const page = pages.find((item) => matched.page === item.id);
+        const page = pages.find((item) => matched.page === item.mappingId);
         return page;
       }
 
@@ -28,7 +28,7 @@ export const createRouterProvider = (router: Router) => {
     return (
       <RouterContext.Provider value={router}>
         <RouteLocationContext.Provider value={location}>
-          <PageConfigContext.Provider value={pageSchema}>{children}</PageConfigContext.Provider>
+          <PageConfigContext.Provider value={pageConfig}>{children}</PageConfigContext.Provider>
         </RouteLocationContext.Provider>
       </RouterContext.Provider>
     );

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

@@ -1 +1,5 @@
-export const dataSourceCreator = () => ({}) as any;
+export const dataSourceCreator = () =>
+  ({
+    dataSourceMap: {},
+    reloadDataSource: () => {},
+  }) as any;

packages/react-renderer/src/runtime/index.tsx

@@ -1,15 +1,14 @@
 import { processValue, someValue } from '@alilc/lowcode-renderer-core';
 import {
-  watch,
   isJSExpression,
   isJSFunction,
   isJSSlot,
   invariant,
-  isLowCodeComponentSchema,
+  isLowCodeComponentPackage,
   isJSI18nNode,
 } from '@alilc/lowcode-shared';
 import { forwardRef, useRef, useEffect, createElement, memo } from 'react';
-import { appendExternalStyle } from '../utils/element';
+import { appendExternalStyle } from '../../../../playground/renderer/src/plugin/remote/element';
 import { reactive } from '../utils/reactive';
 import { useRenderContext } from '../context/render';
 import { reactiveStateCreator } from './reactiveState';
@@ -63,7 +62,7 @@ export function getComponentByName(
 
   invariant(result, `${name} component not found in componentsRecord`);
 
-  if (isLowCodeComponentSchema(result)) {
+  if (isLowCodeComponentPackage(result)) {
     const { componentsMap, componentsTree, utils, i18n } = result.schema;
 
     if (componentsMap.length > 0) {
@@ -120,6 +119,7 @@ export function createComponentBySchema(
     }
 
     const model = modelRef.current;
+    console.log('%c [ model ]-123', 'font-size:13px; background:pink; color:#bf2c9f;', model);
 
     const isConstructed = useRef(false);
     const isMounted = useRef(false);
@@ -133,7 +133,7 @@ export function createComponentBySchema(
       const scopeValue = model.codeScope.value;
 
       // init dataSource
-      scopeValue.reloadDataSource();
+      scopeValue.reloadDataSource?.();
 
       let styleEl: HTMLElement | undefined;
       const cssText = model.getCssText();
@@ -148,19 +148,19 @@ export function createComponentBySchema(
       model.triggerLifeCycle('componentDidMount');
 
       // 当 state 改变之后调用
-      const unwatch = watch(scopeValue.state, (_, oldVal) => {
-        if (isMounted.current) {
-          model.triggerLifeCycle('componentDidUpdate', props, oldVal);
-        }
-      });
+      // const unwatch = watch(scopeValue.state, (_, oldVal) => {
+      //   if (isMounted.current) {
+      //     model.triggerLifeCycle('componentDidUpdate', props, oldVal);
+      //   }
+      // });
 
       isMounted.current = true;
 
       return () => {
         // componentWillUnmount?.();
         model.triggerLifeCycle('componentWillUnmount');
         styleEl?.parentNode?.removeChild(styleEl);
-        unwatch();
+        // unwatch();
         isMounted.current = false;
       };
     }, []);
@@ -247,7 +247,7 @@ function createElementByWidget(
       };
 
       // 先将 jsslot, jsFunction 对象转换
-      const finalProps = processValue(
+      let finalProps = processValue(
         componentProps,
         (node) => isJSFunction(node) || isJSSlot(node),
         (node: Spec.JSSlot | Spec.JSFunction) => {
@@ -288,6 +288,17 @@ function createElementByWidget(
         },
       );
 
+      finalProps = processValue(
+        finalProps,
+        (value) => {
+          return value.type === 'JSSlot' && !value.value;
+        },
+        (node) => {
+          console.log('%c [ node ]-303', 'font-size:13px; background:pink; color:#bf2c9f;', node);
+          return null;
+        },
+      );
+
       const childElements = children?.map((child) =>
         createElementByWidget(child, codeScope, renderContext, componentRefAttached),
       );

packages/react-renderer/src/utils/element.ts

@@ -10,5 +10,6 @@ export function normalizeComponentNode(node: Spec.ComponentNode): NormalizedComp
     ...node,
     loopArgs: node.loopArgs ?? ['item', 'index'],
     props: node.props ?? {},
+    condition: node.condition || node.condition === false ? node.condition : true,
   };
 }

packages/react-renderer/src/utils/node.ts

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "dist"
   },
-  "include": ["src"]
+  "include": ["src", "../../playground/renderer/src/plugin/remote/element.ts"]
 }