Merge remote-tracking branch 'upstream/version-4' into a11y-no-noninteractive-element-interactions

.github/workflows/ci.yml

@@ -6,47 +6,12 @@ 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:
       matrix:
-        node-version: [8, 10, 12, 14, 16, 18]
+        node-version: [14, 16, 18]
         os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
       - uses: actions/checkout@v3
@@ -54,24 +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
-      - name: Get Node version ${{ runner.os }}
-        run: echo "NODE_VERSION=`node --version`" >> $GITHUB_ENV
-        if: runner.os != 'Windows'
-      - name: Get Node version ${{ runner.os }}
-        run: |
-          chcp 65001
-          echo ("NODE_VERSION=$(node --version)") >> $env:GITHUB_ENV
-        if: runner.os == 'Windows'
-      - run: npm install --save-dev puppeteer@13
-        if: ${{ runner.os == 'Linux' && (!startsWith(env.NODE_VERSION, 'v8.') && !startsWith(env.NODE_VERSION, 'v10.')) }}
       - 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,45 +119,45 @@
   },
   "homepage": "https://svelte.dev",
   "devDependencies": {
-    "@ampproject/remapping": "^0.3.0",
+    "@ampproject/remapping": "^2.2.1",
     "@jridgewell/sourcemap-codec": "^1.4.15",
-    "@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-sucrase": "^5.0.1",
-    "@rollup/plugin-typescript": "^2.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/mocha": "^10.0.1",
-    "@types/node": "^8.10.53",
+    "@types/node": "^14.14.31",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/parser": "^5.58.0",
-    "acorn": "^8.8.1",
+    "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": "^2.0.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": "^3.7.5",
+    "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,3 +1,4 @@
+import type { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping';
 import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Stats from '../Stats';
@@ -32,7 +33,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/compile/render_dom/wrappers/Element/index.ts

@@ -765,20 +765,33 @@ export default class ElementWrapper extends Wrapper {
 		`);
 
 		binding_group.events.forEach(name => {
-			const resizeListenerFunctions = {
+			if (['elementresize', 'elementresizecontentbox', 'elementresizeborderbox', 'elementresizedevicepixelcontentbox'].indexOf(name) !== -1) {
-				elementresize: 'add_iframe_resize_listener',
-				elementresizecontentbox: 'resize_observer_content_box.observe',
-				elementresizeborderbox: 'resize_observer_border_box.observe',
-				elementresizedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe'
-			};
-
-			if (name in resizeListenerFunctions) {
 				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
 				block.add_variable(resize_listener);
 
-				block.chunks.mount.push(
+				// Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it
-					b`${resize_listener} = @${resizeListenerFunctions[name]}(${this.var}, ${callee}.bind(${this.var}));`
+				switch (name) {
-				);
+					case 'elementresize':
+						block.chunks.mount.push(
+							b`${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizecontentbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizeborderbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+					case 'elementresizedevicepixelcontentbox':
+						block.chunks.mount.push(
+							b`${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));`
+						);
+						break;
+				}
 
 				block.chunks.destroy.push(
 					b`${resize_listener}();`

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 { cubicOut } from '../easing';
-import { is_function } from 'svelte/internal';
+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 './internal';
-} from 'svelte/internal';
+export type { ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents } from './internal';

src/runtime/internal/ResizeObserverSingleton.ts

@@ -1,3 +1,5 @@
+import { globals } from './globals';
+
 /**
  * Resize observer singleton.
  * One listener per element only!
@@ -15,19 +17,19 @@ export class ResizeObserverSingleton {
 		};
 	}
 
-	static readonly entries: WeakMap<Element, ResizeObserverEntry> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globals ? new WeakMap() : undefined;
-
-	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
 	private _observer?: ResizeObserver;
 	private _getObserver() {
 		return this._observer ?? (this._observer = new ResizeObserver((entries) => {
 			for (const entry of entries) {
-				ResizeObserverSingleton.entries.set(entry.target, entry);
+				(ResizeObserverSingleton as any).entries.set(entry.target, entry);
 				this._listeners.get(entry.target)?.(entry);
 			}
 		}));
 	}
 }
+// Needs to be written like this to pass the tree-shake-test
+(ResizeObserverSingleton as any).entries = 'WeakMap' in globals ? new WeakMap() : undefined;
 
 type Listener = (entry: ResizeObserverEntry)=>any;
 

src/runtime/internal/dom.ts

@@ -747,9 +747,9 @@ export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) {
 	};
 }
 
-export const resize_observer_content_box = new ResizeObserverSingleton({ box: 'content-box' });
+export const resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'content-box' });
-export const resize_observer_border_box = new ResizeObserverSingleton({ box: 'border-box' });
+export const resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'border-box' });
-export const resize_observer_device_pixel_content_box = new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
+export const resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
 export { ResizeObserverSingleton };
 
 export function toggle_class(element, name, toggle) {

src/runtime/internal/transitions.ts

@@ -376,8 +376,10 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
 		run(b: INTRO | OUTRO) {
 			if (is_function(config)) {
 				wait().then(() => {
+					const opts: TransitionOptions = { direction: b ? 'in' : 'out' };
+					
 					// @ts-ignore
-					config = config(options);
+					config = config(opts);
 					go(b);
 				});
 			} else {

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 { Readable, writable } from '../store';
-import { loop, now, Task } from 'svelte/internal';
+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 { Readable, writable } from '../store';
-import { assign, loop, now, Task } from 'svelte/internal';
+import { assign, loop, now, Task } from '../internal';
-import { linear } from 'svelte/easing';
+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 { cubicOut, cubicInOut, linear } from '../easing';
-import { assign, split_css_unit, is_function } from 'svelte/internal';
+import { assign, split_css_unit, is_function } from '../internal';
 
 export type EasingFunction = (t: number) => number;
 

test/js/samples/bind-width-height/expected.js

@@ -1,8 +1,8 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	add_iframe_resize_listener,
 	add_render_callback,
-	add_resize_listener,
 	detach,
 	element,
 	init,
@@ -23,7 +23,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
+			div_resize_listener = add_iframe_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
 		},
 		p: noop,
 		i: noop,

test/js/samples/video-bindings/expected.js

@@ -1,8 +1,8 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteComponent,
+	add_iframe_resize_listener,
 	add_render_callback,
-	add_resize_listener,
 	detach,
 	element,
 	init,
@@ -42,7 +42,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			insert(target, video, anchor);
-			video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
+			video_resize_listener = add_iframe_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video));
 
 			if (!mounted) {
 				dispose = [

test/runtime/samples/transition-js-deferred-option-direction/_config.js

@@ -4,16 +4,19 @@ export default {
 
 		const div_in = target.querySelector('#in');
 		const div_out = target.querySelector('#out');
-		const div_both = target.querySelector('#both');
+		const div_bothin = target.querySelector('#both-in');
+		const div_bothout = target.querySelector('#both-out');
 
-		assert.equal(div_in.initial, 'in');
+		assert.equal(div_in.directions, 'in,in');
-		assert.equal(div_out.initial, 'out');
+		assert.equal(div_out.directions, 'out');
-		assert.equal(div_both.initial, 'both');
+		assert.equal(div_bothin.directions, 'both');
+		assert.equal(div_bothout.directions, 'both');
 
 		return Promise.resolve().then(() => {
-			assert.equal(div_in.later, 'in');
+			assert.equal(div_in.directions, 'in,in');
-			assert.equal(div_out.later, 'out');
+			assert.equal(div_out.directions, 'out,out');
-			assert.equal(div_both.later, 'both');
+			assert.equal(div_bothin.directions, 'both,in');
+			assert.equal(div_bothout.directions, 'both,out');
 		});
 	}
 };

test/runtime/samples/transition-js-deferred-option-direction/main.svelte

@@ -2,10 +2,10 @@
 	export let visible;
 
 	function foo(node, _params, options) {
-		node.initial = options.direction;
+		node.directions = options.direction;
 
 		return (opts) => {
-			node.later = opts.direction;
+			node.directions += "," + opts.direction;
 
 			return {
 				duration: 10
@@ -15,10 +15,11 @@
 </script>
 
 {#if visible}
-	<div id="both" transition:foo></div>
+	<div id="both-in" transition:foo />
-	<div id="in" in:foo></div>
+	<div id="in" in:foo />
 {/if}
 
 {#if !visible}
-	<div id="out" out:foo></div>
+	<div id="out" out:foo />
+	<div id="both-out" transition:foo={{ duration: 500 }} />
 {/if}

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,