diff --git a/packages/f2-vue/examples/vite/.gitignore b/packages/f2-vue/examples/vite/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/packages/f2-vue/examples/vite/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/f2-vue/examples/vite/README.md b/packages/f2-vue/examples/vite/README.md new file mode 100644 index 000000000..02124a7a0 --- /dev/null +++ b/packages/f2-vue/examples/vite/README.md @@ -0,0 +1,7 @@ +# Vue 3 + Vite + +This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + + diff --git a/packages/f2-vue/examples/vite/package.json b/packages/f2-vue/examples/vite/package.json new file mode 100644 index 000000000..b9ac5f785 --- /dev/null +++ b/packages/f2-vue/examples/vite/package.json @@ -0,0 +1,23 @@ +{ + "name": "vite", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@antv/f2": "^5.0.0", + "@antv/f-engine": "1.x", + "@antv/f-vue": "1.x", + "vue": "^3.2.25" + }, + "devDependencies": { + "@babel/plugin-transform-react-jsx": "^7.17.3", + "@rollup/plugin-babel": "^5.3.1", + "@vitejs/plugin-vue": "^2.3.2", + "@vitejs/plugin-vue-jsx": "^1.3.10", + "vite": "^2.9.7" + } +} diff --git a/packages/f2-vue/examples/vite/src/App.vue b/packages/f2-vue/examples/vite/src/App.vue new file mode 100644 index 000000000..0e649aece --- /dev/null +++ b/packages/f2-vue/examples/vite/src/App.vue @@ -0,0 +1,61 @@ + + + + diff --git a/packages/f2-vue/examples/vite/src/graphic.jsx b/packages/f2-vue/examples/vite/src/graphic.jsx new file mode 100644 index 000000000..fea712b84 --- /dev/null +++ b/packages/f2-vue/examples/vite/src/graphic.jsx @@ -0,0 +1,24 @@ +function View(props) { + const { coord, year } = props; + const { left, top, width, height } = coord; + const x = left + width / 2; + const y = top + height / 2; + return ( + + + + ); +} + +export default View; diff --git a/packages/f2-vue/examples/vite/src/main.js b/packages/f2-vue/examples/vite/src/main.js new file mode 100644 index 000000000..684d04215 --- /dev/null +++ b/packages/f2-vue/examples/vite/src/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue'; +import App from './App.vue'; + +createApp(App).mount('#app'); diff --git a/packages/f2-vue/examples/vite/vite.config.js b/packages/f2-vue/examples/vite/vite.config.js new file mode 100644 index 000000000..c49b44ade --- /dev/null +++ b/packages/f2-vue/examples/vite/vite.config.js @@ -0,0 +1,23 @@ +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import vueJsx from '@vitejs/plugin-vue-jsx'; +import { babel } from '@rollup/plugin-babel'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + babel({ + plugins: [ + [ + '@babel/plugin-transform-react-jsx', + { + runtime: 'automatic', + importSource: '@antv/f-engine', + }, + ], + ], + }), + vue(), + vueJsx(), + ], +}); diff --git a/packages/f2-vue/examples/vue3/babel.config.js b/packages/f2-vue/examples/vue3/babel.config.js new file mode 100644 index 000000000..078c0056f --- /dev/null +++ b/packages/f2-vue/examples/vue3/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@vue/cli-plugin-babel/preset'], +}; diff --git a/packages/f2-vue/examples/vue3/package.json b/packages/f2-vue/examples/vue3/package.json new file mode 100644 index 000000000..46956de01 --- /dev/null +++ b/packages/f2-vue/examples/vue3/package.json @@ -0,0 +1,29 @@ +{ + "name": "vue-3", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "@antv/f2": "^5.0.0", + "@antv/f-engine": "1.x", + "@antv/f-vue": "1.x", + "vue": "^3.2.25" + }, + "devDependencies": { + "@babel/plugin-transform-react-jsx": "~7.17.3", + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-service": "~4.5.0", + "@vue/compiler-sfc": "^3.0.0-0" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not dead" + ], + "keywords": [], + "description": "" +} diff --git a/packages/f2-vue/examples/vue3/src/App.vue b/packages/f2-vue/examples/vue3/src/App.vue new file mode 100644 index 000000000..0f8f086b9 --- /dev/null +++ b/packages/f2-vue/examples/vue3/src/App.vue @@ -0,0 +1,66 @@ + + + + diff --git a/packages/f2-vue/examples/vue3/src/graphic.jsx b/packages/f2-vue/examples/vue3/src/graphic.jsx new file mode 100644 index 000000000..fea712b84 --- /dev/null +++ b/packages/f2-vue/examples/vue3/src/graphic.jsx @@ -0,0 +1,24 @@ +function View(props) { + const { coord, year } = props; + const { left, top, width, height } = coord; + const x = left + width / 2; + const y = top + height / 2; + return ( + + + + ); +} + +export default View; diff --git a/packages/f2-vue/examples/vue3/src/main.js b/packages/f2-vue/examples/vue3/src/main.js new file mode 100644 index 000000000..684d04215 --- /dev/null +++ b/packages/f2-vue/examples/vue3/src/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue'; +import App from './App.vue'; + +createApp(App).mount('#app'); diff --git a/packages/f2-vue/examples/vue3/vue.config.js b/packages/f2-vue/examples/vue3/vue.config.js new file mode 100644 index 000000000..8ac8e5809 --- /dev/null +++ b/packages/f2-vue/examples/vue3/vue.config.js @@ -0,0 +1,24 @@ +module.exports = { + chainWebpack: (config) => { + config.module + .rule('F2') + .test((path) => { + // Only transform FEngine JSX in .jsx files. + return /\.jsx$/.test(path) && !/\.vue\.jsx$/.test(path); + }) + .use('babel') + .loader('babel-loader') + .options({ + plugins: [ + [ + '@babel/plugin-transform-react-jsx', + { + runtime: 'automatic', + importSource: '@antv/f-engine', + }, + ], + ], + }) + .end(); + }, +}; diff --git a/packages/f2-vue/package.json b/packages/f2-vue/package.json new file mode 100644 index 000000000..bee935ee7 --- /dev/null +++ b/packages/f2-vue/package.json @@ -0,0 +1,14 @@ +{ + "name": "@antv/f2-vue", + "private": true, + "version": "5.0.30", + "homepage": "https://github.com/antvis/f2", + "bugs": { + "url": "https://github.com/antvis/f2/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/antvis/f2" + }, + "author": "https://github.com/orgs/antvis/people" +}