chore: convert devMode to standard spec format using metadataTransducer

fix: https://github.com/alibaba/lowcode-engine/issues/283

packages/designer/src/component-meta.ts

@@ -16,7 +16,7 @@ import {
 import { deprecate } from '@alilc/lowcode-utils';
 import { computed, engineConfig } from '@alilc/lowcode-editor-core';
 import EventEmitter from 'events';
-
+import { componentDefaults, legacyIssues } from './transducers';
 import { isNode, Node, ParentalNode } from './document';
 import { Designer } from './designer';
 import { intlNode } from './locale';
@@ -397,47 +397,6 @@ export function getRegisteredMetadataTransducers(): MetadataTransducer[] {
   return metadataTransducers;
 }
 
-registerMetadataTransducer((metadata) => {
-  const { configure, componentName } = metadata;
-  const { component = {} } = configure;
-  if (!component.nestingRule) {
-    let m;
-    // uri match xx.Group set subcontrolling: true, childWhiteList
-    // eslint-disable-next-line no-cond-assign
-    if ((m = /^(.+)\.Group$/.exec(componentName))) {
-      // component.subControlling = true;
-      if (!component.nestingRule) {
-        component.nestingRule = {
-          childWhitelist: [`${m[1]}`],
-        };
-      }
-      // eslint-disable-next-line no-cond-assign
-    } else if ((m = /^(.+)\.Node$/.exec(componentName))) {
-      // uri match xx.Node set selfControlled: false, parentWhiteList
-      // component.selfControlled = false;
-      component.nestingRule = {
-        parentWhitelist: [`${m[1]}`, componentName],
-      };
-      // eslint-disable-next-line no-cond-assign
-    } else if ((m = /^(.+)\.(Item|Node|Option)$/.exec(componentName))) {
-      // uri match .Item .Node .Option set parentWhiteList
-      component.nestingRule = {
-        parentWhitelist: [`${m[1]}`],
-      };
-    }
-  }
-  // if (component.isModal == null && /Dialog/.test(componentName)) {
-  //   component.isModal = true;
-  // }
-  return {
-    ...metadata,
-    configure: {
-      ...configure,
-      component,
-    },
-  };
-});
-
 const builtinComponentActions: ComponentAction[] = [
   {
     name: 'remove',
@@ -544,3 +503,6 @@ export function modifyBuiltinComponentAction(
     handle(builtinAction);
   }
 }
+
+registerMetadataTransducer(legacyIssues, 2, 'legacy-issues'); // should use a high level priority, eg: 2
+registerMetadataTransducer(componentDefaults, 100, 'component-defaults');

packages/designer/src/designer/designer.ts

@@ -521,7 +521,7 @@ export class Designer {
     const designer = this;
     designer._componentMetasMap.forEach((config, key) => {
       const metaData = config.getMetadata();
-      if (metaData.devMode === 'lowcode') {
+      if (metaData.devMode === 'lowCode') {
         maps[key] = metaData.schema;
       } else {
         const view = metaData.configure.advanced?.view;

packages/designer/src/document/document-model.ts

@@ -26,7 +26,7 @@ export interface ComponentMap {
   destructuring?: boolean;
   exportName?: string;
   subName?: string;
-  devMode?: 'lowcode' | 'procode';
+  devMode?: 'lowCode' | 'proCode';
 }
 
 export class DocumentModel {
@@ -667,7 +667,7 @@ export class DocumentModel {
           });
         } else {
           componentsMap.push({
-            devMode: 'lowcode',
+            devMode: 'lowCode',
             componentName,
           });
         }

packages/designer/src/document/node/node.ts

@@ -1189,7 +1189,7 @@ export function isRootNode(node: Node): node is RootNode {
 }
 
 export function isLowCodeComponent(node: Node): boolean {
-  return node.componentMeta?.getMetadata().devMode === 'lowcode';
+  return node.componentMeta?.getMetadata().devMode === 'lowCode';
 }
 
 export function getZLevelTop(child: Node, zLevel: number): Node | null {

packages/designer/src/transducers/index.ts

@@ -0,0 +1,48 @@
+import { TransformedComponentMetadata as Metadata } from '@alilc/lowcode-types';
+
+export function legacyIssues(metadata: Metadata): Metadata {
+  const { devMode } = metadata;
+  return {
+    ...metadata,
+    devMode: devMode?.replace(/(low|pro)code/, '$1Code') as Metadata['devMode'],
+  };
+}
+
+export function componentDefaults(metadata: Metadata): Metadata {
+  const { configure, componentName } = metadata;
+  const { component = {} } = configure;
+  if (!component.nestingRule) {
+    let m;
+    // uri match xx.Group set subcontrolling: true, childWhiteList
+    // eslint-disable-next-line no-cond-assign
+    if ((m = /^(.+)\.Group$/.exec(componentName))) {
+      // component.subControlling = true;
+      component.nestingRule = {
+        childWhitelist: [`${m[1]}`],
+      };
+      // eslint-disable-next-line no-cond-assign
+    } else if ((m = /^(.+)\.Node$/.exec(componentName))) {
+      // uri match xx.Node set selfControlled: false, parentWhiteList
+      // component.selfControlled = false;
+      component.nestingRule = {
+        parentWhitelist: [`${m[1]}`, componentName],
+      };
+      // eslint-disable-next-line no-cond-assign
+    } else if ((m = /^(.+)\.(Item|Node|Option)$/.exec(componentName))) {
+      // uri match .Item .Node .Option set parentWhiteList
+      component.nestingRule = {
+        parentWhitelist: [`${m[1]}`],
+      };
+    }
+  }
+  // if (component.isModal == null && /Dialog/.test(componentName)) {
+  //   component.isModal = true;
+  // }
+  return {
+    ...metadata,
+    configure: {
+      ...configure,
+      component,
+    },
+  };
+}

packages/designer/tests/document/document-model/__snapshots__/document-model.test.ts.snap

@@ -5,59 +5,59 @@ Object {
   "componentsMap": Array [
     Object {
       "componentName": "PageHeader",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "RootHeader",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "TextField",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "Column",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "SelectField",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "ColumnsLayout",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "CardContent",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "Card",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "Button",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "Div",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "Form",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "RootContent",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "RootFooter",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
     Object {
       "componentName": "Page",
-      "devMode": "lowcode",
+      "devMode": "lowCode",
     },
   ],
   "componentsTree": Array [

packages/designer/tests/document/document-model/document-model.test.ts

@@ -175,7 +175,7 @@ describe('document-model 测试', () => {
       { componentName: 'Other', package: '@ali/vc-other' }
     );
     expect(comps.find(comp => comp.componentName === 'Page')).toEqual(
-      { componentName: 'Page', devMode: 'lowcode' }
+      { componentName: 'Page', devMode: 'lowCode' }
     );
   });
 

packages/designer/tests/fixtures/component-metadata/button.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'Button',
   npm: {
@@ -6,7 +7,7 @@ export default {
   },
   title: '按钮',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -304,4 +305,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/dialog.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'Dialog',
   npm: {
@@ -6,7 +7,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -273,4 +274,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/div.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'Div',
   npm: {
@@ -6,7 +7,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -279,4 +280,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/form.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'Form',
   npm: {
@@ -5,7 +6,7 @@ export default {
   },
   title: '表单',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -275,4 +276,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/other.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'Other',
   npm: {
@@ -5,7 +6,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -275,4 +276,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/page.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'Page',
   npm: {
@@ -5,7 +6,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -275,4 +276,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/root-content.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'RootContent',
   npm: {
@@ -5,7 +6,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -275,4 +276,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/root-footer.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'RootFooter',
   npm: {
@@ -5,7 +6,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -275,4 +276,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/fixtures/component-metadata/root-header.ts

@@ -1,3 +1,4 @@
+import { ComponentMetadata } from "@alilc/lowcode-types";
 export default {
   componentName: 'RootHeader',
   npm: {
@@ -5,7 +6,7 @@ export default {
   },
   title: '容器',
   docUrl: 'https://github.com/alibaba/lowcode-materials/tree/main/docs',
-  devMode: 'procode',
+  devMode: 'proCode',
   tags: ['布局'],
   configure: {
     props: [
@@ -275,4 +276,4 @@ export default {
     ],
     autoruns: [],
   },
-};
+} as ComponentMetadata;

packages/designer/tests/main/meta/component-meta.test.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import '../../fixtures/window';
 import { Node } from '../../../src/document/node/node';
 import { Designer } from '../../../src/designer/designer';
@@ -18,7 +17,7 @@ jest.mock('../../../src/designer/designer', () => {
 
 let designer = null;
 beforeAll(() => {
-  designer = new Designer({});
+  designer = new Designer({} as any);
 });
 
 describe('组件元数据处理', () => {
@@ -66,3 +65,15 @@ describe('组件元数据处理', () => {
     expect(meta.availableActions[4].name).toBe('new');
   });
 });
+
+describe('组件元数据transducers', () => {
+  it('legacyIssues', () => {
+    const legacyMeta: any = {
+      ...divMeta,
+      devMode: 'procode'
+    }
+    const meta = new ComponentMeta(designer, legacyMeta);
+    const metadata = meta.getMetadata();
+    expect(metadata.devMode).toBe('proCode');
+  })
+})

packages/types/src/metadata.ts

@@ -379,7 +379,7 @@ export interface ComponentMetadata {
   /**
    * 组件研发模式
    */
-  devMode?: 'procode' | 'lowcode';
+  devMode?: 'proCode' | 'lowCode';
   /**
    * npm 源引入完整描述对象
    */