Skip to content

Commit 80d74fa

Browse files
yyx990803yyx990803
committed
wip: webpack 4 + 3.3
1 parent cc6fa9e commit 80d74fa

19 files changed

+900
-574
lines changed

Diff for: ‎.node-version

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.20.0

Diff for: ‎example/ScriptSetup.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
import { ref } from 'vue'
33
import Button from './Button.vue'
44
5-
let count = $ref(100)
5+
const count = ref(100)
66
77
function inc() {
8-
count++
8+
count.value++
99
}
1010
1111
const hello = 'hi from scriptttt'

Diff for: ‎example/TypeScript.vue

+6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
<script setup lang="ts">
22
import { ref, Ref } from 'vue'
3+
import { Props } from './types'
4+
35
const a: Ref<number> = ref(12)
6+
7+
const props = defineProps<Props>()
8+
console.log(Object.keys(props))
49
</script>
510

611
<template>
12+
<pre>{{ Object.keys(props) }}</pre>
713
<p @click="a++">From TSssss: {{ a?.toFixed(2) }}</p>
814
</template>

Diff for: ‎example/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface Props {
2+
msg: string
3+
lol?: string
4+
}

Diff for: ‎example/webpack.config.js

+5-38
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
const fs = require('fs')
21
const path = require('path')
32
const webpack = require('webpack')
4-
const hash = require('hash-sum')
53
const VueLoaderPlugin = require('../dist/plugin').default
64
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
75

