From f6cf92b48317a19a3840ad781b77d6d3cae143bb Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Wed, 4 Jan 2023 02:24:49 +0800 Subject: [PATCH] Upgrade to Vite 4 (#5685) * Upgrade Vite 4 * Simplify Svelte preprocess setup * Upgrade rollup * Fix tests * Fix wrong changeset target * Fix error tests * Set NODE_ENV default --- .changeset/new-lies-guess.md | 7 + .changeset/spotty-bees-switch.md | 5 + .../astro/e2e/error-react-spectrum.test.js | 26 - .../error-react-spectrum/astro.config.mjs | 7 - .../error-react-spectrum/package.json | 12 - .../src/pages/index.astro | 19 - packages/astro/package.json | 6 +- packages/astro/src/cli/index.ts | 5 + packages/astro/src/core/create-vite.ts | 3 +- packages/astro/src/core/errors/dev/index.ts | 2 +- packages/astro/src/core/errors/dev/utils.ts | 11 - packages/astro/src/core/errors/dev/vite.ts | 58 +- .../postcss/src/components/Svelte.svelte | 2 +- packages/astro/test/test-utils.js | 7 +- packages/integrations/image/package.json | 2 +- packages/integrations/mdx/package.json | 2 +- packages/integrations/netlify/package.json | 2 +- packages/integrations/svelte/package.json | 10 +- packages/integrations/svelte/src/index.ts | 28 +- packages/integrations/vue/package.json | 6 +- pnpm-lock.yaml | 3670 ++--------------- 21 files changed, 384 insertions(+), 3506 deletions(-) create mode 100644 .changeset/new-lies-guess.md create mode 100644 .changeset/spotty-bees-switch.md delete mode 100644 packages/astro/e2e/error-react-spectrum.test.js delete mode 100644 packages/astro/e2e/fixtures/error-react-spectrum/astro.config.mjs delete mode 100644 packages/astro/e2e/fixtures/error-react-spectrum/package.json delete mode 100644 packages/astro/e2e/fixtures/error-react-spectrum/src/pages/index.astro diff --git a/.changeset/new-lies-guess.md b/.changeset/new-lies-guess.md new file mode 100644 index 000000000000..262503a1ede5 --- /dev/null +++ b/.changeset/new-lies-guess.md @@ -0,0 +1,7 @@ +--- +'astro': major +'@astrojs/svelte': major +'@astrojs/vue': major +--- + +Upgrade to Vite 4. Please see its [migration guide](https://vitejs.dev/guide/migration.html) for more information. diff --git a/.changeset/spotty-bees-switch.md b/.changeset/spotty-bees-switch.md new file mode 100644 index 000000000000..d48f620d8d1c --- /dev/null +++ b/.changeset/spotty-bees-switch.md @@ -0,0 +1,5 @@ +--- +'@astrojs/svelte': major +--- + +Simplify Svelte preprocess setup. ` - - -
- testing -
- - diff --git a/packages/astro/package.json b/packages/astro/package.json index 946c4f277cca..cc6313823ff7 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -156,7 +156,6 @@ "recast": "^0.20.5", "rehype": "^12.0.1", "resolve": "^1.22.0", - "rollup": "^2.79.1", "semver": "^7.3.7", "shiki": "^0.11.1", "sirv": "^2.0.2", @@ -168,8 +167,8 @@ "typescript": "*", "unist-util-visit": "^4.1.0", "vfile": "^5.3.2", - "vite": "~3.2.5", - "vitefu": "^0.2.1", + "vite": "^4.0.3", + "vitefu": "^0.2.4", "yargs-parser": "^21.0.1", "zod": "^3.17.3" }, @@ -207,6 +206,7 @@ "rehype-slug": "^5.0.1", "rehype-toc": "^3.0.2", "remark-code-titles": "^0.1.2", + "rollup": "^3.9.0", "sass": "^1.52.2", "srcset-parse": "^1.1.0", "unified": "^10.1.2" diff --git a/packages/astro/src/cli/index.ts b/packages/astro/src/cli/index.ts index 02a9075ecc7f..d44421e06c3b 100644 --- a/packages/astro/src/cli/index.ts +++ b/packages/astro/src/cli/index.ts @@ -156,6 +156,11 @@ async function runCommand(cmd: string, flags: yargs.Arguments) { } } + // Start with a default NODE_ENV so Vite doesn't set an incorrect default when loading the Astro config + if (!process.env.NODE_ENV) { + process.env.NODE_ENV = cmd === 'dev' ? 'development' : 'production'; + } + let { astroConfig: initialAstroConfig, userConfig: initialUserConfig } = await openConfig({ cwd: root, flags, diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 942566c88eab..85b720d133e8 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -25,7 +25,6 @@ import markdownVitePlugin from '../vite-plugin-markdown/index.js'; import astroScannerPlugin from '../vite-plugin-scanner/index.js'; import astroScriptsPlugin from '../vite-plugin-scripts/index.js'; import astroScriptsPageSSRPlugin from '../vite-plugin-scripts/page-ssr.js'; -import { createCustomViteLogger } from './errors/dev/index.js'; import { resolveDependency } from './util.js'; interface CreateViteOptions { @@ -197,7 +196,7 @@ export async function createVite( sortPlugins(result.plugins); } - result.customLogger = createCustomViteLogger(result.logLevel ?? 'warn'); + result.customLogger = vite.createLogger(result.logLevel ?? 'warn'); return result; } diff --git a/packages/astro/src/core/errors/dev/index.ts b/packages/astro/src/core/errors/dev/index.ts index 93cd413857e8..12e07a9fa921 100644 --- a/packages/astro/src/core/errors/dev/index.ts +++ b/packages/astro/src/core/errors/dev/index.ts @@ -1,2 +1,2 @@ export { collectErrorMetadata } from './utils.js'; -export { createCustomViteLogger, enhanceViteSSRError, getViteErrorPayload } from './vite.js'; +export { enhanceViteSSRError, getViteErrorPayload } from './vite.js'; diff --git a/packages/astro/src/core/errors/dev/utils.ts b/packages/astro/src/core/errors/dev/utils.ts index 3d11e58bb172..c54e53451e7a 100644 --- a/packages/astro/src/core/errors/dev/utils.ts +++ b/packages/astro/src/core/errors/dev/utils.ts @@ -12,11 +12,6 @@ import { normalizeLF } from '../utils.js'; type EsbuildMessage = ESBuildTransformResult['warnings'][number]; -export const incompatiblePackages = { - 'react-spectrum': `@adobe/react-spectrum is not compatible with Vite's server-side rendering mode at the moment. You can still use React Spectrum from the client. Create an island React component and use the client:only directive. From there you can use React Spectrum.`, -}; -export const incompatPackageExp = new RegExp(`(${Object.keys(incompatiblePackages).join('|')})`); - /** * Takes any error-like object and returns a standardized Error + metadata object. * Useful for consistent reporting regardless of where the error surfaced from. @@ -135,12 +130,6 @@ ${ See https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined for more information. `; return hint; - } else { - const res = incompatPackageExp.exec(err.stack); - if (res) { - const key = res[0] as keyof typeof incompatiblePackages; - return incompatiblePackages[key]; - } } return err.hint; } diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts index d0dcb1ea7498..ffe3979c360e 100644 --- a/packages/astro/src/core/errors/dev/vite.ts +++ b/packages/astro/src/core/errors/dev/vite.ts @@ -1,28 +1,12 @@ import * as fs from 'fs'; import { getHighlighter } from 'shiki'; import { fileURLToPath } from 'url'; -import { createLogger, type ErrorPayload, type Logger, type LogLevel } from 'vite'; +import type { ErrorPayload } from 'vite'; import type { ModuleLoader } from '../../module-loader/index.js'; import { AstroErrorData } from '../errors-data.js'; -import { type ErrorWithMetadata } from '../errors.js'; +import type { ErrorWithMetadata } from '../errors.js'; import { createSafeError } from '../utils.js'; -import { incompatPackageExp, renderErrorMarkdown } from './utils.js'; - -/** - * Custom logger with better error reporting for incompatible packages - */ -export function createCustomViteLogger(logLevel: LogLevel): Logger { - const viteLogger = createLogger(logLevel); - const logger: Logger = { - ...viteLogger, - error(msg, options?) { - // Silence warnings from incompatible packages (we log better errors for these) - if (incompatPackageExp.test(msg)) return; - return viteLogger.error(msg, options); - }, - }; - return logger; -} +import { renderErrorMarkdown } from './utils.js'; export function enhanceViteSSRError(error: unknown, filePath?: URL, loader?: ModuleLoader): Error { // NOTE: We don't know where the error that's coming here comes from, so we need to be defensive regarding what we do @@ -44,25 +28,23 @@ export function enhanceViteSSRError(error: unknown, filePath?: URL, loader?: Mod // Vite has a fairly generic error message when it fails to load a module, let's try to enhance it a bit // https://github.com/vitejs/vite/blob/ee7c28a46a6563d54b828af42570c55f16b15d2c/packages/vite/src/node/ssr/ssrModuleLoader.ts#L91 - if (/failed to load module for ssr:/.test(safeError.message)) { - const importName = safeError.message.split('for ssr:').at(1)?.trim(); - if (importName) { - safeError.title = AstroErrorData.FailedToLoadModuleSSR.title; - safeError.name = 'FailedToLoadModuleSSR'; - safeError.message = AstroErrorData.FailedToLoadModuleSSR.message(importName); - safeError.hint = AstroErrorData.FailedToLoadModuleSSR.hint; - safeError.code = AstroErrorData.FailedToLoadModuleSSR.code; - const line = lns.findIndex((ln) => ln.includes(importName)); - - if (line !== -1) { - const column = lns[line]?.indexOf(importName); - - safeError.loc = { - file: path, - line: line + 1, - column, - }; - } + let importName: string | undefined; + if ((importName = safeError.message.match(/Failed to load url (.*?) \(resolved id:/)?.[1])) { + safeError.title = AstroErrorData.FailedToLoadModuleSSR.title; + safeError.name = 'FailedToLoadModuleSSR'; + safeError.message = AstroErrorData.FailedToLoadModuleSSR.message(importName); + safeError.hint = AstroErrorData.FailedToLoadModuleSSR.hint; + safeError.code = AstroErrorData.FailedToLoadModuleSSR.code; + const line = lns.findIndex((ln) => ln.includes(importName!)); + + if (line !== -1) { + const column = lns[line]?.indexOf(importName); + + safeError.loc = { + file: path, + line: line + 1, + column, + }; } } diff --git a/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte b/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte index 031146443958..5bd019213cbc 100644 --- a/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte +++ b/packages/astro/test/fixtures/postcss/src/components/Svelte.svelte @@ -1,4 +1,4 @@ -