Skip to content

Commit a1dd21d

Browse files
dominikgdominikg
authored
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
1 parent 016aa65 commit a1dd21d

File tree

98 files changed

+1363
-1743
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1363
-1743
lines changed

‎.changeset/thin-comics-work.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/vite-plugin-svelte': minor
3+
---
4+
5+
Add experimental support for svelte5

‎.eslintrc.cjs

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ module.exports = {
99
],
1010
globals: {
1111
Atomics: 'readonly',
12-
SharedArrayBuffer: 'readonly'
12+
SharedArrayBuffer: 'readonly',
13+
$derived: 'readonly',
14+
$effect: 'readonly',
15+
$props: 'readonly',
16+
$state: 'readonly'
1317
},
1418
plugins: ['@typescript-eslint', 'html', 'markdown', 'unicorn'],
1519
parser: '@typescript-eslint/parser',

‎.github/workflows/ci.yml

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# build and test on linux, windows, mac with node 14, 16, 18
1+
# build and test on linux, windows, mac with node 18,20
22
name: CI
33

44
on:
@@ -76,11 +76,17 @@ jobs:
7676
strategy:
7777
fail-fast: false
7878
matrix:
79-
node: [18]
79+
node: [20]
8080
os: [ubuntu-latest, macos-latest, windows-latest]
81+
svelte: [4]
8182
include:
82-
- node: 20
83+
- node: 18
8384
os: ubuntu-latest
85+
svelte: 4
86+
# disable running tests with svelte5 in ci for now. Enable once they pass
87+
# - node: 20
88+
# os: ubuntu-latest
89+
# svelte: 5
8490
steps:
8591
- uses: actions/checkout@v4
8692
- uses: actions/setup-node@v4
@@ -99,6 +105,9 @@ jobs:
99105
cache-dependency-path: '**/pnpm-lock.yaml'
100106
- name: install
101107
run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts
108+
# - name: use svelte5
109+
# if: (${{matrix.svelte == 5 }})
110+
# run: pnpm i -Dw svelte@^5.0.0-next.1 && pnpm install
102111
- name: install playwright chromium
103112
run: pnpm playwright install chromium
104113
- name: run tests

‎packages/e2e-tests/_test_dependencies/svelte-module/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { createCounter } from './src/counter/Counter.svelte.js';
2+
export { default as Counter } from './src/counter/Counter.svelte';

‎packages/e2e-tests/_test_dependencies/svelte-module/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"version": "1.0.0",
3+
"private": true,
4+
"name": "e2e-test-dep-svelte-module",
5+
"main": "index.js",
6+
"svelte": "index.js",
7+
"files": [
8+
"src",
9+
"index.js"
10+
],
11+
"exports": {
12+
".": {
13+
"import": {
14+
"svelte": "./index.js"
15+
}
16+
}
17+
},
18+
"type": "module"
19+
}

‎packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import { createCounter } from './Counter.svelte.js';
3+
const counter = createCounter(0);
4+
let localCounter = $state(0);
5+
</script>
6+
7+
<button on:click={counter.increment}>
8+
count is {counter.count}
9+
</button>
10+
11+
<button on:click={() => localCounter++}>
12+
local count is {localCounter}
13+
</button>

‎packages/e2e-tests/_test_dependencies/svelte-module/src/counter/Counter.svelte.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export function createCounter(n = 0) {
2+
let count = $state(n);
3+
return {
4+
get count() {
5+
return count;
6+
},
7+
increment() {
8+
count++;
9+
}
10+
};
11+
}

‎packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import { expect, test } from 'vitest';
2-
import { isBuild, findAssetFile, page } from '~utils';
2+
import { isBuild, findAssetFile, page, isSvelte4 } from '~utils';
33

44
test('should prefix position: sticky for code in source tree', async () => {
5-
const stickyStyle = isBuild
5+
let stickyStyle = isBuild
66
? await getStyleFromDist('sticky')
77
: await getStyleFromPage(page, 'sticky');
8+
if (!isSvelte4) {
9+
// svelte5 doesn't minify rules, do it here to be able to have one expect
10+
stickyStyle = stickyStyle.replace(/\s/g, '').replace(/;$/, '');
11+
}
812
expect(stickyStyle).toBe('position:-webkit-sticky;position:sticky');
913
});
1014

