feat(vue3 compiler): use setup instead data (options api can be d…

…isabled) (#386)
unplugin · Nov 4, 2024 · 0e0e3f4 · 0e0e3f4
1 parent a704572
commit 0e0e3f4
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 12 deletions.
diff --git a/examples/vite-vue2/App.vue b/examples/vite-vue2/App.vue
@@ -1,11 +1,13 @@
 <script lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 
 export default {
   components: {
     MdiStore24Hour,
     MdiAlarmOff,
+    VSCodePython,
   },
 }
 </script>
@@ -19,6 +21,7 @@ export default {
       <i-carbon-app-connectivity />
       <i-mdi-account class="inject" />
       <MdiAlarmOff />
+      <VSCodePython />
       <i-fa-solid-dice-five />
       <i-heroicons-outline-menu-alt-2 />
       <i-ri-apps-2-line />

diff --git a/examples/vite-vue2/components.d.ts b/examples/vite-vue2/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']

diff --git a/examples/vite-vue2/package.json b/examples/vite-vue2/package.json
@@ -20,6 +20,7 @@
     "@iconify-json/mdi-light": "^1.1.10",
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/ri": "^1.1.21",
+    "@iconify-json/vscode-icons": "^1.2.2",
     "@vitejs/plugin-vue2": "^2.3.1",
     "typescript": "^5.5.4",
     "unplugin-icons": "workspace:*",

diff --git a/examples/vite-vue3-legacy/App.vue b/examples/vite-vue3-legacy/App.vue
@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 </script>
 
 <template>
@@ -12,6 +13,7 @@ import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
       <i-carbon-app-connectivity />
       <i-mdi-account />
       <MdiAlarmOff />
+      <VSCodePython />
       <i-fa-solid-dice-five />
       <i-heroicons-outline-menu-alt-2 />
       <i-ri-apps-2-line />

diff --git a/examples/vite-vue3-legacy/components.d.ts b/examples/vite-vue3-legacy/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']

diff --git a/examples/vite-vue3-legacy/package.json b/examples/vite-vue3-legacy/package.json
@@ -10,7 +10,7 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.232",
+    "@iconify/json": "^2.2.265",
     "@vitejs/plugin-vue": "^5.1.1",
     "cross-env": "^7.0.3",
     "typescript": "^5.5.4",

diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
@@ -8,6 +8,7 @@ import RawMdiAlarmOff3 from 'virtual:icons/mdi/alarm-off?raw&width=unset&height=
 import Custom1 from 'virtual:icons/plain-color-icons/about?raw'
 import Custom2 from 'virtual:icons/test-color-icons/about?raw'
 import ExternalCustom3 from 'virtual:icons/test-color-icons/about'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 </script>
 
 <template>
@@ -30,6 +31,7 @@ import ExternalCustom3 from 'virtual:icons/test-color-icons/about'
       <i-twemoji-1st-place-medal />
       <IIcTwotone23mp />
       <MdiStore24Hour />
+      <VSCodePython />
       <ExternalCustom3 />
       <i-test-color-icons:about />
       <i-plain-color-icons:about />

diff --git a/examples/vite-vue3/components.d.ts b/examples/vite-vue3/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']

diff --git a/examples/vite-vue3/package.json b/examples/vite-vue3/package.json
@@ -22,6 +22,7 @@
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/ri": "^1.1.21",
     "@iconify-json/twemoji": "^1.1.15",
+    "@iconify-json/vscode-icons": "^1.2.2",
     "@vitejs/plugin-vue": "^5.1.1",
     "cross-env": "^7.0.3",
     "typescript": "^5.5.4",

diff --git a/examples/vue-cli-vue2/package.json b/examples/vue-cli-vue2/package.json
@@ -12,7 +12,7 @@
     "vue": "^2.7.8"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.232",
+    "@iconify/json": "^2.2.265",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
@@ -22,6 +22,6 @@
   },
   "stackblitz": {
     "installDependencies": false,
-    "startCommand": "node .stackblitz.js && npm install && npm run dev"
+    "startCommand": "node .stackblitz.js && npm install && npm add -D vue-template-compiler && npm run dev"
   }
 }
diff --git a/examples/vue-cli-vue2/src/App.vue b/examples/vue-cli-vue2/src/App.vue
@@ -2,12 +2,14 @@
 import LogosVue from '~icons/logos/vue'
 import MdiStore24Hour from '~icons/mdi/store-24-hour'
 import MdiAlarmOff from '~icons/mdi/alarm-off'
+import VSCodePython from 'virtual:icons/vscode-icons/file-type-python'
 
 export default {
   components: {
     LogosVue,
     MdiStore24Hour,
     MdiAlarmOff,
+    VSCodePython,
   },
 }
 </script>
@@ -20,6 +22,7 @@ export default {
       Icons
       <MdiStore24Hour />
       <MdiAlarmOff />
+      <VSCodePython />
       from <code>unplugin-icons</code>
     </p>
   </div>

diff --git a/examples/vue-cli-vue2/vue.config.js b/examples/vue-cli-vue2/vue.config.js
@@ -6,7 +6,7 @@ const Icons = require('unplugin-icons/webpack')
 module.exports = {
   configureWebpack: {
     plugins: [
-      Icons({
+      Icons.default({
         compiler: 'vue2',
       }),
     ],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/compilers/vue3.ts b/src/core/compilers/vue3.ts
@@ -16,7 +16,7 @@ export const Vue3Compiler = (async (svg: string, collection: string, icon: strin
   code = `import { markRaw } from 'vue'\n${code}`
   code = code.replace(/^export /gm, '')
   code += `\n\nexport default markRaw({ name: '${collection}-${icon}', render${
-    injectScripts ? `, data() {${injectScripts};return { idMap }}` : ''
+    injectScripts ? `, setup() {${injectScripts};return { idMap }}` : ''
   } })`
   code += '\n/* vite-plugin-components disabled */'