@angular/compiler 17.0.0-next.2 → 17.0.0-next.4

package/fesm2022/compiler.mjs

@@ -1,5 +1,5 @@
 /**
- * @license Angular v17.0.0-next.2
+ * @license Angular v17.0.0-next.4
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -480,179 +480,6 @@ var core = /*#__PURE__*/Object.freeze({
     parseSelectorToR3Selector: parseSelectorToR3Selector
 });
 
-/**
- * Represents a big integer using a buffer of its individual digits, with the least significant
- * digit stored at the beginning of the array (little endian).
- *
- * For performance reasons, each instance is mutable. The addition operation can be done in-place
- * to reduce memory pressure of allocation for the digits array.
- */
-class BigInteger {
-    static zero() {
-        return new BigInteger([0]);
-    }
-    static one() {
-        return new BigInteger([1]);
-    }
-    /**
-     * Creates a big integer using its individual digits in little endian storage.
-     */
-    constructor(digits) {
-        this.digits = digits;
-    }
-    /**
-     * Creates a clone of this instance.
-     */
-    clone() {
-        return new BigInteger(this.digits.slice());
-    }
-    /**
-     * Returns a new big integer with the sum of `this` and `other` as its value. This does not mutate
-     * `this` but instead returns a new instance, unlike `addToSelf`.
-     */
-    add(other) {
-        const result = this.clone();
-        result.addToSelf(other);
-        return result;
-    }
-    /**
-     * Adds `other` to the instance itself, thereby mutating its value.
-     */
-    addToSelf(other) {
-        const maxNrOfDigits = Math.max(this.digits.length, other.digits.length);
-        let carry = 0;
-        for (let i = 0; i < maxNrOfDigits; i++) {
-            let digitSum = carry;
-            if (i < this.digits.length) {
-                digitSum += this.digits[i];
-            }
-            if (i < other.digits.length) {
-                digitSum += other.digits[i];
-            }
-            if (digitSum >= 10) {
-                this.digits[i] = digitSum - 10;
-                carry = 1;
-            }
-            else {
-                this.digits[i] = digitSum;
-                carry = 0;
-            }
-        }
-        // Apply a remaining carry if needed.
-        if (carry > 0) {
-            this.digits[maxNrOfDigits] = 1;
-        }
-    }
-    /**
-     * Builds the decimal string representation of the big integer. As this is stored in
-     * little endian, the digits are concatenated in reverse order.
-     */
-    toString() {
-        let res = '';
-        for (let i = this.digits.length - 1; i >= 0; i--) {
-            res += this.digits[i];
-        }
-        return res;
-    }
-}
-/**
- * Represents a big integer which is optimized for multiplication operations, as its power-of-twos
- * are memoized. See `multiplyBy()` for details on the multiplication algorithm.
- */
-class BigIntForMultiplication {
-    constructor(value) {
-        this.powerOfTwos = [value];
-    }
-    /**
-     * Returns the big integer itself.
-     */
-    getValue() {
-        return this.powerOfTwos[0];
-    }
-    /**
-     * Computes the value for `num * b`, where `num` is a JS number and `b` is a big integer. The
-     * value for `b` is represented by a storage model that is optimized for this computation.
-     *
-     * This operation is implemented in N(log2(num)) by continuous halving of the number, where the
-     * least-significant bit (LSB) is tested in each iteration. If the bit is set, the bit's index is
-     * used as exponent into the power-of-two multiplication of `b`.
-     *
-     * As an example, consider the multiplication num=42, b=1337. In binary 42 is 0b00101010 and the
-     * algorithm unrolls into the following iterations:
-     *
-     *  Iteration | num        | LSB  | b * 2^iter | Add? | product
-     * -----------|------------|------|------------|------|--------
-     *  0         | 0b00101010 | 0    | 1337       | No   | 0
-     *  1         | 0b00010101 | 1    | 2674       | Yes  | 2674
-     *  2         | 0b00001010 | 0    | 5348       | No   | 2674
-     *  3         | 0b00000101 | 1    | 10696      | Yes  | 13370
-     *  4         | 0b00000010 | 0    | 21392      | No   | 13370
-     *  5         | 0b00000001 | 1    | 42784      | Yes  | 56154
-     *  6         | 0b00000000 | 0    | 85568      | No   | 56154
-     *
-     * The computed product of 56154 is indeed the correct result.
-     *
-     * The `BigIntForMultiplication` representation for a big integer provides memoized access to the
-     * power-of-two values to reduce the workload in computing those values.
-     */
-    multiplyBy(num) {
-        const product = BigInteger.zero();
-        this.multiplyByAndAddTo(num, product);
-        return product;
-    }
-    /**
-     * See `multiplyBy()` for details. This function allows for the computed product to be added
-     * directly to the provided result big integer.
-     */
-    multiplyByAndAddTo(num, result) {
-        for (let exponent = 0; num !== 0; num = num >>> 1, exponent++) {
-            if (num & 1) {
-                const value = this.getMultipliedByPowerOfTwo(exponent);
-                result.addToSelf(value);
-            }
-        }
-    }
-    /**
-     * Computes and memoizes the big integer value for `this.number * 2^exponent`.
-     */
-    getMultipliedByPowerOfTwo(exponent) {
-        // Compute the powers up until the requested exponent, where each value is computed from its
-        // predecessor. This is simple as `this.number * 2^(exponent - 1)` only has to be doubled (i.e.
-        // added to itself) to reach `this.number * 2^exponent`.
-        for (let i = this.powerOfTwos.length; i <= exponent; i++) {
-            const previousPower = this.powerOfTwos[i - 1];
-            this.powerOfTwos[i] = previousPower.add(previousPower);
-        }
-        return this.powerOfTwos[exponent];
-    }
-}
-/**
- * Represents an exponentiation operation for the provided base, of which exponents are computed and
- * memoized. The results are represented by a `BigIntForMultiplication` which is tailored for
- * multiplication operations by memoizing the power-of-twos. This effectively results in a matrix
- * representation that is lazily computed upon request.
- */
-class BigIntExponentiation {
-    constructor(base) {
-        this.base = base;
-        this.exponents = [new BigIntForMultiplication(BigInteger.one())];
-    }
-    /**
-     * Compute the value for `this.base^exponent`, resulting in a big integer that is optimized for
-     * further multiplication operations.
-     */
-    toThePowerOf(exponent) {
-        // Compute the results up until the requested exponent, where every value is computed from its
-        // predecessor. This is because `this.base^(exponent - 1)` only has to be multiplied by `base`
-        // to reach `this.base^exponent`.
-        for (let i = this.exponents.length; i <= exponent; i++) {
-            const value = this.exponents[i - 1].multiplyBy(this.base);
-            this.exponents[i] = new BigIntForMultiplication(value);
-        }
-        return this.exponents[exponent];
-    }
-}
-
 /**
  * A lazily created TextEncoder instance for converting strings into UTF-8 bytes
  */