‎packages/e2e-tests/autoprefixer-browerslist/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/configfile-custom/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/configfile-esm/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/css-dev-sourcemap/__tests__/css-dev-sourcemap.spec.ts

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { browserLogs, getColor, getText, isBuild } from '~utils';
1+
import { browserLogs, getColor, getText, isBuild, isSvelte4 } from '~utils';
22
import { expect } from 'vitest';
33

44
test('should not have failed requests', async () => {
@@ -19,10 +19,17 @@ if (!isBuild) {
1919
const style = await getText('style[data-vite-dev-id*="App.svelte"]');
2020
const lines = style.split('\n').map((l) => l.trim());
2121
const css = lines[0];
22-
const mapComment = lines[1];
23-
expect(css).toBe(
24-
'.foo.s-XsEmFtvddWTw{color:magenta}#test.s-XsEmFtvddWTw{color:red}.s-XsEmFtvddWTw{}'
25-
);
22+
const mapComment = lines[lines.length - 1];
23+
if (isSvelte4) {
24+
expect(css).toBe(
25+
'.foo.s-XsEmFtvddWTw{color:magenta}#test.s-XsEmFtvddWTw{color:red}.s-XsEmFtvddWTw{}'
26+
);
27+
} else {
28+
// TODO svelte 5 returns style multiline and doesn't set the right css hash class
29+
// figure out a better way to expect here
30+
expect(style).toMatch('color: magenta');
31+
expect(style).toMatch('color: red');
32+
}
2633
const b64start = '/*# sourceMappingURL=data:application/json;base64,';
2734
const b64end = ' */';
2835
expect(mapComment.startsWith(b64start));

‎packages/e2e-tests/css-dev-sourcemap/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/css-none/__tests__/css-none.spec.ts

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1-
import { browserLogs, findAssetFile, getColor, getText, isBuild } from '~utils';
1+
import { browserLogs, findAssetFile, getColor, getText, isBuild, isSvelte4 } from '~utils';
2+
import { describe, test, expect } from 'vitest';
3+
// svelte5 removed the css: none option
4+
describe.runIf(isSvelte4)('css-none', async () => {
5+
test('should not have failed requests', async () => {
6+
browserLogs.forEach((msg) => {
7+
expect(msg).not.toMatch('404');
8+
});
9+
});
210

3-
test('should not have failed requests', async () => {
4-
browserLogs.forEach((msg) => {
5-
expect(msg).not.toMatch('404');
11+
test('should not apply component css', async () => {
12+
expect(await getText('#test')).toBe('not red');
13+
expect(await getColor('#test')).not.toBe('red');
614
});
7-
});
815

9-
test('should not apply component css', async () => {
10-
expect(await getText('#test')).toBe('not red');
11-
expect(await getColor('#test')).not.toBe('red');
16+
if (isBuild) {
17+
test('should not output css', async () => {
18+
const css = await findAssetFile(/index.*\.css/);
19+
expect(css).toBe(''); // findAssetFile returns empty for not found
20+
});
21+
}
1222
});
13-
14-
if (isBuild) {
15-
test('should not output css', async () => {
16-
const css = await findAssetFile(/index.*\.css/);
17-
expect(css).toBe(''); // findAssetFile returns empty for not found
18-
});
19-
}

‎packages/e2e-tests/css-none/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/custom-extensions/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/dynamic-compile-options/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/env/src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

‎packages/e2e-tests/hmr/src/index.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import App from './App.svelte';
22

3-
const app = new App({
4-
target: document.body
5-
});
6-
7-
export default app;
3+
if (App.toString().startsWith('class ')) {
4+
new App({ target: document.body });
5+
} else {
6+
import('svelte').then(({ mount }) => mount(App, { target: document.body }));
7+
}

0 commit comments

Comments
 (0)