refactor(vue): switch type files for vue2/vue3 in postinstall (#2640)

* refactor(vue): switch type files for vue2/vue3 in postinstall * fix(vue): fix postinstall error
alibaba · Dec 18, 2021 · 6015b7c · 6015b7c
1 parent ff69314
commit 6015b7c
Show file tree

Hide file tree

Showing 24 changed files with 619 additions and 730 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ lib/
 esm/
 temp_esm/
 dist/
+type-artefacts/
 build/
 coverage/
 node_modules/
@@ -25,4 +26,4 @@ package.zip
 doc-site
 .lerna-changelog
 .history
-.lint-report.log
+.lint-report.log
diff --git a/packages/vue/bin/formily-vue-fix.js b/packages/vue/bin/formily-vue-fix.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+'use strict'
+require('../scripts/postinstall')
diff --git a/packages/vue/bin/formily-vue-switch.js b/packages/vue/bin/formily-vue-switch.js
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+'use strict'
+require('../scripts/switch-cli')
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -8,18 +8,26 @@
   "unpkg": "dist/formily.vue.umd.production.js",
   "jsdelivr": "dist/formily.vue.umd.production.js",
   "jsnext:main": "esm",
-  "types": "lib/index.d.ts",
+  "types": "type-artefacts/cur/index.d.ts",
   "engines": {
     "npm": ">=3.0.0"
   },
   "scripts": {
+    "postinstall": "node ./scripts/postinstall.js",
     "start": "vuepress dev docs",
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd",
+    "build": "rimraf -rf lib esm dist type-artefacts && npm run build:cjs && npm run build:esm && npm run build:umd && npm run build:types",
     "build:cjs": "tsc --project tsconfig.build.json",
     "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
     "build:umd": "rollup --config",
+    "build:types": "npm run build:types-vue2 && npm run build:types-vue3 && rimraf type-artefacts/**/*.js type-artefacts/**/**/*.js",
+    "build:types-vue2": "tsc --project tsconfig.types.json --outDir type-artefacts/v2",
+    "build:types-vue3": "npx vue-demi-switch 3 vue3 && tsc --project tsconfig.types.json --outDir type-artefacts/v3 && tsc --project tsconfig.types.json --outDir type-artefacts/cur && npx vue-demi-switch 2",
     "build:docs": "vuepress build docs"
   },
+  "bin": {
+    "formily-vue-fix": "bin/formily-vue-fix.js",
+    "formily-vue-switch": "bin/formily-vue-switch.js"
+  },
   "devDependencies": {
     "@ant-design/icons": "^2.1.1",
     "@ant-design/icons-vue": "^2.0.0",
@@ -32,6 +40,7 @@
     "codesandbox": "^2.2.3",
     "core-js": "^2.4.0",
     "vue": "^2.6.12",
+    "vue3": "npm:vue@3",
     "vuepress": "^1.8.2",
     "vuepress-plugin-typescript": "^0.3.1"
   },
@@ -42,8 +51,7 @@
     "@formily/reactive-vue": "2.0.6",
     "@formily/shared": "2.0.6",
     "@formily/validator": "2.0.6",
-    "@type-helper/vue2": "npm:vue@2",
-    "@type-helper/vue3": "npm:vue@3",
+    "fs-extra": "^10.0.0",
     "vue-demi": "^0.9.0",
     "vue-frag": "^1.1.4"
   },

diff --git a/packages/vue/scripts/postinstall.js b/packages/vue/scripts/postinstall.js
@@ -0,0 +1,13 @@
+const { switchVersion, loadModule } = require('./utils.js')
+
+const Vue = loadModule('vue')
+
+try {
+  if (Vue.version.startsWith('2.')) {
+    switchVersion(2)
+  } else if (Vue.version.startsWith('3.')) {
+    switchVersion(3)
+  }
+} catch (err) {
+  // nothing to do
+}
diff --git a/packages/vue/scripts/switch-cli.js b/packages/vue/scripts/switch-cli.js
@@ -0,0 +1,24 @@
+const { switchVersion } = require('./utils.js')
+const {
+  switchVersion: switchVueDemiVersion,
+} = require('vue-demi/scripts/utils.js')
+
+const version = process.argv[2]
+const vueEntry = process.argv[3] || 'vue'
+
+if (version == '2') {
+  switchVersion(2)
+  console.log(`[formily-vue] Switched types for Vue 2`)
+  switchVueDemiVersion(2, vueEntry)
+  console.log(`[vue-demi] Switched for Vue 2 (entry: "${vueEntry}")`)
+} else if (version == '3') {
+  switchVersion(3)
+  console.log(`[formily-vue] Switched types for Vue 3`)
+  switchVueDemiVersion(3, vueEntry)
+  console.log(`[vue-demi] Switched for Vue 3 (entry: "${vueEntry}")`)
+} else {
+  console.warn(
+    `[formily-vue] expecting version "2" or "3" but got "${version}"`
+  )
+  process.exit(1)
+}
diff --git a/packages/vue/scripts/utils.js b/packages/vue/scripts/utils.js
@@ -0,0 +1,13 @@
+const { loadModule } = require('vue-demi/scripts/utils.js')
+const fs = require('fs-extra')
+const path = require('path')
+
+const dir = path.resolve(__dirname, '..', 'type-artefacts')
+
+function switchVersion(version) {
+  fs.emptyDirSync(`${dir}/cur`)
+  fs.copySync(`${dir}/v${version}`, `${dir}/cur`)
+}
+
+module.exports.loadModule = loadModule
+module.exports.switchVersion = switchVersion
diff --git a/packages/vue/src/components/ArrayField.ts b/packages/vue/src/components/ArrayField.ts
@@ -5,107 +5,77 @@ import ReactiveField from './ReactiveField'
 import { FieldSymbol } from '../shared/context'
 import h from '../shared/h'
 import { getRawComponent } from '../utils/getRawComponent'
