mirror of https://github.com/affaan-m/ECC.git synced 2026-09-30 21:45:13 +02:00

Files

T

Affaan MustafaandGitHub c70874fae9 feat(pi): curated pi/core skills+prompts profile, CI load test, and 2.2.2 release sync (#3264 )

Adds a curated, Pi-native, skills+prompts-only profile at pi/core/ for downstream packagers that mirror GitHub Releases.

- manifests/pi-core.json: explicit include lists, per-item exclusion reasons, curation rules, safety allowlists; every root skill and command must be classified.
- scripts/build-pi-core.js regenerates pi/core deterministically (package.json from VERSION, LICENSE, README.md, CURATION.md, skills/, commands/); --check fails CI on drift. council is renamed ecc-council inside pi/core only.
- Safety checks: no callable endpoints outside the allowlist, no npx/curl|sh/pip install, no secrets, no absolute home paths, no symlinks, valid frontmatter, no duplicate names.
- CI: build + drift check and an offline Pi CLI load test of pi/core.
- Release: VERSION, package.json and pi/core/package.json at 2.2.2, CHANGELOG, tag-triggered release verification, and a two-week cadence in CONTRIBUTING.md.

pi/core: 123 of 293 skills and 24 of 94 commands; 35,006 characters of skill description text.

2026-09-29 20:24:05 -05:00

2.5 KiB

Raw Blame History

Outputs (Custom Events)

Outputs allow a child component to emit custom events that a parent component can listen to. Angular recommends using the new output() function for modern applications.

Function-based outputs

Declare outputs using the output() function. This returns an OutputEmitterRef.

import {Component, output} from '@angular/core';

@Component({
  selector: 'custom-slider',
  template: `<button (click)="changeValue(50)">Set to 50</button>`,
})
export class CustomSlider {
  // Output without event data
  panelClosed = output<void>();

  // Output with event data (number)
  valueChanged = output<number>();

  changeValue(newValue: number) {
    this.valueChanged.emit(newValue);
  }
}

Usage in Template

Bind to the output event using parentheses (). If the event emits data, access it using the special $event variable.

<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />

Configuration Options

The output function accepts a config object to specify an alias.

@Component({...})
export class CustomSlider {
  // The event is named 'valueChanged' in the template,
  // but accessed as 'changed' in the component class.
  changed = output<number>({ alias: 'valueChanged' });
}

Programmatic Subscription

When creating components dynamically, you can subscribe to outputs programmatically:

const componentRef = viewContainerRef.createComponent(CustomSlider);

const subscription = componentRef.instance.valueChanged.subscribe((val) => {
  console.log('Value changed:', val);
});

// Clean up manually if needed (Angular cleans up destroyed components automatically)
subscription.unsubscribe();

Decorator-based Outputs (@Output)

The legacy API uses the @Output() decorator with an EventEmitter. It remains supported but is not recommended for new code.

import { Component, Output, EventEmitter } from '@angular/core';

@Component({...})
export class LegacyExample {
  @Output() valueChanged = new EventEmitter<number>();

  // With alias
  @Output('customEventName') changed = new EventEmitter<void>();
}

Best Practices

Prefer output(): Use the function-based output() instead of @Output() and EventEmitter.
Naming: Use camelCase for output names. Avoid prefixing with on (e.g., use valueChanged instead of onValueChanged).
No DOM Bubbling: Angular custom events do not bubble up the DOM tree like native events.
Avoid Collisions: Do not choose names that collide with native DOM events (like click or submit).

2.5 KiB Raw Blame History