@angular/compiler 16.1.1 → 16.2.0-next.0

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v16.1.1
+ * @license Angular v16.2.0-next.0
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -1222,6 +1222,9 @@ class ReadVarExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitReadVarExpr(this, context);
     }
+    clone() {
+        return new ReadVarExpr(this.name, this.type, this.sourceSpan);
+    }
     set(value) {
         return new WriteVarExpr(this.name, value, null, this.sourceSpan);
     }
@@ -1240,6 +1243,9 @@ class TypeofExpr extends Expression {
     isConstant() {
         return this.expr.isConstant();
     }
+    clone() {
+        return new TypeofExpr(this.expr.clone());
+    }
 }
 class WrappedNodeExpr extends Expression {
     constructor(node, type, sourceSpan) {
@@ -1255,6 +1261,9 @@ class WrappedNodeExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWrappedNodeExpr(this, context);
     }
+    clone() {
+        return new WrappedNodeExpr(this.node, this.type, this.sourceSpan);
+    }
 }
 class WriteVarExpr extends Expression {
     constructor(name, value, type, sourceSpan) {
@@ -1271,6 +1280,9 @@ class WriteVarExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWriteVarExpr(this, context);
     }
+    clone() {
+        return new WriteVarExpr(this.name, this.value.clone(), this.type, this.sourceSpan);
+    }
     toDeclStmt(type, modifiers) {
         return new DeclareVarStmt(this.name, this.value, type, modifiers, this.sourceSpan);
     }
@@ -1295,6 +1307,9 @@ class WriteKeyExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWriteKeyExpr(this, context);
     }
+    clone() {
+        return new WriteKeyExpr(this.receiver.clone(), this.index.clone(), this.value.clone(), this.type, this.sourceSpan);
+    }
 }
 class WritePropExpr extends Expression {
     constructor(receiver, name, value, type, sourceSpan) {
@@ -1313,6 +1328,9 @@ class WritePropExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitWritePropExpr(this, context);
     }
+    clone() {
+        return new WritePropExpr(this.receiver.clone(), this.name, this.value.clone(), this.type, this.sourceSpan);
+    }
 }
 class InvokeFunctionExpr extends Expression {
     constructor(fn, args, type, sourceSpan, pure = false) {
@@ -1331,6 +1349,9 @@ class InvokeFunctionExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitInvokeFunctionExpr(this, context);
     }
+    clone() {
+        return new InvokeFunctionExpr(this.fn.clone(), this.args.map(arg => arg.clone()), this.type, this.sourceSpan, this.pure);
+    }
 }
 class TaggedTemplateExpr extends Expression {
     constructor(tag, template, type, sourceSpan) {
@@ -1349,6 +1370,9 @@ class TaggedTemplateExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitTaggedTemplateExpr(this, context);
     }
+    clone() {
+        return new TaggedTemplateExpr(this.tag.clone(), this.template.clone(), this.type, this.sourceSpan);
+    }
 }
 class InstantiateExpr extends Expression {
     constructor(classExpr, args, type, sourceSpan) {
@@ -1366,6 +1390,9 @@ class InstantiateExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitInstantiateExpr(this, context);
     }
+    clone() {
+        return new InstantiateExpr(this.classExpr.clone(), this.args.map(arg => arg.clone()), this.type, this.sourceSpan);
+    }
 }
 class LiteralExpr extends Expression {
     constructor(value, type, sourceSpan) {
@@ -1381,12 +1408,18 @@ class LiteralExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLiteralExpr(this, context);
     }
+    clone() {
+        return new LiteralExpr(this.value, this.type, this.sourceSpan);
+    }
 }
 class TemplateLiteral {
     constructor(elements, expressions) {
         this.elements = elements;
         this.expressions = expressions;
     }
+    clone() {
+        return new TemplateLiteral(this.elements.map(el => el.clone()), this.expressions.map(expr => expr.clone()));
+    }
 }
 class TemplateLiteralElement {
     constructor(text, sourceSpan, rawText) {
@@ -1401,6 +1434,9 @@ class TemplateLiteralElement {
         this.rawText =
             rawText ?? sourceSpan?.toString() ?? escapeForTemplateLiteral(escapeSlashes(text));
     }
+    clone() {
+        return new TemplateLiteralElement(this.text, this.sourceSpan, this.rawText);
+    }
 }
 class LiteralPiece {
     constructor(text, sourceSpan) {
@@ -1445,6 +1481,9 @@ class LocalizedString extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLocalizedString(this, context);
     }
+    clone() {
+        return new LocalizedString(this.metaBlock, this.messageParts, this.placeHolderNames, this.expressions.map(expr => expr.clone()), this.sourceSpan);
+    }
     /**
      * Serialize the given `meta` and `messagePart` into "cooked" and "raw" strings that can be used
      * in a `$localize` tagged string. The format of the metadata is the same as that parsed by
@@ -1546,6 +1585,9 @@ class ExternalExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitExternalExpr(this, context);
     }
+    clone() {
+        return new ExternalExpr(this.value, this.type, this.typeParams, this.sourceSpan);
+    }
 }
 class ExternalReference {
     constructor(moduleName, name, runtime) {
@@ -1571,6 +1613,9 @@ class ConditionalExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitConditionalExpr(this, context);
     }
+    clone() {
+        return new ConditionalExpr(this.condition.clone(), this.trueCase.clone(), this.falseCase?.clone(), this.type, this.sourceSpan);
+    }
 }
 class NotExpr extends Expression {
     constructor(condition, sourceSpan) {
@@ -1586,6 +1631,9 @@ class NotExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitNotExpr(this, context);
     }
+    clone() {
+        return new NotExpr(this.condition.clone(), this.sourceSpan);
+    }
 }
 class FnParam {
     constructor(name, type = null) {
@@ -1595,6 +1643,9 @@ class FnParam {
     isEquivalent(param) {
         return this.name === param.name;
     }
+    clone() {
+        return new FnParam(this.name, this.type);
+    }
 }
 class FunctionExpr extends Expression {
     constructor(params, statements, type, sourceSpan, name) {
@@ -1616,6 +1667,10 @@ class FunctionExpr extends Expression {
     toDeclStmt(name, modifiers) {
         return new DeclareFunctionStmt(name, this.params, this.statements, this.type, modifiers, this.sourceSpan);
     }
+    clone() {
+        // TODO: Should we deep clone statements?
+        return new FunctionExpr(this.params.map(p => p.clone()), this.statements, this.type, this.sourceSpan, this.name);
+    }
 }
 class UnaryOperatorExpr extends Expression {
     constructor(operator, expr, type, sourceSpan, parens = true) {
@@ -1634,6 +1689,9 @@ class UnaryOperatorExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitUnaryOperatorExpr(this, context);
     }
+    clone() {
+        return new UnaryOperatorExpr(this.operator, this.expr.clone(), this.type, this.sourceSpan, this.parens);
+    }
 }
 class BinaryOperatorExpr extends Expression {
     constructor(operator, lhs, rhs, type, sourceSpan, parens = true) {
@@ -1653,6 +1711,9 @@ class BinaryOperatorExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitBinaryOperatorExpr(this, context);
     }
+    clone() {
+        return new BinaryOperatorExpr(this.operator, this.lhs.clone(), this.rhs.clone(), this.type, this.sourceSpan, this.parens);
+    }
 }
 class ReadPropExpr extends Expression {
     constructor(receiver, name, type, sourceSpan) {
@@ -1673,6 +1734,9 @@ class ReadPropExpr extends Expression {
     set(value) {
         return new WritePropExpr(this.receiver, this.name, value, null, this.sourceSpan);
     }
+    clone() {
+        return new ReadPropExpr(this.receiver.clone(), this.name, this.type, this.sourceSpan);
+    }
 }
 class ReadKeyExpr extends Expression {
     constructor(receiver, index, type, sourceSpan) {
@@ -1693,6 +1757,9 @@ class ReadKeyExpr extends Expression {
     set(value) {
         return new WriteKeyExpr(this.receiver, this.index, value, null, this.sourceSpan);
     }
+    clone() {
+        return new ReadKeyExpr(this.receiver, this.index.clone(), this.type, this.sourceSpan);
+    }
 }
 class LiteralArrayExpr extends Expression {
     constructor(entries, type, sourceSpan) {
@@ -1708,6 +1775,9 @@ class LiteralArrayExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLiteralArrayExpr(this, context);
     }
+    clone() {
+        return new LiteralArrayExpr(this.entries.map(e => e.clone()), this.type, this.sourceSpan);
+    }
 }
 class LiteralMapEntry {
     constructor(key, value, quoted) {
@@ -1718,6 +1788,9 @@ class LiteralMapEntry {
     isEquivalent(e) {
         return this.key === e.key && this.value.isEquivalent(e.value);
     }
+    clone() {
+        return new LiteralMapEntry(this.key, this.value.clone(), this.quoted);
+    }
 }
 class LiteralMapExpr extends Expression {
     constructor(entries, type, sourceSpan) {
@@ -1737,6 +1810,10 @@ class LiteralMapExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitLiteralMapExpr(this, context);
     }
+    clone() {
+        const entriesClone = this.entries.map(entry => entry.clone());
+        return new LiteralMapExpr(entriesClone, this.type, this.sourceSpan);
+    }
 }
 class CommaExpr extends Expression {
     constructor(parts, sourceSpan) {
@@ -1752,6 +1829,9 @@ class CommaExpr extends Expression {
     visitExpression(visitor, context) {
         return visitor.visitCommaExpr(this, context);
     }
+    clone() {
+        return new CommaExpr(this.parts.map(p => p.clone()));
+    }
 }
 const NULL_EXPR = new LiteralExpr(null, null, null);
 const TYPED_NULL_EXPR = new LiteralExpr(null, INFERRED_TYPE, null);
@@ -2256,6 +2336,9 @@ class FixupExpression extends Expression {
     isConstant() {
         return true;
     }
+    clone() {
+        throw new Error(`Not supported.`);
+    }
     fixup(expression) {
         this.resolved = expression;
         this.shared = true;
@@ -7247,6 +7330,7 @@ class InterpolationExpression extends Expression {
         this.isConstant = unsupported;
         this.isEquivalent = unsupported;
         this.visitExpression = unsupported;
+        this.clone = unsupported;
     }
 }
 class DefaultLocalResolver {
@@ -8453,7 +8537,10 @@ class ElementAttributes {
         this.known.add(name);
         const array = this.arrayFor(kind);
         array.push(...getAttributeNameLiterals$1(name));
-        if (value !== null) {
+        if (kind === ElementAttributeKind.Attribute || kind === ElementAttributeKind.Style) {
+            if (value === null) {
+                throw Error('Attribute & style element attributes must have a value');
+            }
             array.push(value);
         }
     }
@@ -8556,6 +8643,10 @@ var OpKind;
      * An operation to instantiate a pipe.
      */
     OpKind[OpKind["Pipe"] = 16] = "Pipe";
+    /**
+     * An operation to associate an attribute with an element.
+     */
+    OpKind[OpKind["Attribute"] = 17] = "Attribute";
 })(OpKind || (OpKind = {}));
 /**
  * Distinguishes different kinds of IR expressions.
@@ -8610,6 +8701,22 @@ var ExpressionKind;
      * Binding to a pipe transformation with a variable number of arguments.
      */
     ExpressionKind[ExpressionKind["PipeBindingVariadic"] = 11] = "PipeBindingVariadic";
+    /*
+     * A safe property read requiring expansion into a null check.
+     */
+    ExpressionKind[ExpressionKind["SafePropertyRead"] = 12] = "SafePropertyRead";
+    /**
+     * A safe keyed read requiring expansion into a null check.
+     */
+    ExpressionKind[ExpressionKind["SafeKeyedRead"] = 13] = "SafeKeyedRead";
+    /**
+     * A safe function call requiring expansion into a null check.
+     */
+    ExpressionKind[ExpressionKind["SafeInvokeFunction"] = 14] = "SafeInvokeFunction";
+    /**
+     * An intermediate expression that will be expanded from a safe read into an explicit ternary.
+     */
+    ExpressionKind[ExpressionKind["SafeTernaryExpr"] = 15] = "SafeTernaryExpr";
 })(ExpressionKind || (ExpressionKind = {}));
 /**
  * Distinguishes between different kinds of `SemanticVariable`s.
@@ -8746,6 +8853,9 @@ class LexicalReadExpr extends ExpressionBase {
         return false;
     }
     transformInternalExpressions() { }
+    clone() {
+        return new LexicalReadExpr(this.name);
+    }
 }
 /**
  * Runtime operation to retrieve the value of a local reference.
@@ -8768,6 +8878,11 @@ class ReferenceExpr extends ExpressionBase {
         return false;
     }
     transformInternalExpressions() { }
+    clone() {
+        const expr = new ReferenceExpr(this.target, this.offset);
+        expr.slot = this.slot;
+        return expr;
+    }
 }
 /**
  * A reference to the current view context (usually the `ctx` variable in a template function).
@@ -8786,6 +8901,9 @@ class ContextExpr extends ExpressionBase {
         return false;
     }
     transformInternalExpressions() { }
+    clone() {
+        return new ContextExpr(this.view);
+    }
 }
 /**
  * Runtime operation to navigate to the next view context in the view hierarchy.
@@ -8804,6 +8922,11 @@ class NextContextExpr extends ExpressionBase {
         return false;
     }
     transformInternalExpressions() { }
+    clone() {
+        const expr = new NextContextExpr();
+        expr.steps = this.steps;
+        return expr;
+    }
 }
 /**
  * Runtime operation to snapshot the current view context.
@@ -8824,6 +8947,9 @@ class GetCurrentViewExpr extends ExpressionBase {
         return false;
     }
     transformInternalExpressions() { }
+    clone() {
+        return new GetCurrentViewExpr();
+    }
 }
 /**
  * Runtime operation to restore a snapshotted view.
@@ -8858,6 +8984,9 @@ class RestoreViewExpr extends ExpressionBase {
             this.view = transformExpressionsInExpression(this.view, transform, flags);
         }
     }
+    clone() {
+        return new RestoreViewExpr(this.view instanceof Expression ? this.view.clone() : this.view);
+    }
 }
 /**
  * Runtime operation to reset the current view context after `RestoreView`.
@@ -8880,6 +9009,9 @@ class ResetViewExpr extends ExpressionBase {
     transformInternalExpressions(transform, flags) {
         this.expr = transformExpressionsInExpression(this.expr, transform, flags);
     }
+    clone() {
+        return new ResetViewExpr(this.expr.clone());
+    }
 }
 /**
  * Read of a variable declared as an `ir.VariableOp` and referenced through its `ir.XrefId`.
@@ -8899,6 +9031,11 @@ class ReadVariableExpr extends ExpressionBase {
         return false;
     }
     transformInternalExpressions() { }
+    clone() {
+        const expr = new ReadVariableExpr(this.xref);
+        expr.name = this.name;
+        return expr;
+    }
 }
 class PureFunctionExpr extends ExpressionBase {
     static { _b = ConsumesVarsTrait, _c = UsesVarOffset; }
@@ -8944,6 +9081,12 @@ class PureFunctionExpr extends ExpressionBase {
             this.args[i] = transformExpressionsInExpression(this.args[i], transform, flags);
         }
     }
+    clone() {
+        const expr = new PureFunctionExpr(this.body?.clone() ?? null, this.args.map(arg => arg.clone()));
+        expr.fn = this.fn?.clone() ?? null;
+        expr.varOffset = this.varOffset;
+        return expr;
+    }
 }
 class PureFunctionParameterExpr extends ExpressionBase {
     constructor(index) {
@@ -8959,6 +9102,9 @@ class PureFunctionParameterExpr extends ExpressionBase {
         return true;
     }
     transformInternalExpressions() { }
+    clone() {
+        return new PureFunctionParameterExpr(this.index);
+    }
 }
 class PipeBindingExpr extends ExpressionBase {
     static { _d = UsesSlotIndex, _e = ConsumesVarsTrait, _f = UsesVarOffset; }
@@ -8990,6 +9136,12 @@ class PipeBindingExpr extends ExpressionBase {
             this.args[idx] = transformExpressionsInExpression(this.args[idx], transform, flags);
         }
     }
+    clone() {
+        const r = new PipeBindingExpr(this.target, this.name, this.args.map(a => a.clone()));
+        r.slot = this.slot;
+        r.varOffset = this.varOffset;
+        return r;
+    }
 }
 class PipeBindingVariadicExpr extends ExpressionBase {
     static { _g = UsesSlotIndex, _h = ConsumesVarsTrait, _j = UsesVarOffset; }
@@ -9018,6 +9170,101 @@ class PipeBindingVariadicExpr extends ExpressionBase {
     transformInternalExpressions(transform, flags) {
         this.args = transformExpressionsInExpression(this.args, transform, flags);
     }
+    clone() {
+        const r = new PipeBindingVariadicExpr(this.target, this.name, this.args.clone(), this.numArgs);
+        r.slot = this.slot;
+        r.varOffset = this.varOffset;
+        return r;
+    }
+}
+class SafePropertyReadExpr extends ExpressionBase {
+    constructor(receiver, name) {
+        super();
+        this.receiver = receiver;
+        this.name = name;
+        this.kind = ExpressionKind.SafePropertyRead;
+    }
+    visitExpression(visitor, context) { }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.receiver = transformExpressionsInExpression(this.receiver, transform, flags);
+    }
+    clone() {
+        return new SafePropertyReadExpr(this.receiver.clone(), this.name);
+    }
+}
+class SafeKeyedReadExpr extends ExpressionBase {
+    constructor(receiver, index) {
+        super();
+        this.receiver = receiver;
+        this.index = index;
+        this.kind = ExpressionKind.SafeKeyedRead;
+    }
+    visitExpression(visitor, context) { }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.receiver = transformExpressionsInExpression(this.receiver, transform, flags);
+        this.index = transformExpressionsInExpression(this.index, transform, flags);
+    }
+    clone() {
+        return new SafeKeyedReadExpr(this.receiver.clone(), this.index.clone());
+    }
+}
+class SafeInvokeFunctionExpr extends ExpressionBase {
+    constructor(receiver, args) {
+        super();
+        this.receiver = receiver;
+        this.args = args;
+        this.kind = ExpressionKind.SafeInvokeFunction;
+    }
+    visitExpression(visitor, context) { }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.receiver = transformExpressionsInExpression(this.receiver, transform, flags);
+        for (let i = 0; i < this.args.length; i++) {
+            this.args[i] = transformExpressionsInExpression(this.args[i], transform, flags);
+        }
+    }
+    clone() {
+        return new SafeInvokeFunctionExpr(this.receiver.clone(), this.args.map(a => a.clone()));
+    }
+}
+class SafeTernaryExpr extends ExpressionBase {
+    constructor(guard, expr) {
+        super();
+        this.guard = guard;
+        this.expr = expr;
+        this.kind = ExpressionKind.SafeTernaryExpr;
+    }
+    visitExpression(visitor, context) { }
+    isEquivalent() {
+        return false;
+    }
+    isConstant() {
+        return false;
+    }
+    transformInternalExpressions(transform, flags) {
+        this.guard = transformExpressionsInExpression(this.guard, transform, flags);
+        this.expr = transformExpressionsInExpression(this.expr, transform, flags);
+    }
+    clone() {
+        return new SafeTernaryExpr(this.guard.clone(), this.expr.clone());
+    }
 }
 /**
  * Visits all `Expression`s in the AST of `op` with the `visitor` function.
@@ -9052,6 +9299,11 @@ function transformExpressionsInOp(op, transform, flags) {
         case OpKind.Statement:
             transformExpressionsInStatement(op.statement, transform, flags);
             break;
+        case OpKind.Attribute:
+            if (op.value) {
+                transformExpressionsInExpression(op.value, transform, flags);
+            }
+            break;
         case OpKind.Variable:
             op.initializer = transformExpressionsInExpression(op.initializer, transform, flags);
             break;
@@ -9421,6 +9673,18 @@ const NEW_OP = {
     next: null,
 };
 
+/**
+ * The set of OpKinds that represent the creation of an element or container
+ */
+const elementContainerOpKinds = new Set([
+    OpKind.Element, OpKind.ElementStart, OpKind.Container, OpKind.ContainerStart, OpKind.Template
+]);
+/**
+ * Checks whether the given operation represents the creation of an element or container.
+ */
+function isElementOrContainerOp(op) {
+    return elementContainerOpKinds.has(op.kind);
+}
 /**
  * Create an `ElementStartOp`.
  */
