Merge pull request #182 from joeskeen/dynamic-bindings

generate input/output bindings to the GridJS package

Author: salamaashoush

apps/demo/project.json

@@ -16,7 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/demo/tsconfig.app.json",
         "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
-        "styles": ["apps/demo/src/styles.css"],
+        "styles": ["node_modules/gridjs/dist/theme/mermaid.min.css"],
         "scripts": []
       },
       "configurations": {

apps/demo/src/app/app.component.css

@@ -1,19 +1,38 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { GridJsAngularComponent } from 'gridjs-angular';
-import 'gridjs/dist/theme/mermaid.css';
+import { faker } from '@faker-js/faker';
+import { TData } from 'gridjs/dist/src/types';
 
 @Component({
-  standalone: true,
-  imports: [GridJsAngularComponent, RouterModule],
   selector: 'gridjs-angular-root',
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  standalone: true,
+  imports: [GridJsAngularComponent],
+  template: `<gridjs-angular
+    [data]="data"
+    [columns]="columns"
+    [sort]="true"
+    [search]="true"
+    [pagination]="true"
+    (gridLoad)="onLoad($event)"
+    (beforeLoad)="onBeforeLoad($event)"
+    (ready)="onReady($event)"
+    (cellClick)="onCellClick($event)"
+    (rowClick)="onRowClick($event)"
+  ></gridjs-angular>`,
 })
 export class AppComponent {
+  onLoad = (event: any) => console.log('Grid loaded', event);
+  onBeforeLoad = (event: any) => console.log('Before grid loaded', event);
+  onReady = (event: any) => console.log('Grid ready', event);
+  onCellClick = (event: any) => console.log('Grid cell clicked', event);
+  onRowClick = (event: any) => console.log('Grid row clicked', event);
+
   columns = ['Name', 'Email', 'Phone Number'];
-  data = [
-    ['John', '[email protected]', '(353) 01 222 3333'],
-    ['Mark', '[email protected]', '(01) 22 888 4444'],
-  ];
+  data: TData = new Array(20)
+    .fill(undefined)
+    .map(() => [
+      faker.person.fullName(),
+      faker.internet.email(),
+      faker.phone.number(),
+    ]);
 }

apps/demo/src/app/app.component.html

@@ -1,7 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
+bootstrapApplication(AppComponent).catch((err) =>
   console.error(err)
 );

apps/demo/src/app/app.component.ts

@@ -32,6 +32,7 @@
     "@angular/cli": "~17.1.2",
     "@angular/compiler-cli": "~17.1.2",
     "@angular/language-service": "~17.1.2",
+    "@faker-js/faker": "^8.4.0",
     "@nx/devkit": "17.3.1",
     "@nx/eslint": "17.3.1",
     "@nx/eslint-plugin": "17.3.1",
@@ -49,13 +50,15 @@
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.4.17",
+    "change-case": "^5.4.2",
     "eslint": "~8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^0.22.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-angular": "~14.0.0",
     "jsonc-eslint-parser": "^2.4.0",
+    "mustache": "^4.2.0",
     "ng-packagr": "~17.1.2",
     "nx": "17.3.1",
     "postcss": "^8.4.33",

apps/demo/src/app/app.config.ts

@@ -2,6 +2,9 @@
 
 Angular wrapper for [Grid.js](https://github.com/grid-js/gridjs)
 
+[![gridjs-angular repository on GitHub](https://img.shields.io/badge/github-gridjs--angular-green?logo=github&link=https%3A%2F%2Fgithub.com%2Fgrid-js%2Fgridjs-angular)](https://github.com/grid-js/gridjs-angular)
+![GridJS peer Dependency Version](https://img.shields.io/npm/dependency-version/gridjs-angular/peer/gridjs)
+
 ## Install
 
 ```bash
@@ -27,7 +30,7 @@ In your component template
 
 ```ts
 import { Component } from '@angular/core';
-import { UserConfig } from 'gridjs';
+import { Config } from 'gridjs';
 
 @Component({
   template: `
@@ -41,7 +44,7 @@ import { UserConfig } from 'gridjs';
   `
 })
 class ExampleComponent {
-  public gridConfig: UserConfig = {
+  public gridConfig: Config = {
     columns: ['Name', 'Email', 'Phone Number'],
     data: [
       ['John', '[email protected]', '(353) 01 222 3333'],
@@ -70,13 +73,10 @@ class ExampleComponent {
 }
 ```
 
-Finally don't forget to add gridjs theme in your index.html
+Finally don't forget to add gridjs theme to your `angular.json` file, or import it some other way.
 
-```html
-<link
-  href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
-  rel="stylesheet"
-/>
+```json
+styles: ["node_modules/gridjs/dist/theme/mermaid.min.css"]
 ```
 
 ## Inputs
@@ -89,7 +89,7 @@ Finally don't forget to add gridjs theme in your index.html
 
 ## Outputs
 
-- You can pass all Grid.js events as outputs with a little difference `load` event renamed to `beforeLoad`. See [Grid.js Events](https://gridjs.io/docs/examples/event-handler)
+- You can bind to all Grid.js events as outputs. Additionally, the `load` event can also be accessed via `gridLoad` (to avoid conflict with the native DOM `load` event). See [Grid.js Events](https://gridjs.io/docs/examples/event-handler)
 
 ### Can I Grid.js rendering helpers? Yes
 
@@ -114,4 +114,19 @@ Finally don't forget to add gridjs theme in your index.html
   }
 ```
 
-### Can I use Angular components in plugins, formatters, etc? Not yet
+### Can I use Angular template syntax in plugins, formatters, etc?
+
+Not currently.
+
+You can't use Angular template syntax in Grid.js plugins, formatters, etc. because they cannot be connected to Angular's change detection system. You can use `h` function or `html` function to create custom HTML for your grid.
+
+## Development
+
+The `gridjs-angular` repository is a monorepo that uses [Nx](https://nx.dev) and [pnpm](https://pnpm.io/).
+
+### Useful commands
+
+- `pnpm install` - Install all dependencies
+- `nx serve demo` - Run demo app
+- `nx migrate latest` - Update Nx to the latest version, and upgrade all packages from package.json to their latest version
+- `nx update-bindings gridjs-angular` - Update the input and output bindings from GridJS to the Angular component. This command should be run after updating the GridJS version.

apps/demo/src/app/app.routes.ts

@@ -14,8 +14,8 @@
   "repository": "https://github.com/grid-js/gridjs-angular",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^17.1.2",
-    "@angular/core": "^17.1.2",
+    "@angular/common": ">=17",
+    "@angular/core": ">=17",
     "gridjs": "^6.1.1"
   },
   "dependencies": {

apps/demo/src/main.ts

@@ -31,6 +31,13 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint"
+    },
+    "update-bindings": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/packages/gridjs-angular/src/lib/gridjs-binding-base.ts"],
+      "options": {
+        "command": "node scripts/update-bindings.mjs"
+      }
     }
   }
 }

apps/demo/src/styles.css

@@ -1,2 +1,2 @@
-export * from './lib/constants';
 export * from './lib/gridjs-angular.component';
+export { GRID_EVENTS as GRID_JS_EVENTS } from './lib/gridjs-binding-base';