Merge branch 'main' into revert-15196-corepack-bullshit

Author: Rich-Harris

.changeset/long-moles-join.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure tracking returns true, even if in unowned

documentation/docs/07-misc/07-v5-migration-guide.md

@@ -722,7 +722,39 @@ If a bindable property has a default value (e.g. `let { foo = $bindable('bar') }
 
 ### `accessors` option is ignored
 
-Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance. In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
+Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance.
+
+```svelte
+<svelte:options accessors={true} />
+
+<script>
+	// available via componentInstance.name
+	export let name;
+</script>
+```
+
+In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
+
+```svelte
+<script>
+	let { name } = $props();
+	// available via componentInstance.getName()
+	export const getName = () => name;
+</script>
+```
+
+Alternatively, if the place where they are instantiated is under your control, you can also make use of runes inside `.js/.ts` files by adjusting their ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`, and then use `$state`:
+
+```js
++++import { mount } from 'svelte';+++
+import App from './App.svelte'
+
+---const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
+app.foo = 'baz'---
++++const props = $state({ foo: 'bar' });
+const app = mount(App, { target: document.getElementById("app"), props });
+props.foo = 'baz';+++
+```
 
 ### `immutable` option is ignored
 

packages/svelte/src/internal/client/reactivity/effects.js

@@ -164,13 +164,7 @@ function create_effect(type, fn, sync, push = true) {
  * @returns {boolean}
  */
 export function effect_tracking() {
-	if (active_reaction === null || untracking) {
-		return false;
-	}
-
-	// If it's skipped, that's because we're inside an unowned
-	// that is not being tracked by another reaction
-	return !skip_reaction;
+	return active_reaction !== null && !untracking;
 }
 
 /**

packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const b1 = target.querySelector('button');
+
+		b1?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<o>Store: new</o><p>Text: new message</p><button>Change Store</button>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { writable, fromStore, toStore } from "svelte/store";
+
+	const store = writable("previous");
+	let text = $derived(fromStore(store).current + " message");
+
+	text; // read derived in a non-tracking context
+</script>
+
+<o>Store: {$store}</o>
+<p>Text: {text}</p>
+<button onclick={() => { store.set("new"); }}>Change Store</button>

playgrounds/sandbox/index.html

@@ -12,7 +12,7 @@
 
 		<script type="module">
 			import { mount, hydrate, unmount } from 'svelte';
-			import App from '/src/main.svelte';
+			import App from '/src/App.svelte';
 
 			const root = document.getElementById('root');
 			const render = root.firstChild?.nextSibling ? hydrate : mount;

playgrounds/sandbox/package.json

@@ -9,14 +9,16 @@
     "ssr": "node --conditions=development ./ssr-dev.js",
     "build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr ssr-prod.js",
     "prod": "npm run build && node dist/server/ssr-prod",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "download": "node scripts/download.js",
+    "hash": "node scripts/hash.js"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "polka": "^1.0.0-next.25",
     "svelte": "workspace:*",
     "tiny-glob": "^0.2.9",
-    "vite": "^5.4.6",
+    "vite": "^5.4.14",
     "vite-plugin-inspect": "^0.8.4"
   }
 }

playgrounds/sandbox/scripts/download.js

@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+
+const arg = process.argv[2];
+
+/** @type {URL} */
+let url;
+
+try {
+	url = new URL(arg);
+} catch (e) {
+	console.error(`${arg} is not a URL`);
+	process.exit(1);
+}
+
+if (url.origin !== 'https://svelte.dev' || !url.pathname.startsWith('/playground/')) {
+	console.error(`${arg} is not a Svelte playground URL`);
+	process.exit(1);
+}
+
+let files;
+
+if (url.hash.length > 1) {
+	const decoded = atob(url.hash.slice(1).replaceAll('-', '+').replaceAll('_', '/'));
+	// putting it directly into the blob gives a corrupted file
+	const u8 = new Uint8Array(decoded.length);
+	for (let i = 0; i < decoded.length; i++) {
+		u8[i] = decoded.charCodeAt(i);
+	}
+	const stream = new Blob([u8]).stream().pipeThrough(new DecompressionStream('gzip'));
+	const json = await new Response(stream).text();
+
+	files = JSON.parse(json).files;
+} else {
+	const id = url.pathname.split('/')[2];
+	const response = await fetch(`https://svelte.dev/playground/api/${id}.json`);
+
+	files = (await response.json()).components.map((data) => {
+		const basename = `${data.name}.${data.type}`;
+
+		return {
+			type: 'file',
+			name: basename,
+			basename,
+			contents: data.source,
+			text: true
+		};
+	});
+}
+
+for (const file of files) {
+	fs.writeFileSync(`src/${file.name}`, file.contents);
+}

playgrounds/sandbox/scripts/hash.js

@@ -0,0 +1,45 @@
+import fs from 'node:fs';
+
+const files = [];
+
+for (const basename of fs.readdirSync('src')) {
+	if (fs.statSync(`src/${basename}`).isDirectory()) continue;
+
+	files.push({
+		type: 'file',
+		name: basename,
+		basename,
+		contents: fs.readFileSync(`src/${basename}`, 'utf-8'),
+		text: true // TODO might not be
+	});
+}
+
+const payload = JSON.stringify({
+	name: 'sandbox',
+	files
+});
+
+async function compress(payload) {
+	const reader = new Blob([payload])
+		.stream()
+		.pipeThrough(new CompressionStream('gzip'))
+		.getReader();
+
+	let buffer = '';
+	for (;;) {
+		const { done, value } = await reader.read();
+
+		if (done) {
+			reader.releaseLock();
+			return btoa(buffer).replaceAll('+', '-').replaceAll('/', '_');
+		} else {
+			for (let i = 0; i < value.length; i++) {
+				// decoding as utf-8 will make btoa reject the string
+				buffer += String.fromCharCode(value[i]);
+			}
+		}
+	}
+}
+
+const hash = await compress(payload);
+console.log(`https://svelte.dev/playground/untitled#${hash}`);

playgrounds/sandbox/ssr-dev.js

@@ -22,7 +22,7 @@ polka()
 	.use(async (req, res) => {
 		const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
 		const transformed_template = await vite.transformIndexHtml(req.url, template);
-		const { default: App } = await vite.ssrLoadModule('/src/main.svelte');
+		const { default: App } = await vite.ssrLoadModule('/src/App.svelte');
 		const { head, body } = render(App);
 
 		const html = transformed_template