Feat/angular lang scaffold - #1167
muhammedgider wants to merge 5 commits into
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.
2 participants
Summary
This PR adds an initial
@openuidev/angular-langpackage for rendering OpenUI Lang in Angular applications, along with an Angular example app and test coverage for the core runtime behaviors.It also fixes package distribution for
@openuidev/angular-langso the built package can be packed and installed correctly from the generateddist/angular-langoutput.Included
@openuidev/angular-langexamples/app-frameworks/angulardist/angular-lang/package.jsonpack:checkverifiesnpm pack --dry-runagainst the dist packagePackaging fix
Before this change,
@openuidev/angular-langbuilt successfully but the packed tarball did not include the generated FESM/types output because the package root and dist output layout did not align.This PR adds
scripts/prepare-angular-lang-dist.mjsand wires it into the Angular package build to make the generated dist package publish/install-safe.Verification
Ran:
pnpm --filter @openuidev/angular-lang run buildpnpm --filter @openuidev/angular-lang run pack:checkAlso verified that the produced tarball can be installed in a clean temporary project.