From d14beb111a703c6682b6587b25fdd0eb650f1a05 Mon Sep 17 00:00:00 2001
From: James Scharett <jdscharett@gmail.com>
Date: Tue, 13 Aug 2019 08:35:42 +0200
Subject: [PATCH] fix: Corrects Runtime compiler error

Replaces Angular compiler with Handlerbars.
Angular currently prevents the use of its compiler
in AOT mode.  See angular issue #20156.

Closes #11
---
 package-lock.json                             | 21 ++---
 package.json                                  |  3 +-
 projects/ngx-json-schema-form/ng-package.json |  3 +-
 .../src/docs/pages/introduction.md            |  6 +-
 .../src/lib/json-schema-form.service.spec.ts  |  2 +-
 .../src/lib/json-schema-form.service.ts       | 81 +++++++++++--------
 6 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0af562f..06ba07b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3812,8 +3812,7 @@
     "commander": {
       "version": "2.20.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
-      "dev": true
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -6796,7 +6795,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
       "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
-      "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
         "optimist": "^0.6.1",
@@ -6807,8 +6805,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -9444,8 +9441,7 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "minimist-options": {
       "version": "3.0.2",
@@ -9657,8 +9653,7 @@
     "neo-async": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
-      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
-      "dev": true
+      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
     },
     "nerf-dart": {
       "version": "1.0.0",
@@ -14252,7 +14247,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
       "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "dev": true,
       "requires": {
         "minimist": "~0.0.1",
         "wordwrap": "~0.0.2"
@@ -14261,8 +14255,7 @@
         "wordwrap": {
           "version": "0.0.3",
           "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-          "dev": true
+          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
         }
       }
     },
@@ -18282,7 +18275,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz",
       "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==",
-      "dev": true,
       "requires": {
         "commander": "~2.20.0",
         "source-map": "~0.6.1"
@@ -18291,8 +18283,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
diff --git a/package.json b/package.json
index aaeae3b..b8f474e 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0-development",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --prod",
     "build": "npm run build:lib && npm run build:demo",
     "build:lib": "ng build ngx-json-schema-form",
     "build:demo": "ng build demo --prod --base-href=https://jscharett.github.io/ngx-json-schema-form/",
@@ -45,6 +45,7 @@
     "ajv": "^6.10.0",
     "brace": "^0.11.0",
     "core-js": "^2.5.4",
+    "handlebars": "^4.1.2",
     "json-schema-traverse": "^0.4.1",
     "lodash": "^4.17.14",
     "lodash-decorators": "^6.0.1",
diff --git a/projects/ngx-json-schema-form/ng-package.json b/projects/ngx-json-schema-form/ng-package.json
index f10bbb1..c99d490 100644
--- a/projects/ngx-json-schema-form/ng-package.json
+++ b/projects/ngx-json-schema-form/ng-package.json
@@ -7,7 +7,8 @@
             "ajv": "Ajv",
             "json-schema-traverse": "traverse",
             "lodash": "_",
-            "lodash-decorators": "lodashDecorators"
+            "lodash-decorators": "lodashDecorators",
+            "handlebars/dist/cjs/handlebars": "Handlebars"
         }
     }
 }
diff --git a/projects/ngx-json-schema-form/src/docs/pages/introduction.md b/projects/ngx-json-schema-form/src/docs/pages/introduction.md
index 5d3f234..a8b0aa4 100644
--- a/projects/ngx-json-schema-form/src/docs/pages/introduction.md
+++ b/projects/ngx-json-schema-form/src/docs/pages/introduction.md
@@ -184,7 +184,7 @@ There are numerous attributes that can be set on a widget which are set via the
 
 ### Button
 
-There are 4 types of buttons that jsf supports, `button`, `image`, `reset` and `submit`.  By default, these will all use the `<input>` tag for display.  However, with the exception of `image`, you can specify custom html via the `content` option.  This will result in the `<button>` being used for display and the content being inserted.  Content can contain simple angular bindings so that you can bind to various properties of the layout.  For example:
+There are 4 types of buttons that jsf supports, `button`, `image`, `reset` and `submit`.  By default, these will all use the `<input>` tag for display.  However, with the exception of `image`, you can specify custom html via the `content` option.  This will result in the `<button>` being used for display and the content being inserted.  Content can contain simple bindings so that you can bind to various properties of the layout.  For example:
 
 <div class="panel panel-primary docs">
 <div class="panel-heading panel-title">button-layout.json</div>
@@ -221,6 +221,10 @@ will result in
 
 Here you can see we are specifying that the button should contain an image via the `content` options.  The template binds to the properties of the `icon` option which results in an image tag being rendered.  The `icon` option is also used when redering a simple button of type `image`.
 
+<div class="alert alert-warning">
+Note: due to current limitation of Angular AOT compilation, use of the angular compile to transpile content strings into HTML DOM is not possible.  Recent Angular changes have restricted the inclusion of the compiler in favor of reducing the file size and load time when in AOT mode.  Therefore, Handlebars is currently being imported to handle the compilation of content string to HTML DOM.
+</div>
+
 We can also respond to events such as a `click`.  To do this, we must first bind an event handler to the jsf component
 
 
diff --git a/projects/ngx-json-schema-form/src/lib/json-schema-form.service.spec.ts b/projects/ngx-json-schema-form/src/lib/json-schema-form.service.spec.ts
index a882e2f..a82df27 100644
--- a/projects/ngx-json-schema-form/src/lib/json-schema-form.service.spec.ts
+++ b/projects/ngx-json-schema-form/src/lib/json-schema-form.service.spec.ts
@@ -31,7 +31,7 @@ describe('JsonSchemaFormService', () => {
         expect(widget.controlName).toBe('widget');
     });
 
-    it('should create a runtime component', () => {
+    it('should convert template to DOM', () => {
         const service: JsonSchemaFormService = TestBed.get(JsonSchemaFormService);
         const fragment: DocumentFragment = service.compileTemplate('<span>{{ options.title }}</span>', {title: 'hi'});
         const div = document.createElement('div');
diff --git a/projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts b/projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts
index 8e8f61d..3af8430 100644
--- a/projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts
+++ b/projects/ngx-json-schema-form/src/lib/json-schema-form.service.ts
@@ -1,8 +1,11 @@
-import { CommonModule } from '@angular/common';
-import {
-    Compiler, Component, ComponentRef, Injectable, Injector,
-    ModuleWithComponentFactories, NgModule, NgModuleRef
-} from '@angular/core';
+// import { CommonModule } from '@angular/common';
+import { Injectable } from '@angular/core';
+// import {
+//     Compiler, Component, ComponentRef, Injectable, Injector,
+//     ModuleWithComponentFactories, NgModule, NgModuleRef
+// } from '@angular/core';
+
+import Handlebars from 'handlebars/dist/cjs/handlebars';
 
 import { Widget } from './widget-library';
 
@@ -13,32 +16,32 @@ export class JsonSchemaFormService {
     private x = false;
 
     /** Creates a component with passed in template and associated context */
-    private static createComponent(template: string, context: {[key: string]: any}): any {
-        return Component({
-            selector: `runtime-component-sample`,
-            template
-        })(class RuntimeComponent {
-            options: any = context;
-        });
-    }
+    // private static createComponent(template: string, context: {[key: string]: any}): any {
+    //     return Component({
+    //         selector: `runtime-component-sample`,
+    //         template
+    //     })(class RuntimeComponent {
+    //         options: any = context;
+    //     });
+    // }
 
     /** Create a module for use with the RuntimeComponent */
-    private static createModule(component: any, compiler: Compiler): ModuleWithComponentFactories<any> {
-        @NgModule({ imports: [CommonModule], declarations: [component] })
-        class RuntimeComponentModule { }
+    // private static createModule(component: any, compiler: Compiler): ModuleWithComponentFactories<any> {
+    //     @NgModule({ imports: [CommonModule], declarations: [component] })
+    //     class RuntimeComponentModule { }
 
-        return compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
-    }
+    //     return compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
+    // }
 
     /** Get a components innerHTML as a document Fragment */
-    private static getDocumentFragment(componentRef: ComponentRef<any>): DocumentFragment {
-        const template = document.createElement('template');
-        template.innerHTML = (<HTMLElement>componentRef.location.nativeElement).innerHTML;
+    // private static getDocumentFragment(componentRef: ComponentRef<any>): DocumentFragment {
+    //     const template = document.createElement('template');
+    //     template.innerHTML = (<HTMLElement>componentRef.location.nativeElement).innerHTML;
 
-        return template.content;
-    }
+    //     return template.content;
+    // }
 
-    constructor(private readonly compiler: Compiler, private readonly injector: Injector, private readonly moduleRef: NgModuleRef<any>) {}
+    // constructor(private readonly compiler: Compiler,private readonly injector: Injector, private readonly moduleRef: NgModuleRef<any>) {}
 
     /** Sets a widgets properties upon Widget creation */
     initializeControl(control: Widget, bind = true): void {
@@ -58,15 +61,27 @@ export class JsonSchemaFormService {
      * @param context - options to use when rendering the template
      */
     compileTemplate(template: string, context: {[key: string]: any} = {}): DocumentFragment {
-        const component: any = JsonSchemaFormService.createComponent(template, context);
-        const module = JsonSchemaFormService.createModule(component, this.compiler);
-        const factory = module.componentFactories.find((f) => f.componentType === component);
-        const componentRef: ComponentRef<any> = factory.create(this.injector, undefined, undefined, this.moduleRef);
+        const templateTag = document.createElement('template');
+        templateTag.innerHTML = Handlebars.compile(template)({options: context});
 
-        componentRef.hostView.detectChanges();
-        const fragment = JsonSchemaFormService.getDocumentFragment(componentRef);
-        componentRef.destroy();
-
-        return fragment;
+        return templateTag.content;
     }
+
+    // /**
+    //  * Compiles an HTML tempalte and data into a document fragment
+    //  * @param template - HTML template to render
+    //  * @param context - options to use when rendering the template
+    //  */
+    // compileTemplate(template: string, context: {[key: string]: any} = {}): DocumentFragment {
+    //     const component: any = JsonSchemaFormService.createComponent(template, context);
+    //     const module = JsonSchemaFormService.createModule(component, this.compiler);
+    //     const factory = module.componentFactories.find((f) => f.componentType === component);
+    //     const componentRef: ComponentRef<any> = factory.create(this.injector, undefined, undefined, this.moduleRef);
+
+    //     componentRef.hostView.detectChanges();
+    //     const fragment = JsonSchemaFormService.getDocumentFragment(componentRef);
+    //     componentRef.destroy();
+
+    //     return fragment;
+    // }
 }