Skip to content

Feat/angular lang scaffold - #1167

Merged
vishxrad merged 10 commits into
thesysdev:mainfrom
muhammedgider:feat/angular-lang-scaffold
Sep 21, 2026
Merged

vishxrad merged 10 commits into
thesysdev:mainfrom
muhammedgider:feat/angular-lang-scaffold

Conversation

@muhammedgider

@muhammedgider muhammedgider commented Sep 11, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Add @openuidev/angular-lang with Angular component-library definitions, prompt/parser utilities, streamed rendering, reactive form/context state, actions, queries/mutations, validation, and render-error recovery.

The contribution is scoped to the package, its Lang release-group membership, and the required workspace dependency/catalog and lockfile entries. Docs and the example will be added in a separate PR. Shared build, release, publishing, and example-management workflows are unchanged.

The package builds with ng-packagr into its own dist/ directory and uses normal pnpm packing with declared runtime/type entry points; no custom packaging scripts are needed. Its Node 24.15.0 development runtime and TypeScript 6 are package-local.

Context field readers now update without replacing component instances. injectIsStreaming() and injectIsQueryLoading() return Angular signals; full-context boolean getters remain reactive.

Angular joins the fixed Lang release group alongside lang-core, react-lang, svelte-lang, and vue-lang. Its manifest version is 0.3.0. The Angular changeset has been removed, so this PR does not request a version bump for Angular or the existing Lang packages. Future releases will follow the fixed group.

Tests use the current Angular browser-testing APIs with an explicit compiler import. Deprecated @angular/platform-browser-dynamic and unused zone.js dependencies are removed. Library-wrapper tests are reduced to one registration smoke test; renderer lifecycle, reactivity, forms, queries/mutations, validation, and error-recovery coverage remains.

Validation

  • Frozen workspace installation passed. The dependency graph removes exactly the two obsolete packages, with no other package versions added or upgraded.
  • Rebuilt runtime JavaScript and type declarations are byte-for-byte unchanged by the test/dependency cleanup; the packed artifact retains valid exports and version 0.3.0.
  • Release configuration and internal peer-window checks passed; the release plan has no pending version bumps. The informational changeset check reports the expected missing-changeset warning for the new Angular package.
  • Angular CI: type checks, 29 tests, lint, and formatting passed.
  • 109 lang-core tests passed.
  • Library build, normal workspace pack, archive entry-point checks, and isolated Angular consumer installation passed.
  • Frozen install and prepare builds passed from Node 20.19.0 with Angular using its package-local Node 24.15.0 runtime.
  • publint: metadata suggestion only. attw: ESM/bundler checks passed; expected CommonJS-to-ESM limitation remains.
  • Browser regression checks passed against the packed artifact for field refresh, component preservation, and streaming/loading completion.
  • Live-model chart and follow-up smoke tests passed on desktop/mobile with zero parser errors and no browser warnings/errors, using a temporary app outside this PR.

@vercel

vercel Bot commented Sep 11, 2026

Copy link
Copy Markdown

@muhammedgider is attempting to deploy a commit to the thesys-devs Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Sep 17, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
openui-docs Ready Ready Preview Sep 21, 2026 10:53am UTC

Request Review

@vishxrad vishxrad left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot for this pr, we would love to publish a angular package for OpenUI. Here are some review comments.

Reviewed commit 6eb2093. Six actionable findings are attached inline.

Verification: the Angular package's 18 tests, build, typecheck, lint, formatting, and dist pack check passed; lang-core's 109 tests passed. The example builds with workspace dependencies on Node 26. Browser checks exercised static and nested rendering, query loading, mutation interaction, crash recovery, and the failing form scenario. Additional checks reproduced the packaging, reactive-input focus, TypeScript, and standalone-install issues below. The failed build-examples CI log confirms the Node-version mismatch. Real-model streaming and mobile behavior remain unverified.

Comment on lines +24 to +26
"@angular/build": "^22.1.7",
"@angular/cli": "^22.1.7",
"@angular/compiler-cli": "^22.1.5",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] Update the CI Node version alongside Angular 22

The build-examples job in .github/workflows/build-js.yml still uses Node 20, but this Angular CLI requires Node >=22.22.3 (or supported newer majors). The current CI run reaches this example and exits with code 3: Node.js version v20.20.2 detected. The Angular CLI requires a minimum Node.js version of v22.22.3 or v24.15.0 or v26.0.0. I reproduced the same rejection locally under Node 20. Please update the example verification environment alongside these dependencies, or select an Angular version compatible with it.

CI log: https://github.com/thesysdev/openui/actions/runs/34600251868/job/105165209814

Comment thread packages/angular-lang/package.json Outdated
Comment on lines +8 to +11
"files": [
"dist",
"README.md"
],

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] Route the actual release to the generated Angular package

ng-packagr writes to the repository-level dist/angular-lang directory, but this files list selects a package-local dist directory, and there is no publishConfig.directory redirect. The repository's Changesets release publishes workspace package directories. After a successful build, running pnpm pack from packages/angular-lang produced a tarball containing only package.json and README.md, with no runtime or declarations. The new pack:check passes because it explicitly packs a different directory. Please wire normal publishing to the generated package, or place the artifacts and entry-point metadata in the workspace package, and validate that same release path.

