start reassignments and if blocks, more ts annotations

Author: Ocean-OS

packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js

@@ -43,6 +43,7 @@ const visitors = {
 		delete n.typeParameters;
 		delete n.typeArguments;
 		delete n.returnType;
+		// TODO figure out what this is exactly, and if it should be added to `type_information`
 		delete n.accessibility;
 	},
 	Decorator(node) {

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

@@ -0,0 +1,82 @@
+/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+
+/**
+ * @param {AST.IfBlock} node
+ * @param {ComponentContext} context
+ */
+export function IfBlock(node, context) {
+	const test = /** @type {Expression} */ (context.visit(node.test));
+	const evaluated = context.state.scope.evaluate(test);
+
+	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
+	context.state.template.push('<!>');
+	if (evaluated.is_truthy) {
+		context.state.init.push(b.stmt(b.call(b.arrow([b.id('$$anchor')], consequent), context.state.node)));
+	} else {
+		const statements = [];
+		const consequent_id = context.state.scope.generate('consequent');
+		statements.push(b.var(b.id(consequent_id), b.arrow([b.id('$$anchor')], consequent)));
+
+		let alternate_id;
+
+		if (node.alternate) {
+			alternate_id = context.state.scope.generate('alternate');
+			const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
+			const nodes = node.alternate.nodes;
+
+			let alternate_args = [b.id('$$anchor')];
+			if (nodes.length === 1 && nodes[0].type === 'IfBlock' && nodes[0].elseif) {
+				alternate_args.push(b.id('$$elseif'));
+			}
+
+			statements.push(b.var(b.id(alternate_id), b.arrow(alternate_args, alternate)));
+		}
+
+		/** @type {Expression[]} */
+		const args = [
+			node.elseif ? b.id('$$anchor') : context.state.node,
+			b.arrow(
+				[b.id('$$render')],
+				b.block([
+					b.if(
+						test,
+						b.stmt(b.call(b.id('$$render'), b.id(consequent_id))),
+						alternate_id ? b.stmt(b.call(b.id('$$render'), b.id(alternate_id), b.false)) : undefined
+					)
+				])
+			)
+		];
+
+		if (node.elseif) {
+			// We treat this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else}
+			//     {#if y}
+			//       <div transition:foo>...</div>
+			//     {/if}
+			//   {/if}
+			//
+			// ...slightly differently to this...
+			//
+			//   {#if x}
+			//     ...
+			//   {:else if y}
+			//     <div transition:foo>...</div>
+			//   {/if}
+			//
+			// ...even though they're logically equivalent. In the first case, the
+			// transition will only play when `y` changes, but in the second it
+			// should play when `x` or `y` change — both are considered 'local'
+			args.push(b.id('$$elseif'));
+		}
+
+		statements.push(b.stmt(b.call('$.if', ...args)));
+
+		context.state.init.push(b.block(statements));
+	}
+}

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

@@ -0,0 +1,54 @@
+/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { BLOCK_OPEN_ELSE } from '../../../../../internal/server/hydration.js';
+import * as b from '#compiler/builders';
+import { block_close, block_open } from './shared/utils.js';
+import { needs_new_scope } from '../../utils.js';
+
+/**
+ * @param {AST.IfBlock} node
+ * @param {ComponentContext} context
+ */
+export function IfBlock(node, context) {
+	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
+	const test = /** @type {Expression} */ (context.visit(node.test));
+	const evaluated = context.state.scope.evaluate(test);
+	if (evaluated.is_truthy) {
+		if (needs_new_scope(consequent)) {
+			context.state.template.push(consequent);
+		} else {
+			context.state.template.push(...consequent.body);
+		}
+	} else {
+		consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
+		let if_statement = b.if(test, consequent);
+
+		context.state.template.push(if_statement, block_close);
+
+		let index = 1;
+		let alt = node.alternate;
+		while (
+			alt &&
+			alt.nodes.length === 1 &&
+			alt.nodes[0].type === 'IfBlock' &&
+			alt.nodes[0].elseif
+		) {
+			const elseif = alt.nodes[0];
+			const alternate = /** @type {BlockStatement} */ (context.visit(elseif.consequent));
+			alternate.body.unshift(
+				b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(`<!--[${index++}-->`)))
+			);
+			if_statement = if_statement.alternate = b.if(
+				/** @type {Expression} */ (context.visit(elseif.test)),
+				alternate
+			);
+			alt = elseif.alternate;
+		}
+
+		if_statement.alternate = alt ? /** @type {BlockStatement} */ (context.visit(alt)) : b.block([]);
+		if_statement.alternate.body.unshift(
+			b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
+		);
+	}
+}

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

@@ -1,7 +1,7 @@
 /** @import { Context } from 'zimmerframe' */
 /** @import { TransformState } from './types.js' */
 /** @import { AST, Binding, Namespace, ValidatedCompileOptions } from '#compiler' */
-/** @import { Node, Expression, CallExpression } from 'estree' */
+/** @import { Node, Expression, CallExpression, BlockStatement } from 'estree' */
 import {
 	regex_ends_with_whitespaces,
 	regex_not_whitespace,
@@ -486,3 +486,14 @@ export function transform_inspect_rune(node, context) {
 		return b.call('$.inspect', as_fn ? b.thunk(b.array(arg)) : b.array(arg));
 	}
 }
+
+/**
+ * Whether a `BlockStatement` needs to be a block statement as opposed to just inlining all of its statements. 
+ * @param {BlockStatement} block
+ */
+export function needs_new_scope(block) {
+	const has_vars = block.body.some(child => child.type === 'VariableDeclaration');
+	const has_fns = block.body.some(child => child.type === 'FunctionDeclaration');
+	const has_class = block.body.some(child => child.type === 'ClassDeclaration');
+	return has_vars || has_fns || has_class;
+}