From 3792c2217d1f16b848e3f06f21ca9cc845791569 Mon Sep 17 00:00:00 2001 From: janrywang Date: Tue, 25 May 2021 22:34:45 +0800 Subject: [PATCH] chore(project): prettier all code and change style behavior --- package.json | 3 +- packages/.eslintrc | 2 +- packages/antd/build-style.ts | 6 - packages/antd/create-style.ts | 23 ++ packages/antd/package.json | 5 +- packages/antd/src/__builtins__/hooks/index.ts | 2 +- .../src/__builtins__/hooks/usePrefixCls.ts | 2 +- packages/antd/src/__builtins__/index.ts | 2 +- packages/antd/src/array-base/style.ts | 3 +- packages/antd/src/array-table/style.ts | 2 +- packages/antd/src/cascader/style.ts | 2 +- packages/antd/src/checkbox/style.ts | 2 +- packages/antd/src/date-picker/style.ts | 2 +- packages/antd/src/form-button-group/style.ts | 2 +- packages/antd/src/form-collapse/style.ts | 2 +- packages/antd/src/form-grid/style.ts | 2 +- packages/antd/src/form-step/style.ts | 2 +- packages/antd/src/form-tab/style.ts | 2 +- packages/antd/src/index.ts | 2 +- packages/antd/src/input/style.ts | 2 +- packages/antd/src/number-picker/style.ts | 2 +- packages/antd/src/password/style.ts | 2 +- packages/antd/src/preview-text/style.ts | 2 +- packages/antd/src/radio/style.ts | 2 +- packages/antd/src/reset/style.ts | 2 +- packages/antd/src/select/style.ts | 2 +- packages/antd/src/space/style.ts | 2 +- packages/antd/src/style.ts | 45 +-- packages/antd/src/switch/style.ts | 2 +- packages/antd/src/time-picker/style.ts | 2 +- packages/antd/src/transfer/style.ts | 2 +- packages/antd/src/tree-select/style.ts | 2 +- packages/antd/src/upload/placeholder.ts | 34 +- packages/antd/src/upload/style.ts | 2 +- packages/core/src/__tests__/array.spec.ts | 34 +- packages/core/src/__tests__/form.spec.ts | 35 +- packages/core/src/__tests__/shared.ts | 2 +- packages/core/src/effects/index.ts | 2 +- packages/core/src/effects/onFieldEffects.ts | 21 +- packages/core/src/shared/externals.ts | 4 +- packages/core/src/shared/index.ts | 3 +- packages/next/build-style.ts | 6 - packages/next/create-style.ts | 23 ++ packages/next/package.json | 5 +- packages/next/src/__builtins__/hooks/index.ts | 2 +- packages/next/src/__builtins__/index.ts | 2 +- packages/next/src/__builtins__/mapSize.ts | 4 +- packages/next/src/__builtins__/toArray.ts | 24 +- packages/next/src/array-base/style.ts | 3 +- packages/next/src/cascader/style.ts | 2 +- packages/next/src/checkbox/style.ts | 2 +- packages/next/src/date-picker/style.ts | 2 +- packages/next/src/form-button-group/main.scss | 2 + packages/next/src/form-button-group/style.ts | 2 +- .../src/form-grid/{style.scss => main.scss} | 0 packages/next/src/form-grid/style.ts | 2 +- packages/next/src/form-item/style.ts | 2 +- packages/next/src/form-step/style.ts | 2 +- packages/next/src/form-tab/style.ts | 2 +- packages/next/src/input/style.ts | 2 +- packages/next/src/password/style.ts | 2 +- packages/next/src/preview-text/style.ts | 2 +- packages/next/src/radio/style.ts | 2 +- packages/next/src/reset/style.ts | 2 +- packages/next/src/select/style.ts | 2 +- packages/next/src/space/style.ts | 2 +- packages/next/src/style.ts | 43 +-- packages/next/src/switch/style.ts | 2 +- packages/next/src/time-picker/style.ts | 2 +- packages/next/src/transfer/style.ts | 2 +- packages/next/src/tree-select/style.ts | 2 +- packages/next/src/upload/placeholder.ts | 34 +- packages/next/src/upload/style.ts | 2 +- packages/path/src/__tests__/accessor.spec.ts | 9 +- packages/path/src/contexts.ts | 28 +- packages/path/src/destructor.ts | 16 +- packages/path/src/lru.ts | 44 +-- packages/path/src/matcher.ts | 6 +- packages/path/src/types.ts | 18 +- packages/react/src/hooks/index.ts | 2 +- packages/react/src/shared/context.ts | 5 +- packages/react/src/shared/render.ts | 2 +- packages/react/src/types.ts | 18 +- packages/reactive-react/src/hooks/index.ts | 2 +- packages/reactive-react/src/shared/index.ts | 2 +- packages/reactive-react/src/types.ts | 1 - .../src/__tests__/observer.spec.ts | 98 ++--- .../reactive-vue/src/hooks/useObserver.ts | 4 +- .../reactive-vue/src/observer/collectData.ts | 49 +-- packages/reactive-vue/src/observer/index.ts | 3 +- .../src/observer/observerInVue2.ts | 37 +- .../src/observer/observerInVue3.ts | 4 +- packages/reactive-vue/src/types.ts | 1 - packages/reactive/src/__tests__/batch.spec.ts | 1 - .../src/__tests__/collections.spec.ts | 1 - .../reactive/src/__tests__/externals.spec.ts | 9 +- packages/reactive/src/annotations/index.ts | 2 +- packages/reactive/src/concat.ts | 2 +- packages/reactive/src/index.ts | 2 +- packages/reactive/src/reaction.ts | 7 +- packages/shared/src/array.ts | 2 +- packages/shared/src/checkers.ts | 6 +- packages/shared/src/compare.ts | 4 +- packages/shared/src/deprecate.ts | 7 +- packages/shared/src/global.ts | 2 +- packages/shared/src/string.ts | 2 +- packages/shared/src/subscribable.ts | 4 +- packages/validator/src/formats.ts | 3 +- packages/validator/src/parser.ts | 77 ++-- packages/vue/src/__tests__/field.spec.ts | 86 +++-- packages/vue/src/__tests__/form.spec.ts | 6 +- .../vue/src/__tests__/schema.json.spec.ts | 22 +- .../vue/src/__tests__/schema.markup.spec.ts | 247 ++++++------ packages/vue/src/components/ArrayField.ts | 166 ++++---- packages/vue/src/components/Field.ts | 51 +-- packages/vue/src/components/FormConsumer.ts | 36 +- packages/vue/src/components/FormProvider.ts | 17 +- packages/vue/src/components/ObjectField.ts | 168 +++++---- packages/vue/src/components/ReactiveField.ts | 215 ++++++----- packages/vue/src/components/RecursionField.ts | 357 ++++++++++-------- packages/vue/src/components/SchemaField.ts | 285 ++++++++++---- packages/vue/src/components/VoidField.ts | 62 +-- packages/vue/src/hooks/useAttach.ts | 32 +- packages/vue/src/shared/connect.ts | 144 ++++--- packages/vue/src/shared/context.ts | 15 +- packages/vue/src/shared/fragment.ts | 33 +- packages/vue/src/shared/h.ts | 35 +- packages/vue/src/types/index.ts | 49 ++- packages/vue/src/types/vue-demi.d.ts | 1 - packages/vue/src/types/vue2.ts | 1 - packages/vue/src/types/vue3.ts | 5 +- packages/vue/src/utils/getRawComponent.ts | 4 +- packages/vue/src/utils/resolveSchemaProps.ts | 4 +- scripts/build-style/buildAllStyles.ts | 34 -- scripts/build-style/index.ts | 16 +- yarn.lock | 28 ++ 136 files changed, 1669 insertions(+), 1392 deletions(-) create mode 100644 packages/antd/create-style.ts create mode 100644 packages/next/create-style.ts rename packages/next/src/form-grid/{style.scss => main.scss} (100%) diff --git a/package.json b/package.json index 019a9f92d0c..69c5e370567 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "param-case": "^3.0.4", "prettier": "^2.2.1", "pretty-format": "^24.0.0", + "pretty-quick": "^3.1.0", "raw-loader": "^4.0.0", "react": "^17.0.1", "react-dom": "^17.0.1", @@ -171,7 +172,7 @@ "git add" ], "packages/!(*vue)/**/*.md": [ - "prettier --write", + "pretty-quick --staged", "git add" ] }, diff --git a/packages/.eslintrc b/packages/.eslintrc index 009bb6e9757..e977c50d64a 100644 --- a/packages/.eslintrc +++ b/packages/.eslintrc @@ -46,7 +46,7 @@ "@typescript-eslint/array-type": 0, "@typescript-eslint/no-object-literal-type-assertion": 0, "@typescript-eslint/no-use-before-define": 0, - "@typescript-eslint/no-unused-vars": 0, + "@typescript-eslint/no-unused-vars": 1, "@typescript-eslint/no-namespace": 0, "@typescript-eslint/ban-types": 0, "@typescript-eslint/adjacent-overload-signatures": 0, diff --git a/packages/antd/build-style.ts b/packages/antd/build-style.ts index 8e3d8bf04bf..54b1dc796d9 100644 --- a/packages/antd/build-style.ts +++ b/packages/antd/build-style.ts @@ -3,11 +3,5 @@ import { build } from '../../scripts/build-style' build({ esStr: 'antd/es/', libStr: 'antd/lib/', - styleEntry: 'style.less', allStylesOutputFile: 'dist/antd.css', - // antd/es/button/style/index ===> antd/es/button/style/css - importCssCompilerToCssTransform: (v) => - v.replace(/'antd\/(es|lib)\/(.*)'/, (subStr) => - subStr.replace(/\/style\/index'$/, `/style/css'`) - ), }) diff --git a/packages/antd/create-style.ts b/packages/antd/create-style.ts new file mode 100644 index 00000000000..c8fd0266a0c --- /dev/null +++ b/packages/antd/create-style.ts @@ -0,0 +1,23 @@ +import glob from 'glob' +import path from 'path' +import fs from 'fs-extra' + +glob( + './*/style.less', + { cwd: path.resolve(__dirname, './src') }, + (err, files) => { + if (err) return console.error(err) + fs.writeFile( + path.resolve(__dirname, './src/style.ts'), + `// auto generated code +${files + .map((path) => { + return `import '${path}'\n` + }) + .join('')} + +`, + 'utf8' + ) + } +) diff --git a/packages/antd/package.json b/packages/antd/package.json index b1160e9de6b..d4266967944 100644 --- a/packages/antd/package.json +++ b/packages/antd/package.json @@ -22,7 +22,8 @@ }, "scripts": { "start": "dumi dev", - "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style", + "build": "rimraf -rf lib esm dist && npm run create:style && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style", + "create:style": "ts-node create-style", "build:style": "ts-node build-style", "build:cjs": "tsc --declaration", "build:esm": "tsc --declaration --module es2015 --outDir esm", @@ -58,4 +59,4 @@ "access": "public" }, "gitHead": "2c44ae410a73f02735c63c6430e021a50e21f3ec" -} +} \ No newline at end of file diff --git a/packages/antd/src/__builtins__/hooks/index.ts b/packages/antd/src/__builtins__/hooks/index.ts index 53d87a8aea3..cc3f1e601f5 100644 --- a/packages/antd/src/__builtins__/hooks/index.ts +++ b/packages/antd/src/__builtins__/hooks/index.ts @@ -1,2 +1,2 @@ export * from './useClickAway' -export * from './usePrefixCls' \ No newline at end of file +export * from './usePrefixCls' diff --git a/packages/antd/src/__builtins__/hooks/usePrefixCls.ts b/packages/antd/src/__builtins__/hooks/usePrefixCls.ts index 375876c1ef4..ff6074ada3b 100644 --- a/packages/antd/src/__builtins__/hooks/usePrefixCls.ts +++ b/packages/antd/src/__builtins__/hooks/usePrefixCls.ts @@ -9,4 +9,4 @@ export const usePrefixCls = ( ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext) return getPrefixCls(tag, props?.prefixCls) -} \ No newline at end of file +} diff --git a/packages/antd/src/__builtins__/index.ts b/packages/antd/src/__builtins__/index.ts index b165c0e2c8e..a46c6ca4c9a 100644 --- a/packages/antd/src/__builtins__/index.ts +++ b/packages/antd/src/__builtins__/index.ts @@ -1,2 +1,2 @@ export * from './moment' -export * from './hooks' \ No newline at end of file +export * from './hooks' diff --git a/packages/antd/src/array-base/style.ts b/packages/antd/src/array-base/style.ts index 33223b02bc5..2ef40e95201 100644 --- a/packages/antd/src/array-base/style.ts +++ b/packages/antd/src/array-base/style.ts @@ -1,3 +1,2 @@ - import 'antd/lib/button/style/index' -import './style.less' \ No newline at end of file +import './style.less' diff --git a/packages/antd/src/array-table/style.ts b/packages/antd/src/array-table/style.ts index 3ab94c76d9b..49e4a00d4b1 100644 --- a/packages/antd/src/array-table/style.ts +++ b/packages/antd/src/array-table/style.ts @@ -4,4 +4,4 @@ import 'antd/lib/select/style/index' import 'antd/lib/space/style/index' import 'antd/lib/badge/style/index' import 'antd/lib/pagination/style/index' -import './style.less' \ No newline at end of file +import './style.less' diff --git a/packages/antd/src/cascader/style.ts b/packages/antd/src/cascader/style.ts index 1bb51c23291..56cdb0607d0 100644 --- a/packages/antd/src/cascader/style.ts +++ b/packages/antd/src/cascader/style.ts @@ -1 +1 @@ -import 'antd/lib/cascader/style/index' \ No newline at end of file +import 'antd/lib/cascader/style/index' diff --git a/packages/antd/src/checkbox/style.ts b/packages/antd/src/checkbox/style.ts index 560a1c8de6f..7584e40ec74 100644 --- a/packages/antd/src/checkbox/style.ts +++ b/packages/antd/src/checkbox/style.ts @@ -1 +1 @@ -import 'antd/lib/checkbox/style/index' \ No newline at end of file +import 'antd/lib/checkbox/style/index' diff --git a/packages/antd/src/date-picker/style.ts b/packages/antd/src/date-picker/style.ts index 5567b22b4f4..33317d96994 100644 --- a/packages/antd/src/date-picker/style.ts +++ b/packages/antd/src/date-picker/style.ts @@ -1 +1 @@ -import 'antd/lib/date-picker/style/index' \ No newline at end of file +import 'antd/lib/date-picker/style/index' diff --git a/packages/antd/src/form-button-group/style.ts b/packages/antd/src/form-button-group/style.ts index fc4d5900da8..dd1ffc5c8ac 100644 --- a/packages/antd/src/form-button-group/style.ts +++ b/packages/antd/src/form-button-group/style.ts @@ -1,2 +1,2 @@ import 'antd/lib/form/style/index' -import './style.less' \ No newline at end of file +import './style.less' diff --git a/packages/antd/src/form-collapse/style.ts b/packages/antd/src/form-collapse/style.ts index 8736de15b92..fda2cfd1856 100644 --- a/packages/antd/src/form-collapse/style.ts +++ b/packages/antd/src/form-collapse/style.ts @@ -1,2 +1,2 @@ import 'antd/lib/collapse/style/index' -import 'antd/lib/badge/style/index' \ No newline at end of file +import 'antd/lib/badge/style/index' diff --git a/packages/antd/src/form-grid/style.ts b/packages/antd/src/form-grid/style.ts index 7d4db92a454..1d62fa9215a 100644 --- a/packages/antd/src/form-grid/style.ts +++ b/packages/antd/src/form-grid/style.ts @@ -1 +1 @@ -import './style.less' \ No newline at end of file +import './style.less' diff --git a/packages/antd/src/form-step/style.ts b/packages/antd/src/form-step/style.ts index 5cc5eb84fc7..3cab2015a17 100644 --- a/packages/antd/src/form-step/style.ts +++ b/packages/antd/src/form-step/style.ts @@ -1 +1 @@ -import 'antd/lib/steps/style/index' \ No newline at end of file +import 'antd/lib/steps/style/index' diff --git a/packages/antd/src/form-tab/style.ts b/packages/antd/src/form-tab/style.ts index 7395eb81e1a..a266da4ff8f 100644 --- a/packages/antd/src/form-tab/style.ts +++ b/packages/antd/src/form-tab/style.ts @@ -1,2 +1,2 @@ import 'antd/lib/tabs/style/index' -import 'antd/lib/badge/style/index' \ No newline at end of file +import 'antd/lib/badge/style/index' diff --git a/packages/antd/src/index.ts b/packages/antd/src/index.ts index 90d4602e1b4..a7e8f19d6e5 100644 --- a/packages/antd/src/index.ts +++ b/packages/antd/src/index.ts @@ -33,4 +33,4 @@ export * from './upload' export * from './preview-text' export * from './submit' export * from './reset' -export * from './editable' \ No newline at end of file +export * from './editable' diff --git a/packages/antd/src/input/style.ts b/packages/antd/src/input/style.ts index 504aecd46fe..8e56c08483b 100644 --- a/packages/antd/src/input/style.ts +++ b/packages/antd/src/input/style.ts @@ -1 +1 @@ -import 'antd/lib/input/style/index' \ No newline at end of file +import 'antd/lib/input/style/index' diff --git a/packages/antd/src/number-picker/style.ts b/packages/antd/src/number-picker/style.ts index 1f48ddc2a67..1cc7e485959 100644 --- a/packages/antd/src/number-picker/style.ts +++ b/packages/antd/src/number-picker/style.ts @@ -1 +1 @@ -import 'antd/lib/input-number/style/index' \ No newline at end of file +import 'antd/lib/input-number/style/index' diff --git a/packages/antd/src/password/style.ts b/packages/antd/src/password/style.ts index 504aecd46fe..8e56c08483b 100644 --- a/packages/antd/src/password/style.ts +++ b/packages/antd/src/password/style.ts @@ -1 +1 @@ -import 'antd/lib/input/style/index' \ No newline at end of file +import 'antd/lib/input/style/index' diff --git a/packages/antd/src/preview-text/style.ts b/packages/antd/src/preview-text/style.ts index 664ba4d4c5d..8ad50adb9e8 100644 --- a/packages/antd/src/preview-text/style.ts +++ b/packages/antd/src/preview-text/style.ts @@ -1,2 +1,2 @@ import 'antd/lib/tag/style/index' -import './style.less' \ No newline at end of file +import './style.less' diff --git a/packages/antd/src/radio/style.ts b/packages/antd/src/radio/style.ts index 5d7e6ece47d..e57168a2c3a 100644 --- a/packages/antd/src/radio/style.ts +++ b/packages/antd/src/radio/style.ts @@ -1 +1 @@ -import 'antd/lib/radio/style/index' \ No newline at end of file +import 'antd/lib/radio/style/index' diff --git a/packages/antd/src/reset/style.ts b/packages/antd/src/reset/style.ts index c1e684a7895..a7c5e0d46bf 100644 --- a/packages/antd/src/reset/style.ts +++ b/packages/antd/src/reset/style.ts @@ -1 +1 @@ -import 'antd/lib/button/style/index' \ No newline at end of file +import 'antd/lib/button/style/index' diff --git a/packages/antd/src/select/style.ts b/packages/antd/src/select/style.ts index 21ba3d978f8..91e4bafab2f 100644 --- a/packages/antd/src/select/style.ts +++ b/packages/antd/src/select/style.ts @@ -1 +1 @@ -import 'antd/lib/select/style/index' \ No newline at end of file +import 'antd/lib/select/style/index' diff --git a/packages/antd/src/space/style.ts b/packages/antd/src/space/style.ts index c514cf5adf3..5e4337d222e 100644 --- a/packages/antd/src/space/style.ts +++ b/packages/antd/src/space/style.ts @@ -1 +1 @@ -import 'antd/lib/space/style/index' \ No newline at end of file +import 'antd/lib/space/style/index' diff --git a/packages/antd/src/style.ts b/packages/antd/src/style.ts index 9281331797b..246fcad1336 100644 --- a/packages/antd/src/style.ts +++ b/packages/antd/src/style.ts @@ -1,32 +1,13 @@ -import './input/style' -import './number-picker/style' -import './password/style' -import './preview-text/style' -import './radio/style' -import './reset/style' -import './select/style' -import './submit/style' -import './switch/style' -import './time-picker/style' -import './transfer/style' -import './tree-select/style' -import './array-base/style' -import './array-cards/style' -import './array-collapse/style' -import './array-items/style' -import './array-tabs/style' -import './array-table/style' -import './cascader/style' -import './space/style' -import './checkbox/style' -import './date-picker/style' -import './editable/style' -import './form-button-group/style' -import './form-collapse/style' -import './form-dialog/style' -import './form-drawer/style' -import './form-item/style' -import './form-step/style' -import './form-grid/style' -import './form-tab/style' -import './upload/style' +// auto generated code +import './array-base/style.less' +import './array-cards/style.less' +import './array-collapse/style.less' +import './array-items/style.less' +import './array-table/style.less' +import './editable/style.less' +import './form-button-group/style.less' +import './form-grid/style.less' +import './form-item/style.less' +import './form-layout/style.less' +import './form/style.less' +import './preview-text/style.less' diff --git a/packages/antd/src/switch/style.ts b/packages/antd/src/switch/style.ts index 1ea73132afb..c209b948edd 100644 --- a/packages/antd/src/switch/style.ts +++ b/packages/antd/src/switch/style.ts @@ -1 +1 @@ -import 'antd/lib/switch/style/index' \ No newline at end of file +import 'antd/lib/switch/style/index' diff --git a/packages/antd/src/time-picker/style.ts b/packages/antd/src/time-picker/style.ts index 56b514fab20..d5fd70bd6a4 100644 --- a/packages/antd/src/time-picker/style.ts +++ b/packages/antd/src/time-picker/style.ts @@ -1 +1 @@ -import 'antd/lib/time-picker/style/index' \ No newline at end of file +import 'antd/lib/time-picker/style/index' diff --git a/packages/antd/src/transfer/style.ts b/packages/antd/src/transfer/style.ts index ef19e444ac6..14ab1ef0217 100644 --- a/packages/antd/src/transfer/style.ts +++ b/packages/antd/src/transfer/style.ts @@ -1 +1 @@ -import 'antd/lib/transfer/style/index' \ No newline at end of file +import 'antd/lib/transfer/style/index' diff --git a/packages/antd/src/tree-select/style.ts b/packages/antd/src/tree-select/style.ts index 6176e970320..757092f1072 100644 --- a/packages/antd/src/tree-select/style.ts +++ b/packages/antd/src/tree-select/style.ts @@ -1 +1 @@ -import 'antd/lib/tree-select/style/index' \ No newline at end of file +import 'antd/lib/tree-select/style/index' diff --git a/packages/antd/src/upload/placeholder.ts b/packages/antd/src/upload/placeholder.ts index 14c2d594103..a699b0856af 100644 --- a/packages/antd/src/upload/placeholder.ts +++ b/packages/antd/src/upload/placeholder.ts @@ -1,62 +1,62 @@ export const UPLOAD_PLACEHOLDER = [ { ext: /\.docx?$/i, - icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png', }, { ext: /\.pptx?$/i, - icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png', }, { ext: /\.jpe?g$/i, - icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.pdf$/i, - icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.png$/i, - icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.eps$/i, - icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png', }, { ext: /\.ai$/i, - icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png', }, { ext: /\.gif$/i, - icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png', }, { ext: /\.svg$/i, - icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png', }, { ext: /\.xlsx?$/i, - icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png', }, { ext: /\.psd?$/i, - icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png', }, { ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i, - icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png', }, { ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)$/i, - icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i, - icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png', }, { ext: /\.[^.]+$/i, - icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png' - } -] \ No newline at end of file + icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png', + }, +] diff --git a/packages/antd/src/upload/style.ts b/packages/antd/src/upload/style.ts index 0fd63d0c7b6..293d053ad6a 100644 --- a/packages/antd/src/upload/style.ts +++ b/packages/antd/src/upload/style.ts @@ -1 +1 @@ -import 'antd/lib/upload/style/index' \ No newline at end of file +import 'antd/lib/upload/style/index' diff --git a/packages/core/src/__tests__/array.spec.ts b/packages/core/src/__tests__/array.spec.ts index 9e454445a35..c7b239a1c3d 100644 --- a/packages/core/src/__tests__/array.spec.ts +++ b/packages/core/src/__tests__/array.spec.ts @@ -78,8 +78,8 @@ test('array field children state exchanges', () => { }) ) expect(array.value).toEqual([{ value: 11 }, { value: 22 }]) - expect(form.query('array.0.value').get("value")).toEqual(11) - expect(form.query('array.1.value').get("value")).toEqual(22) + expect(form.query('array.0.value').get('value')).toEqual(11) + expect(form.query('array.1.value').get('value')).toEqual(22) expect(Object.keys(form.fields).sort()).toEqual([ 'array', 'array.0.value', @@ -88,8 +88,8 @@ test('array field children state exchanges', () => { ]) array.pop() expect(array.value).toEqual([{ value: 11 }]) - expect(form.query('array.0.value').get("value")).toEqual(11) - expect(form.query('array.1.value').get("value")).toBeUndefined() + expect(form.query('array.0.value').get('value')).toEqual(11) + expect(form.query('array.1.value').get('value')).toBeUndefined() array.unshift({ value: 33 }) attach( form.createField({ @@ -104,12 +104,12 @@ test('array field children state exchanges', () => { }) ) expect(array.value).toEqual([{ value: 33 }, { value: 11 }]) - expect(form.query('array.0.value').get("value")).toEqual(33) - expect(form.query('array.1.value').get("value")).toEqual(11) + expect(form.query('array.0.value').get('value')).toEqual(33) + expect(form.query('array.1.value').get('value')).toEqual(11) array.remove(1) expect(array.value).toEqual([{ value: 33 }]) - expect(form.query('array.0.value').get("value")).toEqual(33) - expect(form.query('array.1.value').get("value")).toBeUndefined() + expect(form.query('array.0.value').get('value')).toEqual(33) + expect(form.query('array.1.value').get('value')).toBeUndefined() array.insert(1, { value: 44 }, { value: 55 }) attach( form.createField({ @@ -124,19 +124,19 @@ test('array field children state exchanges', () => { }) ) expect(array.value).toEqual([{ value: 33 }, { value: 44 }, { value: 55 }]) - expect(form.query('array.0.value').get("value")).toEqual(33) - expect(form.query('array.1.value').get("value")).toEqual(44) - expect(form.query('array.2.value').get("value")).toEqual(55) + expect(form.query('array.0.value').get('value')).toEqual(33) + expect(form.query('array.1.value').get('value')).toEqual(44) + expect(form.query('array.2.value').get('value')).toEqual(55) array.move(0, 2) expect(array.value).toEqual([{ value: 44 }, { value: 55 }, { value: 33 }]) - expect(form.query('array.0.value').get("value")).toEqual(44) - expect(form.query('array.1.value').get("value")).toEqual(55) - expect(form.query('array.2.value').get("value")).toEqual(33) + expect(form.query('array.0.value').get('value')).toEqual(44) + expect(form.query('array.1.value').get('value')).toEqual(55) + expect(form.query('array.2.value').get('value')).toEqual(33) array.move(2, 0) expect(array.value).toEqual([{ value: 33 }, { value: 44 }, { value: 55 }]) - expect(form.query('array.0.value').get("value")).toEqual(33) - expect(form.query('array.1.value').get("value")).toEqual(44) - expect(form.query('array.2.value').get("value")).toEqual(55) + expect(form.query('array.0.value').get('value')).toEqual(33) + expect(form.query('array.1.value').get('value')).toEqual(44) + expect(form.query('array.2.value').get('value')).toEqual(55) }) test('void children', () => { diff --git a/packages/core/src/__tests__/form.spec.ts b/packages/core/src/__tests__/form.spec.ts index 51c291bc703..4095ce7eab2 100644 --- a/packages/core/src/__tests__/form.spec.ts +++ b/packages/core/src/__tests__/form.spec.ts @@ -400,7 +400,7 @@ test('validate/valid/invalid/errors/warnings/successes/clearErrors/clearWarnings ) try { await form.validate() - } catch { } + } catch {} expect(form.invalid).toBeTruthy() expect(form.valid).toBeFalsy() expect(form.errors).toEqual([ @@ -494,7 +494,7 @@ test('validate/valid/invalid/errors/warnings/successes/clearErrors/clearWarnings await bb.onInput('') try { await form.validate() - } catch { } + } catch {} expect(form.errors).toEqual([ { type: 'error', @@ -616,7 +616,7 @@ test('validate/valid/invalid/errors/warnings/successes/clearErrors/clearWarnings form.clearWarnings() try { await form.validate('aa') - } catch { } + } catch {} expect( form.queryFeedbacks({ type: 'error', @@ -624,7 +624,7 @@ test('validate/valid/invalid/errors/warnings/successes/clearErrors/clearWarnings ).toEqual(1) try { await form.validate('*') - } catch { } + } catch {} expect( form.queryFeedbacks({ type: 'error', @@ -797,7 +797,7 @@ test('reset', async () => { expect(form.values.aa).toEqual('xxxxx') try { await form.reset() - } catch { } + } catch {} expect(form.valid).toBeTruthy() expect(form.values.aa).toEqual(123) expect(field.value).toEqual(123) @@ -814,7 +814,7 @@ test('reset', async () => { await form.reset('*', { validate: true, }) - } catch { } + } catch {} expect(form.valid).toBeFalsy() expect(form.values.aa).toEqual(123) expect(field.value).toEqual(123) @@ -826,7 +826,7 @@ test('reset', async () => { await form.reset('*', { forceClear: true, }) - } catch { } + } catch {} expect(form.valid).toBeTruthy() expect(form.values.aa).toBeUndefined() expect(field.value).toBeUndefined() @@ -838,7 +838,7 @@ test('reset', async () => { await form.reset('aa', { forceClear: true, }) - } catch { } + } catch {} expect(form.valid).toBeTruthy() expect(form.values.aa).toBeUndefined() expect(field.value).toBeUndefined() @@ -848,8 +848,8 @@ test('reset', async () => { test('devtools', () => { window['__FORMILY_DEV_TOOLS_HOOK__'] = { - inject() { }, - unmount() { }, + inject() {}, + unmount() {}, } const form = attach(createForm()) form.onUnmount() @@ -925,13 +925,12 @@ test('initialValues merge values before create field', () => { expect(arr_0_aa.value).toEqual('321') }) - test('initialValues merge values after create field', () => { const form = attach(createForm()) const aa = attach( form.createArrayField({ name: 'aa', - initialValue: '111' + initialValue: '111', }) ) const array = attach( @@ -962,10 +961,10 @@ test('remove property of form values with undefined value', () => { }) ) expect(form.values).toMatchObject({ aaa: 123 }) - field.display = "none"; - expect(form.values.hasOwnProperty("aaa")).toBeFalsy() - field.display = "visible"; - expect(form.values.hasOwnProperty("aaa")).toBeTruthy() - field.setValue(undefined); - expect(form.values.hasOwnProperty("aaa")).toBeTruthy() + field.display = 'none' + expect(form.values.hasOwnProperty('aaa')).toBeFalsy() + field.display = 'visible' + expect(form.values.hasOwnProperty('aaa')).toBeTruthy() + field.setValue(undefined) + expect(form.values.hasOwnProperty('aaa')).toBeTruthy() }) diff --git a/packages/core/src/__tests__/shared.ts b/packages/core/src/__tests__/shared.ts index 7136241a74a..e363583f699 100644 --- a/packages/core/src/__tests__/shared.ts +++ b/packages/core/src/__tests__/shared.ts @@ -6,4 +6,4 @@ export const attach = void }>(target: T): T => { export const sleep = (duration = 100) => new Promise((resolve) => { setTimeout(resolve, duration) - }) \ No newline at end of file + }) diff --git a/packages/core/src/effects/index.ts b/packages/core/src/effects/index.ts index a4c2db84891..9e9a8a1e06b 100644 --- a/packages/core/src/effects/index.ts +++ b/packages/core/src/effects/index.ts @@ -1,2 +1,2 @@ export * from './onFormEffects' -export * from './onFieldEffects' \ No newline at end of file +export * from './onFieldEffects' diff --git a/packages/core/src/effects/onFieldEffects.ts b/packages/core/src/effects/onFieldEffects.ts index 8851c9b1f1d..69a031527a9 100644 --- a/packages/core/src/effects/onFieldEffects.ts +++ b/packages/core/src/effects/onFieldEffects.ts @@ -16,16 +16,19 @@ function createFieldEffect( ) { return createEffectHook( type, - (field: Result, form: Form) => ( - pattern: FormPathPattern, - callback: (field: Result, form: Form) => void - ) => { - if (FormPath.parse(pattern).matchAliasGroup(field.address, field.path)) { - batch(() => { - callback(field, form) - }) + (field: Result, form: Form) => + ( + pattern: FormPathPattern, + callback: (field: Result, form: Form) => void + ) => { + if ( + FormPath.parse(pattern).matchAliasGroup(field.address, field.path) + ) { + batch(() => { + callback(field, form) + }) + } } - } ) } const _onFieldInit = createFieldEffect(LifeCycleTypes.ON_FIELD_INIT) diff --git a/packages/core/src/shared/externals.ts b/packages/core/src/shared/externals.ts index 5a5ceaea7c5..162498a1b89 100644 --- a/packages/core/src/shared/externals.ts +++ b/packages/core/src/shared/externals.ts @@ -31,9 +31,7 @@ import { isVoidFieldState, } from './checkers' -const createForm = ( - options?: IFormProps -) => { +const createForm = (options?: IFormProps) => { return new Form(options) } diff --git a/packages/core/src/shared/index.ts b/packages/core/src/shared/index.ts index 3128f341d43..fe59b913e56 100644 --- a/packages/core/src/shared/index.ts +++ b/packages/core/src/shared/index.ts @@ -1,5 +1,4 @@ - export * from './constants' export * from './externals' export * from './internals' -export * from './effectbox' \ No newline at end of file +export * from './effectbox' diff --git a/packages/next/build-style.ts b/packages/next/build-style.ts index e8f3209a730..221fa66cfdd 100644 --- a/packages/next/build-style.ts +++ b/packages/next/build-style.ts @@ -3,11 +3,5 @@ import { build } from '../../scripts/build-style' build({ esStr: '@alifd/next/es/', libStr: '@alifd/next/lib/', - styleEntry: 'main.scss', allStylesOutputFile: 'dist/next.css', - // antd/es/button/style/index ===> antd/es/button/style/css - importCssCompilerToCssTransform: (v) => - v.replace(/'@alifd\/next\/(es|lib)\/(.*)'/g, (subStr) => - subStr.replace(/\/style'$/, `/index.css'`) - ), }) diff --git a/packages/next/create-style.ts b/packages/next/create-style.ts new file mode 100644 index 00000000000..7851ebc3360 --- /dev/null +++ b/packages/next/create-style.ts @@ -0,0 +1,23 @@ +import glob from 'glob' +import path from 'path' +import fs from 'fs-extra' + +glob( + './*/main.scss', + { cwd: path.resolve(__dirname, './src') }, + (err, files) => { + if (err) return console.error(err) + fs.writeFile( + path.resolve(__dirname, './src/style.ts'), + `// auto generated code +${files + .map((path) => { + return `import '${path}'\n` + }) + .join('')} + +`, + 'utf8' + ) + } +) diff --git a/packages/next/package.json b/packages/next/package.json index ca1b2799b0d..d19399feb76 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -22,7 +22,8 @@ }, "scripts": { "start": "dumi dev", - "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style", + "build": "rimraf -rf lib esm dist && npm run create:style && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:style", + "create:style": "ts-node create-style", "build:style": "ts-node build-style", "build:cjs": "tsc --declaration", "build:esm": "tsc --declaration --module es2015 --outDir esm", @@ -58,4 +59,4 @@ "access": "public" }, "gitHead": "2c44ae410a73f02735c63c6430e021a50e21f3ec" -} +} \ No newline at end of file diff --git a/packages/next/src/__builtins__/hooks/index.ts b/packages/next/src/__builtins__/hooks/index.ts index 53d87a8aea3..cc3f1e601f5 100644 --- a/packages/next/src/__builtins__/hooks/index.ts +++ b/packages/next/src/__builtins__/hooks/index.ts @@ -1,2 +1,2 @@ export * from './useClickAway' -export * from './usePrefixCls' \ No newline at end of file +export * from './usePrefixCls' diff --git a/packages/next/src/__builtins__/index.ts b/packages/next/src/__builtins__/index.ts index ab153d9aed3..a0e66ea7a54 100644 --- a/packages/next/src/__builtins__/index.ts +++ b/packages/next/src/__builtins__/index.ts @@ -2,4 +2,4 @@ export * from './moment' export * from './hooks' export * from './toArray' export * from './mapStatus' -export * from './mapSize' \ No newline at end of file +export * from './mapSize' diff --git a/packages/next/src/__builtins__/mapSize.ts b/packages/next/src/__builtins__/mapSize.ts index b1ced0e1191..0b73f0c695a 100644 --- a/packages/next/src/__builtins__/mapSize.ts +++ b/packages/next/src/__builtins__/mapSize.ts @@ -1,8 +1,6 @@ import { useFormLayout, useFormShallowLayout } from '../form-layout' -export const mapSize = ( - props: any -) => { +export const mapSize = (props: any) => { const layout = { ...useFormShallowLayout(), ...useFormLayout() } const takeSize = () => { return layout.size === 'default' ? 'medium' : layout.size diff --git a/packages/next/src/__builtins__/toArray.ts b/packages/next/src/__builtins__/toArray.ts index 3a8e3d81769..d8509126b36 100644 --- a/packages/next/src/__builtins__/toArray.ts +++ b/packages/next/src/__builtins__/toArray.ts @@ -1,29 +1,29 @@ -import React from 'react'; -import { isFragment } from 'react-is'; +import React from 'react' +import { isFragment } from 'react-is' export interface toArrayOption { - keepEmpty?: boolean; + keepEmpty?: boolean } export function toArray( children: React.ReactNode, - option: toArrayOption = {}, + option: toArrayOption = {} ): React.ReactElement[] { - let ret: React.ReactElement[] = []; + let ret: React.ReactElement[] = [] React.Children.forEach(children, (child: any) => { if ((child === undefined || child === null) && !option.keepEmpty) { - return; + return } if (Array.isArray(child)) { - ret = ret.concat(toArray(child)); + ret = ret.concat(toArray(child)) } else if (isFragment(child) && child.props) { - ret = ret.concat(toArray(child.props.children, option)); + ret = ret.concat(toArray(child.props.children, option)) } else { - ret.push(child); + ret.push(child) } - }); + }) - return ret; -} \ No newline at end of file + return ret +} diff --git a/packages/next/src/array-base/style.ts b/packages/next/src/array-base/style.ts index d59b31f7f20..8d9e4bb04fa 100644 --- a/packages/next/src/array-base/style.ts +++ b/packages/next/src/array-base/style.ts @@ -1,3 +1,2 @@ - import '@alifd/next/lib/button/style' -import './main.scss' \ No newline at end of file +import './main.scss' diff --git a/packages/next/src/cascader/style.ts b/packages/next/src/cascader/style.ts index c36dd1b9e98..e8d19aad4fb 100644 --- a/packages/next/src/cascader/style.ts +++ b/packages/next/src/cascader/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/cascader/style' \ No newline at end of file +import '@alifd/next/lib/cascader/style' diff --git a/packages/next/src/checkbox/style.ts b/packages/next/src/checkbox/style.ts index fed7a2bf291..89a77cd052f 100644 --- a/packages/next/src/checkbox/style.ts +++ b/packages/next/src/checkbox/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/checkbox/style' \ No newline at end of file +import '@alifd/next/lib/checkbox/style' diff --git a/packages/next/src/date-picker/style.ts b/packages/next/src/date-picker/style.ts index 5f4e271b905..84a96b37b8c 100644 --- a/packages/next/src/date-picker/style.ts +++ b/packages/next/src/date-picker/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/date-picker/style' \ No newline at end of file +import '@alifd/next/lib/date-picker/style' diff --git a/packages/next/src/form-button-group/main.scss b/packages/next/src/form-button-group/main.scss index 194c28b7ad4..35656452f14 100644 --- a/packages/next/src/form-button-group/main.scss +++ b/packages/next/src/form-button-group/main.scss @@ -6,9 +6,11 @@ $btn-group-prefix-cls: '#{$css-prefix}formily-button-group'; .#{$btn-group-prefix-cls}-sticky { padding: 10px 0; border-top: 1px solid #eee; + z-index: 999; &-inner { display: flex; + .#{$css-prefix}formily-item { flex: 2; } diff --git a/packages/next/src/form-button-group/style.ts b/packages/next/src/form-button-group/style.ts index d455097ba98..ed3677f126f 100644 --- a/packages/next/src/form-button-group/style.ts +++ b/packages/next/src/form-button-group/style.ts @@ -1,2 +1,2 @@ import '@alifd/next/lib/form/style' -import './main.scss' \ No newline at end of file +import './main.scss' diff --git a/packages/next/src/form-grid/style.scss b/packages/next/src/form-grid/main.scss similarity index 100% rename from packages/next/src/form-grid/style.scss rename to packages/next/src/form-grid/main.scss diff --git a/packages/next/src/form-grid/style.ts b/packages/next/src/form-grid/style.ts index 6a03d0c74c3..87c1bbd8c51 100644 --- a/packages/next/src/form-grid/style.ts +++ b/packages/next/src/form-grid/style.ts @@ -1 +1 @@ -import './style.scss' \ No newline at end of file +import './main.scss' diff --git a/packages/next/src/form-item/style.ts b/packages/next/src/form-item/style.ts index d455097ba98..ed3677f126f 100644 --- a/packages/next/src/form-item/style.ts +++ b/packages/next/src/form-item/style.ts @@ -1,2 +1,2 @@ import '@alifd/next/lib/form/style' -import './main.scss' \ No newline at end of file +import './main.scss' diff --git a/packages/next/src/form-step/style.ts b/packages/next/src/form-step/style.ts index 4aed08cc027..123d7d14c7c 100644 --- a/packages/next/src/form-step/style.ts +++ b/packages/next/src/form-step/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/step/style' \ No newline at end of file +import '@alifd/next/lib/step/style' diff --git a/packages/next/src/form-tab/style.ts b/packages/next/src/form-tab/style.ts index 66d765121a0..1fe103e58fc 100644 --- a/packages/next/src/form-tab/style.ts +++ b/packages/next/src/form-tab/style.ts @@ -1,2 +1,2 @@ import '@alifd/next/lib/tab/style' -import '@alifd/next/lib/badge/style' \ No newline at end of file +import '@alifd/next/lib/badge/style' diff --git a/packages/next/src/input/style.ts b/packages/next/src/input/style.ts index 59a52ce2756..9bacec5d3c8 100644 --- a/packages/next/src/input/style.ts +++ b/packages/next/src/input/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/input/style' \ No newline at end of file +import '@alifd/next/lib/input/style' diff --git a/packages/next/src/password/style.ts b/packages/next/src/password/style.ts index 59a52ce2756..9bacec5d3c8 100644 --- a/packages/next/src/password/style.ts +++ b/packages/next/src/password/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/input/style' \ No newline at end of file +import '@alifd/next/lib/input/style' diff --git a/packages/next/src/preview-text/style.ts b/packages/next/src/preview-text/style.ts index a138522c346..712178aa48d 100644 --- a/packages/next/src/preview-text/style.ts +++ b/packages/next/src/preview-text/style.ts @@ -1,2 +1,2 @@ import '@alifd/next/lib/tag/style' -import './main.scss' \ No newline at end of file +import './main.scss' diff --git a/packages/next/src/radio/style.ts b/packages/next/src/radio/style.ts index cc79e694a1b..9deac2efc2d 100644 --- a/packages/next/src/radio/style.ts +++ b/packages/next/src/radio/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/radio/style' \ No newline at end of file +import '@alifd/next/lib/radio/style' diff --git a/packages/next/src/reset/style.ts b/packages/next/src/reset/style.ts index 6a0c6e7490f..1e7a7e46bc8 100644 --- a/packages/next/src/reset/style.ts +++ b/packages/next/src/reset/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/button/style' \ No newline at end of file +import '@alifd/next/lib/button/style' diff --git a/packages/next/src/select/style.ts b/packages/next/src/select/style.ts index ff0e29aa46a..4f7bf477296 100644 --- a/packages/next/src/select/style.ts +++ b/packages/next/src/select/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/select/style' \ No newline at end of file +import '@alifd/next/lib/select/style' diff --git a/packages/next/src/space/style.ts b/packages/next/src/space/style.ts index f2919fdf670..d7b93271825 100644 --- a/packages/next/src/space/style.ts +++ b/packages/next/src/space/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/box/style' \ No newline at end of file +import '@alifd/next/lib/box/style' diff --git a/packages/next/src/style.ts b/packages/next/src/style.ts index 4df57532983..98c75070b12 100644 --- a/packages/next/src/style.ts +++ b/packages/next/src/style.ts @@ -1,30 +1,13 @@ -import './input/style' -import './number-picker/style' -import './password/style' -import './preview-text/style' -import './radio/style' -import './reset/style' -import './select/style' -import './submit/style' -import './switch/style' -import './time-picker/style' -import './transfer/style' -import './tree-select/style' -import './array-base/style' -import './array-cards/style' -import './array-items/style' -import './array-table/style' -import './cascader/style' -import './space/style' -import './checkbox/style' -import './date-picker/style' -import './editable/style' -import './form-button-group/style' -import './form-collapse/style' -import './form-dialog/style' -import './form-drawer/style' -import './form-item/style' -import './form-grid/style' -import './form-step/style' -import './form-tab/style' -import './upload/style' +// auto generated code +import './array-base/main.scss' +import './array-cards/main.scss' +import './array-items/main.scss' +import './array-table/main.scss' +import './editable/main.scss' +import './form-button-group/main.scss' +import './form-grid/main.scss' +import './form-item/main.scss' +import './form-layout/main.scss' +import './form/main.scss' +import './preview-text/main.scss' +import './upload/main.scss' diff --git a/packages/next/src/switch/style.ts b/packages/next/src/switch/style.ts index b1d0227ea2a..b3c67ea0cd0 100644 --- a/packages/next/src/switch/style.ts +++ b/packages/next/src/switch/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/switch/style' \ No newline at end of file +import '@alifd/next/lib/switch/style' diff --git a/packages/next/src/time-picker/style.ts b/packages/next/src/time-picker/style.ts index 3c904c4e82d..7b80af0a0a1 100644 --- a/packages/next/src/time-picker/style.ts +++ b/packages/next/src/time-picker/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/time-picker/style' \ No newline at end of file +import '@alifd/next/lib/time-picker/style' diff --git a/packages/next/src/transfer/style.ts b/packages/next/src/transfer/style.ts index c773ca0ff4e..861299409bd 100644 --- a/packages/next/src/transfer/style.ts +++ b/packages/next/src/transfer/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/transfer/style' \ No newline at end of file +import '@alifd/next/lib/transfer/style' diff --git a/packages/next/src/tree-select/style.ts b/packages/next/src/tree-select/style.ts index 4460f5ebcb5..8581159c26b 100644 --- a/packages/next/src/tree-select/style.ts +++ b/packages/next/src/tree-select/style.ts @@ -1 +1 @@ -import '@alifd/next/lib/tree-select/style' \ No newline at end of file +import '@alifd/next/lib/tree-select/style' diff --git a/packages/next/src/upload/placeholder.ts b/packages/next/src/upload/placeholder.ts index 14c2d594103..a699b0856af 100644 --- a/packages/next/src/upload/placeholder.ts +++ b/packages/next/src/upload/placeholder.ts @@ -1,62 +1,62 @@ export const UPLOAD_PLACEHOLDER = [ { ext: /\.docx?$/i, - icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png', }, { ext: /\.pptx?$/i, - icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png', }, { ext: /\.jpe?g$/i, - icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.pdf$/i, - icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.png$/i, - icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.eps$/i, - icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png', }, { ext: /\.ai$/i, - icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png', }, { ext: /\.gif$/i, - icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png', }, { ext: /\.svg$/i, - icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png', }, { ext: /\.xlsx?$/i, - icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png', }, { ext: /\.psd?$/i, - icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png', }, { ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i, - icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png', }, { ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)$/i, - icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png', }, { ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i, - icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png' + icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png', }, { ext: /\.[^.]+$/i, - icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png' - } -] \ No newline at end of file + icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png', + }, +] diff --git a/packages/next/src/upload/style.ts b/packages/next/src/upload/style.ts index 1fbb779c9e1..7deb50a2ab4 100644 --- a/packages/next/src/upload/style.ts +++ b/packages/next/src/upload/style.ts @@ -1,2 +1,2 @@ import '@alifd/next/lib/upload/style' -import './main.scss' \ No newline at end of file +import './main.scss' diff --git a/packages/path/src/__tests__/accessor.spec.ts b/packages/path/src/__tests__/accessor.spec.ts index 8a23d03e05e..b5385a81014 100644 --- a/packages/path/src/__tests__/accessor.spec.ts +++ b/packages/path/src/__tests__/accessor.spec.ts @@ -200,10 +200,11 @@ test('getIn with a.b.c.[aaa,bbb]', () => { test('setIn with a.b.c.[aaa,bbb] source has extra property', () => { expect( - Path.setIn({ a: { b: { c: { kkk: 'ddd' } } } }, 'a.b.c.[aaa,bbb]', [ - 123, - 321, - ]) + Path.setIn( + { a: { b: { c: { kkk: 'ddd' } } } }, + 'a.b.c.[aaa,bbb]', + [123, 321] + ) ).toEqual({ a: { b: { c: { aaa: 123, bbb: 321, kkk: 'ddd' } } } }) }) diff --git a/packages/path/src/contexts.ts b/packages/path/src/contexts.ts index bef5f30bdc0..d57958b1d53 100644 --- a/packages/path/src/contexts.ts +++ b/packages/path/src/contexts.ts @@ -1,23 +1,23 @@ -export type Context = { - flag : string, - [key : string] : any +export type Context = { + flag: string + [key: string]: any } -const ContextType = (flag: string, props?: any) : Context => { - return { - flag, - ...props - } +const ContextType = (flag: string, props?: any): Context => { + return { + flag, + ...props, + } } -export const bracketContext = ContextType("[]") +export const bracketContext = ContextType('[]') -export const bracketArrayContext = ContextType("[\\d]") +export const bracketArrayContext = ContextType('[\\d]') -export const bracketDContext = ContextType("[[]]") +export const bracketDContext = ContextType('[[]]') -export const parenContext = ContextType("()") +export const parenContext = ContextType('()') -export const braceContext = ContextType("{}") +export const braceContext = ContextType('{}') -export const destructorContext = ContextType("{x}") +export const destructorContext = ContextType('{x}') diff --git a/packages/path/src/destructor.ts b/packages/path/src/destructor.ts index 296e65440c5..6047dec979f 100644 --- a/packages/path/src/destructor.ts +++ b/packages/path/src/destructor.ts @@ -5,7 +5,7 @@ import { isArrayPattern, isObjectPattern, isIdentifier, - isDestructorExpression + isDestructorExpression, } from './types' import { isNum } from './shared' @@ -32,9 +32,9 @@ export const parseDestructorRules = (node: Node): DestrcutorRules => { const rules = [] if (isObjectPattern(node)) { let index = 0 - node.properties.forEach(child => { + node.properties.forEach((child) => { rules[index] = { - path: [] + path: [], } rules[index].key = child.key.value rules[index].path.push(child.key.value) @@ -44,14 +44,14 @@ export const parseDestructorRules = (node: Node): DestrcutorRules => { const basePath = rules[index].path const childRules = parseDestructorRules(child.value as Node) let k = index - childRules.forEach(rule => { + childRules.forEach((rule) => { if (rules[k]) { rules[k].key = rule.key rules[k].path = basePath.concat(rule.path) } else { rules[k] = { key: rule.key, - path: basePath.concat(rule.path) + path: basePath.concat(rule.path), } } k++ @@ -67,7 +67,7 @@ export const parseDestructorRules = (node: Node): DestrcutorRules => { let index = 0 node.elements.forEach((child, key) => { rules[index] = { - path: [] + path: [], } rules[index].key = key rules[index].path.push(key) @@ -77,14 +77,14 @@ export const parseDestructorRules = (node: Node): DestrcutorRules => { const basePath = rules[index].path const childRules = parseDestructorRules(child as Node) let k = index - childRules.forEach(rule => { + childRules.forEach((rule) => { if (rules[k]) { rules[k].key = rule.key rules[k].path = basePath.concat(rule.path) } else { rules[k] = { key: rule.key, - path: basePath.concat(rule.path) + path: basePath.concat(rule.path), } } k++ diff --git a/packages/path/src/lru.ts b/packages/path/src/lru.ts index 2b6e1b4d2e7..7bd9faa10bc 100644 --- a/packages/path/src/lru.ts +++ b/packages/path/src/lru.ts @@ -48,7 +48,7 @@ function Entry(key: any, value: any) { this[OLDER] = undefined } -LRUMap.prototype._markEntryAsUsed = function(entry: any) { +LRUMap.prototype._markEntryAsUsed = function (entry: any) { if (entry === this.newest) { // Already the most recenlty used entry, so no need to update the list return @@ -74,7 +74,7 @@ LRUMap.prototype._markEntryAsUsed = function(entry: any) { this.newest = entry } -LRUMap.prototype.assign = function(entries: any) { +LRUMap.prototype.assign = function (entries: any) { let entry: any let limit = this.limit || Number.MAX_VALUE this._keymap.clear() @@ -97,7 +97,7 @@ LRUMap.prototype.assign = function(entries: any) { this.size = this._keymap.size } -LRUMap.prototype.get = function(key: any) { +LRUMap.prototype.get = function (key: any) { // First, find our cache entry const entry = this._keymap.get(key) if (!entry) { @@ -108,7 +108,7 @@ LRUMap.prototype.get = function(key: any) { return entry.value } -LRUMap.prototype.set = function(key: any, value: any) { +LRUMap.prototype.set = function (key: any, value: any) { let entry = this._keymap.get(key) if (entry) { @@ -141,7 +141,7 @@ LRUMap.prototype.set = function(key: any, value: any) { return this } -LRUMap.prototype.shift = function() { +LRUMap.prototype.shift = function () { // todo: handle special case when limit == 1 const entry = this.oldest if (entry) { @@ -167,16 +167,16 @@ LRUMap.prototype.shift = function() { // Following code is optional and can be removed without breaking the core // functionality. -LRUMap.prototype.find = function(key: any) { +LRUMap.prototype.find = function (key: any) { const e = this._keymap.get(key) return e ? e.value : undefined } -LRUMap.prototype.has = function(key: any) { +LRUMap.prototype.has = function (key: any) { return this._keymap.has(key) } -LRUMap.prototype.delete = function(key: any) { +LRUMap.prototype.delete = function (key: any) { const entry = this._keymap.get(key) if (!entry) { return @@ -205,7 +205,7 @@ LRUMap.prototype.delete = function(key: any) { return entry.value } -LRUMap.prototype.clear = function() { +LRUMap.prototype.clear = function () { // Not clearing links should be safe, as we don't expose live links to user this.oldest = this.newest = undefined this.size = 0 @@ -215,10 +215,10 @@ LRUMap.prototype.clear = function() { function EntryIterator(oldestEntry: any) { this.entry = oldestEntry } -EntryIterator.prototype[Symbol.iterator] = function() { +EntryIterator.prototype[Symbol.iterator] = function () { return this } -EntryIterator.prototype.next = function() { +EntryIterator.prototype.next = function () { const ent = this.entry if (ent) { this.entry = ent[NEWER] @@ -231,10 +231,10 @@ EntryIterator.prototype.next = function() { function KeyIterator(oldestEntry) { this.entry = oldestEntry } -KeyIterator.prototype[Symbol.iterator] = function() { +KeyIterator.prototype[Symbol.iterator] = function () { return this } -KeyIterator.prototype.next = function() { +KeyIterator.prototype.next = function () { const ent = this.entry if (ent) { this.entry = ent[NEWER] @@ -247,10 +247,10 @@ KeyIterator.prototype.next = function() { function ValueIterator(oldestEntry) { this.entry = oldestEntry } -ValueIterator.prototype[Symbol.iterator] = function() { +ValueIterator.prototype[Symbol.iterator] = function () { return this } -ValueIterator.prototype.next = function() { +ValueIterator.prototype.next = function () { const ent = this.entry if (ent) { this.entry = ent[NEWER] @@ -260,23 +260,23 @@ ValueIterator.prototype.next = function() { } } -LRUMap.prototype.keys = function() { +LRUMap.prototype.keys = function () { return new KeyIterator(this.oldest) } -LRUMap.prototype.values = function() { +LRUMap.prototype.values = function () { return new ValueIterator(this.oldest) } -LRUMap.prototype.entries = function() { +LRUMap.prototype.entries = function () { return this } -LRUMap.prototype[Symbol.iterator] = function() { +LRUMap.prototype[Symbol.iterator] = function () { return new EntryIterator(this.oldest) } -LRUMap.prototype.forEach = function( +LRUMap.prototype.forEach = function ( fun: (value: any, key: any, ctx: object) => void, thisObj: any ) { @@ -291,7 +291,7 @@ LRUMap.prototype.forEach = function( } /** Returns a JSON (array) representation */ -LRUMap.prototype.toJSON = function() { +LRUMap.prototype.toJSON = function () { const s = new Array(this.size) let i = 0 let entry = this.oldest @@ -303,7 +303,7 @@ LRUMap.prototype.toJSON = function() { } /** Returns a String representation */ -LRUMap.prototype.toString = function() { +LRUMap.prototype.toString = function () { let s = '' let entry = this.oldest while (entry) { diff --git a/packages/path/src/matcher.ts b/packages/path/src/matcher.ts index 6c860a0cd2a..5cb79f846d3 100644 --- a/packages/path/src/matcher.ts +++ b/packages/path/src/matcher.ts @@ -16,11 +16,11 @@ import { WildcardOperatorNode, GroupExpressionNode, RangeExpressionNode, - DotOperatorNode + DotOperatorNode, } from './types' import { isEqual, toArr } from './shared' -const isValid = val => val !== undefined && val !== null && val !== '' +const isValid = (val) => val !== undefined && val !== null && val !== '' export class Matcher { private tree: Node @@ -155,7 +155,7 @@ export class Matcher { const current = this.pos this.excluding = !!node.isExclude const method = this.excluding ? 'every' : 'some' - const result = toArr(node.value)[method](_node => { + const result = toArr(node.value)[method]((_node) => { this.pos = current return this.excluding ? !this.matchAtom(path, _node) diff --git a/packages/path/src/types.ts b/packages/path/src/types.ts index ee00b213ec6..05af23bda34 100644 --- a/packages/path/src/types.ts +++ b/packages/path/src/types.ts @@ -96,21 +96,21 @@ export type DestrcutorRules = DestrcutorRule[] export type Segments = Array -export const isType = (type: string) => (obj: any): obj is T => { - return obj && obj.type === type -} +export const isType = + (type: string) => + (obj: any): obj is T => { + return obj && obj.type === type + } export const isIdentifier = isType('Identifier') -export const isIgnoreExpression = isType( - 'IgnoreExpression' -) +export const isIgnoreExpression = + isType('IgnoreExpression') export const isDotOperator = isType('DotOperator') -export const isWildcardOperator = isType( - 'WildcardOperator' -) +export const isWildcardOperator = + isType('WildcardOperator') export const isExpandOperator = isType('ExpandOperator') diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index 03962c47a20..a219da31887 100644 --- a/packages/react/src/hooks/index.ts +++ b/packages/react/src/hooks/index.ts @@ -1,4 +1,4 @@ export * from './useForm' export * from './useField' export * from './useFieldSchema' -export * from './useFormEffects' \ No newline at end of file +export * from './useFormEffects' diff --git a/packages/react/src/shared/context.ts b/packages/react/src/shared/context.ts index cd74b1dcf85..9f324a9240d 100644 --- a/packages/react/src/shared/context.ts +++ b/packages/react/src/shared/context.ts @@ -15,9 +15,8 @@ export const FieldContext = createContext(null) export const SchemaMarkupContext = createContext(null) export const SchemaContext = createContext(null) export const SchemaExpressionScopeContext = createContext(null) -export const SchemaOptionsContext = createContext( - null -) +export const SchemaOptionsContext = + createContext(null) export const ContextCleaner = createContextCleaner( FieldContext, diff --git a/packages/react/src/shared/render.ts b/packages/react/src/shared/render.ts index 15369d1f716..684f49dd6b9 100644 --- a/packages/react/src/shared/render.ts +++ b/packages/react/src/shared/render.ts @@ -3,7 +3,7 @@ import { createPortal } from 'react-dom' import { globalThisPolyfill } from '@formily/shared' const env = { - portalDOM: null + portalDOM: null, } export const render = (element: React.ReactElement) => { diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 8ba97e16647..395c980ab06 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -108,18 +108,16 @@ export type Path = Key extends string : Key : never -export type PathValue< - T, - P extends Path -> = P extends `${infer Key}.${infer Rest}` - ? Key extends keyof T - ? Rest extends Path - ? PathValue +export type PathValue> = + P extends `${infer Key}.${infer Rest}` + ? Key extends keyof T + ? Rest extends Path + ? PathValue + : never : never + : P extends keyof T + ? T[P] : never - : P extends keyof T - ? T[P] - : never export type KeyOfReactComponent = Exclude< keyof T, diff --git a/packages/reactive-react/src/hooks/index.ts b/packages/reactive-react/src/hooks/index.ts index e7fc74ab717..d0b6e5be858 100644 --- a/packages/reactive-react/src/hooks/index.ts +++ b/packages/reactive-react/src/hooks/index.ts @@ -1,2 +1,2 @@ export * from './useForceUpdate' -export * from './useObserver' \ No newline at end of file +export * from './useObserver' diff --git a/packages/reactive-react/src/shared/index.ts b/packages/reactive-react/src/shared/index.ts index f1bdc373bfa..b87819ae17c 100644 --- a/packages/reactive-react/src/shared/index.ts +++ b/packages/reactive-react/src/shared/index.ts @@ -1,2 +1,2 @@ export * from './gc' -export * from './immediate' \ No newline at end of file +export * from './immediate' diff --git a/packages/reactive-react/src/types.ts b/packages/reactive-react/src/types.ts index c5bb8d66a03..aab31f32762 100644 --- a/packages/reactive-react/src/types.ts +++ b/packages/reactive-react/src/types.ts @@ -1,4 +1,3 @@ - export interface IObserverOptions { forwardRef?: boolean scheduler?: (updater: () => void) => void diff --git a/packages/reactive-vue/src/__tests__/observer.spec.ts b/packages/reactive-vue/src/__tests__/observer.spec.ts index 513c79bac0c..3b43cb3a458 100644 --- a/packages/reactive-vue/src/__tests__/observer.spec.ts +++ b/packages/reactive-vue/src/__tests__/observer.spec.ts @@ -1,68 +1,72 @@ import { observer } from '../' -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount, createLocalVue } from '@vue/test-utils' import { observable } from '@formily/reactive' -import { CreateElement } from 'vue'; +import { CreateElement } from 'vue' import CompositionAPI, { defineComponent, h } from '@vue/composition-api' -test('observer: component', async() => { +test('observer: component', async () => { const model = observable({ age: 10, - setAge() { - model.age++; - }, + setAge() { + model.age++ + }, }) const Component = observer({ - data() { - return { - model, - }; - }, - render(this: any, h: CreateElement) { - return h('button', { - on: { click: this.model.setAge }, domProps: { textContent: this.model.age }, - }); - }, - }) - const wrapper = shallowMount(Component); - expect(wrapper.find('button').text()).toBe('10'); - wrapper.find('button').trigger('click'); - expect(wrapper.find('button').text()).toBe('11'); - wrapper.destroy(); + data() { + return { + model, + } + }, + render(this: any, h: CreateElement) { + return h('button', { + on: { click: this.model.setAge }, + domProps: { textContent: this.model.age }, + }) + }, + }) + const wrapper = shallowMount(Component) + expect(wrapper.find('button').text()).toBe('10') + wrapper.find('button').trigger('click') + expect(wrapper.find('button').text()).toBe('11') + wrapper.destroy() }) -test('observer: component with setup', async() => { +test('observer: component with setup', async () => { const Vue = createLocalVue() Vue.use(CompositionAPI) const model = observable({ age: 30, - get sub10 () { + get sub10() { return model.age - 10 }, - get sub20 () { + get sub20() { return model.sub10 - 10 }, - setAge() { - model.age++; - }, - }) - const Component = observer(defineComponent({ - setup () { - return () => { - return h('button', { - on: { click: model.setAge }, domProps: { textContent: model.sub20 }, - }) - } + setAge() { + model.age++ }, - // to fix 'Maximum call stack size exceeded' error of @vue/test-utils - render () { - return null - } - })) - const wrapper = shallowMount(Component); - expect(wrapper.find('button').text()).toBe('10'); - wrapper.find('button').trigger('click'); - expect(wrapper.find('button').text()).toBe('11'); + }) + const Component = observer( + defineComponent({ + setup() { + return () => { + return h('button', { + on: { click: model.setAge }, + domProps: { textContent: model.sub20 }, + }) + } + }, + // to fix 'Maximum call stack size exceeded' error of @vue/test-utils + render() { + return null + }, + }) + ) + const wrapper = shallowMount(Component) + expect(wrapper.find('button').text()).toBe('10') + wrapper.find('button').trigger('click') + expect(wrapper.find('button').text()).toBe('11') model.age++ - expect(wrapper.find('button').text()).toBe('12'); - wrapper.destroy(); + expect(wrapper.find('button').text()).toBe('12') + wrapper.destroy() }) diff --git a/packages/reactive-vue/src/hooks/useObserver.ts b/packages/reactive-vue/src/hooks/useObserver.ts index e2ad0ac5e73..fab28070c20 100644 --- a/packages/reactive-vue/src/hooks/useObserver.ts +++ b/packages/reactive-vue/src/hooks/useObserver.ts @@ -15,14 +15,14 @@ export const useObserver = () => { Object.defineProperty(vm, 'update', { get() { - return vm['_updateEffect']; + return vm['_updateEffect'] }, set(newValue) { if (dispose) { dispose() } dispose = autorun(newValue) - vm['_updateEffect'] = newValue; + vm['_updateEffect'] = newValue }, }) } diff --git a/packages/reactive-vue/src/observer/collectData.ts b/packages/reactive-vue/src/observer/collectData.ts index 28cc05d72ad..5c3ac1fca01 100644 --- a/packages/reactive-vue/src/observer/collectData.ts +++ b/packages/reactive-vue/src/observer/collectData.ts @@ -6,30 +6,31 @@ * @since 2018-06-08 10:16 */ -import { isObservable } from '@formily/reactive'; +import { isObservable } from '@formily/reactive' export default function collectData(vm: any, data?: any) { - - const dataDefinition = typeof data === 'function' ? data.call(vm, vm) : (data || {}); - const filteredData = Object.keys(dataDefinition).reduce((result: any, field) => { - - const value = dataDefinition[field]; - - if (isObservable(value)) { - Object.defineProperty(vm, field, { - configurable: true, - get() { - return value; - }, - set() {} - }); - } else { - result[field] = value; - } - - return result; - - }, {}); - - return filteredData; + const dataDefinition = + typeof data === 'function' ? data.call(vm, vm) : data || {} + const filteredData = Object.keys(dataDefinition).reduce( + (result: any, field) => { + const value = dataDefinition[field] + + if (isObservable(value)) { + Object.defineProperty(vm, field, { + configurable: true, + get() { + return value + }, + set() {}, + }) + } else { + result[field] = value + } + + return result + }, + {} + ) + + return filteredData } diff --git a/packages/reactive-vue/src/observer/index.ts b/packages/reactive-vue/src/observer/index.ts index 9d3567e902a..885062e0d4e 100644 --- a/packages/reactive-vue/src/observer/index.ts +++ b/packages/reactive-vue/src/observer/index.ts @@ -4,7 +4,8 @@ import { observer as observerV3 } from './observerInVue3' import collectData from './collectData' import { IObserverOptions } from '../types' -export function observer(baseComponent: C, +export function observer( + baseComponent: C, options?: IObserverOptions & { forwardRef: true } ): C { if (isVue2) { diff --git a/packages/reactive-vue/src/observer/observerInVue2.ts b/packages/reactive-vue/src/observer/observerInVue2.ts index 5e6e09ed1ac..21c7d70e566 100644 --- a/packages/reactive-vue/src/observer/observerInVue2.ts +++ b/packages/reactive-vue/src/observer/observerInVue2.ts @@ -5,25 +5,31 @@ * @homepage https://github.com/kuitos/ * @since 2018-05-22 16:39 */ -import { Tracker } from '@formily/reactive'; -import collectDataForVue from './collectData'; +import { Tracker } from '@formily/reactive' +import collectDataForVue from './collectData' import { Vue2 as Vue } from 'vue-demi' import { IObserverOptions } from '../types' -const noop = () => { }; -const disposerSymbol = Symbol('disposerSymbol'); +const noop = () => {} +const disposerSymbol = Symbol('disposerSymbol') function observer(Component: any, observerOptions?: IObserverOptions): any { - const name = observerOptions?.name ||(Component as any).name || (Component as any)._componentTag || (Component.constructor && Component.constructor.name) || ''; - - const originalOptions = typeof Component === 'object' ? Component : (Component as any).options; + const name = + observerOptions?.name || + (Component as any).name || + (Component as any)._componentTag || + (Component.constructor && Component.constructor.name) || + '' + + const originalOptions = + typeof Component === 'object' ? Component : (Component as any).options // To not mutate the original component options, we need to construct a new one const dataDefinition = originalOptions.data const options = { name, ...originalOptions, data(vm: any) { - return collectDataForVue(vm || this, dataDefinition); + return collectDataForVue(vm || this, dataDefinition) }, // overrider the cached constructor to avoid extending skip // @see https://github.com/vuejs/vue/blob/6cc070063bd211229dff5108c99f7d11b6778550/src/core/global-api/extend.js#L24 @@ -31,9 +37,12 @@ function observer(Component: any, observerOptions?: IObserverOptions): any { } // we couldn't use the Component as super class when Component was a VueClass, that will invoke the lifecycle twice after we called Component.extend - const superProto = typeof Component === 'function' && Object.getPrototypeOf(Component.prototype); - const Super = superProto instanceof (Vue as any) ? superProto.constructor : Vue; - const ExtendedComponent = Super.extend(options); + const superProto = + typeof Component === 'function' && + Object.getPrototypeOf(Component.prototype) + const Super = + superProto instanceof (Vue as any) ? superProto.constructor : Vue + const ExtendedComponent = Super.extend(options) const { $mount, $destroy } = ExtendedComponent.prototype @@ -68,9 +77,9 @@ function observer(Component: any, observerOptions?: IObserverOptions): any { } ExtendedComponent.prototype.$destroy = function (this: any) { - (this as any)[disposerSymbol](); - $destroy.apply(this); - }; + ;(this as any)[disposerSymbol]() + $destroy.apply(this) + } const extendedComponentNamePropertyDescriptor = Object.getOwnPropertyDescriptor(ExtendedComponent, 'name') || {} diff --git a/packages/reactive-vue/src/observer/observerInVue3.ts b/packages/reactive-vue/src/observer/observerInVue3.ts index e10de3aee08..0c0ac58e51b 100644 --- a/packages/reactive-vue/src/observer/observerInVue3.ts +++ b/packages/reactive-vue/src/observer/observerInVue3.ts @@ -3,13 +3,13 @@ import { useObserver } from '../hooks/useObserver' export const observer = function (opts: any, options?: IObserverOptions): any { const name = options?.name || opts.name || 'ObservableComponent' - + return { name, ...opts, setup(props: Record, context: any) { useObserver() return opts?.setup?.(props, context) - } + }, } } diff --git a/packages/reactive-vue/src/types.ts b/packages/reactive-vue/src/types.ts index 8bb02ee05ff..f6639264351 100644 --- a/packages/reactive-vue/src/types.ts +++ b/packages/reactive-vue/src/types.ts @@ -1,4 +1,3 @@ - export interface IObserverOptions { name?: string } diff --git a/packages/reactive/src/__tests__/batch.spec.ts b/packages/reactive/src/__tests__/batch.spec.ts index d78b92366d6..b5d7aac595d 100644 --- a/packages/reactive/src/__tests__/batch.spec.ts +++ b/packages/reactive/src/__tests__/batch.spec.ts @@ -42,7 +42,6 @@ test('action', () => { expect(handler).toBeCalledTimes(4) }) - test('batch scope', () => { const obs = observable({}) diff --git a/packages/reactive/src/__tests__/collections.spec.ts b/packages/reactive/src/__tests__/collections.spec.ts index d2f61d60fe2..853c671288c 100644 --- a/packages/reactive/src/__tests__/collections.spec.ts +++ b/packages/reactive/src/__tests__/collections.spec.ts @@ -285,5 +285,4 @@ describe('Map', () => { expect(dummy).toEqual(1) expect(mapSpy).toBeCalledTimes(2) }) - }) diff --git a/packages/reactive/src/__tests__/externals.spec.ts b/packages/reactive/src/__tests__/externals.spec.ts index 316426b6d76..628261541a0 100644 --- a/packages/reactive/src/__tests__/externals.spec.ts +++ b/packages/reactive/src/__tests__/externals.spec.ts @@ -1,4 +1,11 @@ -import { isObservable, isSupportObservable, markObservable, markRaw, observable, toJS } from ".." +import { + isObservable, + isSupportObservable, + markObservable, + markRaw, + observable, + toJS, +} from '..' test('is support observable', () => { const obs = observable({ aa: 111 }) diff --git a/packages/reactive/src/annotations/index.ts b/packages/reactive/src/annotations/index.ts index f9beb01ab03..2c5578e0da3 100644 --- a/packages/reactive/src/annotations/index.ts +++ b/packages/reactive/src/annotations/index.ts @@ -2,4 +2,4 @@ export * from './observable' export * from './box' export * from './ref' export * from './shallow' -export * from './computed' \ No newline at end of file +export * from './computed' diff --git a/packages/reactive/src/concat.ts b/packages/reactive/src/concat.ts index 8225652d47a..00b46d6c4d7 100644 --- a/packages/reactive/src/concat.ts +++ b/packages/reactive/src/concat.ts @@ -5,4 +5,4 @@ export const concat = (array: any[], target: any) => { } arr.push(target) return arr -} \ No newline at end of file +} diff --git a/packages/reactive/src/index.ts b/packages/reactive/src/index.ts index 29c7466518e..0a85e6945f8 100644 --- a/packages/reactive/src/index.ts +++ b/packages/reactive/src/index.ts @@ -6,4 +6,4 @@ export * from './autorun' export * from './tracker' export * from './observe' export * from './externals' -export * from './types' \ No newline at end of file +export * from './types' diff --git a/packages/reactive/src/reaction.ts b/packages/reactive/src/reaction.ts index 663b54af9ab..2a6013fed03 100644 --- a/packages/reactive/src/reaction.ts +++ b/packages/reactive/src/reaction.ts @@ -1,10 +1,5 @@ import { isFn } from './checkers' -import { - IOperation, - ReactionsMap, - Reaction, - PropertyKey, -} from './types' +import { IOperation, ReactionsMap, Reaction, PropertyKey } from './types' import { ReactionStack, PendingScopeReactions, diff --git a/packages/shared/src/array.ts b/packages/shared/src/array.ts index 4dcf6b032b1..e7b3cb0234a 100644 --- a/packages/shared/src/array.ts +++ b/packages/shared/src/array.ts @@ -277,5 +277,5 @@ export function includes( ): boolean export function includes(val: any, searchElement: any, revert?: boolean) { if (isStr(val)) return val.includes(searchElement) - return some(val, item => item === searchElement, revert) + return some(val, (item) => item === searchElement, revert) } diff --git a/packages/shared/src/checkers.ts b/packages/shared/src/checkers.ts index b1e6e6eef7d..e519e0fdd0a 100644 --- a/packages/shared/src/checkers.ts +++ b/packages/shared/src/checkers.ts @@ -1,5 +1,7 @@ -const isType = (type: string | string[]) => (obj: unknown): obj is T => - getType(obj) === `[object ${type}]` +const isType = + (type: string | string[]) => + (obj: unknown): obj is T => + getType(obj) === `[object ${type}]` export const getType = (obj: any) => Object.prototype.toString.call(obj) export const isFn = (val: any): val is Function => typeof val === 'function' export const isArr = Array.isArray diff --git a/packages/shared/src/compare.ts b/packages/shared/src/compare.ts index 2e6702d5f48..2ec033c83fb 100644 --- a/packages/shared/src/compare.ts +++ b/packages/shared/src/compare.ts @@ -118,7 +118,7 @@ export const isEqual = function exportedEqual(a: any, b: any) { try { return equal(a, b) } catch (error) { - /* istanbul ignore next */ + /* istanbul ignore next */ if ( (error.message && error.message.match(/stack|recursion/i)) || error.number === -2146828260 @@ -136,7 +136,7 @@ export const isEqual = function exportedEqual(a: any, b: any) { return false } // some other error. we should definitely know about these - /* istanbul ignore next */ + /* istanbul ignore next */ throw error } } diff --git a/packages/shared/src/deprecate.ts b/packages/shared/src/deprecate.ts index 0732df153f4..657b39711e4 100644 --- a/packages/shared/src/deprecate.ts +++ b/packages/shared/src/deprecate.ts @@ -9,7 +9,7 @@ export function deprecate( ) { if (isFn(method)) { // eslint-disable-next-line @typescript-eslint/no-unused-vars - return function(p1?: P1, p2?: P2, p3?: P3, p4?: P4, p5?: P5) { + return function (p1?: P1, p2?: P2, p3?: P3, p4?: P4, p5?: P5) { deprecate(message, help) return method.apply(this, arguments) } @@ -18,8 +18,9 @@ export function deprecate( caches[method] = true console.warn( new Error( - `${method} has been deprecated. Do not continue to use this api.${message || - ''}` + `${method} has been deprecated. Do not continue to use this api.${ + message || '' + }` ) ) } diff --git a/packages/shared/src/global.ts b/packages/shared/src/global.ts index e010c571586..0e9c571347e 100644 --- a/packages/shared/src/global.ts +++ b/packages/shared/src/global.ts @@ -1,4 +1,4 @@ -/* istanbul ignore next */ +/* istanbul ignore next */ function globalSelf() { try { if (typeof self !== 'undefined') { diff --git a/packages/shared/src/string.ts b/packages/shared/src/string.ts index c293a748367..fd022eb4ab5 100644 --- a/packages/shared/src/string.ts +++ b/packages/shared/src/string.ts @@ -2,7 +2,7 @@ const ansiRegex = () => { const pattern = [ '[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)', - '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))' + '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))', ].join('|') return new RegExp(pattern, 'g') diff --git a/packages/shared/src/subscribable.ts b/packages/shared/src/subscribable.ts index d49b67ba500..fadc6b476e2 100644 --- a/packages/shared/src/subscribable.ts +++ b/packages/shared/src/subscribable.ts @@ -6,7 +6,7 @@ export class Subscribable { index?: number [key: number]: Subscriber } = { - index: 0 + index: 0, } subscription: Subscription @@ -25,7 +25,7 @@ export class Subscribable { delete this.subscribers[index] } else if (!index) { this.subscribers = { - index: 0 + index: 0, } } } diff --git a/packages/validator/src/formats.ts b/packages/validator/src/formats.ts index c6c3464beca..397f27cfaed 100644 --- a/packages/validator/src/formats.ts +++ b/packages/validator/src/formats.ts @@ -56,7 +56,8 @@ export default { idcard: /^\d{15}$|^\d{17}(\d|x|X)$/, - money: /^([\u0024\u00A2\u00A3\u00A4\u20AC\u00A5\u20B1\20B9\uFFE5]\s*)(\d+,?)+\.?\d*\s*$/, + money: + /^([\u0024\u00A2\u00A3\u00A4\u20AC\u00A5\u20B1\20B9\uFFE5]\s*)(\d+,?)+\.?\d*\s*$/, zh: /^[\u4e00-\u9fa5]+$/, diff --git a/packages/validator/src/parser.ts b/packages/validator/src/parser.ts index c44a6671dfe..535ce9e8279 100644 --- a/packages/validator/src/parser.ts +++ b/packages/validator/src/parser.ts @@ -55,57 +55,56 @@ export const parseIValidatorRules = ( ...context, } } - const createValidate = ( - callback: ValidatorFunction, - message: string - ) => async (value: any, context: any) => { - const context_ = getContext(context, value) - const results = await callback( - value, - { ...rules, message }, - context_, - (message: string, scope: any) => { - return render( - { - type: 'error', - message, - }, - { ...context_, ...scope } - )?.message - } - ) - if (isBool(results)) { - if (!results) { + const createValidate = + (callback: ValidatorFunction, message: string) => + async (value: any, context: any) => { + const context_ = getContext(context, value) + const results = await callback( + value, + { ...rules, message }, + context_, + (message: string, scope: any) => { + return render( + { + type: 'error', + message, + }, + { ...context_, ...scope } + )?.message + } + ) + if (isBool(results)) { + if (!results) { + return render( + { + type: 'error', + message, + }, + context_ + ) + } + return { + type: 'error', + message: undefined, + } + } else if (results) { + if (isValidateResult(results)) { + return render(results, context_) + } return render( { type: 'error', - message, + message: results, }, context_ ) } + return { type: 'error', message: undefined, } - } else if (results) { - if (isValidateResult(results)) { - return render(results, context_) - } - return render( - { - type: 'error', - message: results, - }, - context_ - ) } - - return { - type: 'error', - message: undefined, - } - } return rulesKeys.reduce((buf, key) => { const callback = getValidateRules(key) return callback diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts index adab8761c04..7d360037318 100644 --- a/packages/vue/src/__tests__/field.spec.ts +++ b/packages/vue/src/__tests__/field.spec.ts @@ -27,14 +27,14 @@ Vue.component('ReactiveField', ReactiveField) const Decorator: FunctionalComponentOptions = { functional: true, - render (h, context) { + render(h, context) { return h('div', context.data, context.children) - } + }, } const Input = defineComponent({ props: ['value'], - setup (props, { attrs, listeners }) { + setup(props, { attrs, listeners }) { const fieldRef = useField() return () => { const field = fieldRef.value @@ -42,40 +42,40 @@ const Input = defineComponent({ attrs: { ...attrs, value: props.value, - 'data-testid': field.path.toString() + 'data-testid': field.path.toString(), }, on: { ...listeners, - input: listeners.change - } + input: listeners.change, + }, }) } - } + }, }) const Normal: FunctionalComponentOptions = { functional: true, - render (h) { + render(h) { return h('div') - } + }, } - test('render field', async () => { const form = createForm() const onChange = jest.fn() - const { getByTestId, queryByTestId, unmount } = render(defineComponent({ - name: 'TestComponent', - setup () { - return { - form, - Normal, - Input, - Decorator, - onChange - } - }, - template: ` + const { getByTestId, queryByTestId, unmount } = render( + defineComponent({ + name: 'TestComponent', + setup() { + return { + form, + Normal, + Input, + Decorator, + onChange, + } + }, + template: ` { :decorator="[Decorator]" :component="[Input, { onChange: null }]" /> - ` - })) + `, + }) + ) expect(form.mounted).toBeTruthy() expect(form.query('aa').take().mounted).toBeTruthy() expect(form.query('bb').take().mounted).toBeTruthy() @@ -130,12 +131,12 @@ test('render field', async () => { test('ReactiveField', () => { render({ - template: `` + template: ``, }) render({ template: `
- ` + `, }) }) @@ -143,17 +144,17 @@ test('useAttch', async () => { const form = createForm() const MyComponent = defineComponent({ props: ['name'], - data () { + data() { return { form, Input, Decorator } }, template: ` - ` + `, }) const { updateProps } = render(MyComponent, { props: { - name: 'aa' - } + name: 'aa', + }, }) expect(form.query('aa').take().mounted).toBeTruthy() await updateProps({ name: 'bb' }) @@ -165,7 +166,7 @@ test('useFormEffects', async () => { const form = createForm() const CustomField = defineComponent({ props: ['value'], - setup (props) { + setup(props) { const fieldRef = useField() useFormEffects(() => { onFieldChange('aa', ['value'], (target) => { @@ -174,9 +175,11 @@ test('useFormEffects', async () => { }) }) return () => { - return h('div', { attrs: { 'data-testid': 'custom-value' } }, [props.value]) + return h('div', { attrs: { 'data-testid': 'custom-value' } }, [ + props.value, + ]) } - } + }, }) const { queryByTestId } = render({ data() { @@ -185,7 +188,7 @@ test('useFormEffects', async () => { template: ` - ` + `, }) expect(queryByTestId('custom-value').textContent).toEqual('') form.query('aa').take((aa) => { @@ -200,12 +203,13 @@ test('useFormEffects', async () => { }) test('connect', async () => { - const CustomField = connect({ + const CustomField = connect( + { functional: true, props: ['list'], render(h, context) { return h('div', [context.props.list]) - } + }, }, mapProps({ value: 'list', loading: true }, (props, field) => { return { @@ -216,7 +220,7 @@ test('connect', async () => { mapReadPretty({ render(h) { return h('div', 'read pretty') - } + }, }) ) const BaseComponent = { @@ -224,7 +228,7 @@ test('connect', async () => { name: 'BaseComponent', render(h, context) { return h('div', [context.props.value]) - } + }, } as FunctionalComponentOptions const CustomField2 = connect( BaseComponent, @@ -232,7 +236,7 @@ test('connect', async () => { mapReadPretty({ render(h) { return h('div', 'read pretty') - } + }, }) ) @@ -242,7 +246,7 @@ test('connect', async () => { mapReadPretty({ render(h) { return h('div', 'read pretty') - } + }, }) ) @@ -255,7 +259,7 @@ test('connect', async () => { - ` + `, }) form.query('aa').take((field) => { field.setState((state) => { diff --git a/packages/vue/src/__tests__/form.spec.ts b/packages/vue/src/__tests__/form.spec.ts index b8aa70fc0d4..a3c9d505172 100644 --- a/packages/vue/src/__tests__/form.spec.ts +++ b/packages/vue/src/__tests__/form.spec.ts @@ -10,7 +10,9 @@ Vue.component('FormConsumer', FormConsumer) test('render form', () => { const form = createForm() render({ - data() { return { form } }, + data() { + return { form } + }, template: ` - ` + `, }) expect(form.mounted).toBeTruthy() }) diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts index 1df6413b302..32f64eb512a 100644 --- a/packages/vue/src/__tests__/schema.json.spec.ts +++ b/packages/vue/src/__tests__/schema.json.spec.ts @@ -9,16 +9,16 @@ Vue.component('FormProvider', FormProvider) const Input: FunctionalComponentOptions = { functional: true, render(h, context) { - return h('input', { + return h('input', { attrs: { value: context.props.value, - 'data-testid': 'input' + 'data-testid': 'input', }, on: { - input: context.listeners.change - } + input: context.listeners.change, + }, }) - } + }, } describe('json schema field', () => { @@ -31,14 +31,14 @@ describe('json schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField }, - data () { + data() { return { form, schema: new Schema({ type: 'string', default: '123', 'x-component': 'Input', - }) + }), } }, template: ` @@ -46,7 +46,7 @@ describe('json schema field', () => { name="string" :schema="schema" /> - ` + `, }) expect(queryByTestId('input')).toBeVisible() expect(queryByTestId('input').getAttribute('value')).toEqual('123') @@ -61,7 +61,7 @@ describe('json schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField }, - data () { + data() { return { form, schema: new Schema({ @@ -72,7 +72,7 @@ describe('json schema field', () => { 'x-component': 'Input', }, }, - }) + }), } }, template: ` @@ -80,7 +80,7 @@ describe('json schema field', () => { name="string" :schema="schema" /> - ` + `, }) expect(queryByTestId('input')).toBeVisible() }) diff --git a/packages/vue/src/__tests__/schema.markup.spec.ts b/packages/vue/src/__tests__/schema.markup.spec.ts index 120782883d1..a83fbf2a38a 100644 --- a/packages/vue/src/__tests__/schema.markup.spec.ts +++ b/packages/vue/src/__tests__/schema.markup.spec.ts @@ -5,7 +5,7 @@ import { useFieldSchema, useField, RecursionField, - Schema + Schema, } from '../index' import { render } from '@testing-library/vue' import Vue, { CreateElement } from 'vue' @@ -16,21 +16,21 @@ Vue.component('RecursionField', RecursionField) const Input = defineComponent({ props: ['value'], - setup (props, { attrs, listeners }) { + setup(props, { attrs, listeners }) { return () => { - return h('input', { + return h('input', { attrs: { ...attrs, value: props.value, - 'data-testid': 'input' + 'data-testid': 'input', }, on: { ...listeners, - input: listeners.change - } + input: listeners.change, + }, }) } - } + }, }) describe('markup schema field', () => { @@ -43,16 +43,16 @@ describe('markup schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField, SchemaStringField }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) expect(queryByTestId('input')).toBeVisible() }) @@ -66,16 +66,16 @@ describe('markup schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField, SchemaBooleanField }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) expect(queryByTestId('input')).toBeVisible() }) @@ -89,16 +89,16 @@ describe('markup schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField, SchemaNumberField }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) expect(queryByTestId('input')).toBeVisible() }) @@ -112,16 +112,16 @@ describe('markup schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField, SchemaDateField }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) expect(queryByTestId('input')).toBeVisible() }) @@ -135,16 +135,16 @@ describe('markup schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField, SchemaDateTimeField }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) expect(queryByTestId('input')).toBeVisible() }) @@ -152,9 +152,13 @@ describe('markup schema field', () => { test('void', () => { const form = createForm() const VoidComponent = { - render (h: CreateElement) { - return h('div', { attrs: { 'data-testid': 'void-component' } }, this.$slots.default) - } + render(h: CreateElement) { + return h( + 'div', + { attrs: { 'data-testid': 'void-component' } }, + this.$slots.default + ) + }, } const { SchemaField, SchemaVoidField } = createSchemaField({ components: { @@ -163,16 +167,16 @@ describe('markup schema field', () => { }) const { queryByTestId } = render({ components: { SchemaField, SchemaVoidField }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) expect(queryByTestId('void-component')).toBeVisible() }) @@ -186,9 +190,9 @@ describe('markup schema field', () => { }) render({ components: { ...components }, - data () { + data() { return { - form + form, } }, template: ` @@ -200,7 +204,7 @@ describe('markup schema field', () => { - ` + `, }) }) @@ -213,9 +217,9 @@ describe('markup schema field', () => { }) render({ components: { ...components }, - data () { + data() { return { - form + form, } }, template: ` @@ -224,7 +228,7 @@ describe('markup schema field', () => { - ` + `, }) }) @@ -237,16 +241,16 @@ describe('markup schema field', () => { }) render({ components: { ...components }, - data () { + data() { return { - form + form, } }, template: ` - ` + `, }) }) }) @@ -256,33 +260,35 @@ describe('recursion field', () => { const form = createForm() const CustomObject = defineComponent({ - setup () { + setup() { const schemaRef = useFieldSchema() return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { schema: schemaRef.value } }) + h('RecursionField', { props: { schema: schemaRef.value } }), ]) } - } + }, }) const CustomObject2 = defineComponent({ - setup () { - const fieldRef = useField() - const schemaRef = useFieldSchema() + setup() { + const fieldRef = useField() + const schemaRef = useFieldSchema() return () => { const schema = schemaRef.value const field = fieldRef.value return h('div', { attrs: { 'data-testid': 'only-properties' } }, [ - h('RecursionField', { props: { - name: schema.name, - basePath: field.address, - schema, - onlyRenderProperties: true - } }) + h('RecursionField', { + props: { + name: schema.name, + basePath: field.address, + schema, + onlyRenderProperties: true, + }, + }), ]) } - } + }, }) const components = createSchemaField({ @@ -295,9 +301,9 @@ describe('recursion field', () => { const { queryAllByTestId } = render({ components: components, - data () { + data() { return { - form + form, } }, template: ` @@ -312,7 +318,7 @@ describe('recursion field', () => { - ` + `, }) expect(queryAllByTestId('input').length).toEqual(3) expect(queryAllByTestId('object').length).toEqual(1) @@ -323,33 +329,35 @@ describe('recursion field', () => { const form = createForm() const CustomObject = defineComponent({ - setup () { + setup() { const schemaRef = useFieldSchema() return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { schema: schemaRef.value } }) + h('RecursionField', { props: { schema: schemaRef.value } }), ]) } - } + }, }) const CustomObject2 = defineComponent({ - setup () { - const fieldRef = useField() - const schemaRef = useFieldSchema() + setup() { + const fieldRef = useField() + const schemaRef = useFieldSchema() return () => { const schema = schemaRef.value const field = fieldRef.value return h('div', { attrs: { 'data-testid': 'only-properties' } }, [ - h('RecursionField', { props: { - name: schema.name, - basePath: field.address, - schema, - onlyRenderProperties: true - } }) + h('RecursionField', { + props: { + name: schema.name, + basePath: field.address, + schema, + onlyRenderProperties: true, + }, + }), ]) } - } + }, }) const components = createSchemaField({ @@ -362,9 +370,9 @@ describe('recursion field', () => { const { queryAllByTestId } = render({ components: components, - data () { + data() { return { - form + form, } }, template: ` @@ -379,7 +387,7 @@ describe('recursion field', () => { - ` + `, }) expect(queryAllByTestId('input').length).toEqual(3) expect(queryAllByTestId('object').length).toEqual(1) @@ -390,37 +398,41 @@ describe('recursion field', () => { const form = createForm() const CustomObject = defineComponent({ - setup () { + setup() { const schemaRef = useFieldSchema() return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { - schema: schemaRef.value, - filterProperties: (schema: Schema) => { - if (schema['x-component'] === 'Input') return false - return true - } - } }) + h('RecursionField', { + props: { + schema: schemaRef.value, + filterProperties: (schema: Schema) => { + if (schema['x-component'] === 'Input') return false + return true + }, + }, + }), ]) } - } + }, }) const CustomObject2 = defineComponent({ - setup () { + setup() { const schemaRef = useFieldSchema() return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { - schema: schemaRef.value, - filterProperties: (schema: Schema) => { - if (schema['x-component'] === 'Input') return - return true - } - } }) + h('RecursionField', { + props: { + schema: schemaRef.value, + filterProperties: (schema: Schema) => { + if (schema['x-component'] === 'Input') return + return true + }, + }, + }), ]) } - } + }, }) const components = createSchemaField({ @@ -433,9 +445,9 @@ describe('recursion field', () => { const { queryAllByTestId } = render({ components: components, - data () { + data() { return { - form + form, } }, template: ` @@ -447,7 +459,7 @@ describe('recursion field', () => { - ` + `, }) expect(queryAllByTestId('input').length).toEqual(1) expect(queryAllByTestId('object').length).toEqual(2) @@ -457,31 +469,33 @@ describe('recursion field', () => { const form = createForm() const CustomObject = defineComponent({ - setup () { + setup() { const schemaRef = useFieldSchema() return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { - schema: schemaRef.value, - onlyRenderSelf: true - } }) + h('RecursionField', { + props: { + schema: schemaRef.value, + onlyRenderSelf: true, + }, + }), ]) } - } + }, }) const components = createSchemaField({ components: { Input, - CustomObject + CustomObject, }, }) const { queryAllByTestId } = render({ components: components, - data () { + data() { return { - form + form, } }, template: ` @@ -490,7 +504,7 @@ describe('recursion field', () => { - ` + `, }) expect(queryAllByTestId('input').length).toEqual(0) expect(queryAllByTestId('object').length).toEqual(1) @@ -500,42 +514,46 @@ describe('recursion field', () => { const form = createForm() const CustomObject = defineComponent({ - setup () { + setup() { return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { - schema: null - } }) + h('RecursionField', { + props: { + schema: null, + }, + }), ]) } - } + }, }) const CustomObject2 = defineComponent({ - setup () { + setup() { return () => { return h('div', { attrs: { 'data-testid': 'object' } }, [ - h('RecursionField', { props: { - schema: {} - } }) + h('RecursionField', { + props: { + schema: {}, + }, + }), ]) } - } + }, }) const components = createSchemaField({ components: { Input, CustomObject, - CustomObject2 + CustomObject2, }, }) const { queryByTestId } = render({ components: components, - data () { + data() { return { - form + form, } }, template: ` @@ -547,7 +565,7 @@ describe('recursion field', () => { - ` + `, }) expect(queryByTestId('input')).toBeNull() }) @@ -635,5 +653,4 @@ describe('recursion field', () => { // expect(queryByTestId('ccc')).toBeVisible() // }) // }) - }) diff --git a/packages/vue/src/components/ArrayField.ts b/packages/vue/src/components/ArrayField.ts index 7cbd202ebc8..74a241e83ae 100644 --- a/packages/vue/src/components/ArrayField.ts +++ b/packages/vue/src/components/ArrayField.ts @@ -10,83 +10,95 @@ import { observer } from '@formily/reactive-vue' type ArrayFieldProps = IFieldProps -export default observer(defineComponent({ - name: 'ArrayField', - /* eslint-disable vue/require-prop-types */ - /* eslint-disable vue/require-default-prop */ - props: { - name: {}, - title: {}, - description: {}, - value: {}, - initialValue: {}, - basePath: {}, - decorator: Array, - component: Array, - display: String, - pattern: String, - required: { - type: Boolean, - default: undefined - }, - validateFirst: { - type: Boolean, - default: undefined - }, - hidden: { - type: Boolean, - default: undefined - }, - visible: { - type: Boolean, - default: undefined - }, - editable: { - type: Boolean, - default: undefined - }, - disabled: { - type: Boolean, - default: undefined - }, - readOnly: { - type: Boolean, - default: undefined - }, - readPretty: { - type: Boolean, - default: undefined +export default observer( + defineComponent({ + name: 'ArrayField', + /* eslint-disable vue/require-prop-types */ + /* eslint-disable vue/require-default-prop */ + props: { + name: {}, + title: {}, + description: {}, + value: {}, + initialValue: {}, + basePath: {}, + decorator: Array, + component: Array, + display: String, + pattern: String, + required: { + type: Boolean, + default: undefined, + }, + validateFirst: { + type: Boolean, + default: undefined, + }, + hidden: { + type: Boolean, + default: undefined, + }, + visible: { + type: Boolean, + default: undefined, + }, + editable: { + type: Boolean, + default: undefined, + }, + disabled: { + type: Boolean, + default: undefined, + }, + readOnly: { + type: Boolean, + default: undefined, + }, + readPretty: { + type: Boolean, + default: undefined, + }, + dataSource: {}, + validator: {}, + reactions: [Array, Function], }, - dataSource: {}, - validator: {}, - reactions: [Array, Function], - }, - setup(props: ArrayFieldProps, { slots }) { - const formRef = useForm() - const parentRef = useField() - const basePath = props.basePath !== undefined ? props.basePath : parentRef?.value?.address - const fieldRef = useAttach(() => formRef.value.createArrayField({ - ...props, - basePath, - ...getRawComponent(props) - }), [() => props.name, formRef]) + setup(props: ArrayFieldProps, { slots }) { + const formRef = useForm() + const parentRef = useField() + const basePath = + props.basePath !== undefined + ? props.basePath + : parentRef?.value?.address + const fieldRef = useAttach( + () => + formRef.value.createArrayField({ + ...props, + basePath, + ...getRawComponent(props), + }), + [() => props.name, formRef] + ) - provide(FieldSymbol, fieldRef) + provide(FieldSymbol, fieldRef) - return () => h( - ReactiveField, - { - props: { - field: fieldRef.value - } - }, - { - ...slots, - default: () => slots.default && slots.default({ - field: fieldRef.value, - form: fieldRef.value.form - }) - } - ) - } -}) as unknown as DefineComponent) + return () => + h( + ReactiveField, + { + props: { + field: fieldRef.value, + }, + }, + { + ...slots, + default: () => + slots.default && + slots.default({ + field: fieldRef.value, + form: fieldRef.value.form, + }), + } + ) + }, + }) as unknown as DefineComponent +) diff --git a/packages/vue/src/components/Field.ts b/packages/vue/src/components/Field.ts index 2244726aa2e..7608a9c3b03 100644 --- a/packages/vue/src/components/Field.ts +++ b/packages/vue/src/components/Field.ts @@ -24,35 +24,35 @@ export default defineComponent>({ pattern: String, required: { type: Boolean, - default: undefined + default: undefined, }, validateFirst: { type: Boolean, - default: undefined + default: undefined, }, hidden: { type: Boolean, - default: undefined + default: undefined, }, visible: { type: Boolean, - default: undefined + default: undefined, }, editable: { type: Boolean, - default: undefined + default: undefined, }, disabled: { type: Boolean, - default: undefined + default: undefined, }, readOnly: { type: Boolean, - default: undefined + default: undefined, }, readPretty: { type: Boolean, - default: undefined + default: undefined, }, dataSource: {}, validator: {}, @@ -62,32 +62,39 @@ export default defineComponent>({ // const { track } = useObserver() const formRef = useForm() const parentRef = useField() - const basePath = props.basePath !== undefined ? props.basePath : parentRef?.value?.address - const fieldRef = useAttach(() => formRef.value.createField({ - ...props, - basePath, - ...getRawComponent(props) - }), [() => props.name, formRef]) + const basePath = + props.basePath !== undefined ? props.basePath : parentRef?.value?.address + const fieldRef = useAttach( + () => + formRef.value.createField({ + ...props, + basePath, + ...getRawComponent(props), + }), + [() => props.name, formRef] + ) provide(FieldSymbol, fieldRef) return () => { const field = fieldRef.value return h( - ReactiveField, + ReactiveField, { props: { - field - } + field, + }, }, { ...slots, - default: () => slots.default && slots.default({ - field, - form: field.form - }), + default: () => + slots.default && + slots.default({ + field, + form: field.form, + }), } ) } - } + }, }) as unknown as DefineComponent> diff --git a/packages/vue/src/components/FormConsumer.ts b/packages/vue/src/components/FormConsumer.ts index 9bc6ec4152c..39d713fa0e0 100644 --- a/packages/vue/src/components/FormConsumer.ts +++ b/packages/vue/src/components/FormConsumer.ts @@ -4,19 +4,23 @@ import { useForm } from '../hooks' import h from '../shared/h' import { Fragment } from '../shared/fragment' -export default observer(defineComponent({ - name: 'FormConsumer', - inheritAttrs: false, - setup(props, { attrs, slots }) { - const formRef = useForm() - return () => h( - Fragment, - { attrs }, - { - default: () => slots.default?.({ - form: formRef.value - }) - } - ) - } -}) as unknown as DefineComponent) +export default observer( + defineComponent({ + name: 'FormConsumer', + inheritAttrs: false, + setup(props, { attrs, slots }) { + const formRef = useForm() + return () => + h( + Fragment, + { attrs }, + { + default: () => + slots.default?.({ + form: formRef.value, + }), + } + ) + }, + }) as unknown as DefineComponent +) diff --git a/packages/vue/src/components/FormProvider.ts b/packages/vue/src/components/FormProvider.ts index be77a196ed0..4914c1179c2 100644 --- a/packages/vue/src/components/FormProvider.ts +++ b/packages/vue/src/components/FormProvider.ts @@ -11,17 +11,16 @@ export default defineComponent({ props: { form: { type: Object, - required: true - } + required: true, + }, }, setup(props: IProviderProps, { attrs, slots }) { - const formRef = useAttach(() => toRaw(props.form), () => props.form) + const formRef = useAttach( + () => toRaw(props.form), + () => props.form + ) provide(FormSymbol, formRef) - return () => h( - Fragment, - { attrs }, - slots - ) - } + return () => h(Fragment, { attrs }, slots) + }, }) as unknown as DefineComponent diff --git a/packages/vue/src/components/ObjectField.ts b/packages/vue/src/components/ObjectField.ts index 1bbba2c9a43..84087c573a6 100644 --- a/packages/vue/src/components/ObjectField.ts +++ b/packages/vue/src/components/ObjectField.ts @@ -10,84 +10,96 @@ import { getRawComponent } from '../utils/getRawComponent' type ObjectFieldProps = IFieldProps -export default observer(defineComponent({ - name: 'ObjectField', - /* eslint-disable vue/require-prop-types */ - /* eslint-disable vue/require-default-prop */ - props: { - name: {}, - title: {}, - description: {}, - value: {}, - initialValue: {}, - basePath: {}, - decorator: Array, - component: Array, - display: String, - pattern: String, - required: { - type: Boolean, - default: undefined - }, - validateFirst: { - type: Boolean, - default: undefined - }, - hidden: { - type: Boolean, - default: undefined - }, - visible: { - type: Boolean, - default: undefined - }, - editable: { - type: Boolean, - default: undefined - }, - disabled: { - type: Boolean, - default: undefined - }, - readOnly: { - type: Boolean, - default: undefined - }, - readPretty: { - type: Boolean, - default: undefined +export default observer( + defineComponent({ + name: 'ObjectField', + /* eslint-disable vue/require-prop-types */ + /* eslint-disable vue/require-default-prop */ + props: { + name: {}, + title: {}, + description: {}, + value: {}, + initialValue: {}, + basePath: {}, + decorator: Array, + component: Array, + display: String, + pattern: String, + required: { + type: Boolean, + default: undefined, + }, + validateFirst: { + type: Boolean, + default: undefined, + }, + hidden: { + type: Boolean, + default: undefined, + }, + visible: { + type: Boolean, + default: undefined, + }, + editable: { + type: Boolean, + default: undefined, + }, + disabled: { + type: Boolean, + default: undefined, + }, + readOnly: { + type: Boolean, + default: undefined, + }, + readPretty: { + type: Boolean, + default: undefined, + }, + dataSource: {}, + validator: {}, + reactions: [Array, Function], }, - dataSource: {}, - validator: {}, - reactions: [Array, Function], - }, - setup(props: ObjectFieldProps, { slots }) { - // const { track } = useObserver() - const formRef = useForm() - const parentRef = useField() - const basePath = props.basePath !== undefined ? props.basePath : parentRef?.value?.address - const fieldRef = useAttach(() => formRef.value.createObjectField({ - ...props, - basePath, - ...getRawComponent(props) - }), [() => props.name, formRef]) + setup(props: ObjectFieldProps, { slots }) { + // const { track } = useObserver() + const formRef = useForm() + const parentRef = useField() + const basePath = + props.basePath !== undefined + ? props.basePath + : parentRef?.value?.address + const fieldRef = useAttach( + () => + formRef.value.createObjectField({ + ...props, + basePath, + ...getRawComponent(props), + }), + [() => props.name, formRef] + ) - provide(FieldSymbol, fieldRef) + provide(FieldSymbol, fieldRef) - return () => h( - ReactiveField, - { - props: { - field: fieldRef.value - } - }, - { - ...slots, - default: () => slots.default && slots.default({ - field: fieldRef.value, - form: fieldRef.value.form - }) - } - ) - } -}) as unknown as DefineComponent) + return () => + h( + ReactiveField, + { + props: { + field: fieldRef.value, + }, + }, + { + ...slots, + default: () => + slots.default && + slots.default({ + field: fieldRef.value, + form: fieldRef.value.form, + }), + } + ) + }, + }) as unknown as DefineComponent +) diff --git a/packages/vue/src/components/ReactiveField.ts b/packages/vue/src/components/ReactiveField.ts index ab6a4266682..23eac422e76 100644 --- a/packages/vue/src/components/ReactiveField.ts +++ b/packages/vue/src/components/ReactiveField.ts @@ -11,118 +11,129 @@ interface IReactiveFieldProps { field: Formily.Core.Types.GeneralField } -export default observer(defineComponent({ - name: 'ReactiveField', - // eslint-disable-next-line vue/require-prop-types - props: ['field'], - setup(props: IReactiveFieldProps, { slots }) { - // const { track } = useObserver() - const key = Math.floor(Date.now() * Math.random()).toString(16) - return () => { - const field = props.field - let children = {} - if (!field) { - children = slots - } else if (field.display !== 'visible') { - children = { - ...slots, - default: () => [h('template', {}, {})] - } - } else { - const renderDecorator = (childNodes: any[]) => { - if (!field?.decorator?.[0]) { - return { - default: () => childNodes +export default observer( + defineComponent({ + name: 'ReactiveField', + // eslint-disable-next-line vue/require-prop-types + props: ['field'], + setup(props: IReactiveFieldProps, { slots }) { + // const { track } = useObserver() + const key = Math.floor(Date.now() * Math.random()).toString(16) + return () => { + const field = props.field + let children = {} + if (!field) { + children = slots + } else if (field.display !== 'visible') { + children = { + ...slots, + default: () => [h('template', {}, {})], + } + } else { + const renderDecorator = (childNodes: any[]) => { + if (!field?.decorator?.[0]) { + return { + default: () => childNodes, + } + } else { + const decorator = field.decorator[0] as VueComponent + const decoratorData = field.decorator[1] || {} + return { + default: () => + h( + decorator, + { attrs: decoratorData }, + { + default: () => childNodes, + } + ), + } } - } else { - const decorator = field.decorator[0] as VueComponent - const decoratorData = field.decorator[1] || {} - return { - default: () => h( decorator, { attrs: decoratorData }, + } + + const renderComponent = () => { + if (!field?.component?.[0]) { + return h( + Fragment, + {}, { - default: () => childNodes + default: () => + slots.default && + slots.default({ + field: props.field, + form: props.field.form, + }), } ) } - } - } - const renderComponent = () => { - if (!field?.component?.[0]) { - return h(Fragment, {}, { - default: () => slots.default && slots.default({ - field: props.field, - form: props.field.form + const component = field.component[0] as VueComponent + const originData = clone(field.component[1]) || {} + const events = {} as Record + const originChange = originData['@change'] || originData['onChange'] + const originFocus = originData['@focus'] || originData['onFocus'] + const originBlur = originData['@blur'] || originData['onBlur'] + + // '@xxx' has higher priority + Object.keys(originData) + .filter((key) => key.startsWith('on')) + .forEach((eventKey) => { + const eventName = `${eventKey[2].toLowerCase()}${eventKey.slice( + 3 + )}` + events[eventName] = originData[eventKey] }) - }) - } - - const component = field.component[0] as VueComponent - const originData = clone(field.component[1]) || {} - const events = {} as Record - const originChange = originData['@change'] || originData['onChange'] - const originFocus = originData['@focus'] || originData['onFocus'] - const originBlur = originData['@blur'] || originData['onBlur'] - - // '@xxx' has higher priority - Object.keys(originData) - .filter(key => key.startsWith('on')) - .forEach(eventKey => { - const eventName = `${eventKey[2].toLowerCase()}${eventKey.slice(3)}` - events[eventName] = originData[eventKey] - }) - Object.keys(originData) - .filter(key => key.startsWith('@')) - .forEach(eventKey => { - events[eventKey.slice(1)] = originData[eventKey] - delete originData[eventKey] - }) - - events.change = (...args: any[]) => { - if (!isVoidField(field)) field.onInput(...args) - originChange?.(...args) - } - events.focus = (...args: any[]) => { - if (!isVoidField(field)) field.onFocus(...args) - originFocus?.(...args) - } - events.blur = (...args: any[]) => { - if (!isVoidField(field)) field.onBlur(...args) - originBlur?.(...args) - } - const attrs = { - disabled: !isVoidField(field) - ? field.pattern === 'disabled' || field.pattern === 'readPretty' - : undefined, - readOnly: !isVoidField(field) - ? field.pattern === 'readOnly' - : undefined, - ...originData, - value: !isVoidField(field) ? field.value : undefined, - } - const componentData = { - attrs: attrs, - on: events - } - - return h( - component, - componentData, - { - ...slots, - default: () => slots.default && slots.default({ - field: props.field, - form: props.field.form + Object.keys(originData) + .filter((key) => key.startsWith('@')) + .forEach((eventKey) => { + events[eventKey.slice(1)] = originData[eventKey] + delete originData[eventKey] }) + + events.change = (...args: any[]) => { + if (!isVoidField(field)) field.onInput(...args) + originChange?.(...args) + } + events.focus = (...args: any[]) => { + if (!isVoidField(field)) field.onFocus(...args) + originFocus?.(...args) + } + events.blur = (...args: any[]) => { + if (!isVoidField(field)) field.onBlur(...args) + originBlur?.(...args) + } + const attrs = { + disabled: !isVoidField(field) + ? field.pattern === 'disabled' || field.pattern === 'readPretty' + : undefined, + readOnly: !isVoidField(field) + ? field.pattern === 'readOnly' + : undefined, + ...originData, + value: !isVoidField(field) ? field.value : undefined, } - ) + const componentData = { + attrs: attrs, + on: events, + } + + return h(component, componentData, { + ...slots, + default: () => + slots.default && + slots.default({ + field: props.field, + form: props.field.form, + }), + }) + } + + children = renderDecorator([renderComponent()]) } - children = renderDecorator([renderComponent()]) + return h(Fragment, { key }, children) } - - return h(Fragment, { key }, children) - } - } -}) as unknown as DefineComponent) + }, + }) as unknown as DefineComponent +) diff --git a/packages/vue/src/components/RecursionField.ts b/packages/vue/src/components/RecursionField.ts index 1f6ee6b1fe7..6b52f2ee6da 100644 --- a/packages/vue/src/components/RecursionField.ts +++ b/packages/vue/src/components/RecursionField.ts @@ -1,4 +1,10 @@ -import { inject, provide, defineComponent, computed, DefineComponent } from 'vue-demi' +import { + inject, + provide, + defineComponent, + computed, + DefineComponent, +} from 'vue-demi' import { isFn, isValid } from '@formily/shared' import { Schema } from '@formily/json-schema' import { observer } from '@formily/reactive-vue' @@ -17,180 +23,215 @@ import { h } from '../shared/h' import { Fragment } from '../shared/fragment' function isVueOptions(options: any) { - if (!options) { return false } - return typeof options.template === 'string' || typeof options.render === 'function' || typeof options.setup === 'function' + if (!options) { + return false + } + return ( + typeof options.template === 'string' || + typeof options.render === 'function' || + typeof options.setup === 'function' + ) } -const RecursionField = observer(defineComponent({ - name: 'RecursionField', - inheritAttrs: false, - // eslint-disable-next-line vue/require-prop-types - props: { - schema: { - required: true - }, - name: [String, Number], - basePath: {}, - onlyRenderProperties: { - type: Boolean, - default: undefined +const RecursionField = observer( + defineComponent({ + name: 'RecursionField', + inheritAttrs: false, + // eslint-disable-next-line vue/require-prop-types + props: { + schema: { + required: true, + }, + name: [String, Number], + basePath: {}, + onlyRenderProperties: { + type: Boolean, + default: undefined, + }, + onlyRenderSelf: { + type: Boolean, + default: undefined, + }, + mapProperties: {}, + filterProperties: {}, }, - onlyRenderSelf: { - type: Boolean, - default: undefined - }, - mapProperties: {}, - filterProperties: {}, - }, - setup(props: IRecursionFieldProps) { - // const { track } = useObserver() - const parentRef = useField() - const options = inject(SchemaOptionsSymbol) - const scope = inject(SchemaExpressionScopeSymbol) - const schemaRef = computed(() => new Schema(props.schema)) - const fieldSchemaRef = computed(() => schemaRef.value.compile?.({ - ...options.scope, - ...scope, - })) - const fieldPropsRef = computed(() => schemaRef.value?.toFieldProps?.(options)) - const getBasePath = () => { - if (props.onlyRenderProperties) { - return props.basePath || parentRef?.value?.address.concat(props.name) - } - return props.basePath || parentRef?.value?.address - } - - provide(SchemaSymbol, fieldSchemaRef) - - return () => { - const basePath = getBasePath() - const fieldProps = fieldPropsRef.value - - const renderProperties = (field?: Formily.Core.Types.GeneralField) => { - if (props.onlyRenderSelf) return - const children = fieldSchemaRef.value.mapProperties((item, name, index) => { - const base = field?.address || basePath - let schema: Schema = item - if (isFn(props.mapProperties)) { - const mapped = props.mapProperties(item, name) - if (mapped) { - schema = mapped - } - } - if (isFn(props.filterProperties)) { - if (props.filterProperties(schema, name) === false) { - return null - } - } - return h(RecursionField, { - key: index, - attrs: { - schema, - name, - basePath: base - } - }, {}) + setup(props: IRecursionFieldProps) { + // const { track } = useObserver() + const parentRef = useField() + const options = inject(SchemaOptionsSymbol) + const scope = inject(SchemaExpressionScopeSymbol) + const schemaRef = computed(() => new Schema(props.schema)) + const fieldSchemaRef = computed(() => + schemaRef.value.compile?.({ + ...options.scope, + ...scope, }) + ) + const fieldPropsRef = computed(() => + schemaRef.value?.toFieldProps?.(options) + ) + const getBasePath = () => { + if (props.onlyRenderProperties) { + return props.basePath || parentRef?.value?.address.concat(props.name) + } + return props.basePath || parentRef?.value?.address + } + provide(SchemaSymbol, fieldSchemaRef) + + return () => { + const basePath = getBasePath() + const fieldProps = fieldPropsRef.value + + const renderProperties = (field?: Formily.Core.Types.GeneralField) => { + if (props.onlyRenderSelf) return + const children = fieldSchemaRef.value.mapProperties( + (item, name, index) => { + const base = field?.address || basePath + let schema: Schema = item + if (isFn(props.mapProperties)) { + const mapped = props.mapProperties(item, name) + if (mapped) { + schema = mapped + } + } + if (isFn(props.filterProperties)) { + if (props.filterProperties(schema, name) === false) { + return null + } + } + return h( + RecursionField, + { + key: index, + attrs: { + schema, + name, + basePath: base, + }, + }, + {} + ) + } + ) - const slots = { - default: () => [...children] - } + const slots = { + default: () => [...children], + } - const xContent = fieldSchemaRef.value['x-content'] - - if (typeof xContent === 'string') { - slots['default'] = () => [...children, xContent] - } else if (isVueOptions(xContent) || typeof xContent === 'function') { - slots['default'] = () => [...children, h(xContent, {}, {})] - } else if (xContent && typeof xContent === 'object') { - Object.keys(xContent).forEach(key => { - const child = xContent[key] - if (key === 'default') { + const xContent = fieldSchemaRef.value['x-content'] + + if (typeof xContent === 'string') { + slots['default'] = () => [...children, xContent] + } else if (isVueOptions(xContent) || typeof xContent === 'function') { + slots['default'] = () => [...children, h(xContent, {}, {})] + } else if (xContent && typeof xContent === 'object') { + Object.keys(xContent).forEach((key) => { + const child = xContent[key] + if (key === 'default') { + if (typeof child === 'string') { + slots[key] = () => [...children, child] + } else if (isVueOptions(child) || typeof child === 'function') { + slots[key] = () => [...children, h(child, {}, {})] + } + } if (typeof child === 'string') { - slots[key] = () => [...children, child] + slots[key] = () => [child] } else if (isVueOptions(child) || typeof child === 'function') { - slots[key] = () => [...children, h(child, {}, {})] + slots[key] = () => [h(child, {}, {})] } - } - if (typeof child === 'string') { - slots[key] = () => [child] - } else if (isVueOptions(child) || typeof child === 'function') { - slots[key] = () => [h(child, {}, {})] - } - }) + }) + } + + return h(Fragment, {}, slots) } - return h(Fragment, {}, slots) - } + const render = () => { + if (!isValid(props.name)) return renderProperties() + if (fieldSchemaRef.value.type === 'object') { + if (props.onlyRenderProperties) return renderProperties() + return h( + ObjectField, + { + attrs: { + ...fieldProps, + name: props.name, + basePath: basePath, + }, + }, + { + default: ({ field }) => [renderProperties(field)], + } + ) + } else if (fieldSchemaRef.value.type === 'array') { + return h( + ArrayField, + { + attrs: { + ...fieldProps, + name: props.name, + basePath: basePath, + }, + }, + {} + ) + } else if (fieldSchemaRef.value.type === 'void') { + if (props.onlyRenderProperties) return renderProperties() + return h( + VoidField, + { + attrs: { + ...fieldProps, + name: props.name, + basePath: basePath, + }, + }, + { + default: ({ field }) => [renderProperties(field)], + } + ) + } - const render = () => { - if (!isValid(props.name)) return renderProperties() - if (fieldSchemaRef.value.type === 'object') { - if (props.onlyRenderProperties) return renderProperties() - return h(ObjectField, { - attrs: { - ...fieldProps, - name: props.name, - basePath: basePath - } - }, { - default: ({ field }) => [renderProperties(field)] - }) - } else if (fieldSchemaRef.value.type === 'array') { - return h(ArrayField, { - attrs: { - ...fieldProps, - name: props.name, - basePath: basePath - } - }, {}) - } else if (fieldSchemaRef.value.type === 'void') { - if (props.onlyRenderProperties) return renderProperties() - return h(VoidField, { - attrs: { - ...fieldProps, - name: props.name, - basePath: basePath - } - }, { - default: ({ field }) => [renderProperties(field)] - }) - } + const slots = {} - const slots = {} - - const xContent = fieldSchemaRef.value['x-content'] - - if (typeof xContent === 'string') { - slots['default'] = () => [xContent] - } else if (isVueOptions(xContent) || typeof xContent === 'function') { // is vue component or functional component - slots['default'] = () => [h(xContent, {}, {})] - } else if (xContent && typeof xContent === 'object') { // for named slots - Object.keys(xContent).forEach(key => { - const child = xContent[key] - if (typeof child === 'string') { - slots[key] = () => [child] - } else if (isVueOptions(child) || typeof child === 'function') { - slots[key] = () => [h(child, {}, {})] - } - }) - } + const xContent = fieldSchemaRef.value['x-content'] - return h(Field, { - attrs: { - ...fieldProps, - name: props.name, - basePath: basePath + if (typeof xContent === 'string') { + slots['default'] = () => [xContent] + } else if (isVueOptions(xContent) || typeof xContent === 'function') { + // is vue component or functional component + slots['default'] = () => [h(xContent, {}, {})] + } else if (xContent && typeof xContent === 'object') { + // for named slots + Object.keys(xContent).forEach((key) => { + const child = xContent[key] + if (typeof child === 'string') { + slots[key] = () => [child] + } else if (isVueOptions(child) || typeof child === 'function') { + slots[key] = () => [h(child, {}, {})] + } + }) } - }, slots) - } - if (!fieldSchemaRef.value) return ; + return h( + Field, + { + attrs: { + ...fieldProps, + name: props.name, + basePath: basePath, + }, + }, + slots + ) + } - return render() - } - } -}) as unknown as DefineComponent) + if (!fieldSchemaRef.value) return + + return render() + } + }, + }) as unknown as DefineComponent +) export default RecursionField diff --git a/packages/vue/src/components/SchemaField.ts b/packages/vue/src/components/SchemaField.ts index 026ecaa3c3d..b3b464c7ff9 100644 --- a/packages/vue/src/components/SchemaField.ts +++ b/packages/vue/src/components/SchemaField.ts @@ -1,4 +1,11 @@ -import { inject, provide, defineComponent, computed, shallowRef, watch } from 'vue-demi' +import { + inject, + provide, + defineComponent, + computed, + shallowRef, + watch, +} from 'vue-demi' import type { DefineComponent } from 'vue-demi' import { ISchema, Schema, SchemaTypes } from '@formily/json-schema' import { RecursionField } from '../components' @@ -35,11 +42,11 @@ const markupProps = { default: {}, readOnly: { type: Boolean, - default: undefined + default: undefined, }, writeOnly: { type: Boolean, - default: undefined + default: undefined, }, enum: {}, const: {}, @@ -55,13 +62,13 @@ const markupProps = { minItems: Number, uniqueItems: { type: Boolean, - default: undefined + default: undefined, }, maxProperties: Number, minProperties: Number, required: { type: [Boolean, Array, String], - default: undefined + default: undefined, }, format: String, properties: {}, @@ -81,47 +88,105 @@ const markupProps = { xContent: {}, xVisible: { type: Boolean, - default: undefined + default: undefined, }, xHidden: { type: Boolean, - default: undefined + default: undefined, }, xDisabled: { type: Boolean, - default: undefined + default: undefined, }, xEditable: { type: Boolean, - default: undefined + default: undefined, }, xReadOnly: { type: Boolean, - default: undefined + default: undefined, }, xReadPretty: { type: Boolean, - default: undefined + default: undefined, }, } type SchemaFieldComponents = { - SchemaField: DefineComponent>, - SchemaMarkupField: DefineComponent, ComponentPath>>, - SchemaStringField: DefineComponent, ComponentPath>>, - SchemaObjectField: DefineComponent, ComponentPath>>, - SchemaArrayField: DefineComponent, ComponentPath>>, - SchemaBooleanField: DefineComponent, ComponentPath>>, - SchemaDateField: DefineComponent, ComponentPath>>, - SchemaDateTimeField: DefineComponent, ComponentPath>>, - SchemaVoidField: DefineComponent, ComponentPath>>, - SchemaNumberField: DefineComponent, ComponentPath>>, + SchemaField: DefineComponent> + SchemaMarkupField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaStringField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaObjectField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaArrayField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaBooleanField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaDateField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaDateTimeField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaVoidField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > + SchemaNumberField: DefineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + > } -export function createSchemaField( +export function createSchemaField< + Components extends SchemaComponents = SchemaComponents +>( options: ISchemaFieldFactoryOptions ): SchemaFieldComponents { - const SchemaField = defineComponent>({ + const SchemaField = defineComponent< + ISchemaFieldProps + >({ name: 'SchemaField', inheritAttrs: false, props: { @@ -142,44 +207,46 @@ export function createSchemaField, { slots }) { - const schemaRef = computed(() => Schema.isSchemaInstance(props.schema) - ? props.schema - : new Schema({ - type: 'object', - ...props.schema, - })) + const schemaRef = computed(() => + Schema.isSchemaInstance(props.schema) + ? props.schema + : new Schema({ + type: 'object', + ...props.schema, + }) + ) provide(SchemaMarkupSymbol, schemaRef) provide(SchemaOptionsSymbol, options) @@ -188,31 +255,60 @@ export function createSchemaField { env.nonameId = 0 - return h(Fragment, {}, { - default: () => { - const children = [] - if (slots.default) { - children.push(h('template', {}, { - default: () => slots.default() - })) - } - children.push(h(RecursionField, { - attrs: { - ...props, - schema: schemaRef.value + return h( + Fragment, + {}, + { + default: () => { + const children = [] + if (slots.default) { + children.push( + h( + 'template', + {}, + { + default: () => slots.default(), + } + ) + ) } - }, {})) - return children + children.push( + h( + RecursionField, + { + attrs: { + ...props, + schema: schemaRef.value, + }, + }, + {} + ) + ) + return children + }, } - }) + ) } - } + }, }) - const MarkupField = defineComponent, ComponentPath>>({ + const MarkupField = defineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + >({ name: 'MarkupField', props: Object.assign({}, markupProps, { type: String }), - setup (props: ISchemaMarkupFieldProps, ComponentPath>, { slots }) { + setup( + props: ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + >, + { slots } + ) { const parentRef = inject(SchemaMarkupSymbol, null) if (!parentRef || !parentRef.value) return () => h(Fragment, {}, {}) @@ -226,35 +322,68 @@ export function createSchemaField { - if (parentRef.value.type === 'object' || parentRef.value.type === 'void') { - schemaRef.value = parentRef.value.addProperty(name, resolveSchemaProps(props)) - } else if (parentRef.value.type === 'array') { - const schema = appendArraySchema(resolveSchemaProps(props)) - schemaRef.value = Array.isArray(schema) ? schema[0] : schema - } - }, { immediate: true }) + + watch( + parentRef, + () => { + if ( + parentRef.value.type === 'object' || + parentRef.value.type === 'void' + ) { + schemaRef.value = parentRef.value.addProperty( + name, + resolveSchemaProps(props) + ) + } else if (parentRef.value.type === 'array') { + const schema = appendArraySchema(resolveSchemaProps(props)) + schemaRef.value = Array.isArray(schema) ? schema[0] : schema + } + }, + { immediate: true } + ) provide(SchemaMarkupSymbol, schemaRef) - - return () => h(Fragment, {}, { - default: () => slots.default && slots.default() - }) - } + + return () => + h( + Fragment, + {}, + { + default: () => slots.default && slots.default(), + } + ) + }, }) const SchemaFieldFactory = (type: SchemaTypes, name: string) => { - return defineComponent, ComponentPath>>({ + return defineComponent< + ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + > + >({ name: name, props: Object.assign({}, markupProps), - setup (props: ISchemaMarkupFieldProps, ComponentPath>, { slots }) { - return () => h(MarkupField, { - attrs: { - ...props, - type: type - } - }, slots) - } + setup( + props: ISchemaMarkupFieldProps< + Components, + ComponentPath, + ComponentPath + >, + { slots } + ) { + return () => + h( + MarkupField, + { + attrs: { + ...props, + type: type, + }, + }, + slots + ) + }, }) } diff --git a/packages/vue/src/components/VoidField.ts b/packages/vue/src/components/VoidField.ts index e6078df8ba6..95988add283 100644 --- a/packages/vue/src/components/VoidField.ts +++ b/packages/vue/src/components/VoidField.ts @@ -22,27 +22,27 @@ export default defineComponent>({ pattern: String, hidden: { type: Boolean, - default: undefined + default: undefined, }, visible: { type: Boolean, - default: undefined + default: undefined, }, editable: { type: Boolean, - default: undefined + default: undefined, }, disabled: { type: Boolean, - default: undefined + default: undefined, }, readOnly: { type: Boolean, - default: undefined + default: undefined, }, readPretty: { type: Boolean, - default: undefined + default: undefined, }, reactions: [Array, Function], }, @@ -50,29 +50,37 @@ export default defineComponent>({ // const { track } = useObserver() const formRef = useForm() const parentRef = useField() - const basePath = props.basePath !== undefined ? props.basePath : parentRef?.value?.address - const fieldRef = useAttach(() => formRef.value.createVoidField({ - ...props, - basePath, - ...getRawComponent(props) - }), [() => props.name, formRef]) + const basePath = + props.basePath !== undefined ? props.basePath : parentRef?.value?.address + const fieldRef = useAttach( + () => + formRef.value.createVoidField({ + ...props, + basePath, + ...getRawComponent(props), + }), + [() => props.name, formRef] + ) provide(FieldSymbol, fieldRef) - return () => h( - ReactiveField, - { - props: { - field: fieldRef.value + return () => + h( + ReactiveField, + { + props: { + field: fieldRef.value, + }, + }, + { + ...slots, + default: () => + slots.default && + slots.default({ + field: fieldRef.value, + form: fieldRef.value.form, + }), } - }, - { - ...slots, - default: () => slots.default && slots.default({ - field: fieldRef.value, - form: fieldRef.value.form - }) - } - ) - } + ) + }, }) as unknown as DefineComponent> diff --git a/packages/vue/src/hooks/useAttach.ts b/packages/vue/src/hooks/useAttach.ts index 7f26623a7de..8cff0f2ef86 100644 --- a/packages/vue/src/hooks/useAttach.ts +++ b/packages/vue/src/hooks/useAttach.ts @@ -5,22 +5,28 @@ interface IRecycleTarget { onUnmount: () => void } -export const useAttach = (creator: () => T, dependencies: Parameters[0]): Ref => { - +export const useAttach = ( + creator: () => T, + dependencies: Parameters[0] +): Ref => { const oldTargetRef = shallowRef(null) - watch(dependencies, (cur, prev, onInvalidate) => { - const target = creator() - if (oldTargetRef.value && target !== oldTargetRef.value) { - oldTargetRef.value.onUnmount() - } - oldTargetRef.value = target - target.onMount() + watch( + dependencies, + (cur, prev, onInvalidate) => { + const target = creator() + if (oldTargetRef.value && target !== oldTargetRef.value) { + oldTargetRef.value.onUnmount() + } + oldTargetRef.value = target + target.onMount() - onInvalidate(() => { - target.onUnmount() - }) - }, { immediate: true }) + onInvalidate(() => { + target.onUnmount() + }) + }, + { immediate: true } + ) return oldTargetRef } diff --git a/packages/vue/src/shared/connect.ts b/packages/vue/src/shared/connect.ts index 14b744d1338..ba23a6efa7e 100644 --- a/packages/vue/src/shared/connect.ts +++ b/packages/vue/src/shared/connect.ts @@ -4,81 +4,101 @@ import { isVue2, markRaw, defineComponent, DefineComponent } from 'vue-demi' import { isFn, isStr, FormPath, each } from '@formily/shared' import { isVoidField } from '@formily/core' import { observer } from '@formily/reactive-vue' -import { VueComponent, IComponentMapper, IStateMapper, VueComponentProps } from '../types' +import { + VueComponent, + IComponentMapper, + IStateMapper, + VueComponentProps, +} from '../types' import { useField } from '../hooks/useField' import h from './h' -export function mapProps(...args: IStateMapper>[]) { +export function mapProps( + ...args: IStateMapper>[] +) { return (target: T) => { - return observer(defineComponent>({ - // listeners is needed for vue2 - setup(props, { attrs, slots, listeners }: Record) { - const fieldRef = useField() + return observer( + defineComponent>({ + // listeners is needed for vue2 + setup(props, { attrs, slots, listeners }: Record) { + const fieldRef = useField() - const transform = (input: VueComponentProps, field: Formily.Core.Types.GeneralField) => args.reduce( - (props, mapper) => { - if (isFn(mapper)) { - props = Object.assign(props, mapper(props, field)) - } else { - each(mapper, (to, extract) => { - const extractValue = FormPath.getIn(field, extract) - const targetValue = isStr(to) ? to : extract - if (extract === 'value') { - if (to !== extract) { - delete props['value'] + const transform = ( + input: VueComponentProps, + field: Formily.Core.Types.GeneralField + ) => + args.reduce((props, mapper) => { + if (isFn(mapper)) { + props = Object.assign(props, mapper(props, field)) + } else { + each(mapper, (to, extract) => { + const extractValue = FormPath.getIn(field, extract) + const targetValue = isStr(to) ? to : extract + if (extract === 'value') { + if (to !== extract) { + delete props['value'] + } } - } - FormPath.setIn(props, targetValue, extractValue) - }) - } - return props - }, - input - ) + FormPath.setIn(props, targetValue, extractValue) + }) + } + return props + }, input) - return () => { - const newAttrs = transform({ ...attrs } as VueComponentProps, fieldRef.value) - return h( - target, - { - attrs: { - ...newAttrs + return () => { + const newAttrs = transform( + { ...attrs } as VueComponentProps, + fieldRef.value + ) + return h( + target, + { + attrs: { + ...newAttrs, + }, + on: listeners, }, - on: listeners - }, - slots - ) - } - }, - }) as unknown as DefineComponent>) + slots + ) + } + }, + }) as unknown as DefineComponent> + ) } } -export function mapReadPretty(component: C) { +export function mapReadPretty( + component: C +) { return (target: T) => { - return observer(defineComponent({ - setup(props, { attrs, slots, listeners }: Record) { - const fieldRef = useField() - return () => - h( - !isVoidField(fieldRef.value) && fieldRef.value.pattern === 'readPretty' - ? component - : target, - { - attrs: { - ...attrs, + return observer( + defineComponent({ + setup(props, { attrs, slots, listeners }: Record) { + const fieldRef = useField() + return () => + h( + !isVoidField(fieldRef.value) && + fieldRef.value.pattern === 'readPretty' + ? component + : target, + { + attrs: { + ...attrs, + }, + on: listeners, }, - on: listeners - }, - slots - ) - }, - }) as unknown as DefineComponent>) + slots + ) + }, + }) as unknown as DefineComponent> + ) } } -export function connect(target: T, ...args: IComponentMapper[]) { - +export function connect( + target: T, + ...args: IComponentMapper[] +) { const Component = args.reduce((target: VueComponent, mapper) => { return mapper(target) }, target) @@ -87,11 +107,11 @@ export function connect(target: T, ...args: IComponentMa const functionalComponent = { functional: true, render(h, context) { - return h((Component as Vue2Component), context.data, context.children) - } + return h(Component as Vue2Component, context.data, context.children) + }, } return markRaw(functionalComponent) - } else { + } else { const functionalComponent = defineComponent({ setup(props: VueComponentProps, { attrs, slots }) { return () => { diff --git a/packages/vue/src/shared/context.ts b/packages/vue/src/shared/context.ts index bf69e958a13..a0ab9f851b0 100644 --- a/packages/vue/src/shared/context.ts +++ b/packages/vue/src/shared/context.ts @@ -1,9 +1,14 @@ import { InjectionKey, Ref } from 'vue-demi' import { Schema } from '@formily/json-schema' import { ISchemaFieldFactoryOptions } from '../types' -export const FormSymbol: InjectionKey> = Symbol('form') -export const FieldSymbol: InjectionKey> = Symbol('field') -export const SchemaMarkupSymbol: InjectionKey> = Symbol('schemaMarkup') +export const FormSymbol: InjectionKey> = + Symbol('form') +export const FieldSymbol: InjectionKey> = + Symbol('field') +export const SchemaMarkupSymbol: InjectionKey> = + Symbol('schemaMarkup') export const SchemaSymbol: InjectionKey> = Symbol('schema') -export const SchemaExpressionScopeSymbol: InjectionKey = Symbol('schemaExpression') -export const SchemaOptionsSymbol: InjectionKey = Symbol('schemaOptions') +export const SchemaExpressionScopeSymbol: InjectionKey = + Symbol('schemaExpression') +export const SchemaOptionsSymbol: InjectionKey = + Symbol('schemaOptions') diff --git a/packages/vue/src/shared/fragment.ts b/packages/vue/src/shared/fragment.ts index 7e4f354cc94..a0268073edf 100644 --- a/packages/vue/src/shared/fragment.ts +++ b/packages/vue/src/shared/fragment.ts @@ -1,6 +1,6 @@ -import frag from 'vue-frag'; -import { VueComponent } from '../types'; -import { isVue2, defineComponent } from 'vue-demi'; +import frag from 'vue-frag' +import { VueComponent } from '../types' +import { isVue2, defineComponent } from 'vue-demi' export const Fragment = '#fragment' @@ -10,25 +10,30 @@ if (isVue2) { FragmentComponent = { name: 'Fragment', directives: { - frag + frag, }, - render (h) { + render(h) { const vm = this as any - return h('div', { - directives: [{ - name: 'frag' - }], - }, vm?.$slots?.default) - } + return h( + 'div', + { + directives: [ + { + name: 'frag', + }, + ], + }, + vm?.$slots?.default + ) + }, } } else { FragmentComponent = defineComponent({ name: 'Fragment', - setup (props: Record, { slots, attrs }) { + setup(props: Record, { slots, attrs }) { return () => slots?.default(attrs) - } + }, }) } export { FragmentComponent } - diff --git a/packages/vue/src/shared/h.ts b/packages/vue/src/shared/h.ts index 653ac9e9859..e195ad23b96 100644 --- a/packages/vue/src/shared/h.ts +++ b/packages/vue/src/shared/h.ts @@ -1,8 +1,8 @@ -import { h, isVue2 } from 'vue-demi'; +import { h, isVue2 } from 'vue-demi' import { Fragment, FragmentComponent } from './fragment' type RenderChildren = { - [key in string]?: (...args: any[]) => (VNode | string)[]; + [key in string]?: (...args: any[]) => (VNode | string)[] } // TODO: need to compatible with vue2 & vue3 @@ -11,13 +11,20 @@ type VNodeData = Record type VNode = any type VNodeChildren = any -const compatibleCreateElement = (tag: Tag, data: VNodeData, components: RenderChildren): any => { +const compatibleCreateElement = ( + tag: Tag, + data: VNodeData, + components: RenderChildren +): any => { if (isVue2) { - - const hInVue2 = h as ((tag: Tag, data?: VNodeData, components?: VNodeChildren) => VNode) + const hInVue2 = h as ( + tag: Tag, + data?: VNodeData, + components?: VNodeChildren + ) => VNode const scopedSlots = {} const children = [] - Object.keys(components).forEach(key => { + Object.keys(components).forEach((key) => { const func = components[key] if (typeof func === 'function') { if (func.length !== 0) { @@ -36,7 +43,7 @@ const compatibleCreateElement = (tag: Tag, data: VNodeData, components: RenderCh } else { newData.scopedSlots = { ...newData.scopedSlots, - ...scopedSlots + ...scopedSlots, } } } @@ -55,13 +62,17 @@ const compatibleCreateElement = (tag: Tag, data: VNodeData, components: RenderCh if (tag === Fragment) { tag = FragmentComponent } - const hInVue3 = h as ((tag: Tag, data?: VNodeData, components?: RenderChildren) => VNode) + const hInVue3 = h as ( + tag: Tag, + data?: VNodeData, + components?: RenderChildren + ) => VNode const newData = {} - Object.keys(data).forEach(key => { + Object.keys(data).forEach((key) => { if (key === 'on') { if (data[key]) { const events = Object.keys(data[key]) - events.forEach(event => { + events.forEach((event) => { const eventName = `on${event[0].toUpperCase()}${event.slice(1)}` newData[eventName] = data[key][event] }) @@ -78,6 +89,4 @@ const compatibleCreateElement = (tag: Tag, data: VNodeData, components: RenderCh export default compatibleCreateElement -export { - compatibleCreateElement as h -} +export { compatibleCreateElement as h } diff --git a/packages/vue/src/types/index.ts b/packages/vue/src/types/index.ts index c777181384e..4930a4df61e 100644 --- a/packages/vue/src/types/index.ts +++ b/packages/vue/src/types/index.ts @@ -3,25 +3,25 @@ import type { Vue3Component } from './vue3' import type { FormPathPattern } from '@formily/shared' import type { ISchema, Schema, SchemaKey } from '@formily/json-schema' -export type VueComponent> = Vue2Component | Vue3Component | Props +export type VueComponent> = + | Vue2Component + | Vue3Component + | Props export type VueComponentOptionsWithProps = { props: unknown } -export type VueComponentProps = T extends VueComponentOptionsWithProps ? T['props'] : T +export type VueComponentProps = + T extends VueComponentOptionsWithProps ? T['props'] : T export interface IProviderProps { form: Formily.Core.Models.Form } -export type IFieldProps< - D extends VueComponent, - C extends VueComponent -> = Formily.Core.Types.IFieldFactoryProps +export type IFieldProps = + Formily.Core.Types.IFieldFactoryProps -export type IVoidFieldProps< - D extends VueComponent, - C extends VueComponent -> = Formily.Core.Types.IVoidFieldFactoryProps +export type IVoidFieldProps = + Formily.Core.Types.IVoidFieldFactoryProps export interface IComponentMapper { (target: T): VueComponent @@ -33,7 +33,6 @@ export type IStateMapper = } | ((props: Props, field: Formily.Core.Types.GeneralField) => Props) - export type SchemaComponents = Record export interface ISchemaFieldFactoryOptions< @@ -86,32 +85,28 @@ export type KeyOfComponents = keyof T export type ComponentPath< T, Key extends KeyOfComponents = KeyOfComponents -> = Key extends string - ? Key - : never +> = Key extends string ? Key : never export type ComponentPropsByPathValue< T extends SchemaComponents, P extends ComponentPath -> = P extends keyof T - ? VueComponentProps - : never +> = P extends keyof T ? VueComponentProps : never export type ISchemaMarkupFieldProps< Components extends SchemaComponents, Decorator extends ComponentPath, Component extends ComponentPath > = ISchema< - Decorator, - Component, - ComponentPropsByPathValue, - ComponentPropsByPathValue, - Formily.Core.Types.FormPatternTypes, - Formily.Core.Types.FieldDisplayTypes, - Formily.Core.Types.FieldValidator, - string, - Formily.Core.Types.GeneralField - > + Decorator, + Component, + ComponentPropsByPathValue, + ComponentPropsByPathValue, + Formily.Core.Types.FormPatternTypes, + Formily.Core.Types.FieldDisplayTypes, + Formily.Core.Types.FieldValidator, + string, + Formily.Core.Types.GeneralField +> export type ISchemaTypeFieldProps< Components extends SchemaComponents, diff --git a/packages/vue/src/types/vue-demi.d.ts b/packages/vue/src/types/vue-demi.d.ts index 6610ff5803f..27dcda60b08 100644 --- a/packages/vue/src/types/vue-demi.d.ts +++ b/packages/vue/src/types/vue-demi.d.ts @@ -2,5 +2,4 @@ import type { DefineComponent as Vue3DefineComponent } from '@type-helper/vue3' declare module 'vue-demi' { type DefineComponent> = Vue3DefineComponent - } diff --git a/packages/vue/src/types/vue2.ts b/packages/vue/src/types/vue2.ts index 5601ef44964..7ce868cad4f 100644 --- a/packages/vue/src/types/vue2.ts +++ b/packages/vue/src/types/vue2.ts @@ -1,4 +1,3 @@ import type { Component, ComponentOptions } from 'vue' export type Vue2ComponentOptions = ComponentOptions export type Vue2Component = Component - diff --git a/packages/vue/src/types/vue3.ts b/packages/vue/src/types/vue3.ts index b0d0902ac93..c38bf18d2f6 100644 --- a/packages/vue/src/types/vue3.ts +++ b/packages/vue/src/types/vue3.ts @@ -1,6 +1,3 @@ import type { Component, ComponentOptions } from '@type-helper/vue3' -export { - Component as Vue3Component, - ComponentOptions as Vue3ComponentOptions -} +export { Component as Vue3Component, ComponentOptions as Vue3ComponentOptions } diff --git a/packages/vue/src/utils/getRawComponent.ts b/packages/vue/src/utils/getRawComponent.ts index be95c8f5242..054c4db1e8a 100644 --- a/packages/vue/src/utils/getRawComponent.ts +++ b/packages/vue/src/utils/getRawComponent.ts @@ -1,7 +1,9 @@ import { IFieldProps, VueComponent } from '../types' import { toRaw } from 'vue-demi' -export const getRawComponent = (props: IFieldProps) => { +export const getRawComponent = ( + props: IFieldProps +) => { const { component, decorator } = props let newComponent: typeof props.component let newDecorator: typeof props.component diff --git a/packages/vue/src/utils/resolveSchemaProps.ts b/packages/vue/src/utils/resolveSchemaProps.ts index 710a0af6f7a..ce6983e21f9 100644 --- a/packages/vue/src/utils/resolveSchemaProps.ts +++ b/packages/vue/src/utils/resolveSchemaProps.ts @@ -1,8 +1,8 @@ -import { paramCase } from "@formily/shared"; +import { paramCase } from '@formily/shared' export const resolveSchemaProps = (props: Record) => { const newProps = {} - Object.keys(props).forEach(key => { + Object.keys(props).forEach((key) => { if (key.indexOf('x') === 0) { newProps[paramCase(key)] = props[key] } else { diff --git a/scripts/build-style/buildAllStyles.ts b/scripts/build-style/buildAllStyles.ts index c47cf9d043f..600a20e7b2d 100644 --- a/scripts/build-style/buildAllStyles.ts +++ b/scripts/build-style/buildAllStyles.ts @@ -1,39 +1,6 @@ -import fs from 'fs-extra' -import { join } from 'path' -import { identifier } from 'safe-identifier' - import typescript from 'rollup-plugin-typescript2' - import { build, getRollupBasePlugin } from './helper' -/** - * @ref https://github.com/egoist/rollup-plugin-postcss/blob/master/src/postcss-loader.js - */ -const styleInjectPath = require - .resolve('style-inject/dist/style-inject.es') - .replace(/[\\/]+/g, '/') - -let styleInjectText = '' -const generateCssStyleInject = async (cssFilePath: string) => { - if (!styleInjectText) { - styleInjectText = (await fs.readFile(styleInjectPath)).toString() - styleInjectText = styleInjectText.replace('export default styleInject;', '') - } - - let cssContent = (await fs.readFile(cssFilePath)).toString() - - // 删除可能存在的 sourceMap 注释 - cssContent = cssContent.replace(/\n\/\*#(.*)css.map\s\*\//g, '') - - const cssVariableName = identifier('css', true) - - return fs.outputFile( - cssFilePath.replace('.css', '.js'), - styleInjectText + - `\nvar ${cssVariableName} = "${cssContent}";\n\nstyleInject(${cssVariableName})` - ) -} - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export const buildAllStyles = async (outputFile: string) => { await build({ @@ -55,5 +22,4 @@ export const buildAllStyles = async (outputFile: string) => { ], }) - return generateCssStyleInject(join(process.cwd(), outputFile)) } diff --git a/scripts/build-style/index.ts b/scripts/build-style/index.ts index e5a4d82b736..5db7d776255 100644 --- a/scripts/build-style/index.ts +++ b/scripts/build-style/index.ts @@ -1,22 +1,10 @@ import { runCopy, CopyBaseOptions } from './copy' import { buildAllStyles } from './buildAllStyles' -import { buildStyle, BuildStyleOptions } from './buildStyle' // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export function build({ allStylesOutputFile, ...opts -}: CopyBaseOptions & - Omit & { allStylesOutputFile: string }) { - return Promise.all([ - buildAllStyles(allStylesOutputFile), - runCopy({ - ...opts, - resolveForItem: (filename) => { - if (/\/style\.ts$/.test(filename)) { - buildStyle({ ...opts, filename }) - } - }, - }), - ]) +}: CopyBaseOptions & { allStylesOutputFile: string }) { + return Promise.all([buildAllStyles(allStylesOutputFile), runCopy(opts)]) } diff --git a/yarn.lock b/yarn.lock index 8616fe2ae96..cccab366c91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12129,6 +12129,11 @@ move-concurrently@^1.0.1: rimraf "^2.5.4" run-queue "^1.0.3" +mri@^1.1.5: + version "1.1.6" + resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6" + integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ== + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -12172,6 +12177,17 @@ multimatch@^2.1.0: arrify "^1.0.0" minimatch "^3.0.0" +multimatch@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-4.0.0.tgz#8c3c0f6e3e8449ada0af3dd29efb491a375191b3" + integrity sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ== + dependencies: + "@types/minimatch" "^3.0.3" + array-differ "^3.0.0" + array-union "^2.1.0" + arrify "^2.0.1" + minimatch "^3.0.4" + multimatch@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6" @@ -14229,6 +14245,18 @@ pretty-format@^26.0.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pretty-quick@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-3.1.0.tgz#cb172e9086deb57455dea7c7e8f136cd0a4aef6c" + integrity sha512-DtxIxksaUWCgPFN7E1ZZk4+Aav3CCuRdhrDSFZENb404sYMtuo9Zka823F+Mgeyt8Zt3bUiCjFzzWYE9LYqkmQ== + dependencies: + chalk "^3.0.0" + execa "^4.0.0" + find-up "^4.1.0" + ignore "^5.1.4" + mri "^1.1.5" + multimatch "^4.0.0" + pretty-time@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"