feat(json-schema): support x-compile-omitted attribute (#3145)

* feat(json-schema): support x-compile-omitted attribute

* feat(json-schema): support x-compile-omitted attribute

Author: janryWang

packages/json-schema/src/__tests__/traverse.spec.ts

@@ -3,17 +3,24 @@ import { FormPath } from '@formily/shared'
 
 test('traverseSchema', () => {
   const visited = []
+  const omitted = []
   traverseSchema(
     {
       type: 'string',
+      title: '{{aa}}',
       required: true,
       'x-validator': 'phone',
+      'x-compile-omitted': ['title'],
       default: {
         input: 123,
       },
     },
-    (value, path) => {
-      visited.push(path)
+    (value, path, omitCompile) => {
+      if (omitCompile) {
+        omitted.push(value)
+      } else {
+        visited.push(path)
+      }
     }
   )
   expect(visited).toEqual([
@@ -22,6 +29,7 @@ test('traverseSchema', () => {
     ['required'],
     ['default'],
   ])
+  expect(omitted).toEqual(['{{aa}}'])
 })
 
 test('traverse circular reference', () => {

packages/json-schema/src/compiler.ts

@@ -115,10 +115,12 @@ export const patchSchemaCompile = (
   scope: any,
   demand = false
 ) => {
-  traverseSchema(sourceSchema, (value, path) => {
+  traverseSchema(sourceSchema, (value, path, omitCompile) => {
     let compiled = value
     let collected = hasCollected(() => {
-      compiled = compile(value, scope)
+      if (!omitCompile) {
+        compiled = compile(value, scope)
+      }
     })
     if (compiled === undefined) return
     if (demand) {

packages/json-schema/src/schema.ts

@@ -178,6 +178,8 @@ export class Schema<
 
   ['x-read-pretty']?: boolean;
 
+  ['x-compile-omitted']?: string[];
+
   [key: `x-${string | number}` | symbol]: any
 
   _isJSONSchemaObject = true

packages/json-schema/src/shared.ts

@@ -98,7 +98,7 @@ export const traverse = (
 
 export const traverseSchema = (
   schema: ISchema,
-  visitor: (value: any, path: any[]) => void
+  visitor: (value: any, path: any[], omitCompile?: boolean) => void
 ) => {
   if (schema['x-validator'] !== undefined) {
     visitor(schema['x-validator'], ['x-validator'])
@@ -107,13 +107,18 @@ export const traverseSchema = (
   const root = schema
   const traverse = (target: any, path = []) => {
     if (
+      path[0] === 'x-compile-omitted' ||
       path[0] === 'x-validator' ||
       path[0] === 'version' ||
       path[0] === '_isJSONSchemaObject'
     )
       return
     if (String(path[0]).indexOf('x-') == -1 && isFn(target)) return
     if (SchemaNestedMap[path[0]]) return
+    if (schema['x-compile-omitted']?.indexOf(path[0]) > -1) {
+      visitor(target, path, true)
+      return
+    }
     if (isPlainObj(target)) {
       if (path[0] === 'default' || path[0] === 'x-value') {
         visitor(target, path)

packages/json-schema/src/types.ts

@@ -290,5 +290,7 @@ export type ISchema<
 
   ['x-read-pretty']?: boolean
 
+  ['x-compile-omitted']?: string[]
+
   [key: `x-${string | number}` | symbol]: any
 }>

packages/react/docs/api/shared/Schema.md

@@ -71,6 +71,7 @@ Create a Schema Tree based on a piece of json schema data to ensure that each sc
 | definitions          | Schema predefined                                                               | [SchemaProperties](#schemaproperties)                                              | -                                                                        |
 | $ref                 | Read the Schema from the Schema predefined and merge it into the current Schema | String                                                                             | -                                                                        |
 | x-data               | Extends Data                                                                    | Object                                                                             | `data`                                                                   |
+| x-compile-omitted    | list of attributes to ignore compiled expressions                               | string[]                                                                           | `[]`                                                                     |
 
 #### Detailed description
 

packages/react/docs/api/shared/Schema.zh-CN.md

@@ -71,6 +71,7 @@ class Schema {
 | definitions          | Schema 预定义                                     | [SchemaProperties](#schemaproperties)                                              | -                                                                        |
 | $ref                 | 从 Schema 预定义中读取 Schema 并合并至当前 Schema | String                                                                             | -                                                                        |
 | x-data               | 扩展属性                                          | Object                                                                             | `data`                                                                   |
+| x-compile-omitted    | 忽略编译表达式的属性列表                          | string[]                                                                           | `[]`                                                                     |
 
 #### 详细说明
 

packages/react/src/__tests__/expression.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import { createForm } from '@formily/core'
-import { FormProvider, ExpressionScope, createSchemaField } from '..'
+import { FormProvider, ExpressionScope, createSchemaField, useField } from '..'
 
 test('expression scope', async () => {
   const Container = (props) => {
@@ -37,3 +37,39 @@ test('expression scope', async () => {
     'this is inner scope value this is outer scope value'
   )
 })
+
+test('x-compile-omitted', async () => {
+  const form = createForm()
+  const SchemaField = createSchemaField({
+    components: {
+      Input: (props) => (
+        <div data-testid="input">
+          {props.aa}
+          {useField().title}
+          {props.extra}
+        </div>
+      ),
+    },
+  })
+
+  const { queryByTestId } = render(
+    <FormProvider form={form}>
+      <SchemaField>
+        <SchemaField.String
+          name="target"
+          x-compile-omitted={['x-component-props']}
+          title="{{123 + '321'}}"
+          x-component-props={{
+            aa: '{{fake}}',
+            extra: 'extra',
+          }}
+          x-component="Input"
+        />
+        <SchemaField.String name="btn" x-component="Button" />
+      </SchemaField>
+    </FormProvider>
+  )
+  await waitFor(() => {
+    expect(queryByTestId('input').textContent).toBe('{{fake}}123321extra')
+  })
+})