feat(plugin-vue): support text import attributes (#8053)

Author: chenjiahan

e2e/cases/plugin-vue/import-attributes-text/index.test.ts

@@ -0,0 +1,12 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { expect, test } from '@e2e/helper';
+
+test('should import Vue SFC as text with import attributes', async ({ page, runBothServe }) => {
+  await runBothServe(async () => {
+    expect(await page.evaluate('window.vueText')).toBe(
+      readFileSync(join(import.meta.dirname, './src/App.vue'), 'utf-8'),
+    );
+    await expect(page.locator('#normal-vue')).toHaveText('Normal Vue SFC');
+  });
+});

e2e/cases/plugin-vue/import-attributes-text/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+});

e2e/cases/plugin-vue/import-attributes-text/src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="text-source">Vue text import</div>
+</template>
+
+<script setup>
+const message = 'raw source should keep script content';
+</script>

e2e/cases/plugin-vue/import-attributes-text/src/Normal.vue

@@ -0,0 +1,3 @@
+<template>
+  <div id="normal-vue">Normal Vue SFC</div>
+</template>

e2e/cases/plugin-vue/import-attributes-text/src/index.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import text from './App.vue' with { type: 'text' };
+import Normal from './Normal.vue';
+
+window.vueText = text;
+
+createApp(Normal).mount('#root');

packages/plugin-vue/src/index.ts

@@ -112,13 +112,22 @@ export function pluginVue(options: PluginVueOptions = {}): RsbuildPlugin {
           compilerOptions,
         };
 
+        // TODO: Use a oneOf-based rule structure in the next major version
         chain.module
           .rule(CHAIN_ID.RULE.VUE)
           .test(test)
+          .with({ type: { not: 'text' } })
           .use(CHAIN_ID.USE.VUE)
           .loader(require.resolve('rspack-vue-loader'))
           .options(vueLoaderOptions);
 
+        chain.module
+          .rule('vue-text')
+          .after(CHAIN_ID.RULE.VUE)
+          .test(test)
+          .with({ type: 'text' })
+          .type('asset/source');
+
         // Support for lang="postcss" and lang="pcss" in SFC
         chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
 

packages/plugin-vue/tests/__snapshots__/index.test.ts.snap

@@ -15,6 +15,11 @@ exports[`plugin-vue > should add vue-loader and VueLoaderPlugin correctly 1`] =
       },
     },
   ],
+  "with": {
+    "type": {
+      "not": "text",
+    },
+  },
 }
 `;
 
@@ -53,6 +58,11 @@ exports[`plugin-vue > should allow to configure vueLoader options 1`] = `
       },
     },
   ],
+  "with": {
+    "type": {
+      "not": "text",
+    },
+  },
 }
 `;
 
@@ -71,6 +81,11 @@ exports[`plugin-vue > should allow to custom test condition 1`] = `
       },
     },
   ],
+  "with": {
+    "type": {
+      "not": "text",
+    },
+  },
 }
 `;