feat: support default value for property spec

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

@@ -23,7 +23,11 @@ const EnumField: React.FC<WidgetProps> = props => {
   const options = (spec.enum || []).map(item => item?.toString() || '');
 
   return (
-    <Select value={value} onChange={evt => onChange(evt.currentTarget.value)}>
+    <Select
+      value={value}
+      onChange={evt => onChange(evt.currentTarget.value)}
+      placeholder="Select option"
+    >
       {options.map((value, idx) => {
         return <option key={idx}>{value}</option>;
       })}

packages/editor/src/components/ComponentForm/ComponentForm.tsx

@@ -3,7 +3,6 @@ import { observer } from 'mobx-react-lite';
 import { Accordion, Input, Text, VStack } from '@chakra-ui/react';
 import { ComponentFormElementId, SpecWidget } from '@sunmao-ui/editor-sdk';
 import { parseType } from '@sunmao-ui/core';
-import { generateDefaultValueFromSpec } from '@sunmao-ui/shared';
 import { css } from '@emotion/css';
 
 import { EventTraitForm } from './EventTraitForm';
@@ -47,10 +46,7 @@ export const ComponentForm: React.FC<Props> = observer(props => {
   }
   const { version, name } = parseType(selectedComponent.type);
   const cImpl = registry.getComponent(version, name);
-  const properties = Object.assign(
-    generateDefaultValueFromSpec(cImpl.spec.properties)!,
-    selectedComponent.properties
-  );
+  const properties = selectedComponent.properties;
 
   const changeComponentId = (selectedComponentId: string, value: string) => {
     eventBus.send(

packages/editor/src/components/ComponentForm/GeneralTraitFormList/GeneralTraitForm.tsx

@@ -3,7 +3,6 @@ import { ComponentSchema, TraitSchema } from '@sunmao-ui/core';
 import { HStack, IconButton, VStack } from '@chakra-ui/react';
 import { CloseIcon } from '@chakra-ui/icons';
 import { SpecWidget } from '@sunmao-ui/editor-sdk';
-import { generateDefaultValueFromSpec } from '@sunmao-ui/shared';
 import { formWrapperCSS } from '../style';
 import { EditorServices } from '../../../types';
 import { genOperation } from '../../../operations';
@@ -21,10 +20,7 @@ export const GeneralTraitForm: React.FC<Props> = props => {
   const { registry, eventBus } = services;
 
   const tImpl = registry.getTraitByType(trait.type);
-  const properties = Object.assign(
-    generateDefaultValueFromSpec(tImpl.spec.properties)!,
-    trait.properties
-  );
+  const properties = trait.properties;
   const onChange = (newValue: any) => {
     const operation = genOperation(registry, 'modifyTraitProperty', {
       componentId: component.id,

packages/editor/src/components/ComponentForm/GeneralTraitFormList/GeneralTraitFormList.tsx

@@ -20,10 +20,11 @@ export const GeneralTraitFormList: React.FC<Props> = props => {
   const { eventBus, registry } = services;
 
   const onAddTrait = (type: string) => {
-    const traitSpec = registry.getTraitByType(type).spec;
-    const initProperties = generateDefaultValueFromSpec(
-      traitSpec.properties
-    ) as JSONSchema7Object;
+    const traitDefine = registry.getTraitByType(type);
+    const traitSpec = traitDefine.spec;
+    const initProperties =
+      traitDefine.metadata.exampleProperties ||
+      (generateDefaultValueFromSpec(traitSpec.properties) as JSONSchema7Object);
     eventBus.send(
       'operation',
       genOperation(registry, 'createTrait', {

packages/editor/src/components/DataSource/DataSourceList.tsx

@@ -99,10 +99,13 @@ export const DataSourceList: React.FC<Props> = props => {
   );
   const onCreateDSFromTrait = useCallback(
     (type: string) => {
-      const propertiesSpec = registry.getTraitByType(type).spec.properties;
-      const defaultProperties = generateDefaultValueFromSpec(propertiesSpec, {
-        genArrayItemDefaults: false,
-      });
+      const traitDefine = registry.getTraitByType(type);
+      const propertiesSpec = traitDefine.spec.properties;
+      const defaultProperties =
+        traitDefine.metadata.exampleProperties ||
+        generateDefaultValueFromSpec(propertiesSpec, {
+          genArrayItemDefaults: false,
+        });
       const name = type.split('/')[2];
       const id = getNewId(name);
 

packages/editor/src/operations/branch/datasource/createDataSourceBranchOperation.ts

@@ -18,10 +18,13 @@ export type CreateDataSourceBranchOperationContext = {
 export class CreateDataSourceBranchOperation extends BaseBranchOperation<CreateDataSourceBranchOperationContext> {
   do(prev: AppModel): AppModel {
     const { id, type, defaultProperties } = this.context;
-    const traitSpec = this.registry.getTraitByType(type).spec;
-    const initProperties = generateDefaultValueFromSpec(traitSpec.properties, {
-      genArrayItemDefaults: true,
-    }) as JSONSchema7Object;
+    const traitDefine = this.registry.getTraitByType(type);
+    const traitSpec = traitDefine.spec;
+    const initProperties =
+      traitDefine.metadata.exampleProperties ||
+      (generateDefaultValueFromSpec(traitSpec.properties, {
+        genArrayItemDefaults: true,
+      }) as JSONSchema7Object);
 
     this.operationStack.insert(
       new CreateComponentBranchOperation(this.registry, {

packages/shared/src/utils/spec.ts

@@ -34,8 +34,12 @@ function getArray(items: JSONSchema7Definition[], options?: Options): JSONSchema
   );
 }
 
+function isJSONSchema7Object(value: unknown): value is JSONSchema7Object {
+  return !!value && typeof value === 'object' && value instanceof Array === false;
+}
+
 function getObject(spec: JSONSchema7, options?: Options): JSONSchema7Object | string {
-  const obj: JSONSchema7Object = {};
+  const obj: JSONSchema7Object = isJSONSchema7Object(spec.default) ? spec.default : {};
 
   if (spec.allOf && spec.allOf.length > 0) {
     return (getArray(spec.allOf, options) as JSONSchema7Object[]).reduce((prev, cur) => {
@@ -47,10 +51,10 @@ function getObject(spec: JSONSchema7, options?: Options): JSONSchema7Object | st
   // if not specific property, treat it as any type
   if (!spec.properties) {
     if (options?.returnPlaceholderForAny) {
-      return AnyTypePlaceholder;
+      return isJSONSchema7Object(spec.default) ? spec.default : AnyTypePlaceholder;
     }
 
-    return {};
+    return isJSONSchema7Object(spec.default) ? spec.default : {};
   }
 
   for (const key in spec.properties) {
@@ -58,7 +62,8 @@ function getObject(spec: JSONSchema7, options?: Options): JSONSchema7Object | st
     if (typeof subSpec === 'boolean') {
       obj[key] = null;
     } else if (subSpec) {
-      obj[key] = generateDefaultValueFromSpec(subSpec, options);
+      obj[key] =
+        subSpec.default ?? obj[key] ?? generateDefaultValueFromSpec(subSpec, options);
     }
   }
   return obj;
@@ -98,14 +103,14 @@ export function generateDefaultValueFromSpec(
     }
     case spec.type === 'string':
       if (spec.enum && spec.enum.length > 0) {
-        return spec.enum[0];
+        return spec.default ?? spec.enum[0];
       } else {
-        return '';
+        return spec.default ?? '';
       }
     case spec.type === 'boolean':
-      return false;
+      return spec.default ?? false;
     case spec.type === 'array':
-      return spec.items
+      return spec.default ?? spec.items
         ? Array.isArray(spec.items)
           ? getArray(spec.items, options)
           : isJSONSchema(spec.items)
@@ -116,13 +121,13 @@ export function generateDefaultValueFromSpec(
         : [];
     case spec.type === 'number':
     case spec.type === 'integer':
-      return 0;
+      return spec.default ?? 0;
     case spec.type === 'object':
       return getObject(spec, options);
     case spec.type === 'null':
       return null;
     default:
-      return {};
+      return spec.default ?? {};
   }
 }