Comment on lines +101 to +103
this.destroyComponentRefs(this.componentRefs);
this.componentRefs = nextComponentRefs;
this.hostElement.nativeElement.replaceChildren();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Preserve component identity when reactive values update

For a tree with dynamic props, each store update produces a new evaluated node, and this path destroys all existing component instances and replaces their DOM. A regression test rendering root = Input($name) and updating $name from the input event confirmed that a single keystroke disconnects the original input and loses focus. This prevents continuous typing and also resets component-local state when responses update. Reconcile existing components by node identity and update their inputs instead of rebuilding the entire subtree on each change.

Comment thread pnpm-workspace.yaml Outdated
typescript: "^5.9.3"
rxjs: "^7.8.2"
tslib: "^2.8.1"
typescript: "^6.0.3"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Scope TypeScript 6 or migrate the existing package configurations

Upgrading the shared catalog changes the compiler used by existing packages as well as Angular. pnpm --filter @openuidev/lang-core typecheck now reports missing node:* modules, process, and NodeJS types in src/telemetry/install.ts. Running TypeScript 5.9.3 against the exact same unchanged lang-core source/configuration removes those Node-type errors; its separate type-mismatch error is pre-existing. Please give Angular its own compiler version, or update and verify the affected workspace tsconfigs as part of this upgrade.

