From 03785dde3eb77a16b2cc4d8a73d486e390744463 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 6 Oct 2023 08:28:44 +1100 Subject: [PATCH 1/5] feat: support both CJS and ESM config files --- config/package.json | 6 +- config/src/index.ts | 2 +- config/src/read-config.ts | 76 ++++++++++--------- core/src/vite/vite-manager.ts | 9 ++- .../package.json | 3 +- .../preview.config.ts | 7 ++ .../public/index.html | 0 .../src/App.css | 0 .../src/App.tsx | 0 .../src/App_screenshot_linux.png | 0 .../src/Wrapper.js | 0 .../src/index.css | 0 .../src/index.tsx | 0 .../src/logo.svg | 0 .../src/react-app-env.d.ts | 0 .../tsconfig.json | 0 .../preview.config.js | 4 - .../apps/wrapper-custom/preview.config.js | 2 +- .../react/tests/smoke-tests.spec.ts | 2 +- pnpm-lock.yaml | 64 ++++------------ 20 files changed, 73 insertions(+), 102 deletions(-) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/package.json (82%) create mode 100644 framework-plugins/react/tests/apps/wrapper-custom-config-ts/preview.config.ts rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/public/index.html (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/App.css (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/App.tsx (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/App_screenshot_linux.png (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/Wrapper.js (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/index.css (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/index.tsx (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/logo.svg (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/src/react-app-env.d.ts (100%) rename framework-plugins/react/tests/apps/{wrapper-custom-esm-named-exports-config => wrapper-custom-config-ts}/tsconfig.json (100%) delete mode 100644 framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/preview.config.js diff --git a/config/package.json b/config/package.json index 3523ab54c8f..2a423a2d56f 100644 --- a/config/package.json +++ b/config/package.json @@ -21,10 +21,12 @@ "scripts": { "build": "tsc && unbuild" }, + "dependencies": { + "vite": "^4.4.11" + }, "devDependencies": { "@types/node": "^20.8.2", "typescript": "^5.2.2", - "unbuild": "^2.0.0", - "vite": "^4.4.11" + "unbuild": "^2.0.0" } } diff --git a/config/src/index.ts b/config/src/index.ts index a6091770f12..6d95ab7da25 100644 --- a/config/src/index.ts +++ b/config/src/index.ts @@ -1,2 +1,2 @@ export type { PreviewConfig } from "./config"; -export { PREVIEW_CONFIG_NAME, readConfig } from "./read-config"; +export { PREVIEW_CONFIG_NAMES, readConfig } from "./read-config"; diff --git a/config/src/read-config.ts b/config/src/read-config.ts index fc43d303cc4..27301005b72 100644 --- a/config/src/read-config.ts +++ b/config/src/read-config.ts @@ -1,33 +1,49 @@ import fs from "fs"; -import { createRequire } from "module"; import path from "path"; -import url from "url"; +import { loadConfigFromFile, type LogLevel } from "vite"; import type { PreviewConfig } from "./config"; -const require = createRequire(import.meta.url); +export const PREVIEW_CONFIG_NAMES = [ + "preview.config.js", + "preview.config.mjs", + "preview.config.ts", + "preview.config.cjs", + "preview.config.mts", + "preview.config.cts", +]; -export const PREVIEW_CONFIG_NAME = "preview.config.js"; - -export async function readConfig(rootDir: string): Promise { - const configPath = path.join(rootDir, PREVIEW_CONFIG_NAME); +export async function readConfig( + rootDir: string, + logLevel: LogLevel +): Promise { let config: Partial = {}; - const configFileExists = fs.existsSync(configPath); - if (configFileExists) { - let isModule = false; - const packageJsonPath = path.join(rootDir, "package.json"); - if (fs.existsSync(packageJsonPath)) { - const { type } = JSON.parse(fs.readFileSync(packageJsonPath, "utf8")); - isModule = type === "module"; - } - try { - return await loadModule(configPath, isModule); - } catch (e) { - // Try again but with the other type of module. + for (const configName of PREVIEW_CONFIG_NAMES) { + const configPath = path.join(rootDir, configName); + const configFileExists = fs.existsSync(configPath); + if (configFileExists) { try { - return await loadModule(configPath, !isModule); - } catch { - // Throw the original error if not working. - throw new Error(`Unable to read preview.config.js:\n${e}`); + const loaded = await loadConfigFromFile( + { + command: "serve", + mode: "development", + }, + configName, + rootDir, + logLevel + ); + if (loaded) { + config = loaded.config as Partial; + break; + } + } catch (e: any) { + if ( + typeof e.message === "string" && + e.message.includes("config must export or return an object") + ) { + throw new Error(`Please use a default export in preview.config.js`); + } else { + throw e; + } } } } @@ -37,17 +53,3 @@ export async function readConfig(rootDir: string): Promise { ...config, }; } - -async function loadModule(configPath: string, asModule: boolean) { - if (asModule) { - const module = await import( - `${url.pathToFileURL(configPath).href}?ts=${Date.now()}` - ); - return module.default || module; - } else { - // Delete any existing cache so we reload the config fresh. - delete require.cache[require.resolve(configPath)]; - const required = require(configPath); - return required.module || required; - } -} diff --git a/core/src/vite/vite-manager.ts b/core/src/vite/vite-manager.ts index e523a199031..e10372f07f4 100644 --- a/core/src/vite/vite-manager.ts +++ b/core/src/vite/vite-manager.ts @@ -1,7 +1,7 @@ import viteTsconfigPaths from "@fwouts/vite-tsconfig-paths"; import { decodePreviewableId } from "@previewjs/analyzer-api"; import { - PREVIEW_CONFIG_NAME, + PREVIEW_CONFIG_NAMES, readConfig, type PreviewConfig, } from "@previewjs/config"; @@ -62,7 +62,7 @@ const GLOBAL_CSS_FILE = GLOBAL_CSS_FILE_NAMES_WITHOUT_EXT.flatMap((fileName) => ); const FILES_REQUIRING_VITE_RESTART = new Set([ - PREVIEW_CONFIG_NAME, + ...PREVIEW_CONFIG_NAMES, ...FILES_REQUIRING_REDETECTION, ...POSTCSS_CONFIG_FILE, ...GLOBAL_CSS_FILE, @@ -251,7 +251,10 @@ export class ViteManager { // PostCSS requires the current directory to change because it relies // on the `import-cwd` package to resolve plugins. process.chdir(this.options.rootDir); - const configFromProject = await readConfig(this.options.rootDir); + const configFromProject = await readConfig( + this.options.rootDir, + viteLogLevelFromPinoLogger(this.options.logger) + ); const globalCssAbsoluteFilePaths = await findFiles( this.options.rootDir, `**/@(${GLOBAL_CSS_FILE_NAMES_WITHOUT_EXT.join( diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/package.json b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json similarity index 82% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/package.json rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json index 83c9ce5e097..c901c369bca 100644 --- a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/package.json +++ b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json @@ -1,8 +1,7 @@ { - "name": "react-test-app-wrapper-custom-esm-named-exports-config", + "name": "react-test-app-wrapper-custom", "license": "MIT", "private": true, - "type": "module", "scripts": { "start": "react-scripts start" }, diff --git a/framework-plugins/react/tests/apps/wrapper-custom-config-ts/preview.config.ts b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/preview.config.ts new file mode 100644 index 00000000000..6e56f09903b --- /dev/null +++ b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/preview.config.ts @@ -0,0 +1,7 @@ +/** @type {import("@previewjs/config").PreviewConfig} */ +export default { + wrapper: { + path: "src/Wrapper.js", + componentName: "Around", + }, +}; diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/public/index.html b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/public/index.html similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/public/index.html rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/public/index.html diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/App.css b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/App.css similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/App.css rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/App.css diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/App.tsx b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/App.tsx similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/App.tsx rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/App.tsx diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/App_screenshot_linux.png b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/App_screenshot_linux.png similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/App_screenshot_linux.png rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/App_screenshot_linux.png diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/Wrapper.js b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/Wrapper.js similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/Wrapper.js rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/Wrapper.js diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/index.css b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/index.css similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/index.css rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/index.css diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/index.tsx b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/index.tsx similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/index.tsx rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/index.tsx diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/logo.svg b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/logo.svg similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/logo.svg rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/logo.svg diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/react-app-env.d.ts b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/react-app-env.d.ts similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/src/react-app-env.d.ts rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/src/react-app-env.d.ts diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/tsconfig.json b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/tsconfig.json similarity index 100% rename from framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/tsconfig.json rename to framework-plugins/react/tests/apps/wrapper-custom-config-ts/tsconfig.json diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/preview.config.js b/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/preview.config.js deleted file mode 100644 index 58838bd614c..00000000000 --- a/framework-plugins/react/tests/apps/wrapper-custom-esm-named-exports-config/preview.config.js +++ /dev/null @@ -1,4 +0,0 @@ -export const wrapper = { - path: "src/Wrapper.js", - componentName: "Around", -}; diff --git a/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js b/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js index 3466a9adca6..6e56f09903b 100644 --- a/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js +++ b/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js @@ -1,5 +1,5 @@ /** @type {import("@previewjs/config").PreviewConfig} */ -module.exports = { +export default { wrapper: { path: "src/Wrapper.js", componentName: "Around", diff --git a/framework-plugins/react/tests/smoke-tests.spec.ts b/framework-plugins/react/tests/smoke-tests.spec.ts index 6366dd30cf7..f4314c0a41c 100644 --- a/framework-plugins/react/tests/smoke-tests.spec.ts +++ b/framework-plugins/react/tests/smoke-tests.spec.ts @@ -60,7 +60,7 @@ test.describe.parallel("smoke tests", () => { "vite-without-svgr": ["src/App.tsx:App"], "wrapper-custom": ["src/App.tsx:App"], "wrapper-custom-esm": ["src/App.tsx:App"], - "wrapper-custom-esm-named-exports-config": ["src/App.tsx:App"], + "wrapper-custom-config-ts": ["src/App.tsx:App"], "wrapper-default": ["src/App.tsx:App"], }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08b1cd4952d..3fbf49d6a7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -266,6 +266,10 @@ importers: version: 4.4.11(@types/node@20.8.2) config: + dependencies: + vite: + specifier: ^4.4.11 + version: 4.4.11(@types/node@20.8.2) devDependencies: '@types/node': specifier: ^20.8.2 @@ -276,9 +280,6 @@ importers: unbuild: specifier: ^2.0.0 version: 2.0.0(typescript@5.2.2) - vite: - specifier: ^4.4.11 - version: 4.4.11(@types/node@20.8.2) config-helpers/nextjs: devDependencies: @@ -5729,6 +5730,7 @@ packages: dependencies: '@babel/core': 7.22.20 '@babel/helper-plugin-utils': 7.22.5 + dev: false /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.21.4): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} @@ -6057,7 +6059,6 @@ packages: dependencies: '@babel/core': 7.22.10 '@babel/helper-plugin-utils': 7.22.5 - dev: false /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.20): resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==} @@ -7736,7 +7737,6 @@ packages: '@babel/helper-create-class-features-plugin': 7.22.10(@babel/core@7.22.10) '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10) - dev: false /@babel/plugin-transform-typescript@7.22.10(@babel/core@7.22.20): resolution: {integrity: sha512-7++c8I/ymsDo4QQBAgbraXLzIM6jmfao11KgIBEYZRReWzNWH9NtNgJcyrZiXsOPh523FQm6LfpLyy/U5fn46A==} @@ -7749,6 +7749,7 @@ packages: '@babel/helper-create-class-features-plugin': 7.22.10(@babel/core@7.22.20) '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.20) + dev: false /@babel/plugin-transform-unicode-escapes@7.18.10(@babel/core@7.21.4): resolution: {integrity: sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==} @@ -8417,24 +8418,6 @@ packages: '@babel/parser': 7.22.10 '@babel/types': 7.22.10 - /@babel/traverse@7.21.5: - resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/code-frame': 7.22.13 - '@babel/generator': 7.22.15 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.22.5 - '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.22.16 - '@babel/types': 7.22.19 - debug: 4.3.4(supports-color@5.5.0) - globals: 11.12.0 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/traverse@7.21.5(supports-color@5.5.0): resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==} engines: {node: '>=6.9.0'} @@ -8451,7 +8434,6 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color - dev: false /@babel/traverse@7.22.10: resolution: {integrity: sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==} @@ -16302,7 +16284,7 @@ packages: dependencies: '@babel/generator': 7.21.9 '@babel/parser': 7.21.9 - '@babel/traverse': 7.21.5 + '@babel/traverse': 7.21.5(supports-color@5.5.0) '@babel/types': 7.21.5 '@storybook/csf': 0.1.0 '@storybook/types': 7.0.17 @@ -19818,9 +19800,9 @@ packages: vite: ^4.0.0 vue: ^3.0.0 dependencies: - '@babel/core': 7.22.20 - '@babel/plugin-transform-typescript': 7.22.10(@babel/core@7.22.20) - '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.22.20) + '@babel/core': 7.22.10 + '@babel/plugin-transform-typescript': 7.22.10(@babel/core@7.22.10) + '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.22.10) vite: 4.0.4(@types/node@20.8.2) vue: 3.3.4 transitivePeerDependencies: @@ -19834,9 +19816,9 @@ packages: vite: ^4.0.0 vue: ^3.0.0 dependencies: - '@babel/core': 7.22.20 - '@babel/plugin-transform-typescript': 7.22.10(@babel/core@7.22.20) - '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.22.20) + '@babel/core': 7.22.10 + '@babel/plugin-transform-typescript': 7.22.10(@babel/core@7.22.10) + '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.22.10) vite: 4.3.9(@types/node@20.8.2) vue: 3.3.4 transitivePeerDependencies: @@ -20134,26 +20116,6 @@ packages: svg-tags: 1.0.0 transitivePeerDependencies: - supports-color - dev: false - - /@vue/babel-plugin-jsx@1.1.5(@babel/core@7.22.20): - resolution: {integrity: sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.22.20 - '@babel/helper-module-imports': 7.22.5 - '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.20) - '@babel/template': 7.22.5 - '@babel/traverse': 7.22.10 - '@babel/types': 7.22.10 - '@vue/babel-helper-vue-transform-on': 1.1.5 - camelcase: 6.3.0 - html-tags: 3.3.1 - svg-tags: 1.0.0 - transitivePeerDependencies: - - supports-color - dev: true /@vue/babel-plugin-transform-vue-jsx@1.4.0(@babel/core@7.22.10): resolution: {integrity: sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==} From 940cc7feff6ecd9d864198b2794536089d1b49ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 6 Oct 2023 08:32:13 +1100 Subject: [PATCH 2/5] Update package.json --- .../react/tests/apps/wrapper-custom-config-ts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json index c901c369bca..fa09ad312d0 100644 --- a/framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json +++ b/framework-plugins/react/tests/apps/wrapper-custom-config-ts/package.json @@ -1,5 +1,5 @@ { - "name": "react-test-app-wrapper-custom", + "name": "react-test-app-wrapper-custom-config-ts", "license": "MIT", "private": true, "scripts": { From 9fc629d0afcfdbdc7f9ce79f876112cfbbfec8cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 6 Oct 2023 08:36:35 +1100 Subject: [PATCH 3/5] add defineConfig() --- config/src/config.ts | 6 +++++- config/src/index.ts | 1 + config/src/read-config.ts | 6 +----- core/src/vite/vite-manager.ts | 3 ++- .../react/tests/apps/wrapper-custom-esm/preview.config.js | 7 ++++--- .../react/tests/apps/wrapper-custom/preview.config.js | 7 ++++--- 6 files changed, 17 insertions(+), 13 deletions(-) diff --git a/config/src/config.ts b/config/src/config.ts index 1bfe20bf66d..f3d0822a4b1 100644 --- a/config/src/config.ts +++ b/config/src/config.ts @@ -1,9 +1,13 @@ import type { UserConfig } from "vite"; +export function defineConfig(config: PreviewConfig) { + return config; +} + export interface PreviewConfig { /** @deprecated Use the `vite.resolve.alias` field instead. */ alias?: Record; - publicDir: string; + publicDir?: string; wrapper?: { path: string; componentName?: string; diff --git a/config/src/index.ts b/config/src/index.ts index 6d95ab7da25..c382ed1458c 100644 --- a/config/src/index.ts +++ b/config/src/index.ts @@ -1,2 +1,3 @@ +export { defineConfig } from "./config"; export type { PreviewConfig } from "./config"; export { PREVIEW_CONFIG_NAMES, readConfig } from "./read-config"; diff --git a/config/src/read-config.ts b/config/src/read-config.ts index 27301005b72..25837b26745 100644 --- a/config/src/read-config.ts +++ b/config/src/read-config.ts @@ -47,9 +47,5 @@ export async function readConfig( } } } - return { - alias: {}, - publicDir: "public", - ...config, - }; + return config; } diff --git a/core/src/vite/vite-manager.ts b/core/src/vite/vite-manager.ts index e10372f07f4..c16bb2aad8c 100644 --- a/core/src/vite/vite-manager.ts +++ b/core/src/vite/vite-manager.ts @@ -356,7 +356,8 @@ export class ViteManager { config.vite?.publicDir || existingViteConfig?.config.publicDir || frameworkPluginViteConfig.publicDir || - config.publicDir; + config.publicDir || + "public"; const plugins = replaceHandleHotUpdate( this.options.reader, await flattenPlugins([ diff --git a/framework-plugins/react/tests/apps/wrapper-custom-esm/preview.config.js b/framework-plugins/react/tests/apps/wrapper-custom-esm/preview.config.js index 6e56f09903b..691c9e4b744 100644 --- a/framework-plugins/react/tests/apps/wrapper-custom-esm/preview.config.js +++ b/framework-plugins/react/tests/apps/wrapper-custom-esm/preview.config.js @@ -1,7 +1,8 @@ -/** @type {import("@previewjs/config").PreviewConfig} */ -export default { +import { defineConfig } from "@previewjs/config"; + +export default defineConfig({ wrapper: { path: "src/Wrapper.js", componentName: "Around", }, -}; +}); diff --git a/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js b/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js index 6e56f09903b..691c9e4b744 100644 --- a/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js +++ b/framework-plugins/react/tests/apps/wrapper-custom/preview.config.js @@ -1,7 +1,8 @@ -/** @type {import("@previewjs/config").PreviewConfig} */ -export default { +import { defineConfig } from "@previewjs/config"; + +export default defineConfig({ wrapper: { path: "src/Wrapper.js", componentName: "Around", }, -}; +}); From 093bfaccd6654cbfd9197c9e730a1b532399ede5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 6 Oct 2023 08:43:38 +1100 Subject: [PATCH 4/5] Update config.ts --- config/src/config.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/config/src/config.ts b/config/src/config.ts index f3d0822a4b1..53f1d4c535b 100644 --- a/config/src/config.ts +++ b/config/src/config.ts @@ -1,7 +1,11 @@ import type { UserConfig } from "vite"; export function defineConfig(config: PreviewConfig) { - return config; + return { + // Note: this can be removed after Feb 2024. + publicDir: "public", + ...config, + }; } export interface PreviewConfig { From c071df09d48839d51a27769edb7470d79abfbb27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Fri, 6 Oct 2023 21:59:22 +1100 Subject: [PATCH 5/5] cleanup --- config/build.config.ts | 3 +++ config/package.json | 11 +++++++++-- core/src/html-error.ts | 15 ++++++++------- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/config/build.config.ts b/config/build.config.ts index d32be9c5fc5..8c8b505671c 100644 --- a/config/build.config.ts +++ b/config/build.config.ts @@ -3,4 +3,7 @@ export default { externals: ["vite"], declaration: true, clean: true, + rollup: { + emitCJS: true, + }, }; diff --git a/config/package.json b/config/package.json index 2a423a2d56f..ed8258bd684 100644 --- a/config/package.json +++ b/config/package.json @@ -14,9 +14,16 @@ "url": "https://github.com/fwouts/previewjs/issues" }, "homepage": "https://previewjs.com", - "type": "module", - "main": "./dist/index.mjs", + "main": "./dist/index.cjs", + "module": "./dist/index.mjs", "types": "./dist/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.cjs", + "import": "./dist/index.mjs", + "types": "./dist/index.d.ts" + } + }, "sideEffects": false, "scripts": { "build": "tsc && unbuild" diff --git a/core/src/html-error.ts b/core/src/html-error.ts index 4dcf684beed..80d4d57be07 100644 --- a/core/src/html-error.ts +++ b/core/src/html-error.ts @@ -1,24 +1,25 @@ import { escape } from "html-escaper"; export function generateHtmlError(message: string) { + if (message.startsWith("Error: Build failed with 1 error:\n")) { + message = message.substring(message.indexOf("\n") + 1); + } return ` - - 
${escape(message)}
- + ${escape(message.trim())} `; }