refactor: use spec.properties to save the module spec

packages/core/src/module.ts

@@ -10,12 +10,12 @@ export type Module = {
   kind: 'Module';
   metadata: Metadata;
   spec: ModuleSpec;
-  rawSpec?: JSONSchema7;
   impl: ComponentSchema[];
 };
 
 type ModuleSpec = {
-  properties: JSONSchema7Object;
+  properties: JSONSchema7;
+  exampleProperties?: JSONSchema7Object;
   events: string[];
   stateMap: Record<string, string>;
 };
@@ -29,7 +29,6 @@ export type RuntimeModule = Module & {
 type CreateModuleOptions = {
   version: string;
   metadata: Metadata;
-  rawSpec?: JSONSchema7;
   spec?: Partial<ModuleSpec>;
   impl?: ComponentSchema[];
 };
@@ -44,12 +43,11 @@ export function createModule(options: CreateModuleOptions): RuntimeModule {
       description: options.metadata.description || '',
     },
     spec: {
-      properties: {},
+      properties: { type: 'object' },
       events: [],
       stateMap: {},
       ...options.spec,
     },
-    rawSpec: options.rawSpec,
     impl: options.impl || [],
   };
 }

packages/editor-sdk/src/components/Widgets/ModuleWidget.tsx

@@ -49,10 +49,10 @@ export const ModuleWidget: React.FC<WidgetProps<ModuleWidgetType>> = props => {
   const handleModuleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const moduleType = e.target.value;
     let initProperties = {};
-    if (e.target.value) {
+    if (moduleType) {
       try {
         const module = registry.getModuleByType(moduleType);
-        initProperties = module.spec.properties;
+        initProperties = module.spec.exampleProperties || {};
       } catch {
         initProperties = {};
       }
@@ -99,7 +99,7 @@ export const ModuleWidget: React.FC<WidgetProps<ModuleWidgetType>> = props => {
         <SpecWidget
           component={component}
           spec={{
-            ...module.rawSpec,
+            ...module.spec.properties,
             title: 'Module Properties',
           }}
           path={[]}

packages/editor/src/components/Explorer/ExplorerForm/ExplorerForm.tsx

@@ -43,8 +43,8 @@ export const ExplorerForm: React.FC<Props> = observer(
           name,
           version,
           stateMap: moduleSpec?.spec.stateMap || {},
-          properties: moduleSpec?.spec.properties || {},
-          rawSpec: moduleSpec.rawSpec || Type.Object({}),
+          properties: moduleSpec?.spec.properties || Type.Object({}),
+          exampleProperties: moduleSpec?.spec.exampleProperties || {},
         };
         form = (
           <ModuleMetaDataForm

packages/editor/src/components/Explorer/ExplorerForm/ModuleMetaDataForm.tsx

@@ -27,8 +27,8 @@ export type ModuleMetaDataFormData = {
   name: string;
   version: string;
   stateMap: Record<string, string>;
-  properties: Record<string, any>;
-  rawSpec: JSONSchema7;
+  properties: JSONSchema7;
+  exampleProperties: JSONSchema7Object;
 };
 
 type ModuleMetaDataFormProps = {
@@ -47,7 +47,7 @@ export const ModuleMetaDataForm: React.FC<ModuleMetaDataFormProps> = observer(
         { originName: initData.name, originVersion: initData.version },
         value
       );
-      editorStore.setModuleDependencies(value.properties);
+      editorStore.setModuleDependencies(value.exampleProperties);
       onSubmitForm?.(value);
     };
 
@@ -56,14 +56,14 @@ export const ModuleMetaDataForm: React.FC<ModuleMetaDataFormProps> = observer(
       onSubmit,
     });
 
-    const moduleRawSpec = formik.values.rawSpec || {};
+    const moduleSpec = formik.values.properties;
 
     const moduleProperties = {
-      ...(generateDefaultValueFromSpec(moduleRawSpec) as JSONSchema7Object),
-      ...formik.values.properties,
+      ...(generateDefaultValueFromSpec(moduleSpec) as JSONSchema7Object),
+      ...formik.values.exampleProperties,
     };
 
-    const moduleSpecs = (moduleRawSpec.properties || {}) as Record<string, JSONSchema7>;
+    const moduleSpecs = (moduleSpec.properties || {}) as Record<string, JSONSchema7>;
 
     return (
       <VStack>
@@ -113,16 +113,13 @@ export const ModuleMetaDataForm: React.FC<ModuleMetaDataFormProps> = observer(
                 {isOpen && (
                   <Box>
                     <JsonSchemaEditor
-                      data={moduleRawSpec}
+                      data={moduleSpec}
                       onSchemaChange={s => {
                         const curSpec = JSON.parse(s);
-                        if (
-                          s === JSON.stringify(moduleRawSpec) ||
-                          curSpec.type === 'array'
-                        )
+                        if (s === JSON.stringify(moduleSpec) || curSpec.type === 'array')
                           return;
 
-                        formik.setFieldValue('rawSpec', curSpec);
+                        formik.setFieldValue('properties', curSpec);
                       }}
                     />
                   </Box>
@@ -155,7 +152,7 @@ export const ModuleMetaDataForm: React.FC<ModuleMetaDataFormProps> = observer(
                 level={1}
                 services={services}
                 onChange={newFormData => {
-                  formik.setFieldValue('properties', {
+                  formik.setFieldValue('exampleProperties', {
                     ...moduleProperties,
                     [key]: newFormData,
                   });

packages/editor/src/constants/index.ts

@@ -1,4 +1,3 @@
-import { Type } from '@sinclair/typebox';
 import { Application } from '@sunmao-ui/core';
 import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
 import { CORE_VERSION, CoreTraitName } from '@sunmao-ui/shared';
@@ -36,9 +35,9 @@ export const DefaultNewModule: ImplementedRuntimeModule = {
   spec: {
     stateMap: {},
     events: [],
-    properties: {},
+    properties: { type: 'object', properties: {} },
+    exampleProperties: {},
   },
-  rawSpec: Type.Object({}),
   impl: [
     {
       id: 'text1',

packages/editor/src/services/AppStorage.ts

@@ -4,7 +4,7 @@ import { produce } from 'immer';
 import { DefaultNewModule, EmptyAppSchema } from '../constants';
 import { addModuleId, removeModuleId } from '../utils/addModuleId';
 import { StorageHandler } from '../types';
-import { JSONSchema7 } from 'json-schema';
+import { JSONSchema7, JSONSchema7Object } from 'json-schema';
 
 export class AppStorage {
   app: Application;
@@ -115,13 +115,13 @@ export class AppStorage {
       name,
       stateMap,
       properties,
-      rawSpec,
+      exampleProperties,
     }: {
       version: string;
       name: string;
       stateMap: Record<string, string>;
-      properties: Record<string, string>;
-      rawSpec: JSONSchema7;
+      properties: JSONSchema7;
+      exampleProperties: JSONSchema7Object;
     }
   ) {
     const i = this.modules.findIndex(
@@ -131,7 +131,7 @@ export class AppStorage {
       draft[i].metadata.name = name;
       draft[i].spec.stateMap = stateMap;
       draft[i].spec.properties = properties;
-      draft[i].rawSpec = rawSpec;
+      draft[i].spec.exampleProperties = exampleProperties;
       draft[i].version = version;
     });
 

packages/editor/src/services/EditorStore.ts

@@ -23,7 +23,7 @@ type EditingTarget = {
   version: string;
   name: string;
   spec?: {
-    properties?: Record<string, any>;
+    exampleProperties?: Record<string, any>;
   };
 };
 
@@ -98,7 +98,7 @@ export class EditorStore {
 
           this.setComponents(this.originComponents);
           this.setSelectedComponentId(this.originComponents[0]?.id || '');
-          this.setModuleDependencies(target.spec?.properties);
+          this.setModuleDependencies(target.spec?.exampleProperties);
         }
       }
     );