fix: update vite + vue2 compiler dependencies

Jevon617 · May 6, 2023 · d7d873b · d7d873b
1 parent f32e57a
commit d7d873b
Show file tree

Hide file tree

Showing 22 changed files with 175 additions and 77 deletions.
diff --git a/examples/react-vite/package.json b/examples/react-vite/package.json
@@ -1,7 +1,6 @@
 {
   "name": "react",
   "type": "module",
-  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

diff --git a/examples/vue2-vite/index.html b/examples/vue2-vite/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/main.js"></script>
+</body>
+</html>
diff --git a/examples/vue2-vite/package.json b/examples/vue2-vite/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "vue2-vite",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vue/compiler-sfc": "^2.7.0",
+    "unplugin-svg-component": "workspace:*",
+    "vite": "^3.2.3",
+    "vue": "^2.7.14"
+
+  }
+}
diff --git a/examples/vue2-vite/src/App.vue b/examples/vue2-vite/src/App.vue
@@ -0,0 +1,34 @@
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+    }
+  },
+  methods: {
+    handleClick() {
+      console.log('click')
+    },
+  },
+}
+</script>
+
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <MySvgIcon name="vue" class="test" @click="handleClick" />
+    <MySvgIcon name="icon-card2" @click="handleClick" />
+    <MySvgIcon name="icon-barCode" @click="handleClick" />
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/examples/vue2-vite/src/assets/logo.png b/examples/vue2-vite/src/assets/logo.png
diff --git a/examples/vue2-vite/src/icons/icon-addUser.svg b/examples/vue2-vite/src/icons/icon-addUser.svg
diff --git a/examples/vue2-vite/src/icons/icon-barCode.svg b/examples/vue2-vite/src/icons/icon-barCode.svg
diff --git a/examples/vue2-vite/src/icons/icon-card2.svg b/examples/vue2-vite/src/icons/icon-card2.svg
diff --git a/examples/vue2-vite/src/icons/vue.svg b/examples/vue2-vite/src/icons/vue.svg
diff --git a/examples/vue2-vite/src/main.js b/examples/vue2-vite/src/main.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+import MySvgIcon from '~virtual/svg-component'
+
+Vue.config.productionTip = false
+
+const app = new Vue({
+  render: h => h(App),
+})
+
+Vue.component(MySvgIcon.name, MySvgIcon)
+
+app.$mount('#app')
diff --git a/examples/vue2-vite/vite.config.js b/examples/vue2-vite/vite.config.js
@@ -0,0 +1,16 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import UnpluginSvgComponent from 'unplugin-svg-component/vite'
+import vitePluginVue2 from '@vitejs/plugin-vue2'
+
+export default defineConfig({
+  plugins: [
+    vitePluginVue2(),
+    UnpluginSvgComponent({
+      iconDir: path.resolve(__dirname, './src/icons'),
+      vueVersion: 'auto',
+      componentName: 'MySvgIcon',
+      preserveColor: /vue\.svg$/,
+    }),
+  ],
+})
diff --git a/examples/vue2-webpack/package.json b/examples/vue2-webpack/package.json
@@ -1,6 +1,5 @@
 {
   "name": "webpack-demo",
-  "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build"
@@ -13,8 +12,7 @@
     "@babel/core": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "unplugin-svg-component": "workspace:*",
-    "vue-template-compiler": "^2.7.13",
-    "vue-template-es2015-compiler": "^1.9.0"
+    "@vue/compiler-sfc": "^2.7.0",
+    "unplugin-svg-component": "workspace:*"
   }
 }
diff --git a/examples/vue2-webpack/src/App.vue b/examples/vue2-webpack/src/App.vue
@@ -5,15 +5,20 @@ export default {
     return {
     }
   },
+  methods: {
+    handleClick() {
+      console.log('click')
+    },
+  },
 }
 </script>
 
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <MySvgIcon name="vue" />
-    <MySvgIcon name="icon-card2" />
-    <MySvgIcon name="icon-barCode" />
+    <MySvgIcon name="vue" class="test" @click="handleClick" />
+    <MySvgIcon name="icon-card2" @click="handleClick" />
+    <MySvgIcon name="icon-barCode" @click="handleClick" />
   </div>
 </template>
 

diff --git a/examples/vue2-webpack/vue.config.js b/examples/vue2-webpack/vue.config.js
@@ -1,4 +1,4 @@
-const path = require('path')
+const path = require('node:path')
 const { defineConfig } = require('@vue/cli-service')
 const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default
 

diff --git a/examples/vue3-vite/package.json b/examples/vue3-vite/package.json
@@ -1,6 +1,5 @@
 {
-  "name": "vite-demo",
-  "private": true,
+  "name": "vue3-vite",
   "scripts": {
     "dev": "vite",
     "build": "vite build"

diff --git a/package.json b/package.json
@@ -86,20 +86,7 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@vue/compiler-sfc": "^3.2.40",
-    "vue-template-compiler": "^2.6.12",
-    "vue-template-es2015-compiler": "^1.9.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/compiler-sfc": {
-      "optional": true
-    },
-    "vue-template-compiler": {
-      "optional": true
-    },
-    "vue-template-es2015-compiler": {
-      "optional": true
-    }
+    "@vue/compiler-sfc": ">=2.7.0 <=3.2.47"
   },
   "dependencies": {
     "cors": "^2.8.5",