feat(vue): add vue3 compatibly (#1138)

* feat(vue): add vue3 compatibly

* feat: add .yarnrc

Author: MisicDemone

.npmrc

@@ -0,0 +1 @@
+registry "https://registry.yarnpkg.com"

.yarnrc

@@ -57,8 +57,7 @@
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.8.2",
     "@umijs/plugin-sass": "^1.1.1",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vue/composition-api": "^1.0.0-beta.23",
+    "@vue/composition-api": "^1.0.0-rc.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
     "antd": "^4.0.0",
     "chalk": "^2.4.2",
@@ -114,7 +113,6 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "rollup-plugin-vue": "^6.0.0",
     "semver-regex": "^2.0.0",
     "staged-git-files": "^1.1.2",
     "style-loader": "^1.1.3",
@@ -125,6 +123,7 @@
     "ts-node": "^9.1.1",
     "typescript": "^4.1.2",
     "vue": "^2.6.12",
+    "vue-demi": "latest",
     "vue-eslint-parser": "^7.1.1",
     "vue-template-compiler": "^2.6.12",
     "webpack": "^4.41.5",

package.json

@@ -1,12 +1,12 @@
 ## Usage
 
-### Preparation
+### Requirement
 
-```js
-import VueCompositionAPI from '@vue/composition-api'
+vue^2.6.0 + @vue/composition-api^1.0.0-beta.1
 
-Vue.use(VueCompositionAPI)
-```
+Or
+
+vue>=3.0.0-rc.0
 
 ### Quick Start
 
@@ -41,7 +41,6 @@ Vue.use(VueCompositionAPI)
       >
         <template #default="{ field }">
           <div>
-            {{ log(field) }}
             <div v-for="(item, index) in field.value || []" :key="item.id">
               <Field :name="`${index}.dd`" required :component="[Input]" />
               <Field :name="`${index}.ee`" :component="[Input]" />
@@ -112,7 +111,7 @@ Vue.use(VueCompositionAPI)
     </Field>
     <FormConsumer>
       <template #default="{ form }">
-        {{ JSON.stringify(form.query('aa').get(.get("value")) }}
+        {{ JSON.stringify(form.query('aa').get().value) }}
       </template>
     </FormConsumer>
     <FormConsumer>
@@ -144,7 +143,7 @@ Vue.use(VueCompositionAPI)
   </FormProvider>
 </template>
 
-<script lang="ts">
+<script>
   import { Form, Input, Select, Card, Button } from 'ant-design-vue'
   import {
     createForm,
@@ -157,9 +156,10 @@ Vue.use(VueCompositionAPI)
     connect,
     mapProps,
     isVoidField,
-  } from '../src/index'
+  } from '@formily/vue'
 
   const FormItem = connect(
+    Form.Item,
     mapProps(
       { extract: 'validateStatus' },
       { extract: 'title', to: 'label' },
@@ -179,9 +179,10 @@ Vue.use(VueCompositionAPI)
         }
       }
     )
-  )(Form.Item)
+  )
 
   export default {
+    name: 'demo',
     components: {
       FormProvider,
       FormConsumer,
@@ -222,8 +223,8 @@ Vue.use(VueCompositionAPI)
       }
     },
     methods: {
-      log(v) {
-        console.log(v)
+      log(...v) {
+        console.log(...v)
       },
     },
   }

packages/vue/README.md

@@ -13,16 +13,20 @@
     "npm": ">=3.0.0"
   },
   "scripts": {
-    "build": "rimraf -rf lib esm dist && rollup --config"
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd",
+    "build:cjs": "tsc --declaration",
+    "build:esm": "tsc --declaration --module es2015 --outDir esm",
+    "build:umd": "rollup --config"
   },
   "dependencies": {
     "@formily/core": "^2.0.0-beta.3",
     "@formily/shared": "^2.0.0-beta.3",
-    "@formily/validator": "^2.0.0-beta.3"
+    "@formily/validator": "^2.0.0-beta.3",
+    "vue-demi": "latest"
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-beta.23",
+    "@vue/composition-api": "^1.0.0-beta.1",
     "mobx": "^6.0.3",
-    "vue": ">=2.6.0"
+    "vue": "^2.6.0 || >=3.0.0-rc.0"
   }
 }

packages/vue/package.json

@@ -1,55 +1,3 @@
-import vue from 'rollup-plugin-vue'
-import typescript from 'rollup-plugin-typescript2'
-import resolve from 'rollup-plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
 import baseConfig from '../../scripts/rollup.base'
-import path from 'path'
 
