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,7 @@ 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';
 
 describe('ButtonComponent', () => {
   let component: ButtonComponent;
@@ -28,6 +29,25 @@ describe('ButtonComponent', () => {
   let mockSurface: any;
   let mockSurfaceGroup: any;
 
+  function createBoundProperty(val: any): BoundProperty<any> {
+    const sig = signal(val);
+    const prop = () => sig();
+    Object.defineProperties(prop, {
+      value: { get: () => sig(), configurable: true },
+      peek: { value: () => sig(), configurable: true },
+      set: {
+        value: jasmine.createSpy('set').and.callFake((v: any) => sig.set(v)),
+        configurable: true,
+      },
+      update: {
+        value: jasmine.createSpy('update').and.callFake((fn: any) => sig.update(fn)),
+        configurable: true,
+      },
+      raw: { value: val, configurable: true },
+    });
+    return prop as any;
+  }
+
   beforeEach(async () => {
     mockSurface = {
       dispatchAction: jasmine.createSpy('dispatchAction'),
@@ -47,10 +67,10 @@ describe('ButtonComponent', () => {
                   template: 'Dummy Text',
                 })
                 class DummyText {
-                    props = input<any>();
-                    surfaceId = input<string>();
-                    componentId = input<string>();
-                    dataContextPath = input<string>();
+                  props = input<any>();
+                  surfaceId = input<string>();
+                  componentId = input<string>();
+                  dataContextPath = input<string>();
                 }
                 return DummyText;
               })(),
@@ -84,14 +104,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 +125,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 +144,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 +157,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

@@ -77,13 +77,21 @@ 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']),
+      justify: Object.assign(() => 'start', {
+        value: 'start',
+        raw: 'start',
+        set: jasmine.createSpy('set'),
+      }),
+      align: Object.assign(() => 'stretch', {
+        value: 'stretch',
+        raw: 'stretch',
+        set: jasmine.createSpy('set'),
+      }),
+      children: Object.assign(() => ['child1', 'child2'], {
+        value: ['child1', 'child2'],
         raw: ['child1', 'child2'],
-        onUpdate: () => {},
-      },
+        set: jasmine.createSpy('set'),
+      }),
     });
   });
 
@@ -111,14 +119,14 @@ describe('ColumnComponent', () => {
   it('should render repeating children', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      children: {
-        value: signal([{}, {}]),
+      children: Object.assign(() => [{}, {}], {
+        value: [{}, {}],
         raw: {
           componentId: 'template1',
           path: 'items',
         },
-        onUpdate: () => {},
-      },
+        set: jasmine.createSpy('set'),
+      }),
     });
     fixture.detectChanges();
 

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

@@ -73,14 +73,14 @@ export class ColumnComponent {
    */
   props = input<Record<string, BoundProperty>>({});
   surfaceId = input.required<string>();
-  componentId = input<string>();
+  componentId = input.required<string>();
   dataContextPath = input<string>('/');
 
-  protected justify = computed(() => this.props()['justify']?.value());
-  protected align = computed(() => this.props()['align']?.value());
+  protected justify = computed(() => this.props()['justify']?.());
+  protected align = computed(() => this.props()['align']?.());
 
   protected children = computed(() => {
-    const raw = this.props()['children']?.value() || [];
+    const raw = this.props()['children']?.() || [];
     return Array.isArray(raw) ? raw : [];
   });