feat(reactive): support autorun.memo/autorun.effect (#1819)

alibaba · Jul 17, 2021 · e43dda6 · e43dda6
1 parent 1534444
commit e43dda6
Show file tree

Hide file tree

Showing 17 changed files with 1,124 additions and 239 deletions.
diff --git a/designable/antd/src/locales/zh-CN.ts b/designable/antd/src/locales/zh-CN.ts
@@ -259,7 +259,7 @@ const UploadLocale = {
   withCredentials: '携带Cookie',
   maxCount: '最大数量',
   method: '方法',
-  textContent: '文案',
+  textContent: '上传文案',
 }
 
 const FormGridLocale = {

diff --git a/designable/antd/src/schemas/Upload.ts b/designable/antd/src/schemas/Upload.ts
@@ -3,6 +3,11 @@ import { ISchema } from '@formily/react'
 export const Upload: ISchema & { Dragger?: ISchema } = {
   type: 'object',
   properties: {
+    textContent: {
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+    },
     accept: {
       type: 'string',
       'x-decorator': 'FormItem',
@@ -51,6 +56,7 @@ export const Upload: ISchema & { Dragger?: ISchema } = {
         include: ['EXPRESSION'],
       },
     },
+
     listType: {
       enum: ['text', 'picture', 'picture-card'],
       'x-decorator': 'FormItem',
@@ -91,11 +97,6 @@ export const Upload: ISchema & { Dragger?: ISchema } = {
       'x-decorator': 'FormItem',
       'x-component': 'Switch',
     },
-    textContent: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Input',
-    },
   },
 }
 

diff --git a/designable/setters/src/components/ReactionsSetter/declarations.ts b/designable/setters/src/components/ReactionsSetter/declarations.ts
@@ -31,8 +31,30 @@ MonacoInput.loader.init().then(async (monaco) => {
     `
     import { Form, Field } from '@formily/core'
     declare global {
-      declare var $form : Form
-      declare var $self : Field
+      /*
+       * Form Model
+       **/
+      declare var $form: Form
+      /*
+       * Field Model
+       **/
+      declare var $self: Field
+      /*
+       * create an persistent observable state object
+       **/
+      declare var $observable: <T>(target: T, deps?: any[]) => T
+      /*
+       * create a persistent data
+       **/
+      declare var $memo: <T>(callback: () => T, deps?: any[]) => T
+      /*
+       * handle side-effect logic
+       **/
+      declare var $effect: (callback: () => void | (() => void), deps?: any[]) => void
+      /*
+       * set initial component props to current field
+       **/
+      declare var $props: (props: any) => void
     }
     `,
     `file:///node_modules/formily_global.d.ts`

diff --git a/designable/setters/src/components/ReactionsSetter/helpers.ts b/designable/setters/src/components/ReactionsSetter/helpers.ts
@@ -3,17 +3,26 @@ export const GlobalHelper = `
  * You can use the built-in context variables
  * 
  * 1. \`$self\` is the current Field Model 
- * https://core.formilyjs.org/api/models/field
  * 
  * 2. \`$form\` is the current Form Model 
- * https://core.formilyjs.org/api/models/form
  * 
  * 3. \`$deps\` is the dependencies value
+ * 
+ * 4. \`$observable\` function is used to create an persistent observable state object
+ *
+ * 5. \`$memo\` function is is used to create a persistent data
+ * 
+ * 6. \`$effect\` function is used to handle side-effect logic
+ * 
+ * 7. \`$props\` function is used to set component props to current field
+ * 
+ * Document Links
+ * 
+ * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F
  **/
 `
 
 export const BooleanHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static Boolean
@@ -56,10 +65,10 @@ $deps.VariableName > 100
 
 !$deps.VariableName
 
+${GlobalHelper}
 `
 
 export const DisplayHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static Mode
@@ -101,10 +110,11 @@ $deps.VariableName > 100 ? 'visible' : 'hidden'
  **/
 
 !$deps.VariableName ? 'visible' : 'none'
+
+${GlobalHelper}
 `
 
 export const PatternHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static Mode
@@ -146,10 +156,11 @@ $deps.VariableName > 100 ? 'editable' : 'readOnly'
  **/
 
 !$deps.VariableName ? 'editable' : 'disabled'
+
+${GlobalHelper}
 `
 
 export const StringHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static String
@@ -163,10 +174,11 @@ ${GlobalHelper}
  **/
 
 $deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : ''
+
+${GlobalHelper}
 `
 
 export const AnyHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * String Type
@@ -231,10 +243,11 @@ $deps.VariableName + 'Compose String'
  **/
 
 !$deps.VariableName
+
+${GlobalHelper}
 `
 
 export const DataSourceHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static DataSource
@@ -255,10 +268,11 @@ ${GlobalHelper}
   { label : "item2", value: "2" },
   ...$deps.VariableName
 ]
+
+${GlobalHelper}
 `
 
 export const ComponentPropsHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static Props
@@ -276,10 +290,11 @@ ${GlobalHelper}
 {
   placeholder: $deps.VariableName
 }
+
+${GlobalHelper}
 `
 
 export const DecoratorPropsHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Static Props
@@ -297,10 +312,11 @@ ${GlobalHelper}
 {
   labelCol: $deps.VariableName
 }
+
+${GlobalHelper}
 `
 
 export const FulfillRunHelper = `
-${GlobalHelper}
 /** 
  * Example 1
  * Async Select
@@ -316,7 +332,7 @@ $effect(()=>{
     },()=>{
       $self.loading = false
     })
-})
+},[])
   
 
 /** 
@@ -372,4 +388,6 @@ $effect(()=>{
       $self.loading = false
     })
 },[ state.keyword, $deps.VariableName ])
+
+${GlobalHelper}
 `