Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

generate input/output bindings to the GridJS package #182

Merged
merged 4 commits into from
Feb 16, 2024

Conversation

joeskeen
Copy link
Contributor

@joeskeen joeskeen commented Feb 2, 2024

It all started when I saw this comment:

 // TODO: auto generate Inputs/Output to easily sync with grid-js main package

I spent several hours trying to figure out how to accomplish this, and after looking at the implementation of https://github.com/microsoft/ts-gyb, I tried writing my own script for transforming the GridJS TypeScript interfaces into something we could use in this library for input/output bindings on the Angular component.

The script that does the heavy lifting is at scripts/update-bindings.mjs and is executed by calling nx update-bindings gridjs-angular. The script uses the TypeScript package to get type information from node_modules/gridjs/dist/src/events.d.ts (where GridEvents is defined) and node_modules/gridjs/dist/src/config.d.ts (where Config is defined), collecting the data we need into an object. That object is then passed to MustacheJS which transforms the data into a TypeScript class. I specifically didn't want the main library component file to be auto-generated (as it's more painful to make changes to a template), so I tried to keep the generated code to bindings only, and members that require the names of all the properties from either Config or GridEvents. Thus the output file is an abstract class with all the @Input() and @Output() decorators (the boilerplate). Then the main export of the library, GridJsAngularComponent, extends the base class and handles any other custom things needed for the Angular wrapper.

I also made sure that the generated code uses Angular Signals, which should help with at least near-term future-proofing of the library.

Finally, I cleaned up some things that didn't need to be there (like the empty routes file and accompanying router-outlet) and spruced up the Readme. I also expanded the demo to use more of GridJS's features to make it a better sample of the library's usage.

I'm eager to do some unit testing, but this PR is already getting pretty large and disruptive so I'd prefer to add those in a separate PR.

I tried to maintain backwards compatibility by adding that alias for the gridLoad event (not sure if it works due to this GridJS issue, but at least the rowClick/cellClick events work so I assume it should be OK).

Please, provide as much feedback as necessary. Hoping this moves the library forward in a positive way!

@joeskeen
Copy link
Contributor Author

joeskeen commented Feb 2, 2024

One more note: while testing I saw some console errors, but it doesn't seem like it's related to anything in this library (see grid-js/gridjs#1291)

@joeskeen
Copy link
Contributor Author

joeskeen commented Feb 2, 2024

Also, noticed that the nx format:check command is failing, but I don't agree with how it wants to fix some things:
image
Not sure if this is just some workspace formatting settings that need to be changed, but I'm unsure what to do about it.

loosen peer dependency restrictions
@salamaashoush salamaashoush merged commit ebe676b into grid-js:master Feb 16, 2024
1 check failed
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