merge main

Author: benmccann

.changeset/heavy-cars-ring.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure $host rune correctly compiles in variable declarations

.changeset/hip-beers-shake.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure types are easier to follow for TypeScript

.changeset/metal-cameras-jump.md

@@ -128,6 +128,7 @@
     "dirty-donuts-yell",
     "dirty-eyes-itch",
     "dirty-garlics-design",
+    "dirty-jars-tap",
     "dirty-pens-look",
     "dirty-pianos-eat",
     "dirty-tips-add",
@@ -306,6 +307,7 @@
     "healthy-mangos-brush",
     "healthy-planes-vanish",
     "healthy-zebras-accept",
+    "heavy-cars-ring",
     "heavy-comics-move",
     "heavy-doors-applaud",
     "heavy-ducks-leave",
@@ -344,6 +346,7 @@
     "itchy-kings-deliver",
     "itchy-lemons-punch",
     "itchy-lions-wash",
+    "itchy-oranges-behave",
     "itchy-panthers-shave",
     "itchy-peaches-compare",
     "itchy-pianos-marry",
@@ -508,6 +511,7 @@
     "orange-yaks-protect",
     "orange-zoos-heal",
     "perfect-actors-bake",
+    "perfect-cooks-shop",
     "perfect-hairs-matter",
     "perfect-hats-dance",
     "perfect-pugs-shake",
@@ -542,6 +546,7 @@
     "popular-roses-teach",
     "popular-walls-hunt",
     "pretty-ties-help",
+    "proud-lobsters-lie",
     "proud-pets-hang",
     "proud-queens-sniff",
     "purple-dragons-peel",

.changeset/pre.json

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: Ensure imports are above other statements

.changeset/proud-lobsters-lie.md

@@ -29,7 +29,7 @@
     "bench:debug": "node --allow-natives-syntax --inspect-brk ./benchmarking/run.js"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.6",
+    "@changesets/cli": "^2.27.8",
     "@sveltejs/eslint-config": "^8.0.1",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",

package.json

@@ -1,5 +1,19 @@
 # svelte
 