@@ -815,17 +642,18 @@ function fingerprint(str) {
         hi = hi ^ 0x130f9bef;
         lo = lo ^ -0x6b5f56d8;
     }
-    return [hi, lo];
+    return (BigInt.asUintN(32, BigInt(hi)) << BigInt(32)) | BigInt.asUintN(32, BigInt(lo));
 }
 function computeMsgId(msg, meaning = '') {
     let msgFingerprint = fingerprint(msg);
     if (meaning) {
-        const meaningFingerprint = fingerprint(meaning);
-        msgFingerprint = add64(rol64(msgFingerprint, 1), meaningFingerprint);
+        // Rotate the 64-bit message fingerprint one bit to the left and then add the meaning
+        // fingerprint.
+        msgFingerprint = BigInt.asUintN(64, msgFingerprint << BigInt(1)) |
+            ((msgFingerprint >> BigInt(63)) & BigInt(1));
+        msgFingerprint += fingerprint(meaning);
     }
-    const hi = msgFingerprint[0];
-    const lo = msgFingerprint[1];
-    return wordsToDecimalString(hi & 0x7fffffff, lo);
+    return BigInt.asUintN(63, msgFingerprint).toString();
 }
 function hash32(view, length, c) {
     let a = 0x9e3779b9, b = 0x9e3779b9;
@@ -931,26 +759,10 @@ function add32to64(a, b) {
     const high = (a >>> 16) + (b >>> 16) + (low >>> 16);
     return [high >>> 16, (high << 16) | (low & 0xffff)];
 }
-function add64(a, b) {
-    const ah = a[0], al = a[1];
-    const bh = b[0], bl = b[1];
-    const result = add32to64(al, bl);
-    const carry = result[0];
-    const l = result[1];
-    const h = add32(add32(ah, bh), carry);
-    return [h, l];
-}
 // Rotate a 32b number left `count` position
 function rol32(a, count) {
     return (a << count) | (a >>> (32 - count));
 }
-// Rotate a 64b number left `count` position
-function rol64(num, count) {
-    const hi = num[0], lo = num[1];
-    const h = (hi << count) | (lo >>> (32 - count));
-    const l = (lo << count) | (hi >>> (32 - count));
-    return [h, l];
-}
 function bytesToWords32(bytes, endian) {
     const size = (bytes.length + 3) >>> 2;
     const words32 = [];
@@ -976,31 +788,6 @@ function wordAt(bytes, index, endian) {
     }
     return word;
 }
-/**
- * Create a shared exponentiation pool for base-256 computations. This shared pool provides memoized
- * power-of-256 results with memoized power-of-two computations for efficient multiplication.
- *
- * For our purposes, this can be safely stored as a global without memory concerns. The reason is
- * that we encode two words, so only need the 0th (for the low word) and 4th (for the high word)
- * exponent.
- */
-const base256 = new BigIntExponentiation(256);
-/**
- * Represents two 32-bit words as a single decimal number. This requires a big integer storage
- * model as JS numbers are not accurate enough to represent the 64-bit number.
- *
- * Based on https://www.danvk.org/hex2dec.html
- */
-function wordsToDecimalString(hi, lo) {
-    // Encode the four bytes in lo in the lower digits of the decimal number.
-    // Note: the multiplication results in lo itself but represented by a big integer using its
-    // decimal digits.
-    const decimal = base256.toThePowerOf(0).multiplyBy(lo);
-    // Encode the four bytes in hi above the four lo bytes. lo is a maximum of (2^8)^4, which is why
-    // this multiplication factor is applied.
-    base256.toThePowerOf(4).multiplyByAndAddTo(hi, decimal);
-    return decimal.toString();
-}
 
 //// Types
 var TypeModifier;
@@ -1677,8 +1464,8 @@ class FunctionExpr extends Expression {
         this.name = name;
     }
     isEquivalent(e) {
-        return e instanceof FunctionExpr && areAllEquivalent(this.params, e.params) &&
-            areAllEquivalent(this.statements, e.statements);
+        return (e instanceof FunctionExpr || e instanceof DeclareFunctionStmt) &&
+            areAllEquivalent(this.params, e.params) && areAllEquivalent(this.statements, e.statements);
     }
     isConstant() {
         return false;
@@ -1724,6 +1511,9 @@ class ArrowFunctionExpr extends Expression {
         // TODO: Should we deep clone statements?
         return new ArrowFunctionExpr(this.params.map(p => p.clone()), Array.isArray(this.body) ? this.body : this.body.clone(), this.type, this.sourceSpan);
     }
+    toDeclStmt(name, modifiers) {
+        return new DeclareVarStmt(name, this, INFERRED_TYPE, modifiers, this.sourceSpan);
+    }
 }
 class UnaryOperatorExpr extends Expression {
     constructor(operator, expr, type, sourceSpan, parens = true) {
@@ -2515,13 +2305,32 @@ class ConstantPool {
             }))));
         }
     }
