├── .prettierrc
├── packages
    └── vue-rsloader
    │   ├── src
    │       ├── reset.d.ts
    │       ├── plugin.ts
    │       ├── shim.d.ts
    │       ├── styleInlineLoader.ts
    │       ├── exportHelper.ts
    │       ├── cssModules.ts
    │       ├── formatError.ts
    │       ├── util.ts
    │       ├── hotReload.ts
    │       ├── compiler.ts
    │       ├── stylePostLoader.ts
    │       ├── descriptorCache.ts
    │       ├── select.ts
    │       ├── resolveScript.ts
    │       ├── templateLoader.ts
    │       ├── pluginRspack.ts
    │       └── index.ts
    │   ├── README.md
    │   ├── tsconfig.test.json
    │   ├── tsconfig.json
    │   ├── LICENSE
    │   └── package.json
├── pnpm-workspace.yaml
├── .gitignore
├── example
    └── modernjs-builder
    │   ├── README.md
    │   ├── src
    │       ├── assets
    │       │   ├── rspack.png
    │       │   └── vue.svg
    │       ├── main.ts
    │       ├── env.d.ts
    │       ├── components
    │       │   ├── HelloWorld.vue
    │       │   └── readme.md
    │       ├── App.vue
    │       └── style.css
    │   ├── babel.config.js
    │   ├── tailwind.config.js
    │   ├── tsconfig.node.json
    │   ├── builder
    │       ├── jsx.mjs
    │       ├── svg.js
    │       ├── mdx.mjs
    │       ├── builder.mjs
    │       └── vue-builder-plugin.mjs
    │   ├── tsconfig.json
    │   └── package.json
├── package.json
├── vercel.json
├── README.zh-CN.md
└── README.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | semi: false
2 | singleQuote: true
3 | printWidth: 80
4 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/reset.d.ts:
--------------------------------------------------------------------------------
1 | import '@total-typescript/ts-reset'
2 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - 'packages/*'
3 |   - 'example/*'
4 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/README.md:
--------------------------------------------------------------------------------
1 | Check out https://github.com/skywalker512/vue-rsloader
2 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/plugin.ts:
--------------------------------------------------------------------------------
1 | import VueLoaderPlugin from './pluginRspack'
2 | 
3 | export default VueLoaderPlugin
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.log
 2 | .DS_Store
 3 | node_modules
 4 | dist
 5 | dist-ssr
 6 | link.sh
 7 | .cache
 8 | TODOs.md
 9 | coverage
10 | .vscode
11 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/shim.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'merge-source-map' {
2 |   export default function merge(inMap: any, outMap: any): any
3 | }
4 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + TypeScript + Rspack + Modernjs Builder
2 | 
3 | Fork from vite template
4 | 
5 | more: tailwind、scss ...
6 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/assets/rspack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/skywalker512/vue-rsloader/HEAD/example/modernjs-builder/src/assets/rspack.png


--------------------------------------------------------------------------------
/example/modernjs-builder/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@babel/preset-typescript'],
3 |   plugins: ['@vue/babel-plugin-jsx'],
4 | }
5 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import './style.css'
3 | import App from './App.vue'
4 | 
5 | createApp(App).mount('#app')
6 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
4 |   corePlugins: {
5 |     preflight: false,
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-rsloader-private",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "pnpm run -r build",
 7 |     "dev": "pnpm run -r --parallel dev"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/styleInlineLoader.ts:
--------------------------------------------------------------------------------
1 | import webpack = require('webpack')
2 | 
3 | const StyleInineLoader: webpack.loader.Loader = function (source) {
4 |   // TODO minify this?
5 |   return `export default ${JSON.stringify(source)}`
6 | }
7 | 
8 | export default StyleInineLoader
9 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "buildCommand": "pnpm build",
 3 |   "outputDirectory": "./example/modernjs-builder/dist",
 4 |   "installCommand": "pnpm i",
 5 |   "rewrites": [
 6 |     {
 7 |       "source": "/(.*)",
 8 |       "destination": "/html/index/index.html"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/exportHelper.ts:
--------------------------------------------------------------------------------
 1 | // runtime helper for setting properties on components
 2 | // in a tree-shakable way
 3 | export default (sfc: any, props: [string, string][]) => {
 4 |   const target = sfc.__vccOpts || sfc
 5 |   for (const [key, val] of props) {
 6 |     target[key] = val
 7 |   }
 8 |   return target
 9 | }
10 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/tsconfig.test.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "target": "ESNext",
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "checkJs": true,
 9 |     "allowJs": true,
10 |     "outDir": "./dist"
11 |   },
12 |   "include": ["./test"]
13 | }
14 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "target": "ESNext",
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "checkJs": true,
 9 |     "allowJs": true,
10 |     "outDir": "./dist"
11 |   },
12 |   "include": ["./builder", "*.js"]
13 | }
14 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="80" height="80" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/example/modernjs-builder/builder/jsx.mjs:
--------------------------------------------------------------------------------
 1 | import Module from 'node:module'
 2 | 
 3 | const require = Module.createRequire(import.meta.url)
 4 | /**
 5 |  * @returns {import('@modern-js/builder-shared').DefaultBuilderPlugin}
 6 |  */
 7 | export const vueJsxPlugin = () => ({
 8 |   name: 'vue-jsx-plugin',
 9 |   setup(api) {
10 |     api.modifyBundlerChain(async (chain) => {
11 |       const rule = chain.module.rule('vue-jsx').test(/\.(t|j)sx$/)
12 |       rule.use('vue-jsx').loader(require.resolve('babel-loader')).end()
13 |     })
14 |   },
15 | })
16 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/builder/svg.js:
--------------------------------------------------------------------------------
 1 | const { compileTemplate } = require('vue/compiler-sfc')
 2 | 
 3 | const VueSvgLoader = function (source) {
 4 |   source = String(source)
 5 | 
 6 |   const loaderContext = this
 7 | 
 8 |   const { code } = compileTemplate({
 9 |     id: loaderContext.resourcePath,
10 |     source,
11 |     filename: loaderContext.resourcePath,
12 |     transformAssetUrls: false,
13 |   })
14 | 
15 |   loaderContext.callback(null, `${code}\nexport default { render: render }`)
16 | }
17 | 
18 | module.exports = VueSvgLoader
19 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "resolveJsonModule": true,
10 |     "isolatedModules": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["ESNext", "DOM"],
13 |     "skipLibCheck": true,
14 |     "noEmit": true
15 |   },
16 |   "include": ["src"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/env.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.svg' {
 2 |   import { FunctionalComponent, SVGAttributes } from 'vue'
 3 |   const src: FunctionalComponent<SVGAttributes>
 4 |   export default src
 5 | }
 6 | 
 7 | declare module '*.mdx' {
 8 |   import { FunctionalComponent, SVGAttributes } from 'vue'
 9 |   const src: FunctionalComponent<SVGAttributes>
10 |   export default src
11 | }
12 | 
13 | declare module '*.md' {
14 |   import { FunctionalComponent, SVGAttributes } from 'vue'
15 |   const src: FunctionalComponent<SVGAttributes>
16 |   export default src
17 | }
18 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "outDir": "dist",
 5 |     "sourceMap": false,
 6 |     "target": "ES2018",
 7 |     "module": "commonjs",
 8 |     "moduleResolution": "node",
 9 |     "esModuleInterop": true,
