Repository: sveltejs/svelte
File: packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js (JavaScript)

Code before:
				// to resort to cruder measures to differentiate instance/module imports
				const { start, end } = context.state.analysis.instance.ast;
				const node = /** @type {ImportDeclaration} */ (binding.initial);
				const is_instance_import =
					/** @type {number} */ (node.start) > /** @type {number} */ (start) &&
					/** @type {number} */ (node.end) < /** @type {number} */ (end);

				if (is_instance_import) {
					const id = b.id('$$_import_' + name);

					context.state.transform[name] = {
						read: (_) => b.call(id),
						mutate: (_, mutation) => b.call(id, mutation)
					};

					context.state.legacy_reactive_imports.push(
						b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
					);
				}
			}
		}
	}

	for (const [name, binding] of context.state.scope.declarations) {
		if (binding.kind === 'store_sub') {
			const get_store = () => /** @type {Expression} */ (context.visit(b.id(name.slice(1))));

			context.state.transform[name] = {
				read: b.call,
				assign: (_, value) => b.call('$.store_set', get_store(), value),
				mutate: (node, mutation) => {
					// We need to untrack the store read, for consistency with Svelte 4
					const untracked = b.call('$.untrack', node);

					/**
					 *
					 * @param {Expression} n
					 * @returns {Expression}
					 */
					function replace(n) {
						if (n.type === 'MemberExpression') {
							return {
								...n,
								object: replace(/** @type {Expression} */ (n.object)),
								property: n.property
							};
						}

						return untracked;
					}


Review comment (suggestion):
This is now done everytime this is accessed, which feels wasteful, caching the result would be better. Also a comment would be good to explain why we need this

Code after:
				// to resort to cruder measures to differentiate instance/module imports
				const { start, end } = context.state.analysis.instance.ast;
				const node = /** @type {ImportDeclaration} */ (binding.initial);
				const is_instance_import =
					/** @type {number} */ (node.start) > /** @type {number} */ (start) &&
					/** @type {number} */ (node.end) < /** @type {number} */ (end);

				if (is_instance_import) {
					const id = b.id('$$_import_' + name);

					context.state.transform[name] = {
						read: (_) => b.call(id),
						mutate: (_, mutation) => b.call(id, mutation)
					};

					context.state.legacy_reactive_imports.push(
						b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
					);
				}
			}
		}
	}

	for (const [name, binding] of context.state.scope.declarations) {
		if (binding.kind === 'store_sub') {
			// read lazily, so that transforms added later are still applied
			/** @type {Expression} */
			let cached;

			const get_store = () => {
				return (cached ??= /** @type {Expression} */ (context.visit(b.id(name.slice(1)))));
			};

			context.state.transform[name] = {
				read: b.call,
				assign: (_, value) => b.call('$.store_set', get_store(), value),
				mutate: (node, mutation) => {
					// We need to untrack the store read, for consistency with Svelte 4
					const untracked = b.call('$.untrack', node);

					/**
					 *
					 * @param {Expression} n
					 * @returns {Expression}
					 */
					function replace(n) {
						if (n.type === 'MemberExpression') {
							return {
								...n,
								object: replace(/** @type {Expression} */ (n.object)),
								property: n.property