feat(angular): native signals for v0.9 renderer

renderers/angular/a2ui_explorer/src/app/agent-stub.service.ts

@@ -17,7 +17,7 @@
 import { Injectable } from '@angular/core';
 import { A2uiRendererService } from '@a2ui/angular/v0_9';
 
-import { A2uiClientAction, A2uiMessage } from '@a2ui/web_core/v0_9';
+import { A2uiClientAction, A2uiMessage, CreateSurfaceMessage } from '@a2ui/web_core/v0_9';
 import { ActionDispatcher } from './action-dispatcher.service';
 
 /**

renderers/angular/a2ui_explorer/src/app/card.component.ts

@@ -32,8 +32,8 @@ import { BoundProperty } from '@a2ui/angular/v0_9';
       style="border: 1px solid #ccc; padding: 16px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 16px; background-color: white;"
     >
       <a2ui-v09-component-host
-        *ngIf="props['child']?.value()"
-        [componentId]="props['child'].value()"
+        *ngIf="props['child']?.()"
+        [componentId]="props['child']()!"
         [surfaceId]="surfaceId"
       >
       </a2ui-v09-component-host>

renderers/angular/a2ui_explorer/src/app/custom-slider.component.ts

@@ -28,12 +28,12 @@ import { BoundProperty } from '@a2ui/angular/v0_9';
   imports: [CommonModule],
   template: `
     <div class="custom-slider-container">
-      <label>{{ props['label']?.value() || 'Value' }}: {{ props['value']?.value() }}</label>
+      <label>{{ props['label']?.() || 'Value' }}: {{ props['value']?.() }}</label>
       <input
         type="range"
-        [min]="props['min']?.value() || 0"
-        [max]="props['max']?.value() || 100"
-        [value]="props['value']?.value() || 0"
+        [min]="props['min']?.() || 0"
+        [max]="props['max']?.() || 100"
+        [value]="props['value']?.() || 0"
         (input)="handleInput($event)"
       />
     </div>
@@ -57,6 +57,6 @@ export class CustomSliderComponent {
 
   handleInput(event: Event) {
     const val = Number((event.target as HTMLInputElement).value);
-    this.props['value']?.onUpdate(val);
+    this.props['value']?.set(val);
   }
 }

renderers/angular/a2ui_explorer/src/app/demo-catalog.ts

@@ -30,6 +30,13 @@ import { createFunctionImplementation, FunctionImplementation } from '@a2ui/web_
 })
 export class DemoCatalog extends BasicCatalogBase {
   constructor() {
+    const cardApi: AngularComponentImplementation = {
+      name: 'Card',
+      schema: z.object({
+        child: z.string().optional(),
+      }) as any,
+      component: CardComponent,
+    };
     const customSliderApi: AngularComponentImplementation = {
       name: 'CustomSlider',
       schema: z.object({
@@ -41,14 +48,6 @@ export class DemoCatalog extends BasicCatalogBase {
       component: CustomSliderComponent,
     };
 
-    const cardApi: AngularComponentImplementation = {
-      name: 'Card',
-      schema: z.object({
-        child: z.string().optional(),
-      }) as any,
-      component: CardComponent,
-    };
-
     const capitalizeImplementation: FunctionImplementation = createFunctionImplementation(
       {
         name: 'capitalize',

renderers/angular/a2ui_explorer/src/app/demo.component.ts

@@ -19,9 +19,10 @@ import { CommonModule } from '@angular/common';
 import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '@a2ui/angular/v0_9';
 import { AgentStubService } from './agent-stub.service';
 import { SurfaceComponent } from '@a2ui/angular/v0_9';
-import { AngularCatalog } from '@a2ui/angular/v0_9';
+import { AngularCatalog, AngularComponentImplementation } from '@a2ui/angular/v0_9';
+import { createFunctionImplementation, FunctionImplementation } from '@a2ui/web_core/v0_9';
 import { DemoCatalog } from './demo-catalog';
-import { A2uiClientAction, CreateSurfaceMessage } from '@a2ui/web_core/v0_9';
+import { A2uiClientAction, A2uiMessage, CreateSurfaceMessage } from '@a2ui/web_core/v0_9';
 import { EXAMPLES } from './examples-bundle';
 import { Example } from './types';
 import { ActionDispatcher } from './action-dispatcher.service';

renderers/angular/src/v0_8/components/modal.ts

@@ -25,23 +25,15 @@ import { Types } from '../types';
   template: `
     <div class="a2ui-modal-entry-point" (click)="openModal()">
       @if (entryPointChild()) {
-        <ng-container
-          a2ui-renderer
-          [surfaceId]="surfaceId()!"
-          [component]="entryPointChild()!"
-        />
+        <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="entryPointChild()!" />
       }
     </div>
 
     @if (isOpen()) {
       <div [class]="theme.components.Modal.backdrop" (click)="closeModal()">
         <div [class]="theme.components.Modal.element" (click)="$event.stopPropagation()">
           @if (contentChild()) {
-            <ng-container
-              a2ui-renderer
-              [surfaceId]="surfaceId()!"
-              [component]="contentChild()!"
-            />
+            <ng-container a2ui-renderer [surfaceId]="surfaceId()!" [component]="contentChild()!" />
           }
         </div>
       </div>

renderers/angular/src/v0_9/catalog/basic/audio-player.component.ts

@@ -70,6 +70,6 @@ export class AudioPlayerComponent {
   componentId = input<string>();
   dataContextPath = input<string>();
 
-  description = computed(() => this.props()['description']?.value());
-  url = computed(() => this.props()['url']?.value());
+  description = computed(() => this.props()['description']?.());
+  url = computed(() => this.props()['url']?.());
 }

renderers/angular/src/v0_9/catalog/basic/button.component.spec.ts

@@ -20,6 +20,8 @@ import { ButtonComponent } from './button.component';
 import { A2uiRendererService } from '../../core/a2ui-renderer.service';
 import { ComponentBinder } from '../../core/component-binder.service';
 import { By } from '@angular/platform-browser';
+import { BoundProperty } from '../../core/types';
+import { createBoundProperty, StubComponent, createMockA2uiRendererService, createMockComponentBinder } from '../../testing';
 
 describe('ButtonComponent', () => {
   let component: ButtonComponent;
@@ -35,40 +37,14 @@ describe('ButtonComponent', () => {
         ['child1', { id: 'child1', type: 'Text', properties: { text: 'Child Content' } }],
       ]),
       catalog: {
-        id: 'test-catalog',
-        components: new Map([
-          [
-            'Text',
-            {
-              component: (() => {
-                @Component({
-                  standalone: true,
-                  selector: 'dummy-text',
-                  template: 'Dummy Text',
-                })
-                class DummyText {
-                    props = input<any>();
-                    surfaceId = input<string>();
-                    componentId = input<string>();
-                    dataContextPath = input<string>();
-                }
-                return DummyText;
-              })(),
-            },
-          ],
-        ]),
+        id: 'mock-catalog',
+        components: new Map([['Text', { type: 'Text', component: StubComponent }]]),
       },
     };
 
-    mockSurfaceGroup = {
-      getSurface: jasmine.createSpy('getSurface').and.returnValue(mockSurface),
-    };
-
-    mockRendererService = {
-      surfaceGroup: mockSurfaceGroup,
-    };
-
-    const mockBinder = jasmine.createSpyObj('ComponentBinder', ['bind']);
+    mockRendererService = createMockA2uiRendererService(mockSurface);
+    mockSurfaceGroup = mockRendererService.surfaceGroup;
+    const mockBinder = createMockComponentBinder();
     mockBinder.bind.and.returnValue({ text: { value: () => 'bound text' } });
 
     await TestBed.configureTestingModule({
@@ -84,14 +60,11 @@ describe('ButtonComponent', () => {
     fixture.componentRef.setInput('surfaceId', 'surf1');
     fixture.componentRef.setInput('componentId', 'comp1');
     fixture.componentRef.setInput('props', {
-      variant: { value: signal('primary'), raw: 'primary', onUpdate: () => {} },
-      child: { value: signal('child1'), raw: 'child1', onUpdate: () => {} },
-      action: {
-        value: signal({ type: 'test-action', data: {} }),
-        raw: { type: 'test-action', data: {} },
-        onUpdate: () => {},
-      },
+      variant: createBoundProperty('primary'),
+      child: createBoundProperty('child1'),
+      action: createBoundProperty({ type: 'test-action', data: {} }),
     });
+    fixture.componentRef.setInput('componentId', 'test-btn');
   });
 
   it('should create', () => {
@@ -108,11 +81,7 @@ describe('ButtonComponent', () => {
   it('should set button type to button for non-primary variant', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      variant: {
-        value: signal('secondary'),
-        raw: 'secondary',
-        onUpdate: () => {},
-      },
+      variant: createBoundProperty('secondary'),
     });
     fixture.detectChanges();
     const button = fixture.debugElement.query(By.css('button'));
@@ -131,7 +100,7 @@ describe('ButtonComponent', () => {
     button.triggerEventHandler('click', null);
 
     expect(mockSurfaceGroup.getSurface).toHaveBeenCalledWith('surf1');
-    expect(mockSurface.dispatchAction).toHaveBeenCalledWith(jasmine.any(Object), 'comp1');
+    expect(mockSurface.dispatchAction).toHaveBeenCalledWith(jasmine.any(Object), 'test-btn');
   });
 
   it('should show child component host if child prop is present', () => {
@@ -144,7 +113,7 @@ describe('ButtonComponent', () => {
   it('should not show child component host if child prop is absent', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      child: { value: signal(null), raw: null, onUpdate: () => {} },
+      child: createBoundProperty(null),
     });
     fixture.detectChanges();
     const host = fixture.debugElement.query(By.css('a2ui-v09-component-host'));

renderers/angular/src/v0_9/catalog/basic/button.component.ts

@@ -85,9 +85,9 @@ export class ButtonComponent {
 
   private rendererService = inject(A2uiRendererService);
 
-  variant = computed(() => this.props()['variant']?.value() ?? 'default');
-  child = computed(() => this.props()['child']?.value());
-  action = computed(() => this.props()['action']?.value());
+  variant = computed(() => this.props()['variant']?.() ?? 'default');
+  child = computed(() => this.props()['child']?.());
+  action = computed(() => this.props()['action']?.());
 
   handleClick() {
     const action = this.action();

renderers/angular/src/v0_9/catalog/basic/card.component.ts

@@ -61,8 +61,8 @@ export class CardComponent {
    */
   props = input<Record<string, BoundProperty>>({});
   surfaceId = input.required<string>();