10 |     "declaration": true,
11 |     "allowJs": false,
12 |     "noUnusedLocals": true,
13 |     "strictNullChecks": true,
14 |     "noImplicitAny": true,
15 |     "removeComments": false,
16 |     "skipLibCheck": true,
17 |     "lib": ["ESNext"]
18 |   },
19 |   "include": ["src"],
20 |   "references": [{ "path": "./tsconfig.test.json" }]
21 | }
22 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/cssModules.ts:
--------------------------------------------------------------------------------
 1 | export function genCSSModulesCode(
 2 |   id: string,
 3 |   index: number,
 4 |   request: string,
 5 |   moduleName: string | boolean,
 6 |   needsHotReload: boolean
 7 | ): string {
 8 |   const styleVar = `style${index}`
 9 |   let code = `\nimport ${styleVar} from ${request}`
10 | 
11 |   // inject variable
12 |   const name = typeof moduleName === 'string' ? moduleName : '$style'
13 |   code += `\ncssModules["${name}"] = ${styleVar}`
14 | 
15 |   if (needsHotReload) {
16 |     code += `
17 | if (module.hot) {
18 |   module.hot.accept(${request}, () => {
19 |     cssModules["${name}"] = ${styleVar}
20 |     __VUE_HMR_RUNTIME__.rerender("${id}")
21 |   })
22 | }`
23 |   }
24 | 
25 |   return code
26 | }
27 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/formatError.ts:
--------------------------------------------------------------------------------
 1 | import type { CompilerError } from 'vue/compiler-sfc'
 2 | import { generateCodeFrame } from 'vue/compiler-sfc'
 3 | import chalk from 'chalk'
 4 | 
 5 | export function formatError(
 6 |   err: SyntaxError | CompilerError,
 7 |   source: string,
 8 |   file: string
 9 | ) {
10 |   const loc = (err as CompilerError).loc
11 |   if (!loc) {
12 |     return
13 |   }
14 |   const locString = `:${loc.start.line}:${loc.start.column}`
15 |   const filePath = chalk.gray(`at ${file}${locString}`)
16 |   const codeframe = generateCodeFrame(source, loc.start.offset, loc.end.offset)
17 |   err.message = `\n${chalk.red(
18 |     `VueCompilerError: ${err.message}`
19 |   )}\n${filePath}\n${chalk.yellow(codeframe)}\n`
20 | }
21 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/util.ts:
--------------------------------------------------------------------------------
 1 | import type { SFCDescriptor, CompilerOptions } from 'vue/compiler-sfc'
 2 | import type { VueLoaderOptions } from '.'
 3 | 
 4 | export function resolveTemplateTSOptions(
 5 |   descriptor: SFCDescriptor,
 6 |   options: VueLoaderOptions
 7 | ): CompilerOptions | null {
 8 |   if (options.enableTsInTemplate === false) return null
 9 | 
10 |   const lang = descriptor.script?.lang || descriptor.scriptSetup?.lang
11 |   const isTS = !!(lang && /tsx?$/.test(lang))
12 |   let expressionPlugins = options?.compilerOptions?.expressionPlugins || []
13 |   if (isTS && !expressionPlugins.includes('typescript')) {
14 |     expressionPlugins = [...expressionPlugins, 'typescript']
15 |   }
16 |   return {
17 |     isTS,
18 |     expressionPlugins,
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/hotReload.ts:
--------------------------------------------------------------------------------
 1 | // __VUE_HMR_RUNTIME__ is injected to global scope by @vue/runtime-core
 2 | 
 3 | export function genHotReloadCode(
 4 |   id: string,
 5 |   templateRequest: string | undefined
 6 | ): string {
 7 |   return `
 8 | /* hot reload */
 9 | if (module.hot) {
10 |   __exports__.__hmrId = "${id}"
11 |   const api = __VUE_HMR_RUNTIME__
12 |   module.hot.accept()
13 |   if (!api.createRecord('${id}', __exports__)) {
14 |     api.reload('${id}', __exports__)
15 |   }
16 |   ${templateRequest ? genTemplateHotReloadCode(id, templateRequest) : ''}
17 | }
18 | `
19 | }
20 | 
21 | function genTemplateHotReloadCode(id: string, request: string) {
22 |   return `
23 |   module.hot.accept(${request}, () => {
24 |     api.rerender('${id}', render)
25 |   })
26 | `
27 | }
28 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/compiler.ts:
--------------------------------------------------------------------------------
 1 | // extend the descriptor so we can store the scopeId on it
 2 | declare module 'vue/compiler-sfc' {
 3 |   interface SFCDescriptor {
 4 |     id: string
 5 |   }
 6 | }
 7 | 
 8 | import * as _compiler from 'vue/compiler-sfc'
 9 | 
10 | export let compiler: typeof _compiler
11 | 
12 | try {
13 |   // Vue 3.2.13+ ships the SFC compiler directly under the `vue` package
14 |   // making it no longer necessary to have @vue/compiler-sfc separately installed.
15 |   compiler = require('vue/compiler-sfc')
16 | } catch (e) {
17 |   try {
18 |     compiler = require('@vue/compiler-sfc')
19 |   } catch (e) {
20 |     throw new Error(
21 |       `@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc ` +
22 |         `to be present in the dependency tree.`
23 |     )
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import { MDXProvider } from '@mdx-js/vue'
 4 | import Post from './readme.md'
 5 | 
 6 | defineProps<{ msg: string }>()
 7 | 
 8 | const count = ref(0)
 9 | </script>
10 | 
11 | <template>
12 |   <h1>{{ msg }}</h1>
13 | 
14 |   <div class="card">
15 |     <button type="button" @click="count++">count is {{ count }}</button>
16 |     <p>
17 |       Edit
18 |       <code>components/HelloWorld.vue</code> to test HMR
19 |     </p>
20 |   </div>
21 | 
22 |   <a href="https://github.com/skywalker512/vue-rsloader" target="_blank">
23 |     Vue Rspack Loader Github
24 |   </a>
25 |   <div class="text-left">
26 |     <MDXProvider>
27 |       <Post />
28 |     </MDXProvider>
29 |   </div>
30 | </template>
31 | 
32 | <style scoped>
33 | .read-the-docs {
34 |   color: #888;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "modernjs-builder",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "node builder/builder.mjs build",
 6 |     "dev": "node builder/builder.mjs"
 7 |   },
 8 |   "keywords": [],
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "devDependencies": {
12 |     "@babel/core": "^7.21.3",
13 |     "@babel/preset-typescript": "^7.21.0",
14 |     "@mdx-js/loader": "^2.3.0",
15 |     "@modern-js/builder": "^2.9.0",
16 |     "@modern-js/builder-rspack-provider": "^2.9.0",
17 |     "@modern-js/builder-shared": "^2.9.0",
18 |     "@vue/babel-plugin-jsx": "^1.1.1",
19 |     "babel-loader": "^9.1.2",
20 |     "rehype-highlight": "^6.0.0",
21 |     "tailwindcss": "^3.2.7",
22 |     "vue-rsloader": "workspace:*",
23 |     "webpack": "^5.76.2"
24 |   },
25 |   "dependencies": {
26 |     "@mdx-js/vue": "^2.3.0",
27 |     "vue": "^3.2.47"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import HelloWorld from './components/HelloWorld.vue'
 3 | import VueSvg from './assets/vue.svg'
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div>
 8 |     <a href="https://rspack.dev" target="_blank">
 9 |       <img
10 |         src="./assets/rspack.png"
11 |         class="logo h-[6em] p-[1.5em]"
12 |         alt="Vite logo"
13 |       />
14 |     </a>
15 |     <a href="https://vuejs.org/" target="_blank">
16 |       <VueSvg class="logo vue h-[6em] p-[1.5em]" alt="Vue logo" />
17 |     </a>
18 |   </div>
19 |   <HelloWorld msg="Rspack + Vue" />
20 | </template>
21 | 
22 | <style scoped lang="scss">
23 | .logo {
24 |   will-change: filter;
25 |   transition: filter 300ms;
26 |   &:hover {
27 |     filter: drop-shadow(0 0 2em #f5bfa1aa);
28 |   }
29 |   &.vue:hover {
30 |     filter: drop-shadow(0 0 2em #42b883aa);
31 |   }
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/builder/mdx.mjs:
--------------------------------------------------------------------------------
 1 | import Module from 'node:module'
 2 | import rehypeHighlight from 'rehype-highlight'
 3 | const require = Module.createRequire(import.meta.url)
 4 | /**
 5 |  * @returns {import('@modern-js/builder-shared').DefaultBuilderPlugin}
 6 |  */
 7 | export const vueMdxPlugin = () => ({
 8 |   name: 'vue-mdx-plugin',
 9 |   setup(api) {
10 |     api.modifyBundlerChain(async (chain) => {
11 |       /** @type {import('@mdx-js/loader').Options} */
12 |       const options = {
13 |         providerImportSource: '@mdx-js/vue',
14 |         jsx: true,
15 |         rehypePlugins: [rehypeHighlight],
16 |       }
17 | 
18 |       const rule = chain.module.rule('vue-mdx').test(/\.mdx?$/)
19 |       rule
20 |         .use('vue-jsx-mdx')
21 |         .loader(require.resolve('babel-loader'))
22 |         .end()
23 |         .use('vue-mdx')
24 |         .loader(require.resolve('@mdx-js/loader'))
25 |         .options(options)
26 |         .end()
27 |     })
28 |   },
29 | })
30 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/stylePostLoader.ts:
--------------------------------------------------------------------------------
 1 | import * as qs from 'querystring'
 2 | import webpack = require('webpack')
 3 | import { compileStyle } from 'vue/compiler-sfc'
 4 | 
 5 | // This is a post loader that handles scoped CSS transforms.
 6 | // Injected right before css-loader by the global pitcher (../pitch.js)
 7 | // for any <style scoped> selection requests initiated from within vue files.
 8 | const StylePostLoader: webpack.loader.Loader = function (source, inMap) {
 9 |   const query = qs.parse(this.resourceQuery.slice(1))
10 |   const { code, map, errors } = compileStyle({
11 |     source: source as string,
12 |     filename: this.resourcePath,
13 |     id: `data-v-${query.id}`,
14 |     map: inMap,
15 |     scoped: !!query.scoped,
16 |     trim: true,
17 |     isProd: this.mode === 'production' || process.env.NODE_ENV === 'production',
18 |   })
19 | 
20 |   if (errors.length) {
21 |     this.callback(errors[0])
22 |   } else {
23 |     this.callback(null, code, map)
24 |   }
25 | }
26 | 
27 | export default StylePostLoader
28 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019-present, Yuxi (Evan) You
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/descriptorCache.ts:
--------------------------------------------------------------------------------
 1 | import * as fs from 'fs'
 2 | import type { SFCDescriptor } from 'vue/compiler-sfc'
 3 | import { parse } from 'vue/compiler-sfc'
 4 | 
 5 | const cache = new Map<string, SFCDescriptor>()
 6 | 
 7 | export function setDescriptor(filename: string, entry: SFCDescriptor) {
 8 |   cache.set(cleanQuery(filename), entry)
 9 | }
10 | 
11 | export function getDescriptor(filename: string): SFCDescriptor {
12 |   filename = cleanQuery(filename)
13 |   if (cache.has(filename)) {
14 |     return cache.get(filename)!
15 |   }
16 | 
17 |   // This function should only be called after the descriptor has been
18 |   // cached by the main loader.
19 |   // If this is somehow called without a cache hit, it's probably due to sub
20 |   // loaders being run in separate threads. The only way to deal with this is to
21 |   // read from disk directly...
22 |   const source = fs.readFileSync(filename, 'utf-8')
23 |   const { descriptor } = parse(source, {
24 |     filename,
25 |     sourceMap: true,
26 |   })
27 |   cache.set(filename, descriptor)
28 |   return descriptor
29 | }
30 | 
31 | function cleanQuery(str: string) {
32 |   const i = str.indexOf('?')
33 |   return i > 0 ? str.slice(0, i) : str
34 | }
35 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-rsloader",
 3 |   "version": "0.0.9",
 4 |   "license": "MIT",
 5 |   "author": "skywalker512",
 6 |   "repository": "skywalker512/vue-rsloader",
 7 |   "main": "dist/index.js",
 8 |   "types": "dist/index.d.ts",
 9 |   "keywords": [
10 |     "vue",
11 |     "rspack",
12 |     "rspack loader",
13 |     "vue rspack loader"
14 |   ],
15 |   "files": [
16 |     "dist"
17 |   ],
18 |   "publishConfig": {
19 |     "registry": "https://registry.npmjs.org/",
20 |     "access": "public"
21 |   },
22 |   "scripts": {
23 |     "dev": "tsc --watch",
24 |     "build": "tsc",
25 |     "test": "vitest"
26 |   },
27 |   "dependencies": {
28 |     "chalk": "^4",
29 |     "hash-sum": "^2",
30 |     "loader-utils": "^2"
31 |   },
32 |   "peerDependenciesMeta": {
33 |     "@vue/compiler-sfc": {
34 |       "optional": true
35 |     },
36 |     "vue": {
37 |       "optional": true
38 |     }
39 |   },
40 |   "devDependencies": {
41 |     "@rspack/core": "^0.1.1",
42 |     "@total-typescript/ts-reset": "^0.4.2",
43 |     "@types/hash-sum": "^1.0.0",
44 |     "@types/loader-utils": "^2.0.3",
45 |     "@types/node": "^18.15.3",
46 |     "@types/webpack": "^4",
47 |     "typescript": "^4.9.5",
48 |     "vitest": "^0.29.3",
49 |     "vue": "^3.2.47",
50 |     "vue-rsloader": "workspace:*"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/builder/builder.mjs:
--------------------------------------------------------------------------------
 1 | import { createBuilder } from '@modern-js/builder'
 2 | import { builderRspackProvider } from '@modern-js/builder-rspack-provider'
 3 | import { vuePlugin, vuePluginSvg } from './vue-builder-plugin.mjs'
 4 | 
 5 | import Module from 'node:module'
 6 | import { vueMdxPlugin } from './mdx.mjs'
 7 | import { vueJsxPlugin } from './jsx.mjs'
 8 | 
 9 | const require = Module.createRequire(import.meta.url)
10 | 
11 | const provider = builderRspackProvider({
12 |   builderConfig: {
13 |     html: {
14 |       meta: {
15 |         viewport: {
16 |           content:
17 |             'initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no',
18 |         },
19 |       },
20 |       title: 'Rspack X Vue',
21 |       mountId: 'app',
22 |     },
23 |     output: {
24 |       svgDefaultExport: 'component',
25 |     },
26 |     tools: {
27 |       postcss: (_config, utils) => {
28 |         utils.addPlugins([
29 |           require('tailwindcss')({ config: './tailwind.config.js' }),
30 |         ])
31 |       },
32 |     },
33 |   },
34 | })
35 | 
36 | const builder = await createBuilder(provider, {
37 |   entry: {
38 |     index: './src/main.ts',
39 |   },
40 | })
41 | 
42 | builder.removePlugins(['builder-plugin-react'])
43 | builder.addPlugins([
44 |   vuePlugin(),
45 |   vuePluginSvg(),
46 |   vueJsxPlugin(),
47 |   vueMdxPlugin(),
48 | ])
49 | 
50 | if (process.argv[2] === 'build') {
51 |   await builder.build()
52 | } else {
53 |   builder.startDevServer()
54 | }
55 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/builder/vue-builder-plugin.mjs:
--------------------------------------------------------------------------------
 1 | import { SVG_REGEX, JS_REGEX, TS_REGEX } from '@modern-js/builder-shared'
 2 | 
 3 | import Module from 'node:module'
 4 | 
 5 | const require = Module.createRequire(import.meta.url)
 6 | 
 7 | /**
 8 |  * @returns {import('@modern-js/builder-shared').DefaultBuilderPlugin}
 9 |  */
10 | export const vuePluginSvg = () => ({
11 |   name: 'vue-plugin-svg',
12 |   setup(api) {
13 |     api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
14 |       const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX)
15 |       rule
16 |         .oneOf(CHAIN_ID.ONE_OF.SVG)
17 |         .use(CHAIN_ID.USE.SVGR)
18 |         .clear()
19 |         .loader(require.resolve('./svg.js'))
20 | 
21 |       const issuer = [/\.vue$/, JS_REGEX, TS_REGEX]
22 |       rule.oneOf('svg-asset-url').issuer({ not: issuer })
23 |       rule.oneOf('svg-asset-inline').issuer({ not: issuer })
24 |       rule.oneOf('svg-asset').issuer({ not: issuer })
25 |     })
26 |   },
27 | })
28 | 
29 | /**
30 |  * @returns {import('@modern-js/builder-shared').DefaultBuilderPlugin}
31 |  */
32 | export const vuePlugin = () => ({
33 |   name: 'vue-plugin',
34 |   setup(api) {
35 |     api.modifyBundlerChain(async (chain) => {
36 |       const plugin = chain.plugin('vue')
37 | 
38 |       plugin.use(require('vue-rsloader').VueLoaderPlugin)
39 | 
40 |       const rule = chain.module.rule('vue').test(/\.vue$/)
41 |       rule.use('vue').loader(require.resolve('vue-rsloader')).options({})
42 |     })
43 |   },
44 | })
45 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/select.ts:
--------------------------------------------------------------------------------
 1 | import webpack = require('webpack')
 2 | import type { SFCDescriptor } from 'vue/compiler-sfc'
 3 | import type { ParsedUrlQuery } from 'querystring'
 4 | import { resolveScript } from './resolveScript'
 5 | import type { VueLoaderOptions } from 'src'
 6 | 
 7 | export function selectBlock(
 8 |   descriptor: SFCDescriptor,
 9 |   scopeId: string,
10 |   options: VueLoaderOptions,
11 |   loaderContext: webpack.loader.LoaderContext,
12 |   query: ParsedUrlQuery,
13 |   appendExtension: boolean
14 | ) {
15 |   // template
16 |   if (query.type === `template`) {
17 |     // if we are receiving a query with type it can only come from a *.vue file
18 |     // that contains that block, so the block is guaranteed to exist.
19 |     const template = descriptor.template!
20 |     if (appendExtension) {
21 |       loaderContext.resourcePath += '.' + (template.lang || 'html')
22 |     }
23 |     loaderContext.callback(null, template.content, template.map)
24 |     return
25 |   }
26 | 
27 |   // script
28 |   if (query.type === `script`) {
29 |     const script = resolveScript(descriptor, scopeId, options, loaderContext)!
30 |     if (appendExtension) {
31 |       loaderContext.resourcePath += '.' + (script.lang || 'js')
32 |     }
33 |     loaderContext.callback(null, script.content, script.map)
34 |     return
35 |   }
36 | 
37 |   // styles
38 |   if (query.type === `style` && query.index != null) {
39 |     const style = descriptor.styles[Number(query.index)]
40 |     if (appendExtension) {
41 |       loaderContext.resourcePath += '.' + (style.lang || 'css')
42 |     }
43 |     loaderContext.callback(null, style.content, style.map)
44 |     return
45 |   }
46 | 
47 |   // custom
48 |   if (query.type === 'custom' && query.index != null) {
49 |     const block = descriptor.customBlocks[Number(query.index)]
50 |     loaderContext.callback(null, block.content, block.map)
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/resolveScript.ts:
--------------------------------------------------------------------------------
 1 | import webpack = require('webpack')
 2 | import type {
 3 |   SFCDescriptor,
 4 |   SFCScriptBlock,
 5 |   TemplateCompiler,
 6 | } from 'vue/compiler-sfc'
 7 | import type { VueLoaderOptions } from 'src'
 8 | import { resolveTemplateTSOptions } from './util'
 9 | import { compileScript } from 'vue/compiler-sfc'
10 | 
11 | const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
12 | const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
13 | 
14 | /**
15 |  * inline template mode can only be enabled if:
16 |  * - is production (separate compilation needed for HMR during dev)
17 |  * - template has no pre-processor (separate loader chain required)
18 |  * - template is not using src
19 |  */
20 | export function canInlineTemplate(descriptor: SFCDescriptor, isProd: boolean) {
21 |   const templateLang = descriptor.template && descriptor.template.lang
22 |   const templateSrc = descriptor.template && descriptor.template.src
23 |   return isProd && !!descriptor.scriptSetup && !templateLang && !templateSrc
24 | }
25 | 
26 | export function resolveScript(
27 |   descriptor: SFCDescriptor,
28 |   scopeId: string,
29 |   options: VueLoaderOptions,
30 |   loaderContext: webpack.loader.LoaderContext
31 | ) {
32 |   if (!descriptor.script && !descriptor.scriptSetup) {
33 |     return null
34 |   }
35 | 
36 |   const isProd =
37 |     loaderContext.mode === 'production' || process.env.NODE_ENV === 'production'
38 |   const isServer = options.isServerBuild ?? loaderContext.target === 'node'
39 |   const enableInline = canInlineTemplate(descriptor, isProd)
40 | 
41 |   const cacheToUse = isServer ? serverCache : clientCache
42 |   const cached = cacheToUse.get(descriptor)
43 |   if (cached) {
44 |     return cached
45 |   }
46 | 
47 |   let resolved: SFCScriptBlock | null = null
48 | 
49 |   let templateCompiler: TemplateCompiler | undefined
50 |   if (typeof options.compiler === 'string') {
51 |     templateCompiler = require(options.compiler)
52 |   } else {
53 |     templateCompiler = options.compiler
54 |   }
55 | 
56 |   try {
57 |     resolved = compileScript(descriptor, {
58 |       id: scopeId,
59 |       isProd,
60 |       inlineTemplate: enableInline,
61 |       reactivityTransform: options.reactivityTransform,
62 |       babelParserPlugins: options.babelParserPlugins,
63 |       templateOptions: {
64 |         ssr: isServer,
65 |         compiler: templateCompiler,
66 |         compilerOptions: {
67 |           ...options.compilerOptions,
68 |           ...resolveTemplateTSOptions(descriptor, options),
69 |         },
70 |         transformAssetUrls: options.transformAssetUrls || true,
71 |       },
72 |     })
73 |   } catch (e) {
74 |     loaderContext.emitError(e)
75 |   }
76 | 
77 |   cacheToUse.set(descriptor, resolved)
78 |   return resolved
79 | }
80 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/templateLoader.ts:
--------------------------------------------------------------------------------
 1 | import webpack = require('webpack')
 2 | import * as qs from 'querystring'
 3 | import { getOptions } from 'loader-utils'
 4 | import { VueLoaderOptions } from './'
 5 | import { formatError } from './formatError'
 6 | import type { TemplateCompiler } from 'vue/compiler-sfc'
 7 | import { getDescriptor } from './descriptorCache'
 8 | import { resolveScript } from './resolveScript'
 9 | import { resolveTemplateTSOptions } from './util'
10 | import { compileTemplate } from 'vue/compiler-sfc'
11 | 
12 | // Loader that compiles raw template into JavaScript functions.
13 | // This is injected by the global pitcher (../pitch) for template
14 | // selection requests initiated from vue files.
15 | const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
16 |   source = String(source)
17 |   const loaderContext = this
18 | 
19 |   // although this is not the main vue-loader, we can get access to the same
20 |   // vue-loader options because we've set an ident in the plugin and used that
21 |   // ident to create the request for this loader in the pitcher.
22 |   const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
23 | 
24 |   const isServer = options.isServerBuild ?? loaderContext.target === 'node'
25 |   const isProd =
26 |     loaderContext.mode === 'production' || process.env.NODE_ENV === 'production'
27 |   const query = qs.parse(loaderContext.resourceQuery.slice(1))
28 |   const scopeId = query.id as string
29 |   const descriptor = getDescriptor(loaderContext.resourcePath)
30 |   const script = resolveScript(
31 |     descriptor,
32 |     query.id as string,
33 |     options,
34 |     loaderContext
35 |   )
36 | 
37 |   let templateCompiler: TemplateCompiler | undefined
38 |   if (typeof options.compiler === 'string') {
39 |     templateCompiler = require(options.compiler)
40 |   } else {
41 |     templateCompiler = options.compiler
42 |   }
43 | 
44 |   const compiled = compileTemplate({
45 |     source,
46 |     filename: loaderContext.resourcePath,
47 |     inMap,
48 |     id: scopeId,
49 |     scoped: !!query.scoped,
50 |     slotted: descriptor.slotted,
51 |     isProd,
52 |     ssr: isServer,
53 |     ssrCssVars: descriptor.cssVars,
54 |     compiler: templateCompiler,
55 |     compilerOptions: {
56 |       ...options.compilerOptions,
57 |       scopeId: query.scoped ? `data-v-${scopeId}` : undefined,
58 |       bindingMetadata: script ? script.bindings : undefined,
59 |       ...resolveTemplateTSOptions(descriptor, options),
60 |     },
61 |     transformAssetUrls: options.transformAssetUrls || true,
62 |   })
63 | 
64 |   // tips
65 |   if (compiled.tips.length) {
66 |     compiled.tips.forEach((tip) => {
67 |       loaderContext.emitWarning(tip)
68 |     })
69 |   }
70 | 
71 |   // errors
72 |   if (compiled.errors && compiled.errors.length) {
73 |     compiled.errors.forEach((err) => {
74 |       if (typeof err === 'string') {
75 |         loaderContext.emitError(err)
76 |       } else {
77 |         formatError(
78 |           err,
79 |           inMap ? inMap.sourcesContent![0] : (source as string),
80 |           loaderContext.resourcePath
81 |         )
82 |         loaderContext.emitError(err)
83 |       }
84 |     })
85 |   }
86 | 
87 |   const { code, map } = compiled
88 |   loaderContext.callback(null, code, map)
89 | }
90 | 
91 | export default TemplateLoader
92 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/style.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | :root {
  6 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  7 |   line-height: 1.5;
  8 |   font-weight: 400;
  9 | 
 10 |   color-scheme: light dark;
 11 |   color: rgba(255, 255, 255, 0.87);
 12 |   background-color: #242424;
 13 | 
 14 |   font-synthesis: none;
 15 |   text-rendering: optimizeLegibility;
 16 |   -webkit-font-smoothing: antialiased;
 17 |   -moz-osx-font-smoothing: grayscale;
 18 |   -webkit-text-size-adjust: 100%;
 19 | }
 20 | 
 21 | a {
 22 |   font-weight: 500;
 23 |   color: #646cff;
 24 |   text-decoration: inherit;
 25 | }
 26 | a:hover {
 27 |   color: #535bf2;
 28 | }
 29 | 
 30 | body {
 31 |   margin: 0;
 32 |   display: flex;
 33 |   place-items: center;
 34 |   min-width: 320px;
 35 |   min-height: 100vh;
 36 | }
 37 | 
 38 | h1 {
 39 |   font-size: 3.2em;
 40 |   line-height: 1.1;
 41 | }
 42 | 
 43 | button {
 44 |   border-radius: 8px;
 45 |   border: 1px solid transparent;
 46 |   padding: 0.6em 1.2em;
 47 |   font-size: 1em;
 48 |   font-weight: 500;
 49 |   font-family: inherit;
 50 |   background-color: #1a1a1a;
 51 |   cursor: pointer;
 52 |   transition: border-color 0.25s;
 53 | }
 54 | button:hover {
 55 |   border-color: #646cff;
 56 | }
 57 | button:focus,
 58 | button:focus-visible {
 59 |   outline: 4px auto -webkit-focus-ring-color;
 60 | }
 61 | 
 62 | .card {
 63 |   padding: 2em;
 64 | }
 65 | 
 66 | #app {
 67 |   max-width: 1280px;
 68 |   margin: 0 auto;
 69 |   padding: 2rem;
 70 |   text-align: center;
 71 | }
 72 | 
 73 | @media (prefers-color-scheme: light) {
 74 |   :root {
 75 |     color: #213547;
 76 |     background-color: #ffffff;
 77 |   }
 78 |   a:hover {
 79 |     color: #747bff;
 80 |   }
 81 |   button {
 82 |     background-color: #f9f9f9;
 83 |   }
 84 | }
 85 | 
 86 | /*
 87 |   Theme: GitHub
 88 |   Description: Light theme as seen on github.com
 89 |   Author: github.com
 90 |   Maintainer: @Hirse
 91 |   Updated: 2021-05-15
 92 | 
 93 |   Outdated base version: https://github.com/primer/github-syntax-light
 94 |   Current colors taken from GitHub's CSS
 95 | */
 96 | pre code.hljs {
 97 |   display: block;
 98 |   overflow-x: auto;
 99 |   padding: 1em;
100 | }
101 | code.hljs {
102 |   padding: 3px 5px;
103 | }
104 | .hljs {
105 |   color: #24292e;
106 |   background: #fff;
107 | }
108 | .hljs-doctag,
109 | .hljs-keyword,
110 | .hljs-meta .hljs-keyword,
111 | .hljs-template-tag,
112 | .hljs-template-variable,
113 | .hljs-type,
114 | .hljs-variable.language_ {
115 |   color: #d73a49;
116 | }
117 | .hljs-title,
118 | .hljs-title.class_,
119 | .hljs-title.class_.inherited__,
120 | .hljs-title.function_ {
121 |   color: #6f42c1;
122 | }
123 | .hljs-attr,
124 | .hljs-attribute,
125 | .hljs-literal,
126 | .hljs-meta,
127 | .hljs-number,
128 | .hljs-operator,
129 | .hljs-selector-attr,
130 | .hljs-selector-class,
131 | .hljs-selector-id,
132 | .hljs-variable {
133 |   color: #005cc5;
134 | }
135 | .hljs-meta .hljs-string,
136 | .hljs-regexp,
137 | .hljs-string {
138 |   color: #032f62;
139 | }
140 | .hljs-built_in,
141 | .hljs-symbol {
142 |   color: #e36209;
143 | }
144 | .hljs-code,
145 | .hljs-comment,
146 | .hljs-formula {
147 |   color: #6a737d;
148 | }
149 | .hljs-name,
150 | .hljs-quote,
151 | .hljs-selector-pseudo,
152 | .hljs-selector-tag {
153 |   color: #22863a;
154 | }
155 | .hljs-subst {
156 |   color: #24292e;
157 | }
158 | .hljs-section {
159 |   color: #005cc5;
160 |   font-weight: 700;
161 | }
162 | .hljs-bullet {
163 |   color: #735c0f;
164 | }
165 | .hljs-emphasis {
166 |   color: #24292e;
167 |   font-style: italic;
168 | }
169 | .hljs-strong {
170 |   color: #24292e;
171 |   font-weight: 700;
172 | }
173 | .hljs-addition {
174 |   color: #22863a;
175 |   background-color: #f0fff4;
176 | }
177 | .hljs-deletion {
178 |   color: #b31d28;
179 |   background-color: #ffeef0;
180 | }
181 | 


--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
  1 | <p align='center'>
  2 |   <img src='https://user-images.githubusercontent.com/12960906/223734670-ca658c81-59e8-4170-bd69-d07f92c18716.png' alt='vue-rsloader - Vue loader for Rspack' width='400'/>
  3 | </p>
  4 | 
  5 | <h6 align='center'>
  6 | <a href="https://vue-rsloader.512.pub/">在线 Demo</a>
  7 | </h6>
  8 | 
  9 | <h5 align='center'>
 10 | <b>Fork version of <a href="https://vue-loader.vuejs.org/zh/">vue-loader</a> for <a href="https://rspack.dev">Rspack</a></b>
 11 | </h5>
 12 | 
 13 | <br>
 14 | 
 15 | <p align='center'>
 16 | <a href="https://github.com/skywalker512/vue-rsloader/blob/main/README.md">English</a> | <b>简体中文</b>
 17 | </p>
 18 | 
 19 | > **Warning**: JUST FOR FUN, NOT FOR PRODUCTION.
 20 | 
 21 | ## Why This
 22 | 
 23 | 由于 Rspack 还不支持 functional rule condition 和 [loader pitch](https://webpack.docschina.org/api/loaders/#pitching-loader)，这个插件使用 [Regex](./packages/vue-rsloader/src/pluginRspack.ts) 来生成克隆规则和注入相关的 css loader。
 24 | 
 25 | ## Features
 26 | 
 27 | 主要继承自 vue-loader
 28 | 
 29 | - 🗂 [单文件组件](https://vuejs.org/guide/scaling-up/sfc.html)
 30 | 
 31 | - 🔥 在开发过程中保持状态的热重载。(HMR)
 32 | 
 33 | - 🎨 将 `<style>` 和 `<template>` 中引用的静态资产视为模块依赖，并用 rspack loader 处理它们。
 34 | 
 35 | - ✅ 为每个组件 Simulate scoped CSS
 36 | 
 37 | - 🦾 `<template>`中的 TypeScript
 38 | 
 39 | ## Install
 40 | 
 41 | 就像使用 vue-loader 一样，安装然后把它添加到你的 rspack 配置中
 42 | 
 43 | ```shell
 44 | pnpm i -D vue-rsloader
 45 | ```
 46 | 
 47 | ### Rspack Configuration
 48 | 
 49 | ```js
 50 | // rspack.config.js
 51 | const { VueLoaderPlugin } = require('vue-rsloader')
 52 | 
 53 | module.exports = {
 54 |   module: {
 55 |     rules: [
 56 |       // ... 其他规则
 57 |       {
 58 |         test: /\.vue$/,
 59 |         use: [
 60 |           {
 61 |             loader: require.resolve('vue-rsloader'),
 62 |             /** @type {import('vue-rsloader').VueLoaderOptions} */
 63 |             options: {
 64 |               // 在后文有 options 参考
 65 |             },
 66 |           },
 67 |         ],
 68 |       },
 69 |       // 因为rspack在内部处理ts、css 我们不需要 ts-loader，css-loader 这样的 loader
 70 |     ],
 71 |   },
 72 |   plugins: [
 73 |     // 确保包含插件！
 74 |     new VueLoaderPlugin(),
 75 |   ],
 76 | }
 77 | ```
 78 | 
 79 | ## Example
 80 | 
 81 | - [modernjs-builder](./example/modernjs-builder/) - [Demo](https://vue-rsloader.512.pub/)
 82 | - [Pure Rspack fork from Vitesse-lite](https://github.com/skywalker512/rspacksse-lite) - [Demo](https://rspacksse-lite.512.pub/)
 83 | 
 84 | ## Options
 85 | 
 86 | ```ts
 87 | export interface VueLoaderOptions {
 88 |   /** https://babeljs.io/docs/en/next/babel-parser#plugins */
 89 |   babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
 90 |   /**
 91 |    * 配置要转换为资产URL导入的标签/属性，或者使用 “false” 完全禁用转换。
 92 |    * @default true
 93 |    */
 94 |   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
 95 |   /**
 96 |    * 使用自定义的 compiler-sfc 实例。可用于强制指定版本。
 97 |    */
 98 |   compiler?: TemplateCompiler
 99 |   /** 传递给 vue/compiler-sfc 的选项 */
100 |   compilerOptions?: CompilerOptions
101 |   /**
102 |    * 启用Vue响应式转换（实验性）。
103 |    * https://vuejs.org/guide/extras/reactivity-transform.html
104 |    * - `true`：将启用所有 vue [js(x)，ts(x) wip] 文件的转换，除了 node_modules 中的文件。
105 |    * - `false`：在所有情况下禁用。
106 |    *
107 |    * @default false
108 |    */
109 |   reactivityTransform?: boolean
110 |   /**
111 |    * 将 Vue SFC 转换为custom elements
112 |    * - `true`：所有`*.vue`导入都将被转换为custom elements
113 |    * - `RegExp`：匹配的文件将被转换为custom elements
114 |    *
115 |    * @default /\.ce\.vue$/
116 |    */
117 |   customElement?: boolean | RegExp
118 | 
119 |   /**
120 |    * @default: 在开发模式下为 true，在生产模式下或 rspack config target: 'node' 时为false。
121 |    * 允许的值：false（true不会强制热重载，无论是在生产模式还是当目标为'node'时）
122 |    */
123 |   hotReload?: boolean
124 |   /**
125 |    * 在开发环境中，vue-loader 为组件注入 __file 属性以提供更好的调试体验。如果组件缺少 name 属性
126 |    * 则 Vue 将从 __file 字段推断出名称以在控制台警告中显示。默认情况下，在生产构建中会剥离此属性。
127 |    * 但是，如果您正在开发一个组件库并且不想在每个组件中指定名称，则可能希望保留它。
128 |    * @default false
129 |    */
130 |   exposeFilename?: boolean
131 |   /**
132 |    * not use
133 |    */
134 |   appendExtension?: boolean
135 |   /**
136 |    * Template 是否需要生成或者识别 ts 代码
137 |    * @default: 当 lang=tsx? 为true时，其他情况为false
138 |    */
139 |   enableTsInTemplate?: boolean
140 | 
141 |   /**
142 |    * templateOptions.ssr
143 |    * @default false
144 |    */
145 |   isServerBuild?: boolean
146 | }
147 | ```
148 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align='center'>
  2 |   <img src='https://user-images.githubusercontent.com/12960906/223734670-ca658c81-59e8-4170-bd69-d07f92c18716.png' alt='vue-rsloader - Vue loader for Rspack' width='400'/>
  3 | </p>
  4 | 
  5 | <h6 align='center'>
  6 | <a href="https://vue-rsloader.512.pub/">Online Demo</a>
  7 | </h6>
  8 | 
  9 | <h5 align='center'>
 10 | <b>Fork version of <a href="https://vue-loader.vuejs.org/">vue-loader</a> for <a href="https://rspack.dev">Rspack</a></b>
 11 | </h5>
 12 | 
 13 | <br>
 14 | 
 15 | <p align='center'>
 16 | <b>English</b> | <a href="https://github.com/skywalker512/vue-rsloader/blob/main/README.zh-CN.md">简体中文</a>
 17 | </p>
 18 | 
 19 | > **Warning**: JUST FOR FUN, NOT FOR PRODUCTION
 20 | 
 21 | ## Why This
 22 | 
 23 | As Rspack does not yet support functional rule condition and [loader pitch](https://webpack.js.org/api/loaders/#pitching-loader), this loader use [Regex](./packages/vue-rsloader/src/pluginRspack.ts) (Generated by ChatGPT) to generate clone rules and inject related css loaders.
 24 | 
 25 | ## Features
 26 | 
 27 | Mainly inherited from vue-loader
 28 | 
 29 | - 🗂 [Single-File Components](https://vuejs.org/guide/scaling-up/sfc.html)
 30 | 
 31 | - 🔥 State-preserving hot-reloading during development. (HMR)
 32 | 
 33 | - 🎨 Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with rspack loaders;
 34 | 
 35 | - ✅ Simulate scoped CSS for each component
 36 | 
 37 | - 🦾 TypeScript in `<template>`
 38 | 
 39 | ## Install
 40 | 
 41 | Just like vue-loader, you can install it and then add it to your rspack config.
 42 | 
 43 | ```shell
 44 | pnpm i -D vue-rsloader
 45 | ```
 46 | 
 47 | ### Rspack Configuration
 48 | 
 49 | ```js
 50 | // rspack.config.js
 51 | const { VueLoaderPlugin } = require('vue-rsloader')
 52 | 
 53 | module.exports = {
 54 |   module: {
 55 |     rules: [
 56 |       // ... other rules
 57 |       {
 58 |         test: /\.vue$/,
 59 |         use: [
 60 |           {
 61 |             loader: require.resolve('vue-rsloader'),
 62 |             /** @type {import('vue-rsloader').VueLoaderOptions} */
 63 |             options: {
 64 |               // In the following text, it will be mentioned this
 65 |             },
 66 |           },
 67 |         ],
 68 |       },
 69 |       // because rspack handles ts, css internally
 70 |       // we don't need those loaders like ts-loader, css-loader, it just works
 71 |     ],
 72 |   },
 73 |   plugins: [
 74 |     // make sure to include the plugin!
 75 |     new VueLoaderPlugin(),
 76 |   ],
 77 | }
 78 | ```
 79 | 
 80 | ## Example
 81 | 
 82 | - [modernjs-builder](./example/modernjs-builder/) - [Demo](https://vue-rsloader.512.pub/)
 83 | - [Pure Rspack fork from Vitesse-lite](https://github.com/skywalker512/rspacksse-lite) - [Demo](https://rspacksse-lite.512.pub/)
 84 | 
 85 | ## Options
 86 | 
 87 | ```ts
 88 | export interface VueLoaderOptions {
 89 |   /** https://babeljs.io/docs/en/next/babel-parser#plugins */
 90 |   babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
 91 |   /**
 92 |    * Configure what tags/attributes to transform into asset url imports,
 93 |    * or disable the transform altogether with `false`.
 94 |    * @default true
 95 |    */
 96 |   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
 97 |   /**
 98 |    * Use custom compiler-sfc instance. Can be used to force a specific version.
 99 |    */
100 |   compiler?: TemplateCompiler
101 |   /** options to pass on to vue/compiler-sfc */
102 |   compilerOptions?: CompilerOptions
103 |   /**
104 |    * Enable Vue reactivity transform (experimental).
105 |    * https://vuejs.org/guide/extras/reactivity-transform.html
106 |    * - `true`: transform will be enabled for all vue [js(x),ts(x) wip] files except
107 |    *           those inside node_modules
108 |    * - `false`: disable in all cases
109 |    *
110 |    * @default false
111 |    */
112 |   reactivityTransform?: boolean
113 |   /**
114 |    * Transform Vue SFCs into custom elements.
115 |    * - `true`: all `*.vue` imports are converted into custom elements
116 |    * - `RegExp`: matched files are converted into custom elements
117 |    *
118 |    * @default /\.ce\.vue$/
119 |    */
120 |   customElement?: boolean | RegExp
121 | 
122 |   /**
123 |    * @default: true in development mode, false in production mode or when the rspack config has target: 'node'.
124 |    * allowed value: false (true will not force Hot Reload neither in production mode nor when target: 'node')
125 |    *  Whether to use webpack Hot Module Replacement to apply changes in the browser without reloading the page. Use this
126 |    * option (value false) to disable the Hot Reload feature in development mode.
127 |    */
128 |   hotReload?: boolean
129 |   /**
130 |    * In non-production environments, vue-loader injects a __file property to components for better debugging experience. If the
131 |    * name property is missing in a component, Vue will infer it from the __file field to display in console warnings.
132 |    * This property is stripped in production builds by default. But you may want to retain it if you are developing a component
133 |    * library and don't want to bother specifying name in each component. Then you can turn this option on.
134 |    * @default false
135 |    */
136 |   exposeFilename?: boolean
137 |   /**
138 |    * not use
139 |    */
140 |   appendExtension?: boolean
141 |   /**
142 |    * Indicates that transforms and codegen should try to output valid TS code
143 |    * @default: when lang=tsx? is true, other situations are false
144 |    */
145 |   enableTsInTemplate?: boolean
146 | 
147 |   /**
148 |    * templateOptions.ssr
149 |    * @default false
150 |    */
151 |   isServerBuild?: boolean
152 | }
153 | ```
154 | 


--------------------------------------------------------------------------------
/example/modernjs-builder/src/components/readme.md:
--------------------------------------------------------------------------------
  1 | <p align='center'>
  2 |   <img src='https://user-images.githubusercontent.com/12960906/223734670-ca658c81-59e8-4170-bd69-d07f92c18716.png' alt='vue-rsloader - Vue loader for Rspack' width='400'/>
  3 | </p>
  4 | 
  5 | <h6 align='center'>
  6 | <a href="https://vue-rsloader.512.pub/">Online Demo</a>
  7 | </h6>
  8 | 
  9 | <h5 align='center'>
 10 | <b>Fork version of <a href="https://vue-loader.vuejs.org/">vue-loader</a> for <a href="https://rspack.dev">Rspack</a></b>
 11 | </h5>
 12 | 
 13 | <br>
 14 | 
 15 | <p align='center'>
 16 | <b>English</b> | <a href="https://github.com/skywalker512/vue-rsloader/blob/main/README.zh-CN.md">简体中文</a>
 17 | </p>
 18 | 
 19 | > **Warning**: JUST FOR FUN, NOT FOR PRODUCTION
 20 | 
 21 | ## Why This
 22 | 
 23 | As Rspack does not yet support functional rule condition and [loader pitch](https://webpack.js.org/api/loaders/#pitching-loader), this loader use [Regex](./packages/vue-rsloader/src/pluginRspack.ts) (Generated by ChatGPT) to generate clone rules and inject related css loaders.
 24 | 
 25 | ## Features
 26 | 
 27 | Mainly inherited from vue-loader
 28 | 
 29 | - 🗂 [Single-File Components](https://vuejs.org/guide/scaling-up/sfc.html)
 30 | 
 31 | - 🔥 State-preserving hot-reloading during development. (HMR)
 32 | 
 33 | - 🎨 Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with rspack loaders;
 34 | 
 35 | - ✅ Simulate scoped CSS for each component
 36 | 
 37 | - 🦾 TypeScript in `<template>`
 38 | 
 39 | ## Install
 40 | 
 41 | Just like vue-loader, you can install it and then add it to your rspack config.
 42 | 
 43 | ```shell
 44 | pnpm i -D vue-rsloader
 45 | ```
 46 | 
 47 | ### Rspack Configuration
 48 | 
 49 | ```js
 50 | // rspack.config.js
 51 | const { VueLoaderPlugin } = require('vue-rsloader')
 52 | 
 53 | module.exports = {
 54 |   module: {
 55 |     rules: [
 56 |       // ... other rules
 57 |       {
 58 |         test: /\.vue$/,
 59 |         use: [
 60 |           {
 61 |             loader: require.resolve('vue-rsloader'),
 62 |             /** @type {import('vue-rsloader').VueLoaderOptions} */
 63 |             options: {
 64 |               // In the following text, it will be mentioned this
 65 |             },
 66 |           },
 67 |         ],
 68 |       },
 69 |       // because rspack handles ts, css internally
 70 |       // we don't need those loaders like ts-loader, css-loader, it just works
 71 |     ],
 72 |   },
 73 |   plugins: [
 74 |     // make sure to include the plugin!
 75 |     new VueLoaderPlugin(),
 76 |   ],
 77 | }
 78 | ```
 79 | 
 80 | ## Example
 81 | 
 82 | - [modernjs-builder](./example/modernjs-builder/) - [Demo](https://vue-rsloader.512.pub/)
 83 | - [Pure Rspack fork from Vitesse-lite](https://github.com/skywalker512/rspacksse-lite) - [Demo](https://rspacksse-lite.512.pub/)
 84 | 
 85 | ## Options
 86 | 
 87 | ```ts
 88 | export interface VueLoaderOptions {
 89 |   /** https://babeljs.io/docs/en/next/babel-parser#plugins */
 90 |   babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
 91 |   /**
 92 |    * Configure what tags/attributes to transform into asset url imports,
 93 |    * or disable the transform altogether with `false`.
 94 |    * @default true
 95 |    */
 96 |   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
 97 |   /**
 98 |    * Use custom compiler-sfc instance. Can be used to force a specific version.
 99 |    */
100 |   compiler?: TemplateCompiler
101 |   /** options to pass on to vue/compiler-sfc */
102 |   compilerOptions?: CompilerOptions
103 |   /**
104 |    * Enable Vue reactivity transform (experimental).
105 |    * https://vuejs.org/guide/extras/reactivity-transform.html
106 |    * - `true`: transform will be enabled for all vue [js(x),ts(x) wip] files except
107 |    *           those inside node_modules
108 |    * - `false`: disable in all cases
109 |    *
110 |    * @default false
111 |    */
112 |   reactivityTransform?: boolean
113 |   /**
114 |    * Transform Vue SFCs into custom elements.
115 |    * - `true`: all `*.vue` imports are converted into custom elements
116 |    * - `RegExp`: matched files are converted into custom elements
117 |    *
118 |    * @default /\.ce\.vue$/
119 |    */
120 |   customElement?: boolean | RegExp
121 | 
122 |   /**
123 |    * @default: true in development mode, false in production mode or when the rspack config has target: 'node'.
124 |    * allowed value: false (true will not force Hot Reload neither in production mode nor when target: 'node')
125 |    *  Whether to use webpack Hot Module Replacement to apply changes in the browser without reloading the page. Use this
126 |    * option (value false) to disable the Hot Reload feature in development mode.
127 |    */
128 |   hotReload?: boolean
129 |   /**
130 |    * In non-production environments, vue-loader injects a __file property to components for better debugging experience. If the
131 |    * name property is missing in a component, Vue will infer it from the __file field to display in console warnings.
132 |    * This property is stripped in production builds by default. But you may want to retain it if you are developing a component
133 |    * library and don't want to bother specifying name in each component. Then you can turn this option on.
134 |    * @default false
135 |    */
136 |   exposeFilename?: boolean
137 |   /**
138 |    * not use
139 |    */
140 |   appendExtension?: boolean
141 |   /**
142 |    * Indicates that transforms and codegen should try to output valid TS code
143 |    * @default: when lang=tsx? is true, other situations are false
144 |    */
145 |   enableTsInTemplate?: boolean
146 | 
147 |   /**
148 |    * templateOptions.ssr
149 |    * @default false
150 |    */
151 |   isServerBuild?: boolean
152 | }
153 | ```
154 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/pluginRspack.ts:
--------------------------------------------------------------------------------
  1 | import type { VueLoaderOptions } from './'
  2 | import type {
  3 |   RspackPluginInstance,
  4 |   Compiler,
  5 |   RuleSetRule,
  6 |   RuleSetUseItem,
  7 |   RuleSetCondition,
  8 | } from '@rspack/core'
  9 | 
 10 | const NS = 'vue-rsloader'
 11 | 
 12 | type RawRule = RuleSetRule
 13 | 
 14 | // rspack defaults rules
 15 | // 在这里主要是为了 clone rule
 16 | const rspackDefaultRule = (() => {
 17 |   const esm = {
 18 |     type: 'javascript/esm',
 19 |   }
 20 |   const commonjs = {
 21 |     // TODO: this is "javascript/dynamic" in webpack
 22 |     type: 'javascript/auto',
 23 |   }
 24 |   const rules: RuleSetRule[] = [
 25 |     {
 26 |       test: /\.json$/i,
 27 |       type: 'json',
 28 |     },
 29 |     {
 30 |       test: /\.mjs$/i,
 31 |       ...esm,
 32 |     },
 33 |     {
 34 |       test: /\.js$/i,
 35 |       // TODO:
 36 |       // descriptionData: {
 37 |       // 	type: "module"
 38 |       // },
 39 |       ...esm,
 40 |     },
 41 |     {
 42 |       test: /\.cjs$/i,
 43 |       ...commonjs,
 44 |     },
 45 |     {
 46 |       test: /\.js$/i,
 47 |       // TODO:
 48 |       // descriptionData: {
 49 |       // 	type: "commonjs"
 50 |       // },
 51 |       ...commonjs,
 52 |     },
 53 |     {
 54 |       test: /\.jsx$/i,
 55 |       type: 'jsx',
 56 |     },
 57 |     {
 58 |       test: /\.ts$/i,
 59 |       type: 'ts',
 60 |     },
 61 |     {
 62 |       test: /\.tsx$/i,
 63 |       type: 'tsx',
 64 |     },
 65 |   ]
 66 |   const cssRule = {
 67 |     type: 'css',
 68 |     resolve: {
 69 |       preferRelative: true,
 70 |     },
 71 |   }
 72 |   const cssModulesRule = {
 73 |     type: 'css/module',
 74 |   }
 75 |   rules.push({
 76 |     test: /\.css$/i,
 77 |     oneOf: [
 78 |       {
 79 |         test: /\.module\.css$/i,
 80 |         ...cssModulesRule,
 81 |       },
 82 |       {
 83 |         ...cssRule,
 84 |       },
 85 |     ],
 86 |   })
 87 |   return rules
 88 | })()
 89 | 
 90 | class VueLoaderPlugin implements RspackPluginInstance {
 91 |   static NS = NS
 92 | 
 93 |   apply(compiler: Compiler) {
 94 |     // @ts-ignore
 95 |     // const normalModule = compiler.webpack.NormalModule || NormalModule
 96 | 
 97 |     // add NS marker so that the loader can detect and report missing plugin
 98 |     // compiler.hooks.compilation.tap(id, (compilation) => {
 99 |     //   normalModule
100 |     //     .getCompilationHooks(compilation)
101 |     //     .loader.tap(id, (loaderContext: any) => {
102 |     //       loaderContext[NS] = true
103 |     //     })
104 |     // })
105 | 
106 |     const rules = compiler.options.module!.rules
107 |     let rawVueRule: RawRule
108 |     let vueRules: RawRule[] = []
109 | 
110 |     for (const rawRule of rules) {
111 |       if (rawRule === '...') {
112 |         continue
113 |       }
114 |       if (match(rawRule, 'foo.vue')) {
115 |         vueRules.push(rawRule)
116 |       }
117 |       if (!vueRules.length) {
118 |         if (match(rawRule, 'foo.vue.html')) {
119 |           vueRules.push(rawRule)
120 |         }
121 |       }
122 |       if (vueRules.length > 0) {
123 |         if (rawRule.oneOf) {
124 |           throw new Error(
125 |             `[VueLoaderPlugin Error] vue-rsloader currently does not support vue rules with oneOf.`
126 |           )
127 |         }
128 |         rawVueRule = rawRule
129 |         break
130 |       }
131 |     }
132 |     if (!vueRules.length) {
133 |       throw new Error(
134 |         `[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
135 |           `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
136 |       )
137 |     }
138 | 
139 |     // get the normlized "use" for vue files
140 |     const vueUse = Array.isArray(vueRules[0].use)
141 |       ? vueRules[0].use
142 |       : [vueRules[0].use!]
143 | 
144 |     // get vue-rsloader options
145 |     const vueLoaderUseIndex = vueUse.findIndex((u) => {
146 |       // FIXME: this code logic is incorrect when project paths starts with `vue-rsloader-something`
147 |       return /^vue-rsloader|(\/|\\|@)vue-rsloader/.test(
148 |         typeof u === 'string' ? u : u.loader
149 |       )
150 |     })
151 | 
152 |     if (vueLoaderUseIndex < 0) {
153 |       throw new Error(
154 |         `[VueLoaderPlugin Error] No matching use for vue-rsloader is found.\n` +
155 |           `Make sure the rule matching .vue files include vue-rsloader in its use.`
156 |       )
157 |     }
158 | 
159 |     // make sure vue-rsloader options has a known ident so that we can share
160 |     // options by reference in the template-loader by using a ref query like
161 |     // template-loader??vue-rsloader-options
162 |     let vueLoaderUse = vueUse[vueLoaderUseIndex] as RuleSetUseItem
163 |     vueLoaderUse =
164 |       typeof vueLoaderUse === 'string' ? { loader: vueLoaderUse } : vueLoaderUse
165 |     const vueLoaderOptions = (vueLoaderUse.options =
166 |       vueLoaderUse?.options || {}) as VueLoaderOptions
167 | 
168 |     // for each user rule (except the vue rule), create a cloned rule
169 |     // that targets the corresponding language blocks in *.vue files.
170 |     const clonedRules = [...rspackDefaultRule, ...rules]
171 |       .filter((r) => r !== '...' && r !== rawVueRule)
172 |       .flatMap((rawRule: RuleSetRule) => cloneRule(rawRule))
173 |       .filter(Boolean)
174 | 
175 |     rawVueRule!.use = vueUse
176 | 
177 |     // rule for template compiler
178 |     const templateCompilerRule = {
179 |       use: [
180 |         {
181 |           loader: require.resolve('./templateLoader'),
182 |           options: vueLoaderOptions,
183 |         },
184 |       ],
185 |       resourceQuery: /vue*.type=template/,
186 |     }
187 | 
188 |     // for each rule that matches plain .js files, also create a clone and
189 |     // match it against the compiled template code inside *.vue files, so that
190 |     // compiled vue render functions receive the same treatment as user code
191 |     // (mostly babel)
192 |     const jsRulesForRenderFn = [...rspackDefaultRule, ...rules]
193 |       .filter(
194 |         (r) =>
195 |           r !== '...' &&
196 |           r !== rawVueRule &&
197 |           (match(r, 'test.js') || match(r, 'test.ts'))
198 |       )
199 |       .flatMap((rawRule: RuleSetRule) => cloneRule(rawRule, true))
200 |       .filter(Boolean)
201 | 
202 |     // replace original rules
203 |     compiler.options.module!.rules = [
204 |       ...jsRulesForRenderFn,
205 |       templateCompilerRule,
206 |       ...clonedRules,
207 |       ...rules,
208 |     ]
209 |   }
210 | }
211 | 
212 | function match(rule: RuleSetRule, fakeFile: string) {
213 |   return rule.test instanceof RegExp && rule.test.test(fakeFile)
214 | }
215 | 
216 | function cloneRule(
217 |   rawRule: RawRule,
218 |   isTemplate = false,
219 |   parentExt?: string
220 | ): RawRule[] | undefined {
221 |   const rawTest = rawRule.test
222 |   const rawResourceQuery = rawRule.resourceQuery
223 |   const isFileRegex =
224 |     rawTest instanceof RegExp &&
225 |     rawTest.source.startsWith('\\.') &&
226 |     rawTest.source.endsWith('$')
227 | 
228 |   // css module
229 |   const isModule = isFileRegex && rawTest.source.includes('module')
230 |   // 提取文件后缀
231 |   const extRaw = isFileRegex
232 |     ? rawTest.source.slice(rawTest.source.lastIndexOf('\\.') + 2, -1)
233 |     : ''
234 |   const ext = extRaw ? extRaw : parentExt
235 | 
236 |   if (!ext) {
237 |     return
238 |   }
239 | 
240 |   const res = { ...rawRule }
241 | 
242 |   let langExtRegex: RegExp | undefined = undefined
243 |   if (isTemplate) {
244 |     if (ext.includes('ts')) {
245 |       langExtRegex = new RegExp(`vue(?=.*type=template)(?=.*ts=true)`)
246 |     } else if (ext.includes('js')) {
247 |       langExtRegex = new RegExp(`vue.*type=template`)
248 |     }
249 |   } else if (isModule) {
250 |     langExtRegex = new RegExp(`vue(?=.*module=true)(?=.*lang=${ext})`)
251 |   } else if (ext !== parentExt) {
252 |     // 保留原 rawResourceQuery 并添加 lang=ext 正则
253 |     langExtRegex = new RegExp(`vue.*lang=${ext}`)
254 |   }
255 |   if (langExtRegex) {
256 |     res.resourceQuery = mergeRuleSetCondition(rawResourceQuery, langExtRegex)
257 |     delete res.test
258 |   }
259 | 
260 |   if (rawRule.oneOf) {
261 |     res.oneOf = rawRule.oneOf
262 |       .flatMap((rule) => cloneRule(rule, isTemplate, ext))
263 |       .filter(Boolean)
264 | 
265 |     if (!res.oneOf.length) {
266 |       return
267 |     }
268 |   }
269 | 
270 |   if (res.type?.includes('css')) {
271 |     const rawUse = res.use
272 |     if (rawUse) {
273 |       res.use = [
274 |         { loader: require.resolve('./stylePostLoader') },
275 |         ...(Array.isArray(rawUse) ? rawUse : [rawUse]),
276 |       ]
277 | 
278 |       let resourceQuery = res.resourceQuery
279 |       const inlineFlag = '&inline'
280 | 
281 |       return [
282 |         {
283 |           ...res,
284 |           resourceQuery: mergeRuleSetCondition(
285 |             resourceQuery,
286 |             new RegExp(inlineFlag)
287 |           ),
288 |           use: [{ loader: require.resolve('./styleInlineLoader') }, ...res.use],
289 |           type: 'js',
290 |         },
291 |         res,
292 |       ]
293 |     }
294 |   }
295 | 
296 |   return [res]
297 | }
298 | 
299 | function mergeRuleSetCondition(
300 |   conditions1: RuleSetCondition | undefined,
301 |   conditions2: RegExp
302 | ): RuleSetCondition {
303 |   return { and: [conditions1, conditions2].filter(Boolean) }
304 | }
305 | 
306 | export default VueLoaderPlugin
307 | 


--------------------------------------------------------------------------------
/packages/vue-rsloader/src/index.ts:
--------------------------------------------------------------------------------
  1 | import webpack = require('webpack')
  2 | import * as path from 'path'
  3 | import * as qs from 'querystring'
  4 | import {
  5 |   getOptions,
  6 |   stringifyRequest as stringifyRequestRaw,
  7 | } from 'loader-utils'
  8 | 
  9 | import hash = require('hash-sum')
 10 | 
 11 | import { parse } from 'vue/compiler-sfc'
 12 | import type {
 13 |   TemplateCompiler,
 14 |   CompilerOptions,
 15 |   SFCBlock,
 16 |   SFCTemplateCompileOptions,
 17 |   SFCScriptCompileOptions,
 18 | } from 'vue/compiler-sfc'
 19 | import { selectBlock } from './select'
 20 | import { genHotReloadCode } from './hotReload'
 21 | import { genCSSModulesCode } from './cssModules'
 22 | import { formatError } from './formatError'
 23 | 
 24 | import VueLoaderPlugin from './plugin'
 25 | import { canInlineTemplate } from './resolveScript'
 26 | import { setDescriptor } from './descriptorCache'
 27 | 
 28 | export { VueLoaderPlugin }
 29 | 
 30 | export interface VueLoaderOptions {
 31 |   /** https://babeljs.io/docs/en/next/babel-parser#plugins */
 32 |   babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
 33 |   /**
 34 |    * Configure what tags/attributes to transform into asset url imports,
 35 |    * or disable the transform altogether with `false`.
 36 |    * @default true
 37 |    */
 38 |   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
 39 |   /**
 40 |    * Use custom compiler-sfc instance. Can be used to force a specific version.
 41 |    */
 42 |   compiler?: TemplateCompiler
 43 |   /** options to pass on to vue/compiler-sfc */
 44 |   compilerOptions?: CompilerOptions
 45 |   /**
 46 |    * Enable Vue reactivity transform (experimental).
 47 |    * https://vuejs.org/guide/extras/reactivity-transform.html
 48 |    * - `true`: transform will be enabled for all vue [js(x),ts(x) wip] files except
 49 |    *           those inside node_modules
 50 |    * - `false`: disable in all cases
 51 |    *
 52 |    * @default false
 53 |    */
 54 |   reactivityTransform?: boolean
 55 |   /**
 56 |    * Transform Vue SFCs into custom elements.
 57 |    * - `true`: all `*.vue` imports are converted into custom elements
 58 |    * - `RegExp`: matched files are converted into custom elements
 59 |    *
 60 |    * @default /\.ce\.vue$/
 61 |    */
 62 |   customElement?: boolean | RegExp
 63 | 
 64 |   /**
 65 |    * @default: true in development mode, false in production mode or when the rspack config has target: 'node'.
 66 |    * allowed value: false (true will not force Hot Reload neither in production mode nor when target: 'node')
 67 |    *  Whether to use webpack Hot Module Replacement to apply changes in the browser without reloading the page. Use this
 68 |    * option (value false) to disable the Hot Reload feature in development mode.
 69 |    */
 70 |   hotReload?: boolean
 71 |   /**
 72 |    * In non-production environments, vue-loader injects a __file property to components for better debugging experience. If the
 73 |    * name property is missing in a component, Vue will infer it from the __file field to display in console warnings.
 74 |    * This property is stripped in production builds by default. But you may want to retain it if you are developing a component
 75 |    * library and don't want to bother specifying name in each component. Then you can turn this option on.
 76 |    * @default false
 77 |    */
 78 |   exposeFilename?: boolean
 79 |   /**
 80 |    * not use
 81 |    */
 82 |   appendExtension?: boolean
 83 |   /**
 84 |    * Indicates that transforms and codegen should try to output valid TS code
 85 |    * @default: when lang=tsx? is true, other situations are false
 86 |    */
 87 |   enableTsInTemplate?: boolean
 88 | 
 89 |   /**
 90 |    * templateOptions.ssr
 91 |    * @default false
 92 |    */
 93 |   isServerBuild?: boolean
 94 | }
 95 | 
 96 | const exportHelperPath = JSON.stringify(require.resolve('./exportHelper'))
 97 | 
 98 | export default function loader(
 99 |   this: webpack.loader.LoaderContext,
100 |   source: string
101 | ) {
102 |   const loaderContext = this
103 | 
104 |   const stringifyRequest = (r: string) => stringifyRequestRaw(loaderContext, r)
105 | 
106 |   const {
107 |     mode,
108 |     target,
109 |     sourceMap,
110 |     rootContext,
111 |     resourcePath,
112 |     resourceQuery: _resourceQuery = '',
113 |   } = loaderContext
114 | 
115 |   const rawQuery = _resourceQuery.slice(1)
116 |   const incomingQuery = qs.parse(rawQuery)
117 |   const resourceQuery = rawQuery ? `&${rawQuery}` : ''
118 |   const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
119 | 
120 |   const isServer = options.isServerBuild ?? target === 'node'
121 |   const isProduction =
122 |     mode === 'production' || process.env.NODE_ENV === 'production'
123 | 
124 |   const filename = resourcePath.replace(/\?.*$/, '')
125 |   const { descriptor, errors } = parse(source, {
126 |     filename,
127 |     sourceMap,
128 |   })
129 | 
130 |   const asCustomElement =
131 |     typeof options.customElement === 'boolean'
132 |       ? options.customElement
133 |       : (options.customElement || /\.ce\.vue$/).test(filename)
134 | 
135 |   // cache descriptor
136 |   setDescriptor(filename, descriptor)
137 | 
138 |   if (errors.length) {
139 |     errors.forEach((err) => {
140 |       formatError(err, source, resourcePath)
141 |       loaderContext.emitError(err)
142 |     })
143 |     return ``
144 |   }
145 | 
146 |   // module id for scoped CSS & hot-reload
147 |   const rawShortFilePath = path
148 |     .relative(rootContext || process.cwd(), filename)
149 |     .replace(/^(\.\.[\/\\])+/, '')
150 |   const shortFilePath = rawShortFilePath.replace(/\\/g, '/')
151 |   const id = hash(
152 |     isProduction
153 |       ? shortFilePath + '\n' + source.replace(/\r\n/g, '\n')
154 |       : shortFilePath
155 |   )
156 | 
157 |   // if the query has a type field, this is a language block request
158 |   // e.g. foo.vue?type=template&id=xxxxx
159 |   // and we will return early
160 |   if (incomingQuery.type) {
161 |     return selectBlock(
162 |       descriptor,
163 |       id,
164 |       options,
165 |       loaderContext,
166 |       incomingQuery,
167 |       !!options.appendExtension
168 |     )
169 |   }
170 | 
171 |   // feature information
172 |   const hasScoped = descriptor.styles.some((s) => s.scoped)
173 |   const needsHotReload =
174 |     !isServer &&
175 |     !isProduction &&
176 |     !!(descriptor.script || descriptor.scriptSetup || descriptor.template) &&
177 |     options.hotReload !== false
178 | 
179 |   // extra properties to attach to the script object
180 |   // we need to do this in a tree-shaking friendly manner
181 |   const propsToAttach: [string, string][] = []
182 | 
183 |   // script
184 |   let scriptImport = `const script = {}`
185 |   let isTS = false
186 |   const { script, scriptSetup } = descriptor
187 |   if (script || scriptSetup) {
188 |     const lang = script?.lang || scriptSetup?.lang
189 |     isTS = !!(lang && /tsx?/.test(lang))
190 |     const src = (script && !scriptSetup && script.src) || resourcePath
191 |     const attrsQuery = attrsToQuery((scriptSetup || script)!.attrs, 'js')
192 |     const query = `?vue&type=script${attrsQuery}${resourceQuery}`
193 |     const scriptRequest = stringifyRequest(src + query)
194 |     scriptImport =
195 |       `import script from ${scriptRequest}\n` +
196 |       // support named exports
197 |       `export * from ${scriptRequest}`
198 |   }
199 | 
200 |   // template
201 |   let templateImport = ``
202 |   let templateRequest
203 |   const renderFnName = isServer ? `ssrRender` : `render`
204 |   const useInlineTemplate = canInlineTemplate(descriptor, isProduction)
205 |   if (descriptor.template && !useInlineTemplate) {
206 |     const src = descriptor.template.src || resourcePath
207 |     const idQuery = `&id=${id}`
208 |     const scopedQuery = hasScoped ? `&scoped=true` : ``
209 |     const attrsQuery = attrsToQuery(descriptor.template.attrs)
210 |     const tsQuery =
211 |       options.enableTsInTemplate !== false && isTS ? `&ts=true` : ``
212 |     const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}`
213 |     templateRequest = stringifyRequest(src + query)
214 |     templateImport = `import { ${renderFnName} } from ${templateRequest}`
215 |     propsToAttach.push([renderFnName, renderFnName])
216 |   }
217 | 
218 |   // styles
219 |   let stylesCode = ``
220 |   let hasCSSModules = false
221 |   const nonWhitespaceRE = /\S+/
222 |   if (descriptor.styles.length) {
223 |     descriptor.styles
224 |       .filter((style) => style.src || nonWhitespaceRE.test(style.content))
225 |       .forEach((style, i) => {
226 |         const src = style.src || resourcePath
227 |         const attrsQuery = attrsToQuery(style.attrs, 'css')
228 |         // make sure to only pass id when necessary so that we don't inject
229 |         // duplicate tags when multiple components import the same css file
230 |         const idQuery = !style.src || style.scoped ? `&id=${id}` : ``
231 |         const inlineQuery = asCustomElement ? `&inline` : ``
232 |         const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}`
233 |         const styleRequest = stringifyRequest(src + query)
234 |         if (style.module) {
235 |           if (asCustomElement) {
236 |             loaderContext.emitError(
237 |               `<style module> is not supported in custom element mode.`
238 |             )
239 |           }
240 |           if (!hasCSSModules) {
241 |             stylesCode += `\nconst cssModules = {}`
242 |             propsToAttach.push([`__cssModules`, `cssModules`])
243 |             hasCSSModules = true
244 |           }
245 |           stylesCode += genCSSModulesCode(
246 |             id,
247 |             i,
248 |             styleRequest,
249 |             style.module,
250 |             needsHotReload
251 |           )
252 |         } else {
253 |           if (asCustomElement) {
254 |             stylesCode += `\nimport _style_${i} from ${styleRequest}`
255 |           } else {
256 |             stylesCode += `\nimport ${styleRequest}`
257 |           }
258 |         }
259 |         // TODO SSR critical CSS collection
260 |       })
261 |     if (asCustomElement) {
262 |       propsToAttach.push([
263 |         `styles`,
264 |         `[${descriptor.styles.map((_, i) => `_style_${i}`)}]`,
265 |       ])
266 |     }
267 |   }
268 | 
269 |   let code = [templateImport, scriptImport, stylesCode]
270 |     .filter(Boolean)
271 |     .join('\n')
272 | 
273 |   // attach scope Id for runtime use
274 |   if (hasScoped) {
275 |     propsToAttach.push([`__scopeId`, `"data-v-${id}"`])
276 |   }
277 | 
278 |   // Expose filename. This is used by the devtools and Vue runtime warnings.
279 |   if (!isProduction) {
280 |     // Expose the file's full path in development, so that it can be opened
281 |     // from the devtools.
282 |     propsToAttach.push([
283 |       `__file`,
284 |       JSON.stringify(rawShortFilePath.replace(/\\/g, '/')),
285 |     ])
286 |   } else if (options.exposeFilename) {
287 |     // Libraries can opt-in to expose their components' filenames in production builds.
288 |     // For security reasons, only expose the file's basename in production.
289 |     propsToAttach.push([`__file`, JSON.stringify(path.basename(resourcePath))])
290 |   }
291 | 
292 |   // custom blocks
293 |   if (descriptor.customBlocks && descriptor.customBlocks.length) {
294 |     code += `\n/* custom blocks */\n`
295 |     code +=
296 |       descriptor.customBlocks
297 |         .map((block, i) => {
298 |           const src = block.attrs.src || resourcePath
299 |           const attrsQuery = attrsToQuery(block.attrs)
300 |           const blockTypeQuery = `&blockType=${qs.escape(block.type)}`
301 |           const issuerQuery = block.attrs.src
302 |             ? `&issuerPath=${qs.escape(resourcePath)}`
303 |             : ''
304 |           const query = `?vue&type=custom&index=${i}${blockTypeQuery}${issuerQuery}${attrsQuery}${resourceQuery}`
305 |           return (
306 |             `import block${i} from ${stringifyRequest(src + query)}\n` +
307 |             `if (typeof block${i} === 'function') block${i}(script)`
308 |           )
309 |         })
310 |         .join(`\n`) + `\n`
311 |   }
312 | 
313 |   // finalize
314 |   if (!propsToAttach.length) {
315 |     code += `\n\nconst __exports__ = script;`
316 |   } else {
317 |     code += `\n\nimport exportComponent from ${exportHelperPath}`
318 |     code += `\nconst __exports__ = /*#__PURE__*/exportComponent(script, [${propsToAttach
319 |       .map(([key, val]) => `['${key}',${val}]`)
320 |       .join(',')}])`
321 |   }
322 | 
323 |   if (needsHotReload) {
324 |     code += genHotReloadCode(id, templateRequest)
325 |   }
326 | 
327 |   code += `\n\nexport default __exports__`
328 |   return code
329 | }
330 | 
331 | // these are built-in query parameters so should be ignored
332 | // if the user happen to add them as attrs
333 | const ignoreList = ['id', 'index', 'src', 'type']
334 | 
335 | function attrsToQuery(attrs: SFCBlock['attrs'], langFallback?: string): string {
336 |   let query = ``
337 |   for (const name in attrs) {
338 |     const value = attrs[name]
339 |     if (!ignoreList.includes(name)) {
340 |       query += `&${qs.escape(name)}=${value ? qs.escape(String(value)) : ``}`
341 |     }
342 |   }
343 |   if (langFallback && !(`lang` in attrs)) {
344 |     query += `&lang=${langFallback}`
345 |   }
346 |   return query
347 | }
348 | 


--------------------------------------------------------------------------------