Angular interface

The tables on this page are checked against prose-angular/src/. A test reads the input(), output() and signal() members of OdrlProseComponent and fails when a name, a type or a default differs from what is written here.

The component is ds-odrl-prose, a standalone component with an empty template and OnPush change detection. It declares no styles and no encapsulation. It implements OnChanges and OnDestroy, and every input change runs one synchronisation with the wasm module.

Inputs #

Validation is covered on its own page.

Outputs #

The work of the wasm module runs outside the Angular zone (NgZone.runOutsideAngular), so Yew's own scheduling does not trigger change detection. The report is published back inside the zone (NgZone.run).

Signal #

The declared type is writable, because the source declares readonly report = signal<...>(null). Treat it as read-only: read it, do not set it. The component overwrites it on every synchronisation.

@Component({
  selector: 'app-latest',
  imports: [OdrlProseComponent],
  template: `
    <ds-odrl-prose #prose [json]="policy" [strict]="true" />
    <p>{{ prose.report()?.verdict ?? 'validation is off' }}</p>
  `,
})
export class LatestComponent {
  policy = POLICY;
}

From prose-angular/test/docs-examples.ts, region report_signal.

PROSE_WASM_URL #

PROSE_WASM_URL is an InjectionToken<string> provided in root. Its default is 'prose_wasm_bg.wasm'. The component resolves it against document.baseURI, which is the page's <base href>, and fetches the file once per page, on first render. A failed load is not remembered, so the next input change retries.

To serve the file from another place, provide the token:

export const appConfig: ApplicationConfig = {
  providers: [{ provide: PROSE_WASM_URL, useValue: '/assets/prose_wasm_bg.wasm' }],
};

From prose-angular/test/docs-examples.ts, region wasm_url.

PROSE_WASM_MODULE #

PROSE_WASM_MODULE is an InjectionToken<() => Promise<ProseWasmModule>> provided in root: the function that imports the build of @ds-labs/prose-wasm the component and the service run. The default, () => import('@ds-labs/prose-wasm'), reads profiles written in JSON-LD. The bundler puts that module in its own chunk, loaded on first render.

To read Turtle profiles as well, provide the Turtle build and its wasm file. That file is about 30 KiB larger over the wire (brotli), so it is opt-in:

export const turtleConfig: ApplicationConfig = {
  providers: [
    { provide: PROSE_WASM_MODULE, useValue: () => import('@ds-labs/prose-wasm/turtle') },
    { provide: PROSE_WASM_URL, useValue: 'prose_wasm_turtle_bg.wasm' },
  ],
};

From prose-angular/test/docs-examples.ts, region turtle.

Copy prose_wasm_turtle_bg.wasm into your assets with the same kind of entry as below, with that file name in glob. Without the Turtle build, a Turtle profile emits profileError with a message that names the Turtle build.

ProseValidatorService #

ProseValidatorService is provided in root. It validates a policy against profiles without rendering anything: a submit guard, a list of policies. It runs the same engine as [strict] and as the ds-prose-validate command, so the report is the same.

async validate(
  json: string,
  profiles: string | readonly string[] | null = null,
  options: ValidateOptions | null = null,
): Promise<ValidationReport>

It waits for the wasm module and does no network access. It is strict unless options.strict is false. It rejects when the wasm cannot be loaded, or when a profile or the options cannot be read. A problem in the policy is a finding in the report, never a rejection.

@Component({ selector: 'app-guard', template: '' })
export class GuardComponent {
  private readonly validator = inject(ProseValidatorService);

  async canSubmit(json: string, profileText: string): Promise<boolean> {
    const report = await this.validator.validate(json, [profileText]);
    return report.verdict === 'conforms';
  }
}

From prose-angular/test/docs-examples.ts, region service.

It loads the wasm through document.baseURI, so it is browser-only like the component. To validate in Node, use initSync and validate from @ds-labs/prose-wasm directly.

Load error #

When the wasm module cannot be loaded, the component logs ds-odrl-prose: could not load the wasm module with console.error and emits loadFailed. If nothing is mounted yet, it also replaces the children of the host with a p.prose-error with role="alert" and this text, where the URL is the value of PROSE_WASM_URL:

The ODRL prose renderer could not be loaded (the URL). Check that the file is served; it is tried again when the input changes.

A tree that is already mounted is left alone. The error paragraph is a child of the host, outside article.ds-prose: select it as ds-odrl-prose > .prose-error, as CSS hooks says.

Exports #

The package exports exactly these names from its entry point. Nothing else is public: the loader and the sync helpers are internal.

ProfileSummary #

Compiled examples #

Every TypeScript block in these pages is a region of prose-angular/test/docs-examples.ts, which npm run typecheck compiles against the package. The templates are strings there, so the Angular compiler checks them only in an application.

@Component({
  selector: 'app-profiled',
  imports: [OdrlProseComponent],
  template: `
    <ds-odrl-prose [json]="policy" [profile]="profileText"
                   (profileLoaded)="loaded($event)" (profileError)="failed($event)" />
  `,
})
export class ProfiledComponent {
  policy = POLICY;
  profileText = PROFILE_TEXT;
  loaded(summary: ProfileSummary): void {
    console.log(summary.title, summary.terms);
  }
  failed(error: unknown): void {
    console.error('profile not readable', error);
  }
}

From prose-angular/test/docs-examples.ts, region profile.