wip: phase details

Author: JeanMeche

angular.json

@@ -84,6 +84,9 @@
     }
   },
   "cli": {
-    "analytics": "6a505997-9ce1-42b3-9d81-62a5be67a151"
+    "analytics": "6a505997-9ce1-42b3-9d81-62a5be67a151",
+    "cache": {
+      "enabled": false
+    }
   }
 }

package-lock.json

@@ -10,16 +10,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.0",   
+    "@angular/animations": "^19.0.0",
     "@angular/cdk": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
-    "@angular/core": "^19.0.0", 
+    "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
     "@angular/material": "^19.0.0",
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
+    "nxt-json-view": "^19.0.0",
     "prettier": "^3.2.5",
     "rxjs": "~7.8.0",
     "shiki": "^1.2.0",

package.json

@@ -1,14 +1,11 @@
 import { CdkMenuModule } from '@angular/cdk/menu';
 import {
   Component,
-  effect,
-  ElementRef,
   HostListener,
   inject,
   resource,
   signal,
   VERSION,
-  viewChild,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -19,13 +16,15 @@ import { formatAngularTemplate } from './prettier';
 import { Template, templates } from './templates';
 import { unzip, zip } from './zip';
 import { DomSanitizer } from '@angular/platform-browser';
+import { JsonPipe } from '@angular/common';
+import { JsonViewComponent, JsonViewModule } from 'nxt-json-view';
 
 // Please don't blame for what you're gonna read
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [FormsModule, CdkMenuModule, MatIcon],
+  imports: [FormsModule, CdkMenuModule, MatIcon, JsonViewModule],
   template: `
     <header>Angular Template Compiler - based on {{ version }}</header>
     <main>
@@ -94,6 +93,11 @@ import { DomSanitizer } from '@angular/platform-browser';
       <code>renderFlag: 1=create, 2=update</code>
 
       <hr />
+      -
+      <!-- <pre><code>{{ details() | json }}</code></pre> -->
+      -
+      <nxt-json-view [data]="details()" [levelOpen]="5"></nxt-json-view>
+
       <footer>
         <div>
           <h2>About</h2>
@@ -152,6 +156,7 @@ export class AppComponent {
   protected readonly template = signal(templates[0].content);
   protected readonly errors = signal<{ message: string; line: number }[]>([]);
   protected readonly currentTemplate = signal(templates[0].label);
+  protected readonly details = signal<any>(null);
 
   protected readonly compiledTemplate = resource({
     request: this.template,
@@ -178,7 +183,9 @@ export class AppComponent {
   }
 
   async compileTemplate(template: string) {
-    const { output, errors } = await compileFormatAndHighlight(template);
+    const { output, errors, details } =
+      await compileFormatAndHighlight(template);
+    this.details.set(Object.fromEntries(details.entries()));
     this.errors.set(
       errors?.map((e) => {
         return { message: e.msg, line: e.span.start.line };

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { HighlighterGeneric, createHighlighter } from 'shiki';
 
 import { formatJs } from './prettier';
 import { Context, Printer } from './printer';
+import { map } from 'rxjs';
 
 let highlighter: HighlighterGeneric<any, any>;
 
@@ -16,67 +17,87 @@ export async function initHightlighter() {
 interface CompileOutput {
   output: string;
   errors: ng.ParseError[] | null;
+  details: any;
 }
 
-export function compileTemplate(templateStr: string): CompileOutput {
+export async function compileFormatAndHighlight(
+  template: string,
+): Promise<CompileOutput> {
+  const { output: unformated, errors, details } = compileTemplate(template);
+
+  const formatted = await formatJs(unformated);
+  const highlighted = highlighter.codeToHtml(formatted, {
+    lang: 'javascript',
+    theme: 'github-dark',
+  });
+
+  return { output: highlighted, errors, details };
+}
+
+function compileTemplate(templateStr: string): CompileOutput {
   const constantPool = new ng.ConstantPool();
   const template = ng.parseTemplate(templateStr, 'template.html', {
     preserveWhitespaces: false,
   });
 
   const CMP_NAME = 'TestCmp';
 
-  const out = ng.compileComponentFromMetadata(
-    {
-      name: CMP_NAME,
-      isStandalone: true,
-      selector: 'test-cmp',
-      host: {
-        attributes: {},
-        listeners: {},
-        properties: {},
-        specialAttributes: {},
-      },
-      inputs: {},
-      outputs: {},
-      lifecycle: {
-        usesOnChanges: false,
-      },
-      hostDirectives: null,
-      declarations: [],
-      declarationListEmitMode: ng.DeclarationListEmitMode.Direct,
-      deps: [],
-      animations: null,
-      defer: {
-        dependenciesFn: null,
-        mode: ng.DeferBlockDepsEmitMode.PerComponent,
-      },
-      i18nUseExternalIds: false,
-      interpolation: ng.DEFAULT_INTERPOLATION_CONFIG,
-      isSignal: false,
-      providers: null,
-      queries: [],
-      styles: [],
-      template,
-      encapsulation: ng.ViewEncapsulation.Emulated,
-      exportAs: null,
-      fullInheritance: false,
-      changeDetection: null,
-      relativeContextFilePath: 'template.html',
-      type: {
-        value: new ng.WrappedNodeExpr(CMP_NAME),
-        type: new ng.WrappedNodeExpr(CMP_NAME),
-      },
-      typeArgumentCount: 0,
-      typeSourceSpan: null!,
-      usesInheritance: false,
-      viewProviders: null,
-      viewQueries: [],
+  const meta: ng.R3ComponentMetadata<any> = {
+    name: CMP_NAME,
+    isStandalone: true,
+    selector: 'test-cmp',
+    host: {
+      attributes: {},
+      listeners: {},
+      properties: {},
+      specialAttributes: {},
+    },
+    inputs: {},
+    outputs: {},
+    lifecycle: {
+      usesOnChanges: false,
     },
+    hostDirectives: null,
+    declarations: [],
+    declarationListEmitMode: ng.DeclarationListEmitMode.Direct,
+    deps: [],
+    animations: null,
+    defer: {
+      dependenciesFn: null,
+      mode: ng.DeferBlockDepsEmitMode.PerComponent,
+    },
+    i18nUseExternalIds: false,
+    interpolation: ng.DEFAULT_INTERPOLATION_CONFIG,
+    isSignal: false,
+    providers: null,
+    queries: [],
+    styles: [],
+    template,
+    encapsulation: ng.ViewEncapsulation.Emulated,
+    exportAs: null,
+    fullInheritance: false,
+    changeDetection: null,
+    relativeContextFilePath: 'template.html',
+    relativeTemplatePath: 'template.html',
+    type: {
+      value: new ng.WrappedNodeExpr(CMP_NAME),
+      type: new ng.WrappedNodeExpr(CMP_NAME),
+    },
+    typeArgumentCount: 0,
+    typeSourceSpan: null!,
+    usesInheritance: false,
+    viewProviders: null,
+    viewQueries: [],
+  };
+
+  const out = ng.compileComponentFromMetadata(
+    meta,
     constantPool,
     ng.makeBindingParser(ng.DEFAULT_INTERPOLATION_CONFIG),
   );
 
+  const details = foo(meta, new ng.ConstantPool());
+
   const printer = new Printer();
   let strExpression = out.expression.visitExpression(
     printer,
@@ -89,19 +110,86 @@ export function compileTemplate(templateStr: string): CompileOutput {
     strExpression += `\n\n${strStmt}`;
   }
 
-  return { output: strExpression, errors: template.errors };
+  return { output: strExpression, errors: template.errors, details };
 }
 
-export async function compileFormatAndHighlight(
-  template: string,
-): Promise<CompileOutput> {
-  const { output: unformated, errors } = compileTemplate(template);
+function foo(meta: ng.R3ComponentMetadata<any>, constantPool: ng.ConstantPool) {
+  let allDeferrableDepsFn: ng.ReadVarExpr | null = null;
 
-  const formatted = await formatJs(unformated);
-  const highlighted = highlighter.codeToHtml(formatted, {
-    lang: 'javascript',
-    theme: 'github-dark',
+  const tpl = ng.ingestComponent(
+    meta.name,
+    meta.template.nodes,
+    constantPool,
+    meta.relativeContextFilePath,
+    meta.i18nUseExternalIds,
+    meta.defer,
+    allDeferrableDepsFn,
+    meta.relativeTemplatePath,
+    /* enableDebugLocations */ false,
+  );
+
+  const res: Map<string, any> = new Map();
+
+  res.set('initial state', {
+    phase: 'Initial state',
+    units: [...tpl.units].map((unit) => mapUnit(unit, tpl, constantPool)),
+  });
+
+  for (const phase of ng.phases) {
+    if (
+      phase.kind === ng.CompilationJobKind.Tmpl ||
+      phase.kind === ng.CompilationJobKind.Both
+    ) {
+      // The type of `Phase` above ensures it is impossible to call a phase that doesn't support the
+      // job kind.
+      phase.fn(tpl as ng.CompilationJob & ng.ComponentCompilationJob);
+      res.set(phase.fn.name, {
+        phase: phase.fn.name,
+        units: [...tpl.units].map((unit) => mapUnit(unit, tpl, constantPool)),
+      });
+    }
+  }
+
+  res.set('Final state', {
+    phase: 'Final state',
+    units: [...tpl.units].map((unit) => mapUnit(unit, tpl, constantPool)),
   });
 
-  return { output: highlighted, errors };
+  return res;
+}
+
+function mapUnit(
+  unit: ng.ViewCompilationUnit,
+  tpl: ng.ComponentCompilationJob,
+  constantPool: ng.ConstantPool,
+) {
+  return {
+    create: [...unit.create].map((create) => mapOp(create, tpl, constantPool)),
+    update: [...unit.update].map((update) => mapOp(update, tpl, constantPool)),
+
+    // create: [...unit.create],
+    // update: [...unit.update],
+    ops: [...unit.ops()].map((op) => mapOp(op, tpl, constantPool)),
+  };
+}
+
+function mapOp(
+  op: ng.CreateOp | ng.UpdateOp,
+  tpl: ng.ComponentCompilationJob,
+  constantPool: ng.ConstantPool,
+) {
+  const obj = {
+    kind: ng.OpKind[op.kind],
+    //fn: null, // ng.emitTemplateFn(tpl, constantPool),
+  };
+
+  if ('tag' in op) {
+    Object.assign(obj, { tag: op.tag });
+  }
+
+  if ('sourceSpan' in op) {
+    Object.assign(obj, { sourceSpan: op.sourceSpan?.toString() });
+  }
+
+  return obj;
 }