Skip to content

Commit 21725a4

Browse files
yyx990803yyx990803
committed
feat: support optional @vue/compiler-sfc peer dep
1 parent 1a26253 commit 21725a4

9 files changed

+145
-61
lines changed

‎package.json

+1-7
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,8 @@
3737
"loader-utils": "^2.0.0"
3838
},
3939
"peerDependencies": {
40-
"@vue/compiler-sfc": "^3.2.12",
4140
"webpack": "^4.1.0 || ^5.0.0-0"
4241
},
43-
"peerDependenciesMeta": {
44-
"@vue/compiler-sfc": {
45-
"optional": true
46-
}
47-
},
4842
"devDependencies": {
4943
"@babel/core": "^7.7.7",
5044
"@babel/preset-env": "^7.11.5",
@@ -86,7 +80,7 @@
8680
"ts-loader-v9": "npm:ts-loader@^9.2.4",
8781
"typescript": "^4.4.3",
8882
"url-loader": "^4.1.0",
89-
"vue": "^3.2.12",
83+
"vue": "^3.2.13",
9084
"webpack": "^4.41.2",
9185
"webpack-cli": "^3.3.10",
9286
"webpack-dev-server": "^3.9.0",

‎src/compiler.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
}

‎src/descriptorCache.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as fs from 'fs'
22
import { SFCDescriptor } from '@vue/compiler-sfc'
3-
import { parse } from '@vue/compiler-sfc'
3+
import { compiler } from './compiler'
44

55
const cache = new Map<string, SFCDescriptor>()
66