+## 5.0.0-next.244
+
+### Patch Changes
+
+- fix: error on duplicate style and class directive ([#13097](https://github.com/sveltejs/svelte/pull/13097))
+
+- fix: ensure $host rune correctly compiles in variable declarations ([#13127](https://github.com/sveltejs/svelte/pull/13127))
+
+- fix: remove unnecessary update assignments ([#13113](https://github.com/sveltejs/svelte/pull/13113))
+
+- fix: error at compile time on unsupported TypeScript language features ([#12982](https://github.com/sveltejs/svelte/pull/12982))
+
+- fix: Ensure imports are above other statements ([#13132](https://github.com/sveltejs/svelte/pull/13132))
+
 ## 5.0.0-next.243
 
 ### Patch Changes

packages/svelte/CHANGELOG.md

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.243",
+  "version": "5.0.0-next.244",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/package.json

@@ -60,3 +60,14 @@ if (bad_links.length > 0) {
 
 	process.exit(1);
 }
+
+if (types.includes('\texport { ')) {
+	// eslint-disable-next-line no-console
+	console.error(
+		`The generated types file should not contain 'export { ... }' statements. ` +
+			`TypeScript is bad at following these: when creating d.ts files through @sveltejs/package, and one of these types is used, ` +
+			`TypeScript will likely fail at generating a d.ts file. ` +
+			`To prevent this, do 'export interface Foo {}' instead of 'interface Foo {}' and then 'export { Foo }'`
+	);
+	process.exit(1);
+}

packages/svelte/scripts/generate-types.js

@@ -457,10 +457,22 @@ export function client_component(analysis, options) {
 		analysis.uses_slots ||
 		analysis.slot_names.size > 0;
 
-	// we hoist all the import declarations to the top of the file
-	const body = [...module.body, ...state.hoisted].sort((body_a, body_b) =>
-		body_a.type === 'ImportDeclaration' && body_b.type !== 'ImportDeclaration' ? -1 : 1
-	);
+	// Merge hoisted statements into module body.
+	// Ensure imports are on top, with the order preserved, then module body, then hoisted statements
+	/** @type {ESTree.ImportDeclaration[]} */
+	const imports = [];
+	/** @type {ESTree.Program['body']} */
+	let body = [];
+
+	for (const entry of [...module.body, ...state.hoisted]) {
+		if (entry.type === 'ImportDeclaration') {
+			imports.push(entry);
+		} else {
+			body.push(entry);
+		}
+	}
+
+	body = [...imports, ...body];
 
 	const component = b.function_declaration(
 		b.id(analysis.name),

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -28,7 +28,8 @@ export function VariableDeclaration(node, context) {
 				rune === '$effect.tracking' ||
 				rune === '$effect.root' ||
 				rune === '$inspect' ||
-				rune === '$state.snapshot'
+				rune === '$state.snapshot' ||
+				rune === '$host'
 			) {
 				if (init != null && is_hoisted_function(init)) {
 					context.state.hoisted.push(

packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js

@@ -3,28 +3,3 @@ export { SvelteSet } from './set.js';
 export { SvelteMap } from './map.js';
 export { SvelteURL } from './url.js';
 export { SvelteURLSearchParams } from './url-search-params.js';
-
-/** @deprecated Use `SvelteDate` instead */
-export function Date() {
-	throw new Error('Date has been removed, use SvelteDate instead.');
-}
-
-/** @deprecated Use `SvelteSet` instead */
-export function Set() {
-	throw new Error('Set has been removed, use SvelteSet instead.');
-}
-
-/** @deprecated Use `SvelteMap` instead */
-export function Map() {
-	throw new Error('Map has been removed, use SvelteMap instead.');
-}
-
-/** @deprecated Use `SvelteURL` instead */
-export function URL() {
-	throw new Error('URL has been removed, use SvelteURL instead.');
-}
-
-/** @deprecated Use `SvelteURLSearchParams` instead */
-export function URLSearchParams() {
-	throw new Error('URLSearchParams has been removed, use SvelteURLSearchParams instead.');
-}

packages/svelte/src/reactivity/index-client.js

@@ -3,28 +3,3 @@ export const SvelteSet = globalThis.Set;
 export const SvelteMap = globalThis.Map;
 export const SvelteURL = globalThis.URL;
 export const SvelteURLSearchParams = globalThis.URLSearchParams;
-
-/** @deprecated Use `SvelteDate` instead */
-export function Date() {
-	throw new Error('Date has been removed, use SvelteDate instead.');
-}
-
-/** @deprecated Use `SvelteSet` instead */
-export function Set() {
-	throw new Error('Set has been removed, use SvelteSet instead.');
-}
-
-/** @deprecated Use `SvelteMap` instead */
-export function Map() {
-	throw new Error('Map has been removed, use SvelteMap instead.');
-}
-
-/** @deprecated Use `SvelteURL` instead */
-export function URL() {
-	throw new Error('URL has been removed, use SvelteURL instead.');
-}
-
-/** @deprecated Use `SvelteURLSearchParams` instead */
-export function URLSearchParams() {
-	throw new Error('URLSearchParams has been removed, use SvelteURLSearchParams instead.');
-}

packages/svelte/src/reactivity/index-server.js

@@ -1,11 +1,11 @@
 /** Callback to inform of a value updates. */
-type Subscriber<T> = (value: T) => void;
+export type Subscriber<T> = (value: T) => void;
 
 /** Unsubscribes from value updates. */
-type Unsubscriber = () => void;
+export type Unsubscriber = () => void;
 
 /** Callback to update a value. */
-type Updater<T> = (value: T) => T;
+export type Updater<T> = (value: T) => T;
 
 /**
  * Start and stop notification callbacks.
@@ -16,13 +16,13 @@ type Updater<T> = (value: T) => T;
  * @returns {void | (() => void)} Optionally, a cleanup function that is called when the last remaining
  * subscriber unsubscribes.
  */
-type StartStopNotifier<T> = (
+export type StartStopNotifier<T> = (
 	set: (value: T) => void,
 	update: (fn: Updater<T>) => void
 ) => void | (() => void);
 
 /** Readable interface for subscribing. */
-interface Readable<T> {
+export interface Readable<T> {
 	/**
 	 * Subscribe on value changes.
 	 * @param run subscription callback
@@ -32,7 +32,7 @@ interface Readable<T> {
 }
 
 /** Writable interface for both updating and subscribing. */
-interface Writable<T> extends Readable<T> {
+export interface Writable<T> extends Readable<T> {
 	/**
 	 * Set value and inform subscribers.
 	 * @param value to set
@@ -46,6 +46,4 @@ interface Writable<T> extends Readable<T> {
 	update(this: void, updater: Updater<T>): void;
 }
 
-export { Readable, StartStopNotifier, Subscriber, Unsubscriber, Updater, Writable };
-
 export * from './index-client.js';

packages/svelte/src/store/public.d.ts

@@ -1,28 +1,28 @@
-type EasingFunction = (t: number) => number;
+export type EasingFunction = (t: number) => number;
 
-interface TransitionConfig {
+export interface TransitionConfig {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
 	css?: (t: number, u: number) => string;
 	tick?: (t: number, u: number) => void;
 }
 
-interface BlurParams {
+export interface BlurParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
 	amount?: number | string;
 	opacity?: number;
 }
 
-interface FadeParams {
+export interface FadeParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
 }
 
-interface FlyParams {
+export interface FlyParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
@@ -31,44 +31,32 @@ interface FlyParams {
 	opacity?: number;
 }
 
-interface SlideParams {
+export interface SlideParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
 	axis?: 'x' | 'y';
 }
 
-interface ScaleParams {
+export interface ScaleParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
 	start?: number;
 	opacity?: number;
 }
 
-interface DrawParams {
+export interface DrawParams {
 	delay?: number;
 	speed?: number;
 	duration?: number | ((len: number) => number);
 	easing?: EasingFunction;
 }
 
-interface CrossfadeParams {
+export interface CrossfadeParams {
 	delay?: number;
 	duration?: number | ((len: number) => number);
 	easing?: EasingFunction;
 }
 
-export {
-	EasingFunction,
-	TransitionConfig,
-	BlurParams,
-	FadeParams,
-	FlyParams,
-	SlideParams,
-	ScaleParams,
-	DrawParams,
-	CrossfadeParams
-};
-
 export * from './index.js';

packages/svelte/src/transition/public.d.ts

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.243';
+export const VERSION = '5.0.0-next.244';
 export const PUBLIC_VERSION = '5';

packages/svelte/src/version.js

@@ -16,11 +16,13 @@ export default test({
 
 		el.shadowRoot.querySelectorAll('button')[0].click();
 		el.shadowRoot.querySelectorAll('button')[1].click();
-		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']);
+		el.shadowRoot.querySelectorAll('button')[2].click();
+		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome', 'greeting', 'bonjour']);
 
 		el.removeEventListener('greeting', handle_evt);
 		el.shadowRoot.querySelectorAll('button')[0].click();
 		el.shadowRoot.querySelectorAll('button')[1].click();
-		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']);
+		el.shadowRoot.querySelectorAll('button')[2].click();
+		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome', 'greeting', 'bonjour']);
 	}
 });

packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js

@@ -8,7 +8,12 @@
 	function welcome() {
 		$host().dispatchEvent(new CustomEvent('greeting', { detail: 'welcome' }))
 	}
+	function bonjour() {
+		const element = $host();
+		element.dispatchEvent(new CustomEvent('greeting', { detail: 'bonjour' }))
+	}
 </script>
 
 <button onclick={() => greet('hello')}>say hello</button>
 <button onclick={welcome}>say welcome</button>
+<button onclick={bonjour}>say bonjour</button>