merge version-4 branch

.github/workflows/ci.yml

@@ -6,42 +6,7 @@ on:
 permissions:
   contents: read # to fetch code (actions/checkout)
 jobs:
-  Setup:
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [ubuntu-latest, windows-latest, macOS-latest]
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: npm
-      - run: npm install
-        env:
-          SKIP_PREPARE: true
-      - run: npm run build
-        env:
-          PUBLISH: true
-      - name: Upload build assets
-        id: upload-artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: build-assets
-          path: |
-            index.*
-            compiler.*
-            ssr.*
-            action/
-            animate/
-            easing/
-            internal/
-            motion/
-            store/
-            transition/
-            types/
   Tests:
-    needs: Setup
     runs-on: ${{ matrix.os }}
     timeout-minutes: 15
     strategy:
@@ -54,14 +19,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: npm
-      - name: Download build assets
-        uses: actions/download-artifact@v3
-        id: download-artifact
-        with:
-          name: build-assets
       - run: npm install
-        env:
-          SKIP_PREPARE: true
       - run: npm run test:integration
         env:
           CI: true

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Svelte changelog
 
-## Unreleased
+## Unreleased (4.0)
+
+* Minimum supported Node version is now Node 14
+
+## Unreleased (3.0)
 
 * Handle `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752))
 * Add support for resize observer bindings (`<div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>`) ([#8022](https://github.com/sveltejs/svelte/pull/8022))

generate-type-definitions.js

@@ -1,23 +0,0 @@
-// This script generates the TypeScript definitions
-
-const { execSync } = require('child_process');
-const { readFileSync, writeFileSync } = require('fs');
-
-execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly', { stdio: 'inherit' });
-// We need to add these types to the .d.ts files here because if we add them before building, the build will fail,
-// because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
-// We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
-
-function modify(path, modifyFn) {
-    const content = readFileSync(path, 'utf8');
-    writeFileSync(path, modifyFn(content));
-}
-
-modify(
-    'types/runtime/index.d.ts',
-    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
-);
-modify(
-    'types/compiler/index.d.ts',
-    content => content + '\nexport { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from "./interfaces"'
-);

package.json

@@ -86,7 +86,7 @@
     }
   },
   "engines": {
-    "node": ">= 8"
+    "node": ">= 14"
   },
   "types": "types/runtime/index.d.ts",
   "scripts": {
@@ -95,11 +95,11 @@
     "test:unit": "mocha --config .mocharc.unit.js --exit",
     "quicktest": "mocha --exit",
     "build": "rollup -c && npm run tsd",
-    "prepare": "node scripts/skip_in_ci.js npm run build",
+    "prepare": "npm run build",
     "dev": "rollup -cw",
     "posttest": "agadoo internal/index.mjs",
     "prepublishOnly": "node check_publish_env.js && npm run lint && npm run build && npm test",
-    "tsd": "node ./generate-type-definitions.js",
+    "tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
     "lint": "eslint \"{src,test}/**/*.{ts,js}\" --cache"
   },
   "repository": {
@@ -119,46 +119,46 @@
   },
   "homepage": "https://svelte.dev",
   "devDependencies": {
-    "@ampproject/remapping": "^0.3.0",
+    "@ampproject/remapping": "^2.2.1",
     "@jridgewell/sourcemap-codec": "^1.4.15",
     "@jridgewell/trace-mapping": "^0.3.17",
-    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-sucrase": "^3.1.0",
-    "@rollup/plugin-typescript": "^2.0.1",
+    "@rollup/plugin-sucrase": "^5.0.1",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@rollup/plugin-virtual": "^3.0.1",
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
     "@types/aria-query": "^5.0.1",
-    "@types/mocha": "^7.0.0",
-    "@types/node": "^8.10.53",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "acorn": "^8.8.1",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^14.14.31",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "acorn": "^8.8.2",
     "agadoo": "^3.0.0",
     "aria-query": "^5.1.3",
     "axobject-query": "^3.1.1",
     "code-red": "^1.0.0",
     "css-tree": "^2.3.1",
     "eslint": "^8.35.0",
-    "eslint-plugin-import": "^2.27.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-svelte3": "^4.0.0",
     "estree-walker": "^3.0.3",
     "is-reference": "^3.0.1",
-    "jsdom": "^15.2.1",
+    "jsdom": "^21.1.1",
     "kleur": "^4.1.5",
     "locate-character": "^2.0.5",
     "magic-string": "^0.30.0",
-    "mocha": "^7.0.0",
+    "mocha": "^10.2.0",
     "periscopic": "^3.1.0",
     "puppeteer": "^19.8.5",
-    "rollup": "^1.27.14",
+    "rollup": "^3.20.2",
     "source-map": "^0.7.4",
     "source-map-support": "^0.5.21",
     "tiny-glob": "^0.2.9",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.4",
     "util": "^0.12.5"
   }
 }

rollup.config.mjs

@@ -1,24 +1,58 @@
-import fs from 'fs';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
 import replace from '@rollup/plugin-replace';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import sucrase from '@rollup/plugin-sucrase';
 import typescript from '@rollup/plugin-typescript';
-import pkg from './package.json';
+
+const require = createRequire(import.meta.url);
+const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
 
 const is_publish = !!process.env.PUBLISH;
 
 const ts_plugin = is_publish
 	? typescript({
-		include: 'src/**',
 		typescript: require('typescript')
 	})
 	: sucrase({
 		transforms: ['typescript']
 	});
 
-const external = id => id.startsWith('svelte/');
+// The following external and path logic is necessary so that the bundled runtime pieces and the index file
+// reference each other correctly instead of bundling their references to each other
+
+/**
+ * Ensures that relative imports inside `src/runtime` like `./internal` and `../store` are externalized correctly
+ */
+const external = (id, parent_id) => {
+	const parent_segments = parent_id.replace(/\\/g, '/').split('/');
+	// TODO needs to be adjusted when we move to JS modules
+	if (parent_segments[parent_segments.length - 3] === 'runtime') {
+		return /\.\.\/\w+$/.test(id);
+	} else {
+		return id === './internal' && parent_segments[parent_segments.length - 2] === 'runtime';
+	}
+}
+
+/**
+ * Transforms externalized import paths like `../store` into correct relative imports with correct index file extension import
+ */
+const replace_relative_svelte_imports = (id, ending) => {
+	id = id.replace(/\\/g, '/');
+	// TODO needs to be adjusted when we move to JS modules
+	return /src\/runtime\/\w+$/.test(id) && `../${id.split('/').pop()}/${ending}`;
+}
+
+/**
+ * Transforms externalized `./internal` import path into correct relative import with correct index file extension import
+ */
+const replace_relative_internal_import = (id, ending) => {
+	id = id.replace(/\\/g, '/');
+	// TODO needs to be adjusted when we move to JS modules
+	return id.endsWith('src/runtime/internal') && `./internal/${ending}`;
+}
 
 fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index';`);
 
