chore: speed up test execution (#8598)

- shard runtime tests for better use of Vite's test parallelization
- merge custom element and other browser tests to run in one test suite and use esbuild in it
- on some setups only generate code output when test fails

Author: gtm-nayan

.gitignore

@@ -17,6 +17,7 @@ node_modules
 /animate
 /scratch/
 /test/*/samples/_
+/test/runtime/shards
 /yarn-error.log
 _actual*.*
 _output

.prettierignore

@@ -12,3 +12,4 @@ src/compiler/compile/internal_exports.js
 /test/**/expected*
 /test/**/_output
 /types
+!vitest.config.js

package.json

@@ -132,6 +132,7 @@
     "axobject-query": "^3.1.1",
     "code-red": "^1.0.0",
     "css-tree": "^2.3.1",
+    "esbuild": "^0.17.19",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",

pnpm-lock.yaml

@@ -2,7 +2,7 @@
 
 import * as fs from 'node:fs';
 import { assert, describe, it } from 'vitest';
-import * as svelte from '../../src/compiler/index.js';
+import * as svelte from 'svelte/compiler';
 import { create_loader, should_update_expected, try_load_config } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
 
@@ -116,7 +116,7 @@ describe('css', () => {
 });
 
 function replace_css_hash(str) {
-	return str.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => ($1 ? m : 'svelte-xyz'));
+	return str.replace(/svelte-[a-z0-9]+/g, 'svelte-xyz');
 }
 
 function read(file) {

test/css/css.test.js

@@ -3,7 +3,7 @@ import * as path from 'node:path';
 import glob from 'tiny-glob/sync';
 import colors from 'kleur';
 import { assert } from 'vitest';
-import { compile } from '../src/compiler/index.js';
+import { compile } from 'svelte/compiler';
 import { fileURLToPath } from 'node:url';
 
 export function try_load_json(file) {

test/custom-elements/assert.js

@@ -2,7 +2,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { describe, it, assert } from 'vitest';
 import { try_load_config, should_update_expected } from '../helpers.js';
-import * as svelte from '../../src/compiler/index.js';
+import * as svelte from 'svelte/compiler';
 
 describe('js-output', () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {

test/custom-elements/custom-elements.test.js

@@ -1,6 +1,6 @@
 import * as fs from 'node:fs';
 import { assert, describe, it } from 'vitest';
-import * as svelte from '../../src/compiler/index.js';
+import * as svelte from 'svelte/compiler';
 import { try_load_json } from '../helpers.js';
 
 describe('parse', () => {