Implement {#with} block construct

src/compiler/compile/nodes/WithBlock.ts

@@ -0,0 +1,38 @@
+import Expression from './shared/Expression';
+import map_children from './shared/map_children';
+import TemplateScope from './shared/TemplateScope';
+import AbstractBlock from './shared/AbstractBlock';
+import { Context, unpack_destructuring } from './shared/Context';
+import { Node } from 'estree';
+
+export default class WithBlock extends AbstractBlock {
+	type: 'WithBlock';
+
+	expression: Expression;
+	context_node: Node;
+
+	context: string;
+	scope: TemplateScope;
+	contexts: Context[];
+	has_binding = false;
+
+	constructor(component, parent, scope, info) {
+		super(component, parent, scope, info);
+
+		this.expression = new Expression(component, this, scope, info.expression);
+		this.context = info.context.name || 'with'; // TODO this is used to facilitate binding; currently fails with destructuring
+		this.context_node = info.context;
+		this.scope = scope.child();
+
+		this.contexts = [];
+		unpack_destructuring(this.contexts, info.context, node => node);
+
+		this.contexts.forEach(context => {
+			this.scope.add(context.key.name, this.expression.dependencies, this);
+		});
+
+		this.children = map_children(component, this, this.scope, info.children);
+
+		this.warn_if_empty_block();
+	}
+}

src/compiler/compile/nodes/interfaces.ts

@@ -29,6 +29,7 @@ import ThenBlock from './ThenBlock';
 import Title from './Title';
 import Transition from './Transition';
 import Window from './Window';
+import WithBlock from './WithBlock';
 
 // note: to write less types each of types in union below should have type defined as literal
 // https://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions
@@ -61,4 +62,5 @@ export type INode = Action
 | ThenBlock
 | Title
 | Transition
-| Window;
+| Window
+| WithBlock;

src/compiler/compile/nodes/shared/map_children.ts

@@ -14,6 +14,7 @@ import Slot from '../Slot';
 import Text from '../Text';
 import Title from '../Title';
 import Window from '../Window';
+import WithBlock from '../WithBlock';
 import { TemplateNode } from '../../../interfaces';
 
 export type Children = ReturnType<typeof map_children>;
@@ -36,6 +37,7 @@ function get_constructor(type) {
 		case 'Text': return Text;
 		case 'Title': return Title;
 		case 'Window': return Window;
+		case 'WithBlock': return WithBlock;
 		default: throw new Error(`Not implemented: ${type}`);
 	}
 }

src/compiler/compile/render_dom/Block.ts