+    getSharedFunctionReference(fn, prefix) {
+        const isArrow = fn instanceof ArrowFunctionExpr;
+        for (const current of this.statements) {
+            // Arrow functions are saved as variables so we check if the
+            // value of the variable is the same as the arrow function.
+            if (isArrow && current instanceof DeclareVarStmt && current.value?.isEquivalent(fn)) {
+                return variable(current.name);
+            }
+            // Function declarations are saved as function statements
+            // so we compare them directly to the passed-in function.
+            if (!isArrow && current instanceof DeclareFunctionStmt && fn.isEquivalent(current)) {
+                return variable(current.name);
+            }
+        }
+        // Otherwise declare the function.
+        const name = this.uniqueName(prefix);
+        this.statements.push(fn.toDeclStmt(name, StmtModifier.Final));
+        return variable(name);
+    }
     _getLiteralFactory(key, values, resultMap) {
         let literalFactory = this.literalFactories.get(key);
         const literalFactoryArguments = values.filter((e => !e.isConstant()));
         if (!literalFactory) {
             const resultExpressions = values.map((e, index) => e.isConstant() ? this.getConstLiteral(e, true) : variable(`a${index}`));
             const parameters = resultExpressions.filter(isVariable).map(e => new FnParam(e.name, DYNAMIC_TYPE));
-            const pureFunctionDeclaration = fn(parameters, [new ReturnStatement(resultMap(resultExpressions))], INFERRED_TYPE);
+            const pureFunctionDeclaration = arrowFn(parameters, resultMap(resultExpressions), INFERRED_TYPE);
             const name = this.freshName();
             this.statements.push(variable(name)
                 .set(pureFunctionDeclaration)
@@ -2678,6 +2487,7 @@ class Identifiers {
     static { this.repeaterCreate = { name: 'ɵɵrepeaterCreate', moduleName: CORE }; }
     static { this.repeaterTrackByIndex = { name: 'ɵɵrepeaterTrackByIndex', moduleName: CORE }; }
     static { this.repeaterTrackByIdentity = { name: 'ɵɵrepeaterTrackByIdentity', moduleName: CORE }; }
+    static { this.componentInstance = { name: 'ɵɵcomponentInstance', moduleName: CORE }; }
     static { this.text = { name: 'ɵɵtext', moduleName: CORE }; }
     static { this.enableBindings = { name: 'ɵɵenableBindings', moduleName: CORE }; }
     static { this.disableBindings = { name: 'ɵɵdisableBindings', moduleName: CORE }; }
@@ -5780,13 +5590,13 @@ let policy;
  */
 function getPolicy() {
     if (policy === undefined) {
+        const trustedTypes = _global['trustedTypes'];
         policy = null;
-        if (_global.trustedTypes) {
+        if (trustedTypes) {
             try {
-                policy =
-                    _global.trustedTypes.createPolicy('angular#unsafe-jit', {
-                        createScript: (s) => s,
-                    });
+                policy = trustedTypes.createPolicy('angular#unsafe-jit', {
+                    createScript: (s) => s,
+                });
             }
             catch {
                 // trustedTypes.createPolicy throws if called with a name that is
@@ -5816,7 +5626,7 @@ function trustedScriptFromString(script) {
  * vulnerabilities.
  */
 function newTrustedFunctionForJIT(...args) {
-    if (!_global.trustedTypes) {
+    if (!_global['trustedTypes']) {
         // In environments that don't support Trusted Types, fall back to the most
         // straightforward implementation:
         return new Function(...args);
@@ -7051,6 +6861,26 @@ function convertPropertyBinding(localResolver, implicitReceiver, expressionWitho
     }
     return new ConvertPropertyBindingResult(stmts, outputExpr);
 }
+/** Converts an AST to a pure function that may have access to the component scope. */
+function convertPureComponentScopeFunction(ast, localResolver, implicitReceiver, bindingId) {
+    const converted = convertPropertyBindingBuiltins({
+        createLiteralArrayConverter: () => args => literalArr(args),
+        createLiteralMapConverter: keys => values => literalMap(keys.map((key, index) => {
+            return ({
+                key: key.key,
+                value: values[index],
+                quoted: key.quoted,
+            });
+        })),
+        createPipeConverter: () => {
+            throw new Error('Illegal State: Pipes are not allowed in this context');
+        }
+    }, ast);
+    const visitor = new _AstToIrVisitor(localResolver, implicitReceiver, bindingId, false);
+    const statements = [];
+    flattenStatements(converted.visit(visitor, _Mode.Statement), statements);
+    return statements;
+}
 /**
  * Given some expression, such as a binding or interpolation expression, and a context expression to
  * look values up on, visit each facet of the given expression resolving values from the context
@@ -10921,6 +10751,7 @@ function phaseAlignPipeVariadicVarOffset(job) {
                 expr.varOffset = expr.args.varOffset;
                 // Put the PureFunction vars following the PipeBindingVariadic vars.
                 expr.args.varOffset = expr.varOffset + varsUsedByIrExpression(expr);
+                return undefined;
             });
         }
     }
@@ -18014,7 +17845,7 @@ class _TreeBuilder {
             // This is unlikely to happen, but we have an assertion just in case.
             if (parent instanceof BlockGroup) {
                 this.errors.push(TreeError.create(null, startSpan, 'Text cannot be placed directly inside of a block group.'));
-                return null;
+                return;
             }
             if (parent != null && parent.children.length === 0 &&
                 this.getTagDefinition(parent.name).ignoreFirstLf) {
@@ -19267,6 +19098,7 @@ function mergeNextContextsInOps(ops) {
                         tryToMerge = false;
                         break;
                 }
+                return;
             });
         }
     }
@@ -23083,7 +22915,12 @@ function validateSwitchBlock(ast) {
     const [primaryBlock, ...secondaryBlocks] = ast.blocks;
     const errors = [];
     let hasDefault = false;
-    if (primaryBlock.children.length > 0) {
+    const hasPrimary = primaryBlock.children.length > 0 && primaryBlock.children.some(child => {
+        // The main block might have empty text nodes if `preserveWhitespaces` is enabled.
+        // Allow them since they might be used for code formatting.
+        return !(child instanceof Text) || child.value.trim().length > 0;
+    });
+    if (hasPrimary) {
         errors.push(new ParseError(primaryBlock.sourceSpan, 'Switch block can only contain "case" and "default" blocks'));
     }
     if (primaryBlock.parameters.length !== 1) {
@@ -24383,9 +24220,10 @@ function createComponentDefConsts() {
     };
 }
 class TemplateData {
-    constructor(name, index, visitor) {
+    constructor(name, index, scope, visitor) {
         this.name = name;
         this.index = index;
+        this.scope = scope;
         this.visitor = visitor;
     }
     getConstCount() {
@@ -25059,7 +24897,7 @@ class TemplateDefinitionBuilder {
                 this._ngContentReservedSlots.push(...visitor._ngContentReservedSlots);
             }
         });
-        return new TemplateData(name, index, visitor);
+        return new TemplateData(name, index, visitor._bindingScope, visitor);
     }
     createEmbeddedTemplateFn(tagName, children, contextNameSuffix, sourceSpan, variables = [], attrsExprs, references, i18n) {
         const data = this.prepareEmbeddedTemplateFn(children, contextNameSuffix, variables, i18n);
@@ -25345,8 +25183,8 @@ class TemplateDefinitionBuilder {
         const dependencyExp = [];
         for (const deferredDep of deferredDeps) {
             if (deferredDep.isDeferrable) {
-                // Callback function, e.g. `function(m) { return m.MyCmp; }`.
-                const innerFn = fn([new FnParam('m', DYNAMIC_TYPE)], [new ReturnStatement(variable('m').prop(deferredDep.symbolName))]);
+                // Callback function, e.g. `m () => m.MyCmp;`.
+                const innerFn = arrowFn([new FnParam('m', DYNAMIC_TYPE)], variable('m').prop(deferredDep.symbolName));
                 // Dynamic import, e.g. `import('./a').then(...)`.
                 const importExpr = (new DynamicImportExpr(deferredDep.importPath)).prop('then').callFn([innerFn]);
                 dependencyExp.push(importExpr);
@@ -25356,8 +25194,8 @@ class TemplateDefinitionBuilder {
                 dependencyExp.push(deferredDep.type);
             }
         }
-        const depsFnExpr = fn([], [new ReturnStatement(literalArr(dependencyExp))], INFERRED_TYPE, null, name);
-        this.constantPool.statements.push(depsFnExpr.toDeclStmt(name));
+        const depsFnExpr = arrowFn([], literalArr(dependencyExp));
+        this.constantPool.statements.push(depsFnExpr.toDeclStmt(name, StmtModifier.Final));
         return variable(name);
     }
     createDeferTriggerInstructions(deferredIndex, triggers, prefetch) {
@@ -25406,14 +25244,18 @@ class TemplateDefinitionBuilder {
         // Allocate one slot for the repeater metadata. The slots for the primary and empty block
         // are implicitly inferred by the runtime to index + 1 and index + 2.
         const blockIndex = this.allocateDataSlot();
-        const templateVariables = this.createForLoopVariables(block);
-        const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', templateVariables);
+        const primaryData = this.prepareEmbeddedTemplateFn(block.children, '_For', [
+            new Variable(block.itemName, '$implicit', block.sourceSpan, block.sourceSpan),
+            new Variable(getLoopLocalName(block, '$index'), '$index', block.sourceSpan, block.sourceSpan),
+            new Variable(getLoopLocalName(block, '$count'), '$count', block.sourceSpan, block.sourceSpan),
+        ]);
         const emptyData = block.empty === null ?
             null :
             this.prepareEmbeddedTemplateFn(block.empty.children, '_ForEmpty');
-        const trackByFn = this.createTrackByFunction(block);
+        const { expression: trackByExpression, usesComponentInstance: trackByUsesComponentInstance } = this.createTrackByFunction(block);
         const value = block.expression.visit(this._valueConverter);
         this.allocateBindingSlots(value);
+        this.registerComputedLoopVariables(block, primaryData.scope);
         // `repeaterCreate(0, ...)`
         this.creationInstruction(block.sourceSpan, Identifiers.repeaterCreate, () => {
             const params = [
@@ -25421,53 +25263,100 @@ class TemplateDefinitionBuilder {
                 variable(primaryData.name),
                 literal(primaryData.getConstCount()),
                 literal(primaryData.getVarCount()),
-                trackByFn,
+                trackByExpression,
             ];
             if (emptyData !== null) {
-                params.push(variable(emptyData.name), literal(emptyData.getConstCount()), literal(emptyData.getVarCount()));
+                params.push(literal(trackByUsesComponentInstance), variable(emptyData.name), literal(emptyData.getConstCount()), literal(emptyData.getVarCount()));
+            }
+            else if (trackByUsesComponentInstance) {
+                // If the tracking function doesn't use the component instance, we can omit the flag.
+                params.push(literal(trackByUsesComponentInstance));
             }
             return params;
         });
         // `repeater(0, iterable)`
         this.updateInstruction(block.sourceSpan, Identifiers.repeater, () => [literal(blockIndex), this.convertPropertyBinding(value)]);
     }
-    createForLoopVariables(block) {
+    registerComputedLoopVariables(block, bindingScope) {
         const indexLocalName = getLoopLocalName(block, '$index');
         const countLocalName = getLoopLocalName(block, '$count');
-        this._bindingScope.set(this.level, getLoopLocalName(block, '$odd'), scope => scope.get(indexLocalName).modulo(literal(2)).notIdentical(literal(0)));
-        this._bindingScope.set(this.level, getLoopLocalName(block, '$even'), scope => scope.get(indexLocalName).modulo(literal(2)).identical(literal(0)));
-        this._bindingScope.set(this.level, getLoopLocalName(block, '$first'), scope => scope.get(indexLocalName).identical(literal(0)));
-        this._bindingScope.set(this.level, getLoopLocalName(block, '$last'), scope => scope.get(indexLocalName).identical(scope.get(countLocalName).minus(literal(1))));
-        return [
-            new Variable(block.itemName, '$implicit', block.sourceSpan, block.sourceSpan),
-            new Variable(indexLocalName, '$index', block.sourceSpan, block.sourceSpan),
-            new Variable(countLocalName, '$count', block.sourceSpan, block.sourceSpan),
-        ];
+        const level = bindingScope.bindingLevel;
+        bindingScope.set(level, getLoopLocalName(block, '$odd'), scope => scope.get(indexLocalName).modulo(literal(2)).notIdentical(literal(0)));
+        bindingScope.set(level, getLoopLocalName(block, '$even'), scope => scope.get(indexLocalName).modulo(literal(2)).identical(literal(0)));
+        bindingScope.set(level, getLoopLocalName(block, '$first'), scope => scope.get(indexLocalName).identical(literal(0)));
+        bindingScope.set(level, getLoopLocalName(block, '$last'), scope => scope.get(indexLocalName).identical(scope.get(countLocalName).minus(literal(1))));
     }
-    createTrackByFunction(block) {
+    optimizeTrackByFunction(block) {
         const ast = block.trackBy.ast;
         // Top-level access of `$index` uses the built in `repeaterTrackByIndex`.
         if (ast instanceof PropertyRead && ast.receiver instanceof ImplicitReceiver &&
             ast.name === getLoopLocalName(block, '$index')) {
-            return importExpr(Identifiers.repeaterTrackByIndex);
+            return { expression: importExpr(Identifiers.repeaterTrackByIndex), usesComponentInstance: false };
         }
         // Top-level access of the item uses the built in `repeaterTrackByIdentity`.
         if (ast instanceof PropertyRead && ast.receiver instanceof ImplicitReceiver &&
             ast.name === block.itemName) {
-            return importExpr(Identifiers.repeaterTrackByIdentity);
+            return { expression: importExpr(Identifiers.repeaterTrackByIdentity), usesComponentInstance: false };
+        }
+        // Top-level calls in the form of `fn($index, item)` can be passed in directly.
+        if (ast instanceof Call && ast.receiver instanceof PropertyRead &&
+            ast.receiver.receiver instanceof ImplicitReceiver && ast.args.length === 2) {
+            const firstIsIndex = ast.args[0] instanceof PropertyRead &&
+                ast.args[0].receiver instanceof ImplicitReceiver &&
+                ast.args[0].name === getLoopLocalName(block, '$index');
+            const secondIsItem = ast.args[1] instanceof PropertyRead &&
+                ast.args[1].receiver instanceof ImplicitReceiver && ast.args[1].name === block.itemName;
+            if (firstIsIndex && secondIsItem) {
+                // If we're in the top-level component, we can access directly through `ctx`,
+                // otherwise we have to get a hold of the component through `componentInstance()`.
+                const receiver = this.level === 0 ? variable(CONTEXT_NAME) :
+                    new ExternalExpr(Identifiers.componentInstance).callFn([]);
+                return { expression: receiver.prop(ast.receiver.name), usesComponentInstance: false };
+            }
         }
-        // Otherwise transpile to an inline arrow function.
-        if (ast instanceof PropertyRead && ast.receiver instanceof PropertyRead &&
-            ast.receiver.receiver instanceof ImplicitReceiver && ast.receiver.name === block.itemName) {
-            // TODO(crisbeto): support references outside the function scope.
-            const params = [getLoopLocalName(block, '$index'), block.itemName];
-            const scope = this._bindingScope.nestedScope(this.level + 1, new Set(params));
-            const binding = convertPropertyBinding(scope, variable(CONTEXT_NAME), block.trackBy, 'trackBy');
-            return arrowFn(params.map(param => new FnParam(param)), binding.currValExpr);
+        return null;
+    }
+    createTrackByFunction(block) {
+        const optimizedFn = this.optimizeTrackByFunction(block);
+        // If the tracking function can be optimized, we don't need any further processing.
+        if (optimizedFn !== null) {
+            return optimizedFn;
+        }
+        // Referencing these requires access to the context which the tracking function
+        // might not have. `$index` is special because of backwards compatibility.
+        const bannedGlobals = new Set([
+            getLoopLocalName(block, '$count'), getLoopLocalName(block, '$first'),
+            getLoopLocalName(block, '$last'), getLoopLocalName(block, '$even'),
+            getLoopLocalName(block, '$odd')
+        ]);
+        const scope = new TrackByBindingScope(this._bindingScope, {
+            // Alias `$index` and the item name to `$index` and `$item` respectively.
+            // This allows us to reuse pure functions that may have different item names,
+            // but are otherwise identical.
+            [getLoopLocalName(block, '$index')]: '$index',
+            [block.itemName]: '$item',
+        }, bannedGlobals);
+        const params = [new FnParam('$index'), new FnParam('$item')];
+        const stmts = convertPureComponentScopeFunction(block.trackBy.ast, scope, variable(CONTEXT_NAME), 'track');
+        const usesComponentInstance = scope.getComponentAccessCount() > 0;
+        let fn$1;
+        if (!usesComponentInstance && stmts.length === 1 && stmts[0] instanceof ExpressionStatement) {
+            fn$1 = arrowFn(params, stmts[0].expr);
+        }
+        else {
+            // The last statement is returned implicitly.
+            if (stmts.length > 0) {
+                const lastStatement = stmts[stmts.length - 1];
+                if (lastStatement instanceof ExpressionStatement) {
+                    stmts[stmts.length - 1] = new ReturnStatement(lastStatement.expr);
+                }
+            }
+            fn$1 = fn(params, stmts);
         }
-        // TODO(crisbeto): this is a temporary restriction to land the initial implementation of the
-        // `for` blocks. A follow-up PR will introduce more flexibility to the `trackBy` expression.
-        throw new Error('Unsupported track expression');
+        return {
+            expression: this.constantPool.getSharedFunctionReference(fn$1, '_forTrack'),
+            usesComponentInstance,
+        };
     }
     getConstCount() {
         return this._dataIndex;
@@ -25939,6 +25828,10 @@ class BindingScope {
         // local var we used to store the component context, e.g. const $comp$ = x();
         return this.bindingLevel === 0 ? null : this.getComponentProperty(name);
     }
+    /** Checks whether a variable exists locally on the current scope. */
+    hasLocal(name) {
+        return this.map.has(name);
+    }
     /**
      * Create a local variable for later reference.
      *
@@ -26098,6 +25991,45 @@ class BindingScope {
         this.usesRestoredViewContext = true;
     }
 }
+/** Binding scope of a `track` function inside a `for` loop block. */
+class TrackByBindingScope extends BindingScope {
+    constructor(parentScope, globalAliases, bannedGlobals) {
+        super(parentScope.bindingLevel + 1, parentScope);
+        this.globalAliases = globalAliases;
+        this.bannedGlobals = bannedGlobals;
+        this.componentAccessCount = 0;
+    }
+    get(name) {
+        let current = this.parent;
+        // Verify that the expression isn't trying to access a variable from a parent scope.
+        while (current) {
+            if (current.hasLocal(name)) {
+                this.forbiddenAccessError(name);
+            }
+            current = current.parent;
+        }
+        // If the variable is one of the banned globals, we have to throw.
+        if (this.bannedGlobals.has(name)) {
+            this.forbiddenAccessError(name);
+        }
+        // Intercept any aliased globals.
+        if (this.globalAliases[name]) {
+            return variable(this.globalAliases[name]);
+        }
+        // When the component scope is accessed, we redirect it through `this`.
+        this.componentAccessCount++;
+        return variable('this').prop(name);
+    }
+    /** Gets the number of times the host component has been accessed through the scope. */
+    getComponentAccessCount() {
+        return this.componentAccessCount;
+    }
+    forbiddenAccessError(propertyName) {
+        // TODO(crisbeto): this should be done through template type checking once it is available.
+        throw new Error(`Accessing ${propertyName} inside of a track expression is not allowed. ` +
+            `Tracking expressions can only access the item, $index and properties on the containing component.`);
+    }
+}
 /**
  * Creates a `CssSelector` given a tag name and a map of attributes
  */
@@ -26824,11 +26756,11 @@ function createHostBindingsFunction(hostBindingsMetadata, typeSourceSpan, bindin
         // actually already handle these special attributes internally. Therefore, we just drop them
         // into the attributes map.
         if (hostBindingsMetadata.specialAttributes.styleAttr) {
-            hostBindingsMetadata.attributes.style =
+            hostBindingsMetadata.attributes['style'] =
                 literal(hostBindingsMetadata.specialAttributes.styleAttr);
         }
         if (hostBindingsMetadata.specialAttributes.classAttr) {
-            hostBindingsMetadata.attributes.class =
+            hostBindingsMetadata.attributes['class'] =
                 literal(hostBindingsMetadata.specialAttributes.classAttr);
         }
         const hostJob = ingestHostBinding({
@@ -27803,7 +27735,7 @@ function publishFacade(global) {
  * @description
  * Entry point for all public APIs of the compiler package.
  */
-const VERSION = new Version('17.0.0-next.2');
+const VERSION = new Version('17.0.0-next.4');
 
 class CompilerConfig {
     constructor({ defaultEncapsulation = ViewEncapsulation.Emulated, useJit = true, missingTranslation = null, preserveWhitespaces, strictInjectionParameters } = {}) {
@@ -29961,7 +29893,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('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', metadata.type);
     definitionMap.set('decorators', metadata.decorators);
@@ -30069,7 +30001,7 @@ function createDirectiveDefinitionMap(meta) {
     // in 16.1 is actually used.
     const minVersion = hasTransformFunctions ? MINIMUM_PARTIAL_LINKER_VERSION$5 : '14.0.0';
     definitionMap.set('minVersion', literal(minVersion));
-    definitionMap.set('version', literal('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     // e.g. `type: MyDirective`
     definitionMap.set('type', meta.type.value);
     if (meta.isStandalone) {
@@ -30300,7 +30232,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('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('deps', compileDependencies(meta.deps));
@@ -30335,7 +30267,7 @@ function compileDeclareInjectableFromMetadata(meta) {
 function createInjectableDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$3));
-    definitionMap.set('version', literal('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     // Only generate providedIn property if it has a non-null value
@@ -30386,7 +30318,7 @@ function compileDeclareInjectorFromMetadata(meta) {
 function createInjectorDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$2));
-    definitionMap.set('version', literal('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     definitionMap.set('type', meta.type.value);
     definitionMap.set('providers', meta.providers);
@@ -30419,7 +30351,7 @@ function createNgModuleDefinitionMap(meta) {
         throw new Error('Invalid path! Local compilation mode should not get into the partial compilation path');
     }
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION$1));
-    definitionMap.set('version', literal('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     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.
@@ -30470,7 +30402,7 @@ function compileDeclarePipeFromMetadata(meta) {
 function createPipeDefinitionMap(meta) {
     const definitionMap = new DefinitionMap();
     definitionMap.set('minVersion', literal(MINIMUM_PARTIAL_LINKER_VERSION));
-    definitionMap.set('version', literal('17.0.0-next.2'));
+    definitionMap.set('version', literal('17.0.0-next.4'));
     definitionMap.set('ngImport', importExpr(Identifiers.core));
     // e.g. `type: MyPipe`
     definitionMap.set('type', meta.type.value);