@@ -9515,10 +9779,11 @@ function createInterpolateTextOp(xref, strings, expressions) {
 /**
  * Create a `PropertyOp`.
  */
-function createPropertyOp(xref, name, expression) {
+function createPropertyOp(xref, bindingKind, name, expression) {
     return {
         kind: OpKind.Property,
         target: xref,
+        bindingKind,
         name,
         expression,
         ...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
@@ -9526,13 +9791,27 @@ function createPropertyOp(xref, name, expression) {
         ...NEW_OP,
     };
 }
+/**
+ * Create an `AttributeOp`.
+ */
+function createAttributeOp(target, attributeKind, name, value) {
+    return {
+        kind: OpKind.Attribute,
+        target,
+        attributeKind,
+        name,
+        value,
+        ...NEW_OP,
+    };
+}
 /**
  * Create a `InterpolateProperty`.
  */
-function createInterpolatePropertyOp(xref, name, strings, expressions) {
+function createInterpolatePropertyOp(xref, bindingKind, name, strings, expressions) {
     return {
         kind: OpKind.InterpolateProperty,
         target: xref,
+        bindingKind,
         name,
         strings,
         expressions,
@@ -9553,62 +9832,302 @@ function createAdvanceOp(delta) {
 }
 
 /**
- * Converts the semantic attributes of element-like operations (elements, templates) into constant
- * array expressions, and lifts them into the overall component `consts`.
+ * Counts the number of variable slots used within each view, and stores that on the view itself, as
+ * well as propagates it to the `ir.TemplateOp` for embedded views.
  */
-function phaseConstCollection(cpl) {
+function phaseVarCounting(cpl) {
+    // First, count the vars used in each view, and update the view-level counter.
     for (const [_, view] of cpl.views) {
-        for (const op of view.create) {
-            if (op.kind !== OpKind.ElementStart && op.kind !== OpKind.Element &&
-                op.kind !== OpKind.Template) {
-                continue;
+        let varCount = 0;
+        for (const op of view.ops()) {
+            if (hasConsumesVarsTrait(op)) {
+                varCount += varsUsedByOp(op);
             }
-            else if (!(op.attributes instanceof ElementAttributes)) {
+            visitExpressionsInOp(op, expr => {
+                if (!isIrExpression(expr)) {
+                    return;
+                }
+                // Some expressions require knowledge of the number of variable slots consumed.
+                if (hasUsesVarOffsetTrait(expr)) {
+                    expr.varOffset = varCount;
+                }
+                if (hasConsumesVarsTrait(expr)) {
+                    varCount += varsUsedByIrExpression(expr);
+                }
+            });
+        }
+        view.vars = varCount;
+    }
+    // Add var counts for each view to the `ir.TemplateOp` which declares that view (if the view is an
+    // embedded view).
+    for (const [_, view] of cpl.views) {
+        for (const op of view.create) {
+            if (op.kind !== OpKind.Template) {
                 continue;
             }
-            const attrArray = serializeAttributes(op.attributes);
-            if (attrArray.entries.length > 0) {
-                op.attributes = cpl.addConst(attrArray);
-            }
-            else {
-                op.attributes = null;
-            }
+            const childView = cpl.views.get(op.xref);
+            op.vars = childView.vars;
         }
     }
 }
-function serializeAttributes({ attributes, bindings, classes, i18n, projectAs, styles, template }) {
-    const attrArray = [...attributes];
-    if (projectAs !== null) {
-        attrArray.push(literal(5 /* core.AttributeMarker.ProjectAs */), literal(projectAs));
-    }
-    if (classes.length > 0) {
-        attrArray.push(literal(1 /* core.AttributeMarker.Classes */), ...classes);
-    }
-    if (styles.length > 0) {
-        attrArray.push(literal(2 /* core.AttributeMarker.Styles */), ...styles);
-    }
-    if (bindings.length > 0) {
-        attrArray.push(literal(3 /* core.AttributeMarker.Bindings */), ...bindings);
-    }
-    if (template.length > 0) {
-        attrArray.push(literal(4 /* core.AttributeMarker.Template */), ...template);
-    }
-    if (i18n.length > 0) {
-        attrArray.push(literal(6 /* core.AttributeMarker.I18n */), ...i18n);
-    }
-    return literalArr(attrArray);
-}
-
-const REPLACEMENTS = new Map([
-    [OpKind.ElementEnd, [OpKind.ElementStart, OpKind.Element]],
-    [OpKind.ContainerEnd, [OpKind.ContainerStart, OpKind.Container]],
-]);
 /**
- * Replace sequences of mergable elements (e.g. `ElementStart` and `ElementEnd`) with a consolidated
- * element (e.g. `Element`).
+ * Different operations that implement `ir.UsesVarsTrait` use different numbers of variables, so
+ * count the variables used by any particular `op`.
  */
-function phaseEmptyElements(cpl) {
-    for (const [_, view] of cpl.views) {
+function varsUsedByOp(op) {
+    switch (op.kind) {
+        case OpKind.Property:
+            // Property bindings use 1 variable slot.
+            return 1;
+        case OpKind.InterpolateText:
+            // `ir.InterpolateTextOp`s use a variable slot for each dynamic expression.
+            return op.expressions.length;
+        case OpKind.InterpolateProperty:
+            // `ir.InterpolatePropertyOp`s use a variable slot for each dynamic expression, plus one for
+            // the result.
+            return 1 + op.expressions.length;
+        default:
+            throw new Error(`Unhandled op: ${OpKind[op.kind]}`);
+    }
+}
+function varsUsedByIrExpression(expr) {
+    switch (expr.kind) {
+        case ExpressionKind.PureFunctionExpr:
+            return 1 + expr.args.length;
+        case ExpressionKind.PipeBinding:
+            return 1 + expr.args.length;
+        case ExpressionKind.PipeBindingVariadic:
+            return 1 + expr.numArgs;
+        default:
+            throw new Error(`AssertionError: unhandled ConsumesVarsTrait expression ${expr.constructor.name}`);
+    }
+}
+
+function phaseAlignPipeVariadicVarOffset(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.update) {
+            visitExpressionsInOp(op, expr => {
+                if (!(expr instanceof PipeBindingVariadicExpr)) {
+                    return expr;
+                }
+                if (!(expr.args instanceof PureFunctionExpr)) {
+                    return expr;
+                }
+                if (expr.varOffset === null || expr.args.varOffset === null) {
+                    throw new Error(`Must run after variable counting`);
+                }
+                // The structure of this variadic pipe expression is:
+                // PipeBindingVariadic(#, Y, PureFunction(X, ...ARGS))
+                // Where X and Y are the slot offsets for the variables used by these operations, and Y > X.
+                // In `TemplateDefinitionBuilder` the PipeBindingVariadic variable slots are allocated
+                // before the PureFunction slots, which is unusually out-of-order.
+                //
+                // To maintain identical output for the tests in question, we adjust the variable offsets of
+                // these two calls to emulate TDB's behavior. This is not perfect, because the ARGS of the
+                // PureFunction call may also allocate slots which by TDB's ordering would come after X, and
+                // we don't account for that. Still, this should be enough to pass the existing pipe tests.
+                // Put the PipeBindingVariadic vars where the PureFunction vars were previously allocated.
+                expr.varOffset = expr.args.varOffset;
+                // Put the PureFunction vars following the PipeBindingVariadic vars.
+                expr.args.varOffset = expr.varOffset + varsUsedByIrExpression(expr);
+            });
+        }
+    }
+}
+
+/**
+ * Looks up an element in the given map by xref ID.
+ */
+function lookupElement(elements, xref) {
+    const el = elements.get(xref);
+    if (el === undefined) {
+        throw new Error('All attributes should have an element-like target.');
+    }
+    return el;
+}
+/**
+ * Find all attribute and binding ops, and collect them into the ElementAttribute structures.
+ * In cases where no instruction needs to be generated for the attribute or binding, it is removed.
+ */
+function phaseAttributeExtraction(cpl, compatibility) {
+    for (const [_, view] of cpl.views) {
+        populateElementAttributes(view, compatibility);
+    }
+}
+/**
+ * Populates the ElementAttributes map for the given view, and removes ops for any bindings that do
+ * not need further processing.
+ */
+function populateElementAttributes(view, compatibility) {
+    const elements = new Map();
+    for (const op of view.create) {
+        if (!isElementOrContainerOp(op)) {
+            continue;
+        }
+        elements.set(op.xref, op);
+    }
+    for (const op of view.ops()) {
+        let ownerOp;
+        switch (op.kind) {
+            case OpKind.Attribute:
+                ownerOp = lookupElement(elements, op.target);
+                assertIsElementAttributes(ownerOp.attributes);
+                let extractable = compatibility ?
+                    (op.value instanceof LiteralExpr && typeof op.value.value === 'string') :
+                    (op.value.isConstant());
+                // We don't need to generate instructions for attributes that can be extracted as consts.
+                if (extractable) {
+                    ownerOp.attributes.add(op.attributeKind, op.name, op.value);
+                    OpList.remove(op);
+                }
+                break;
+            case OpKind.Property:
+            case OpKind.InterpolateProperty:
+                ownerOp = lookupElement(elements, op.target);
+                assertIsElementAttributes(ownerOp.attributes);
+                ownerOp.attributes.add(op.bindingKind, op.name, null);
+                break;
+            case OpKind.Listener:
+                ownerOp = lookupElement(elements, op.target);
+                assertIsElementAttributes(ownerOp.attributes);
+                ownerOp.attributes.add(ElementAttributeKind.Binding, op.name, null);
+                // We don't need to generate instructions for listeners on templates.
+                if (ownerOp.kind === OpKind.Template) {
+                    OpList.remove(op);
+                }
+                break;
+        }
+    }
+}
+
+const CHAINABLE = new Set([
+    Identifiers.elementStart,
+    Identifiers.elementEnd,
+    Identifiers.property,
+    Identifiers.elementContainerStart,
+    Identifiers.elementContainerEnd,
+    Identifiers.elementContainer,
+]);
+/**
+ * Post-process a reified view compilation and convert sequential calls to chainable instructions
+ * into chain calls.
+ *
+ * For example, two `elementStart` operations in sequence:
+ *
+ * ```typescript
+ * elementStart(0, 'div');
+ * elementStart(1, 'span');
+ * ```
+ *
+ * Can be called as a chain instead:
+ *
+ * ```typescript
+ * elementStart(0, 'div')(1, 'span');
+ * ```
+ */
+function phaseChaining(cpl) {
+    for (const [_, view] of cpl.views) {
+        chainOperationsInList(view.create);
+        chainOperationsInList(view.update);
+    }
+}
+function chainOperationsInList(opList) {
+    let chain = null;
+    for (const op of opList) {
+        if (op.kind !== OpKind.Statement || !(op.statement instanceof ExpressionStatement)) {
+            // This type of statement isn't chainable.
+            chain = null;
+            continue;
+        }
+        if (!(op.statement.expr instanceof InvokeFunctionExpr) ||
+            !(op.statement.expr.fn instanceof ExternalExpr)) {
+            // This is a statement, but not an instruction-type call, so not chainable.
+            chain = null;
+            continue;
+        }
+        const instruction = op.statement.expr.fn.value;
+        if (!CHAINABLE.has(instruction)) {
+            // This instruction isn't chainable.
+            chain = null;
+            continue;
+        }
+        // This instruction can be chained. It can either be added on to the previous chain (if
+        // compatible) or it can be the start of a new chain.
+        if (chain !== null && chain.instruction === instruction) {
+            // This instruction can be added onto the previous chain.
+            const expression = chain.expression.callFn(op.statement.expr.args, op.statement.expr.sourceSpan, op.statement.expr.pure);
+            chain.expression = expression;
+            chain.op.statement = expression.toStmt();
+            OpList.remove(op);
+        }
+        else {
+            // Leave this instruction alone for now, but consider it the start of a new chain.
+            chain = {
+                op,
+                instruction,
+                expression: op.statement.expr,
+            };
+        }
+    }
+}
+
+/**
+ * Converts the semantic attributes of element-like operations (elements, templates) into constant
+ * array expressions, and lifts them into the overall component `consts`.
+ */
+function phaseConstCollection(cpl) {
+    for (const [_, view] of cpl.views) {
+        for (const op of view.create) {
+            if (op.kind !== OpKind.ElementStart && op.kind !== OpKind.Element &&
+                op.kind !== OpKind.Template) {
+                continue;
+            }
+            else if (!(op.attributes instanceof ElementAttributes)) {
+                continue;
+            }
+            const attrArray = serializeAttributes(op.attributes);
+            if (attrArray.entries.length > 0) {
+                op.attributes = cpl.addConst(attrArray);
+            }
+            else {
+                op.attributes = null;
+            }
+        }
+    }
+}
+function serializeAttributes({ attributes, bindings, classes, i18n, projectAs, styles, template }) {
+    const attrArray = [...attributes];
+    if (projectAs !== null) {
+        attrArray.push(literal(5 /* core.AttributeMarker.ProjectAs */), literal(projectAs));
+    }
+    if (classes.length > 0) {
+        attrArray.push(literal(1 /* core.AttributeMarker.Classes */), ...classes);
+    }
+    if (styles.length > 0) {
+        attrArray.push(literal(2 /* core.AttributeMarker.Styles */), ...styles);
+    }
+    if (bindings.length > 0) {
+        attrArray.push(literal(3 /* core.AttributeMarker.Bindings */), ...bindings);
+    }
+    if (template.length > 0) {
+        attrArray.push(literal(4 /* core.AttributeMarker.Template */), ...template);
+    }
+    if (i18n.length > 0) {
+        attrArray.push(literal(6 /* core.AttributeMarker.I18n */), ...i18n);
+    }
+    return literalArr(attrArray);
+}
+
+const REPLACEMENTS = new Map([
+    [OpKind.ElementEnd, [OpKind.ElementStart, OpKind.Element]],
+    [OpKind.ContainerEnd, [OpKind.ContainerStart, OpKind.Container]],
+]);
+/**
+ * Replace sequences of mergable elements (e.g. `ElementStart` and `ElementEnd`) with a consolidated
+ * element (e.g. `Element`).
+ */
+function phaseEmptyElements(cpl) {
+    for (const [_, view] of cpl.views) {
         for (const op of view.create) {
             const opReplacements = REPLACEMENTS.get(op.kind);
             if (opReplacements === undefined) {
@@ -9674,804 +10193,961 @@ function phaseGenerateAdvance(cpl) {
     }
 }
 
-// This file contains helpers for generating calls to Ivy instructions. In particular, each
-// instruction type is represented as a function, which may select a specific instruction variant
-// depending on the exact arguments.
-function element(slot, tag, constIndex, localRefIndex) {
-    return elementOrContainerBase(Identifiers.element, slot, tag, constIndex, localRefIndex);
-}
-function elementStart(slot, tag, constIndex, localRefIndex) {
-    return elementOrContainerBase(Identifiers.elementStart, slot, tag, constIndex, localRefIndex);
-}
-function elementOrContainerBase(instruction, slot, tag, constIndex, localRefIndex) {
-    const args = [literal(slot)];
-    if (tag !== null) {
-        args.push(literal(tag));
-    }
-    if (localRefIndex !== null) {
-        args.push(literal(constIndex), // might be null, but that's okay.
-        literal(localRefIndex));
-    }
-    else if (constIndex !== null) {
-        args.push(literal(constIndex));
+function phaseNullishCoalescing(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.ops()) {
+            transformExpressionsInOp(op, expr => {
+                if (!(expr instanceof BinaryOperatorExpr) ||
+                    expr.operator !== BinaryOperator.NullishCoalesce) {
+                    return expr;
+                }
+                // TODO: We need to unconditionally emit a temporary variable to match
+                // TemplateDefinitionBuilder. (We could also emit one conditionally when not in
+                // compatibility mode.)
+                return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.And, new BinaryOperatorExpr(BinaryOperator.NotIdentical, expr.lhs, NULL_EXPR), new BinaryOperatorExpr(BinaryOperator.NotIdentical, expr.lhs, new LiteralExpr(undefined))), expr.lhs, expr.rhs);
+            }, VisitorContextFlag.None);
+        }
     }
-    return call(instruction, args);
-}
-function elementEnd() {
-    return call(Identifiers.elementEnd, []);
-}
-function elementContainerStart(slot, constIndex, localRefIndex) {
-    return elementOrContainerBase(Identifiers.elementContainerStart, slot, /* tag */ null, constIndex, localRefIndex);
 }
-function elementContainer(slot, constIndex, localRefIndex) {
-    return elementOrContainerBase(Identifiers.elementContainer, slot, /* tag */ null, constIndex, localRefIndex);
-}
-function elementContainerEnd() {
-    return call(Identifiers.elementContainerEnd, []);
-}
-function template(slot, templateFnRef, decls, vars, tag, constIndex) {
-    return call(Identifiers.templateCreate, [
-        literal(slot),
-        templateFnRef,
-        literal(decls),
-        literal(vars),
-        literal(tag),
-        literal(constIndex),
-    ]);
-}
-function listener(name, handlerFn) {
-    return call(Identifiers.listener, [
-        literal(name),
-        handlerFn,
-    ]);
-}
-function pipe(slot, name) {
-    return call(Identifiers.pipe, [
-        literal(slot),
-        literal(name),
-    ]);
-}
-function advance(delta) {
-    return call(Identifiers.advance, [
-        literal(delta),
-    ]);
-}
-function reference(slot) {
-    return importExpr(Identifiers.reference).callFn([
-        literal(slot),
-    ]);
-}
-function nextContext(steps) {
-    return importExpr(Identifiers.nextContext).callFn(steps === 1 ? [] : [literal(steps)]);
-}
-function getCurrentView() {
-    return importExpr(Identifiers.getCurrentView).callFn([]);
-}
-function restoreView(savedView) {
-    return importExpr(Identifiers.restoreView).callFn([
-        savedView,
-    ]);
-}
-function resetView(returnValue) {
-    return importExpr(Identifiers.resetView).callFn([
-        returnValue,
-    ]);
+
+/**
+ * Generate a preamble sequence for each view creation block and listener function which declares
+ * any variables that be referenced in other operations in the block.
+ *
+ * Variables generated include:
+ *   * a saved view context to be used to restore the current view in event listeners.
+ *   * the context of the restored view within event listener handlers.
+ *   * context variables from the current view as well as all parent views (including the root
+ *     context if needed).
+ *   * local references from elements within the current view and any lexical parents.
+ *
+ * Variables are generated here unconditionally, and may optimized away in future operations if it
+ * turns out their values (and any side effects) are unused.
+ */
+function phaseGenerateVariables(cpl) {
+    recursivelyProcessView(cpl.root, /* there is no parent scope for the root view */ null);
 }
-function text(slot, initialValue) {
-    const args = [literal(slot)];
-    if (initialValue !== '') {
-        args.push(literal(initialValue));
+/**
+ * Process the given `ViewCompilation` and generate preambles for it and any listeners that it
+ * declares.
+ *
+ * @param `parentScope` a scope extracted from the parent view which captures any variables which
+ *     should be inherited by this view. `null` if the current view is the root view.
+ */
+function recursivelyProcessView(view, parentScope) {
+    // Extract a `Scope` from this view.
+    const scope = getScopeForView(view, parentScope);
+    // Embedded views require an operation to save/restore the view context.
+    if (view.parent !== null) {
+        // Start the view creation block with an operation to save the current view context. This may be
+        // used to restore the view context in any listeners that may be present.
     }
-    return call(Identifiers.text, args);
-}
-function property(name, expression) {
-    return call(Identifiers.property, [
-        literal(name),
-        expression,
-    ]);
-}
-const PIPE_BINDINGS = [
-    Identifiers.pipeBind1,
-    Identifiers.pipeBind2,
-    Identifiers.pipeBind3,
-    Identifiers.pipeBind4,
-];
-function pipeBind(slot, varOffset, args) {
-    if (args.length < 1 || args.length > PIPE_BINDINGS.length) {
-        throw new Error(`pipeBind() argument count out of bounds`);
+    for (const op of view.create) {
+        switch (op.kind) {
+            case OpKind.Template:
+                // Descend into child embedded views.
+                recursivelyProcessView(view.tpl.views.get(op.xref), scope);
+                break;
+            case OpKind.Listener:
+                // Prepend variables to listener handler functions.
+                op.handlerOps.prepend(generateVariablesInScopeForView(view, scope));
+                break;
+        }
     }
-    const instruction = PIPE_BINDINGS[args.length - 1];
-    return importExpr(instruction).callFn([
-        literal(slot),
-        literal(varOffset),
-        ...args,
-    ]);
-}
-function pipeBindV(slot, varOffset, args) {
-    return importExpr(Identifiers.pipeBindV).callFn([
-        literal(slot),
-        literal(varOffset),
-        args,
-    ]);
+    // Prepend the declarations for all available variables in scope to the `update` block.
+    const preambleOps = generateVariablesInScopeForView(view, scope);
+    view.update.prepend(preambleOps);
 }
-function textInterpolate(strings, expressions) {
-    if (strings.length < 1 || expressions.length !== strings.length - 1) {
-        throw new Error(`AssertionError: expected specific shape of args for strings/expressions in interpolation`);
-    }
-    const interpolationArgs = [];
-    if (expressions.length === 1 && strings[0] === '' && strings[1] === '') {
-        interpolationArgs.push(expressions[0]);
+/**
+ * Process a view and generate a `Scope` representing the variables available for reference within
+ * that view.
+ */
+function getScopeForView(view, parent) {
+    const scope = {
+        view: view.xref,
+        viewContextVariable: {
+            kind: SemanticVariableKind.Context,
+            name: null,
+            view: view.xref,
+        },
+        contextVariables: new Map(),
+        references: [],
+        parent,
+    };
+    for (const identifier of view.contextVariables.keys()) {
+        scope.contextVariables.set(identifier, {
+            kind: SemanticVariableKind.Identifier,
+            name: null,
+            identifier,
+        });
     }
-    else {
-        let idx;
-        for (idx = 0; idx < expressions.length; idx++) {
-            interpolationArgs.push(literal(strings[idx]), expressions[idx]);
+    for (const op of view.create) {
+        switch (op.kind) {
+            case OpKind.Element:
+            case OpKind.ElementStart:
+            case OpKind.Template:
+                if (!Array.isArray(op.localRefs)) {
+                    throw new Error(`AssertionError: expected localRefs to be an array`);
+                }
+                // Record available local references from this element.
+                for (let offset = 0; offset < op.localRefs.length; offset++) {
+                    scope.references.push({
+                        name: op.localRefs[offset].name,
+                        targetId: op.xref,
+                        offset,
+                        variable: {
+                            kind: SemanticVariableKind.Identifier,
+                            name: null,
+                            identifier: op.localRefs[offset].name,
+                        },
+                    });
+                }
+                break;
         }
-        // idx points at the last string.
-        interpolationArgs.push(literal(strings[idx]));
     }
-    return callVariadicInstruction(TEXT_INTERPOLATE_CONFIG, [], interpolationArgs);
+    return scope;
 }
-function propertyInterpolate(name, strings, expressions) {
-    if (strings.length < 1 || expressions.length !== strings.length - 1) {
-        throw new Error(`AssertionError: expected specific shape of args for strings/expressions in interpolation`);
+/**
+ * Generate declarations for all variables that are in scope for a given view.
+ *
+ * This is a recursive process, as views inherit variables available from their parent view, which
+ * itself may have inherited variables, etc.
+ */
+function generateVariablesInScopeForView(view, scope) {
+    const newOps = [];
+    if (scope.view !== view.xref) {
+        // Before generating variables for a parent view, we need to switch to the context of the parent
+        // view with a `nextContext` expression. This context switching operation itself declares a
+        // variable, because the context of the view may be referenced directly.
+        newOps.push(createVariableOp(view.tpl.allocateXrefId(), scope.viewContextVariable, new NextContextExpr()));
     }
-    const interpolationArgs = [];
-    if (expressions.length === 1 && strings[0] === '' && strings[1] === '') {
-        interpolationArgs.push(expressions[0]);
+    // Add variables for all context variables available in this scope's view.
+    for (const [name, value] of view.tpl.views.get(scope.view).contextVariables) {
+        newOps.push(createVariableOp(view.tpl.allocateXrefId(), scope.contextVariables.get(name), new ReadPropExpr(new ContextExpr(scope.view), value)));
     }
-    else {
-        let idx;
-        for (idx = 0; idx < expressions.length; idx++) {
-            interpolationArgs.push(literal(strings[idx]), expressions[idx]);
-        }
-        // idx points at the last string.
-        interpolationArgs.push(literal(strings[idx]));
+    // Add variables for all local references declared for elements in this scope.
+    for (const ref of scope.references) {
+        newOps.push(createVariableOp(view.tpl.allocateXrefId(), ref.variable, new ReferenceExpr(ref.targetId, ref.offset)));
     }
-    return callVariadicInstruction(PROPERTY_INTERPOLATE_CONFIG, [literal(name)], interpolationArgs);
-}
-function pureFunction(varOffset, fn, args) {
-    return callVariadicInstructionExpr(PURE_FUNCTION_CONFIG, [
-        literal(varOffset),
-        fn,
-    ], args);
-}
-function call(instruction, args) {
-    return createStatementOp(importExpr(instruction).callFn(args).toStmt());
+    if (scope.parent !== null) {
+        // Recursively add variables from the parent scope.
+        newOps.push(...generateVariablesInScopeForView(view, scope.parent));
+    }
+    return newOps;
 }
+
 /**
- * `InterpolationConfig` for the `textInterpolate` instruction.
+ * Lifts local reference declarations on element-like structures within each view into an entry in
+ * the `consts` array for the whole component.
  */
-const TEXT_INTERPOLATE_CONFIG = {
-    constant: [
-        Identifiers.textInterpolate,
-        Identifiers.textInterpolate1,
-        Identifiers.textInterpolate2,
-        Identifiers.textInterpolate3,
-        Identifiers.textInterpolate4,
-        Identifiers.textInterpolate5,
-        Identifiers.textInterpolate6,
-        Identifiers.textInterpolate7,
-        Identifiers.textInterpolate8,
-    ],
-    variable: Identifiers.textInterpolateV,
-    mapping: n => {
-        if (n % 2 === 0) {
-            throw new Error(`Expected odd number of arguments`);
-        }
-        return (n - 1) / 2;
-    },
-};
-/**
- * `InterpolationConfig` for the `propertyInterpolate` instruction.
- */
-const PROPERTY_INTERPOLATE_CONFIG = {
-    constant: [
-        Identifiers.propertyInterpolate,
-        Identifiers.propertyInterpolate1,
-        Identifiers.propertyInterpolate2,
-        Identifiers.propertyInterpolate3,
-        Identifiers.propertyInterpolate4,
-        Identifiers.propertyInterpolate5,
-        Identifiers.propertyInterpolate6,
-        Identifiers.propertyInterpolate7,
-        Identifiers.propertyInterpolate8,
-    ],
-    variable: Identifiers.propertyInterpolateV,
-    mapping: n => {
-        if (n % 2 === 0) {
-            throw new Error(`Expected odd number of arguments`);
+function phaseLocalRefs(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.create) {
+            switch (op.kind) {
+                case OpKind.ElementStart:
+                case OpKind.Element:
+                case OpKind.Template:
+                    if (!Array.isArray(op.localRefs)) {
+                        throw new Error(`AssertionError: expected localRefs to be an array still`);
+                    }
+                    op.numSlotsUsed += op.localRefs.length;
+                    if (op.localRefs.length > 0) {
+                        const localRefs = serializeLocalRefs(op.localRefs);
+                        op.localRefs = cpl.addConst(localRefs);
+                    }
+                    else {
+                        op.localRefs = null;
+                    }
+                    break;
+            }
         }
-        return (n - 1) / 2;
-    },
-};
-const PURE_FUNCTION_CONFIG = {
-    constant: [
-        Identifiers.pureFunction0,
-        Identifiers.pureFunction1,
-        Identifiers.pureFunction2,
-        Identifiers.pureFunction3,
-        Identifiers.pureFunction4,
-        Identifiers.pureFunction5,
-        Identifiers.pureFunction6,
-        Identifiers.pureFunction7,
-        Identifiers.pureFunction8,
-    ],
-    variable: Identifiers.pureFunctionV,
-    mapping: n => n,
-};
-function callVariadicInstructionExpr(config, baseArgs, interpolationArgs) {
-    const n = config.mapping(interpolationArgs.length);
-    if (n < config.constant.length) {
-        // Constant calling pattern.
-        return importExpr(config.constant[n]).callFn([...baseArgs, ...interpolationArgs]);
-    }
-    else if (config.variable !== null) {
-        // Variable calling pattern.
-        return importExpr(config.variable).callFn([...baseArgs, literalArr(interpolationArgs)]);
-    }
-    else {
-        throw new Error(`AssertionError: unable to call variadic function`);
     }
 }
-function callVariadicInstruction(config, baseArgs, interpolationArgs) {
-    return createStatementOp(callVariadicInstructionExpr(config, baseArgs, interpolationArgs).toStmt());
+function serializeLocalRefs(refs) {
+    const constRefs = [];
+    for (const ref of refs) {
+        constRefs.push(literal(ref.name), literal(ref.target));
+    }
+    return literalArr(constRefs);
 }
 
 /**
- * Compiles semantic operations across all views and generates output `o.Statement`s with actual
- * runtime calls in their place.
+ * Generate names for functions and variables across all views.
  *
- * Reification replaces semantic operations with selected Ivy instructions and other generated code
- * structures. After reification, the create/update operation lists of all views should only contain
- * `ir.StatementOp`s (which wrap generated `o.Statement`s).
+ * This includes propagating those names into any `ir.ReadVariableExpr`s of those variables, so that
+ * the reads can be emitted correctly.
  */
-function phaseReify(cpl) {
-    for (const [_, view] of cpl.views) {
-        reifyCreateOperations(view, view.create);
-        reifyUpdateOperations(view, view.update);
-    }
+function phaseNaming(cpl) {
+    addNamesToView(cpl.root, cpl.componentName, { index: 0 });
 }
-function reifyCreateOperations(view, ops) {
-    for (const op of ops) {
-        transformExpressionsInOp(op, reifyIrExpression, VisitorContextFlag.None);
+function addNamesToView(view, baseName, state) {
+    if (view.fnName === null) {
+        view.fnName = `${baseName}_Template`;
+    }
+    // Keep track of the names we assign to variables in the view. We'll need to propagate these
+    // into reads of those variables afterwards.
+    const varNames = new Map();
+    for (const op of view.ops()) {
         switch (op.kind) {
-            case OpKind.Text:
-                OpList.replace(op, text(op.slot, op.initialValue));
-                break;
-            case OpKind.ElementStart:
-                OpList.replace(op, elementStart(op.slot, op.tag, op.attributes, op.localRefs));
-                break;
-            case OpKind.Element:
-                OpList.replace(op, element(op.slot, op.tag, op.attributes, op.localRefs));
-                break;
-            case OpKind.ElementEnd:
-                OpList.replace(op, elementEnd());
-                break;
-            case OpKind.ContainerStart:
-                OpList.replace(op, elementContainerStart(op.slot, op.attributes, op.localRefs));
-                break;
-            case OpKind.Container:
-                OpList.replace(op, elementContainer(op.slot, op.attributes, op.localRefs));
+            case OpKind.Listener:
+                if (op.handlerFnName === null) {
+                    // TODO(alxhub): convert this temporary name to match how the
+                    // `TemplateDefinitionBuilder` names listener functions.
+                    if (op.slot === null) {
+                        throw new Error(`Expected a slot to be assigned`);
+                    }
+                    op.handlerFnName = `${view.fnName}_${op.tag}_${op.name}_${op.slot}_listener`;
+                }
                 break;
-            case OpKind.ContainerEnd:
-                OpList.replace(op, elementContainerEnd());
+            case OpKind.Variable:
+                varNames.set(op.xref, getVariableName(op.variable, state));
                 break;
             case OpKind.Template:
                 const childView = view.tpl.views.get(op.xref);
-                OpList.replace(op, template(op.slot, variable(childView.fnName), childView.decls, childView.vars, op.tag, op.attributes));
-                break;
-            case OpKind.Pipe:
-                OpList.replace(op, pipe(op.slot, op.name));
-                break;
-            case OpKind.Listener:
-                const listenerFn = reifyListenerHandler(view, op.handlerFnName, op.handlerOps);
-                OpList.replace(op, listener(op.name, listenerFn));
-                break;
-            case OpKind.Variable:
-                if (op.variable.name === null) {
-                    throw new Error(`AssertionError: unnamed variable ${op.xref}`);
+                if (op.slot === null) {
+                    throw new Error(`Expected slot to be assigned`);
                 }
-                OpList.replace(op, createStatementOp(new DeclareVarStmt(op.variable.name, op.initializer, undefined, StmtModifier.Final)));
-                break;
-            case OpKind.Statement:
-                // Pass statement operations directly through.
+                // TODO: properly escape the tag name.
+                const safeTagName = op.tag.replace('-', '_');
+                addNamesToView(childView, `${baseName}_${safeTagName}_${op.slot}`, state);
                 break;
-            default:
-                throw new Error(`AssertionError: Unsupported reification of create op ${OpKind[op.kind]}`);
         }
     }
+    // Having named all variables declared in the view, now we can push those names into the
+    // `ir.ReadVariableExpr` expressions which represent reads of those variables.
+    for (const op of view.ops()) {
+        visitExpressionsInOp(op, expr => {
+            if (!(expr instanceof ReadVariableExpr) || expr.name !== null) {
+                return;
+            }
+            if (!varNames.has(expr.xref)) {
+                throw new Error(`Variable ${expr.xref} not yet named`);
+            }
+            expr.name = varNames.get(expr.xref);
+        });
+    }
 }
-function reifyUpdateOperations(_view, ops) {
-    for (const op of ops) {
-        transformExpressionsInOp(op, reifyIrExpression, VisitorContextFlag.None);
-        switch (op.kind) {
-            case OpKind.Advance:
-                OpList.replace(op, advance(op.delta));
-                break;
-            case OpKind.Property:
-                OpList.replace(op, property(op.name, op.expression));
-                break;
-            case OpKind.InterpolateProperty:
-                OpList.replace(op, propertyInterpolate(op.name, op.strings, op.expressions));
-                break;
-            case OpKind.InterpolateText:
-                OpList.replace(op, textInterpolate(op.strings, op.expressions));
-                break;
-            case OpKind.Variable:
-                if (op.variable.name === null) {
-                    throw new Error(`AssertionError: unnamed variable ${op.xref}`);
-                }
-                OpList.replace(op, createStatementOp(new DeclareVarStmt(op.variable.name, op.initializer, undefined, StmtModifier.Final)));
-                break;
-            case OpKind.Statement:
-                // Pass statement operations directly through.
+function getVariableName(variable, state) {
+    if (variable.name === null) {
+        switch (variable.kind) {
+            case SemanticVariableKind.Identifier:
+                variable.name = `${variable.identifier}_${state.index++}`;
                 break;
             default:
-                throw new Error(`AssertionError: Unsupported reification of update op ${OpKind[op.kind]}`);
+                variable.name = `_r${state.index++}`;
+                break;
         }
     }
+    return variable.name;
 }
-function reifyIrExpression(expr) {
-    if (!isIrExpression(expr)) {
-        return expr;
-    }
-    switch (expr.kind) {
-        case ExpressionKind.NextContext:
-            return nextContext(expr.steps);
-        case ExpressionKind.Reference:
-            return reference(expr.slot + 1 + expr.offset);
-        case ExpressionKind.LexicalRead:
-            throw new Error(`AssertionError: unresolved LexicalRead of ${expr.name}`);
-        case ExpressionKind.RestoreView:
-            if (typeof expr.view === 'number') {
-                throw new Error(`AssertionError: unresolved RestoreView`);
-            }
-            return restoreView(expr.view);
-        case ExpressionKind.ResetView:
-            return resetView(expr.expr);
-        case ExpressionKind.GetCurrentView:
-            return getCurrentView();
-        case ExpressionKind.ReadVariable:
-            if (expr.name === null) {
-                throw new Error(`Read of unnamed variable ${expr.xref}`);
-            }
-            return variable(expr.name);
-        case ExpressionKind.PureFunctionExpr:
-            if (expr.fn === null) {
-                throw new Error(`AssertionError: expected PureFunctions to have been extracted`);
-            }
-            return pureFunction(expr.varOffset, expr.fn, expr.args);
-        case ExpressionKind.PureFunctionParameterExpr:
-            throw new Error(`AssertionError: expected PureFunctionParameterExpr to have been extracted`);
-        case ExpressionKind.PipeBinding:
-            return pipeBind(expr.slot, expr.varOffset, expr.args);
-        case ExpressionKind.PipeBindingVariadic:
-            return pipeBindV(expr.slot, expr.varOffset, expr.args);
-        default:
-            throw new Error(`AssertionError: Unsupported reification of ir.Expression kind: ${ExpressionKind[expr.kind]}`);
-    }
-}
+
 /**
- * Listeners get turned into a function expression, which may or may not have the `$event`
- * parameter defined.
- */
-function reifyListenerHandler(view, name, handlerOps) {
-    const lookForEvent = new LookForEventVisitor();
-    // First, reify all instruction calls within `handlerOps`.
-    reifyUpdateOperations(view, handlerOps);
-    // Next, extract all the `o.Statement`s from the reified operations. We can expect that at this
-    // point, all operations have been converted to statements.
-    const handlerStmts = [];
-    for (const op of handlerOps) {
-        if (op.kind !== OpKind.Statement) {
-            throw new Error(`AssertionError: expected reified statements, but found op ${OpKind[op.kind]}`);
+ * Merges logically sequential `NextContextExpr` operations.
+ *
+ * `NextContextExpr` can be referenced repeatedly, "popping" the runtime's context stack each time.
+ * When two such expressions appear back-to-back, it's possible to merge them together into a single
+ * `NextContextExpr` that steps multiple contexts. This merging is possible if all conditions are
+ * met:
+ *
+ *   * The result of the `NextContextExpr` that's folded into the subsequent one is not stored (that
+ *     is, the call is purely side-effectful).
+ *   * No operations in between them uses the implicit context.
+ */
+function phaseMergeNextContext(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.create) {
+            if (op.kind === OpKind.Listener) {
+                mergeNextContextsInOps(op.handlerOps);
+            }
         }
-        handlerStmts.push(op.statement);
+        mergeNextContextsInOps(view.update);
+    }
+}
+function mergeNextContextsInOps(ops) {
+    for (const op of ops) {
+        // Look for a candidate operation to maybe merge.
+        if (op.kind !== OpKind.Statement || !(op.statement instanceof ExpressionStatement) ||
+            !(op.statement.expr instanceof NextContextExpr)) {
+            continue;
+        }
+        const mergeSteps = op.statement.expr.steps;
+        // Try to merge this `ir.NextContextExpr`.
+        let tryToMerge = true;
+        for (let candidate = op.next; candidate.kind !== OpKind.ListEnd && tryToMerge; candidate = candidate.next) {
+            visitExpressionsInOp(candidate, (expr, flags) => {
+                if (!isIrExpression(expr)) {
+                    return expr;
+                }
+                if (!tryToMerge) {
+                    // Either we've already merged, or failed to merge.
+                    return;
+                }
+                if (flags & VisitorContextFlag.InChildOperation) {
+                    // We cannot merge into child operations.
+                    return;
+                }
+                switch (expr.kind) {
+                    case ExpressionKind.NextContext:
+                        // Merge the previous `ir.NextContextExpr` into this one.
+                        expr.steps += mergeSteps;
+                        OpList.remove(op);
+                        tryToMerge = false;
+                        break;
+                    case ExpressionKind.GetCurrentView:
+                    case ExpressionKind.Reference:
+                        // Can't merge past a dependency on the context.
+                        tryToMerge = false;
+                        break;
+                }
+            });
+        }
+    }
+}
+
+const CONTAINER_TAG = 'ng-container';
+/**
+ * Replace an `Element` or `ElementStart` whose tag is `ng-container` with a specific op.
+ */
+function phaseNgContainer(cpl) {
+    for (const [_, view] of cpl.views) {
+        const updatedElementXrefs = new Set();
+        for (const op of view.create) {
+            if (op.kind === OpKind.ElementStart && op.tag === CONTAINER_TAG) {
+                // Transmute the `ElementStart` instruction to `ContainerStart`.
+                op.kind = OpKind.ContainerStart;
+                updatedElementXrefs.add(op.xref);
+            }
+            if (op.kind === OpKind.ElementEnd && updatedElementXrefs.has(op.xref)) {
+                // This `ElementEnd` is associated with an `ElementStart` we already transmuted.
+                op.kind = OpKind.ContainerEnd;
+            }
+        }
+    }
+}
+
+function phasePipeCreation(cpl) {
+    for (const view of cpl.views.values()) {
+        processPipeBindingsInView(view);
+    }
+}
+function processPipeBindingsInView(view) {
+    for (const updateOp of view.update) {
+        visitExpressionsInOp(updateOp, (expr, flags) => {
+            if (!isIrExpression(expr)) {
+                return;
+            }
+            if (expr.kind !== ExpressionKind.PipeBinding) {
+                return;
+            }
+            if (flags & VisitorContextFlag.InChildOperation) {
+                throw new Error(`AssertionError: pipe bindings should not appear in child expressions`);
+            }
+            if (!hasDependsOnSlotContextTrait(updateOp)) {
+                throw new Error(`AssertionError: pipe binding associated with non-slot operation ${OpKind[updateOp.kind]}`);
+            }
+            addPipeToCreationBlock(view, updateOp.target, expr);
+        });
+    }
+}
+function addPipeToCreationBlock(view, afterTargetXref, binding) {
+    // Find the appropriate point to insert the Pipe creation operation.
+    // We're looking for `afterTargetXref` (and also want to insert after any other pipe operations
+    // which might be beyond it).
+    for (let op = view.create.head.next; op.kind !== OpKind.ListEnd; op = op.next) {
+        if (!hasConsumesSlotTrait(op)) {
+            continue;
+        }
+        if (op.xref !== afterTargetXref) {
+            continue;
+        }
+        // We've found a tentative insertion point; however, we also want to skip past any _other_ pipe
+        // operations present.
+        while (op.next.kind === OpKind.Pipe) {
+            op = op.next;
+        }
+        const pipe = createPipeOp(binding.target, binding.name);
+        OpList.insertBefore(pipe, op.next);
+        // This completes adding the pipe to the creation block.
+        return;
+    }
+    // At this point, we've failed to add the pipe to the creation block.
+    throw new Error(`AssertionError: unable to find insertion point for pipe ${binding.name}`);
+}
+
+function phasePipeVariadic(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.update) {
+            transformExpressionsInOp(op, expr => {
+                if (!(expr instanceof PipeBindingExpr)) {
+                    return expr;
+                }
+                // Pipes are variadic if they have more than 4 arguments.
+                if (expr.args.length <= 4) {
+                    return expr;
+                }
+                return new PipeBindingVariadicExpr(expr.target, expr.name, literalArr(expr.args), expr.args.length);
+            }, VisitorContextFlag.None);
+        }
+    }
+}
+
+function phasePureFunctionExtraction(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.ops()) {
+            visitExpressionsInOp(op, expr => {
+                if (!(expr instanceof PureFunctionExpr) || expr.body === null) {
+                    return;
+                }
+                const constantDef = new PureFunctionConstant(expr.args.length);
+                expr.fn = cpl.pool.getSharedConstant(constantDef, expr.body);
+                expr.body = null;
+            });
+        }
+    }
+}
+class PureFunctionConstant extends GenericKeyFn {
+    constructor(numArgs) {
+        super();
+        this.numArgs = numArgs;
+    }
+    keyOf(expr) {
+        if (expr instanceof PureFunctionParameterExpr) {
+            return `param(${expr.index})`;
+        }
+        else {
+            return super.keyOf(expr);
+        }
+    }
+    toSharedConstantDeclaration(declName, keyExpr) {
+        const fnParams = [];
+        for (let idx = 0; idx < this.numArgs; idx++) {
+            fnParams.push(new FnParam('_p' + idx));
+        }
+        // We will never visit `ir.PureFunctionParameterExpr`s that don't belong to us, because this
+        // transform runs inside another visitor which will visit nested pure functions before this one.
+        const returnExpr = transformExpressionsInExpression(keyExpr, expr => {
+            if (!(expr instanceof PureFunctionParameterExpr)) {
+                return expr;
+            }
+            return variable('_p' + expr.index);
+        }, VisitorContextFlag.None);
+        return new DeclareFunctionStmt(declName, fnParams, [new ReturnStatement(returnExpr)]);
+    }
+}
+
+function phasePureLiteralStructures(cpl) {
+    for (const view of cpl.views.values()) {
+        for (const op of view.update) {
+            transformExpressionsInOp(op, (expr, flags) => {
+                if (flags & VisitorContextFlag.InChildOperation) {
+                    return expr;
+                }
+                if (expr instanceof LiteralArrayExpr) {
+                    return transformLiteralArray(expr);
+                }
+                else if (expr instanceof LiteralMapExpr) {
+                    return transformLiteralMap(expr);
+                }
+                return expr;
+            }, VisitorContextFlag.None);
+        }
+    }
+}
+function transformLiteralArray(expr) {
+    const derivedEntries = [];
+    const nonConstantArgs = [];
+    for (const entry of expr.entries) {
+        if (entry.isConstant()) {
+            derivedEntries.push(entry);
+        }
+        else {
+            const idx = nonConstantArgs.length;
+            nonConstantArgs.push(entry);
+            derivedEntries.push(new PureFunctionParameterExpr(idx));
+        }
+    }
+    return new PureFunctionExpr(literalArr(derivedEntries), nonConstantArgs);
+}
+function transformLiteralMap(expr) {
+    let derivedEntries = [];
+    const nonConstantArgs = [];
+    for (const entry of expr.entries) {
+        if (entry.value.isConstant()) {
+            derivedEntries.push(entry);
+        }
+        else {
+            const idx = nonConstantArgs.length;
+            nonConstantArgs.push(entry.value);
+            derivedEntries.push(new LiteralMapEntry(entry.key, new PureFunctionParameterExpr(idx), entry.quoted));
+        }
+    }
+    return new PureFunctionExpr(literalMap(derivedEntries), nonConstantArgs);
+}
+
+// This file contains helpers for generating calls to Ivy instructions. In particular, each
+// instruction type is represented as a function, which may select a specific instruction variant
+// depending on the exact arguments.
+function element(slot, tag, constIndex, localRefIndex) {
+    return elementOrContainerBase(Identifiers.element, slot, tag, constIndex, localRefIndex);
+}
+function elementStart(slot, tag, constIndex, localRefIndex) {
+    return elementOrContainerBase(Identifiers.elementStart, slot, tag, constIndex, localRefIndex);
+}
+function elementOrContainerBase(instruction, slot, tag, constIndex, localRefIndex) {
+    const args = [literal(slot)];
+    if (tag !== null) {
+        args.push(literal(tag));
+    }
+    if (localRefIndex !== null) {
+        args.push(literal(constIndex), // might be null, but that's okay.
+        literal(localRefIndex));
+    }
+    else if (constIndex !== null) {
+        args.push(literal(constIndex));
+    }
+    return call(instruction, args);
+}
+function elementEnd() {
+    return call(Identifiers.elementEnd, []);
+}
+function elementContainerStart(slot, constIndex, localRefIndex) {
+    return elementOrContainerBase(Identifiers.elementContainerStart, slot, /* tag */ null, constIndex, localRefIndex);
+}
+function elementContainer(slot, constIndex, localRefIndex) {
+    return elementOrContainerBase(Identifiers.elementContainer, slot, /* tag */ null, constIndex, localRefIndex);
+}
+function elementContainerEnd() {
+    return call(Identifiers.elementContainerEnd, []);
+}
+function template(slot, templateFnRef, decls, vars, tag, constIndex) {
+    return call(Identifiers.templateCreate, [
+        literal(slot),
+        templateFnRef,
+        literal(decls),
+        literal(vars),
+        literal(tag),
+        literal(constIndex),
+    ]);
+}
+function listener(name, handlerFn) {
+    return call(Identifiers.listener, [
+        literal(name),
+        handlerFn,
+    ]);
+}
+function pipe(slot, name) {
+    return call(Identifiers.pipe, [
+        literal(slot),
+        literal(name),
+    ]);
+}
+function advance(delta) {
+    return call(Identifiers.advance, [
+        literal(delta),
+    ]);
+}
+function reference(slot) {
+    return importExpr(Identifiers.reference).callFn([
+        literal(slot),
+    ]);
+}
+function nextContext(steps) {
+    return importExpr(Identifiers.nextContext).callFn(steps === 1 ? [] : [literal(steps)]);
+}
+function getCurrentView() {
+    return importExpr(Identifiers.getCurrentView).callFn([]);
+}
+function restoreView(savedView) {
+    return importExpr(Identifiers.restoreView).callFn([
+        savedView,
+    ]);
+}
+function resetView(returnValue) {
+    return importExpr(Identifiers.resetView).callFn([
+        returnValue,
+    ]);
+}
+function text(slot, initialValue) {
+    const args = [literal(slot)];
+    if (initialValue !== '') {
+        args.push(literal(initialValue));
     }
-    // Scan the statement list for usages of `$event`. If referenced, we need to generate it as a
-    // parameter.
-    lookForEvent.visitAllStatements(handlerStmts, null);
-    const params = [];
-    if (lookForEvent.seenEventRead) {
-        // We need the `$event` parameter.
-        params.push(new FnParam('$event'));
+    return call(Identifiers.text, args);
+}
+function property(name, expression) {
+    return call(Identifiers.property, [
+        literal(name),
+        expression,
+    ]);
+}
+const PIPE_BINDINGS = [
+    Identifiers.pipeBind1,
+    Identifiers.pipeBind2,
+    Identifiers.pipeBind3,
+    Identifiers.pipeBind4,
+];
+function pipeBind(slot, varOffset, args) {
+    if (args.length < 1 || args.length > PIPE_BINDINGS.length) {
+        throw new Error(`pipeBind() argument count out of bounds`);
     }
-    return fn(params, handlerStmts, undefined, undefined, name);
+    const instruction = PIPE_BINDINGS[args.length - 1];
+    return importExpr(instruction).callFn([
+        literal(slot),
+        literal(varOffset),
+        ...args,
+    ]);
 }
-/**
- * Visitor which scans for reads of the `$event` special variable.
- */
-class LookForEventVisitor extends RecursiveAstVisitor$1 {
-    constructor() {
-        super(...arguments);
-        this.seenEventRead = false;
+function pipeBindV(slot, varOffset, args) {
+    return importExpr(Identifiers.pipeBindV).callFn([
+        literal(slot),
+        literal(varOffset),
+        args,
+    ]);
+}
+function textInterpolate(strings, expressions) {
+    if (strings.length < 1 || expressions.length !== strings.length - 1) {
+        throw new Error(`AssertionError: expected specific shape of args for strings/expressions in interpolation`);
     }
-    visitReadVarExpr(ast, context) {
-        if (ast.name === '$event') {
-            this.seenEventRead = true;
+    const interpolationArgs = [];
+    if (expressions.length === 1 && strings[0] === '' && strings[1] === '') {
+        interpolationArgs.push(expressions[0]);
+    }
+    else {
+        let idx;
+        for (idx = 0; idx < expressions.length; idx++) {
+            interpolationArgs.push(literal(strings[idx]), expressions[idx]);
         }
+        // idx points at the last string.
+        interpolationArgs.push(literal(strings[idx]));
     }
+    return callVariadicInstruction(TEXT_INTERPOLATE_CONFIG, [], interpolationArgs);
 }
-
-/**
- * Assign data slots for all operations which implement `ConsumesSlotOpTrait`, and propagate the
- * assigned data slots of those operations to any expressions which reference them via
- * `UsesSlotIndexTrait`.
- *
- * This phase is also responsible for counting the number of slots used for each view (its `decls`)
- * and propagating that number into the `Template` operations which declare embedded views.
- */
-function phaseSlotAllocation(cpl) {
-    // Map of all declarations in all views within the component which require an assigned slot index.
-    // This map needs to be global (across all views within the component) since it's possible to
-    // reference a slot from one view from an expression within another (e.g. local references work
-    // this way).
-    const slotMap = new Map();
-    // Process all views in the component and assign slot indexes.
-    for (const [_, view] of cpl.views) {
-        // Slot indices start at 0 for each view (and are not unique between views).
-        let slotCount = 0;
-        for (const op of view.create) {
-            // Only consider declarations which consume data slots.
-            if (!hasConsumesSlotTrait(op)) {
-                continue;
-            }
-            // Assign slots to this declaration starting at the current `slotCount`.
-            op.slot = slotCount;
-            // And track its assigned slot in the `slotMap`.
-            slotMap.set(op.xref, op.slot);
-            // Each declaration may use more than 1 slot, so increment `slotCount` to reserve the number
-            // of slots required.
-            slotCount += op.numSlotsUsed;
-        }
-        // Record the total number of slots used on the view itself. This will later be propagated into
-        // `ir.TemplateOp`s which declare those views (except for the root view).
-        view.decls = slotCount;
+function propertyInterpolate(name, strings, expressions) {
+    if (strings.length < 1 || expressions.length !== strings.length - 1) {
+        throw new Error(`AssertionError: expected specific shape of args for strings/expressions in interpolation`);
     }
-    // After slot assignment, `slotMap` now contains slot assignments for every declaration in the
-    // whole template, across all views. Next, look for expressions which implement
-    // `UsesSlotIndexExprTrait` and propagate the assigned slot indexes into them.
-    // Additionally, this second scan allows us to find `ir.TemplateOp`s which declare views and
-    // propagate the number of slots used for each view into the operation which declares it.
-    for (const [_, view] of cpl.views) {
-        for (const op of view.ops()) {
-            if (op.kind === OpKind.Template) {
-                // Record the number of slots used by the view this `ir.TemplateOp` declares in the
-                // operation itself, so it can be emitted later.
-                const childView = cpl.views.get(op.xref);
-                op.decls = childView.decls;
-            }
-            if (hasUsesSlotIndexTrait(op) && op.slot === null) {
-                if (!slotMap.has(op.target)) {
-                    // We do expect to find a slot allocated for everything which might be referenced.
-                    throw new Error(`AssertionError: no slot allocated for ${OpKind[op.kind]} target ${op.target}`);
-                }
-                op.slot = slotMap.get(op.target);
-            }
-            // Process all `ir.Expression`s within this view, and look for `usesSlotIndexExprTrait`.
-            visitExpressionsInOp(op, expr => {
-                if (!isIrExpression(expr)) {
-                    return;
-                }
-                if (!hasUsesSlotIndexTrait(expr) || expr.slot !== null) {
-                    return;
-                }
-                // The `UsesSlotIndexExprTrait` indicates that this expression references something declared
-                // in this component template by its slot index. Use the `target` `ir.XrefId` to find the
-                // allocated slot for that declaration in `slotMap`.
-                if (!slotMap.has(expr.target)) {
-                    // We do expect to find a slot allocated for everything which might be referenced.
-                    throw new Error(`AssertionError: no slot allocated for ${expr.constructor.name} target ${expr.target}`);
-                }
-                // Record the allocated slot on the expression.
-                expr.slot = slotMap.get(expr.target);
-            });
+    const interpolationArgs = [];
+    if (expressions.length === 1 && strings[0] === '' && strings[1] === '') {
+        interpolationArgs.push(expressions[0]);
+    }
+    else {
+        let idx;
+        for (idx = 0; idx < expressions.length; idx++) {
+            interpolationArgs.push(literal(strings[idx]), expressions[idx]);
         }
+        // idx points at the last string.
+        interpolationArgs.push(literal(strings[idx]));
     }
+    return callVariadicInstruction(PROPERTY_INTERPOLATE_CONFIG, [literal(name)], interpolationArgs);
+}
+function pureFunction(varOffset, fn, args) {
+    return callVariadicInstructionExpr(PURE_FUNCTION_CONFIG, [
+        literal(varOffset),
+        fn,
+    ], args);
+}
+function call(instruction, args) {
+    return createStatementOp(importExpr(instruction).callFn(args).toStmt());
 }
-
 /**
- * Counts the number of variable slots used within each view, and stores that on the view itself, as
- * well as propagates it to the `ir.TemplateOp` for embedded views.
+ * `InterpolationConfig` for the `textInterpolate` instruction.
  */
-function phaseVarCounting(cpl) {
-    // First, count the vars used in each view, and update the view-level counter.
-    for (const [_, view] of cpl.views) {
-        let varCount = 0;
-        for (const op of view.ops()) {
-            if (hasConsumesVarsTrait(op)) {
-                varCount += varsUsedByOp(op);
-            }
-            visitExpressionsInOp(op, expr => {
-                if (!isIrExpression(expr)) {
-                    return;
-                }
-                // Some expressions require knowledge of the number of variable slots consumed.
-                if (hasUsesVarOffsetTrait(expr)) {
-                    expr.varOffset = varCount;
-                }
-                if (hasConsumesVarsTrait(expr)) {
-                    varCount += varsUsedByIrExpression(expr);
-                }
-            });
+const TEXT_INTERPOLATE_CONFIG = {
+    constant: [
+        Identifiers.textInterpolate,
+        Identifiers.textInterpolate1,
+        Identifiers.textInterpolate2,
+        Identifiers.textInterpolate3,
+        Identifiers.textInterpolate4,
+        Identifiers.textInterpolate5,
+        Identifiers.textInterpolate6,
+        Identifiers.textInterpolate7,
+        Identifiers.textInterpolate8,
+    ],
+    variable: Identifiers.textInterpolateV,
+    mapping: n => {
+        if (n % 2 === 0) {
+            throw new Error(`Expected odd number of arguments`);
         }
-        view.vars = varCount;
-    }
-    // Add var counts for each view to the `ir.TemplateOp` which declares that view (if the view is an
-    // embedded view).
-    for (const [_, view] of cpl.views) {
-        for (const op of view.create) {
-            if (op.kind !== OpKind.Template) {
-                continue;
-            }
-            const childView = cpl.views.get(op.xref);
-            op.vars = childView.vars;
+        return (n - 1) / 2;
+    },
+};
+/**
+ * `InterpolationConfig` for the `propertyInterpolate` instruction.
+ */
+const PROPERTY_INTERPOLATE_CONFIG = {
+    constant: [
+        Identifiers.propertyInterpolate,
+        Identifiers.propertyInterpolate1,
+        Identifiers.propertyInterpolate2,
+        Identifiers.propertyInterpolate3,
+        Identifiers.propertyInterpolate4,
+        Identifiers.propertyInterpolate5,
+        Identifiers.propertyInterpolate6,
+        Identifiers.propertyInterpolate7,
+        Identifiers.propertyInterpolate8,
+    ],
+    variable: Identifiers.propertyInterpolateV,
+    mapping: n => {
+        if (n % 2 === 0) {
+            throw new Error(`Expected odd number of arguments`);
         }
+        return (n - 1) / 2;
+    },
+};
+const PURE_FUNCTION_CONFIG = {
+    constant: [
+        Identifiers.pureFunction0,
+        Identifiers.pureFunction1,
+        Identifiers.pureFunction2,
+        Identifiers.pureFunction3,
+        Identifiers.pureFunction4,
+        Identifiers.pureFunction5,
+        Identifiers.pureFunction6,
+        Identifiers.pureFunction7,
+        Identifiers.pureFunction8,
+    ],
+    variable: Identifiers.pureFunctionV,
+    mapping: n => n,
+};
+function callVariadicInstructionExpr(config, baseArgs, interpolationArgs) {
+    const n = config.mapping(interpolationArgs.length);
+    if (n < config.constant.length) {
+        // Constant calling pattern.
+        return importExpr(config.constant[n]).callFn([...baseArgs, ...interpolationArgs]);
     }
-}
-/**
- * Different operations that implement `ir.UsesVarsTrait` use different numbers of variables, so
- * count the variables used by any particular `op`.
- */
-function varsUsedByOp(op) {
-    switch (op.kind) {
-        case OpKind.Property:
-            // Property bindings use 1 variable slot.
-            return 1;
-        case OpKind.InterpolateText:
-            // `ir.InterpolateTextOp`s use a variable slot for each dynamic expression.
-            return op.expressions.length;
-        case OpKind.InterpolateProperty:
-            // `ir.InterpolatePropertyOp`s use a variable slot for each dynamic expression, plus one for
-            // the result.
-            return 1 + op.expressions.length;
-        default:
-            throw new Error(`Unhandled op: ${OpKind[op.kind]}`);
+    else if (config.variable !== null) {
+        // Variable calling pattern.
+        return importExpr(config.variable).callFn([...baseArgs, literalArr(interpolationArgs)]);
     }
-}
-function varsUsedByIrExpression(expr) {
-    switch (expr.kind) {
-        case ExpressionKind.PureFunctionExpr:
-            return 1 + expr.args.length;
-        case ExpressionKind.PipeBinding:
-            return 1 + expr.args.length;
-        case ExpressionKind.PipeBindingVariadic:
-            return 1 + expr.numArgs;
-        default:
-            throw new Error(`AssertionError: unhandled ConsumesVarsTrait expression ${expr.constructor.name}`);
+    else {
+        throw new Error(`AssertionError: unable to call variadic function`);
     }
 }
+function callVariadicInstruction(config, baseArgs, interpolationArgs) {
+    return createStatementOp(callVariadicInstructionExpr(config, baseArgs, interpolationArgs).toStmt());
+}
 
 /**
- * Generate names for functions and variables across all views.
+ * Compiles semantic operations across all views and generates output `o.Statement`s with actual
+ * runtime calls in their place.
  *
- * This includes propagating those names into any `ir.ReadVariableExpr`s of those variables, so that
- * the reads can be emitted correctly.
+ * Reification replaces semantic operations with selected Ivy instructions and other generated code
+ * structures. After reification, the create/update operation lists of all views should only contain
+ * `ir.StatementOp`s (which wrap generated `o.Statement`s).
  */
-function phaseNaming(cpl) {
-    addNamesToView(cpl.root, cpl.componentName, { index: 0 });
-}
-function addNamesToView(view, baseName, state) {
-    if (view.fnName === null) {
-        view.fnName = `${baseName}_Template`;
+function phaseReify(cpl) {
+    for (const [_, view] of cpl.views) {
+        reifyCreateOperations(view, view.create);
+        reifyUpdateOperations(view, view.update);
     }
-    // Keep track of the names we assign to variables in the view. We'll need to propagate these
-    // into reads of those variables afterwards.
-    const varNames = new Map();
-    for (const op of view.ops()) {
+}
+function reifyCreateOperations(view, ops) {
+    for (const op of ops) {
+        transformExpressionsInOp(op, reifyIrExpression, VisitorContextFlag.None);
         switch (op.kind) {
-            case OpKind.Listener:
-                if (op.handlerFnName === null) {
-                    // TODO(alxhub): convert this temporary name to match how the
-                    // `TemplateDefinitionBuilder` names listener functions.
-                    if (op.slot === null) {
-                        throw new Error(`Expected a slot to be assigned`);
-                    }
-                    op.handlerFnName = `${view.fnName}_${op.tag}_${op.name}_${op.slot}_listener`;
-                }
+            case OpKind.Text:
+                OpList.replace(op, text(op.slot, op.initialValue));
                 break;
-            case OpKind.Variable:
-                varNames.set(op.xref, getVariableName(op.variable, state));
+            case OpKind.ElementStart:
+                OpList.replace(op, elementStart(op.slot, op.tag, op.attributes, op.localRefs));
+                break;
+            case OpKind.Element:
+                OpList.replace(op, element(op.slot, op.tag, op.attributes, op.localRefs));
+                break;
+            case OpKind.ElementEnd:
+                OpList.replace(op, elementEnd());
+                break;
+            case OpKind.ContainerStart:
+                OpList.replace(op, elementContainerStart(op.slot, op.attributes, op.localRefs));
+                break;
+            case OpKind.Container:
+                OpList.replace(op, elementContainer(op.slot, op.attributes, op.localRefs));
+                break;
+            case OpKind.ContainerEnd:
+                OpList.replace(op, elementContainerEnd());
                 break;
             case OpKind.Template:
                 const childView = view.tpl.views.get(op.xref);
-                if (op.slot === null) {
-                    throw new Error(`Expected slot to be assigned`);
+                OpList.replace(op, template(op.slot, variable(childView.fnName), childView.decls, childView.vars, op.tag, op.attributes));
+                break;
+            case OpKind.Pipe:
+                OpList.replace(op, pipe(op.slot, op.name));
+                break;
+            case OpKind.Listener:
+                const listenerFn = reifyListenerHandler(view, op.handlerFnName, op.handlerOps);
+                OpList.replace(op, listener(op.name, listenerFn));
+                break;
+            case OpKind.Variable:
+                if (op.variable.name === null) {
+                    throw new Error(`AssertionError: unnamed variable ${op.xref}`);
                 }
-                // TODO: properly escape the tag name.
-                const safeTagName = op.tag.replace('-', '_');
-                addNamesToView(childView, `${baseName}_${safeTagName}_${op.slot}`, state);
+                OpList.replace(op, createStatementOp(new DeclareVarStmt(op.variable.name, op.initializer, undefined, StmtModifier.Final)));
+                break;
+            case OpKind.Statement:
+                // Pass statement operations directly through.
                 break;
+            default:
+                throw new Error(`AssertionError: Unsupported reification of create op ${OpKind[op.kind]}`);
         }
     }
-    // Having named all variables declared in the view, now we can push those names into the
-    // `ir.ReadVariableExpr` expressions which represent reads of those variables.
-    for (const op of view.ops()) {
-        visitExpressionsInOp(op, expr => {
-            if (!(expr instanceof ReadVariableExpr) || expr.name !== null) {
-                return;
-            }
-            if (!varNames.has(expr.xref)) {
-                throw new Error(`Variable ${expr.xref} not yet named`);
-            }
-            expr.name = varNames.get(expr.xref);
-        });
-    }
 }
-function getVariableName(variable, state) {
-    if (variable.name === null) {
-        switch (variable.kind) {
-            case SemanticVariableKind.Identifier:
-                variable.name = `${variable.identifier}_${state.index++}`;
+function reifyUpdateOperations(_view, ops) {
+    for (const op of ops) {
+        transformExpressionsInOp(op, reifyIrExpression, VisitorContextFlag.None);
+        switch (op.kind) {
+            case OpKind.Advance:
+                OpList.replace(op, advance(op.delta));
                 break;
-            default:
-                variable.name = `_r${state.index++}`;
+            case OpKind.Property:
+                OpList.replace(op, property(op.name, op.expression));
+                break;
+            case OpKind.InterpolateProperty:
+                OpList.replace(op, propertyInterpolate(op.name, op.strings, op.expressions));
+                break;
+            case OpKind.InterpolateText:
+                OpList.replace(op, textInterpolate(op.strings, op.expressions));
+                break;
+            case OpKind.Variable:
+                if (op.variable.name === null) {
+                    throw new Error(`AssertionError: unnamed variable ${op.xref}`);
+                }
+                OpList.replace(op, createStatementOp(new DeclareVarStmt(op.variable.name, op.initializer, undefined, StmtModifier.Final)));
+                break;
+            case OpKind.Statement:
+                // Pass statement operations directly through.
                 break;
+            default:
+                throw new Error(`AssertionError: Unsupported reification of update op ${OpKind[op.kind]}`);
         }
     }
-    return variable.name;
 }
-
-/**
- * Lifts local reference declarations on element-like structures within each view into an entry in
- * the `consts` array for the whole component.
- */
-function phaseLocalRefs(cpl) {
-    for (const view of cpl.views.values()) {
-        for (const op of view.create) {
-            switch (op.kind) {
-                case OpKind.ElementStart:
-                case OpKind.Element:
-                case OpKind.Template:
-                    if (!Array.isArray(op.localRefs)) {
-                        throw new Error(`AssertionError: expected localRefs to be an array still`);
-                    }
-                    op.numSlotsUsed += op.localRefs.length;
-                    if (op.localRefs.length > 0) {
-                        const localRefs = serializeLocalRefs(op.localRefs);
-                        op.localRefs = cpl.addConst(localRefs);
-                    }
-                    else {
-                        op.localRefs = null;
-                    }
-                    break;
-            }
-        }
+function reifyIrExpression(expr) {
+    if (!isIrExpression(expr)) {
+        return expr;
     }
-}
-function serializeLocalRefs(refs) {
-    const constRefs = [];
-    for (const ref of refs) {
-        constRefs.push(literal(ref.name), literal(ref.target));
+    switch (expr.kind) {
+        case ExpressionKind.NextContext:
+            return nextContext(expr.steps);
+        case ExpressionKind.Reference:
+            return reference(expr.slot + 1 + expr.offset);
+        case ExpressionKind.LexicalRead:
+            throw new Error(`AssertionError: unresolved LexicalRead of ${expr.name}`);
+        case ExpressionKind.RestoreView:
+            if (typeof expr.view === 'number') {
+                throw new Error(`AssertionError: unresolved RestoreView`);
+            }
+            return restoreView(expr.view);
+        case ExpressionKind.ResetView:
+            return resetView(expr.expr);
+        case ExpressionKind.GetCurrentView:
+            return getCurrentView();
+        case ExpressionKind.ReadVariable:
+            if (expr.name === null) {
+                throw new Error(`Read of unnamed variable ${expr.xref}`);
+            }
+            return variable(expr.name);
+        case ExpressionKind.PureFunctionExpr:
+            if (expr.fn === null) {
+                throw new Error(`AssertionError: expected PureFunctions to have been extracted`);
+            }
+            return pureFunction(expr.varOffset, expr.fn, expr.args);
+        case ExpressionKind.PureFunctionParameterExpr:
+            throw new Error(`AssertionError: expected PureFunctionParameterExpr to have been extracted`);
+        case ExpressionKind.PipeBinding:
+            return pipeBind(expr.slot, expr.varOffset, expr.args);
+        case ExpressionKind.PipeBindingVariadic:
+            return pipeBindV(expr.slot, expr.varOffset, expr.args);
+        default:
+            throw new Error(`AssertionError: Unsupported reification of ir.Expression kind: ${ExpressionKind[expr.kind]}`);
     }
-    return literalArr(constRefs);
 }
-
 /**
- * Generate a preamble sequence for each view creation block and listener function which declares
- * any variables that be referenced in other operations in the block.
- *
- * Variables generated include:
- *   * a saved view context to be used to restore the current view in event listeners.
- *   * the context of the restored view within event listener handlers.
- *   * context variables from the current view as well as all parent views (including the root
- *     context if needed).
- *   * local references from elements within the current view and any lexical parents.
- *
- * Variables are generated here unconditionally, and may optimized away in future operations if it
- * turns out their values (and any side effects) are unused.
+ * Listeners get turned into a function expression, which may or may not have the `$event`
+ * parameter defined.
  */
-function phaseGenerateVariables(cpl) {
-    recursivelyProcessView(cpl.root, /* there is no parent scope for the root view */ null);
+function reifyListenerHandler(view, name, handlerOps) {
+    const lookForEvent = new LookForEventVisitor();
+    // First, reify all instruction calls within `handlerOps`.
+    reifyUpdateOperations(view, handlerOps);
+    // Next, extract all the `o.Statement`s from the reified operations. We can expect that at this
+    // point, all operations have been converted to statements.
+    const handlerStmts = [];
+    for (const op of handlerOps) {
+        if (op.kind !== OpKind.Statement) {
+            throw new Error(`AssertionError: expected reified statements, but found op ${OpKind[op.kind]}`);
+        }
+        handlerStmts.push(op.statement);
+    }
+    // Scan the statement list for usages of `$event`. If referenced, we need to generate it as a
+    // parameter.
+    lookForEvent.visitAllStatements(handlerStmts, null);
+    const params = [];
+    if (lookForEvent.seenEventRead) {
+        // We need the `$event` parameter.
+        params.push(new FnParam('$event'));
+    }
+    return fn(params, handlerStmts, undefined, undefined, name);
 }
 /**
- * Process the given `ViewCompilation` and generate preambles for it and any listeners that it
- * declares.
- *
- * @param `parentScope` a scope extracted from the parent view which captures any variables which
- *     should be inherited by this view. `null` if the current view is the root view.
+ * Visitor which scans for reads of the `$event` special variable.
  */
-function recursivelyProcessView(view, parentScope) {
-    // Extract a `Scope` from this view.
-    const scope = getScopeForView(view, parentScope);
-    // Embedded views require an operation to save/restore the view context.
-    if (view.parent !== null) {
-        // Start the view creation block with an operation to save the current view context. This may be
-        // used to restore the view context in any listeners that may be present.
+class LookForEventVisitor extends RecursiveAstVisitor$1 {
+    constructor() {
+        super(...arguments);
+        this.seenEventRead = false;
     }
-    for (const op of view.create) {
-        switch (op.kind) {
-            case OpKind.Template:
-                // Descend into child embedded views.
-                recursivelyProcessView(view.tpl.views.get(op.xref), scope);
-                break;
-            case OpKind.Listener:
-                // Prepend variables to listener handler functions.
-                op.handlerOps.prepend(generateVariablesInScopeForView(view, scope));
-                break;
+    visitReadVarExpr(ast, context) {
+        if (ast.name === '$event') {
+            this.seenEventRead = true;
         }
     }
-    // Prepend the declarations for all available variables in scope to the `update` block.
-    const preambleOps = generateVariablesInScopeForView(view, scope);
-    view.update.prepend(preambleOps);
 }
+
 /**
- * Process a view and generate a `Scope` representing the variables available for reference within
- * that view.
+ * Resolves `ir.ContextExpr` expressions (which represent embedded view or component contexts) to
+ * either the `ctx` parameter to component functions (for the current view context) or to variables
+ * that store those contexts (for contexts accessed via the `nextContext()` instruction).
  */
-function getScopeForView(view, parent) {
-    const scope = {
-        view: view.xref,
-        viewContextVariable: {
-            kind: SemanticVariableKind.Context,
-            name: null,
-            view: view.xref,
-        },
-        contextVariables: new Map(),
-        references: [],
-        parent,
-    };
-    for (const identifier of view.contextVariables.keys()) {
-        scope.contextVariables.set(identifier, {
-            kind: SemanticVariableKind.Identifier,
-            name: null,
-            identifier,
-        });
+function phaseResolveContexts(cpl) {
+    for (const view of cpl.views.values()) {
+        processLexicalScope$1(view, view.create);
+        processLexicalScope$1(view, view.update);
     }
-    for (const op of view.create) {
+}
+function processLexicalScope$1(view, ops) {
+    // Track the expressions used to access all available contexts within the current view, by the
+    // view `ir.XrefId`.
+    const scope = new Map();
+    // The current view's context is accessible via the `ctx` parameter.
+    scope.set(view.xref, variable('ctx'));
+    for (const op of ops) {
         switch (op.kind) {
-            case OpKind.Element:
-            case OpKind.ElementStart:
-            case OpKind.Template:
-                if (!Array.isArray(op.localRefs)) {
-                    throw new Error(`AssertionError: expected localRefs to be an array`);
-                }
-                // Record available local references from this element.
-                for (let offset = 0; offset < op.localRefs.length; offset++) {
-                    scope.references.push({
-                        name: op.localRefs[offset].name,
-                        targetId: op.xref,
-                        offset,
-                        variable: {
-                            kind: SemanticVariableKind.Identifier,
-                            name: null,
-                            identifier: op.localRefs[offset].name,
-                        },
-                    });
+            case OpKind.Variable:
+                switch (op.variable.kind) {
+                    case SemanticVariableKind.Context:
+                        scope.set(op.variable.view, new ReadVariableExpr(op.xref));
+                        break;
                 }
                 break;
+            case OpKind.Listener:
+                processLexicalScope$1(view, op.handlerOps);
+                break;
         }
     }
-    return scope;
-}
-/**
- * Generate declarations for all variables that are in scope for a given view.
- *
- * This is a recursive process, as views inherit variables available from their parent view, which
- * itself may have inherited variables, etc.
- */
-function generateVariablesInScopeForView(view, scope) {
-    const newOps = [];
-    if (scope.view !== view.xref) {
-        // Before generating variables for a parent view, we need to switch to the context of the parent
-        // view with a `nextContext` expression. This context switching operation itself declares a
-        // variable, because the context of the view may be referenced directly.
-        newOps.push(createVariableOp(view.tpl.allocateXrefId(), scope.viewContextVariable, new NextContextExpr()));
-    }
-    // Add variables for all context variables available in this scope's view.
-    for (const [name, value] of view.tpl.views.get(scope.view).contextVariables) {
-        newOps.push(createVariableOp(view.tpl.allocateXrefId(), scope.contextVariables.get(name), new ReadPropExpr(new ContextExpr(scope.view), value)));
-    }
-    // Add variables for all local references declared for elements in this scope.
-    for (const ref of scope.references) {
-        newOps.push(createVariableOp(view.tpl.allocateXrefId(), ref.variable, new ReferenceExpr(ref.targetId, ref.offset)));
-    }
-    if (scope.parent !== null) {
-        // Recursively add variables from the parent scope.
-        newOps.push(...generateVariablesInScopeForView(view, scope.parent));
+    for (const op of ops) {
+        transformExpressionsInOp(op, expr => {
+            if (expr instanceof ContextExpr) {
+                if (!scope.has(expr.view)) {
+                    throw new Error(`No context found for reference to view ${expr.view} from view ${view.xref}`);
+                }
+                return scope.get(expr.view);
+            }
+            else {
+                return expr;
+            }
+        }, VisitorContextFlag.None);
     }
-    return newOps;
 }
 
 /**
@@ -10483,11 +11159,11 @@ function generateVariablesInScopeForView(view, scope) {
  */
 function phaseResolveNames(cpl) {
     for (const [_, view] of cpl.views) {
-        processLexicalScope$1(view, view.create, null);
-        processLexicalScope$1(view, view.update, null);
+        processLexicalScope(view, view.create, null);
+        processLexicalScope(view, view.update, null);
     }
 }
-function processLexicalScope$1(view, ops, savedView) {
+function processLexicalScope(view, ops, savedView) {
     // Maps names defined in the lexical scope of this template to the `ir.XrefId`s of the variable
     // declarations which represent those values.
     //
@@ -10521,7 +11197,7 @@ function processLexicalScope$1(view, ops, savedView) {
             case OpKind.Listener:
                 // Listener functions have separate variable declarations, so process them as a separate
                 // lexical scope.
-                processLexicalScope$1(view, op.handlerOps, savedView);
+                processLexicalScope(view, op.handlerOps, savedView);
                 break;
         }
     }
@@ -10560,49 +11236,117 @@ function processLexicalScope$1(view, ops, savedView) {
     }
 }
 
-/**
- * Resolves `ir.ContextExpr` expressions (which represent embedded view or component contexts) to
- * either the `ctx` parameter to component functions (for the current view context) or to variables
- * that store those contexts (for contexts accessed via the `nextContext()` instruction).
- */
-function phaseResolveContexts(cpl) {
+function phaseSaveRestoreView(cpl) {
     for (const view of cpl.views.values()) {
-        processLexicalScope(view, view.create);
-        processLexicalScope(view, view.update);
+        if (view === cpl.root) {
+            // Save/restore operations are not necessary for the root view.
+            continue;
+        }
+        view.create.prepend([
+            createVariableOp(view.tpl.allocateXrefId(), {
+                kind: SemanticVariableKind.SavedView,
+                name: null,
+                view: view.xref,
+            }, new GetCurrentViewExpr()),
+        ]);
+        for (const op of view.create) {
+            if (op.kind !== OpKind.Listener) {
+                continue;
+            }
+            op.handlerOps.prepend([
+                createVariableOp(view.tpl.allocateXrefId(), {
+                    kind: SemanticVariableKind.Context,
+                    name: null,
+                    view: view.xref,
+                }, new RestoreViewExpr(view.xref)),
+            ]);
+            // The "restore view" operation in listeners requires a call to `resetView` to reset the
+            // context prior to returning from the listener operation. Find any `return` statements in
+            // the listener body and wrap them in a call to reset the view.
+            for (const handlerOp of op.handlerOps) {
+                if (handlerOp.kind === OpKind.Statement &&
+                    handlerOp.statement instanceof ReturnStatement) {
+                    handlerOp.statement.value = new ResetViewExpr(handlerOp.statement.value);
+                }
+            }
+        }
     }
 }
-function processLexicalScope(view, ops) {
-    // Track the expressions used to access all available contexts within the current view, by the
-    // view `ir.XrefId`.
-    const scope = new Map();
-    // The current view's context is accessible via the `ctx` parameter.
-    scope.set(view.xref, variable('ctx'));
-    for (const op of ops) {
-        switch (op.kind) {
-            case OpKind.Variable:
-                switch (op.variable.kind) {
-                    case SemanticVariableKind.Context:
-                        scope.set(op.variable.view, new ReadVariableExpr(op.xref));
-                        break;
-                }
-                break;
-            case OpKind.Listener:
-                processLexicalScope(view, op.handlerOps);
-                break;
+
+/**
+ * Assign data slots for all operations which implement `ConsumesSlotOpTrait`, and propagate the
+ * assigned data slots of those operations to any expressions which reference them via
+ * `UsesSlotIndexTrait`.
+ *
+ * This phase is also responsible for counting the number of slots used for each view (its `decls`)
+ * and propagating that number into the `Template` operations which declare embedded views.
+ */
+function phaseSlotAllocation(cpl) {
+    // Map of all declarations in all views within the component which require an assigned slot index.
+    // This map needs to be global (across all views within the component) since it's possible to
+    // reference a slot from one view from an expression within another (e.g. local references work
+    // this way).
+    const slotMap = new Map();
+    // Process all views in the component and assign slot indexes.
+    for (const [_, view] of cpl.views) {
+        // Slot indices start at 0 for each view (and are not unique between views).
+        let slotCount = 0;
+        for (const op of view.create) {
+            // Only consider declarations which consume data slots.
+            if (!hasConsumesSlotTrait(op)) {
+                continue;
+            }
+            // Assign slots to this declaration starting at the current `slotCount`.
+            op.slot = slotCount;
+            // And track its assigned slot in the `slotMap`.
+            slotMap.set(op.xref, op.slot);
+            // Each declaration may use more than 1 slot, so increment `slotCount` to reserve the number
+            // of slots required.
+            slotCount += op.numSlotsUsed;
         }
+        // Record the total number of slots used on the view itself. This will later be propagated into
+        // `ir.TemplateOp`s which declare those views (except for the root view).
+        view.decls = slotCount;
     }
-    for (const op of ops) {
-        transformExpressionsInOp(op, expr => {
-            if (expr instanceof ContextExpr) {
-                if (!scope.has(expr.view)) {
-                    throw new Error(`No context found for reference to view ${expr.view} from view ${view.xref}`);
-                }
-                return scope.get(expr.view);
+    // After slot assignment, `slotMap` now contains slot assignments for every declaration in the
+    // whole template, across all views. Next, look for expressions which implement
+    // `UsesSlotIndexExprTrait` and propagate the assigned slot indexes into them.
+    // Additionally, this second scan allows us to find `ir.TemplateOp`s which declare views and
+    // propagate the number of slots used for each view into the operation which declares it.
+    for (const [_, view] of cpl.views) {
+        for (const op of view.ops()) {
+            if (op.kind === OpKind.Template) {
+                // Record the number of slots used by the view this `ir.TemplateOp` declares in the
+                // operation itself, so it can be emitted later.
+                const childView = cpl.views.get(op.xref);
+                op.decls = childView.decls;
             }
-            else {
-                return expr;
+            if (hasUsesSlotIndexTrait(op) && op.slot === null) {
+                if (!slotMap.has(op.target)) {
+                    // We do expect to find a slot allocated for everything which might be referenced.
+                    throw new Error(`AssertionError: no slot allocated for ${OpKind[op.kind]} target ${op.target}`);
+                }
+                op.slot = slotMap.get(op.target);
             }
-        }, VisitorContextFlag.None);
+            // Process all `ir.Expression`s within this view, and look for `usesSlotIndexExprTrait`.
+            visitExpressionsInOp(op, expr => {
+                if (!isIrExpression(expr)) {
+                    return;
+                }
+                if (!hasUsesSlotIndexTrait(expr) || expr.slot !== null) {
+                    return;
+                }
+                // The `UsesSlotIndexExprTrait` indicates that this expression references something declared
+                // in this component template by its slot index. Use the `target` `ir.XrefId` to find the
+                // allocated slot for that declaration in `slotMap`.
+                if (!slotMap.has(expr.target)) {
+                    // We do expect to find a slot allocated for everything which might be referenced.
+                    throw new Error(`AssertionError: no slot allocated for ${expr.constructor.name} target ${expr.target}`);
+                }
+                // Record the allocated slot on the expression.
+                expr.slot = slotMap.get(expr.target);
+            });
+        }
     }
 }
 
@@ -10927,429 +11671,123 @@ function tryInlineVariableInitializer(id, initializer, target, declFences) {
         }
         else if ((flags & VisitorContextFlag.InChildOperation) && (declFences & Fence.ViewContextRead)) {
             // We cannot inline variables that are sensitive to the current context across operation
-            // boundaries.
-            return expr;
-        }
-        switch (expr.kind) {
-            case ExpressionKind.ReadVariable:
-                if (expr.xref === id) {
-                    // This is the usage site of the variable. Since nothing has disallowed inlining, it's
-                    // safe to inline the initializer here.
-                    inlined = true;
-                    return initializer;
-                }
-                break;
-            default:
-                // For other types of `ir.Expression`s, whether inlining is allowed depends on their fences.
-                const exprFences = fencesForIrExpression(expr);
-                inliningAllowed = inliningAllowed && safeToInlinePastFences(exprFences, declFences);
-                break;
-        }
-        return expr;
-    }, VisitorContextFlag.None);
-    return inlined;
-}
-/**
- * Determines whether inlining of `decl` should be allowed in "conservative" mode.
- *
- * In conservative mode, inlining behavior is limited to those operations which the
- * `TemplateDefinitionBuilder` supported, with the goal of producing equivalent output.
- */
-function allowConservativeInlining(decl, target) {
-    // TODO(alxhub): understand exactly how TemplateDefinitionBuilder approaches inlining, and record
-    // that behavior here.
-    switch (decl.variable.kind) {
-        case SemanticVariableKind.Identifier:
-            return false;
-        case SemanticVariableKind.Context:
-            // Context can only be inlined into other variables.
-            return target.kind === OpKind.Variable;
-        default:
-            return true;
-    }
-}
-
-const CHAINABLE = new Set([
-    Identifiers.elementStart,
-    Identifiers.elementEnd,
-    Identifiers.property,
-    Identifiers.elementContainerStart,
-    Identifiers.elementContainerEnd,
-    Identifiers.elementContainer,
-]);
-/**
- * Post-process a reified view compilation and convert sequential calls to chainable instructions
- * into chain calls.
- *
- * For example, two `elementStart` operations in sequence:
- *
- * ```typescript
- * elementStart(0, 'div');
- * elementStart(1, 'span');
- * ```
- *
- * Can be called as a chain instead:
- *
- * ```typescript
- * elementStart(0, 'div')(1, 'span');
- * ```
- */
-function phaseChaining(cpl) {
-    for (const [_, view] of cpl.views) {
-        chainOperationsInList(view.create);
-        chainOperationsInList(view.update);
-    }
-}
-function chainOperationsInList(opList) {
-    let chain = null;
-    for (const op of opList) {
-        if (op.kind !== OpKind.Statement || !(op.statement instanceof ExpressionStatement)) {
-            // This type of statement isn't chainable.
-            chain = null;
-            continue;
-        }
-        if (!(op.statement.expr instanceof InvokeFunctionExpr) ||
-            !(op.statement.expr.fn instanceof ExternalExpr)) {
-            // This is a statement, but not an instruction-type call, so not chainable.
-            chain = null;
-            continue;
-        }
-        const instruction = op.statement.expr.fn.value;
-        if (!CHAINABLE.has(instruction)) {
-            // This instruction isn't chainable.
-            chain = null;
-            continue;
-        }
-        // This instruction can be chained. It can either be added on to the previous chain (if
-        // compatible) or it can be the start of a new chain.
-        if (chain !== null && chain.instruction === instruction) {
-            // This instruction can be added onto the previous chain.
-            const expression = chain.expression.callFn(op.statement.expr.args, op.statement.expr.sourceSpan, op.statement.expr.pure);
-            chain.expression = expression;
-            chain.op.statement = expression.toStmt();
-            OpList.remove(op);
-        }
-        else {
-            // Leave this instruction alone for now, but consider it the start of a new chain.
-            chain = {
-                op,
-                instruction,
-                expression: op.statement.expr,
-            };
-        }
-    }
-}
-
-/**
- * Merges logically sequential `NextContextExpr` operations.
- *
- * `NextContextExpr` can be referenced repeatedly, "popping" the runtime's context stack each time.
- * When two such expressions appear back-to-back, it's possible to merge them together into a single
- * `NextContextExpr` that steps multiple contexts. This merging is possible if all conditions are
- * met:
- *
- *   * The result of the `NextContextExpr` that's folded into the subsequent one is not stored (that
- *     is, the call is purely side-effectful).
- *   * No operations in between them uses the implicit context.
- */
-function phaseMergeNextContext(cpl) {
-    for (const view of cpl.views.values()) {
-        for (const op of view.create) {
-            if (op.kind === OpKind.Listener) {
-                mergeNextContextsInOps(op.handlerOps);
-            }
-        }
-        mergeNextContextsInOps(view.update);
-    }
-}
-function mergeNextContextsInOps(ops) {
-    for (const op of ops) {
-        // Look for a candidate operation to maybe merge.
-        if (op.kind !== OpKind.Statement || !(op.statement instanceof ExpressionStatement) ||
-            !(op.statement.expr instanceof NextContextExpr)) {
-            continue;
-        }
-        const mergeSteps = op.statement.expr.steps;
-        // Try to merge this `ir.NextContextExpr`.
-        let tryToMerge = true;
-        for (let candidate = op.next; candidate.kind !== OpKind.ListEnd && tryToMerge; candidate = candidate.next) {
-            visitExpressionsInOp(candidate, (expr, flags) => {
-                if (!isIrExpression(expr)) {
-                    return expr;
-                }
-                if (!tryToMerge) {
-                    // Either we've already merged, or failed to merge.
-                    return;
-                }
-                if (flags & VisitorContextFlag.InChildOperation) {
-                    // We cannot merge into child operations.
-                    return;
-                }
-                switch (expr.kind) {
-                    case ExpressionKind.NextContext:
-                        // Merge the previous `ir.NextContextExpr` into this one.
-                        expr.steps += mergeSteps;
-                        OpList.remove(op);
-                        tryToMerge = false;
-                        break;
-                    case ExpressionKind.GetCurrentView:
-                    case ExpressionKind.Reference:
-                        // Can't merge past a dependency on the context.
-                        tryToMerge = false;
-                        break;
-                }
-            });
-        }
-    }
-}
-
-const CONTAINER_TAG = 'ng-container';
-/**
- * Replace an `Element` or `ElementStart` whose tag is `ng-container` with a specific op.
- */
-function phaseNgContainer(cpl) {
-    for (const [_, view] of cpl.views) {
-        const updatedElementXrefs = new Set();
-        for (const op of view.create) {
-            if (op.kind === OpKind.ElementStart && op.tag === CONTAINER_TAG) {
-                // Transmute the `ElementStart` instruction to `ContainerStart`.
-                op.kind = OpKind.ContainerStart;
-                updatedElementXrefs.add(op.xref);
-            }
-            if (op.kind === OpKind.ElementEnd && updatedElementXrefs.has(op.xref)) {
-                // This `ElementEnd` is associated with an `ElementStart` we already transmuted.
-                op.kind = OpKind.ContainerEnd;
-            }
-        }
-    }
-}
-
-function phaseSaveRestoreView(cpl) {
-    for (const view of cpl.views.values()) {
-        if (view === cpl.root) {
-            // Save/restore operations are not necessary for the root view.
-            continue;
-        }
-        view.create.prepend([
-            createVariableOp(view.tpl.allocateXrefId(), {
-                kind: SemanticVariableKind.SavedView,
-                name: null,
-                view: view.xref,
-            }, new GetCurrentViewExpr()),
-        ]);
-        for (const op of view.create) {
-            if (op.kind !== OpKind.Listener) {
-                continue;
-            }
-            op.handlerOps.prepend([
-                createVariableOp(view.tpl.allocateXrefId(), {
-                    kind: SemanticVariableKind.Context,
-                    name: null,
-                    view: view.xref,
-                }, new RestoreViewExpr(view.xref)),
-            ]);
-            // The "restore view" operation in listeners requires a call to `resetView` to reset the
-            // context prior to returning from the listener operation. Find any `return` statements in
-            // the listener body and wrap them in a call to reset the view.
-            for (const handlerOp of op.handlerOps) {
-                if (handlerOp.kind === OpKind.Statement &&
-                    handlerOp.statement instanceof ReturnStatement) {
-                    handlerOp.statement.value = new ResetViewExpr(handlerOp.statement.value);
+            // boundaries.
+            return expr;
+        }
+        switch (expr.kind) {
+            case ExpressionKind.ReadVariable:
+                if (expr.xref === id) {
+                    // This is the usage site of the variable. Since nothing has disallowed inlining, it's
+                    // safe to inline the initializer here.
+                    inlined = true;
+                    return initializer;
                 }
-            }
+                break;
+            default:
+                // For other types of `ir.Expression`s, whether inlining is allowed depends on their fences.
+                const exprFences = fencesForIrExpression(expr);
+                inliningAllowed = inliningAllowed && safeToInlinePastFences(exprFences, declFences);
+                break;
         }
+        return expr;
+    }, VisitorContextFlag.None);
+    return inlined;
+}
+/**
+ * Determines whether inlining of `decl` should be allowed in "conservative" mode.
+ *
+ * In conservative mode, inlining behavior is limited to those operations which the
+ * `TemplateDefinitionBuilder` supported, with the goal of producing equivalent output.
+ */
+function allowConservativeInlining(decl, target) {
+    // TODO(alxhub): understand exactly how TemplateDefinitionBuilder approaches inlining, and record
+    // that behavior here.
+    switch (decl.variable.kind) {
+        case SemanticVariableKind.Identifier:
+            return false;
+        case SemanticVariableKind.Context:
+            // Context can only be inlined into other variables.
+            return target.kind === OpKind.Variable;
+        default:
+            return true;
     }
 }
 
-function phasePureFunctionExtraction(cpl) {
-    for (const view of cpl.views.values()) {
+/**
+ * Finds all unresolved safe read expressions, and converts them into the appropriate output AST
+ * reads, guarded by null checks.
+ */
+function phaseExpandSafeReads(cpl) {
+    for (const [_, view] of cpl.views) {
         for (const op of view.ops()) {
-            visitExpressionsInOp(op, expr => {
-                if (!(expr instanceof PureFunctionExpr) || expr.body === null) {
-                    return;
-                }
-                const constantDef = new PureFunctionConstant(expr.args.length);
-                expr.fn = cpl.pool.getSharedConstant(constantDef, expr.body);
-                expr.body = null;
-            });
+            transformExpressionsInOp(op, safeTransform, VisitorContextFlag.None);
+            transformExpressionsInOp(op, ternaryTransform, VisitorContextFlag.None);
         }
     }
 }
-class PureFunctionConstant extends GenericKeyFn {
-    constructor(numArgs) {
-        super();
-        this.numArgs = numArgs;
-    }
-    keyOf(expr) {
-        if (expr instanceof PureFunctionParameterExpr) {
-            return `param(${expr.index})`;
-        }
-        else {
-            return super.keyOf(expr);
-        }
-    }
-    toSharedConstantDeclaration(declName, keyExpr) {
-        const fnParams = [];
-        for (let idx = 0; idx < this.numArgs; idx++) {
-            fnParams.push(new FnParam('_p' + idx));
-        }
-        // We will never visit `ir.PureFunctionParameterExpr`s that don't belong to us, because this
-        // transform runs inside another visitor which will visit nested pure functions before this one.
-        const returnExpr = transformExpressionsInExpression(keyExpr, expr => {
-            if (!(expr instanceof PureFunctionParameterExpr)) {
-                return expr;
-            }
-            return variable('_p' + expr.index);
-        }, VisitorContextFlag.None);
-        return new DeclareFunctionStmt(declName, fnParams, [new ReturnStatement(returnExpr)]);
-    }
+function isSafeAccessExpression(e) {
+    return e instanceof SafePropertyReadExpr || e instanceof SafeKeyedReadExpr;
 }
-
-function phasePipeCreation(cpl) {
-    for (const view of cpl.views.values()) {
-        processPipeBindingsInView(view);
-    }
+function isUnsafeAccessExpression(e) {
+    return e instanceof ReadPropExpr || e instanceof ReadKeyExpr;
 }
-function processPipeBindingsInView(view) {
-    for (const updateOp of view.update) {
-        visitExpressionsInOp(updateOp, (expr, flags) => {
-            if (!isIrExpression(expr)) {
-                return;
-            }
-            if (expr.kind !== ExpressionKind.PipeBinding) {
-                return;
-            }
-            if (flags & VisitorContextFlag.InChildOperation) {
-                throw new Error(`AssertionError: pipe bindings should not appear in child expressions`);
-            }
-            if (!hasDependsOnSlotContextTrait(updateOp)) {
-                throw new Error(`AssertionError: pipe binding associated with non-slot operation ${OpKind[updateOp.kind]}`);
-            }
-            addPipeToCreationBlock(view, updateOp.target, expr);
-        });
-    }
+function isAccessExpression(e) {
+    return isSafeAccessExpression(e) || isUnsafeAccessExpression(e);
 }
-function addPipeToCreationBlock(view, afterTargetXref, binding) {
-    // Find the appropriate point to insert the Pipe creation operation.
-    // We're looking for `afterTargetXref` (and also want to insert after any other pipe operations
-    // which might be beyond it).
-    for (let op = view.create.head.next; op.kind !== OpKind.ListEnd; op = op.next) {
-        if (!hasConsumesSlotTrait(op)) {
-            continue;
-        }
-        if (op.xref !== afterTargetXref) {
-            continue;
+function deepestSafeTernary(e) {
+    if (isAccessExpression(e) && e.receiver instanceof SafeTernaryExpr) {
+        let st = e.receiver;
+        while (st.expr instanceof SafeTernaryExpr) {
+            st = st.expr;
         }
-        // We've found a tentative insertion point; however, we also want to skip past any _other_ pipe
-        // operations present.
-        while (op.next.kind === OpKind.Pipe) {
-            op = op.next;
-        }
-        const pipe = createPipeOp(binding.target, binding.name);
-        OpList.insertBefore(pipe, op.next);
-        // This completes adding the pipe to the creation block.
-        return;
+        return st;
     }
-    // At this point, we've failed to add the pipe to the creation block.
-    throw new Error(`AssertionError: unable to find insertion point for pipe ${binding.name}`);
+    return null;
 }
-
-function phasePipeVariadic(cpl) {
-    for (const view of cpl.views.values()) {
-        for (const op of view.update) {
-            transformExpressionsInOp(op, expr => {
-                if (!(expr instanceof PipeBindingExpr)) {
-                    return expr;
-                }
-                // Pipes are variadic if they have more than 4 arguments.
-                if (expr.args.length <= 4) {
-                    return expr;
-                }
-                return new PipeBindingVariadicExpr(expr.target, expr.name, literalArr(expr.args), expr.args.length);
-            }, VisitorContextFlag.None);
-        }
+// TODO: When strict compatibility with TemplateDefinitionBuilder is not required, we can use `&&`
+// instead.
+function safeTransform(e) {
+    if (e instanceof SafeInvokeFunctionExpr) {
+        // TODO: Implement safe function calls in a subsequent commit.
+        return new InvokeFunctionExpr(e.receiver, e.args);
     }
-}
-
-function phasePureLiteralStructures(cpl) {
-    for (const view of cpl.views.values()) {
-        for (const op of view.update) {
-            transformExpressionsInOp(op, (expr, flags) => {
-                if (flags & VisitorContextFlag.InChildOperation) {
-                    return expr;
-                }
-                if (expr instanceof LiteralArrayExpr) {
-                    return transformLiteralArray(expr);
-                }
-                else if (expr instanceof LiteralMapExpr) {
-                    return transformLiteralMap(expr);
-                }
-                return expr;
-            }, VisitorContextFlag.None);
-        }
+    if (!isAccessExpression(e)) {
+        return e;
     }
-}
-function transformLiteralArray(expr) {
-    const derivedEntries = [];
-    const nonConstantArgs = [];
-    for (const entry of expr.entries) {
-        if (entry.isConstant()) {
-            derivedEntries.push(entry);
+    const dst = deepestSafeTernary(e);
+    if (dst) {
+        if (e instanceof ReadPropExpr) {
+            dst.expr = dst.expr.prop(e.name);
+            return e.receiver;
         }
-        else {
-            const idx = nonConstantArgs.length;
-            nonConstantArgs.push(entry);
-            derivedEntries.push(new PureFunctionParameterExpr(idx));
+        if (e instanceof ReadKeyExpr) {
+            dst.expr = dst.expr.key(e.index);
+            return e.receiver;
+        }
+        if (e instanceof SafePropertyReadExpr) {
+            dst.expr = new SafeTernaryExpr(dst.expr.clone(), dst.expr.prop(e.name));
+            return e.receiver;
+        }
+        if (e instanceof SafeKeyedReadExpr) {
+            dst.expr = new SafeTernaryExpr(dst.expr.clone(), dst.expr.key(e.index));
+            return e.receiver;
         }
     }
-    return new PureFunctionExpr(literalArr(derivedEntries), nonConstantArgs);
-}
-function transformLiteralMap(expr) {
-    let derivedEntries = [];
-    const nonConstantArgs = [];
-    for (const entry of expr.entries) {
-        if (entry.value.isConstant()) {
-            derivedEntries.push(entry);
+    else {
+        if (e instanceof SafePropertyReadExpr) {
+            return new SafeTernaryExpr(e.receiver.clone(), e.receiver.prop(e.name));
         }
-        else {
-            const idx = nonConstantArgs.length;
-            nonConstantArgs.push(entry.value);
-            derivedEntries.push(new LiteralMapEntry(entry.key, new PureFunctionParameterExpr(idx), entry.quoted));
+        if (e instanceof SafeKeyedReadExpr) {
+            return new SafeTernaryExpr(e.receiver.clone(), e.receiver.key(e.index));
         }
     }
-    return new PureFunctionExpr(literalMap(derivedEntries), nonConstantArgs);
+    return e;
 }
-
-function phaseAlignPipeVariadicVarOffset(cpl) {
-    for (const view of cpl.views.values()) {
-        for (const op of view.update) {
-            visitExpressionsInOp(op, expr => {
-                if (!(expr instanceof PipeBindingVariadicExpr)) {
-                    return expr;
-                }
-                if (!(expr.args instanceof PureFunctionExpr)) {
-                    return expr;
-                }
-                if (expr.varOffset === null || expr.args.varOffset === null) {
-                    throw new Error(`Must run after variable counting`);
-                }
-                // The structure of this variadic pipe expression is:
-                // PipeBindingVariadic(#, Y, PureFunction(X, ...ARGS))
-                // Where X and Y are the slot offsets for the variables used by these operations, and Y > X.
-                // In `TemplateDefinitionBuilder` the PipeBindingVariadic variable slots are allocated
-                // before the PureFunction slots, which is unusually out-of-order.
-                //
-                // To maintain identical output for the tests in question, we adjust the variable offsets of
-                // these two calls to emulate TDB's behavior. This is not perfect, because the ARGS of the
-                // PureFunction call may also allocate slots which by TDB's ordering would come after X, and
-                // we don't account for that. Still, this should be enough to pass the existing pipe tests.
-                // Put the PipeBindingVariadic vars where the PureFunction vars were previously allocated.
-                expr.varOffset = expr.args.varOffset;
-                // Put the PureFunction vars following the PipeBindingVariadic vars.
-                expr.args.varOffset = expr.varOffset + varsUsedByIrExpression(expr);
-            });
-        }
+function ternaryTransform(e) {
+    if (!(e instanceof SafeTernaryExpr)) {
+        return e;
     }
+    return new ConditionalExpr(new BinaryOperatorExpr(BinaryOperator.Equals, e.guard, NULL_EXPR), NULL_EXPR, e.expr);
 }
 
 /**
@@ -11357,6 +11795,7 @@ function phaseAlignPipeVariadicVarOffset(cpl) {
  * processing, the compilation should be in a state where it can be emitted via `emitTemplateFn`.s
  */
 function transformTemplate(cpl) {
+    phaseAttributeExtraction(cpl, true);
     phasePipeCreation(cpl);
     phasePipeVariadic(cpl);
     phasePureLiteralStructures(cpl);
@@ -11366,6 +11805,8 @@ function transformTemplate(cpl) {
     phaseResolveContexts(cpl);
     phaseLocalRefs(cpl);
     phaseConstCollection(cpl);
+    phaseNullishCoalescing(cpl);
+    phaseExpandSafeReads(cpl);
     phaseSlotAllocation(cpl);
     phaseVarCounting(cpl);
     phaseGenerateAdvance(cpl);
@@ -11618,7 +12059,6 @@ function ingestElement(view, element) {
     const id = view.tpl.allocateXrefId();
     const startOp = createElementStartOp(element.name, id);
     view.create.push(startOp);
-    ingestAttributes(startOp, element);
     ingestBindings(view, startOp, element);
     ingestReferences(startOp, element);
     ingestNodes(view, element.children);
@@ -11632,7 +12072,6 @@ function ingestTemplate(view, tmpl) {
     // TODO: validate the fallback tag name here.
     const tplOp = createTemplateOp(childView.xref, tmpl.tagName ?? 'ng-template');
     view.create.push(tplOp);
-    ingestAttributes(tplOp, tmpl);
     ingestBindings(view, tplOp, tmpl);
     ingestReferences(tplOp, tmpl);
     ingestNodes(childView, tmpl.children);
@@ -11722,36 +12161,27 @@ function convertAst(ast, cpl) {
     else if (ast instanceof Conditional) {
         return new ConditionalExpr(convertAst(ast.condition, cpl), convertAst(ast.trueExp, cpl), convertAst(ast.falseExp, cpl));
     }
+    else if (ast instanceof NonNullAssert) {
+        // A non-null assertion shouldn't impact generated instructions, so we can just drop it.
+        return convertAst(ast.expression, cpl);
+    }
     else if (ast instanceof BindingPipe) {
         return new PipeBindingExpr(cpl.allocateXrefId(), ast.name, [
             convertAst(ast.exp, cpl),
             ...ast.args.map(arg => convertAst(arg, cpl)),
         ]);
     }
-    else {
-        throw new Error(`Unhandled expression type: ${ast.constructor.name}`);
-    }
-}
-/**
- * Process all of the attributes on an element-like structure in the template AST and convert them
- * to their IR representation.
- */
-function ingestAttributes(op, element) {
-    assertIsElementAttributes(op.attributes);
-    for (const attr of element.attributes) {
-        op.attributes.add(ElementAttributeKind.Attribute, attr.name, literal(attr.value));
+    else if (ast instanceof SafeKeyedRead) {
+        return new SafeKeyedReadExpr(convertAst(ast.receiver, cpl), convertAst(ast.key, cpl));
     }
-    for (const input of element.inputs) {
-        op.attributes.add(ElementAttributeKind.Binding, input.name, null);
+    else if (ast instanceof SafePropertyRead) {
+        return new SafePropertyReadExpr(convertAst(ast.receiver, cpl), ast.name);
     }
-    for (const output of element.outputs) {
-        op.attributes.add(ElementAttributeKind.Binding, output.name, null);
+    else if (ast instanceof SafeCall) {
+        return new SafeInvokeFunctionExpr(convertAst(ast.receiver, cpl), ast.args.map(a => convertAst(a, cpl)));
     }
-    if (element instanceof Template) {
-        for (const attr of element.templateAttrs) {
-            // TODO: what do we do about the value here?
-            op.attributes.add(ElementAttributeKind.Template, attr.name, null);
-        }
+    else {
+        throw new Error(`Unhandled expression type: ${ast.constructor.name}`);
     }
 }
 /**
@@ -11760,60 +12190,77 @@ function ingestAttributes(op, element) {
  */
 function ingestBindings(view, op, element) {
     if (element instanceof Template) {
-        for (const attr of [...element.templateAttrs, ...element.inputs]) {
-            if (!(attr instanceof BoundAttribute)) {
-                continue;
+        for (const attr of element.templateAttrs) {
+            if (attr instanceof TextAttribute) {
+                view.update.push(createAttributeOp(op.xref, ElementAttributeKind.Template, attr.name, literal(attr.value)));
+            }
+            else {
+                ingestPropertyBinding(view, op.xref, ElementAttributeKind.Template, attr);
             }
-            ingestPropertyBinding(view, op.xref, attr.name, attr.value);
         }
     }
-    else {
-        for (const input of element.inputs) {
-            ingestPropertyBinding(view, op.xref, input.name, input.value);
+    for (const attr of element.attributes) {
+        view.update.push(createAttributeOp(op.xref, ElementAttributeKind.Attribute, attr.name, literal(attr.value)));
+    }
+    for (const input of element.inputs) {
+        ingestPropertyBinding(view, op.xref, ElementAttributeKind.Binding, input);
+    }
+    for (const output of element.outputs) {
+        const listenerOp = createListenerOp(op.xref, output.name, op.tag);
+        // if output.handler is a chain, then push each statement from the chain separately, and
+        // return the last one?
+        let inputExprs;
+        let handler = output.handler;
+        if (handler instanceof ASTWithSource) {
+            handler = handler.ast;
         }
-        for (const output of element.outputs) {
-            const listenerOp = createListenerOp(op.xref, output.name, op.tag);
-            // if output.handler is a chain, then push each statement from the chain separately, and
-            // return the last one?
-            let inputExprs;
-            let handler = output.handler;
-            if (handler instanceof ASTWithSource) {
-                handler = handler.ast;
-            }
-            if (handler instanceof Chain) {
-                inputExprs = handler.expressions;
-            }
-            else {
-                inputExprs = [handler];
-            }
-            if (inputExprs.length === 0) {
-                throw new Error('Expected listener to have non-empty expression list.');
-            }
-            const expressions = inputExprs.map(expr => convertAst(expr, view.tpl));
-            const returnExpr = expressions.pop();
-            for (const expr of expressions) {
-                const stmtOp = createStatementOp(new ExpressionStatement(expr));
-                listenerOp.handlerOps.push(stmtOp);
-            }
-            listenerOp.handlerOps.push(createStatementOp(new ReturnStatement(returnExpr)));
-            view.create.push(listenerOp);
+        if (handler instanceof Chain) {
+            inputExprs = handler.expressions;
+        }
+        else {
+            inputExprs = [handler];
         }
+        if (inputExprs.length === 0) {
+            throw new Error('Expected listener to have non-empty expression list.');
+        }
+        const expressions = inputExprs.map(expr => convertAst(expr, view.tpl));
+        const returnExpr = expressions.pop();
+        for (const expr of expressions) {
+            const stmtOp = createStatementOp(new ExpressionStatement(expr));
+            listenerOp.handlerOps.push(stmtOp);
+        }
+        listenerOp.handlerOps.push(createStatementOp(new ReturnStatement(returnExpr)));
+        view.create.push(listenerOp);
     }
 }
-function ingestPropertyBinding(view, xref, name, value) {
+function ingestPropertyBinding(view, xref, bindingKind, { name, value, type }) {
     if (value instanceof ASTWithSource) {
         value = value.ast;
     }
     if (value instanceof Interpolation) {
-        view.update.push(createInterpolatePropertyOp(xref, name, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl))));
+        switch (type) {
+            case 0 /* e.BindingType.Property */:
+                view.update.push(createInterpolatePropertyOp(xref, bindingKind, name, value.strings, value.expressions.map(expr => convertAst(expr, view.tpl))));
+                break;
+            default:
+                // TODO: implement remaining binding types.
+                throw Error(`Interpolated property binding type not handled: ${type}`);
+        }
     }
     else {
-        view.update.push(createPropertyOp(xref, name, convertAst(value, view.tpl)));
+        switch (type) {
+            case 0 /* e.BindingType.Property */:
+                view.update.push(createPropertyOp(xref, bindingKind, name, convertAst(value, view.tpl)));
+                break;
+            default:
+                // TODO: implement remaining binding types.
+                throw Error(`Property binding type not handled: ${type}`);
+        }
     }
 }
 /**
- * Process all of the local references on an element-like structure in the template AST and convert
- * them to their IR representation.
+ * Process all of the local references on an element-like structure in the template AST and
+ * convert them to their IR representation.
  */
 function ingestReferences(op, element) {
     assertIsArray(op.localRefs);
@@ -23369,7 +23816,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('16.1.1');
+const VERSION = new Version('16.2.0-next.0');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -25297,7 +25744,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$6 = '12.0.0';
 function compileDeclareClassMetadata(metadata) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$6));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -25400,7 +25847,7 @@ function compileDeclareDirectiveFromMetadata(meta) {
 function createDirectiveDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$5));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -25628,7 +26075,7 @@ const MINIMUM_PARTIAL_LINKER_VERSION$4 = '12.0.0';
 function compileDeclareFactoryFunction(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$4));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -25663,7 +26110,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -25714,7 +26161,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -25744,7 +26191,7 @@ function compileDeclareNgModuleFromMetadata(meta) {
 function createNgModuleDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // We only generate the keys in the metadata if the arrays contain values.
@@ -25795,7 +26242,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('16.1.1'));
+    definitionMap.set('version', literal('16.2.0-next.0'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);