generate input/output bindings to the GridJS package

Author: joeskeen

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,123 @@
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { GridJsAngularComponent } from 'gridjs-angular';
-import 'gridjs/dist/theme/mermaid.css';
+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', 'john@example.com', '(353) 01 222 3333'],
-    ['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
-  ];
+  data: TData = [
+    {
+      name: 'John Doe',
+      email: 'john.doe@example.com',
+      phone_number: '555-123-4567',
+    },
+    {
+      name: 'Jane Smith',
+      email: 'jane.smith@example.com',
+      phone_number: '555-543-2109',
+    },
+    {
+      name: 'Mike Johnson',
+      email: 'm.johnson@example.com',
+      phone_number: '555-987-6543',
+    },
+    {
+      name: 'Sara Lee',
+      email: 's.lee@example.com',
+      phone_number: '555-345-6789',
+    },
+    {
+      name: 'William Brown',
+      email: 'w.brown@example.com',
+      phone_number: '555-234-5678',
+    },
+    {
+      name: 'Mary White',
+      email: 'mary.white@example.com',
+      phone_number: '555-765-4321',
+    },
+    {
+      name: 'Daniel Green',
+      email: 'd.green@example.com',
+      phone_number: '555-456-7890',
+    },
+    {
+      name: 'Emma Black',
+      email: 'emma.black@example.com',
+      phone_number: '555-876-5432',
+    },
+    {
+      name: 'James Young',
+      email: 'j.young@example.com',
+      phone_number: '555-678-9012',
+    },
+    {
+      name: 'Grace Kim',
+      email: 'grace.kim@example.com',
+      phone_number: '555-321-0987',
+    },
+    {
+      name: 'Thomas Lee',
+      email: 'thomas.lee@example.com',
+      phone_number: '555-901-2345',
+    },
+    {
+      name: 'Elizabeth Davis',
+      email: 'elizabeth.davis@example.com',
+      phone_number: '555-432-1098',
+    },
+    {
+      name: 'Michael Harris',
+      email: 'm.harris@example.com',
+      phone_number: '555-789-0123',
+    },
+    {
+      name: 'Laura Nguyen',
+      email: 'laura.nguyen@example.com',
+      phone_number: '555-234-5678',
+    },
+    {
+      name: 'Kenneth Wilson',
+      email: 'k.wilson@example.com',
+      phone_number: '555-678-9012',
+    },
+    {
+      name: 'Nancy Moore',
+      email: 'nancy.moore@example.com',
+      phone_number: '555-321-0987',
+    },
+    {
+      name: 'Andrew Taylor',
+      email: 'andrew.taylor@example.com',
+      phone_number: '555-901-2345',
+    },
+    {
+      name: 'Steven Thompson',
+      email: 's.thompson@example.com',
+      phone_number: '555-432-1098',
+    },
+  ].map((x) => [x.name, x.email, x.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

@@ -49,13 +49,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', 'john@example.com', '(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

@@ -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/main.ts

@@ -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';