Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(worker): prevent load vite client #12995

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 5 additions & 21 deletions packages/vite/src/client/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -365,9 +365,11 @@ const sheetsMap = new Map<string, HTMLStyleElement>()

// collect existing style elements that may have been inserted during SSR
// to avoid FOUC or duplicate styles
document.querySelectorAll('style[data-vite-dev-id]').forEach((el) => {
sheetsMap.set(el.getAttribute('data-vite-dev-id')!, el as HTMLStyleElement)
})
if ('document' in globalThis) {
document.querySelectorAll('style[data-vite-dev-id]').forEach((el) => {
sheetsMap.set(el.getAttribute('data-vite-dev-id')!, el as HTMLStyleElement)
})
}

// all css imports should be inserted at the same position
// because after build it will be a single css file
Expand Down Expand Up @@ -591,22 +593,4 @@ export function createHotContext(ownerPath: string): ViteHotContext {
return hot
}

/**
* urls here are dynamic import() urls that couldn't be statically analyzed
*/
export function injectQuery(url: string, queryToInject: string): string {
// skip urls that won't be handled by vite
if (url[0] !== '.' && url[0] !== '/') {
return url
}

// can't use pathname from URL since it may be relative like ../
const pathname = url.replace(/#.*$/, '').replace(/\?.*$/, '')
const { search, hash } = new URL(url, 'http://vitejs.dev')

return `${pathname}?${queryToInject}${search ? `&` + search.slice(1) : ''}${
hash || ''
}`
}

export { ErrorOverlay }
36 changes: 35 additions & 1 deletion packages/vite/src/node/plugins/importAnalysis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,28 @@ const hasViteIgnoreRE = /\/\*\s*@vite-ignore\s*\*\//
const cleanUpRawUrlRE = /\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm
const urlIsStringRE = /^(?:'.*'|".*"|`.*`)$/

const importAnalysisHelperId = '\0vite/import-analysis-helper'
const wrapppedImportAnalysisHelperId = wrapId(importAnalysisHelperId)

/**
* urls here are dynamic import() urls that couldn't be statically analyzed.
* browser-safe version of `injectQuery` util.
*/
function __vite__injectQuery(url: string, queryToInject: string): string {
// skip urls that won't be handled by vite
if (url[0] !== '.' && url[0] !== '/') {
return url
}

// can't use pathname from URL since it may be relative like ../
const pathname = url.replace(/#.*$/, '').replace(/\?.*$/, '')
const { search, hash } = new URL(url, 'http://vitejs.dev')

return `${pathname}?${queryToInject}${search ? `&` + search.slice(1) : ''}${
hash || ''
}`
}

interface UrlPosition {
url: string
start: number
Expand Down Expand Up @@ -201,6 +223,18 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
server = _server
},

resolveId(id) {
if (id === importAnalysisHelperId) {
return id
}
},

load(id) {
if (id === importAnalysisHelperId) {
return 'export ' + __vite__injectQuery.toString()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if this is genius or if this language has way to much meta programming 😄

}
},

async transform(source, importer, options) {
// In a real app `server` is always defined, but it is undefined when
// running src/node/server/__tests__/pluginContainer.spec.ts
Expand Down Expand Up @@ -734,7 +768,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {

if (needQueryInjectHelper) {
str().prepend(
`import { injectQuery as __vite__injectQuery } from "${clientPublicPath}";`,
`import { __vite__injectQuery } from "${wrapppedImportAnalysisHelperId}";`,
Copy link
Contributor

@jamsinclair jamsinclair Aug 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(As mentioned in issue) Inlining the function could help solve #11266. If we don't want to inline the function for all files – we could detect classic workers via the import suffixes.

e.g.

const importSuffixes = new URL(importer, 'http://vitejs.dev').searchParams
const isClassicWorker = importSuffixes.has('worker_type') && importSuffixes.has('type', 'classic')

if (isClassicWorker) {
   // Inlines the injectQuery function to the top of the worker file
   str().prepend(__vite__injectQuery.toString())
} else {
   // prepend import string
}

)
}

Expand Down