Merge branch 'main' into class-enhancements

Author: Rich-Harris

.changeset/modern-colts-drive.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treeshake `$inspect.trace` code if unused in modules

.changeset/three-suits-pay.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: Improve typescript DX for $inspect, $props, $bindable, and $host

.github/workflows/ci.yml

@@ -59,7 +59,7 @@ jobs:
         run: pnpm lint
       - name: build and check generated types
         if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail
-        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
   Benchmarks:
     runs-on: ubuntu-latest
     timeout-minutes: 15

.github/workflows/release.yml

@@ -33,7 +33,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -630,6 +630,32 @@ In some situations a selector may target an element that is not 'visible' to the
 Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 ```
 
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+<div>
+	<span class="icon" /> some text!
+</div>
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+<div>
+	<span class="icon"> some text! </span>
+</div>
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```bash
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
 ### event_directive_deprecated
 
 ```

packages/svelte/CHANGELOG.md

@@ -1,5 +1,15 @@
 # svelte
 
+## 5.14.5
+
+### Patch Changes
+
+- fix: bump esrap dependency ([#14765](https://github.com/sveltejs/svelte/pull/14765))
+
+- fix: ensure svg namespace for `<a>` elements is correct ([#14756](https://github.com/sveltejs/svelte/pull/14756))
+
+- fix: treeshake `$inspect.trace` code if unused ([#14770](https://github.com/sveltejs/svelte/pull/14770))
+
 ## 5.14.4
 
 ### Patch Changes

packages/svelte/messages/compile-warnings/template.md

@@ -34,6 +34,32 @@
 
 > Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+<div>
+	<span class="icon" /> some text!
+</div>
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+<div>
+	<span class="icon"> some text! </span>
+</div>
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```bash
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
 ## event_directive_deprecated
 
 > Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.14.4",
+  "version": "5.14.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -56,6 +56,9 @@
     "./internal/flags/legacy": {
       "default": "./src/internal/flags/legacy.js"
     },
+    "./internal/flags/tracing": {
+      "default": "./src/internal/flags/tracing.js"
+    },
     "./internal/server": {
       "default": "./src/internal/server/index.js"
     },
@@ -148,7 +151,7 @@
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
     "esm-env": "^1.2.1",
-    "esrap": "^1.3.1",
+    "esrap": "^1.3.2",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",

packages/svelte/scripts/check-treeshakeability.js

@@ -58,6 +58,7 @@ for (const key in pkg.exports) {
 	if (key === './internal') continue;
 	if (key === './internal/disclose-version') continue;
 	if (key === './internal/flags/legacy') continue;
+	if (key === './internal/flags/tracing') continue;
 
 	for (const type of ['browser', 'default']) {
 		if (!pkg.exports[key][type]) continue;
@@ -91,6 +92,7 @@ const bundle = await bundle_code(
 </script>
 
 <svelte:head><title>hi</title></svelte:head>
+<input bind:value={foo} />
 
 <a href={foo} class={foo}>a</a>
 <a {...foo}>a</a>
@@ -134,6 +136,15 @@ if (!bundle.includes('component_context.l')) {
 	console.error(`❌ Legacy code not treeshakeable`);
 }
 
+if (!bundle.includes(`'CreatedAt'`)) {
+	// eslint-disable-next-line no-console
+	console.error(`✅ $inspect.trace code treeshakeable`);
+} else {
+	failed = true;
+	// eslint-disable-next-line no-console
+	console.error(`❌ $inspect.trace code not treeshakeable`);
+}
+
 if (failed) {
 	// eslint-disable-next-line no-console
 	console.error(bundle);

packages/svelte/scripts/generate-types.js

@@ -46,6 +46,8 @@ await createBundle({
 	}
 });
 
+fs.appendFileSync(`${dir}/types/index.d.ts`, '\n');
+
 const types = fs.readFileSync(`${dir}/types/index.d.ts`, 'utf-8');
 
 const bad_links = [...types.matchAll(/\]\((\/[^)]+)\)/g)];