-  componentId = input<string>();
+  componentId = input.required<string>();
   dataContextPath = input<string>('/');
 
-  child = computed(() => this.props()['child']?.value());
+  child = computed(() => this.props()['child']?.());
 }

renderers/angular/src/v0_9/catalog/basic/check-box.component.ts

@@ -70,16 +70,16 @@ export class CheckBoxComponent {
    */
   props = input<Record<string, BoundProperty>>({});
   surfaceId = input.required<string>();
-  componentId = input<string>();
+  componentId = input.required<string>();
   dataContextPath = input<string>('/');
 
   private rendererService = inject(A2uiRendererService);
 
-  value = computed(() => this.props()['value']?.value() === true);
-  label = computed(() => this.props()['label']?.value());
+  value = computed(() => this.props()['value']?.() === true);
+  label = computed(() => this.props()['label']?.());
 
   handleChange(event: Event) {
     const checked = (event.target as HTMLInputElement).checked;
-    this.props()['value']?.onUpdate(checked);
+    this.props()['value']?.set(checked);
   }
 }

renderers/angular/src/v0_9/catalog/basic/choice-picker.component.ts

@@ -122,12 +122,10 @@ export class ChoicePickerComponent {
 
   private rendererService = inject(A2uiRendererService);
 
-  displayStyle = computed(() => this.props()['displayStyle']?.value());
-  choices = computed(
-    () => this.props()['choices']?.value() || this.props()['options']?.value() || [],
-  );
-  variant = computed(() => this.props()['variant']?.value());
-  selectedValue = computed(() => this.props()['value']?.value());
+  displayStyle = computed(() => this.props()['displayStyle']?.());
+  choices = computed(() => this.props()['choices']?.() || this.props()['options']?.() || []);
+  variant = computed(() => this.props()['variant']?.());
+  selectedValue = computed(() => this.props()['value']?.());
 
   isMultiple(): boolean {
     return this.variant() === 'multipleSelection';
@@ -160,10 +158,10 @@ export class ChoicePickerComponent {
       } else {
         next = next.filter((v: any) => v !== value);
       }
-      this.props()['value']?.onUpdate(next);
+      this.props()['value']?.set(next);
     } else {
       if (active) {
-        this.props()['value']?.onUpdate(value);
+        this.props()['value']?.set(value);
       }
     }
   }

