Skip to content

Commit e4e21f5

Browse files
TheAlexLichterposva
TheAlexLichter
and
posva
authored
perf: use hook filters (#631)
Co-authored-by: Eduardo San Martin Morote <[email protected]>
1 parent 3846519 commit e4e21f5

File tree

3 files changed

+82
-87
lines changed

3 files changed

+82
-87
lines changed

‎src/core/moduleConstants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,5 @@ export const routeBlockQueryRE = /\?vue&type=route/
3838
export function asVirtualId(id: string) {
3939
return VIRTUAL_PREFIX + id
4040
}
41+
42+
export const DEFINE_PAGE_QUERY_RE = /\?.*\bdefinePage\&vue\b/

‎src/data-loaders/auto-exports.ts

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Plugin } from 'vite'
33
import MagicString from 'magic-string'
44
import { findStaticImports, parseStaticImport } from 'mlly'
55
import { resolve } from 'pathe'
6-
import { type UnpluginOptions } from 'unplugin'
6+
import { StringFilter, type UnpluginOptions } from 'unplugin'
77

88
export function extractLoadersToExport(
99
code: string,
@@ -41,10 +41,9 @@ const PLUGIN_NAME = 'unplugin-vue-router:data-loaders-auto-export'
4141
*/
4242
export interface AutoExportLoadersOptions {
4343
/**
44-
* Filter page components to apply the auto-export (defined with `createFilter()` from `unplugin-utils`) or array
45-
* of globs.
44+
* Filter page components to apply the auto-export. Passed to `transform.filter.id`.
4645
*/
47-
filterPageComponents: ((id: string) => boolean) | string[]
46+
transformFilter: StringFilter
4847

4948
/**
5049
* Globs to match the paths of the loaders.
@@ -66,28 +65,21 @@ export interface AutoExportLoadersOptions {
6665
6766
*/
6867
export function AutoExportLoaders({
69-
filterPageComponents: filterPagesOrGlobs,
68+
transformFilter,
7069
loadersPathsGlobs,
7170
root = process.cwd(),
7271
}: AutoExportLoadersOptions): Plugin {
7372
const filterPaths = createFilter(loadersPathsGlobs)
74-
const filterPageComponents =
75-
typeof filterPagesOrGlobs === 'function'
76-
? filterPagesOrGlobs
77-
: createFilter(filterPagesOrGlobs)
7873

7974
return {
8075
name: PLUGIN_NAME,
8176
transform: {
8277
order: 'post',
83-
handler(code, id) {
84-
// strip query to also match .vue?vue&lang=ts etc
85-
const queryIndex = id.indexOf('?')
86-
const idWithoutQuery = queryIndex >= 0 ? id.slice(0, queryIndex) : id
87-
if (!filterPageComponents(idWithoutQuery)) {
88-
return
89-
}
78+
filter: {
79+
id: transformFilter,
80+
},
9081

82+
handler(code) {
9183
const loadersToExports = extractLoadersToExport(code, filterPaths, root)
9284

9385
if (loadersToExports.length <= 0) return

‎src/index.ts

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
routeBlockQueryRE,
99
ROUTE_BLOCK_ID,
1010
ROUTES_LAST_LOAD_TIME,
11+
VIRTUAL_PREFIX,
12+
DEFINE_PAGE_QUERY_RE,
1113
} from './core/moduleConstants'
1214
import {
1315
Options,
@@ -16,7 +18,6 @@ import {
1618
mergeAllExtensions,
1719
} from './options'
1820
import { createViteContext } from './core/vite'
19-
import { createFilter } from 'unplugin-utils'
2021
import { join } from 'pathe'
2122
import { appendExtensionListToPattern } from './core/utils'
2223
import { MACRO_DEFINE_PAGE_QUERY } from './core/definePage'
@@ -50,43 +51,37 @@ export default createUnplugin<Options | undefined>((opt = {}, _meta) => {
5051
mergeAllExtensions(options)
5152
)
5253

53-
// this is a larger filter that includes a bit too many files
54-
// the RouteFolderWatcher will filter it down to the actual files
55-
const filterPageComponents = createFilter(
56-
[
57-
...options.routesFolder.flatMap((routeOption) =>
58-
pageFilePattern.map((pattern) => join(routeOption.src, pattern))
59-
),
60-
// importing the definePage block
61-
/\?.*\bdefinePage\&vue\b/,
62-
],
63-
options.exclude
54+
const IDS_TO_INCLUDE = options.routesFolder.flatMap((routeOption) =>
55+
pageFilePattern.map((pattern) => join(routeOption.src, pattern))
6456
)
6557

6658
const plugins: UnpluginOptions[] = [
6759
{
6860
name: 'unplugin-vue-router',
6961
enforce: 'pre',
7062

71-
resolveId(id) {
72-
if (
63+
resolveId: {
64+
filter: {
65+
id: {
66+
include: [
67+
new RegExp(`^${MODULE_VUE_ROUTER_AUTO}$`),
68+
new RegExp(`^${MODULE_ROUTES_PATH}$`),
69+
routeBlockQueryRE,
70+
],
71+
},
72+
},
73+
handler(id) {
74+
// vue-router/auto
7375
// vue-router/auto-routes
74-
id === MODULE_ROUTES_PATH ||
75-
// NOTE: it wasn't possible to override or add new exports to vue-router
76-
// so we need to override it with a different package name
77-
id === MODULE_VUE_ROUTER_AUTO
78-
) {
79-
// virtual module
80-
return asVirtualId(id)
81-
}
82-
83-
// this allows us to skip the route block module as a whole since we already parse it
84-
if (routeBlockQueryRE.test(id)) {
85-
return ROUTE_BLOCK_ID
86-
}
76+
if (id === MODULE_ROUTES_PATH || id === MODULE_VUE_ROUTER_AUTO) {
77+
// must be a virtual module
78+
return asVirtualId(id)
79+
}
8780

88-
// nothing to do, just for TS
89-
return
81+
// otherwisse we know it matched the routeBlockQueryRE
82+
// this allows us to skip the route block module as a whole since we already parse it
83+
return ROUTE_BLOCK_ID
84+
},
9085
},
9186

9287
buildStart() {
@@ -97,54 +92,57 @@ export default createUnplugin<Options | undefined>((opt = {}, _meta) => {
9792
ctx.stopWatcher()
9893
},
9994

100-
// we only need to transform page components
101-
transformInclude(id) {
102-
// console.log('filtering ' + id, filterPageComponents(id) ? '✅' : '❌')
103-
return filterPageComponents(id)
104-
},
105-
106-
transform(code, id) {
107-
// console.log('👋 Transforming', id)
108-
// remove the `definePage()` from the file or isolate it
109-
return ctx.definePageTransform(code, id)
110-
},
111-
112-
// loadInclude is necessary for webpack
113-
loadInclude(id) {
114-
if (id === ROUTE_BLOCK_ID) return true
115-
const resolvedId = getVirtualId(id)
116-
return (
117-
resolvedId === MODULE_ROUTES_PATH ||
118-
resolvedId === MODULE_VUE_ROUTER_AUTO
119-
)
95+
transform: {
96+
filter: {
97+
id: {
98+
include: [...IDS_TO_INCLUDE, DEFINE_PAGE_QUERY_RE],
99+
exclude: options.exclude,
100+
},
101+
},
102+
handler(code, id) {
103+
// remove the `definePage()` from the file or isolate it
104+
return ctx.definePageTransform(code, id)
105+
},
120106
},
121107

122-
load(id) {
123-
// remove the <route> block as it's parsed by the plugin
124-
// stub it with an empty module
125-
if (id === ROUTE_BLOCK_ID) {
126-
return {
127-
code: `export default {}`,
128-
map: null,
108+
load: {
109+
filter: {
110+
id: {
111+
include: [
112+
// virtualized ids only
113+
new RegExp(`^${ROUTE_BLOCK_ID}$`),
114+
new RegExp(`^${VIRTUAL_PREFIX}${MODULE_VUE_ROUTER_AUTO}$`),
115+
new RegExp(`^${VIRTUAL_PREFIX}${MODULE_ROUTES_PATH}$`),
116+
],
117+
},
118+
},
119+
handler(id) {
120+
// remove the <route> block as it's parsed by the plugin
121+
// stub it with an empty module
122+
if (id === ROUTE_BLOCK_ID) {
123+
return {
124+
code: `export default {}`,
125+
map: null,
126+
}
129127
}
130-
}
131128

132-
// we need to use a virtual module so that vite resolves the vue-router/auto-routes
133-
// dependency correctly
134-
const resolvedId = getVirtualId(id)
129+
// we need to use a virtual module so that vite resolves the vue-router/auto-routes
130+
// dependency correctly
131+
const resolvedId = getVirtualId(id)
135132

136-
// vue-router/auto-routes
137-
if (resolvedId === MODULE_ROUTES_PATH) {
138-
ROUTES_LAST_LOAD_TIME.update()
139-
return ctx.generateRoutes()
140-
}
133+
// vue-router/auto-routes
134+
if (resolvedId === MODULE_ROUTES_PATH) {
135+
ROUTES_LAST_LOAD_TIME.update()
136+
return ctx.generateRoutes()
137+
}
141138

142-
// vue-router/auto
143-
if (resolvedId === MODULE_VUE_ROUTER_AUTO) {
144-
return ctx.generateVueRouterProxy()
145-
}
139+
// vue-router/auto
140+
if (resolvedId === MODULE_VUE_ROUTER_AUTO) {
141+
return ctx.generateVueRouterProxy()
142+
}
146143

147-
return // ok TS...
144+
return // ok TS...
145+
},
148146
},
149147

150148
// improves DX
@@ -195,7 +193,10 @@ export default createUnplugin<Options | undefined>((opt = {}, _meta) => {
195193
if (options.experimental.autoExportsDataLoaders) {
196194
plugins.push(
197195
createAutoExportPlugin({
198-
filterPageComponents,
196+
transformFilter: {
197+
include: IDS_TO_INCLUDE,
198+
exclude: options.exclude,
199+
},
199200
loadersPathsGlobs: options.experimental.autoExportsDataLoaders,
200201
root: options.root,
201202
})

0 commit comments

Comments
 (0)