@@ -20,7 +20,7 @@ export function getDescriptor(filename: string): SFCDescriptor {
2020
// loaders being run in separate threads. The only way to deal with this is to
2121
// read from disk directly...
2222
const source = fs.readFileSync(filename, 'utf-8')
23-
const { descriptor } = parse(source, {
23+
const { descriptor } = compiler.parse(source, {
2424
filename,
2525
sourceMap: true,
2626
})

‎src/formatError.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { generateCodeFrame, CompilerError } from '@vue/compiler-sfc'
1+
import { CompilerError } from '@vue/compiler-sfc'
2+
import { compiler } from './compiler'
23
import chalk = require('chalk')
34

45
export function formatError(
@@ -12,7 +13,11 @@ export function formatError(
1213
}
1314
const locString = `:${loc.start.line}:${loc.start.column}`
1415
const filePath = chalk.gray(`at ${file}${locString}`)
15-
const codeframe = generateCodeFrame(source, loc.start.offset, loc.end.offset)
16+
const codeframe = compiler.generateCodeFrame(
17+
source,
18+
loc.start.offset,
19+
loc.end.offset
20+
)
1621
err.message = `\n${chalk.red(
1722
`VueCompilerError: ${err.message}`
1823
)}\n${filePath}\n${chalk.yellow(codeframe)}\n`

‎src/index.ts

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,12 @@
1-
try {
2-
require.resolve('@vue/compiler-sfc')
3-
} catch (e) {
4-
throw new Error(
5-
'vue-loader requires @vue/compiler-sfc to be present in the dependency ' +
6-
'tree.'
7-
)
8-
}
9-
101
import webpack = require('webpack')
112
import * as path from 'path'
123
import * as qs from 'querystring'
134
import * as loaderUtils from 'loader-utils'
145

156
import hash = require('hash-sum')
167

8+
import { compiler } from './compiler'
179
import {
18-
parse,
1910
TemplateCompiler,
2011
CompilerOptions,
2112
SFCBlock,
@@ -102,7 +93,7 @@ export default function loader(
10293
mode === 'production' || process.env.NODE_ENV === 'production'
10394

10495
const filename = resourcePath.replace(/\?.*$/, '')
105-
const { descriptor, errors } = parse(source, {
96+
const { descriptor, errors } = compiler.parse(source, {
10697
filename,
10798
sourceMap,
10899
})

‎src/resolveScript.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import webpack = require('webpack')
22
import {
3-
compileScript,
43
SFCDescriptor,
54
SFCScriptBlock,
65
TemplateCompiler,
76
} from '@vue/compiler-sfc'
87
import { VueLoaderOptions } from 'src'
98
import { resolveTemplateTSOptions } from './util'
9+
import { compiler } from './compiler'
1010

1111
const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
1212
const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
@@ -46,24 +46,24 @@ export function resolveScript(
4646

4747
let resolved: SFCScriptBlock | null = null
4848

49-
let compiler: TemplateCompiler | undefined
49+
let templateCompiler: TemplateCompiler | undefined
5050
if (typeof options.compiler === 'string') {
51-
compiler = require(options.compiler)
51+
templateCompiler = require(options.compiler)
5252
} else {
53-
compiler = options.compiler
53+
templateCompiler = options.compiler
5454
}
5555

56-
if (compileScript) {
56+
if (compiler.compileScript) {
5757
try {
58-
resolved = compileScript(descriptor, {
58+
resolved = compiler.compileScript(descriptor, {
5959
id: scopeId,
6060
isProd,
6161
inlineTemplate: enableInline,
6262
refSugar: options.refSugar,
6363
babelParserPlugins: options.babelParserPlugins,
6464
templateOptions: {
6565
ssr: isServer,
66-
compiler,
66+
compiler: templateCompiler,
6767
compilerOptions: {
6868
...options.compilerOptions,
6969
...resolveTemplateTSOptions(descriptor, options.compilerOptions),

‎src/stylePostLoader.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as qs from 'querystring'
2-
import { compileStyle } from '@vue/compiler-sfc'
2+
import { compiler } from './compiler'
33
import webpack = require('webpack')
44

55
// This is a post loader that handles scoped CSS transforms.
66
// Injected right before css-loader by the global pitcher (../pitch.js)
77
// for any <style scoped> selection requests initiated from within vue files.
88
const StylePostLoader: webpack.loader.Loader = function (source, inMap) {
99
const query = qs.parse(this.resourceQuery.slice(1))
10-
const { code, map, errors } = compileStyle({
10+
const { code, map, errors } = compiler.compileStyle({
1111
source: source as string,
1212
filename: this.resourcePath,
1313
id: `data-v-${query.id}`,

‎src/templateLoader.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import * as qs from 'querystring'
33
import * as loaderUtils from 'loader-utils'
44
import { VueLoaderOptions } from './'
55
import { formatError } from './formatError'
6-
import { compileTemplate, TemplateCompiler } from '@vue/compiler-sfc'
6+
import { TemplateCompiler } from '@vue/compiler-sfc'
77
import { getDescriptor } from './descriptorCache'
88
import { resolveScript } from './resolveScript'
99
import { resolveTemplateTSOptions } from './util'
10+
import { compiler } from './compiler'
1011

1112
// Loader that compiles raw template into JavaScript functions.
1213
// This is injected by the global pitcher (../pitch) for template
@@ -40,14 +41,14 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
4041
loaderContext
4142
)
4243

43-
let compiler: TemplateCompiler | undefined
44+
let templateCompiler: TemplateCompiler | undefined
4445
if (typeof options.compiler === 'string') {
45-
compiler = require(options.compiler)
46+
templateCompiler = require(options.compiler)
4647
} else {
47-
compiler = options.compiler
48+
templateCompiler = options.compiler
4849
}
4950

50-
const compiled = compileTemplate({
51+
const compiled = compiler.compileTemplate({
5152
source,
5253
filename: loaderContext.resourcePath,
5354
inMap,
@@ -57,7 +58,7 @@ const TemplateLoader: webpack.loader.Loader = function (source, inMap) {
5758
isProd,
5859
ssr: isServer,
5960
ssrCssVars: descriptor.cssVars,
60-
compiler,
61+
compiler: templateCompiler,
6162
compilerOptions: {
6263
...options.compilerOptions,
6364
scopeId: query.scoped ? `data-v-${scopeId}` : undefined,

‎yarn.lock

+92-24
Original file line numberDiff line numberDiff line change
@@ -1410,6 +1410,16 @@
14101410
estree-walker "^2.0.2"
14111411
source-map "^0.6.1"
14121412

1413+
"@vue/compiler-core@3.2.13":
1414+
version "3.2.13"
1415+
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.13.tgz#901268088b98a53c43be0f02bfa0e3a389ad6bf4"
1416+
integrity sha512-H8MUuKVCfAT6C0vth/+1LAriKnM+RTFo/5MoFycwRPwworTvkpWq/EuGoIXdLBblo8Y2/bNsOmIBEEoOtrb/bQ==
1417+
dependencies:
1418+
"@babel/parser" "^7.15.0"
1419+
"@vue/shared" "3.2.13"
1420+
estree-walker "^2.0.2"
1421+
source-map "^0.6.1"
1422+
14131423
"@vue/compiler-dom@3.2.12":
14141424
version "3.2.12"
14151425
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.12.tgz#d6ba00114e73adb8b18940c3ff18797cc2b0514f"
@@ -1418,6 +1428,30 @@
14181428
"@vue/compiler-core" "3.2.12"
14191429
"@vue/shared" "3.2.12"
14201430

1431+
"@vue/compiler-dom@3.2.13":
1432+
version "3.2.13"
1433+
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.13.tgz#028982494fb9d97807d5275b42355732686f8ed7"
1434+
integrity sha512-5+2dYgQyNzM97EEgbdAusUpLjulcKkvLM26jOGpd14+qwEcW/KCnns5DGjlZD/tsdEwToOoTDCm+mjx7cO/G1Q==
1435+
dependencies:
1436+
"@vue/compiler-core" "3.2.13"
1437+
"@vue/shared" "3.2.13"
1438+
1439+
"@vue/compiler-sfc@3.2.13":
1440+
version "3.2.13"
1441+
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.13.tgz#a38475048aad9c96cf04dfe635129b417e0f9295"
1442+
integrity sha512-3j970d969aOILykcTstdihP33xH1Onm0wsvcl+rGv9AGxivB9xicRxBw93HCIA4dAPivr42WjHEoci9q2/85uw==
1443+
dependencies:
1444+
"@babel/parser" "^7.15.0"
1445+
"@vue/compiler-core" "3.2.13"
1446+
"@vue/compiler-dom" "3.2.13"
1447+
"@vue/compiler-ssr" "3.2.13"
1448+
"@vue/ref-transform" "3.2.13"
1449+
"@vue/shared" "3.2.13"
1450+
estree-walker "^2.0.2"
1451+
magic-string "^0.25.7"
1452+
postcss "^8.1.10"
1453+
source-map "^0.6.1"
1454+
14211455
"@vue/compiler-sfc@^3.2.12":
14221456
version "3.2.12"
14231457
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.12.tgz#39555550d96051508753ba934f7260dc5ee5211e"
@@ -1450,12 +1484,20 @@
14501484
"@vue/compiler-dom" "3.2.12"
14511485
"@vue/shared" "3.2.12"
14521486

1453-
"@vue/reactivity@3.2.12":
1454-
version "3.2.12"
1455-
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.12.tgz#b482a737cbdc891f9b1ec3100f3c1804b56d080b"
1456-
integrity sha512-Lr5CTQjFm5mT/6DGnVNhptmba/Qg1DbD6eNWWmiHLMlpPt4q2ww9A2orEjVw0qNcdTJ04JLPEVAz5jhTZTCfIg==
1487+
"@vue/compiler-ssr@3.2.13":
1488+
version "3.2.13"
1489+
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.13.tgz#98434672e0b488c2affa4b0570731d6be5cda187"
1490+
integrity sha512-ZbO6uDhUWTdKBRguYNEZXj2FU3nh1cudoHBiidbxj9q5J0tVT+j1PSVFAXPq6SquUBdJpa4HvGkQ5kQzv6upXg==
14571491
dependencies:
1458-
"@vue/shared" "3.2.12"
1492+
"@vue/compiler-dom" "3.2.13"
1493+
"@vue/shared" "3.2.13"
1494+
1495+
"@vue/reactivity@3.2.13":
1496+
version "3.2.13"
1497+
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.13.tgz#d269b09aaafef06a91bf3eb98defd41a2c3daf54"
1498+
integrity sha512-j3ByCiRgrr4uEZpXJM8XowrbYKeNHMHlbmMZE/2QpVzVPIfrQWS2fpLmbchJeMrnwIrzEl+dub3hgwkV4KRn4w==
1499+
dependencies:
1500+
"@vue/shared" "3.2.13"
14591501

14601502
"@vue/ref-transform@3.2.12":
14611503
version "3.2.12"
@@ -1468,28 +1510,52 @@
14681510
estree-walker "^2.0.2"
14691511
magic-string "^0.25.7"
14701512

1471-
"@vue/runtime-core@3.2.12":
1472-
version "3.2.12"
1473-
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.12.tgz#422662fd5b85f787222d2aea840264ba97e84a13"
1474-
integrity sha512-LO+ztgcmsomavYUaSq7BTteh8pmnUmvUnXUFVYdlcg3VCdYRS0ImlclpYsNHqjAk2gU+H09dr2PP0kL961xUfQ==
1513+
"@vue/ref-transform@3.2.13":
1514+
version "3.2.13"
1515+
resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.13.tgz#6adfce50d388cc03683d9d2ba58f3a3bde5166f4"
1516+
integrity sha512-q6GXHZFzXjpx1K3UFRF8fa+xSmD9xV/FjhGzTNnfrryBr8tBUNYgP2f0s5K5N+21Ay7+MlQ1XXMUp8McGvsryQ==
14751517
dependencies:
1476-
"@vue/reactivity" "3.2.12"
1477-
"@vue/shared" "3.2.12"
1518+
"@babel/parser" "^7.15.0"
1519+
"@vue/compiler-core" "3.2.13"
1520+
"@vue/shared" "3.2.13"
1521+
estree-walker "^2.0.2"
1522+
magic-string "^0.25.7"
14781523

1479-
"@vue/runtime-dom@3.2.12":
1480-
version "3.2.12"
1481-
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.12.tgz#d9fe865dca36f9ca33ba327afdeb89ae2aa03f4c"
1482-
integrity sha512-+NSDqivgihvoPYbKFDmzFu1tW7SOzwc7r0b7T8vsJtooVPGxwtfAFZ6wyLtteOXXrCpyTR3kpyTCIp31uY7aJg==
1524+
"@vue/runtime-core@3.2.13":
1525+
version "3.2.13"
1526+
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.13.tgz#8b62f92642e56af71d0d35a9f0065daf6f9eb3fb"
1527+
integrity sha512-VQedL9Wa7yWMPVDrIkxzLCm6cWCDBoXcXc+jrsOJkqpWhEeA7+zGOsDsHzhLH8aaJD6vdnUR5Cy0EKvoJDqEWQ==
14831528
dependencies:
1484-
"@vue/runtime-core" "3.2.12"
1485-
"@vue/shared" "3.2.12"
1529+
"@vue/reactivity" "3.2.13"
1530+
"@vue/shared" "3.2.13"
1531+
1532+
"@vue/runtime-dom@3.2.13":
1533+
version "3.2.13"
1534+
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.13.tgz#238f517a75765719f8373409cee853775c636f92"
1535+
integrity sha512-DVG+ItkrnCOEa9HSrmGBTLwv/gBVYCO8wkm/yv+d5ChoTnyIILxP0oCiZEPJsgWZfUSRPNi5rXozwo7F99MiwQ==
1536+
dependencies:
1537+
"@vue/runtime-core" "3.2.13"
1538+
"@vue/shared" "3.2.13"
14861539
csstype "^2.6.8"
14871540

1541+
"@vue/server-renderer@3.2.13":
1542+
version "3.2.13"
1543+
resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.13.tgz#b10a564be67eec6721f90b36c3c817c19e6064b4"
1544+
integrity sha512-KI+JFV+vRb95+Jb6IwRRm4Vhvj8wrJTNs+OlATfqwwIRpBGAyxn/4knDJYzlnUf/mrKAkrbw751mHhi+pEwILQ==
1545+
dependencies:
1546+
"@vue/compiler-ssr" "3.2.13"
1547+
"@vue/shared" "3.2.13"
1548+
14881549
"@vue/shared@3.2.12":
14891550
version "3.2.12"
14901551
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
14911552
integrity sha512-5CkaifUCJwcTuru7FDwKFacPJuEoGUTw0LKSa5bw40B23s0TS+MGlYR1285nbV/ju3QUGlA6d6PD+GJkWy7uFg==
14921553

1554+
"@vue/shared@3.2.13":
1555+
version "3.2.13"
1556+
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.13.tgz#c830ef966d7af12598e0ea862a55695ea589cd47"
1557+
integrity sha512-F/gs3kHQ8Xeo24F6EImOvBiIoYQsBjF9qoLzvk+LHxYN6ZhIDEL1NWrBFYzdFQ7NphjEYd4EvPZ+Qee+WX8P6w==
1558+
14931559
"@webassemblyjs/ast@1.11.1":
14941560
version "1.11.1"
14951561
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -9668,14 +9734,16 @@ void-elements@^2.0.1:
96689734
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
96699735
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
96709736

9671-
vue@^3.2.12:
9672-
version "3.2.12"
9673-
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.12.tgz#b44f55506fb6a7c4b65635e609deb5f9368aa2ce"
9674-
integrity sha512-VV14HtubmB56uuQaSvLkJZgoocPiN8CJI3zZA9y8h7q/Z5hcknDIFkbq5d8ku0ukZ6AJPQqMsZWcq0qryF0jgg==
9737+
vue@^3.2.13:
9738+
version "3.2.13"
9739+
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.13.tgz#9d1a94fc62dc29ae21a3dd0d8ee24198e421671e"
9740+
integrity sha512-raTGvLXXTdMxrhQKY1r1YFXZMmjbjTe7QHBW9EU4CgCBhq8DbgyLqgILcSUZmeFyazk5WY7a7xu0VYmHElf4lA==
96759741
dependencies:
9676-
"@vue/compiler-dom" "3.2.12"
9677-
"@vue/runtime-dom" "3.2.12"
9678-
"@vue/shared" "3.2.12"
9742+
"@vue/compiler-dom" "3.2.13"
9743+
"@vue/compiler-sfc" "3.2.13"
9744+
"@vue/runtime-dom" "3.2.13"
9745+
"@vue/server-renderer" "3.2.13"
9746+
"@vue/shared" "3.2.13"
96799747

96809748
w3c-hr-time@^1.0.2:
96819749
version "1.0.2"

0 commit comments

Comments
 (0)