From 3dd5ad3f7140e4afd3edd7db3271429c7eab7650 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 16 Aug 2021 11:14:43 +0800 Subject: [PATCH 1/7] feat: add config tests --- .../__tests__/configfile-custom.spec.ts | 13 ++++++++++++- .../configfile-esm/__tests__/configfile-esm.spec.ts | 13 ++++++++++++- .../configfile-esm/svelte.config.custom.cjs | 5 +++++ packages/e2e-tests/hmr/__tests__/hmr.spec.ts | 8 +++----- packages/e2e-tests/testUtils.ts | 7 +++++++ 5 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 packages/e2e-tests/configfile-esm/svelte.config.custom.cjs diff --git a/packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts b/packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts index 7c4eb1bec..64d219b0c 100644 --- a/packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts +++ b/packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts @@ -1,4 +1,15 @@ -it('should load config and work', async () => { +import { editViteConfig } from 'testUtils'; + +it('should load default config and work', async () => { + expect(await page.textContent('h1')).toMatch('Hello world!'); + expect(await page.textContent('#test-child')).toBe('test-child'); + expect(await page.textContent('#dependency-import')).toBe('dependency-import'); +}); + +it('should load custom mjs config and work', async () => { + await editViteConfig((c) => + c.replace('svelte()', `svelte({configFile:'svelte.config.custom.cjs'})`) + ); expect(await page.textContent('h1')).toMatch('Hello world!'); expect(await page.textContent('#test-child')).toBe('test-child'); expect(await page.textContent('#dependency-import')).toBe('dependency-import'); diff --git a/packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts b/packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts index 7c4eb1bec..ab17b043b 100644 --- a/packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts +++ b/packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts @@ -1,4 +1,15 @@ -it('should load config and work', async () => { +import { editViteConfig } from 'testUtils'; + +it('should load default config and work', async () => { + expect(await page.textContent('h1')).toMatch('Hello world!'); + expect(await page.textContent('#test-child')).toBe('test-child'); + expect(await page.textContent('#dependency-import')).toBe('dependency-import'); +}); + +it('should load custom cjs config and work', async () => { + await editViteConfig((c) => + c.replace('svelte()', `svelte({configFile:'svelte.config.custom.cjs'})`) + ); expect(await page.textContent('h1')).toMatch('Hello world!'); expect(await page.textContent('#test-child')).toBe('test-child'); expect(await page.textContent('#dependency-import')).toBe('dependency-import'); diff --git a/packages/e2e-tests/configfile-esm/svelte.config.custom.cjs b/packages/e2e-tests/configfile-esm/svelte.config.custom.cjs new file mode 100644 index 000000000..c78d4fe57 --- /dev/null +++ b/packages/e2e-tests/configfile-esm/svelte.config.custom.cjs @@ -0,0 +1,5 @@ +const sveltePreprocess = require('svelte-preprocess'); + +module.exports = { + preprocess: sveltePreprocess() +}; diff --git a/packages/e2e-tests/hmr/__tests__/hmr.spec.ts b/packages/e2e-tests/hmr/__tests__/hmr.spec.ts index cf217b5d8..ffa70f725 100644 --- a/packages/e2e-tests/hmr/__tests__/hmr.spec.ts +++ b/packages/e2e-tests/hmr/__tests__/hmr.spec.ts @@ -9,7 +9,8 @@ import { getColor, editFile, addFile, - removeFile + removeFile, + editViteConfig } from '../../testUtils'; test('should render App', async () => { @@ -123,10 +124,7 @@ if (!isBuild) { }); test('should work with emitCss: false', async () => { - await editFile('vite.config.js', (c) => c.replace('svelte()', 'svelte({emitCss:false})')); - await sleep(isWin ? 1000 : 500); // editing vite config restarts server, give it some time - await page.goto(viteTestUrl, { waitUntil: 'networkidle' }); - await sleep(50); + await editViteConfig((c) => c.replace('svelte()', 'svelte({emitCss:false})')); expect(await getText(`#hmr-test-1 .counter`)).toBe('0'); expect(await getColor(`#hmr-test-1 .label`)).toBe('green'); await (await getEl(`#hmr-test-1 .increment`)).click(); diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts index 0efd440d8..87cbf110f 100644 --- a/packages/e2e-tests/testUtils.ts +++ b/packages/e2e-tests/testUtils.ts @@ -196,3 +196,10 @@ export async function saveScreenshot(name?: string) { console.log('failed to take screenshot', e); } } + +export async function editViteConfig(replacer: (str: string) => string) { + editFile('vite.config.js', replacer); + await sleep(isWin ? 1000 : 500); // editing vite config restarts server, give it some time + await page.goto(viteTestUrl, { waitUntil: 'networkidle' }); + await sleep(50); +} From 4d662debfda91cf7d7c2a86d2a9266671c2792da Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 16 Aug 2021 11:25:10 +0800 Subject: [PATCH 2/7] feat: try import cjs config --- packages/vite-plugin-svelte/src/utils/load-svelte-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts index 1705f8153..01f04683f 100644 --- a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts +++ b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts @@ -27,7 +27,7 @@ export async function loadSvelteConfig( if (configFile) { let err; // try to use dynamic import for svelte.config.js first - if (configFile.endsWith('.js') || configFile.endsWith('.mjs')) { + if (configFile.endsWith('.js') || configFile.endsWith('.mjs') || configFile.endsWith('.cjs')) { try { const result = await dynamicImportDefault(pathToFileURL(configFile).href); if (result != null) { From 4980dd238155e1573f03843c90e61149effb7096 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 16 Aug 2021 11:30:56 +0800 Subject: [PATCH 3/7] add changeset --- .changeset/fuzzy-mails-brush.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fuzzy-mails-brush.md diff --git a/.changeset/fuzzy-mails-brush.md b/.changeset/fuzzy-mails-brush.md new file mode 100644 index 000000000..78ec86c87 --- /dev/null +++ b/.changeset/fuzzy-mails-brush.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +also try load cjs config From ca46019a62b2be88077df183624e78b91073b94b Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 16 Aug 2021 12:02:08 +0800 Subject: [PATCH 4/7] fix: change cjs loading strategy --- .../src/utils/load-svelte-config.ts | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts index 01f04683f..93b359f63 100644 --- a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts +++ b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts @@ -1,3 +1,4 @@ +import { createRequire } from 'module'; import path from 'path'; import fs from 'fs'; import { pathToFileURL } from 'url'; @@ -5,6 +6,8 @@ import { log } from './log'; import { Options } from './options'; import { UserConfig } from 'vite'; +const _require = createRequire(import.meta.url); + export const knownSvelteConfigNames = [ 'svelte.config.js', 'svelte.config.cjs', @@ -27,7 +30,7 @@ export async function loadSvelteConfig( if (configFile) { let err; // try to use dynamic import for svelte.config.js first - if (configFile.endsWith('.js') || configFile.endsWith('.mjs') || configFile.endsWith('.cjs')) { + if (configFile.endsWith('.js') || configFile.endsWith('.mjs')) { try { const result = await dynamicImportDefault(pathToFileURL(configFile).href); if (result != null) { @@ -44,6 +47,27 @@ export async function loadSvelteConfig( } } // cjs or error with dynamic import + if (!configFile.endsWith('.mjs')) { + try { + // avoid loading cached version on reload + delete _require.cache[_require.resolve(configFile)]; + const result = _require(configFile); + if (result != null) { + return { + ...result, + configFile + }; + } else { + throw new Error(`invalid export in ${configFile}`); + } + } catch (e) { + log.error(`failed to require config ${configFile}`, e); + if (!err) { + err = e; + } + } + } + // cjs but project is using `type: module` if (!configFile.endsWith('.mjs')) { try { // avoid loading cached version on reload From f866be945e87200f0f50b37d38d95cb950c65969 Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 16 Aug 2021 12:53:28 +0800 Subject: [PATCH 5/7] fix: really load cjs config --- .../src/utils/load-svelte-config.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts index 93b359f63..511b8f043 100644 --- a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts +++ b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts @@ -6,7 +6,10 @@ import { log } from './log'; import { Options } from './options'; import { UserConfig } from 'vite'; -const _require = createRequire(import.meta.url); +// used to require cjs config in esm. +// NOTE dynamic import() cjs technically works, but timestamp query cache bust +// have no effect, likely because it has another internal cache? +let _require: NodeRequire; export const knownSvelteConfigNames = [ 'svelte.config.js', @@ -50,8 +53,8 @@ export async function loadSvelteConfig( if (!configFile.endsWith('.mjs')) { try { // avoid loading cached version on reload - delete _require.cache[_require.resolve(configFile)]; - const result = _require(configFile); + delete require.cache[require.resolve(configFile)]; + const result = require(configFile); if (result != null) { return { ...result, @@ -68,11 +71,14 @@ export async function loadSvelteConfig( } } // cjs but project is using `type: module` - if (!configFile.endsWith('.mjs')) { + if (!configFile.endsWith('.mjs') && import.meta.url) { try { + if (!_require) { + _require = createRequire(import.meta.url); + } // avoid loading cached version on reload - delete require.cache[require.resolve(configFile)]; - const result = require(configFile); + delete _require.cache[_require.resolve(configFile)]; + const result = _require(configFile); if (result != null) { return { ...result, From c11a838affce5d4e0a614d516ea2de1177ab453c Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 16 Aug 2021 13:19:58 +0800 Subject: [PATCH 6/7] refactor: load cjs config --- .../src/utils/load-svelte-config.ts | 31 ++++--------------- 1 file changed, 6 insertions(+), 25 deletions(-) diff --git a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts index 511b8f043..0179b56fd 100644 --- a/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts +++ b/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts @@ -9,7 +9,7 @@ import { UserConfig } from 'vite'; // used to require cjs config in esm. // NOTE dynamic import() cjs technically works, but timestamp query cache bust // have no effect, likely because it has another internal cache? -let _require: NodeRequire; +let esmRequire: NodeRequire; export const knownSvelteConfigNames = [ 'svelte.config.js', @@ -52,30 +52,11 @@ export async function loadSvelteConfig( // cjs or error with dynamic import if (!configFile.endsWith('.mjs')) { try { - // avoid loading cached version on reload - delete require.cache[require.resolve(configFile)]; - const result = require(configFile); - if (result != null) { - return { - ...result, - configFile - }; - } else { - throw new Error(`invalid export in ${configFile}`); - } - } catch (e) { - log.error(`failed to require config ${configFile}`, e); - if (!err) { - err = e; - } - } - } - // cjs but project is using `type: module` - if (!configFile.endsWith('.mjs') && import.meta.url) { - try { - if (!_require) { - _require = createRequire(import.meta.url); - } + // identify which require function to use (esm and cjs mode) + const _require = import.meta.url + ? (esmRequire ??= createRequire(import.meta.url)) + : require; + // avoid loading cached version on reload delete _require.cache[_require.resolve(configFile)]; const result = _require(configFile); From e780e5d5e1d065bf9c9428ff0a480fa40003d7d5 Mon Sep 17 00:00:00 2001 From: dominikg Date: Mon, 16 Aug 2021 12:16:52 +0200 Subject: [PATCH 7/7] docs: improve changeset description --- .changeset/fuzzy-mails-brush.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fuzzy-mails-brush.md b/.changeset/fuzzy-mails-brush.md index 78ec86c87..48e565d53 100644 --- a/.changeset/fuzzy-mails-brush.md +++ b/.changeset/fuzzy-mails-brush.md @@ -2,4 +2,4 @@ '@sveltejs/vite-plugin-svelte': patch --- -also try load cjs config +use createRequire to load svelte.config.cjs in esm projects (fixes #141)