Merge pull request #5 from ara-framework/refactor/support-aot

refactor: remove bootstrapping responsability to library

Author: marconi1992

README.md

@@ -4,23 +4,162 @@
 
 On the server, wraps the component in a function to render it to a HTML string given its props.
 
-On the client, calling this function with your component scans the DOM for any server-side rendered instances of it. It then resumes those components using the server-specified props.
+On the client, uses the `HypernovaModuleFactory` to provide the metadata necessary to bootstrap the components.
+
+**Note**: `renderAngular` and `mountComponent` are not supported anymore. They were removed to move the boostrapping responsability to the library consumer in order to support AOT and JIT compiling.
 
 ## Install
 
 ```sh
 npm install hypernova-angular
 ```
 
-## Usage
+## Server Usage
 
-Here's how to use it in your browser module:
+Uses `renderAngular` to return hypernova bindings.
 
 ```ts
-import { renderAngular } from 'hypernova-angular'
+import { renderAngular } from 'hypernova-angular/server'
 
 import { ExampleModule } from './components/example/example.module'
 import { ExampleComponent } from './components/example/example.component'
 
-renderAngular('Example', ExampleComponent, ExampleModule)
+hypernova({
+  getComponent (name) {
+    if (name === 'Example') {
+      return renderAngular(name, ExampleComponent, ExampleModule)
+    }
+  }
+}
+```
+
+## Browser Usage
+
+You can use [Ara CLI](https://github.com/ara-framework/ara-cli) to create a service (Nova) with everything ready to start.
+
+```bash
+ara new:nova -t angular
+```
+
+Or, you can use the following configurations.
+
+### App Module
+
+The following code define a `AppModule` responsible of bootstrapping the Angular component in Hypernova placeholder.
+
+- `Hypernova.Name`: Name of the component to bootstrap.
+- `Hypernova.Node`: The placeholder where the component will be rendered.
+
+```ts
+import { NgModule, Inject } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { ExampleModule } from './components/example/example.module'
+import { ExampleComponent } from './components/example/example.component';
+
+const APP_ID = 'hypernova';
+
+const components = {
+  'Example': ExampleComponent
+}
+
+@NgModule({
+  imports: [
+    ExampleModule,
+    BrowserModule.withServerTransition({ appId: APP_ID }),
+  ],
+  entryComponents: [ExampleComponent]
+})
+export class AppModule {
+  constructor (
+    @Inject('Hypernova.Name') private name: string,
+    @Inject('Hypernova.Node') private node: HTMLElement
+    ){}
+
+  ngDoBootstrap(app) {
+    const Component = components[this.name]
+    if (Component) {
+      return app.bootstrap(Component, this.node)
+    }
+  };
+}
+```
+
+Use the `components` dictionary to support more components.
+
+```ts
+const components = {
+  [Hypernova.Name]: AngularComponent
+}
+```
+
+### Browser JIT
+
+`browser.main.ts`
+```ts
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+import { load, loadById, HypernovaModuleFactory } from 'hypernova-angular';
+
+import { CompilerFactory, Compiler } from '@angular/core';
+
+const platform = platformBrowserDynamic();
+
+// Compile module (JIT)
+const compilerFactory: CompilerFactory = platform.injector.get(CompilerFactory);
+
+const compiler: Compiler = compilerFactory.createCompiler([])
+
+const moduleFactory = compiler.compileModuleSync(AppModule);
+
+const render = (name: string, placeholder: any) => {
+
+  // Wrap module factory to provide necessary metadata to boostrap it.
+  const hypernovaModuleFactory = new HypernovaModuleFactory(moduleFactory, name, placeholder);
+
+  platform.bootstrapModuleFactory(hypernovaModuleFactory);
+}
+
+// Nova Bridge support
+document.addEventListener('NovaMount', (event) => {
+  const { name, id } = (<CustomEvent>event).detail;
+
+  const placeholder = loadById(name, id);
+
+  if (placeholder) {
+    render(name, placeholder);
+  }
+})
+
+// Render in placeholders rendered by Hypernova Server
+load('Example').forEach(render.bind(this, 'Example'));
+```
+
+### Browser AOT
+
+`browser.aot.main.ts`
+```ts
+import { platformBrowser } from '@angular/platform-browser';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+import { load, loadById, HypernovaModuleFactory } from 'hypernova-angular';
+
+enableProdMode();
+
+const render = (name: string, placeholder: any) => {
+  const hypernovaModuleFactory = new HypernovaModuleFactory(AppModuleNgFactory, name, placeholder);
+  platformBrowser().bootstrapModuleFactory(hypernovaModuleFactory);
+}
+
+document.addEventListener('NovaMount', (event) => {
+  const { name, id } = (<CustomEvent>event).detail;
+
+  const placeholder = loadById(name, id);
+
+  if (placeholder) {
+    render(name, placeholder);
+  }
+})
+
+load('Example').forEach(render.bind(this, 'Example'));
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hypernova-angular",
-  "version": "1.0.0",
+  "version": "2.0.0-alpha.0",
   "description": "Angular Bindings for Hypernova",
   "main": "lib/index.js",
   "author": "Felipe Guizar Diaz <felipegaiacharly@gmail.com>",

src/hypernova.module.factory.js

@@ -0,0 +1,32 @@
+import { NgModuleFactory, ReflectiveInjector } from '@angular/core';
+
+export const HYPERNOVA_DATA = 'Hypernova.Data';
+
+export class HypernovaModuleFactory extends NgModuleFactory {
+  constructor(moduleFactory, name, placeholder) {
+    super();
+    this.name = name;
+    this.placeholder = placeholder;
+    this.moduleFactory = moduleFactory;
+    this.moduleType = moduleFactory.moduleType;
+
+    this.create = (parentInjector) => {
+      const newInjector = ReflectiveInjector.resolveAndCreate([
+        {
+          provide: 'Hypernova.Data',
+          useValue: this.placeholder.data,
+        },
+        {
+          provide: 'Hypernova.Name',
+          useValue: this.name,
+        },
+        {
+          provide: 'Hypernova.Node',
+          useValue: this.placeholder.node,
+        },
+      ], parentInjector);
+
+      return this.moduleFactory.create(newInjector);
+    };
+  }
+}

src/index.js

@@ -1,14 +1,9 @@
-import hypernova, { load } from 'hypernova';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { NgModule } from '@angular/core';
-
 import { findNode, getData } from 'nova-helpers';
 
 export { load } from 'hypernova';
 
+export { HypernovaModuleFactory, HYPERNOVA_DATA } from './hypernova.module.factory';
+
 export const loadById = (name, id) => {
   const node = findNode(name, id);
   const data = getData(name, id);
@@ -22,52 +17,3 @@ export const loadById = (name, id) => {
 
   return null;
 };
-
-const APP_ID = 'hypernova';
-
-export const HYPERNOVA_DATA = 'Hypernova.Data';
-
-const getBrowserAppModule = (Component, Module, node, propsData) => {
-  function AppModule() {
-    this.ngDoBootstrap = (app) => {
-      app.bootstrap(Component, node);
-    };
-  }
-  return NgModule({
-    imports: [
-      Module,
-      BrowserModule.withServerTransition({ appId: APP_ID }),
-    ],
-    entryComponents: [Component],
-    providers: [
-      {
-        provide: HYPERNOVA_DATA,
-        useValue: propsData,
-      },
-    ],
-  })(AppModule);
-};
-
-export const mountComponent = (Component, Module, node, propsData) => {
-  const BrowserAppModule = getBrowserAppModule(Component, Module, node, propsData);
-
-  platformBrowserDynamic().bootstrapModule(BrowserAppModule);
-};
-
-export const renderAngular = (name, Component, Module) => hypernova({
-  server() {
-    throw new Error('Use hypernova-angular/server instead');
-  },
-
-  client() {
-    const payloads = load(name);
-    if (payloads) {
-      payloads.forEach((payload) => {
-        const { node, data: propsData } = payload;
-
-        mountComponent(Component, Module, node, propsData);
-      });
-    }
-    return Component;
-  },
-});