@@ -22,13 +20,15 @@ module.exports = (env = {}) => {
2220
*/
2321
const genConfig = (isServerBuild = false) => {
2422
const minimize = isProd && !isServerBuild && !env.noMinimize
25-
const useBabel = isProd && !isServerBuild && !env.noBabel
2623

2724
return {
2825
mode: isProd ? 'production' : 'development',
2926
entry: path.resolve(__dirname, './main.js'),
3027
target: isServerBuild ? 'node' : 'web',
3128
devtool: 'source-map',
29+
resolve: {
30+
extensions: ['.js', '.ts'],
31+
},
3232
output: {
3333
path: path.resolve(
3434
__dirname,
@@ -54,7 +54,7 @@ module.exports = (env = {}) => {
5454
test: /\.vue$/,
5555
loader: 'vue-loader',
5656
options: {
57-
reactivityTransform: true,
57+
// reactivityTransform: true,
5858
},
5959
},
6060
{
@@ -80,46 +80,13 @@ module.exports = (env = {}) => {
8080
'css-loader',
8181
],
8282
},
83-
// {
84-
// test: /\.js$/,
85-
// use: [
86-
// {
87-
// loader: 'cache-loader',
88-
// options: {
89-
// cacheIdentifier: hash(
90-
// // deps
91-
// fs.readFileSync(
92-
// path.resolve(__dirname, '../package.json')
93-
// ) +
94-
// // env
95-
// JSON.stringify(env) +
96-
// // client vs. server build
97-
// isServerBuild
98-
// ),
99-
// cacheDirectory: path.resolve(__dirname, '../.cache'),
100-
// },
101-
// },
102-
// ...(useBabel
103-
// ? [
104-
// {
105-
// loader: 'babel-loader',
106-
// options: {
107-
// // use yarn build-example --env.noMinimize to verify that
108-
// // babel is properly applied to all js code, including the
109-
// // render function compiled from SFC templates.
110-
// presets: ['@babel/preset-env'],
111-
// },
112-
// },
113-
// ]
114-
// : []),
115-
// ],
116-
// },
11783
{
11884
test: /\.ts$/,
11985
use: [
12086
{
12187
loader: 'ts-loader',
12288
options: {
89+
transpileOnly: true,
12390
appendTsSuffixTo: [/\.vue$/],
12491
},
12592
},

Diff for: ‎package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"dependencies": {
3636
"chalk": "^4.1.0",
3737
"hash-sum": "^2.0.0",
38-
"loader-utils": "^2.0.0"
38+
"watchpack": "^2.4.0"
3939
},
4040
"peerDependencies": {
4141
"webpack": "^4.1.0 || ^5.0.0-0"
@@ -89,13 +89,13 @@
8989
"ts-loader-v9": "npm:ts-loader@^9.2.4",
9090
"typescript": "^4.4.3",
9191
"url-loader": "^4.1.0",
92-
"vue": "^3.2.25",
92+
"vue": "link:../core/packages/vue",
9393
"vue-i18n": "^9.1.7",
94-
"webpack": "^4.41.2",
95-
"webpack-cli": "^3.3.10",
96-
"webpack-dev-server": "^3.9.0",
94+
"webpack": "^4.46.0",
95+
"webpack-cli": "^3.3.12",
96+
"webpack-dev-server": "^3.11.3",
9797
"webpack-merge": "^5.1.4",
98-
"webpack5": "npm:webpack@5",
98+
"webpack5": "npm:webpack@^5.0.0",
9999
"yorkie": "^2.0.0"
100100
}
101101
}

Diff for: ‎src/descriptorCache.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import type { SFCDescriptor } from 'vue/compiler-sfc'
33
import { compiler } from './compiler'
44

55
const { parse } = compiler
6-
const cache = new Map<string, SFCDescriptor>()
6+
export const descriptorCache = new Map<string, SFCDescriptor>()
77

88
export function setDescriptor(filename: string, entry: SFCDescriptor) {
9-
cache.set(cleanQuery(filename), entry)
9+
descriptorCache.set(cleanQuery(filename), entry)
1010
}
1111

1212
export function getDescriptor(filename: string): SFCDescriptor {
1313
filename = cleanQuery(filename)
14-
if (cache.has(filename)) {
15-
return cache.get(filename)!
14+
if (descriptorCache.has(filename)) {
15+
return descriptorCache.get(filename)!
1616
}
1717

1818
// This function should only be called after the descriptor has been
@@ -25,7 +25,7 @@ export function getDescriptor(filename: string): SFCDescriptor {
2525
filename,
2626
sourceMap: true,
2727
})
28-
cache.set(filename, descriptor)
28+
descriptorCache.set(filename, descriptor)
2929
return descriptor
3030
}
3131

Diff for: ‎src/index.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import webpack = require('webpack')
22
import * as path from 'path'
33
import * as qs from 'querystring'
4-
import * as loaderUtils from 'loader-utils'
54

65
import hash = require('hash-sum')
76

@@ -21,6 +20,7 @@ import { formatError } from './formatError'
2120
import VueLoaderPlugin from './plugin'
2221
import { canInlineTemplate } from './resolveScript'
2322
import { setDescriptor } from './descriptorCache'
23+
import { getOptions, stringifyRequest as _stringifyRequest } from './util'
2424

2525
export { VueLoaderPlugin }
2626

@@ -67,8 +67,7 @@ export default function loader(
6767
errorEmitted = true
6868
}
6969

70-
const stringifyRequest = (r: string) =>
71-
loaderUtils.stringifyRequest(loaderContext, r)
70+
const stringifyRequest = (r: string) => _stringifyRequest(loaderContext, r)
7271

7372
const {
7473
mode,
@@ -82,8 +81,7 @@ export default function loader(
8281
const rawQuery = _resourceQuery.slice(1)
8382
const incomingQuery = qs.parse(rawQuery)
8483
const resourceQuery = rawQuery ? `&${rawQuery}` : ''
85-
const options = (loaderUtils.getOptions(loaderContext) ||
86-
{}) as VueLoaderOptions
84+
const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
8785

8886
const isServer = options.isServerBuild ?? target === 'node'
8987
const isProduction =

Diff for: ‎src/pitcher.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import webpack = require('webpack')
22
import * as qs from 'querystring'
3-
import * as loaderUtils from 'loader-utils'
3+
import { stringifyRequest } from './util'
44

55
const selfPath = require.resolve('./index')
66
// const templateLoaderPath = require.resolve('./templateLoader')
@@ -111,7 +111,7 @@ function genRequest(loaders: Loader[], context: webpack.loader.LoaderContext) {
111111
return typeof loader === 'string' ? loader : loader.request
112112
})
113113
const resource = context.resourcePath + context.resourceQuery
114-
return loaderUtils.stringifyRequest(
114+
return stringifyRequest(
115115
context,
116116
'-!' + [...loaderStrings, resource].join('!')
117117
)

Diff for: ‎src/pluginWebpack4.ts

+65-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import * as qs from 'querystring'
22
import webpack = require('webpack')
33
import type { VueLoaderOptions } from './'
4+
import { clientCache, typeDepToSFCMap } from './resolveScript'
5+
import fs = require('fs')
6+
import { compiler as vueCompiler } from './compiler'
7+
import { descriptorCache } from './descriptorCache'
48

59
const RuleSet = require('webpack/lib/RuleSet')
610

711
const id = 'vue-loader-plugin'
812
const NS = 'vue-loader'
913

10-
class VueLoaderPlugin implements webpack.Plugin {
14+
class VueLoaderPlugin {
1115
static NS = NS
1216

1317
apply(compiler: webpack.Compiler) {
@@ -103,6 +107,66 @@ class VueLoaderPlugin implements webpack.Plugin {
103107
...clonedRules,
104108
...rules,
105109
]
110+
111+
// 3.3 HMR support
112+
const isServer =
113+
vueLoaderOptions.isServerBuild ?? compiler.options.target === 'node'
114+
const isProduction =
115+
compiler.options.mode === 'production' ||
116+
process.env.NODE_ENV === 'production'
117+
const needsHotReload =
118+
!isServer && !isProduction && vueLoaderOptions.hotReload !== false
119+
120+
if (needsHotReload && vueCompiler.invalidateTypeCache) {
121+
let watcher: any
122+
123+
const WatchPack = require('watchpack')
124+
125+
compiler.hooks.afterCompile.tap(id, (compilation) => {
126+
if (compilation.compiler === compiler) {
127+
// type-only imports can be tree-shaken and not registered as a
128+
// watched file at all, so we have to manually ensure they are watched.
129+
const files = [...typeDepToSFCMap.keys()]
130+
const oldWatcher = watcher
131+
watcher = new WatchPack({ aggregateTimeout: 0 })
132+
133+
watcher.once(
134+
'aggregated',
135+
(changes: Set<string>, removals: Set<string>) => {
136+
for (const file of changes) {
137+
// bust compiler-sfc type dep cache
138+
vueCompiler.invalidateTypeCache(file)
139+
const affectedSFCs = typeDepToSFCMap.get(file)
140+
if (affectedSFCs) {
141+
for (const sfc of affectedSFCs) {
142+
// bust script resolve cache
143+
const desc = descriptorCache.get(sfc)
144+
if (desc) clientCache.delete(desc)
145+
// force update importing SFC
146+
fs.writeFileSync(sfc, fs.readFileSync(sfc, 'utf-8'))
147+
}
148+
}
149+
}
150+
for (const file of removals) {
151+
vueCompiler.invalidateTypeCache(file)
152+
}
153+
}
154+
)
155+
156+
watcher.watch({ files, startTime: Date.now() })
157+
158+
if (oldWatcher) {
159+
oldWatcher.close()
160+
}
161+
}
162+
})
163+
164+
compiler.hooks.watchClose.tap(id, () => {
165+
if (watcher) {
166+
watcher.close()
167+
}
168+
})
169+
}
106170
}
107171
}
108172

Diff for: ‎src/pluginWebpack5.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as qs from 'querystring'
22
import type { VueLoaderOptions } from './'
3-
import type { RuleSetRule, Compiler, Plugin } from 'webpack'
3+
import type { RuleSetRule, Compiler } from 'webpack'
44

55
const id = 'vue-loader-plugin'
66
const NS = 'vue-loader'
@@ -94,7 +94,7 @@ const ruleSetCompiler = new RuleSetCompiler([
9494
new UseEffectRulePlugin(),
9595
])
9696

97-
class VueLoaderPlugin implements Plugin {
97+
class VueLoaderPlugin {
9898
static NS = NS
9999

100100
apply(compiler: Compiler) {
@@ -110,7 +110,7 @@ class VueLoaderPlugin implements Plugin {
110110
})
111111
})
112112

113-
const rules = compiler.options.module!.rules
113+
const rules = compiler.options.module!.rules as RuleSetRule[]
114114
let rawVueRule: RawRule
115115
let vueRules: Effect[] = []
116116

Diff for: ‎src/resolveScript.ts

+23-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import { resolveTemplateTSOptions } from './util'
99
import { compiler } from './compiler'
1010

1111
const { compileScript } = compiler
12-
const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
12+
export const clientCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
1313
const serverCache = new WeakMap<SFCDescriptor, SFCScriptBlock | null>()
1414

15+
export const typeDepToSFCMap = new Map<string, Set<string>>()
16+
1517
/**
1618
* inline template mode can only be enabled if:
1719
* - is production (separate compilation needed for HMR during dev)
@@ -75,6 +77,26 @@ export function resolveScript(
7577
loaderContext.emitError(e)
7678
}
7779

80+
if (!isProd && resolved?.deps) {
81+
for (const [key, sfcs] of typeDepToSFCMap) {
82+
if (sfcs.has(descriptor.filename) && !resolved.deps.includes(key)) {
83+
sfcs.delete(descriptor.filename)
84+
if (!sfcs.size) {
85+
typeDepToSFCMap.delete(key)
86+
}
87+
}
88+
}
89+
90+
for (const dep of resolved.deps) {
91+
const existingSet = typeDepToSFCMap.get(dep)
92+
if (!existingSet) {
93+
typeDepToSFCMap.set(dep, new Set([descriptor.filename]))
94+
} else {
95+
existingSet.add(descriptor.filename)
96+
}
97+
}
98+
}
99+
78100
cacheToUse.set(descriptor, resolved)
79101
return resolved
80102
}

0 commit comments

Comments
 (0)