Revert "generate input/output bindings to the GridJS package"

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": ["node_modules/gridjs/dist/theme/mermaid.min.css"],
+        "styles": ["apps/demo/src/styles.css"],
         "scripts": []
       },
       "configurations": {

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

@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+<gridjs-angular [data]="data" [columns]="columns"></gridjs-angular>

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

@@ -1,38 +1,19 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { GridJsAngularComponent } from 'gridjs-angular';
-import { faker } from '@faker-js/faker';
-import { TData } from 'gridjs/dist/src/types';
+import 'gridjs/dist/theme/mermaid.css';
 
 @Component({
-  selector: 'gridjs-angular-root',
   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>`,
+  imports: [GridJsAngularComponent, RouterModule],
+  selector: 'gridjs-angular-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
 })
 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: TData = new Array(20)
-    .fill(undefined)
-    .map(() => [
-      faker.person.fullName(),
-      faker.internet.email(),
-      faker.phone.number(),
-    ]);
+  data = [
+    ['John', '[email protected]', '(353) 01 222 3333'],
+    ['Mark', '[email protected]', '(01) 22 888 4444'],
+  ];
 }

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

@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(appRoutes)],
+};

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

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];

apps/demo/src/main.ts

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

apps/demo/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package.json

@@ -32,7 +32,6 @@
     "@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",
@@ -50,15 +49,13 @@
     "@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",

packages/gridjs-angular/README.md

@@ -2,9 +2,6 @@
 
 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
@@ -30,7 +27,7 @@ In your component template
 
 ```ts
 import { Component } from '@angular/core';
-import { Config } from 'gridjs';
+import { UserConfig } from 'gridjs';
 
 @Component({
   template: `
@@ -44,7 +41,7 @@ import { Config } from 'gridjs';
   `
 })
 class ExampleComponent {
-  public gridConfig: Config = {
+  public gridConfig: UserConfig = {
     columns: ['Name', 'Email', 'Phone Number'],
     data: [
       ['John', '[email protected]', '(353) 01 222 3333'],
@@ -73,10 +70,13 @@ class ExampleComponent {
 }
 ```
 
-Finally don't forget to add gridjs theme to your `angular.json` file, or import it some other way.
+Finally don't forget to add gridjs theme in your index.html
 
-```json
-styles: ["node_modules/gridjs/dist/theme/mermaid.min.css"]
+```html
+<link
+  href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
+  rel="stylesheet"
+/>
 ```
 
 ## Inputs
@@ -89,7 +89,7 @@ styles: ["node_modules/gridjs/dist/theme/mermaid.min.css"]
 
 ## Outputs
 
-- 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)
+- 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)
 
 ### Can I Grid.js rendering helpers? Yes
 
@@ -114,19 +114,4 @@ styles: ["node_modules/gridjs/dist/theme/mermaid.min.css"]
   }
 ```
 
-### 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.
+### Can I use Angular components in plugins, formatters, etc? Not yet

packages/gridjs-angular/package.json

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

packages/gridjs-angular/project.json

@@ -31,13 +31,6 @@
     },
     "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"
-      }
     }
   }
 }

packages/gridjs-angular/src/index.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';

packages/gridjs-angular/src/lib/constants.ts

@@ -0,0 +1,35 @@
+import type { Config } from 'gridjs';
+import { GridEvents } from 'gridjs/dist/src/events';
+
+export const GRID_JS_EVENTS: (keyof GridEvents)[] = [
+  'beforeLoad',
+  'cellClick',
+  'load',
+  'rowClick',
+  'ready',
+];
+
+export const GRID_JS_PROPS: (keyof Config)[] = [
+  'eventEmitter',
+  'plugin',
+  'data',
+  'server',
+  'header',
+  'from',
+  'storage',
+  'pipeline',
+  'autoWidth',
+  'width',
+  'height',
+  'translator',
+  'style',
+  'className',
+  'fixedHeader',
+  'columns',
+  'search',
+  'pagination',
+  'sort',
+  'language',
+  'plugins',
+  'processingThrottleMs',
+];