chore(examples): add vue2 and vue3 playground

John60676 · John60676 · commit 3615027d1ac6 · 2022-02-08T18:14:16.000+08:00
diff --git a/build/vite-vue2.config.ts b/build/vite-vue2.config.ts
@@ -0,0 +1,14 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import { createVuePlugin } from 'vite-plugin-vue2';
+
+export default defineConfig({
+  clearScreen: false,
+  resolve: {
+    alias: {
+      'vue-request': path.resolve(__dirname, '../src/index.ts'),
+      vue: 'vue2',
+    },
+  },
+  plugins: [createVuePlugin()],
+});
diff --git a/build/vite.config.ts b/build/vite.config.ts
@@ -8,10 +8,8 @@ export default defineConfig({
   resolve: {
     alias: {
       'vue-request': path.resolve(__dirname, '../src/index.ts'),
+      vue: 'vue3',
     },
   },
   plugins: [vue(), vueJsx()],
-  optimizeDeps: {
-    exclude: ['vue-demi'],
-  },
 });
diff --git a/examples/vue2/App.vue b/examples/vue2/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <button @click="() => run()">run</button>
+    <br />
+    {{ loading ? 'loading...' : data }}
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api';
+import { useRequest } from 'vue-request';
+function testService() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('success');
+    }, 1000);
+  });
+}
+
+export default defineComponent({
+  setup() {
+    const { run, data, loading } = useRequest(testService);
+    return {
+      run,
+      data,
+      loading,
+    };
+  },
+});
+</script>
diff --git a/examples/vue2/index.html b/examples/vue2/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>vue-request</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/vue2/main.js b/examples/vue2/main.js
@@ -0,0 +1,12 @@
+import VCA, { createApp, h } from '@vue/composition-api';
+import Vue from 'vue2';
+
+import App from './App.vue';
+
+Vue.use(VCA);
+
+const app = createApp({
+  render: () => h(App),
+});
+
+app.mount('#app');
diff --git a/examples/vue3/App.tsx b/examples/vue3/App.tsx
@@ -1,5 +1,5 @@
-import { defineComponent } from 'vue';
 import { useRequest } from 'vue-request';
+import { defineComponent } from 'vue3';
 
 function testService() {
   return new Promise<string>(resolve => {
diff --git a/examples/vue3/index.html b/examples/vue3/index.html
diff --git a/examples/vue3/main.ts b/examples/vue3/main.ts
@@ -1,4 +1,5 @@
-import { createApp } from 'vue';
+import { createApp } from 'vue3';
+
 import App from './App';
 
 createApp(App).mount('#app');
diff --git a/package.json b/package.json
@@ -30,15 +30,17 @@
   ],
   "scripts": {
     "build": "yarn clean && rollup --config ./build/rollup.config.js",
-    "dev": "yarn vite ./example",
+    "dev": "vue-demi-switch 3 vue3 && vite --config ./build/vite.config.ts ./examples/vue3",
+    "dev:2": "vue-demi-switch 2 vue2 && vite --config ./build/vite-vue2.config.ts ./examples/vue2",
+    "test": "vue-demi-switch 3 vue3 && jest --coverage",
+    "test:2": "vue-demi-switch 2 vue2 && jest --coverage",
     "clean": "rimraf dist/*",
-    "test": "jest --coverage",
     "publishing": "np",
     "changelog": "standard-version && standard-version -i CHANGELOG.zh-CN.md -o CHANGELOG.zh-CN.md",
     "release": "yarn build && yarn publishing",
     "lint": "eslint -c ./.eslintrc.js './{src,scripts,build}/**/*.{js,ts,tsx}'",
     "format": "prettier -w '**/*.ts?(x)'",
-    "vite": "vite --config ./build/vite.config.ts"
+    "postinstall": "patch-package"
   },
   "husky": {
     "hooks": {
@@ -71,30 +73,31 @@
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^27.4.0",
     "@types/mockjs": "^1.0.3",
+    "@types/node": "^17.0.16",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
     "@vitejs/plugin-vue": "^1.2.1",
     "@vitejs/plugin-vue-jsx": "^1.1.3",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
     "@vue/compiler-sfc": "^3.0.6",
-    "@vue/test-utils": "^2.0.0-beta.8",
+    "@vue/composition-api": "^1.4.6",
     "axios": "^0.21.1",
-    "babel-jest": "^26.6.0",
+    "babel-jest": "^27.5.0",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-vue": "^7.0.0-0",
     "fetch-mock": "^9.10.7",
     "husky": "^4.3.0",
-    "jest": "^26.6.0",
+    "jest": "^27.5.0",
     "jest-environment-jsdom-global": "^2.0.4",
     "lint-staged": "^10.5.2",
     "mockjs": "^1.1.0",
-    "node-fetch": "^2.6.1",
     "np": "^7.0.0",
+    "patch-package": "^6.4.7",
     "prettier": "^2.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.33.1",
@@ -103,11 +106,13 @@
     "simple-git": "^2.21.0",
     "sort-package-json": "^1.50.0",
     "standard-version": "^9.1.1",
-    "ts-jest": "^26.4.1",
+    "ts-jest": "^27.1.3",
     "typescript": "^4.0.5",
     "vite": "^2.1.5",
-    "vue": "^3.0.2",
-    "vue2": "npm:vue@2"
+    "vite-plugin-vue2": "^1.9.2",
+    "vue-template-compiler": "^2.6.14",
+    "vue2": "npm:vue@2",
+    "vue3": "npm:vue@3"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",
diff --git a/tsconfig.json b/tsconfig.json
@@ -12,11 +12,11 @@
     "declaration": true,
     "declarationDir": "dist/types",
     "baseUrl": "./",
-    "types": ["jest", "@vue/test-utils"],
+    "types": ["jest", "node"],
     "paths": {
       "vue-request": ["src/index.ts"]
     }
   },
-  "include": ["src", "example", "**/__tests__/**/*"],
+  "include": ["src", "examples", "**/__tests__/**/*"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -12,11 +12,11 @@`
`12`	`12`	`"declaration": true,`
`13`	`13`	`"declarationDir": "dist/types",`
`14`	`14`	`"baseUrl": "./",`
`15`		`- "types": ["jest", "@vue/test-utils"],`
	`15`	`+ "types": ["jest", "node"],`
`16`	`16`	`"paths": {`
`17`	`17`	`"vue-request": ["src/index.ts"]`
`18`	`18`	`}`
`19`	`19`	`},`
`20`		`- "include": ["src", "example", "/__tests__//*"],`
	`20`	`+ "include": ["src", "examples", "/__tests__//*"],`
`21`	`21`	`"exclude": ["node_modules", "dist"]`
`22`	`22`	`}`