add basic CallExpression optimizations (with tests)

Author: Ocean-OS

packages/svelte/src/compiler/phases/3-transform/shared/static-evaluation.js

@@ -1,8 +1,27 @@
-/** @import { Node, BinaryExpression, LogicalExpression, UnaryExpression, Expression, SequenceExpression, TemplateLiteral, ConditionalExpression } from 'estree' */
+/** @import { Node, BinaryExpression, LogicalExpression, UnaryExpression, Expression, SequenceExpression, TemplateLiteral, ConditionalExpression, CallExpression } from 'estree' */
 /** @import { ComponentClientTransformState } from '../client/types' */
 /** @import { ComponentServerTransformState } from '../server/types' */
 export const DYNAMIC = Symbol('DYNAMIC');
-
+if (!('difference' in Set.prototype)) {
+	/**
+	 * Quick and dirty polfill for `Set.prototype.difference`
+	 * @template T
+	 * @this {Set<T>}
+	 * @param {Set<T>} other
+	 * @returns {Set<T>}
+	 */
+	//@ts-ignore
+	Set.prototype.difference = function difference(other) {
+		/** @type {Set<T>} */
+		let res = new Set();
+		for (let item of this) {
+			if (!other.has(item)) {
+				res.add(item);
+			}
+		}
+		return res;
+	};
+}
 /**
  * @template {boolean} S
  * @param {Node} node
@@ -135,6 +154,7 @@ export function evaluate_static_expression(node, state, server) {
 		function handle_ident(name) {
 			if (server) return DYNAMIC;
 			const scope = state.scope.get(name);
+			// TODO tweak this when implicit top-level reactivity is removed
 			if (scope?.kind === 'normal' && scope?.declaration_kind !== 'import') {
 				if (scope.initial && !scope.mutated && !scope.reassigned && !scope.updated) {
 					//@ts-ignore
@@ -186,6 +206,91 @@ export function evaluate_static_expression(node, state, server) {
 			}
 			return DYNAMIC;
 		}
+		/**
+		 * @param {CallExpression} node
+		 */
+		function handle_call(node) {
+			/**
+			 * There isn't much we can really do here (without having an unreasonable amount of code),
+			 * so we don't optimize for much
+			 * We only optimize for these:
+			 * ```
+			 * (() => identifier_or_evaluable_value)();
+			 * (() => {
+			 * 		return evaluable;
+			 * })();
+			 * (() => {
+			 * 		let variable = ident_or_evaluable_value;
+			 * 		return variable;
+			 * });
+			 * // it's fine if we don't want to use this for side effect reasons, its just one line (251)
+			 * (() => {
+			 * 		anything_but_a_return;
+			 * })()
+			 * ```
+			 * I would like to possibly optimize this:
+			 * ```
+			 * (() => {
+			 * 		let variable = ident_or_evaluable_value;
+			 * 		return variable_combined_with_evaluable;
+			 * })();
+			 * ```
+			 * But I don't know how to do that with the `Scope` class.
+			 */
+			let { callee } = node;
+			if (
+				callee.type !== 'ArrowFunctionExpression' ||
+				node.arguments.length ||
+				callee.params.length
+			) {
+				return DYNAMIC;
+			}
+			let { body } = callee;
+			if (body.type === 'BlockStatement') {
+				let children = body.body;
+				if (!children.find(({ type }) => type === 'ReturnStatement')) return undefined;
+				if (children.length === 1 && children[0].type === 'ReturnStatement') {
+					return children[0].argument == null
+						? undefined
+						: internal(children[0].argument, state, server);
+				}
+				let valid_body_children = new Set([
+					'VariableDeclaration',
+					'EmptyStatement',
+					'ReturnStatement'
+				]);
+				let types = new Set(children.map(({ type }) => type));
+				if (types.difference(valid_body_children).size) {
+					return DYNAMIC;
+				}
+				if (types.has('EmptyStatement')) {
+					children = children.filter(({ type }) => type !== 'EmptyStatement');
+				}
+				if (children.length > 2) return DYNAMIC;
+				if (children[0].type !== 'VariableDeclaration' || children[1].type !== 'ReturnStatement')
+					return DYNAMIC;
+				let [declaration, return_statement] = children;
+				if (declaration.declarations.length > 1) return DYNAMIC;
+				let [declarator] = declaration.declarations;
+				if (declarator.id.type !== 'Identifier') return DYNAMIC;
+				let variable_value;
+				if (declarator.init != null) {
+					variable_value = internal(declarator.init, state, server);
+					if (variable_value === DYNAMIC) {
+						//might be unpure
+						return DYNAMIC;
+					}
+				}
+				let { argument } = return_statement;
+				if (argument == null) return undefined;
+				if (argument.type === 'Identifier' && argument.name === declarator.id.name) {
+					return variable_value;
+				}
+				return internal(argument, state, server);
+			} else {
+				return internal(body, state, server);
+			}
+		}
 		switch (node.type) {
 			case 'Literal':
 				return node.value;
@@ -203,6 +308,8 @@ export function evaluate_static_expression(node, state, server) {
 				return handle_template(node);
 			case 'ConditionalExpression':
 				return handle_ternary(node);
+			case 'CallExpression':
+				return handle_call(node);
 			default:
 				return DYNAMIC;
 		}

packages/svelte/tests/snapshot/samples/static-template-expression-evaluation/_expected/client/index.svelte.js

@@ -2,9 +2,11 @@ import 'svelte/internal/disclose-version';
 import * as $ from 'svelte/internal/client';
 
 var on_click = (_, count) => $.update(count);
-var root = $.template(`<h1></h1> <p></p> <button> </button> <p></p> <p></p> <p></p> <!>`, 1);
+var root = $.template(`<h1></h1> <p></p> <button> </button> <p></p> <p></p> <p></p> <!> <br> <br> `, 1);
+
+export default function Static_template_expression_evaluation($$anchor, $$props) {
+	$.push($$props, true);
 
-export default function Static_template_expression_evaluation($$anchor) {
 	let a = 1;
 	let b = 2;
 	let name = 'world';
@@ -51,8 +53,20 @@ export default function Static_template_expression_evaluation($$anchor) {
 		c: 3
 	});
 
+	var text_1 = $.sibling(node);
+
+	text_1.nodeValue = ' 0';
+
+	var text_2 = $.sibling(text_1, 2);
+
+	text_2.nodeValue = ' Hello, world!';
+
+	var text_3 = $.sibling(text_2, 2);
+
+	text_3.nodeValue = ' 3';
 	$.template_effect(() => $.set_text(text, `Count is ${$.get(count) ?? ''}`));
 	$.append($$anchor, fragment);
+	$.pop();
 }
 
 $.delegate(['click']);

packages/svelte/tests/snapshot/samples/static-template-expression-evaluation/_expected/server/index.svelte.js

@@ -1,6 +1,8 @@
 import * as $ from 'svelte/internal/server';
 
-export default function Static_template_expression_evaluation($$payload) {
+export default function Static_template_expression_evaluation($$payload, $$props) {
+	$.push();
+
 	let a = 1;
 	let b = 2;
 	let name = 'world';
@@ -9,5 +11,10 @@ export default function Static_template_expression_evaluation($$payload) {
 	function Component() {} // placeholder component
 	$$payload.out += `<h1>Hello, ${$.escape(name)}!</h1> <p>${$.escape(a)} + ${$.escape(b)} = ${$.escape(a + b)}</p> <button>Count is ${$.escape(count)}</button> <p>1 + 2 = 3</p> <p>Sum is ${$.escape((a, b, a + b))}</p> <p>${$.escape(a === 1 ? a : b)}</p> `;
 	Component($$payload, { a, count, c: a + b });
-	$$payload.out += `<!---->`;
+
+	$$payload.out += `<!----> 0<br> Hello, world!<br> ${$.escape((() => {
+		return a + b;
+	})())}`;
+
+	$.pop();
 }

packages/svelte/tests/snapshot/samples/static-template-expression-evaluation/index.svelte

@@ -13,4 +13,12 @@
 <p>{1} + {2} = {1 + 2}</p>
 <p>Sum is {(a, b, a + b)}</p>
 <p>{a === 1 ? a : b}</p>
-<Component {a} {count} c={a+b} />
+<Component {a} {count} c={a+b} />
+{(() => {
+    let thing = 0;
+    return thing;
+})()}<br />
+{(() => 'Hello, world!')()}<br />
+{(() => {
+    return a + b;
+})()}