build: generate example routes

.github/workflows/test_and_deploy.yml

@@ -29,6 +29,9 @@ jobs:
       - name: Install
         run: npm ci
 
+      - name: Verify generated routes
+        run: npm run build:routes && git diff --exit-code
+
       - name: Build and package library
         run: npm run package
 

.prettierignore

@@ -7,6 +7,10 @@ tmp
 playwright/snapshots
 CHANGELOG.md
 
+# Generated files
+src/app/app.routes.ts
+src/app/app.web-components.ts
+
 # Skills managed by skills.sh
 .agents/skills/playwright-cli
 .agents/skills/gh-stack

angular.json

@@ -19,6 +19,14 @@
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
+        "build-routes": {
+          "builder": "@ngx-datatable/example-routes-builder:example-routes",
+          "options": {
+            "sourceRoot": "src/app",
+            "routesFile": "src/app/app.routes.ts",
+            "webComponentsFile": "src/app/app.web-components.ts"
+          }
+        },
         "build": {
           "builder": "@angular/build:application",
           "options": {
@@ -99,6 +107,20 @@
         }
       }
     },
+    "example-routes-builder": {
+      "projectType": "application",
+      "root": "tools/example-routes-builder",
+      "sourceRoot": "tools/example-routes-builder",
+      "architect": {
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["tools/example-routes-builder/**/*.mts"],
+            "eslintConfig": "tools/example-routes-builder/eslint.config.mjs"
+          }
+        }
+      }
+    },
     "ngx-datatable-lib": {
       "projectType": "library",
       "root": "projects/ngx-datatable",

docs/introduction/column-modes.md

@@ -7,7 +7,7 @@ to the columns. The table comes with 3 modes; `standard`, `flex`, `force`.
 
 Columns are distributed given the width's defined in the column options.
 
-{{ datatable_example('src/app/columns/fixed-column.component.ts', 'standard-column', '400px') }}
+{{ datatable_example('src/app/columns/fixed-column.component.ts', 'fixed-column', '400px') }}
 
 ## Flex
 

eslint.config.mjs

@@ -11,7 +11,7 @@ const __dirname = path.dirname(__filename);
 
 export const tsConfig = typescriptEslint.config({
   extends: [...angularTypescriptConfig],
-  files: ['**/*.ts'],
+  files: ['**/*.{ts,mts}'],
   languageOptions: {
     parserOptions: {
       project: ['tsconfig.app.json'],

package.json

@@ -15,6 +15,7 @@
     "start": "ng serve",
     "start:prod": "http-server dist/ngx-datatable-examples -s -p 4200 -a 127.0.0.1",
     "build": "ng build",
+    "build:routes": "tsc -p tools/example-routes-builder/tsconfig.json && ng run ngx-datatable:build-routes",
     "build:prod": "ng build --configuration production",
     "build:web-components": "ng build --configuration web-components",
     "format": "prettier --write .",
@@ -37,6 +38,9 @@
     "package": "npm run build:lib:prod && npm run copy-files && npm run build:css"
   },
   "private": true,
+  "workspaces": [
+    "tools/example-routes-builder"
+  ],
   "overrides": {
     "@microsoft/api-extractor": {
       "typescript": "6.0.3"