Feat/angular lang scaffold - #1167
Conversation
|
@muhammedgider is attempting to deploy a commit to the thesys-devs Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
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.
| "@angular/build": "^22.1.7", | ||
| "@angular/cli": "^22.1.7", | ||
| "@angular/compiler-cli": "^22.1.5", |
There was a problem hiding this comment.
[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
| "files": [ | ||
| "dist", | ||
| "README.md" | ||
| ], |
There was a problem hiding this comment.
[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.
| this.destroyComponentRefs(this.componentRefs); | ||
| this.componentRefs = nextComponentRefs; | ||
| this.hostElement.nativeElement.replaceChildren(); |
There was a problem hiding this comment.
[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.
| typescript: "^5.9.3" | ||
| rxjs: "^7.8.2" | ||
| tslib: "^2.8.1" | ||
| typescript: "^6.0.3" |
There was a problem hiding this comment.
[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"] |
There was a problem hiding this comment.
[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.
| isStreaming: this.openUi.isStreaming, | ||
| shouldTriggerSaveCallback: false, | ||
| }); |
There was a problem hiding this comment.
[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.
|
I've updated this PR to keep it focused on the Angular package and addressed the two remaining runtime findings. The final diff contains Here is what changed and why:
Validation:
Remote checks after pushing: GitHub Actions reports |
|
Added Angular to the existing fixed Lang release group in The changeset remains Verified with the installed Changesets release planner: this changeset alone schedules all five Lang packages for Validation passed: |
|
Removed This supersedes the earlier Verified the manifest version, group membership, valid Changesets configuration, an empty release plan, internal peer windows, and |
|
Pushed a focused test and dependency cleanup.
Validation passed: all 29 Angular tests, library/test type checking, lint, formatting, frozen workspace installation, peer-window verification, |
Summary
Add
@openuidev/angular-langwith 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-packagrinto its owndist/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()andinjectIsQueryLoading()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-dynamicand unusedzone.jsdependencies 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
publint: metadata suggestion only.attw: ESM/bundler checks passed; expected CommonJS-to-ESM limitation remains.