feat: generic template-binding-reorder capability — the Ivy input-order regression fix

Reads a directive class for @input() set accessors that dereference
another same-directive @input() in a throwing position (Renderer2
element-method arg0 or .classList), then topologically reorders a call
site's directive-input bindings so every dep precedes its dependent;
refuses cycles and unmatchable selectors, no-ops the
safe/non-input/unprovable/unbound cases. Fires exactly once on the real
split shape: [splitPos]…[splitTopEl] → [splitTopEl][splitBottomEl]
[splitPos], binding VALUES byte-identical, outputs untouched — the
root-cause fix for Ivy applying input setters in template order where
View Engine used declaration order. 16 tests (positive + four
refusals). Rebuild + behavior-check deferred as its own lane. PM
verified full gate: 2066/2066.

Author: thejackshelton

packages/cli/src/fixture/angular-super-productivity-lanes-run.ts

@@ -202,6 +202,23 @@ async function styleSheetsBelow(directory: string, root: string): Promise<Worksp
 	return files;
 }
 
+/** Every component template below a directory, as workspace files. */
+async function templatesBelow(directory: string, root: string): Promise<WorkspaceFile[]> {
+	const files: WorkspaceFile[] = [];
+	for (const entry of (await readdir(directory, { withFileTypes: true })).sort((left, right) =>
+		left.name < right.name ? -1 : 1,
+	)) {
+		const item = path.join(directory, entry.name);
+		if (entry.isDirectory()) {
+			files.push(...(await templatesBelow(item, root)));
+			continue;
+		}
+		if (!entry.isFile() || path.extname(entry.name) !== '.html') continue;
+		files.push({ path: path.relative(root, item), source: await readFile(item, 'utf8') });
+	}
+	return files;
+}
+
 /** Every workspace-relative path the tree carries, excluding installed packages. */
 async function workspacePathsBelow(directory: string, root: string): Promise<string[]> {
 	const paths: string[] = [];
@@ -247,6 +264,7 @@ export async function composeMigration(tree: string): Promise<AngularMigration>
 				source: await readFile(path.join(tree, 'tsconfig.json'), 'utf8'),
 			},
 			sourceModules,
+			templates: await templatesBelow(source, tree),
 			styleSheets: await styleSheetsBelow(source, tree),
 			workspaceFiles: await workspacePathsBelow(tree, tree),
 		},

packages/frameworks/angular/src/angular-cli-era-migration.ts

@@ -34,6 +34,12 @@ import {
 	removeEntryComponents,
 	type EntryComponentsChange,
 } from './entry-components-removal.ts';
+import {
+	readDirectiveBindingDependencies,
+	reorderTemplateBindings,
+	type BindingReorderChange,
+	type DirectiveBindingReading,
+} from './template-binding-reorder.ts';
 import {
 	declareUndeclaredRuntimeDependencies,
 	undeclaredRuntimeDependencies,
@@ -61,6 +67,15 @@ export type AngularMigrationInput = Readonly<{
 	tsConfig: WorkspaceFile;
 	/** Application source modules, as read from the workspace. */
 	sourceModules: readonly WorkspaceFile[];
+	/**
+	 * Component templates the application owns, kept apart from
+	 * {@link sourceModules} because they are not modules: no source transform
+	 * parses them, and the only capability that reads them reorders directive
+	 * bindings a component class proves are order-dependent. A tree that supplies
+	 * none has none reordered, which is a different thing from having none to
+	 * reorder.
+	 */
+	templates?: readonly WorkspaceFile[];
 	/**
 	 * Webpack fragments a wrapper builder reads, keyed by the path the workspace
 	 * writes for them. A fragment a target references but that is not supplied
@@ -179,6 +194,13 @@ function describeEntryComponentsChange(change: EntryComponentsChange): string {
 	return `line ${change.line}: ${change.kind} of ${change.symbols.join(', ')}`;
 }
 
+function describeBindingReorderChange(change: BindingReorderChange): string {
+	return (
+		`line ${change.line}: ${change.kind} on <${change.element}> (${change.directive}) — ` +
+		`${change.before.join(', ')} -> ${change.after.join(', ')}, forced by ${change.edges.join('; ')}`
+	);
+}
+
 function file(
 	input: WorkspaceFile,
 	source: string,
@@ -358,6 +380,33 @@ export function migrateAngularCliEraWorkspace(
 			]),
 		);
 	}
+	/**
+	 * Templates are the last application capability, and it is cross-file by
+	 * nature: whether a call site's binding order is safe is a question about the
+	 * directive the element resolves to, read from that directive's own class.
+	 * The readings are taken from the modules as the per-module capabilities left
+	 * them, so a directive whose imports those capabilities rewrote still
+	 * resolves. A template no directive reading touches is carried through
+	 * unchanged and still counted, so the scanned total means what it says.
+	 */
+	const directiveReadings: DirectiveBindingReading[] = [];
+	for (const entry of files)
+		if (entry.kind === 'application' && entry.path.endsWith('.ts'))
+			directiveReadings.push(...readDirectiveBindingDependencies(entry.path, entry.source));
+	for (const template of [...(input.templates ?? [])].sort((left, right) =>
+		compareStrings(left.path, right.path),
+	)) {
+		const reordered = reorderTemplateBindings(template.path, template.source, directiveReadings);
+		unhandled.push(...reordered.unhandled);
+		files.push(
+			file(
+				template,
+				reordered.source,
+				'application',
+				reordered.changes.map(describeBindingReorderChange),
+			),
+		);
+	}
 	/**
 	 * Stylesheets are application files too, and a blocked package subpath is an
 	 * application file that no longer builds. Each is offered to every package

packages/frameworks/angular/src/index.ts

@@ -38,3 +38,4 @@ export * from './json-module-named-import.ts';
 export * from './stylesheet-url-rebase.ts';
 export * from './web-worker-url-specifier.ts';
 export * from './forms-legacy-disabled-state.ts';
+export * from './template-binding-reorder.ts';