merge conflict

Author: trueadm

.changeset/kind-eagles-join.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add children to element typings

.changeset/pre.json

@@ -38,6 +38,7 @@
     "itchy-lions-wash",
     "khaki-mails-draw",
     "kind-deers-lay",
+    "kind-eagles-join",
     "lazy-spiders-think",
     "light-pens-watch",
     "long-crews-return",
@@ -76,6 +77,7 @@
     "thirty-impalas-repair",
     "thirty-wombats-relax",
     "tiny-kings-whisper",
+    "twelve-onions-juggle",
     "two-falcons-buy",
     "wet-games-fly",
     "wicked-clouds-exercise",

.changeset/twelve-onions-juggle.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle ts expressions when dealing with runes

CONTRIBUTING.md

@@ -43,7 +43,7 @@ The maintainers meet on the final Saturday of each month. While these meetings a
 
 ### Prioritization
 
-We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFC, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch.
+We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFCs, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch.
 
 ## Bugs
 
@@ -74,10 +74,11 @@ Small pull requests are much easier to review and more likely to get merged.
 
 ### Installation
 
-1. Ensure you have [pnpm](https://pnpm.io/installation) installed
-1. After cloning the repository, run `pnpm install`. You can do this in the root directory or in the `svelte` project
-1. Move into the `svelte` directory with `cd packages/svelte`
-1. To compile in watch mode, run `pnpm dev`
+Ensure you have [pnpm](https://pnpm.io/installation) installed. After cloning the repository, run `pnpm install`.
+
+### Developing
+
+To build the UMD version of `svelte/compiler` (this is only necessary for CommonJS consumers, or in-browser use), run `pnpm build` inside `packages/svelte`. To rebuild whenever source files change, run `pnpm dev`.
 
 ### Creating a branch
 
@@ -100,18 +101,28 @@ Test samples are kept in `/test/xxx/samples` folder.
 > PREREQUISITE: Install chromium via playwright by running `pnpm playwright install chromium`
 
 1. To run test, run `pnpm test`.
-1. To run test for a specific feature, you can use the `-g` (aka `--grep`) option. For example, to only run test involving transitions, run `pnpm test -- -g transition`.
+1. To run a particular test suite, use `pnpm test <suite-name>`, for example:
+
+   ```bash
+   pnpm test validator
+   ```
 
-##### Running solo test
+1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -- -t <test-name>`, for example:
 
-1. To run only one test, rename the test sample folder to end with `.solo`. For example, to run the `test/js/samples/action` only, rename it to `test/js/samples/action.solo`.
-1. To run only one test suite, rename the test suite folder to end with `.solo`. For example, to run the `test/js` test suite only, rename it to `test/js.solo`.
-1. Remember to rename the test folder back. The CI will fail if there's a solo test.
+   ```bash
+   pnpm test validator -- -t a11y-alt-text
+   ```
+
+   (You can also do `FILTER=<test-name> pnpm test <suite-name>` which removes other tests rather than simply skipping them — this will result in faster and more compact test results, but it's non-idiomatic. Choose your fighter.)
 
 ##### Updating `.expected` files
 
-1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`.
-1. To update the content of the `.expected` file, run the test with `--update` flag. (`pnpm test --update`)
+1. Tests suites like `snapshot` and `parser` assert that the generated output matches the existing snapshot.
+1. To update these snapshots, run `UPDATE_SNAPSHOTS=true pnpm test`.
+
+### Typechecking
+
+To typecheck the codebase, run `pnpm check` inside `packages/svelte`. To typecheck in watch mode, run `pnpm check:watch`.
 
 ### Style guide
 

README.md

@@ -22,47 +22,7 @@ You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what
 
 ## Contributing
 
-Please see the [Contributing Guide](CONTRIBUTING.md) and [svelte package](packages/svelte) for contributing to Svelte.
-
-### Development
-
-Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out!
-
-To install and work on Svelte locally:
-
-```bash
-git clone https://github.com/sveltejs/svelte.git
-cd svelte
-pnpm install
-```
-
-> Do not use Yarn to install the dependencies, as the specific package versions in `pnpm-lock.json` are used to build and test Svelte.
-
-To build the compiler and all the other modules included in the package:
-
-```bash
-pnpm build
-```
-
-To watch for changes and continually rebuild the package (this is useful if you're using [`pnpm link`](https://pnpm.io/cli/link) to test out changes in a project locally):
-
-```bash
-pnpm dev
-```
-
-The compiler is written in JavaScript and uses [JSDoc](https://jsdoc.app/index.html) comments for type-checking.
-
-### Running Tests
-
-```bash
-pnpm test
-```
-
-To filter tests, use `-g` (aka `--grep`). For example, to only run tests involving transitions:
-
-```bash
-pnpm test -- -g transition
-```
+Please see the [Contributing Guide](CONTRIBUTING.md) and the [`svelte`](packages/svelte) package for information on contributing to Svelte.
 
 ### svelte.dev
 

packages/svelte/CHANGELOG.md

@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.15
+
+### Patch Changes
+
+- fix: add children to element typings ([#9679](https://github.com/sveltejs/svelte/pull/9679))
+
+- fix: handle ts expressions when dealing with runes ([#9681](https://github.com/sveltejs/svelte/pull/9681))
+
 ## 5.0.0-next.14
 
 ### Patch Changes

packages/svelte/elements.d.ts

@@ -64,6 +64,10 @@ export type MessageEventHandler<T extends EventTarget> = EventHandler<MessageEve
 // ----------------------------------------------------------------------
 
 export interface DOMAttributes<T extends EventTarget> {
+	// Implicit children prop every element has
+	// Add this here so that libraries doing `$props<HTMLButtonAttributes>()` don't need a separate interface
+	children?: import('svelte').Snippet<any>;
+
 	// Clipboard Events
 	'on:copy'?: ClipboardEventHandler<T> | undefined | null;
 	oncopy?: ClipboardEventHandler<T> | undefined | null;

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.14",
+  "version": "5.0.0-next.15",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -91,7 +91,7 @@
   ],
   "scripts": {
     "build": "rollup -c && node scripts/build.js && node scripts/check-treeshakeability.js",
-    "watch": "rollup -cw",
+    "dev": "rollup -cw",
     "check": "tsc && cd ./tests/types && tsc",
     "check:watch": "tsc --watch",
     "generate:version": "node ./scripts/generate-version.js",

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -7,7 +7,8 @@ import {
 	extract_paths,
 	is_event_attribute,
 	is_text_attribute,
-	object
+	object,
+	unwrap_ts_expression
 } from '../../utils/ast.js';
 import * as b from '../../utils/builders.js';
 import { ReservedKeywords, Runes, SVGElements } from '../constants.js';
@@ -668,10 +669,11 @@ const runes_scope_tweaker = {
 		}
 	},
 	VariableDeclarator(node, { state }) {
-		if (node.init?.type !== 'CallExpression') return;
-		if (get_rune(node.init, state.scope) === null) return;
+		const init = unwrap_ts_expression(node.init);
+		if (!init || init.type !== 'CallExpression') return;
+		if (get_rune(init, state.scope) === null) return;
 
-		const callee = node.init.callee;
+		const callee = init.callee;
 		if (callee.type !== 'Identifier') return;
 
 		const name = callee.name;

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -1,5 +1,10 @@
 import { error } from '../../errors.js';
-import { extract_identifiers, is_text_attribute } from '../../utils/ast.js';
+import {
+	extract_identifiers,
+	get_parent,
+	is_text_attribute,
+	unwrap_ts_expression
+} from '../../utils/ast.js';
 import { warn } from '../../warnings.js';
 import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
 import { binding_properties } from '../bindings.js';
@@ -491,7 +496,7 @@ function validate_call_expression(node, scope, path) {
 	const rune = get_rune(node, scope);
 	if (rune === null) return;
 
-	const parent = /** @type {import('#compiler').SvelteNode} */ (path.at(-1));
+	const parent = /** @type {import('#compiler').SvelteNode} */ (get_parent(path, -1));
 
 	if (rune === '$props') {
 		if (parent.type === 'VariableDeclarator') return;
@@ -703,7 +708,7 @@ export const validation_runes = merge(validation, a11y_validators, {
 		next({ ...state });
 	},
 	VariableDeclarator(node, { state }) {
-		const init = node.init;
+		const init = unwrap_ts_expression(node.init);
 		const rune = get_rune(init, state.scope);
 
 		if (rune === null) return;

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

@@ -3,6 +3,7 @@ import { is_hoistable_function } from '../../utils.js';
 import * as b from '../../../../utils/builders.js';
 import * as assert from '../../../../utils/assert.js';
 import { create_state_declarators, get_props_method } from '../utils.js';
+import { unwrap_ts_expression } from '../../../../utils/ast.js';
 
 /** @type {import('../types.js').ComponentVisitors} */
 export const javascript_visitors_runes = {
@@ -133,7 +134,7 @@ export const javascript_visitors_runes = {
 		const declarations = [];
 
 		for (const declarator of node.declarations) {
-			const init = declarator.init;
+			const init = unwrap_ts_expression(declarator.init);
 			const rune = get_rune(init, state.scope);
 			if (
 				!rune ||
@@ -213,7 +214,8 @@ export const javascript_visitors_runes = {
 				// TODO
 				continue;
 			}
-			const args = /** @type {import('estree').CallExpression} */ (declarator.init).arguments;
+
+			const args = /** @type {import('estree').CallExpression} */ (init).arguments;
 			const value =
 				args.length === 0
 					? b.id('undefined')

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

@@ -1,6 +1,11 @@
 import { walk } from 'zimmerframe';
 import { set_scope, get_rune } from '../../scope.js';
-import { extract_identifiers, extract_paths, is_event_attribute } from '../../../utils/ast.js';
+import {
+	extract_identifiers,
+	extract_paths,
+	is_event_attribute,
+	unwrap_ts_expression
+} from '../../../utils/ast.js';
 import * as b from '../../../utils/builders.js';
 import is_reference from 'is-reference';
 import {
@@ -568,7 +573,8 @@ const javascript_visitors_runes = {
 		const declarations = [];
 
 		for (const declarator of node.declarations) {
-			const rune = get_rune(declarator.init, state.scope);
+			const init = unwrap_ts_expression(declarator.init);
+			const rune = get_rune(init, state.scope);
 			if (!rune || rune === '$effect.active' || rune.startsWith('$log')) {
 				declarations.push(/** @type {import('estree').VariableDeclarator} */ (visit(declarator)));
 				continue;
@@ -579,7 +585,7 @@ const javascript_visitors_runes = {
 				continue;
 			}
 
-			const args = /** @type {import('estree').CallExpression} */ (declarator.init).arguments;
+			const args = /** @type {import('estree').CallExpression} */ (init).arguments;
 			const value =
 				args.length === 0
 					? b.id('undefined')

packages/svelte/src/compiler/utils/ast.js

@@ -265,3 +265,42 @@ function _extract_paths(assignments = [], param, expression, update_expression)
 
 	return assignments;
 }
+
+/**
+ * The Acorn TS plugin defines `foo!` as a `TSNonNullExpression` node, and
+ * `foo as Bar` as a `TSAsExpression` node. This function unwraps those.
+ *
+ * @template {import('#compiler').SvelteNode | undefined | null} T
+ * @param {T} node
+ * @returns {T}
+ */
+export function unwrap_ts_expression(node) {
+	if (!node) {
+		return node;
+	}
+
+	// @ts-expect-error these types don't exist on the base estree types
+	if (node.type === 'TSNonNullExpression' || node.type === 'TSAsExpression') {
+		// @ts-expect-error
+		return node.expression;
+	}
+
+	return node;
+}
+
+/**
+ * Like `path.at(x)`, but skips over `TSNonNullExpression` and `TSAsExpression` nodes and eases assertions a bit
+ * by removing the `| undefined` from the resulting type.
+ *
+ * @template {import('#compiler').SvelteNode} T
+ * @param {T[]} path
+ * @param {number} at
+ */
+export function get_parent(path, at) {
+	let node = path.at(at);
+	// @ts-expect-error
+	if (node.type === 'TSNonNullExpression' || node.type === 'TSAsExpression') {
+		return /** @type {T} */ (path.at(at < 0 ? at - 1 : at + 1));
+	}
+	return /** @type {T} */ (node);
+}

packages/svelte/src/internal/client/render.js

@@ -2918,6 +2918,7 @@ export function unwrap(value) {
  * @param {{
  * 		target: Node;
  * 		props?: Props;
+ * 		events?: Events;
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		immutable?: boolean;

packages/svelte/src/version.js

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

packages/svelte/tests/runtime-runes/samples/typescript-as-expression/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '1 2'
+});

packages/svelte/tests/runtime-runes/samples/typescript-as-expression/main.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	let count = $state(1) as number;
+	let double = $derived(count as number * 2) as number;
+</script>
+
+{count as number} {double as number}

packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '1 2'
+});

packages/svelte/tests/runtime-runes/samples/typescript-non-null-expression/main.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	let count = $state(1)!;
+	let double = $derived(count! * 2)!;
+</script>
+
+{count!} {double!}