@@ -13,10 +13,10 @@ export interface BlockOptions {
 	key?: Identifier;
 	bindings?: Map<string, {
 		object: Identifier;
-		property: Identifier;
+		property?: Identifier;
 		snippet: Node;
 		store: string;
-		tail: Node;
+		tail?: Node;
 		modifier: (node: Node) => Node;
 	}>;
 	dependencies?: Set<string>;
@@ -38,10 +38,10 @@ export default class Block {
 
 	bindings: Map<string, {
 		object: Identifier;
-		property: Identifier;
+		property?: Identifier;
 		snippet: Node;
 		store: string;
-		tail: Node;
+		tail?: Node;
 		modifier: (node: Node) => Node;
 	}>;
 

src/compiler/compile/render_dom/wrappers/Element/Binding.ts

@@ -280,10 +280,13 @@ function get_event_handler(
 		const { object, property, modifier, store } = context;
 
 		if (lhs.type === 'Identifier') {
-			lhs = modifier(x`${object}[${property}]`);
-
 			contextual_dependencies.add(object.name);
-			contextual_dependencies.add(property.name);
+			if (property === undefined) {
+				lhs = modifier(object);
+			} else {
+				lhs = modifier(x`${object}[${property}]`);
+				contextual_dependencies.add(property.name);
+			}
 		}
 
 		if (store) {

src/compiler/compile/render_dom/wrappers/Fragment.ts

@@ -13,6 +13,7 @@ import Slot from './Slot';
 import Text from './Text';
 import Title from './Title';
 import Window from './Window';
+import WithBlock from './WithBlock';
 import { INode } from '../../nodes/interfaces';
 import Renderer from '../Renderer';
 import Block from '../Block';
@@ -36,7 +37,8 @@ const wrappers = {
 	Slot,
 	Text,
 	Title,
-	Window
+	Window,
+	WithBlock
 };
 
 function trimmable_at(child: INode, next_sibling: Wrapper): boolean {

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -346,7 +346,9 @@ export default class InlineComponentWrapper extends Wrapper {
 				const { name } = binding.expression.node;
 				const { object, property, snippet } = block.bindings.get(name);
 				lhs = snippet;
-				contextual_dependencies.push(object.name, property.name);
+				contextual_dependencies.push(object.name);
+				if (property !== undefined)
+					contextual_dependencies.push(property.name);
 			}
 
 			const params = [x`#value`];

src/compiler/compile/render_dom/wrappers/WithBlock.ts

@@ -0,0 +1,183 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Wrapper from './shared/Wrapper';
+import create_debugging_comment from './shared/create_debugging_comment';
+import FragmentWrapper from './Fragment';
+import { b, x } from 'code-red';
+import WithBlock from '../../nodes/WithBlock';
+import { Node, Identifier } from 'estree';
+
+export default class WithBlockWrapper extends Wrapper {
+	block: Block;
+	node: WithBlock;
+	fragment: FragmentWrapper;
+	vars: {
+		create_with_block: Identifier;
+		with_block_value: Identifier;
+		with_block: Identifier;
+		get_with_context: Identifier;
+	}
+
+	dependencies: Set<string>;
+
+	var: Identifier = { type: 'Identifier', name: 'with' };
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: WithBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		block.add_dependencies(node.expression.dependencies);
+
+		this.node.contexts.forEach(context => {
+			renderer.add_to_context(context.key.name, true);
+		});
+
+		this.block = block.child({
+			comment: create_debugging_comment(this.node, this.renderer.component),
+			name: renderer.component.get_unique_name('create_with_block'),
+			type: 'with',
+			// @ts-ignore todo: probably error
+			key: node.key as string,
+
+			bindings: new Map(block.bindings)
+		});
+
+		const with_block_value = renderer.component.get_unique_name(`${this.var.name}_value`);
+		renderer.add_to_context(with_block_value.name, true);
+
+		this.vars = {
+			create_with_block: this.block.name,
+			with_block_value,
+			with_block: block.get_unique_name(`${this.var.name}_block`),
+			get_with_context: renderer.component.get_unique_name(`get_${this.var.name}_context`),
+		};
+
+		const store =
+			node.expression.node.type === 'Identifier' &&
+			node.expression.node.name[0] === '$'
+				? node.expression.node.name.slice(1)
+				: null;
+
+		node.contexts.forEach(prop => {
+			this.block.bindings.set(prop.key.name, {
+				object: with_block_value,
+				modifier: prop.modifier,
+				snippet: prop.modifier(x`${with_block_value}` as Node),
+				store
+			});
+		});
+
+		renderer.blocks.push(this.block);
+
+		this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling);
+
+		block.add_dependencies(this.block.dependencies);
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		if (this.fragment.nodes.length === 0) return;
+
+		const { renderer } = this;
+		const {
+			create_with_block,
+			with_block,
+			with_block_value,
+			get_with_context
+		} = this.vars;
+
+		const needs_anchor = this.next
+			? !this.next.is_dom_node() :
+			!parent_node || !this.parent.is_dom_node();
+
+		const context_props = this.node.contexts.map(prop => b`child_ctx[${renderer.context_lookup.get(prop.key.name).index}] = ${prop.modifier(x`value`)};`);
+		if (this.node.has_binding) context_props.push(b`child_ctx[${renderer.context_lookup.get(with_block_value.name).index}] = value;`);
+
+		const snippet = this.node.expression.manipulate(block);
+		block.chunks.init.push(b`let ${with_block_value} = ${snippet};`);
+
+		renderer.blocks.push(b`
+			function ${get_with_context}(#ctx, value) {
+				const child_ctx = #ctx.slice();
+				${context_props}
+				return child_ctx;
+			}
+		`);
+
+		const initial_anchor_node: Identifier = { type: 'Identifier', name: parent_node ? 'null' : '#anchor' };
+		const initial_mount_node: Identifier = parent_node || { type: 'Identifier', name: '#target' };
+		const update_anchor_node = needs_anchor
+			? block.get_unique_name(`${this.var.name}_anchor`)
+			: (this.next && this.next.var) || { type: 'Identifier', name: 'null' };
+		const update_mount_node: Identifier = this.get_update_mount_node((update_anchor_node as Identifier));
+
+		const all_dependencies = new Set(this.block.dependencies); // TODO should be dynamic deps only
+		this.node.expression.dynamic_dependencies().forEach((dependency: string) => {
+			all_dependencies.add(dependency);
+		});
+		this.dependencies = all_dependencies;
+
+		block.chunks.init.push(b`
+			let ${with_block} = ${create_with_block}(${get_with_context}(#ctx, ${with_block_value}));
+		`);
+
+		block.chunks.create.push(b`
+			${with_block}.c();
+		`);
+
+		if (parent_nodes && this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`
+				${with_block}.l(${parent_nodes});
+			`);
+		}
+
+		block.chunks.mount.push(b`
+			${with_block}.m(${initial_mount_node}, ${initial_anchor_node});
+		`);
+
+		if (this.dependencies.size) {
+			const update = this.block.has_update_method
+				? b`
+					if (${with_block}) {
+						${with_block}.p(child_ctx, #dirty);
+					} else {
+						${with_block} = ${create_with_block}(child_ctx);
+						${with_block}.c();
+						${with_block}.m(${update_mount_node}, ${update_anchor_node});
+					}`
+				: b`
+					if (!${with_block}) {
+						${with_block} = ${create_with_block}(child_ctx);
+						${with_block}.c();
+						${with_block}.m(${update_mount_node}, ${update_anchor_node});
+					}`;
+			block.chunks.update.push(b`
+				if (${block.renderer.dirty(Array.from(all_dependencies))}) {
+					${with_block_value} = ${snippet};
+					const child_ctx = ${get_with_context}(#ctx, ${with_block_value});
+					${update}
+				}
+			`);
+		}
+
+		block.chunks.destroy.push(b`${with_block}.d(detaching);`);
+
+		if (needs_anchor) {
+			block.add_element(
+				update_anchor_node as Identifier,
+				x`@empty()`,
+				parent_nodes && x`@empty()`,
+				parent_node
+			);
+		}
+
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
+	}
+}

src/compiler/compile/render_ssr/Renderer.ts

@@ -11,6 +11,7 @@ import Slot from './handlers/Slot';
 import Tag from './handlers/Tag';
 import Text from './handlers/Text';
 import Title from './handlers/Title';
+import WithBlock from './handlers/WithBlock';
 import { AppendTarget, CompileOptions } from '../../interfaces';
 import { INode } from '../nodes/interfaces';
 import { Expression, TemplateLiteral, Identifier } from 'estree';
@@ -36,7 +37,8 @@ const handlers: Record<string, Handler> = {
 	Slot,
 	Text,
 	Title,
-	Window: noop
+	Window: noop,
+	WithBlock
 };
 
 export interface RenderOptions extends CompileOptions{

src/compiler/compile/render_ssr/handlers/WithBlock.ts

@@ -0,0 +1,12 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import WithBlock from '../../nodes/WithBlock';
+import { x } from 'code-red';
+
+export default function(node: WithBlock, renderer: Renderer, options: RenderOptions) {
+	const args = [node.context_node];
+
+	renderer.push();
+	renderer.render(node.children, options);
+	const result = renderer.pop();
+	renderer.add_expression(x`((${args}) => ${result})(${node.expression.node})`);
+}