)/, `$1${html}`)
19 | )
20 | })
21 |
--------------------------------------------------------------------------------
/example/types.ts:
--------------------------------------------------------------------------------
1 | export interface Props {
2 | msg: string
3 | lol?: string
4 | }
5 |
--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const VueLoaderPlugin = require('../dist/plugin').default
4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
5 |
6 | module.exports = (env = {}) => {
7 | const isProd = env.prod
8 | const isSSR = env.ssr
9 |
10 | /**
11 | * Some notes regarding config for the server build of an SSR app:
12 | * 1. target: 'node'
13 | * 2. output.libraryTarget: 'commonjs' (so the exported app can be required)
14 | * 3. externals: this is mostly for faster builds.
15 | * - externalize @vue/* deps via commonjs require()
16 | * - externalize client side deps that are never used on the server, e.g.
17 | * ones that are only used in onMounted() to empty modules
18 | * 4. If using cache-loader or any other forms of cache, make sure the cache
19 | * key takes client vs. server builds into account!
20 | */
21 | const genConfig = (isServerBuild = false) => {
22 | const minimize = isProd && !isServerBuild && !env.noMinimize
23 |
24 | return {
25 | mode: isProd ? 'production' : 'development',
26 | entry: path.resolve(__dirname, './main.js'),
27 | target: isServerBuild ? 'node' : 'web',
28 | devtool: 'source-map',
29 | resolve: {
30 | extensions: ['.js', '.ts'],
31 | alias: process.env.WEBPACK4
32 | ? {
33 | webpack: 'webpack4',
34 | }
35 | : {},
36 | },
37 | output: {
38 | path: path.resolve(
39 | __dirname,
40 | isSSR ? (isServerBuild ? 'dist-ssr/server' : 'dist-ssr/dist') : 'dist'
41 | ),
42 | filename: '[name].js',
43 | publicPath: '/dist/',
44 | libraryTarget: isServerBuild ? 'commonjs' : undefined,
45 | },
46 | externals: isServerBuild
47 | ? [
48 | (ctx, request, cb) => {
49 | if (/^@vue/.test(request)) {
50 | return cb(null, 'commonjs ' + request)
51 | }
52 | cb()
53 | },
54 | ]
55 | : undefined,
56 | module: {
57 | rules: [
58 | {
59 | test: /\.vue$/,
60 | loader: 'vue-loader',
61 | options: {
62 | // reactivityTransform: true,
63 | compilerOptions: {
64 | isCustomElement: (tag) => tag.startsWith('custom-'),
65 | },
66 | },
67 | },
68 | {
69 | test: /\.png$/,
70 | use: [
71 | {
72 | loader: 'url-loader',
73 | options: {
74 | limit: 8192,
75 | },
76 | },
77 | ],
78 | },
79 | {
80 | test: /\.css$/,
81 | use: [MiniCssExtractPlugin.loader, 'css-loader'],
82 | },
83 | {
84 | test: /\.ts$/,
85 | use: [
86 | {
87 | loader: process.env.WEBPACK4
88 | ? require.resolve('ts-loader')
89 | : require.resolve('ts-loader-v9'),
90 | options: {
91 | transpileOnly: true,
92 | appendTsSuffixTo: [/\.vue$/],
93 | },
94 | },
95 | ],
96 | },
97 | // target
custom blocks
98 | {
99 | resourceQuery: /blockType=docs/,
100 | loader: require.resolve('./docs-loader'),
101 | },
102 | ],
103 | },
104 | plugins: [
105 | new VueLoaderPlugin(),
106 | new MiniCssExtractPlugin({
107 | filename: '[name].css',
108 | }),
109 | new webpack.DefinePlugin({
110 | __IS_SSR__: !!isSSR,
111 | __VUE_OPTIONS_API__: true,
112 | __VUE_PROD_DEVTOOLS__: false,
113 | __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
114 | }),
115 | ],
116 | optimization: {
117 | minimize,
118 | },
119 | devServer: {
120 | hot: true,
121 | stats: 'minimal',
122 | contentBase: __dirname,
123 | overlay: true,
124 | },
125 | resolveLoader: {
126 | alias: {
127 | 'vue-loader': require.resolve('../'),
128 | },
129 | },
130 | }
131 | }
132 |
133 | if (!isSSR) {
134 | return genConfig()
135 | } else {
136 | return [genConfig(), genConfig(true)]
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | const isWebpack4 = process.env.WEBPACK4
2 |
3 | console.log(
4 | `running tests with webpack ${isWebpack4 ? '4' : '5'}${
5 | !isWebpack4 && process.env.INLINE_MATCH_RESOURCE
6 | ? ' with inline match resource enabled'
7 | : ''
8 | }...`
9 | )
10 |
11 | module.exports = {
12 | preset: 'ts-jest',
13 | testTimeout: 60000,
14 | testEnvironment: 'node',
15 | testPathIgnorePatterns: ['/dist/', '/node_modules/'],
16 | globals: {
17 | 'ts-jest': {
18 | diagnostics: false,
19 | },
20 | },
21 | moduleNameMapper: process.env.WEBPACK4
22 | ? {
23 | '^webpack$': 'webpack4',
24 | '^webpack/(.*)': 'webpack4/$1',
25 | }
26 | : undefined,
27 | }
28 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-loader",
3 | "version": "17.4.2",
4 | "license": "MIT",
5 | "author": "Evan You",
6 | "repository": "vuejs/vue-loader",
7 | "main": "dist/index.js",
8 | "types": "dist/index.d.ts",
9 | "files": [
10 | "dist"
11 | ],
12 | "scripts": {
13 | "dev": "tsc --watch",
14 | "build": "tsc",
15 | "pretest": "tsc",
16 | "test": "jest",
17 | "pretest:match-resource": "tsc",
18 | "test:match-resource": "INLINE_MATCH_RESOURCE=true jest",
19 | "pretest:webpack4": "tsc",
20 | "test:webpack4": "WEBPACK4=true jest",
21 | "dev-example": "node example/devServer.js --config example/webpack.config.js --inline --hot",
22 | "build-example": "rm -rf example/dist && webpack --config example/webpack.config.js --env.prod",
23 | "build-example-ssr": "rm -rf example/dist-ssr && webpack --config example/webpack.config.js --env.prod --env.ssr && node example/ssr.js",
24 | "lint": "prettier --write --parser typescript \"{src,test}/**/*.{j,t}s\"",
25 | "prepublishOnly": "tsc && conventional-changelog -p angular -i CHANGELOG.md -s -r 2"
26 | },
27 | "gitHooks": {
28 | "pre-commit": "lint-staged"
29 | },
30 | "lint-staged": {
31 | "*.js": [
32 | "prettier --write"
33 | ],
34 | "*.ts": [
35 | "prettier --parser=typescript --write"
36 | ]
37 | },
38 | "packageManager": "pnpm@8.12.0",
39 | "dependencies": {
40 | "chalk": "^4.1.0",
41 | "watchpack": "^2.4.0"
42 | },
43 | "peerDependencies": {
44 | "webpack": "^4.1.0 || ^5.0.0-0"
45 | },
46 | "peerDependenciesMeta": {
47 | "@vue/compiler-sfc": {
48 | "optional": true
49 | },
50 | "vue": {
51 | "optional": true
52 | }
53 | },
54 | "devDependencies": {
55 | "@babel/core": "^7.7.7",
56 | "@babel/preset-env": "^7.11.5",
57 | "@intlify/vue-i18n-loader": "^3.0.0",
58 | "@types/cssesc": "^3.0.2",
59 | "@types/estree": "^0.0.45",
60 | "@types/jest": "^26.0.13",
61 | "@types/jsdom": "^16.2.13",
62 | "@types/mini-css-extract-plugin": "^0.9.1",
63 | "@types/webpack-merge": "^4.1.5",
64 | "babel-loader": "^8.1.0",
65 | "cache-loader": "^4.1.0",
66 | "conventional-changelog-cli": "^2.1.1",
67 | "css-loader": "^4.3.0",
68 | "cssesc": "^3.0.0",
69 | "file-loader": "^6.1.0",
70 | "html-webpack-plugin": "^4.5.0",
71 | "html-webpack-plugin-v5": "npm:html-webpack-plugin@^5.3.2",
72 | "jest": "^26.4.1",
73 | "jsdom": "^16.4.0",
74 | "lint-staged": "^10.3.0",
75 | "markdown-loader": "^6.0.0",
76 | "memfs": "^3.1.2",
77 | "mini-css-extract-plugin": "^1.6.2",
78 | "normalize-newline": "^3.0.0",
79 | "null-loader": "^4.0.1",
80 | "postcss-loader": "^4.0.4",
81 | "prettier": "^2.1.1",
82 | "pug": "^2.0.0",
83 | "pug-plain-loader": "^1.0.0",
84 | "source-map": "^0.6.1",
85 | "style-loader": "^2.0.0",
86 | "stylus": "^0.54.7",
87 | "stylus-loader": "^4.1.1",
88 | "sugarss": "^3.0.1",
89 | "ts-jest": "^26.2.0",
90 | "ts-loader": "^8.0.6",
91 | "ts-loader-v9": "npm:ts-loader@^9.2.4",
92 | "typescript": "^4.4.3",
93 | "url-loader": "^4.1.0",
94 | "vue": "^3.4.3",
95 | "vue-i18n": "^9.1.7",
96 | "webpack": "^5.79.0",
97 | "webpack-cli": "^3.3.12",
98 | "webpack-dev-server": "^3.11.3",
99 | "webpack-merge": "^5.1.4",
100 | "webpack4": "npm:webpack@^4.46.0",
101 | "yorkie": "^2.0.0"
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/descriptorCache.ts:
--------------------------------------------------------------------------------
1 | import * as fs from 'fs'
2 | import type { CompilerOptions, SFCDescriptor } from 'vue/compiler-sfc'
3 | import { compiler } from './compiler'
4 |
5 | const { parse } = compiler
6 | export const descriptorCache = new Map()
7 |
8 | export function setDescriptor(filename: string, entry: SFCDescriptor) {
9 | descriptorCache.set(cleanQuery(filename), entry)
10 | }
11 |
12 | export function getDescriptor(
13 | filename: string,
14 | compilerOptions?: CompilerOptions
15 | ): SFCDescriptor {
16 | filename = cleanQuery(filename)
17 | if (descriptorCache.has(filename)) {
18 | return descriptorCache.get(filename)!
19 | }
20 |
21 | // This function should only be called after the descriptor has been
22 | // cached by the main loader.
23 | // If this is somehow called without a cache hit, it's probably due to sub
24 | // loaders being run in separate threads. The only way to deal with this is to
25 | // read from disk directly...
26 | const source = fs.readFileSync(filename, 'utf-8')
27 | const { descriptor } = parse(source, {
28 | filename,
29 | sourceMap: true,
30 | templateParseOptions: compilerOptions,
31 | })
32 | descriptorCache.set(filename, descriptor)
33 | return descriptor
34 | }
35 |
36 | function cleanQuery(str: string) {
37 | const i = str.indexOf('?')
38 | return i > 0 ? str.slice(0, i) : str
39 | }
40 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/formatError.ts:
--------------------------------------------------------------------------------
1 | import type { CompilerError } from 'vue/compiler-sfc'
2 | import { compiler } from './compiler'
3 | import chalk = require('chalk')
4 |
5 | const { generateCodeFrame } = compiler
6 |
7 | export function formatError(
8 | err: SyntaxError | CompilerError,
9 | source: string,
10 | file: string
11 | ) {
12 | const loc = (err as CompilerError).loc
13 | if (!loc) {
14 | return
15 | }
16 | const locString = `:${loc.start.line}:${loc.start.column}`
17 | const filePath = chalk.gray(`at ${file}${locString}`)
18 | const codeframe = generateCodeFrame(source, loc.start.offset, loc.end.offset)
19 | err.message = `\n${chalk.red(
20 | `VueCompilerError: ${err.message}`
21 | )}\n${filePath}\n${chalk.yellow(codeframe)}\n`
22 | }
23 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import type { LoaderContext } from 'webpack'
2 | import * as path from 'path'
3 | import * as crypto from 'crypto'
4 | import * as qs from 'querystring'
5 |
6 | import { compiler } from './compiler'
7 | import type {
8 | TemplateCompiler,
9 | CompilerOptions,
10 | SFCBlock,
11 | SFCTemplateCompileOptions,
12 | SFCScriptCompileOptions,
13 | } from 'vue/compiler-sfc'
14 | import { selectBlock } from './select'
15 | import { genHotReloadCode } from './hotReload'
16 | import { genCSSModulesCode } from './cssModules'
17 | import { formatError } from './formatError'
18 |
19 | import VueLoaderPlugin from './plugin'
20 | import { canInlineTemplate } from './resolveScript'
21 | import { setDescriptor } from './descriptorCache'
22 | import {
23 | getOptions,
24 | stringifyRequest as _stringifyRequest,
25 | genMatchResource,
26 | testWebpack5,
27 | } from './util'
28 |
29 | export { VueLoaderPlugin }
30 |
31 | export interface VueLoaderOptions {
32 | // https://babeljs.io/docs/en/next/babel-parser#plugins
33 | babelParserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
34 | transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
35 | compiler?: TemplateCompiler | string
36 | compilerOptions?: CompilerOptions
37 | /**
38 | * TODO remove in 3.4
39 | * @deprecated
40 | */
41 | reactivityTransform?: boolean
42 |
43 | /**
44 | * @experimental
45 | */
46 | propsDestructure?: boolean
47 | /**
48 | * @experimental
49 | */
50 | defineModel?: boolean
51 |
52 | customElement?: boolean | RegExp
53 |
54 | hotReload?: boolean
55 | exposeFilename?: boolean
56 | appendExtension?: boolean
57 | enableTsInTemplate?: boolean
58 | experimentalInlineMatchResource?: boolean
59 |
60 | isServerBuild?: boolean
61 | }
62 |
63 | let errorEmitted = false
64 |
65 | const { parse } = compiler
66 | const exportHelperPath = require.resolve('./exportHelper')
67 |
68 | function hash(text: string): string {
69 | return crypto.createHash('sha256').update(text).digest('hex').substring(0, 8)
70 | }
71 |
72 | export default function loader(
73 | this: LoaderContext,
74 | source: string
75 | ) {
76 | const loaderContext = this
77 |
78 | // check if plugin is installed
79 | if (
80 | !errorEmitted &&
81 | !(loaderContext as any)['thread-loader'] &&
82 | !(loaderContext as any)[VueLoaderPlugin.NS]
83 | ) {
84 | loaderContext.emitError(
85 | new Error(
86 | `vue-loader was used without the corresponding plugin. ` +
87 | `Make sure to include VueLoaderPlugin in your webpack config.`
88 | )
89 | )
90 | errorEmitted = true
91 | }
92 |
93 | const stringifyRequest = (r: string) => _stringifyRequest(loaderContext, r)
94 |
95 | const {
96 | mode,
97 | target,
98 | sourceMap,
99 | rootContext,
100 | resourcePath,
101 | resourceQuery: _resourceQuery = '',
102 | _compiler,
103 | } = loaderContext
104 |
105 | const isWebpack5 = testWebpack5(_compiler)
106 | const rawQuery = _resourceQuery.slice(1)
107 | const incomingQuery = qs.parse(rawQuery)
108 | const resourceQuery = rawQuery ? `&${rawQuery}` : ''
109 | const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
110 | const enableInlineMatchResource =
111 | isWebpack5 && Boolean(options.experimentalInlineMatchResource)
112 |
113 | const isServer = options.isServerBuild ?? target === 'node'
114 | const isProduction =
115 | mode === 'production' || process.env.NODE_ENV === 'production'
116 |
117 | const filename = resourcePath.replace(/\?.*$/, '')
118 |
119 | const { descriptor, errors } = parse(source, {
120 | filename,
121 | sourceMap,
122 | templateParseOptions: options.compilerOptions,
123 | })
124 |
125 | const asCustomElement =
126 | typeof options.customElement === 'boolean'
127 | ? options.customElement
128 | : (options.customElement || /\.ce\.vue$/).test(filename)
129 |
130 | // cache descriptor
131 | setDescriptor(filename, descriptor)
132 |
133 | if (errors.length) {
134 | errors.forEach((err) => {
135 | formatError(err, source, resourcePath)
136 | loaderContext.emitError(err)
137 | })
138 | return ``
139 | }
140 |
141 | // module id for scoped CSS & hot-reload
142 | const rawShortFilePath = path
143 | .relative(rootContext || process.cwd(), filename)
144 | .replace(/^(\.\.[\/\\])+/, '')
145 | const shortFilePath = rawShortFilePath.replace(/\\/g, '/')
146 | const id = hash(
147 | isProduction
148 | ? shortFilePath + '\n' + source.replace(/\r\n/g, '\n')
149 | : shortFilePath
150 | )
151 |
152 | // if the query has a type field, this is a language block request
153 | // e.g. foo.vue?type=template&id=xxxxx
154 | // and we will return early
155 | if (incomingQuery.type) {
156 | return selectBlock(
157 | descriptor,
158 | id,
159 | options,
160 | loaderContext,
161 | incomingQuery,
162 | !!options.appendExtension
163 | )
164 | }
165 |
166 | // feature information
167 | const hasScoped = descriptor.styles.some((s) => s.scoped)
168 | const needsHotReload =
169 | !isServer &&
170 | !isProduction &&
171 | !!(descriptor.script || descriptor.scriptSetup || descriptor.template) &&
172 | options.hotReload !== false
173 |
174 | // extra properties to attach to the script object
175 | // we need to do this in a tree-shaking friendly manner
176 | const propsToAttach: [string, string][] = []
177 |
178 | // script
179 | let scriptImport = `const script = {}`
180 | let isTS = false
181 | const { script, scriptSetup } = descriptor
182 | if (script || scriptSetup) {
183 | const lang = script?.lang || scriptSetup?.lang
184 | isTS = !!(lang && /tsx?/.test(lang))
185 | const externalQuery = Boolean(script && !scriptSetup && script.src)
186 | ? `&external`
187 | : ``
188 | const src = (script && !scriptSetup && script.src) || resourcePath
189 | const attrsQuery = attrsToQuery((scriptSetup || script)!.attrs, 'js')
190 | const query = `?vue&type=script${attrsQuery}${resourceQuery}${externalQuery}`
191 |
192 | let scriptRequest: string
193 |
194 | if (enableInlineMatchResource) {
195 | scriptRequest = stringifyRequest(
196 | genMatchResource(this, src, query, lang || 'js')
197 | )
198 | } else {
199 | scriptRequest = stringifyRequest(src + query)
200 | }
201 |
202 | scriptImport =
203 | `import script from ${scriptRequest}\n` +
204 | // support named exports
205 | `export * from ${scriptRequest}`
206 | }
207 |
208 | // template
209 | let templateImport = ``
210 | let templateRequest
211 | const renderFnName = isServer ? `ssrRender` : `render`
212 | const useInlineTemplate = canInlineTemplate(descriptor, isProduction)
213 | if (descriptor.template && !useInlineTemplate) {
214 | const src = descriptor.template.src || resourcePath
215 | const externalQuery = Boolean(descriptor.template.src) ? `&external` : ``
216 | const idQuery = `&id=${id}`
217 | const scopedQuery = hasScoped ? `&scoped=true` : ``
218 | const attrsQuery = attrsToQuery(descriptor.template.attrs)
219 | const tsQuery =
220 | options.enableTsInTemplate !== false && isTS ? `&ts=true` : ``
221 | const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}${externalQuery}`
222 |
223 | if (enableInlineMatchResource) {
224 | templateRequest = stringifyRequest(
225 | genMatchResource(
226 | this,
227 | src,
228 | query,
229 | options.enableTsInTemplate !== false && isTS ? 'ts' : 'js'
230 | )
231 | )
232 | } else {
233 | templateRequest = stringifyRequest(src + query)
234 | }
235 |
236 | templateImport = `import { ${renderFnName} } from ${templateRequest}`
237 | propsToAttach.push([renderFnName, renderFnName])
238 | }
239 |
240 | // styles
241 | let stylesCode = ``
242 | let hasCSSModules = false
243 | const nonWhitespaceRE = /\S+/
244 | if (descriptor.styles.length) {
245 | descriptor.styles
246 | .filter((style) => style.src || nonWhitespaceRE.test(style.content))
247 | .forEach((style, i) => {
248 | const src = style.src || resourcePath
249 | const attrsQuery = attrsToQuery(style.attrs, 'css')
250 | const lang = String(style.attrs.lang || 'css')
251 | // make sure to only pass id when necessary so that we don't inject
252 | // duplicate tags when multiple components import the same css file
253 | const idQuery = !style.src || style.scoped ? `&id=${id}` : ``
254 | const inlineQuery = asCustomElement ? `&inline` : ``
255 | const externalQuery = Boolean(style.src) ? `&external` : ``
256 | const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}${externalQuery}`
257 |
258 | let styleRequest
259 | if (enableInlineMatchResource) {
260 | styleRequest = stringifyRequest(
261 | genMatchResource(this, src, query, lang)
262 | )
263 | } else {
264 | styleRequest = stringifyRequest(src + query)
265 | }
266 |
267 | if (style.module) {
268 | if (asCustomElement) {
269 | loaderContext.emitError(
270 | new Error(
271 | `
20 |
--------------------------------------------------------------------------------
/test/fixtures/css-modules-extend.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/test/fixtures/css-modules-simple.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/test/fixtures/css-modules.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
17 |
18 |
21 |
--------------------------------------------------------------------------------
/test/fixtures/custom-import.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{msg}}
6 |
7 |
8 |
17 |
18 |
23 |
--------------------------------------------------------------------------------
/test/fixtures/custom-language.vue:
--------------------------------------------------------------------------------
1 |
2 | describe('example', () => {
3 | it('basic', done => {
4 | done();
5 | })
6 | })
7 |
8 |
9 |
10 | This is example documentation for a component.
11 |
12 |
13 |
14 | {{msg}}
15 |
16 |
17 |
26 |
27 |
32 |
--------------------------------------------------------------------------------
/test/fixtures/custom-query.vue:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/test/fixtures/duplicate-cssm.css:
--------------------------------------------------------------------------------
1 | @value color: red;
2 |
--------------------------------------------------------------------------------
/test/fixtures/duplicate-cssm.js:
--------------------------------------------------------------------------------
1 | import values from './duplicate-cssm.css'
2 | import Comp from './duplicate-cssm.vue'
3 |
4 | export { values }
5 | export default Comp
6 |
7 | window.exports = values
8 |
--------------------------------------------------------------------------------
/test/fixtures/duplicate-cssm.vue:
--------------------------------------------------------------------------------
1 |
2 | hi
3 |
4 |
5 |
12 |
--------------------------------------------------------------------------------
/test/fixtures/empty-style.vue:
--------------------------------------------------------------------------------
1 |
2 | empty style
3 |
4 |
5 |
7 |
--------------------------------------------------------------------------------
/test/fixtures/entry.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 |
3 | import Component from '~target'
4 | import * as exports from '~target'
5 |
6 | if (typeof window !== 'undefined') {
7 | window.componentModule = Component
8 | window.exports = exports
9 |
10 | const app = createApp(Component)
11 | const container = window.document.createElement('div')
12 | container.id = 'app'
13 | window.instance = app.mount(container)
14 | window.document.body.appendChild(container)
15 | }
16 |
17 | export default Component
18 |
--------------------------------------------------------------------------------
/test/fixtures/extract-css-chunks.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
16 |
17 |
22 |
--------------------------------------------------------------------------------
/test/fixtures/extract-css.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
11 |
12 |
15 |
--------------------------------------------------------------------------------
/test/fixtures/i18n-entry.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import { createI18n } from 'vue-i18n'
3 |
4 | import Component from './i18n.vue'
5 | import * as exports from './i18n.vue'
6 |
7 | const i18n = createI18n({
8 | locale: 'de',
9 | silentFallbackWarn: true,
10 | silentTranslationWarn: true,
11 | })
12 |
13 | if (typeof window !== 'undefined') {
14 | window.componentModule = Component
15 | window.exports = exports
16 |
17 | const app = createApp(Component).use(i18n)
18 |
19 | const container = window.document.createElement('div')
20 | window.instance = app.mount(container)
21 | }
22 |
23 | export default Component
24 |
--------------------------------------------------------------------------------
/test/fixtures/i18n.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ $t('test') }}
3 |
4 |
5 |
6 | test: Example Text
7 |
8 |
--------------------------------------------------------------------------------
/test/fixtures/imported-types-aliased.ts:
--------------------------------------------------------------------------------
1 | export interface Props {
2 | id?: number
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/imported-types.ts:
--------------------------------------------------------------------------------
1 | export interface Props {
2 | msg: string
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/imported-types.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {{ Object.keys(props) }}
10 |
11 |
--------------------------------------------------------------------------------
/test/fixtures/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/test/fixtures/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs/vue-loader/698636508e08f5379a57eaf086b5ff533af8e051/test/fixtures/logo.png
--------------------------------------------------------------------------------
/test/fixtures/markdown.vue:
--------------------------------------------------------------------------------
1 | ## {{msg}}
2 |
3 |
12 |
--------------------------------------------------------------------------------
/test/fixtures/named-exports.vue:
--------------------------------------------------------------------------------
1 |
9 | Terms
10 |
--------------------------------------------------------------------------------
/test/fixtures/no-script.vue:
--------------------------------------------------------------------------------
1 |
2 | hello
3 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/test/fixtures/optional-chaining.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
17 |
--------------------------------------------------------------------------------
/test/fixtures/postcss.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/test/fixtures/pre.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | div
11 | h1 This is the app
12 | comp-a
13 | comp-b
14 |
15 |
16 |
23 |
--------------------------------------------------------------------------------
/test/fixtures/process-custom-file/custom-file.svg:
--------------------------------------------------------------------------------
1 |
2 | ProcessedCustomFile
3 |
--------------------------------------------------------------------------------
/test/fixtures/process-custom-file/process-custom-file.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/test/fixtures/resolve.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
15 |
--------------------------------------------------------------------------------
/test/fixtures/scoped-css.vue:
--------------------------------------------------------------------------------
1 |
64 |
65 |
66 |
67 |
hi
68 |
hi
69 |
yo
70 |
73 |
hello
3 |
4 |
5 |
17 |
18 |
26 |
--------------------------------------------------------------------------------
/test/fixtures/template-import-pre.vue:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/fixtures/template-import.html:
--------------------------------------------------------------------------------
1 |
2 |
hello
3 |
4 |
--------------------------------------------------------------------------------
/test/fixtures/template-import.pug:
--------------------------------------------------------------------------------
1 | div
2 | h1 hello
3 |
--------------------------------------------------------------------------------
/test/fixtures/template-import.vue:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/fixtures/ts.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
3 |
4 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/test/fixtures/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "foo": ["./imported-types-aliased.ts"]
5 | }
6 | },
7 | "include": ["."]
8 | }
9 |
--------------------------------------------------------------------------------
/test/fixtures/unit-test.js:
--------------------------------------------------------------------------------
1 | describe('example', () => {
2 | it('basic', (done) => {
3 | done()
4 | })
5 | })
6 |
--------------------------------------------------------------------------------
/test/mock-loaders/docs.js:
--------------------------------------------------------------------------------
1 | module.exports = function (source, map) {
2 | this.callback(
3 | null,
4 | `export default Component => {
5 | Component.__docs = ${JSON.stringify(source)}
6 | }`,
7 | map
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/test/mock-loaders/html.js:
--------------------------------------------------------------------------------
1 | module.exports = function (content) {
2 | return content.replace(/red/, 'green')
3 | }
4 |
--------------------------------------------------------------------------------
/test/mock-loaders/js.js:
--------------------------------------------------------------------------------
1 | module.exports = function (content) {
2 | return content.replace(/Hello from Component A!/, 'Changed!')
3 | }
4 |
--------------------------------------------------------------------------------
/test/mock-loaders/query.js:
--------------------------------------------------------------------------------
1 | module.exports = function (content) {
2 | const query = this.resourceQuery.slice(1)
3 |
4 | if (/change/.test(query)) {
5 | return `
6 |
7 | Changed!
8 |
9 |
18 | `
19 | }
20 |
21 | return content
22 | }
23 |
--------------------------------------------------------------------------------
/test/script.spec.ts:
--------------------------------------------------------------------------------
1 | import { mockBundleAndRun } from './utils'
2 |
3 | test('named exports', async () => {
4 | const { exports } = await mockBundleAndRun({
5 | entry: 'named-exports.vue',
6 | })
7 | expect(exports.default.name).toBe('named-exports')
8 | expect(exports.foo()).toBe(1)
9 | })
10 |
11 | test('experimental 
4 | 
5 |
6 |
7 | 
8 |