From a1dd21d4150bac011162999f4bf06f8663a8d849 Mon Sep 17 00:00:00 2001 From: Dominik G Date: Tue, 14 Nov 2023 23:45:50 +0100 Subject: [PATCH] chore: cleanup (#787) * wip: clean up some things * feat: add vite-plugin-svelte-module * wip: add svelte module support to prebundling * fix: update to lastest changes and remove link * chore reenable prettier/eslint and fix findings * fix: remove runes option * fix: add types * fix: remove missing svelte5 exports workaround * refactor: consolidate svelte5 warnings into a single log * chore: enable running e2e tests with svelte5, update ci setup, add improve svelte5 generated vite config * fix workflow * fix: use correct comparison value for load-raw server output in svelte5 --- .changeset/thin-comics-work.md | 5 + .eslintrc.cjs | 6 +- .github/workflows/ci.yml | 15 +- .../_test_dependencies/svelte-module/index.js | 2 + .../svelte-module/package.json | 19 + .../svelte-module/src/counter/Counter.svelte | 13 + .../src/counter/Counter.svelte.js | 11 + .../autoprefixer-browerslist.spec.ts | 8 +- .../autoprefixer-browerslist/src/main.js | 10 +- .../e2e-tests/configfile-custom/src/main.js | 10 +- packages/e2e-tests/configfile-esm/src/main.js | 10 +- .../__tests__/css-dev-sourcemap.spec.ts | 17 +- .../e2e-tests/css-dev-sourcemap/src/main.js | 10 +- .../css-none/__tests__/css-none.spec.ts | 33 +- packages/e2e-tests/css-none/src/main.js | 10 +- .../e2e-tests/custom-extensions/src/main.js | 10 +- .../dynamic-compile-options/src/main.js | 10 +- packages/e2e-tests/env/src/main.js | 10 +- packages/e2e-tests/hmr/src/index.js | 10 +- .../__tests__/__snapshots__/svelte-3/all.txt | 490 --------- .../__snapshots__/svelte-3/custom-element.txt | 121 --- .../__snapshots__/svelte-3/direct-css.txt | 3 - .../__snapshots__/svelte-3/direct-js.txt | 82 -- .../__snapshots__/svelte-3/mixed-all.txt | 12 - .../svelte-3/mixed-preprocessed.txt | 4 - .../__snapshots__/svelte-3/mixed-script.txt | 3 - .../__snapshots__/svelte-3/mixed-style.txt | 3 - .../__snapshots__/svelte-3/script.txt | 80 -- .../svelte-3/ssr-custom-element.txt | 121 --- .../__snapshots__/svelte-3/ssr-script.txt | 80 -- .../__snapshots__/svelte-3/ssr-style.txt | 1 - .../__snapshots__/svelte-3/style.txt | 1 - .../__tests__/__snapshots__/svelte-5/all.txt | 52 + .../__snapshots__/svelte-5/custom-element.txt | 42 + .../__snapshots__/svelte-5/direct-css.txt | 5 + .../__snapshots__/svelte-5/direct-js.txt | 16 + .../__snapshots__/svelte-5/mixed-all.txt | 10 + .../svelte-5/mixed-preprocessed.txt | 4 + .../__snapshots__/svelte-5/mixed-script.txt | 3 + .../__snapshots__/svelte-5/mixed-style.txt | 3 + .../{svelte-3 => svelte-5}/preprocessed.txt | 0 .../{svelte-3 => svelte-5}/raw.txt | 0 .../__snapshots__/svelte-5/script.txt | 29 + .../svelte-5/ssr-custom-element.txt | 14 + .../ssr-preprocessed.txt | 0 .../{svelte-3 => svelte-5}/ssr-raw.txt | 0 .../__snapshots__/svelte-5/ssr-script.txt | 14 + .../__snapshots__/svelte-5/ssr-style.txt | 3 + .../__snapshots__/svelte-5/style.txt | 3 + .../__tests__/import-queries.spec.ts | 4 +- packages/e2e-tests/import-queries/src/main.js | 10 +- packages/e2e-tests/inspector-vite/src/main.js | 10 +- .../e2e-tests/kit-node/__tests__/kit.spec.ts | 52 +- .../package-json-svelte-field/src/main.js | 10 +- .../prebundle-svelte-deps/src/main.js | 10 +- .../preprocess-with-vite/src/index.ts | 12 +- .../resolve-exports-svelte/src/main.js | 10 +- .../resolve-exports-svelte/vite.config.js | 2 +- .../e2e-tests/svelte-preprocess/src/main.ts | 10 +- .../e2e-tests/svelte-preprocess/tsconfig.json | 3 +- packages/e2e-tests/testUtils.ts | 4 +- .../__tests__/ts-type-import.spec.ts | 2 +- .../e2e-tests/ts-type-import/src/index.ts | 11 +- .../__tests__/vite-ssr-esm.spec.ts | 3 +- .../vite-ssr-esm/src/entry-client.js | 29 +- .../vite-ssr-esm/src/entry-server.js | 13 +- packages/playground/basic/.gitignore | 24 + packages/playground/basic/README.md | 3 + packages/playground/basic/index.html | 13 + packages/playground/basic/jsconfig.json | 32 + packages/playground/basic/package.json | 17 + packages/playground/basic/public/vite.svg | 1 + packages/playground/basic/src/App.svelte | 63 ++ packages/playground/basic/src/app.css | 79 ++ .../playground/basic/src/assets/svelte.svg | 1 + .../playground/basic/src/lib/Counter.svelte | 13 + .../basic/src/lib/Counter.svelte.js | 11 + packages/playground/basic/src/main.js | 19 + packages/playground/basic/src/vite-env.d.ts | 2 + packages/playground/basic/svelte.config.js | 7 + packages/playground/basic/vite.config.js | 10 + packages/vite-plugin-svelte/package.json | 2 +- packages/vite-plugin-svelte/src/index.js | 44 +- packages/vite-plugin-svelte/src/public.d.ts | 8 + packages/vite-plugin-svelte/src/types/id.d.ts | 14 + .../vite-plugin-svelte/src/utils/compile.js | 12 +- .../vite-plugin-svelte/src/utils/constants.js | 7 + .../vite-plugin-svelte/src/utils/esbuild.js | 29 +- packages/vite-plugin-svelte/src/utils/id.js | 46 + .../vite-plugin-svelte/src/utils/load-raw.js | 8 +- packages/vite-plugin-svelte/src/utils/log.js | 12 +- .../vite-plugin-svelte/src/utils/options.js | 5 + .../src/utils/svelte-version.js | 7 +- packages/vite-plugin-svelte/types/index.d.ts | 8 + .../vite-plugin-svelte/types/index.d.ts.map | 2 +- pnpm-lock.yaml | 981 ++++++++---------- vitest.config.e2e.ts | 11 +- vitest.config.ts | 2 +- 98 files changed, 1363 insertions(+), 1743 deletions(-) create mode 100644 .changeset/thin-comics-work.md create mode 100644 packages/e2e-tests/_test_dependencies/svelte-module/index.js create mode 100644 packages/e2e-tests/_test_dependencies/svelte-module/package.json create mode 100644 packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte create mode 100644 packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/all.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/custom-element.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-css.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-js.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-all.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-preprocessed.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-script.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-style.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/script.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-custom-element.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-script.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-style.txt delete mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/style.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/all.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/custom-element.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-css.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-js.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-all.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-preprocessed.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-script.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-style.txt rename packages/e2e-tests/import-queries/__tests__/__snapshots__/{svelte-3 => svelte-5}/preprocessed.txt (100%) rename packages/e2e-tests/import-queries/__tests__/__snapshots__/{svelte-3 => svelte-5}/raw.txt (100%) create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/script.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-custom-element.txt rename packages/e2e-tests/import-queries/__tests__/__snapshots__/{svelte-3 => svelte-5}/ssr-preprocessed.txt (100%) rename packages/e2e-tests/import-queries/__tests__/__snapshots__/{svelte-3 => svelte-5}/ssr-raw.txt (100%) create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-script.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-style.txt create mode 100644 packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/style.txt create mode 100644 packages/playground/basic/.gitignore create mode 100644 packages/playground/basic/README.md create mode 100644 packages/playground/basic/index.html create mode 100644 packages/playground/basic/jsconfig.json create mode 100644 packages/playground/basic/package.json create mode 100644 packages/playground/basic/public/vite.svg create mode 100644 packages/playground/basic/src/App.svelte create mode 100644 packages/playground/basic/src/app.css create mode 100644 packages/playground/basic/src/assets/svelte.svg create mode 100644 packages/playground/basic/src/lib/Counter.svelte create mode 100644 packages/playground/basic/src/lib/Counter.svelte.js create mode 100644 packages/playground/basic/src/main.js create mode 100644 packages/playground/basic/src/vite-env.d.ts create mode 100644 packages/playground/basic/svelte.config.js create mode 100644 packages/playground/basic/vite.config.js diff --git a/.changeset/thin-comics-work.md b/.changeset/thin-comics-work.md new file mode 100644 index 000000000..f95feeffc --- /dev/null +++ b/.changeset/thin-comics-work.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': minor +--- + +Add experimental support for svelte5 diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 15b0ef8cd..15b757e0b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -9,7 +9,11 @@ module.exports = { ], globals: { Atomics: 'readonly', - SharedArrayBuffer: 'readonly' + SharedArrayBuffer: 'readonly', + $derived: 'readonly', + $effect: 'readonly', + $props: 'readonly', + $state: 'readonly' }, plugins: ['@typescript-eslint', 'html', 'markdown', 'unicorn'], parser: '@typescript-eslint/parser', diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 89106c355..a5fc84222 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,4 +1,4 @@ -# build and test on linux, windows, mac with node 14, 16, 18 +# build and test on linux, windows, mac with node 18,20 name: CI on: @@ -76,11 +76,17 @@ jobs: strategy: fail-fast: false matrix: - node: [18] + node: [20] os: [ubuntu-latest, macos-latest, windows-latest] + svelte: [4] include: - - node: 20 + - node: 18 os: ubuntu-latest + svelte: 4 + # disable running tests with svelte5 in ci for now. Enable once they pass + # - node: 20 + # os: ubuntu-latest + # svelte: 5 steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 @@ -99,6 +105,9 @@ jobs: cache-dependency-path: '**/pnpm-lock.yaml' - name: install run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts + # - name: use svelte5 + # if: (${{matrix.svelte == 5 }}) + # run: pnpm i -Dw svelte@^5.0.0-next.1 && pnpm install - name: install playwright chromium run: pnpm playwright install chromium - name: run tests diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/index.js b/packages/e2e-tests/_test_dependencies/svelte-module/index.js new file mode 100644 index 000000000..12b8a556b --- /dev/null +++ b/packages/e2e-tests/_test_dependencies/svelte-module/index.js @@ -0,0 +1,2 @@ +export { createCounter } from './src/counter/Counter.svelte.js'; +export { default as Counter } from './src/counter/Counter.svelte'; diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/package.json b/packages/e2e-tests/_test_dependencies/svelte-module/package.json new file mode 100644 index 000000000..de58a775c --- /dev/null +++ b/packages/e2e-tests/_test_dependencies/svelte-module/package.json @@ -0,0 +1,19 @@ +{ + "version": "1.0.0", + "private": true, + "name": "e2e-test-dep-svelte-module", + "main": "index.js", + "svelte": "index.js", + "files": [ + "src", + "index.js" + ], + "exports": { + ".": { + "import": { + "svelte": "./index.js" + } + } + }, + "type": "module" +} diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte b/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte new file mode 100644 index 000000000..4bfb39d3e --- /dev/null +++ b/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js b/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js new file mode 100644 index 000000000..3fd8bdac0 --- /dev/null +++ b/packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js @@ -0,0 +1,11 @@ +export function createCounter(n = 0) { + let count = $state(n); + return { + get count() { + return count; + }, + increment() { + count++; + } + }; +} diff --git a/packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts b/packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts index a28538c81..ec9090f03 100644 --- a/packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts +++ b/packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts @@ -1,10 +1,14 @@ import { expect, test } from 'vitest'; -import { isBuild, findAssetFile, page } from '~utils'; +import { isBuild, findAssetFile, page, isSvelte4 } from '~utils'; test('should prefix position: sticky for code in source tree', async () => { - const stickyStyle = isBuild + let stickyStyle = isBuild ? await getStyleFromDist('sticky') : await getStyleFromPage(page, 'sticky'); + if (!isSvelte4) { + // svelte5 doesn't minify rules, do it here to be able to have one expect + stickyStyle = stickyStyle.replace(/\s/g, '').replace(/;$/, ''); + } expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky'); }); diff --git a/packages/e2e-tests/autoprefixer-browerslist/src/main.js b/packages/e2e-tests/autoprefixer-browerslist/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/autoprefixer-browerslist/src/main.js +++ b/packages/e2e-tests/autoprefixer-browerslist/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/configfile-custom/src/main.js b/packages/e2e-tests/configfile-custom/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/configfile-custom/src/main.js +++ b/packages/e2e-tests/configfile-custom/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/configfile-esm/src/main.js b/packages/e2e-tests/configfile-esm/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/configfile-esm/src/main.js +++ b/packages/e2e-tests/configfile-esm/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts b/packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts index 5f45eb26d..8b7e06bcf 100644 --- a/packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts +++ b/packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts @@ -1,4 +1,4 @@ -import { browserLogs, getColor, getText, isBuild } from '~utils'; +import { browserLogs, getColor, getText, isBuild, isSvelte4 } from '~utils'; import { expect } from 'vitest'; test('should not have failed requests', async () => { @@ -19,10 +19,17 @@ if (!isBuild) { const style = await getText('style[data-vite-dev-id*="App.svelte"]'); const lines = style.split('\n').map((l) => l.trim()); const css = lines[0]; - const mapComment = lines[1]; - expect(css).toBe( - '.foo.s-XsEmFtvddWTw{color:magenta}#test.s-XsEmFtvddWTw{color:red}.s-XsEmFtvddWTw{}' - ); + const mapComment = lines[lines.length - 1]; + if (isSvelte4) { + expect(css).toBe( + '.foo.s-XsEmFtvddWTw{color:magenta}#test.s-XsEmFtvddWTw{color:red}.s-XsEmFtvddWTw{}' + ); + } else { + // TODO svelte 5 returns style multiline and doesn't set the right css hash class + // figure out a better way to expect here + expect(style).toMatch('color: magenta'); + expect(style).toMatch('color: red'); + } const b64start = '/*# sourceMappingURL=data:application/json;base64,'; const b64end = ' */'; expect(mapComment.startsWith(b64start)); diff --git a/packages/e2e-tests/css-dev-sourcemap/src/main.js b/packages/e2e-tests/css-dev-sourcemap/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/css-dev-sourcemap/src/main.js +++ b/packages/e2e-tests/css-dev-sourcemap/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/css-none/__tests__/css-none.spec.ts b/packages/e2e-tests/css-none/__tests__/css-none.spec.ts index 4566a7d93..0bdc9fb48 100644 --- a/packages/e2e-tests/css-none/__tests__/css-none.spec.ts +++ b/packages/e2e-tests/css-none/__tests__/css-none.spec.ts @@ -1,19 +1,22 @@ -import { browserLogs, findAssetFile, getColor, getText, isBuild } from '~utils'; +import { browserLogs, findAssetFile, getColor, getText, isBuild, isSvelte4 } from '~utils'; +import { describe, test, expect } from 'vitest'; +// svelte5 removed the css: none option +describe.runIf(isSvelte4)('css-none', async () => { + test('should not have failed requests', async () => { + browserLogs.forEach((msg) => { + expect(msg).not.toMatch('404'); + }); + }); -test('should not have failed requests', async () => { - browserLogs.forEach((msg) => { - expect(msg).not.toMatch('404'); + test('should not apply component css', async () => { + expect(await getText('#test')).toBe('not red'); + expect(await getColor('#test')).not.toBe('red'); }); -}); -test('should not apply component css', async () => { - expect(await getText('#test')).toBe('not red'); - expect(await getColor('#test')).not.toBe('red'); + if (isBuild) { + test('should not output css', async () => { + const css = await findAssetFile(/index.*\.css/); + expect(css).toBe(''); // findAssetFile returns empty for not found + }); + } }); - -if (isBuild) { - test('should not output css', async () => { - const css = await findAssetFile(/index.*\.css/); - expect(css).toBe(''); // findAssetFile returns empty for not found - }); -} diff --git a/packages/e2e-tests/css-none/src/main.js b/packages/e2e-tests/css-none/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/css-none/src/main.js +++ b/packages/e2e-tests/css-none/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/custom-extensions/src/main.js b/packages/e2e-tests/custom-extensions/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/custom-extensions/src/main.js +++ b/packages/e2e-tests/custom-extensions/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/dynamic-compile-options/src/main.js b/packages/e2e-tests/dynamic-compile-options/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/dynamic-compile-options/src/main.js +++ b/packages/e2e-tests/dynamic-compile-options/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/env/src/main.js b/packages/e2e-tests/env/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/env/src/main.js +++ b/packages/e2e-tests/env/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/hmr/src/index.js b/packages/e2e-tests/hmr/src/index.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/hmr/src/index.js +++ b/packages/e2e-tests/hmr/src/index.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/all.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/all.txt deleted file mode 100644 index 3b276b7e4..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/all.txt +++ /dev/null @@ -1,490 +0,0 @@ -{ - "ast": { - "html": { - "start": 62, - "end": 138, - "type": "Fragment", - "children": [ - { - "start": 60, - "end": 62, - "type": "Text", - "raw": "\n\n", - "data": "\n\n" - }, - { - "start": 62, - "end": 138, - "type": "Element", - "name": "button", - "attributes": [ - { - "start": 71, - "end": 104, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": { - "type": "ArrowFunctionExpression", - "start": 81, - "end": 103, - "loc": { - "start": { - "line": 6, - "column": 11 - }, - "end": { - "line": 8, - "column": 2 - } - }, - "id": null, - "expression": false, - "generator": false, - "async": false, - "params": [], - "body": { - "type": "BlockStatement", - "start": 87, - "end": 103, - "loc": { - "start": { - "line": 6, - "column": 17 - }, - "end": { - "line": 8, - "column": 2 - } - }, - "body": [ - { - "type": "ExpressionStatement", - "start": 91, - "end": 100, - "loc": { - "start": { - "line": 7, - "column": 2 - }, - "end": { - "line": 7, - "column": 11 - } - }, - "expression": { - "type": "UpdateExpression", - "start": 91, - "end": 99, - "loc": { - "start": { - "line": 7, - "column": 2 - }, - "end": { - "line": 7, - "column": 10 - } - }, - "operator": "++", - "prefix": false, - "argument": { - "type": "Identifier", - "start": 91, - "end": 97, - "loc": { - "start": { - "line": 7, - "column": 2 - }, - "end": { - "line": 7, - "column": 8 - } - }, - "name": "clicks" - } - } - } - ] - } - } - } - ], - "children": [ - { - "start": 105, - "end": 111, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 106, - "end": 110, - "loc": { - "start": { - "line": 8, - "column": 5 - }, - "end": { - "line": 8, - "column": 9 - } - }, - "name": "name" - } - }, - { - "start": 111, - "end": 120, - "type": "Text", - "raw": " clicks: ", - "data": " clicks: " - }, - { - "start": 120, - "end": 128, - "type": "MustacheTag", - "expression": { - "type": "Identifier", - "start": 121, - "end": 127, - "loc": { - "start": { - "line": 8, - "column": 20 - }, - "end": { - "line": 8, - "column": 26 - } - }, - "name": "clicks" - } - } - ] - }, - { - "start": 138, - "end": 140, - "type": "Text", - "raw": "\n\n", - "data": "\n\n" - } - ] - }, - "css": { - "type": "Style", - "start": 140, - "end": 195, - "attributes": [ - { - "start": 147, - "end": 158, - "type": "Attribute", - "name": "lang", - "value": [ - { - "start": 153, - "end": 157, - "type": "Text", - "raw": "scss", - "data": "scss" - } - ] - } - ], - "children": [ - { - "type": "Rule", - "prelude": { - "type": "SelectorList", - "children": [ - { - "type": "Selector", - "children": [ - { - "type": "TypeSelector", - "name": "button", - "start": 159, - "end": 165 - } - ], - "start": 159, - "end": 165 - } - ], - "start": 159, - "end": 165 - }, - "block": { - "type": "Block", - "children": [ - { - "type": "Declaration", - "important": false, - "property": "color", - "value": { - "type": "Value", - "children": [ - { - "type": "Hash", - "value": "000099", - "start": 177, - "end": 184 - } - ], - "start": 177, - "end": 184 - }, - "start": 170, - "end": 184 - } - ], - "start": 166, - "end": 187 - }, - "start": 159, - "end": 187 - } - ], - "content": { - "start": 159, - "end": 187, - "styles": "button {\n color: #000099;\n}" - } - }, - "instance": { - "type": "Script", - "start": 0, - "end": 60, - "context": "default", - "content": { - "type": "Program", - "start": 18, - "end": 51, - "loc": { - "start": { - "line": 1, - "column": 0 - }, - "end": { - "line": 3, - "column": 0 - } - }, - "body": [ - { - "type": "ExportNamedDeclaration", - "start": 18, - "end": 34, - "loc": { - "start": { - "line": 1, - "column": 18 - }, - "end": { - "line": 1, - "column": 34 - } - }, - "declaration": { - "type": "VariableDeclaration", - "start": 25, - "end": 34, - "loc": { - "start": { - "line": 1, - "column": 25 - }, - "end": { - "line": 1, - "column": 34 - } - }, - "declarations": [ - { - "type": "VariableDeclarator", - "start": 29, - "end": 33, - "loc": { - "start": { - "line": 1, - "column": 29 - }, - "end": { - "line": 1, - "column": 33 - } - }, - "id": { - "type": "Identifier", - "start": 29, - "end": 33, - "loc": { - "start": { - "line": 1, - "column": 29 - }, - "end": { - "line": 1, - "column": 33 - } - }, - "name": "name" - }, - "init": null - } - ], - "kind": "let" - }, - "specifiers": [], - "source": null - }, - { - "type": "VariableDeclaration", - "start": 35, - "end": 50, - "loc": { - "start": { - "line": 2, - "column": 0 - }, - "end": { - "line": 2, - "column": 15 - } - }, - "declarations": [ - { - "type": "VariableDeclarator", - "start": 39, - "end": 49, - "loc": { - "start": { - "line": 2, - "column": 4 - }, - "end": { - "line": 2, - "column": 14 - } - }, - "id": { - "type": "Identifier", - "start": 39, - "end": 45, - "loc": { - "start": { - "line": 2, - "column": 4 - }, - "end": { - "line": 2, - "column": 10 - } - }, - "name": "clicks" - }, - "init": { - "type": "Literal", - "start": 48, - "end": 49, - "loc": { - "start": { - "line": 2, - "column": 13 - }, - "end": { - "line": 2, - "column": 14 - } - }, - "value": 0, - "raw": "0" - } - } - ], - "kind": "let" - } - ], - "sourceType": "module" - } - } - }, - "css": { - "code": "button.svelte-d8vj6a{color:#000099}", - "map": { - "version": 3, - "file": "Dummy.svelte", - "mappings": "AAWkB,oBAAA", - "names": [], - "sources": [ - "Dummy.svelte" - ] - } - }, - "dependencies": [], - "js": { - "code": "/* src/Dummy.svelte generated by Svelte vXXX */\nimport {\n\tSvelteComponent as SvelteComponent$,\n\tappend as append$,\n\tattr as attr$,\n\tdetach as detach$,\n\telement as element$,\n\tinit as init$,\n\tinsert as insert$,\n\tlisten as listen$,\n\tnoop as noop$,\n\tsafe_not_equal as safe_not_equal$,\n\tset_data as set_data$,\n\ttext as text$\n} from \"svelte/internal\";\n\nfunction create_fragment(ctx) {\n\tlet button$;\n\tlet t0$;\n\tlet t1$;\n\tlet t2$;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\tbutton$ = element$(\"button\");\n\t\t\tt0$ = text$(/*name*/ ctx[0]);\n\t\t\tt1$ = text$(\" clicks: \");\n\t\t\tt2$ = text$(/*clicks*/ ctx[1]);\n\t\t\tattr$(button$, \"class\", \"svelte-d8vj6a\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert$(target, button$, anchor);\n\t\t\tappend$(button$, t0$);\n\t\t\tappend$(button$, t1$);\n\t\t\tappend$(button$, t2$);\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = listen$(button$, \"click\", /*click_handler$*/ ctx[2]);\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\n\t\t\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\n\t\t},\n\t\ti: noop$,\n\t\to: noop$,\n\t\td(detaching) {\n\t\t\tif (detaching) detach$(button$);\n\t\t\tmounted = false;\n\t\t\tdispose();\n\t\t}\n\t};\n}\n\nfunction instance$($$self, $$props, $$invalidate) {\n\tlet { name } = $$props;\n\tlet clicks = 0;\n\n\tconst click_handler$ = () => {\n\t\t$$invalidate(1, clicks++, clicks);\n\t};\n\n\t$$self.$$set = $$props => {\n\t\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\n\t};\n\n\treturn [name, clicks, click_handler$];\n}\n\nclass Dummy$ extends SvelteComponent$ {\n\tconstructor(options) {\n\t\tsuper();\n\t\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\n\t}\n}\n\nexport default Dummy$;", - "map": { - "version": 3, - "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OAPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBAKZ,MAAM;;;;;;;;;;;;;;;;;", - "names": [], - "sources": [ - "Dummy.svelte" - ] - } - }, - "lang": "ts", - "normalizedFilename": "/src/Dummy.svelte", - "preprocessed": { - "code": "\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n", - "dependencies": [], - "map": { - "version": 3, - "mappings": "AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;", - "names": [], - "sources": [ - "Dummy.svelte" - ] - } - }, - "source": "\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n", - "ssr": false, - "stats": { - "timings": { - "total":0.123456789, - "parse": { - "total":0.123456789 - }, - "create component": { - "total":0.123456789 - } - } - }, - "vars": [ - { - "name": "name", - "export_name": "name", - "injected": false, - "module": false, - "mutated": false, - "reassigned": false, - "referenced": true, - "writable": true, - "referenced_from_script": false - }, - { - "name": "clicks", - "export_name": null, - "injected": false, - "module": false, - "mutated": false, - "reassigned": true, - "referenced": true, - "writable": true, - "referenced_from_script": false - } - ], - "warnings": [] -} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/custom-element.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/custom-element.txt deleted file mode 100644 index 468eebd24..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/custom-element.txt +++ /dev/null @@ -1,121 +0,0 @@ -/* src/Dummy.svelte generated by Svelte vXXX */ -import { - SvelteElement as SvelteElement$, - append as append$, - attribute_to_object as attribute_to_object$, - detach as detach$, - element as element$, - flush as flush$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ -} from "svelte/internal"; - -function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$("button"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(" clicks: "); - t2$ = text$(/*clicks*/ ctx[1]); - this.c = noop$; - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, "click", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; -} - -function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; -} - -class Dummy$ extends SvelteElement$ { - constructor(options) { - super(); - const style = document.createElement('style'); - style.textContent = `button{color:#000099}`; - this.shadowRoot.appendChild(style); - - init$( - this, - { - target: this.shadowRoot, - props: attribute_to_object$(this.attributes), - customElement: true - }, - instance$, - create_fragment, - safe_not_equal$, - { name: 0 }, - null - ); - - if (options) { - if (options.target) { - insert$(options.target, this, options.anchor); - } - - if (options.props) { - this.$set(options.props); - flush$(); - } - } - } - - static get observedAttributes() { - return ["name"]; - } - - get name() { - return this.$$.ctx[0]; - } - - set name(name) { - this.$$set({ name }); - flush$(); - } -} - -export default Dummy$; \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-css.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-css.txt deleted file mode 100644 index 56a53012f..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-css.txt +++ /dev/null @@ -1,3 +0,0 @@ -button.svelte-d8vj6a{color:#000099} - -/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHVtbXkuc3ZlbHRlIiwibWFwcGluZ3MiOiJBQVdrQixvQkFBQSIsIm5hbWVzIjpbXSwic291cmNlcyI6WyJEdW1teS5zdmVsdGUiXX0= */ diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-js.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-js.txt deleted file mode 100644 index a4527c954..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/direct-js.txt +++ /dev/null @@ -1,82 +0,0 @@ -/* src/Dummy.svelte generated by Svelte vXXX */ -import { - SvelteComponent as SvelteComponent$, - append as append$, - attr as attr$, - detach as detach$, - element as element$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ -} from "/node_modules/.vite/deps/svelte_internal.js?v=XXX"; - -function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$("button"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(" clicks: "); - t2$ = text$(/*clicks*/ ctx[1]); - attr$(button$, "class", "svelte-d8vj6a"); - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, "click", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; -} - -function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; -} - -class Dummy$ extends SvelteComponent$ { - constructor(options) { - super(); - init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); - } -} - -export default Dummy$; - -//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQVFLLEdBQUk7ZUFBQyxXQUFTOzBCQUFDLEdBQU07Ozs7R0FIMUIsT0FJQTs7Ozs7Ozs7Ozs7bURBREssR0FBSTt1REFBVyxHQUFNOzs7Ozs7Ozs7Ozs7O09BUGQsSUFBQTtLQUNQLE1BQUEsR0FBUyxDQUFBOzs7a0JBS1osTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIkR1bW15LnN2ZWx0ZSJdfQ== diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-all.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-all.txt deleted file mode 100644 index fca37e7c0..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-all.txt +++ /dev/null @@ -1,12 +0,0 @@ -export const ast={"html":{"start":62,"end":138,"type":"Fragment","children":[{"start":60,"end":62,"type":"Text","raw":"\n\n","data":"\n\n"},{"start":62,"end":138,"type":"Element","name":"button","attributes":[{"start":71,"end":104,"type":"EventHandler","name":"click","modifiers":[],"expression":{"type":"ArrowFunctionExpression","start":81,"end":103,"loc":{"start":{"line":6,"column":11},"end":{"line":8,"column":2}},"id":null,"expression":false,"generator":false,"async":false,"params":[],"body":{"type":"BlockStatement","start":87,"end":103,"loc":{"start":{"line":6,"column":17},"end":{"line":8,"column":2}},"body":[{"type":"ExpressionStatement","start":91,"end":100,"loc":{"start":{"line":7,"column":2},"end":{"line":7,"column":11}},"expression":{"type":"UpdateExpression","start":91,"end":99,"loc":{"start":{"line":7,"column":2},"end":{"line":7,"column":10}},"operator":"++","prefix":false,"argument":{"type":"Identifier","start":91,"end":97,"loc":{"start":{"line":7,"column":2},"end":{"line":7,"column":8}},"name":"clicks"}}}]}}}],"children":[{"start":105,"end":111,"type":"MustacheTag","expression":{"type":"Identifier","start":106,"end":110,"loc":{"start":{"line":8,"column":5},"end":{"line":8,"column":9}},"name":"name"}},{"start":111,"end":120,"type":"Text","raw":" clicks: ","data":" clicks: "},{"start":120,"end":128,"type":"MustacheTag","expression":{"type":"Identifier","start":121,"end":127,"loc":{"start":{"line":8,"column":20},"end":{"line":8,"column":26}},"name":"clicks"}}]},{"start":138,"end":140,"type":"Text","raw":"\n\n","data":"\n\n"}]},"css":{"type":"Style","start":140,"end":195,"attributes":[{"start":147,"end":158,"type":"Attribute","name":"lang","value":[{"start":153,"end":157,"type":"Text","raw":"scss","data":"scss"}]}],"children":[{"type":"Rule","prelude":{"type":"SelectorList","children":[{"type":"Selector","children":[{"type":"TypeSelector","name":"button","start":159,"end":165}],"start":159,"end":165}],"start":159,"end":165},"block":{"type":"Block","children":[{"type":"Declaration","important":false,"property":"color","value":{"type":"Value","children":[{"type":"Hash","value":"000099","start":177,"end":184}],"start":177,"end":184},"start":170,"end":184}],"start":166,"end":187},"start":159,"end":187}],"content":{"start":159,"end":187,"styles":"button {\n color: #000099;\n}"}},"instance":{"type":"Script","start":0,"end":60,"context":"default","content":{"type":"Program","start":18,"end":51,"loc":{"start":{"line":1,"column":0},"end":{"line":3,"column":0}},"body":[{"type":"ExportNamedDeclaration","start":18,"end":34,"loc":{"start":{"line":1,"column":18},"end":{"line":1,"column":34}},"declaration":{"type":"VariableDeclaration","start":25,"end":34,"loc":{"start":{"line":1,"column":25},"end":{"line":1,"column":34}},"declarations":[{"type":"VariableDeclarator","start":29,"end":33,"loc":{"start":{"line":1,"column":29},"end":{"line":1,"column":33}},"id":{"type":"Identifier","start":29,"end":33,"loc":{"start":{"line":1,"column":29},"end":{"line":1,"column":33}},"name":"name"},"init":null}],"kind":"let"},"specifiers":[],"source":null},{"type":"VariableDeclaration","start":35,"end":50,"loc":{"start":{"line":2,"column":0},"end":{"line":2,"column":15}},"declarations":[{"type":"VariableDeclarator","start":39,"end":49,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":14}},"id":{"type":"Identifier","start":39,"end":45,"loc":{"start":{"line":2,"column":4},"end":{"line":2,"column":10}},"name":"clicks"},"init":{"type":"Literal","start":48,"end":49,"loc":{"start":{"line":2,"column":13},"end":{"line":2,"column":14}},"value":0,"raw":"0"}}],"kind":"let"}],"sourceType":"module"}}} -export const css={"code":"button.svelte-d8vj6a{color:#000099}","map":null} -export const dependencies=[] -export const js={"code":"/* src/Dummy.svelte generated by Svelte vXXX */\nimport {\n\tSvelteComponent as SvelteComponent$,\n\tappend as append$,\n\tattr as attr$,\n\tdetach as detach$,\n\telement as element$,\n\tinit as init$,\n\tinsert as insert$,\n\tlisten as listen$,\n\tnoop as noop$,\n\tsafe_not_equal as safe_not_equal$,\n\tset_data as set_data$,\n\ttext as text$\n} from \"svelte/internal\";\n\nfunction create_fragment(ctx) {\n\tlet button$;\n\tlet t0$;\n\tlet t1$;\n\tlet t2$;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\tbutton$ = element$(\"button\");\n\t\t\tt0$ = text$(/*name*/ ctx[0]);\n\t\t\tt1$ = text$(\" clicks: \");\n\t\t\tt2$ = text$(/*clicks*/ ctx[1]);\n\t\t\tattr$(button$, \"class\", \"svelte-d8vj6a\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert$(target, button$, anchor);\n\t\t\tappend$(button$, t0$);\n\t\t\tappend$(button$, t1$);\n\t\t\tappend$(button$, t2$);\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = listen$(button$, \"click\", /*click_handler$*/ ctx[2]);\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\n\t\t\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\n\t\t},\n\t\ti: noop$,\n\t\to: noop$,\n\t\td(detaching) {\n\t\t\tif (detaching) detach$(button$);\n\t\t\tmounted = false;\n\t\t\tdispose();\n\t\t}\n\t};\n}\n\nfunction instance$($$self, $$props, $$invalidate) {\n\tlet { name } = $$props;\n\tlet clicks = 0;\n\n\tconst click_handler$ = () => {\n\t\t$$invalidate(1, clicks++, clicks);\n\t};\n\n\t$$self.$$set = $$props => {\n\t\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\n\t};\n\n\treturn [name, clicks, click_handler$];\n}\n\nclass Dummy$ extends SvelteComponent$ {\n\tconstructor(options) {\n\t\tsuper();\n\t\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\n\t}\n}\n\nexport default Dummy$;","map":null} -export const lang="ts" -export const normalizedFilename="/src/Dummy.svelte" -export const preprocessed={"code":"\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n","dependencies":[],"map":{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;","names":[],"sources":["Dummy.svelte"]}} -export const source="\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n" -export const ssr=false -export const stats={"timings":{"total":0.123456789,"parse":{"total":0.123456789},"create component":{"total":0.123456789}}} -export const vars=[{"name":"name","export_name":"name","injected":false,"module":false,"mutated":false,"reassigned":false,"referenced":true,"writable":true,"referenced_from_script":false},{"name":"clicks","export_name":null,"injected":false,"module":false,"mutated":false,"reassigned":true,"referenced":true,"writable":true,"referenced_from_script":false}] -export const warnings=[] diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-preprocessed.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-preprocessed.txt deleted file mode 100644 index 9ac0a5c17..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-preprocessed.txt +++ /dev/null @@ -1,4 +0,0 @@ -export const code="\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n" -export const dependencies=[] -export const map={"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;","names":[],"sources":["Dummy.svelte"]} -export default code diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-script.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-script.txt deleted file mode 100644 index 5703c9c9d..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-script.txt +++ /dev/null @@ -1,3 +0,0 @@ -export const code="/* src/Dummy.svelte generated by Svelte vXXX */\nimport {\n\tSvelteComponent as SvelteComponent$,\n\tappend as append$,\n\tattr as attr$,\n\tdetach as detach$,\n\telement as element$,\n\tinit as init$,\n\tinsert as insert$,\n\tlisten as listen$,\n\tnoop as noop$,\n\tsafe_not_equal as safe_not_equal$,\n\tset_data as set_data$,\n\ttext as text$\n} from \"svelte/internal\";\n\nfunction create_fragment(ctx) {\n\tlet button$;\n\tlet t0$;\n\tlet t1$;\n\tlet t2$;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\tbutton$ = element$(\"button\");\n\t\t\tt0$ = text$(/*name*/ ctx[0]);\n\t\t\tt1$ = text$(\" clicks: \");\n\t\t\tt2$ = text$(/*clicks*/ ctx[1]);\n\t\t\tattr$(button$, \"class\", \"svelte-d8vj6a\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert$(target, button$, anchor);\n\t\t\tappend$(button$, t0$);\n\t\t\tappend$(button$, t1$);\n\t\t\tappend$(button$, t2$);\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = listen$(button$, \"click\", /*click_handler$*/ ctx[2]);\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\n\t\t\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\n\t\t},\n\t\ti: noop$,\n\t\to: noop$,\n\t\td(detaching) {\n\t\t\tif (detaching) detach$(button$);\n\t\t\tmounted = false;\n\t\t\tdispose();\n\t\t}\n\t};\n}\n\nfunction instance$($$self, $$props, $$invalidate) {\n\tlet { name } = $$props;\n\tlet clicks = 0;\n\n\tconst click_handler$ = () => {\n\t\t$$invalidate(1, clicks++, clicks);\n\t};\n\n\t$$self.$$set = $$props => {\n\t\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\n\t};\n\n\treturn [name, clicks, click_handler$];\n}\n\nclass Dummy$ extends SvelteComponent$ {\n\tconstructor(options) {\n\t\tsuper();\n\t\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\n\t}\n}\n\nexport default Dummy$;" -export const map=null -export default code diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-style.txt deleted file mode 100644 index 2c127c6b0..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/mixed-style.txt +++ /dev/null @@ -1,3 +0,0 @@ -export const code="button.svelte-d8vj6a{color:#000099}" -export const map=null -export default code diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/script.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/script.txt deleted file mode 100644 index 88cca4b98..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/script.txt +++ /dev/null @@ -1,80 +0,0 @@ -/* src/Dummy.svelte generated by Svelte vXXX */ -import { - SvelteComponent as SvelteComponent$, - append as append$, - attr as attr$, - detach as detach$, - element as element$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ -} from "svelte/internal"; - -function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$("button"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(" clicks: "); - t2$ = text$(/*clicks*/ ctx[1]); - attr$(button$, "class", "svelte-d8vj6a"); - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, "click", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; -} - -function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; -} - -class Dummy$ extends SvelteComponent$ { - constructor(options) { - super(); - init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); - } -} - -export default Dummy$; \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-custom-element.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-custom-element.txt deleted file mode 100644 index 468eebd24..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-custom-element.txt +++ /dev/null @@ -1,121 +0,0 @@ -/* src/Dummy.svelte generated by Svelte vXXX */ -import { - SvelteElement as SvelteElement$, - append as append$, - attribute_to_object as attribute_to_object$, - detach as detach$, - element as element$, - flush as flush$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ -} from "svelte/internal"; - -function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$("button"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(" clicks: "); - t2$ = text$(/*clicks*/ ctx[1]); - this.c = noop$; - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, "click", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; -} - -function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; -} - -class Dummy$ extends SvelteElement$ { - constructor(options) { - super(); - const style = document.createElement('style'); - style.textContent = `button{color:#000099}`; - this.shadowRoot.appendChild(style); - - init$( - this, - { - target: this.shadowRoot, - props: attribute_to_object$(this.attributes), - customElement: true - }, - instance$, - create_fragment, - safe_not_equal$, - { name: 0 }, - null - ); - - if (options) { - if (options.target) { - insert$(options.target, this, options.anchor); - } - - if (options.props) { - this.$set(options.props); - flush$(); - } - } - } - - static get observedAttributes() { - return ["name"]; - } - - get name() { - return this.$$.ctx[0]; - } - - set name(name) { - this.$$set({ name }); - flush$(); - } -} - -export default Dummy$; \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-script.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-script.txt deleted file mode 100644 index 88cca4b98..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-script.txt +++ /dev/null @@ -1,80 +0,0 @@ -/* src/Dummy.svelte generated by Svelte vXXX */ -import { - SvelteComponent as SvelteComponent$, - append as append$, - attr as attr$, - detach as detach$, - element as element$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ -} from "svelte/internal"; - -function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$("button"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(" clicks: "); - t2$ = text$(/*clicks*/ ctx[1]); - attr$(button$, "class", "svelte-d8vj6a"); - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, "click", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; -} - -function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; -} - -class Dummy$ extends SvelteComponent$ { - constructor(options) { - super(); - init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); - } -} - -export default Dummy$; \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-style.txt deleted file mode 100644 index d54719910..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-style.txt +++ /dev/null @@ -1 +0,0 @@ -button.svelte-d8vj6a{color:#000099} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/style.txt deleted file mode 100644 index d54719910..000000000 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/style.txt +++ /dev/null @@ -1 +0,0 @@ -button.svelte-d8vj6a{color:#000099} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/all.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/all.txt new file mode 100644 index 000000000..5b622e8fc --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/all.txt @@ -0,0 +1,52 @@ +{ + "css": { + "code": "button.svelte-d8vj6a {\n color: #000099;\n}", + "map": { + "version": 3, + "file": "Dummy.svelte", + "sources": [ + "Dummy.svelte" + ], + "sourcesContent": [ + "\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n" + ], + "names": [], + "mappings": "AAUmB,oBAAM;AACzB;AACA" + } + }, + "dependencies": [], + "js": { + "code": "// Dummy.svelte (Svelte vXXX)\n\nimport \"svelte/internal/disclose-version\";\nimport * as $ from \"svelte/internal\";\n\nvar on_click = (_, clicks) => {\n\t$.increment(clicks);\n};\n\nvar frag = $.template(``);\n\nexport default function Dummy($$anchor, $$props) {\n\t$.push($$props, false);\n\n\tlet name = $.prop($$props, \"name\");\n\tlet clicks = $.source(0);\n\n\t/* Init */\n\tvar button = $.open($$anchor, true, frag);\n\tvar text = $.child(button);\n\n\t/* Update */\n\t$.text_effect(text, () => `${$.stringify(name())} clicks: ${$.stringify($.get(clicks))}`);\n\tbutton.__click = [on_click, clicks];\n\t$.close($$anchor, button);\n\t$.pop();\n}\n\n$.delegate([\"click\"]);", + "map": { + "version": 3, + "names": [], + "sources": [ + "Dummy.svelte" + ], + "sourcesContent": [ + null + ], + "mappings": ";;;;;mBACI,MAAM;;;;;;;;;KADmB,IAAI;KAC7B,MAAM,YAAG,CAAC;;;;;;;0CAMT,IAAI,iCAAW,MAAM;6BANtB,MAAM;;;;;" + } + }, + "lang": "ts", + "metadata": { + "runes": false + }, + "normalizedFilename": "/src/Dummy.svelte", + "preprocessed": { + "code": "\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n", + "dependencies": [], + "map": { + "version": 3, + "mappings": "AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,WAAI;AACX,IAAI,SAAS;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK", + "names": [], + "sources": [ + "Dummy.svelte" + ] + } + }, + "source": "\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n", + "ssr": false, + "warnings": [] +} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/custom-element.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/custom-element.txt new file mode 100644 index 000000000..43c56207d --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/custom-element.txt @@ -0,0 +1,42 @@ +// Dummy.svelte (Svelte vXXX) + +import "svelte/internal/disclose-version"; +import * as $ from "svelte/internal"; + +var on_click = (_, clicks) => { + $.increment(clicks); +}; + +var frag = $.template(``); + +export default function Dummy($$anchor, $$props) { + $.push($$props, false); + + let name = $.prop_source($$props, "name"); + let clicks = $.source(0); + + /* Init */ + var button = $.open($$anchor, true, frag); + var text = $.child(button); + + /* Update */ + $.text_effect(text, () => `${$.stringify($.get(name))} clicks: ${$.stringify($.get(clicks))}`); + button.__click = [on_click, clicks]; + $.close($$anchor, button); + + var $$accessors = { + get name() { + return $.get(name); + }, + set name($$value) { + $.set_sync(name, $$value); + } + }; + + $.pop($$accessors); + $.append_styles($$anchor, "svelte-d8vj6a", "button.svelte-d8vj6a {\n color: #000099;\n}"); + return $$accessors; +} + +$.delegate(["click"]); +$.create_custom_element(Dummy, { name: {} }, [], [], true); \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-css.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-css.txt new file mode 100644 index 000000000..9189ad699 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-css.txt @@ -0,0 +1,5 @@ +button.svelte-d8vj6a { + color: #000099; +} + +/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHVtbXkuc3ZlbHRlIiwic291cmNlcyI6WyJEdW1teS5zdmVsdGUiXSwic291cmNlc0NvbnRlbnQiOlsiPHNjcmlwdCBsYW5nPVwidHNcIj5leHBvcnQgbGV0IG5hbWU7XG5sZXQgY2xpY2tzID0gMDtcbjwvc2NyaXB0PlxuXG48YnV0dG9uXG5cdG9uOmNsaWNrPXsoKSA9PiB7XG5cdFx0Y2xpY2tzKys7XG5cdH19PntuYW1lfSBjbGlja3M6IHtjbGlja3N9PC9idXR0b25cbj5cblxuPHN0eWxlIGxhbmc9XCJzY3NzXCI+YnV0dG9uIHtcbiAgY29sb3I6ICMwMDAwOTk7XG59PC9zdHlsZT5cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVbUIsb0JBQU07QUFDekI7QUFDQSJ9 */ diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-js.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-js.txt new file mode 100644 index 000000000..97e6dfeec --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/direct-js.txt @@ -0,0 +1,16 @@ +// Dummy.svelte (Svelte vXXX) + +import * as $ from "/node_modules/.vite/deps/svelte_internal_server.js?v=XXX"; + +export default function Dummy($$payload, $$props) { + $.push(false); + + let name = $$props["name"]; + let clicks = 0; + + $$payload.out += ``; + $.bind_props($$props, { name }); + $.pop(); +} + +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sInNvdXJjZXMiOlsiRHVtbXkuc3ZlbHRlIl0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm1hcHBpbmdzIjoiOzs7Ozs7O0tBQTZCLElBQUk7S0FDN0IsTUFBTSxHQUFHLENBQUM7OzREQU1ULElBQUksc0JBQVcsTUFBTTs7OyJ9 diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-all.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-all.txt new file mode 100644 index 000000000..d2c913078 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-all.txt @@ -0,0 +1,10 @@ +export const css={"code":"button.svelte-d8vj6a {\n color: #000099;\n}","map":{"version":3,"file":"Dummy.svelte","sources":["Dummy.svelte"],"sourcesContent":["\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n"],"names":[],"mappings":"AAUmB,oBAAM;AACzB;AACA"}} +export const dependencies=[] +export const js={"code":"// Dummy.svelte (Svelte vXXX)\n\nimport * as $ from \"svelte/internal/server\";\n\nexport default function Dummy($$payload, $$props) {\n\t$.push(false);\n\n\tlet name = $$props[\"name\"];\n\tlet clicks = 0;\n\n\t$$payload.out += ``;\n\t$.bind_props($$props, { name });\n\t$.pop();\n}","map":{"version":3,"names":[],"sources":["Dummy.svelte"],"sourcesContent":[null],"mappings":";;;;;;;KAA6B,IAAI;KAC7B,MAAM,GAAG,CAAC;;4DAMT,IAAI,sBAAW,MAAM;;;"}} +export const lang="ts" +export const metadata={"runes":false} +export const normalizedFilename="/src/Dummy.svelte" +export const preprocessed={"code":"\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n","dependencies":[],"map":{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,WAAI;AACX,IAAI,SAAS;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK","names":[],"sources":["Dummy.svelte"]}} +export const source="\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n" +export const ssr="client" +export const warnings=[] diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-preprocessed.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-preprocessed.txt new file mode 100644 index 000000000..cd4c861f1 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-preprocessed.txt @@ -0,0 +1,4 @@ +export const code="\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n" +export const dependencies=[] +export const map={"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,WAAI;AACX,IAAI,SAAS;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK","names":[],"sources":["Dummy.svelte"]} +export default code diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-script.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-script.txt new file mode 100644 index 000000000..33bc77db9 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-script.txt @@ -0,0 +1,3 @@ +export const code="// Dummy.svelte (Svelte vXXX)\n\nimport * as $ from \"svelte/internal/server\";\n\nexport default function Dummy($$payload, $$props) {\n\t$.push(false);\n\n\tlet name = $$props[\"name\"];\n\tlet clicks = 0;\n\n\t$$payload.out += ``;\n\t$.bind_props($$props, { name });\n\t$.pop();\n}" +export const map={"version":3,"names":[],"sources":["Dummy.svelte"],"sourcesContent":[null],"mappings":";;;;;;;KAA6B,IAAI;KAC7B,MAAM,GAAG,CAAC;;4DAMT,IAAI,sBAAW,MAAM;;;"} +export default code diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-style.txt new file mode 100644 index 000000000..1152cff5e --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/mixed-style.txt @@ -0,0 +1,3 @@ +export const code="button.svelte-d8vj6a {\n color: #000099;\n}" +export const map={"version":3,"file":"Dummy.svelte","sources":["Dummy.svelte"],"sourcesContent":["\n\n {\n\t\tclicks++;\n\t}}>{name} clicks: {clicks}\n\n\n"],"names":[],"mappings":"AAUmB,oBAAM;AACzB;AACA"} +export default code diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/preprocessed.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/preprocessed.txt similarity index 100% rename from packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/preprocessed.txt rename to packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/preprocessed.txt diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/raw.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/raw.txt similarity index 100% rename from packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/raw.txt rename to packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/raw.txt diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/script.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/script.txt new file mode 100644 index 000000000..6f772f1c7 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/script.txt @@ -0,0 +1,29 @@ +// Dummy.svelte (Svelte vXXX) + +import "svelte/internal/disclose-version"; +import * as $ from "svelte/internal"; + +var on_click = (_, clicks) => { + $.increment(clicks); +}; + +var frag = $.template(``); + +export default function Dummy($$anchor, $$props) { + $.push($$props, false); + + let name = $.prop($$props, "name"); + let clicks = $.source(0); + + /* Init */ + var button = $.open($$anchor, true, frag); + var text = $.child(button); + + /* Update */ + $.text_effect(text, () => `${$.stringify(name())} clicks: ${$.stringify($.get(clicks))}`); + button.__click = [on_click, clicks]; + $.close($$anchor, button); + $.pop(); +} + +$.delegate(["click"]); \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-custom-element.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-custom-element.txt new file mode 100644 index 000000000..c796cc1c9 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-custom-element.txt @@ -0,0 +1,14 @@ +// Dummy.svelte (Svelte vXXX) + +import * as $ from "svelte/internal/server"; + +export default function Dummy($$payload, $$props) { + $.push(false); + + let name = $$props["name"]; + let clicks = 0; + + $$payload.out += ``; + $.bind_props($$props, { name }); + $.pop(); +} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-preprocessed.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-preprocessed.txt similarity index 100% rename from packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-preprocessed.txt rename to packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-preprocessed.txt diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-raw.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-raw.txt similarity index 100% rename from packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-3/ssr-raw.txt rename to packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-raw.txt diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-script.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-script.txt new file mode 100644 index 000000000..c796cc1c9 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-script.txt @@ -0,0 +1,14 @@ +// Dummy.svelte (Svelte vXXX) + +import * as $ from "svelte/internal/server"; + +export default function Dummy($$payload, $$props) { + $.push(false); + + let name = $$props["name"]; + let clicks = 0; + + $$payload.out += ``; + $.bind_props($$props, { name }); + $.pop(); +} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-style.txt new file mode 100644 index 000000000..2e590fb1d --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/ssr-style.txt @@ -0,0 +1,3 @@ +button.svelte-d8vj6a { + color: #000099; +} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/style.txt b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/style.txt new file mode 100644 index 000000000..2e590fb1d --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/svelte-5/style.txt @@ -0,0 +1,3 @@ +button.svelte-d8vj6a { + color: #000099; +} \ No newline at end of file diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts index b4d3572be..2e7a07962 100644 --- a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts +++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts @@ -8,7 +8,9 @@ function normalizeSnapshot(result: string) { .replace( /\/\* .* generated by Svelte v\d\.\d+\.\d+(?:-[a-z]+\.\d+)? \*\//g, '/* src/Dummy.svelte generated by Svelte vXXX */' - ) // ensure generated svelte compiler comment is stable + ) // stable svelte4 compiler comment + .replace(/\(Svelte v\d+.\d+.\d+-next\.\d+\)/, '(Svelte vXXX)') // stable svelte5 compiler comment + .replace('// Note: compiler output will change before 5.0 is released!', '') // strip svelte5 compiler hint .replace(/\.js\?v=[0-9a-f]{8}/g, '.js?v=XXX') // vite import analysis import rewrite version query .replace(/"total": *\d+\.\d+/g, '"total":0.123456789'); // svelte compile stats } diff --git a/packages/e2e-tests/import-queries/src/main.js b/packages/e2e-tests/import-queries/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/import-queries/src/main.js +++ b/packages/e2e-tests/import-queries/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/inspector-vite/src/main.js b/packages/e2e-tests/inspector-vite/src/main.js index 448d14965..fe877d057 100644 --- a/packages/e2e-tests/inspector-vite/src/main.js +++ b/packages/e2e-tests/inspector-vite/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.getElementById('app') -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.getElementById('app') }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.getElementById('app') })); +} diff --git a/packages/e2e-tests/kit-node/__tests__/kit.spec.ts b/packages/e2e-tests/kit-node/__tests__/kit.spec.ts index def80c438..ba6718949 100644 --- a/packages/e2e-tests/kit-node/__tests__/kit.spec.ts +++ b/packages/e2e-tests/kit-node/__tests__/kit.spec.ts @@ -11,7 +11,8 @@ import { browserLogs, fetchPageText, reloadPage, - readFileContent + readFileContent, + isSvelte4 } from '~utils'; import glob from 'tiny-glob'; @@ -295,7 +296,7 @@ describe('kit-node', () => { ['svelte-hmr', '@sveltejs/kit', '$app', '$env'], `optimizeDeps.exclude in ${filename}` ); - const expectedIncludes = [ + let expectedIncludes = [ 'svelte-i18n', 'e2e-test-dep-svelte-api-only', 'svelte/animate', @@ -309,31 +310,38 @@ describe('kit-node', () => { 'svelte-i18n > deepmerge', 'svelte-i18n > cli-color', 'svelte-i18n > tiny-glob' - ].filter((item) => !(isServe && item.startsWith('svelte-i18n >'))); + ]; + if (!isSvelte4) { + expectedIncludes.push('svelte/internal/server', 'svelte/server', 'svelte/legacy'); + } + expectedIncludes = expectedIncludes.filter( + (item) => !(isServe && item.startsWith('svelte-i18n >')) + ); + expectArrayEqual( config.optimizeDeps.include, expectedIncludes, `optimizeDeps.include in ${filename}` ); - - expectArrayEqual( - config.resolve.dedupe, - [ - 'svelte/animate', - 'svelte/easing', - 'svelte/internal', - 'svelte/motion', - 'svelte/ssr', - 'svelte/store', - 'svelte/transition', - 'svelte', - 'svelte/internal/disclose-version', - 'svelte-hmr/runtime/hot-api-esm.js', - 'svelte-hmr/runtime/proxy-adapter-dom.js', - 'svelte-hmr' - ], - `resolve.dedupe in ${filename}` - ); + let expectedDedupe = [ + 'svelte/animate', + 'svelte/easing', + 'svelte/internal', + 'svelte/motion', + 'svelte/ssr', + 'svelte/store', + 'svelte/transition', + 'svelte', + 'svelte/internal/disclose-version', + 'svelte-hmr/runtime/hot-api-esm.js', + 'svelte-hmr/runtime/proxy-adapter-dom.js', + 'svelte-hmr' + ]; + if (!isSvelte4) { + expectedDedupe = expectedDedupe.filter((s) => !s.startsWith('svelte-hmr')); + expectedDedupe.push('svelte/internal/server', 'svelte/server', 'svelte/legacy'); + } + expectArrayEqual(config.resolve.dedupe, expectedDedupe, `resolve.dedupe in ${filename}`); expectArrayEqual( config.resolve.mainFields, ['svelte', 'module', 'jsnext:main', 'jsnext'], diff --git a/packages/e2e-tests/package-json-svelte-field/src/main.js b/packages/e2e-tests/package-json-svelte-field/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/package-json-svelte-field/src/main.js +++ b/packages/e2e-tests/package-json-svelte-field/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/prebundle-svelte-deps/src/main.js b/packages/e2e-tests/prebundle-svelte-deps/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/prebundle-svelte-deps/src/main.js +++ b/packages/e2e-tests/prebundle-svelte-deps/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/preprocess-with-vite/src/index.ts b/packages/e2e-tests/preprocess-with-vite/src/index.ts index 26cc8c6ba..50bbaf8e0 100644 --- a/packages/e2e-tests/preprocess-with-vite/src/index.ts +++ b/packages/e2e-tests/preprocess-with-vite/src/index.ts @@ -1,13 +1,17 @@ import App from './App.svelte'; + import { Hello } from './types.js'; const hello: Hello = 'Hello'; -const app = new App({ +const options = { target: document.body, props: { hello } -}); - -export default app; +}; +if (App.toString().startsWith('class ')) { + new App(options); +} else { + import('svelte').then(({ mount }) => mount(App, options)); +} diff --git a/packages/e2e-tests/resolve-exports-svelte/src/main.js b/packages/e2e-tests/resolve-exports-svelte/src/main.js index 2c27a2579..47818da0c 100644 --- a/packages/e2e-tests/resolve-exports-svelte/src/main.js +++ b/packages/e2e-tests/resolve-exports-svelte/src/main.js @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.body -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.body }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.body })); +} diff --git a/packages/e2e-tests/resolve-exports-svelte/vite.config.js b/packages/e2e-tests/resolve-exports-svelte/vite.config.js index deab083b9..59e706c78 100644 --- a/packages/e2e-tests/resolve-exports-svelte/vite.config.js +++ b/packages/e2e-tests/resolve-exports-svelte/vite.config.js @@ -5,7 +5,7 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [ svelte({ - compilerOptions: { css: 'none' } + compilerOptions: { css: 'external' } }) ] }); diff --git a/packages/e2e-tests/svelte-preprocess/src/main.ts b/packages/e2e-tests/svelte-preprocess/src/main.ts index 448d14965..fe877d057 100644 --- a/packages/e2e-tests/svelte-preprocess/src/main.ts +++ b/packages/e2e-tests/svelte-preprocess/src/main.ts @@ -1,7 +1,7 @@ import App from './App.svelte'; -const app = new App({ - target: document.getElementById('app') -}); - -export default app; +if (App.toString().startsWith('class ')) { + new App({ target: document.getElementById('app') }); +} else { + import('svelte').then(({ mount }) => mount(App, { target: document.getElementById('app') })); +} diff --git a/packages/e2e-tests/svelte-preprocess/tsconfig.json b/packages/e2e-tests/svelte-preprocess/tsconfig.json index 717c57741..0a6fe29b0 100644 --- a/packages/e2e-tests/svelte-preprocess/tsconfig.json +++ b/packages/e2e-tests/svelte-preprocess/tsconfig.json @@ -8,8 +8,7 @@ * a value or a type, so tell TypeScript to enforce using * `import type` instead of `import` for Types. */ - "importsNotUsedAsValues": "error", - "isolatedModules": true, + "verbatimModuleSyntax": true, /** * To have warnings / errors of the Svelte compiler at the * correct position, enable source maps by default. diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts index 998133b1b..08cb2e204 100644 --- a/packages/e2e-tests/testUtils.ts +++ b/packages/e2e-tests/testUtils.ts @@ -6,7 +6,7 @@ import path from 'node:path'; import colors from 'css-color-names'; import { ElementHandle } from 'playwright-core'; import fetch from 'node-fetch'; - +import { VERSION } from 'svelte/compiler'; import { isBuild, isWin, @@ -22,6 +22,8 @@ export * from './vitestSetup.js'; export const hmrUpdateTimeout = 10000; +export const isSvelte4 = VERSION.startsWith('4.'); + const hexToNameMap: Record = {}; Object.keys(colors).forEach((color) => { hexToNameMap[colors[color]] = color; diff --git a/packages/e2e-tests/ts-type-import/__tests__/ts-type-import.spec.ts b/packages/e2e-tests/ts-type-import/__tests__/ts-type-import.spec.ts index eb2f689dd..63eccfdcf 100644 --- a/packages/e2e-tests/ts-type-import/__tests__/ts-type-import.spec.ts +++ b/packages/e2e-tests/ts-type-import/__tests__/ts-type-import.spec.ts @@ -1,4 +1,4 @@ -import { isBuild, getText, editFileAndWaitForHmrComplete } from '~utils'; +import { isBuild, getText, editFileAndWaitForHmrComplete, isSvelte4 } from '~utils'; test('should render App', async () => { expect(await getText('#hello')).toBe('Hello world'); diff --git a/packages/e2e-tests/ts-type-import/src/index.ts b/packages/e2e-tests/ts-type-import/src/index.ts index 792576e4f..14d662745 100644 --- a/packages/e2e-tests/ts-type-import/src/index.ts +++ b/packages/e2e-tests/ts-type-import/src/index.ts @@ -6,9 +6,12 @@ main(); export function main({ arg = true }: Test = {}): void { if (arg && test()) { - // only create app when test worked - const app = new App({ - target: document.body - }); + if (App.toString().startsWith('class ')) { + new App({ target: document.body }); + } else { + import('svelte').then(({ mount }) => { + mount(App, { target: document.body }); + }); + } } } diff --git a/packages/e2e-tests/vite-ssr-esm/__tests__/vite-ssr-esm.spec.ts b/packages/e2e-tests/vite-ssr-esm/__tests__/vite-ssr-esm.spec.ts index d410e9338..94f596c3e 100644 --- a/packages/e2e-tests/vite-ssr-esm/__tests__/vite-ssr-esm.spec.ts +++ b/packages/e2e-tests/vite-ssr-esm/__tests__/vite-ssr-esm.spec.ts @@ -8,7 +8,8 @@ import { page, e2eServer, browserLogs, - fetchPageText + fetchPageText, + isSvelte4 } from '~utils'; test('/', async () => { diff --git a/packages/e2e-tests/vite-ssr-esm/src/entry-client.js b/packages/e2e-tests/vite-ssr-esm/src/entry-client.js index 6d665988d..aa016e14c 100644 --- a/packages/e2e-tests/vite-ssr-esm/src/entry-client.js +++ b/packages/e2e-tests/vite-ssr-esm/src/entry-client.js @@ -1,14 +1,23 @@ import App from './App.svelte'; - import { esm } from 'e2e-test-dep-esm-only'; -console.log(esm()); -const app = new App({ - target: document.getElementById('svelte'), - hydrate: true, - props: { - world: 'svelte world' - } -}); +console.log(esm()); -export default app; +if (App.toString().startsWith('class ')) { + new App({ + target: document.getElementById('svelte'), + hydrate: true, + props: { + world: 'svelte world' + } + }); +} else { + import('svelte').then(({ mount }) => + mount(App, { + target: document.getElementById('svelte'), + props: { + world: 'svelte world' + } + }) + ); +} diff --git a/packages/e2e-tests/vite-ssr-esm/src/entry-server.js b/packages/e2e-tests/vite-ssr-esm/src/entry-server.js index 1fc430b74..e6c7fe670 100644 --- a/packages/e2e-tests/vite-ssr-esm/src/entry-server.js +++ b/packages/e2e-tests/vite-ssr-esm/src/entry-server.js @@ -1,13 +1,18 @@ import App from './App.svelte'; - import { esm } from 'e2e-test-dep-esm-only'; import decamelize from 'decamelize'; console.log(esm()); console.log(decamelize('helloWorld')); +const importSvelteServer = new Function("return import('svelte/server')"); + export async function render(url, manifest) { - return App.render({ - name: 'world' - }); + if (App.render) { + return App.render({ + name: 'world' + }); + } else { + importSvelteServer().then(({ render }) => render(App, { props: { name: 'world' } })); + } } diff --git a/packages/playground/basic/.gitignore b/packages/playground/basic/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/packages/playground/basic/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/playground/basic/README.md b/packages/playground/basic/README.md new file mode 100644 index 000000000..47379abff --- /dev/null +++ b/packages/playground/basic/README.md @@ -0,0 +1,3 @@ +# Svelte + Vite + +and a little something 5 diff --git a/packages/playground/basic/index.html b/packages/playground/basic/index.html new file mode 100644 index 000000000..7d4f5f410 --- /dev/null +++ b/packages/playground/basic/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Svelte + + +
+ + + diff --git a/packages/playground/basic/jsconfig.json b/packages/playground/basic/jsconfig.json new file mode 100644 index 000000000..31e2eea42 --- /dev/null +++ b/packages/playground/basic/jsconfig.json @@ -0,0 +1,32 @@ +{ + "compilerOptions": { + "moduleResolution": "bundler", + "target": "ESNext", + "module": "ESNext", + /** + * svelte-preprocess cannot figure out whether you have + * a value or a type, so tell TypeScript to enforce using + * `import type` instead of `import` for Types. + */ + "verbatimModuleSyntax": true, + "isolatedModules": true, + "resolveJsonModule": true, + /** + * To have warnings / errors of the Svelte compiler at the + * correct position, enable source maps by default. + */ + "sourceMap": true, + "esModuleInterop": true, + "skipLibCheck": true, + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable this if you'd like to use dynamic types. + */ + "checkJs": true + }, + /** + * Use global.d.ts instead of compilerOptions.types + * to avoid limiting type declarations. + */ + "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"] +} diff --git a/packages/playground/basic/package.json b/packages/playground/basic/package.json new file mode 100644 index 000000000..c75c61fc7 --- /dev/null +++ b/packages/playground/basic/package.json @@ -0,0 +1,17 @@ +{ + "name": "playground-basic", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "workspace:^", + "svelte": "^4.2.2", + "vite": "^5.0.0-beta.12", + "e2e-test-dep-svelte-module": "workspace:^" + } +} diff --git a/packages/playground/basic/public/vite.svg b/packages/playground/basic/public/vite.svg new file mode 100644 index 000000000..e7b8dfb1b --- /dev/null +++ b/packages/playground/basic/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/playground/basic/src/App.svelte b/packages/playground/basic/src/App.svelte new file mode 100644 index 000000000..b7d9a1e20 --- /dev/null +++ b/packages/playground/basic/src/App.svelte @@ -0,0 +1,63 @@ + + +
+ +

Vite + Svelte

+ +
+
local
+
imported
+
+ imported function +
+
+ +

+ Check out SvelteKit, the official Svelte app framework powered by Vite! +

+ +

Click on the Vite and Svelte logos to learn more

+
+ + diff --git a/packages/playground/basic/src/app.css b/packages/playground/basic/src/app.css new file mode 100644 index 000000000..e7f3e4652 --- /dev/null +++ b/packages/playground/basic/src/app.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/packages/playground/basic/src/assets/svelte.svg b/packages/playground/basic/src/assets/svelte.svg new file mode 100644 index 000000000..c5e08481f --- /dev/null +++ b/packages/playground/basic/src/assets/svelte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/playground/basic/src/lib/Counter.svelte b/packages/playground/basic/src/lib/Counter.svelte new file mode 100644 index 000000000..4bfb39d3e --- /dev/null +++ b/packages/playground/basic/src/lib/Counter.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/packages/playground/basic/src/lib/Counter.svelte.js b/packages/playground/basic/src/lib/Counter.svelte.js new file mode 100644 index 000000000..3fd8bdac0 --- /dev/null +++ b/packages/playground/basic/src/lib/Counter.svelte.js @@ -0,0 +1,11 @@ +export function createCounter(n = 0) { + let count = $state(n); + return { + get count() { + return count; + }, + increment() { + count++; + } + }; +} diff --git a/packages/playground/basic/src/main.js b/packages/playground/basic/src/main.js new file mode 100644 index 000000000..2607d8649 --- /dev/null +++ b/packages/playground/basic/src/main.js @@ -0,0 +1,19 @@ +import './app.css'; +import App from './App.svelte'; +import { VERSION } from 'svelte/compiler'; +import * as svelte from 'svelte'; +const isSvelte5 = VERSION.startsWith('5.'); +let app; + +if (isSvelte5) { + app = [window.unmount] = svelte.mount(App, { + props: {}, + target: document.getElementById('app') + }); +} else { + app = new App({ + target: document.getElementById('app') + }); +} + +export default app; diff --git a/packages/playground/basic/src/vite-env.d.ts b/packages/playground/basic/src/vite-env.d.ts new file mode 100644 index 000000000..4078e7476 --- /dev/null +++ b/packages/playground/basic/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/playground/basic/svelte.config.js b/packages/playground/basic/svelte.config.js new file mode 100644 index 000000000..c6e11400a --- /dev/null +++ b/packages/playground/basic/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess() +}; diff --git a/packages/playground/basic/vite.config.js b/packages/playground/basic/vite.config.js new file mode 100644 index 000000000..4a89713c0 --- /dev/null +++ b/packages/playground/basic/vite.config.js @@ -0,0 +1,10 @@ +import { defineConfig } from 'vite'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; + +// https://vitejs.dev/config/ +export default defineConfig({ + optimizeDeps: { + include: ['e2e-test-dep-svelte-module'] + }, + plugins: [svelte()] +}); diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json index 81a02fb1c..d5ed58eee 100644 --- a/packages/vite-plugin-svelte/package.json +++ b/packages/vite-plugin-svelte/package.json @@ -50,7 +50,7 @@ "vitefu": "^0.2.5" }, "peerDependencies": { - "svelte": "^4.0.0", + "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.0-beta.1 || ^5.0.0" }, "devDependencies": { diff --git a/packages/vite-plugin-svelte/src/index.js b/packages/vite-plugin-svelte/src/index.js index 7b23ad7bf..f0f0fd827 100644 --- a/packages/vite-plugin-svelte/src/index.js +++ b/packages/vite-plugin-svelte/src/index.js @@ -3,9 +3,9 @@ import fs from 'node:fs'; import { svelteInspector } from '@sveltejs/vite-plugin-svelte-inspector'; import { handleHotUpdate } from './handle-hot-update.js'; -import { log, logCompilerWarnings } from './utils/log.js'; +import { log, logCompilerWarnings, logSvelte5Warning } from './utils/log.js'; import { createCompileSvelte } from './utils/compile.js'; -import { buildIdParser } from './utils/id.js'; +import { buildIdParser, buildModuleIdParser } from './utils/id.js'; import { buildExtraViteConfig, validateInlineOptions, @@ -19,6 +19,8 @@ import { toRollupError } from './utils/error.js'; import { saveSvelteMetadata } from './utils/optimizer.js'; import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache.js'; import { loadRaw } from './utils/load-raw.js'; +import { isSvelte5 } from './utils/svelte-version.js'; +import * as svelteCompiler from 'svelte/compiler'; /** * @param {Partial} [inlineOptions] @@ -33,6 +35,8 @@ export function svelte(inlineOptions) { // updated in configResolved hook /** @type {import('./types/id.d.ts').IdParser} */ let requestParser; + /** @type {import('./types/id.d.ts').ModuleIdParser} */ + let moduleRequestParser; /** @type {import('./types/options.d.ts').ResolvedOptions} */ let options; /** @type {import('vite').ResolvedConfig} */ @@ -185,9 +189,41 @@ export function svelte(inlineOptions) { async buildEnd() { await options.stats?.finishAll(); } - }, - svelteInspector() + } ]; + if (isSvelte5) { + logSvelte5Warning(); + // TODO move to separate file + plugins.push({ + name: 'vite-plugin-svelte-module', + enforce: 'post', + async configResolved() { + moduleRequestParser = buildModuleIdParser(options); + }, + async transform(code, id, opts) { + const ssr = !!opts?.ssr; + const moduleRequest = moduleRequestParser(id, ssr); + if (!moduleRequest) { + return; + } + try { + // @ts-expect-error compileModule does not exist in svelte4 + const compileResult = await svelteCompiler.compileModule(code, { + generate: ssr ? 'server' : 'client', + filename: moduleRequest.filename + }); + logCompilerWarnings(moduleRequest, compileResult.warnings, options); + return compileResult.js; + } catch (e) { + throw toRollupError(e, options); + } + } + }); + } + if (!isSvelte5) { + // TODO reenable once svelte5 has support and update utils/log.js#logSvelte5Warning + plugins.push(svelteInspector()); + } return plugins; } diff --git a/packages/vite-plugin-svelte/src/public.d.ts b/packages/vite-plugin-svelte/src/public.d.ts index 672c697a2..b683093d2 100644 --- a/packages/vite-plugin-svelte/src/public.d.ts +++ b/packages/vite-plugin-svelte/src/public.d.ts @@ -174,6 +174,14 @@ interface ExperimentalOptions { * @default false */ disableSvelteResolveWarnings?: boolean; + + compileModule?: CompileModuleOptions; +} + +interface CompileModuleOptions { + extensions?: string[]; + include?: Arrayable; + exclude?: Arrayable; } type Arrayable = T | T[]; diff --git a/packages/vite-plugin-svelte/src/types/id.d.ts b/packages/vite-plugin-svelte/src/types/id.d.ts index 205afd832..b393c1562 100644 --- a/packages/vite-plugin-svelte/src/types/id.d.ts +++ b/packages/vite-plugin-svelte/src/types/id.d.ts @@ -28,4 +28,18 @@ export interface SvelteRequest { raw: boolean; } +export interface SvelteModuleRequest { + id: string; + filename: string; + normalizedFilename: string; + query: RequestQuery; + timestamp: number; + ssr: boolean; +} + export type IdParser = (id: string, ssr: boolean, timestamp?: number) => SvelteRequest | undefined; +export type ModuleIdParser = ( + id: string, + ssr: boolean, + timestamp?: number +) => SvelteModuleRequest | undefined; diff --git a/packages/vite-plugin-svelte/src/utils/compile.js b/packages/vite-plugin-svelte/src/utils/compile.js index d43bc90e3..489168013 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.js +++ b/packages/vite-plugin-svelte/src/utils/compile.js @@ -1,4 +1,4 @@ -import { compile, preprocess, walk } from 'svelte/compiler'; +import * as svelte from 'svelte/compiler'; // @ts-ignore import { createMakeHot } from 'svelte-hmr'; import { safeBase64Hash } from './hash.js'; @@ -10,6 +10,7 @@ import { } from './preprocess.js'; import { mapToRelative } from './sourcemaps.js'; import { enhanceCompileError } from './error.js'; +import { isSvelte5 } from './svelte-version.js'; const scriptLangRE = /