@@ -30,12 +64,12 @@ export default [
 			{
 				file: `index.mjs`,
 				format: 'esm',
-				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
+				paths: id => replace_relative_internal_import(id, 'index.mjs')
 			},
 			{
 				file: `index.js`,
 				format: 'cjs',
-				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
+				paths: id => replace_relative_internal_import(id, 'index.js')
 			}
 		],
 		external,
@@ -48,12 +82,12 @@ export default [
 			{
 				file: `ssr.mjs`,
 				format: 'esm',
-				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
+				paths: id => replace_relative_internal_import(id, 'index.mjs')
 			},
 			{
 				file: `ssr.js`,
 				format: 'cjs',
-				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
+				paths: id => replace_relative_internal_import(id, 'index.js')
 			}
 		],
 		external,
@@ -68,12 +102,12 @@ export default [
 				{
 					file: `${dir}/index.mjs`,
 					format: 'esm',
-					paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.mjs`
+					paths: id => replace_relative_svelte_imports(id, 'index.mjs')
 				},
 				{
 					file: `${dir}/index.js`,
 					format: 'cjs',
-					paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.js`
+					paths: id => replace_relative_svelte_imports(id, 'index.js')
 				}
 			],
 			external,
@@ -83,7 +117,7 @@ export default [
 				}),
 				ts_plugin,
 				{
-					writeBundle(bundle) {
+					writeBundle(_options, bundle) {
 						if (dir === 'internal') {
 							const mod = bundle['index.mjs'];
 							if (mod) {

scripts/skip_in_ci.js

@@ -1,7 +0,0 @@
-if (process.env.SKIP_PREPARE) {
-  console.log('Skipped "prepare" script');
-} else {
-	const { execSync } = require("child_process");
-	const command = process.argv.slice(2).join(" ");
-	execSync(command, { stdio: "inherit" });
-}

src/compiler/compile/Component.ts

@@ -1,5 +1,6 @@
-import { TraceMap, originalPositionFor } from '@jridgewell/trace-mapping';
+import type { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping';
 import { walk } from 'estree-walker';
+import { TraceMap, originalPositionFor } from '@jridgewell/trace-mapping';
 import { getLocator } from 'locate-character';
 import Stats from '../Stats';
 import { reserved, is_valid } from '../utils/names';
@@ -33,7 +34,6 @@ import { print, b } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords';
 import { apply_preprocessor_sourcemap } from '../utils/mapped_code';
 import Element from './nodes/Element';
-import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping/dist/types/types';
 import { clone } from '../utils/clone';
 import compiler_warnings from './compiler_warnings';
 import compiler_errors from './compiler_errors';

src/compiler/compile/nodes/shared/Expression.ts

@@ -24,7 +24,7 @@ type Owner = INode;
 const regex_contains_term_function_expression = /FunctionExpression/;
 
 export default class Expression {
-	type: 'Expression' = 'Expression';
+	type: 'Expression' = 'Expression' as const;
 	component: Component;
 	owner: Owner;
 	node: Node;

src/compiler/compile/render_dom/index.ts

@@ -1,3 +1,4 @@
+import type { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping';
 import { b, x, p } from 'code-red';
 import Component from '../Component';
 import Renderer from './Renderer';
@@ -8,7 +9,6 @@ import { invalidate } from './invalidate';
 import Block from './Block';
 import { ImportDeclaration, ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression, Expression } from 'estree';
 import { apply_preprocessor_sourcemap } from '../../utils/mapped_code';
-import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
 import { flatten } from '../../utils/flatten';
 import check_enable_sourcemap from '../utils/check_enable_sourcemap';
 import { push_array } from '../../utils/push_array';

src/compiler/index.ts

@@ -2,6 +2,6 @@ export { default as compile } from './compile/index';
 export { default as parse } from './parse/index';
 export { default as preprocess } from './preprocess/index';
 export { walk } from 'estree-walker';
+export type { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from './interfaces';
 
 export const VERSION = '__VERSION__';
-// additional exports added through generate-type-definitions.js

src/compiler/preprocess/index.ts

@@ -1,4 +1,4 @@
-import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
+import type { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping';
 import { getLocator } from 'locate-character';
 import { MappedCode, SourceLocation, parse_attached_sourcemap, sourcemap_add_offset, combine_sourcemaps } from '../utils/mapped_code';
 import { decode_map } from './decode_sourcemap';
@@ -57,7 +57,7 @@ class PreprocessResult implements Source {
 
 	to_processed(): Processed {
 		// Combine all the source maps for each preprocessor function into one
-		const map: RawSourceMap = combine_sourcemaps(this.file_basename, this.sourcemap_list);
+		const map = combine_sourcemaps(this.file_basename, this.sourcemap_list);
 
 		return {
 			// TODO return separated output, in future version where svelte.compile supports it:

src/compiler/utils/mapped_code.ts

@@ -1,4 +1,4 @@
-import { DecodedSourceMap, RawSourceMap, SourceMapLoader } from '@ampproject/remapping/dist/types/types';
+import type { DecodedSourceMap, RawSourceMap, SourceMapLoader } from '@ampproject/remapping';
 import remapping from '@ampproject/remapping';
 import { SourceMap } from 'magic-string';
 import { Source, Processed } from '../preprocess/types';
@@ -216,11 +216,11 @@ export class MappedCode {
 export function combine_sourcemaps(
 	filename: string,
 	sourcemap_list: Array<DecodedSourceMap | RawSourceMap>
-): RawSourceMap {
+) {
 	if (sourcemap_list.length == 0) return null;
 
 	let map_idx = 1;
-	const map: RawSourceMap =
+	const map =
 		sourcemap_list.slice(0, -1)
 			.find(m => m.sources.length !== 1) === undefined
 

src/runtime/animate/index.ts

@@ -1,5 +1,5 @@
-import { cubicOut } from 'svelte/easing';
-import { is_function } from 'svelte/internal';
+import { cubicOut } from '../easing';
+import { is_function } from '../internal';
 
 // todo: same as Transition, should it be shared?
 export interface AnimationConfig {

src/runtime/easing/index.ts

@@ -3,7 +3,7 @@ Adapted from https://github.com/mattdesl
 Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
 */
 
-export { identity as linear } from 'svelte/internal';
+export { identity as linear } from '../internal';
 
 export function backInOut(t: number) {
 	const s = 1.70158 * 1.525;

src/runtime/index.ts

@@ -13,5 +13,5 @@ export {
 	createEventDispatcher,
 	SvelteComponentDev as SvelteComponent,
 	SvelteComponentTyped
-	// additional exports added through generate-type-definitions.js
-} from 'svelte/internal';
+} from './internal';
+export type { ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents } from './internal';

src/runtime/internal/utils.ts

@@ -1,4 +1,4 @@
-import { Readable } from 'svelte/store';
+import type { Readable } from '../store';
 
 export function noop() {}
 

src/runtime/motion/spring.ts

@@ -1,5 +1,5 @@
-import { Readable, writable } from 'svelte/store';
-import { loop, now, Task } from 'svelte/internal';
+import { Readable, writable } from '../store';
+import { loop, now, Task } from '../internal';
 import { is_date } from './utils';
 
 interface TickContext<T> {

src/runtime/motion/tweened.ts

@@ -1,6 +1,6 @@
-import { Readable, writable } from 'svelte/store';
-import { assign, loop, now, Task } from 'svelte/internal';
-import { linear } from 'svelte/easing';
+import { Readable, writable } from '../store';
+import { assign, loop, now, Task } from '../internal';
+import { linear } from '../easing';
 import { is_date } from './utils';
 
 function get_interpolator(a, b) {
@@ -122,7 +122,7 @@ export function tweened<T>(value?: T, defaults: Options<T> = {}): Tweened<T> {
 
 			const elapsed = now - start;
 
-			if (elapsed > duration) {
+			if (elapsed > <number> duration) {
 				store.set(value = new_value);
 				return false;
 			}

src/runtime/store/index.ts

@@ -1,4 +1,4 @@
-import { run_all, subscribe, noop, safe_not_equal, is_function, get_store_value } from 'svelte/internal';
+import { run_all, subscribe, noop, safe_not_equal, is_function, get_store_value } from '../internal';
 
 /** Callback to inform of a value updates. */
 export type Subscriber<T> = (value: T) => void;

src/runtime/transition/index.ts

@@ -1,5 +1,5 @@
-import { cubicOut, cubicInOut, linear } from 'svelte/easing';
-import { assign, split_css_unit, is_function } from 'svelte/internal';
+import { cubicOut, cubicInOut, linear } from '../easing';
+import { assign, split_css_unit, is_function } from '../internal';
 
 export type EasingFunction = (t: number) => number;
 

tsconfig.json

@@ -1,12 +1,12 @@
 {
-	"include": [],
+	"include": ["src/**/*"],
 
 	"compilerOptions": {
 		"rootDir": "src",
 
 		// target node v8+ (https://node.green/)
 		// the only missing feature is Array.prototype.values
-		"lib": ["es2017"],
+		"lib": ["es2017", "DOM", "DOM.Iterable"],
 		"target": "es2017",
 
 		"declaration": true,