"baseUrl": ".",
"ignoreDeprecations": "6.0",
"paths": {
"@openuidev/angular-lang": ["../../../packages/angular-lang/src/public-api.ts"]

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Make the example resolve dependencies after a standalone install

This alias loads Angular package source outside the example, so imports in that source resolve from packages/angular-lang rather than the example's node_modules. Following the documented example-only install without root workspace dependencies causes ng build to fail resolving @angular/core, @angular/common, @openuidev/lang-core, zod/v4/core, and tslib. I reproduced this with the example dependencies installed and the referenced package source present. The build-examples job also installs examples independently, so this remains a blocker after the Node-version fix. Consume the built package as a declared dependency, or explicitly arrange and document the necessary workspace setup.

Comment on lines +77 to +79
isStreaming: this.openUi.isStreaming,
shouldTriggerSaveCallback: false,
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Pass the injected context when setting defaults from ngOnChanges

setDefaultValue resolves its omitted second argument by calling injectOpenUiContext(), but ngOnChanges does not run in an Angular injection context. Clicking Form state in the example reproduces NG0203 for OPENUI_CONTEXT, and the input never renders, even though initial state already supplies a value. Pass the already-injected this.openUi as the second argument so the helper does not call inject() from this lifecycle hook.

@vishxrad

vishxrad commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

I've updated this PR to keep it focused on the Angular package and addressed the two remaining runtime findings. The final diff contains packages/angular-lang, the workspace dependency/catalog and lockfile entries needed by that package, and its changeset.

Here is what changed and why:

  1. Removed the two Angular-specific scripts. Deleted scripts/prepare-angular-lang-dist.mjs and scripts/check-angular-lang-pack.mjs, and removed their package-script references. The library now builds into packages/angular-lang/dist; the manifest declares its runtime/type entry points and published files directly. Normal pnpm pack resolves the workspace/catalog dependency ranges, so a custom manifest-rewriting script is unnecessary. I verified the normal workspace pack path contains the compiled runtime, declarations, and resolvable exports. Removing the verification script does not mean skipping artifact verification.

  2. Removed the changes to build-js.yml. The broader build/Node changes are handled in a separate PR, so this package contribution should not duplicate them. To keep Angular buildable with the existing repository runtime, the Angular package declares devEngines.runtime for Node 24.15.0. The repository's pinned pnpm provisions that runtime for this package's commands. I verified a frozen install launched under Node 20.19.0, with lang-core still using Node 20.19.0 and Angular using Node 24.15.0. TypeScript 6 also remains package-local.

  3. Undid the change to release.yml. Restored the release workflow's original Node setup instead of changing the runtime for every package because of Angular. I also removed the corresponding Node bump from the legacy publish-npm-package.yml, leaving all workflow changes out of this PR. The package's development runtime and native package-local build output provide what this contribution needs without modifying the shared release flow.

  4. Removed the docs changes. Removed docs/research/angular-lang-parity-plan.md. I will add the docs in a separate PR, because this PR needs to be scoped to the package. The package README remains with the package and explains its public API, build/runtime setup, and the corrected reactive helper usage.

  5. Removed the example and its repository wiring. Removed examples/app-frameworks/angular along with its listing/index entries, the Angular-specific starter-manager behavior, and the root examples:prepare/installation changes that existed to support it. I will add the example in a separate PR, because this PR needs to be scoped to the package. The local chat used for testing is not included in this PR.

  6. Fixed both runtime issues from the review.

    • Reactive field reads: store notifications now update an Angular signal, and getFieldValue() registers that signal dependency when called from a template or computed(). A field display therefore updates even when the parsed OpenUI node and its props are unchanged. Existing component instances, input focus, and local edits are preserved.
    • Reactive streaming/query-loading helpers: injectIsStreaming() and injectIsQueryLoading() now return Signal<boolean> rather than construction-time boolean snapshots. Consumers capture the signal once and call it, for example isStreaming(). The full context retains boolean properties through signal-backed getters, so context.isStreaming and context.isQueryLoading continue to work and also update reactive consumers. The package README documents the distinction.

Validation:

  • Angular package CI passed: type checking, test type checking, all 31 tests, lint, and formatting. Six new regression cases cover direct/nested/form-scoped readers, preservation of input state and focus, repeated streaming transitions, and successful/failed queries followed by refetches.
  • All 109 lang-core tests passed.
  • Package build, normal pnpm pack, archive entry-point/dependency checks, and installation into an isolated Angular consumer passed.
  • A frozen install with prepare builds passed from Node 20.19.0 using the package-local Angular runtime.
  • publint reported only its repository-URL metadata suggestion. attw reported the expected CommonJS-to-ESM limitation; ESM and bundler resolution passed.
  • Browser regression checks against the packed artifact confirmed that field values update without remounting the component and both status helpers return to false when their work finishes.
  • A live-model browser smoke test rendered a chart and a history-aware follow-up through the packed renderer. Both requests completed with zero parser errors, the browser reported no warnings/errors, and the mobile view had no document overflow. The temporary verification app and backend were stopped afterward; neither is part of the PR.

Remote checks after pushing: GitHub Actions reports action_required for Build JS, Build Examples, and Changeset check (fork-workflow approval is pending). Vercel reports “Authorization required to deploy.” The passing results above are the local checks; remote CI/deployment has not completed.

@vishxrad

Copy link
Copy Markdown
Contributor

Added Angular to the existing fixed Lang release group in .changeset/config.json and aligned its package manifest to 0.3.0, the current version of lang-core, react-lang, svelte-lang, and vue-lang. This keeps the Angular adapter on the same release line as the other framework adapters.

The changeset remains patch, following this repository’s documented 0.x policy: compatible changes use patch; breaking changes use minor. I also updated its description to explain the group membership.

Verified with the installed Changesets release planner: this changeset alone schedules all five Lang packages for 0.3.1, which would be Angular’s first published version. Other pending changesets can affect the final release version. Fixed groups release every member together, even when some members have no source changes.

Validation passed: changeset status, an exact release-plan check, internal peer-window verification, Prettier, and git diff --check. This follow-up changes release metadata only.

@vishxrad

Copy link
Copy Markdown
Contributor

Removed .changeset/angular-scaffold-review-fixes.md as requested. Angular remains at version 0.3.0 and stays in the fixed Lang release group.

This supersedes the earlier 0.3.1 release-plan explanation: this PR now contains no changeset requesting a version bump, so it does not schedule new versions of the existing Lang packages. Future changesets affecting the group will version Angular alongside the other members.

Verified the manifest version, group membership, valid Changesets configuration, an empty release plan, internal peer windows, and git diff --check. changeset status exits 1 because package changes have no changeset; the repository’s separate informational changeset check reports that warning and exits successfully. No workflow filters were changed in this follow-up.

@vishxrad

Copy link
Copy Markdown
Contributor

Pushed a focused test and dependency cleanup.

  • Reduced 31 tests to 29: replaced the three library-wrapper tests with one Angular component-registration/reference smoke test. Removed pass-through metadata/schema/root-validation assertions from the adapter suite, where the underlying behavior belongs to lang-core. Kept the important Angular-specific coverage: static field readers and status signals, repeated query success/failure and refetch, input focus/local-state preservation, nested rendering, component reuse/destruction, state/action outputs, mutations, validation state, and render-error recovery.
  • Removed @angular/platform-browser-dynamic: switched the shared setup to BrowserTestingModule and platformBrowserTesting from @angular/platform-browser/testing, with an explicit @angular/compiler import for test compilation.
  • Removed zone.js: the tests now run with Angular’s zoneless behavior. Removed both dependencies from the package manifest and workspace catalog, and removed their resolved packages from the lockfile. Angular’s upstream metadata still mentions Zone.js as an optional peer, but this workspace no longer resolves or installs it for Angular.
  • Kept necessary tooling: Angular core/common, the compiler and compiler CLI, browser-testing support, ng-packagr, RxJS, tslib, jsdom, TypeScript, and Vitest still have specific runtime/build/test uses. The package remains at 0.3.0, stays in the Lang fixed group, and has no changeset requesting a version bump.

Validation passed: all 29 Angular tests, library/test type checking, lint, formatting, frozen workspace installation, peer-window verification, git diff --check, and the package build/pack checks. The archive contains valid runtime/type exports and no tests or removed dependencies. The rebuilt runtime JavaScript and declarations are byte-for-byte identical to the previous build. The lockfile adds/upgrades no package versions and removes exactly the two unwanted packages.

@vishxrad
vishxrad merged commit 51a337c into thesysdev:main Sep 21, 2026
5 checks passed

This branch was successfully deployed

1 active deployment
Preview — e0bf4f05 Deployed Sep 21, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants