feat: generate Angular components from JSON schema

README.md

@@ -1,3 +1,25 @@
 # angular-load-dynamic-components
 
-[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/angular-load-dynamic-components)
+## JSON Schema form component generator
+
+This repository now includes a NestJS-based CLI utility that converts a JSON Schema description of a form into an Angular component written with Angular Material controls. The generator creates two files: `result.component.ts` and `result.component.html`.
+
+### Usage
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Provide a JSON Schema file (an example is available at `src/schema-generator/example.schema.json`).
+
+3. Run the generator, passing the schema path and an optional output directory:
+
+   ```bash
+   npm run schema:generate -- src/schema-generator/example.schema.json src/app/generated
+   ```
+
+   The command above will create `result.component.ts` and `result.component.html` inside `src/app/generated`.
+
+Both generated files are ready to be integrated into an Angular module that imports the necessary Angular Material and ReactiveForms modules.

package.json

@@ -3,25 +3,28 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "rxjs": "6.5.3",
-    "tslib": "1.10.0",
-    "core-js": "2.6.11",
-    "zone.js": "0.9.1",
-    "jasmine-core": "2.99.1",
-    "@angular/core": "8.2.14",
-    "@angular/forms": "8.2.14",
+    "@angular/animations": "8.2.14",
     "@angular/common": "8.2.14",
-    "@angular/router": "8.2.14",
-    "jasmine-marbles": "0.6.0",
     "@angular/compiler": "8.2.14",
-    "web-animations-js": "2.3.2",
-    "@angular/animations": "8.2.14",
+    "@angular/core": "8.2.14",
+    "@angular/forms": "8.2.14",
     "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/router": "8.2.14",
+    "@nestjs/common": "^7.6.18",
+    "@nestjs/core": "^7.6.18",
     "angular-in-memory-web-api": "0.8.0",
-    "@angular/platform-browser-dynamic": "8.2.14"
+    "core-js": "2.6.11",
+    "jasmine-core": "2.99.1",
+    "jasmine-marbles": "0.6.0",
+    "reflect-metadata": "^0.1.13",
+    "rxjs": "6.5.3",
+    "tslib": "1.10.0",
+    "zone.js": "0.9.1"
   },
   "scripts": {
     "ng": "ng",
+    "schema:generate": "ts-node src/schema-generator/main.ts",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",

src/schema-generator/example.schema.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "User form",
+  "description": "Collect base information about the user",
+  "type": "object",
+  "required": ["firstName", "email", "acceptTerms"],
+  "properties": {
+    "firstName": {
+      "type": "string",
+      "title": "First name",
+      "minLength": 2
+    },
+    "age": {
+      "type": "number",
+      "title": "Age",
+      "minimum": 0
+    },
+    "email": {
+      "type": "string",
+      "title": "Email"
+    },
+    "favoriteColor": {
+      "type": "string",
+      "title": "Favorite color",
+      "enum": ["Red", "Green", "Blue"]
+    },
+    "birthday": {
+      "type": "string",
+      "format": "date",
+      "title": "Birthday"
+    },
+    "acceptTerms": {
+      "type": "boolean",
+      "title": "I accept the terms and conditions"
+    }
+  }
+}

src/schema-generator/main.ts

@@ -0,0 +1,24 @@
+import 'reflect-metadata';
+import { Logger } from '@nestjs/common';
+import { NestFactory } from '@nestjs/core';
+import { SchemaGeneratorModule } from './schema-generator.module';
+import { SchemaGeneratorService } from './schema-generator.service';
+
+async function bootstrap() {
+  const appContext = await NestFactory.createApplicationContext(SchemaGeneratorModule, {
+    logger: ['error', 'warn'],
+  });
+
+  try {
+    const service = appContext.get(SchemaGeneratorService);
+    await service.run(process.argv.slice(2));
+    Logger.log('Angular component files were generated successfully.', 'SchemaGenerator');
+  } catch (error) {
+    Logger.error(error instanceof Error ? error.message : error);
+    process.exitCode = 1;
+  } finally {
+    await appContext.close();
+  }
+}
+
+bootstrap();

src/schema-generator/schema-generator.module.ts

@@ -0,0 +1,8 @@
+import { Module } from '@nestjs/common';
+import { SchemaGeneratorService } from './schema-generator.service';
+
+@Module({
+  providers: [SchemaGeneratorService],
+  exports: [SchemaGeneratorService],
+})
+export class SchemaGeneratorModule {}