-import { observer } from '@formily/reactive-vue'
 
 import type { IArrayFieldProps, DefineComponent } from '../types'
 
-export default observer(
-  defineComponent<IArrayFieldProps>({
-    name: 'ArrayField',
-    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],
-    },
-    setup(props: IArrayFieldProps, { slots }) {
-      const formRef = useForm()
-      const parentRef = useField()
+export default defineComponent({
+  name: 'ArrayField',
+  props: [
+    'name',
+    'basePath',
+    'title',
+    'description',
+    'value',
+    'initialValue',
+    'required',
+    'display',
+    'pattern',
+    'hidden',
+    'visible',
+    'editable',
+    'disabled',
+    'readOnly',
+    'readPretty',
+    'dataSource',
+    'validateFirst',
+    'validator',
+    'decorator',
+    'component',
+    'reactions',
+    'content',
+    'data',
+  ],
+  setup(props: IArrayFieldProps, { slots }) {
+    const formRef = useForm()
+    const parentRef = useField()
 
-      const basePath = computed(() =>
-        props.basePath !== undefined
-          ? props.basePath
-          : parentRef?.value?.address
-      )
-      const createField = () =>
-        formRef.value.createArrayField({
-          ...props,
-          basePath: basePath.value,
-          ...getRawComponent(props),
-        })
-      const [fieldRef, checker] = useAttach(createField())
-      watch(
-        () => props,
-        () => (fieldRef.value = checker(createField())),
-        { deep: true }
-      )
-      watch(
-        [formRef, parentRef],
-        () => (fieldRef.value = checker(createField()))
-      )
+    const basePath = computed(() =>
+      props.basePath !== undefined ? props.basePath : parentRef?.value?.address
+    )
+    const createField = () =>
+      formRef.value.createArrayField({
+        ...props,
+        basePath: basePath.value,
+        ...getRawComponent(props),
+      })
+    const [fieldRef, checker] = useAttach(createField())
+    watch(
+      () => props,
+      () => (fieldRef.value = checker(createField())),
+      { deep: true }
+    )
+    watch([formRef, parentRef], () => (fieldRef.value = checker(createField())))
 
-      provide(FieldSymbol, fieldRef)
+    provide(FieldSymbol, fieldRef)
 
-      return () => {
-        const field = fieldRef.value
-        const componentData = {
-          props: {
-            field,
-          },
-        }
-        const children = {
-          ...slots,
-        }
-        if (slots.default) {
-          children.default = () =>
-            slots.default({
-              field: field,
-              form: field.form,
-            })
-        }
-        return h(ReactiveField, componentData, children)
+    return () => {
+      const field = fieldRef.value
+      const componentData = {
+        props: {
+          field,
+        },
       }
-    },
-  }) as unknown as DefineComponent<IArrayFieldProps>
-)
+      const children = {
+        ...slots,
+      }
+      if (slots.default) {
+        children.default = () =>
+          slots.default({
+            field: field,
+            form: field.form,
+          })
+      }
+      return h(ReactiveField, componentData, children)
+    }
+  },
+}) as DefineComponent<IArrayFieldProps>
diff --git a/packages/vue/src/components/Field.ts b/packages/vue/src/components/Field.ts
@@ -8,55 +8,33 @@ import { getRawComponent } from '../utils/getRawComponent'
 
 import type { IFieldProps, DefineComponent } from '../types'
 
-export default defineComponent<IFieldProps>({
+export default defineComponent({
   name: 'Field',
-  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],
-  },
+  props: [
+    'name',
+    'basePath',
+    'title',
+    'description',
+    'value',
+    'initialValue',
+    'required',
+    'display',
+    'pattern',
+    'hidden',
+    'visible',
+    'editable',
+    'disabled',
+    'readOnly',
+    'readPretty',
+    'dataSource',
+    'validateFirst',
+    'validator',
+    'decorator',
+    'component',
+    'reactions',
+    'content',
+    'data',
+  ],
   setup(props: IFieldProps, { slots }) {
     const formRef = useForm()
     const parentRef = useField()
@@ -100,4 +78,4 @@ export default defineComponent<IFieldProps>({
       return h(ReactiveField, componentData, children)
     }
   },
-}) as unknown as DefineComponent<IFieldProps>
+}) as DefineComponent<IFieldProps>