-export default [
-  ...baseConfig('formily.vue', 'Formily.Vue'),
-  {
-    input: 'src/index.ts',
-    output: {
-      format: 'esm',
-      file: 'esm/index.js',
-      name: 'Formily.Vue',
-    },
-    external: ['vue', '@vue/composition-api', 'mobx', '@formily/core'],
-    plugins: [
-      typescript({
-        tsconfig: path.resolve(__dirname, 'tsconfig.json'),
-        tsconfigOverride: {
-          compilerOptions: {
-            module: 'ESNext',
-          },
-        },
-      }),
-      vue(),
-      resolve(),
-      commonjs(),
-    ],
-  },
-  // Browser build.
-  {
-    input: 'src/index.ts',
-    output: {
-      format: 'cjs',
-      file: 'lib/index.js',
-      name: 'Formily.Vue',
-    },
-    external: ['vue', '@vue/composition-api', 'mobx', '@formily/core'],
-    plugins: [
-      typescript({
-        tsconfig: path.resolve(__dirname, 'tsconfig.json'),
-        tsconfigOverride: {
-          compilerOptions: {
-            module: 'ESNext',
-          },
-        },
-      }),
-      vue(),
-      resolve(),
-      commonjs(),
-    ],
-  },
-]
+export default baseConfig('formily.vue', 'Formily.Vue')

packages/vue/rollup.config.js

@@ -1,17 +1,12 @@
-<template>
-  <ReactiveField :field="field">
-    <slot :field="field" :form="form"></slot>
-  </ReactiveField>
-</template>
-
-<script lang="ts">
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue-demi'
 import { useField, useForm } from '../hooks'
 import { useAttach } from '../hooks/useAttach'
-import { FieldSymbol } from '../shared/context'
 import { VueComponent, IFieldProps } from '../types'
-import ReactiveField from './ReactiveField.vue'
+import ReactiveField from './ReactiveField'
 import { defineObservableComponent } from '../utils/define-observable-component'
+import { FieldSymbol } from '../shared/context'
+import h from '../utils/compatible-create-element'
+import { getRowComponentFromProps } from '../utils/get-row-component-from-props'
 
 export default defineObservableComponent({
   name: 'ArrayField',
@@ -32,27 +27,43 @@ export default defineObservableComponent({
     pattern: String,
     validateFirst: Boolean,
     validator: {},
-    reactions: Array
+    reactions: Array,
   },
   observableSetup<D extends VueComponent, C extends VueComponent>(
     collect,
-    props: IFieldProps<D, C>
+    props: IFieldProps<D, C>,
+    { slots }
   ) {
     const form = useForm()
     const parent = useField()
     const basePath = props.basePath ? props.basePath : parent?.address
     const field = useAttach(
       form.createArrayField({
         ...props,
-        basePath
+        basePath,
+        ...getRowComponentFromProps(props)
       })
     )
     provide(FieldSymbol, field)
 
-    return collect({
+    collect({
       field,
       form: field.form
     })
+
+    return () => h(
+      ReactiveField, 
+      {
+        props: {
+          field
+        }
+      },
+      {
+        default: () => slots.default && slots.default({
+          field,
+          form: field.form
+        })
+      }
+    )
   }
-})
-</script>
+})

packages/vue/src/components/ArrayField.vue packages/vue/src/components/ArrayField.ts

@@ -1,17 +1,12 @@
-<template>
-  <ReactiveField :field="field">
-    <slot :field="field" :form="field.form"></slot>
-  </ReactiveField>
-</template>
-
-<script lang="ts">
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue-demi'
 import { useField, useForm } from '../hooks'
 import { useAttach } from '../hooks/useAttach'
 import { FieldSymbol } from '../shared/context'
 import { VueComponent, IFieldProps } from '../types'
-import ReactiveField from './ReactiveField.vue'
+import ReactiveField from './ReactiveField'
 import { defineObservableComponent } from '../utils/define-observable-component'
+import h from '../utils/compatible-create-element'
+import { getRowComponentFromProps } from '../utils/get-row-component-from-props'
 
 export default defineObservableComponent({
   name: 'Field',
@@ -32,26 +27,43 @@ export default defineObservableComponent({
     pattern: String,
     validateFirst: Boolean,
     validator: {},
-    reactions: Array
+    reactions: Array,
   },
   observableSetup<D extends VueComponent, C extends VueComponent>(
     collect,
-    props: IFieldProps<D, C>
+    props: IFieldProps<D, C>,
+    { slots }
   ) {
     const form = useForm()
     const parent = useField()
     const basePath = props.basePath ? props.basePath : parent?.address
     const field = useAttach(
       form.createField({
         ...props,
-        basePath
+        basePath,
+        ...getRowComponentFromProps(props)
       })
     )
     provide(FieldSymbol, field)
 
-    return collect({
-      field
+    collect({
+      field,
+      form: field.form
     })
+
+    return () => h(
+      ReactiveField, 
+      {
+        props: {
+          field
+        }
+      },
+      {
+        default: () => slots.default && slots.default({
+          field,
+          form: field.form
+        })
+      }
+    )
   }
-})
-</script>
+})

packages/vue/src/components/Field.vue packages/vue/src/components/Field.ts

@@ -0,0 +1,22 @@
+import { defineObservableComponent } from '../utils/define-observable-component'
+import { useForm } from '../hooks'
+import h from '../utils/compatible-create-element'
+
+export default defineObservableComponent({
+  name: 'FormConsumer',
+  observableSetup(collect, props, { attrs, slots }) {
+    const form = useForm()
+    collect({
+      form
+    })
+    return () => h(
+      'div',
+      { attrs },
+      {
+        default: () => slots.default && slots.default({
+          form
+        })
+      }
+    )
+  }
+})