renderers/angular/src/v0_9/catalog/basic/column.component.spec.ts

@@ -15,23 +15,12 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, input, signal } from '@angular/core';
 import { ColumnComponent } from './column.component';
 import { A2uiRendererService } from '../../core/a2ui-renderer.service';
 import { ComponentBinder } from '../../core/component-binder.service';
 import { By } from '@angular/platform-browser';
+import { createBoundProperty, StubComponent, createMockA2uiRendererService, createMockComponentBinder } from '../../testing';
 
-@Component({
-  standalone: true,
-  selector: 'dummy-child',
-  template: 'Dummy Child',
-})
-class DummyChild {
-  props = input<any>();
-  surfaceId = input<string>();
-  componentId = input<string>();
-  dataContextPath = input<string>();
-}
 
 describe('ColumnComponent', () => {
   let component: ColumnComponent;
@@ -50,19 +39,14 @@ describe('ColumnComponent', () => {
       ]),
       catalog: {
         id: 'test-catalog',
-        components: new Map([['Child', { component: DummyChild }]]),
+        components: new Map([['Child', { component: StubComponent }]]),
       },
     };
 
-    mockSurfaceGroup = {
-      getSurface: jasmine.createSpy('getSurface').and.returnValue(mockSurface),
-    };
-
-    mockRendererService = {
-      surfaceGroup: mockSurfaceGroup,
-    };
+    mockRendererService = createMockA2uiRendererService(mockSurface);
+    mockSurfaceGroup = mockRendererService.surfaceGroup;
 
-    mockBinder = jasmine.createSpyObj('ComponentBinder', ['bind']);
+    mockBinder = createMockComponentBinder();
     mockBinder.bind.and.returnValue({ text: { value: () => 'bound' } });
 
     await TestBed.configureTestingModule({
@@ -77,13 +61,9 @@ describe('ColumnComponent', () => {
     component = fixture.componentInstance;
     fixture.componentRef.setInput('surfaceId', 'surf1');
     fixture.componentRef.setInput('props', {
-      justify: { value: signal('start'), raw: 'start', onUpdate: () => {} },
-      align: { value: signal('stretch'), raw: 'stretch', onUpdate: () => {} },
-      children: {
-        value: signal(['child1', 'child2']),
-        raw: ['child1', 'child2'],
-        onUpdate: () => {},
-      },
+      justify: createBoundProperty('start'),
+      align: createBoundProperty('stretch'),
+      children: createBoundProperty(['child1', 'child2']),
     });
   });
 
@@ -111,14 +91,10 @@ describe('ColumnComponent', () => {
   it('should render repeating children', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      children: {
-        value: signal([{}, {}]),
-        raw: {
-          componentId: 'template1',
-          path: 'items',
-        },
-        onUpdate: () => {},
-      },
+      children: createBoundProperty([{}, {}], {
+        componentId: 'template1',
+        path: 'items',
+      }),
     });
     fixture.detectChanges();