test: remove vue plugin from optimize-deps playground (#11452)

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -113,8 +113,10 @@ test('CJS dep with css import', async () => {
   expect(await getColor('.cjs-with-assets')).toBe('blue')
 })
 
-test('dep w/ non-js files handled via plugin', async () => {
-  expect(await page.textContent('.plugin')).toMatch(`[success]`)
+test('externalize known non-js files in optimize included dep', async () => {
+  expect(await page.textContent('.externalize-known-non-js')).toMatch(
+    `[success]`,
+  )
 })
 
 test('vue + vuex', async () => {

playground/optimize-deps/index.html

@@ -65,8 +65,8 @@ <h2>Import from dependency with dynamic import</h2>
 <h2>Import from dependency with optional peer dep</h2>
 <div class="dep-with-optional-peer-dep"></div>
 
-<h2>Dep w/ special file format supported via plugins</h2>
-<div class="plugin"></div>
+<h2>Externalize known non-js files in optimize included dep</h2>
+<div class="externalize-known-non-js"></div>
 
 <h2>Vue & Vuex</h2>
 <div class="vue"></div>
@@ -111,7 +111,7 @@ <h2>Non Optimized Module isn't duplicated</h2>
 
   import { msg, VueSFC } from '@vitejs/test-dep-linked-include'
   text('.force-include', msg)
-  text('.plugin', VueSFC.render())
+  text('.externalize-known-non-js', VueSFC.render())
 
   import * as linked from '@vitejs/test-dep-linked-include'
   const keys = Object.keys(linked)

playground/optimize-deps/package.json

@@ -38,8 +38,5 @@
     "vuex": "^4.1.0",
     "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0"
   }
 }

playground/optimize-deps/vite.config.js

@@ -1,5 +1,4 @@
 const fs = require('node:fs')
-const vue = require('@vitejs/plugin-vue')
 
 // Overriding the NODE_ENV set by vitest
 process.env.NODE_ENV = ''
@@ -52,7 +51,7 @@ module.exports = {
   },
 
   plugins: [
-    vue(),
+    testVue(),
     notjs(),
     // for axios request test
     {
@@ -95,6 +94,29 @@ module.exports = {
   ],
 }
 
+// Handles Test.vue in dep-linked-include package
+function testVue() {
+  return {
+    name: 'testvue',
+    transform(code, id) {
+      if (id.includes('dep-linked-include/Test.vue')) {
+        return {
+          code: `
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Test',
+  render() {
+    return '[success] rendered from Vue'
+  }
+})
+`.trim(),
+        }
+      }
+    },
+  }
+}
+
 // Handles .notjs file, basically remove wrapping <notjs> and </notjs> tags
 function notjs() {
   return {