Basic bindings

Author: marconi1992

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "airbnb"
+  ]
+}

.editorconfig

@@ -0,0 +1,3 @@
+[*]
+indent_size = 2
+indent_style = space

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+example
+lib

.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "airbnb-base"
+  ],
+  "rules": {
+    "import/no-unresolved": 0,
+    "import/prefer-default-export": 0
+  }
+}

.gitignore

@@ -0,0 +1,48 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+TODO
+coverage
+lib
+
+# Only apps should have lockfiles
+npm-shrinkwrap.json
+yarn.lock
+package-lock.json
+© 2019 GitHub, Inc.
+Terms
+Privacy
+Security
+Status
+Help
+Contact GitHub
+Pricing
+API
+Training
+Blog
+About
+
+example

.npmignore

@@ -0,0 +1,2 @@
+node_modules
+example

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Felipe Guizar Diaz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,26 @@
+# hypernova-angular
+
+[Angular](https://angular.io/) bindings for [Hypernova](https://github.com/airbnb/hypernova).
+
+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.
+
+## Install
+
+```sh
+npm install hypernova-angular
+```
+
+## Usage
+
+Here's how to use it in your browser module:
+
+```ts
+import { renderAngular } from 'hypernova-angular'
+
+import { ExampleModule } from './components/example/example.module'
+import { ExampleComponent } from './components/example/example.component'
+
+renderAngular('Example', ExampleComponent, ExampleModule)
+```

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "hypernova-angular",
+  "version": "0.1.1",
+  "description": "Angular Bindings for Hypernova",
+  "main": "lib/index.js",
+  "author": "Felipe Guizar Diaz <felipegaiacharly@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "hypernova",
+    "ssr",
+    "isomorphic"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:marconi1992/hypernova-angular.git"
+  },
+  "scripts": {
+    "prepublish": "npm run build",
+    "lint": "eslint src",
+    "build": "babel src -d lib"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-airbnb": "^2.5.3",
+    "eslint": "^5.14.1",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.16.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=5.0.0",
+    "@angular/platform-browser": ">=5.0.0",
+    "@angular/platform-server": ">=5.0.0",
+    "@angular/platform-browser-dynamic": ">=5.0.0",
+    "hypernova": "^2.5.0",
+    "rxjs": ">=5.0.0"
+  }
+}

src/index.js

@@ -0,0 +1,107 @@
+import hypernova, { serialize, load } from 'hypernova';
+import { first } from 'rxjs/operators';
+import { BrowserModule } from '@angular/platform-browser';
+import {
+  ServerModule,
+  platformDynamicServer,
+  INITIAL_CONFIG,
+  PlatformState,
+} from '@angular/platform-server';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { NgModule, ApplicationRef } from '@angular/core';
+
+const APP_ID = 'hypernova';
+
+export const HYPERNOVA_DATA = 'Hypernova.Data';
+
+const getServerAppModule = (Component, Module) => {
+  function AppModule() {
+    this.ngDoBootstrap = (app) => {
+      app.bootstrap(Component, `#${APP_ID}`);
+    };
+  }
+  return NgModule({
+    imports: [
+      Module,
+      BrowserModule,
+      ServerModule,
+    ],
+    entryComponents: [Component],
+  })(AppModule);
+};
+
+const getBrowserAppModule = (Component, Module, node) => {
+  function AppModule() {
+    this.ngDoBootstrap = (app) => {
+      app.bootstrap(Component, node);
+    };
+  }
+  return NgModule({
+    imports: [
+      Module,
+      BrowserModule.withServerTransition({ appId: APP_ID }),
+    ],
+    entryComponents: [Component],
+  })(AppModule);
+};
+
+const renderServer = (ServerAppModule, propsData) => {
+  const platform = platformDynamicServer([
+    {
+      provide: INITIAL_CONFIG,
+      useValue: {
+        document: `<div id="${APP_ID}"></div>`,
+      },
+    },
+    {
+      provide: HYPERNOVA_DATA,
+      useValue: propsData,
+    },
+  ]);
+
+  return platform.bootstrapModule(ServerAppModule)
+    .then((moduleRef) => {
+      const applicationRef = moduleRef.injector.get(ApplicationRef);
+      return applicationRef.isStable.pipe(first(isStable => isStable))
+        .toPromise()
+        .then(() => {
+          const platformState = platform.injector.get(PlatformState);
+
+          platform.destroy();
+          return platformState.getDocument().getElementById(APP_ID).serialize();
+        });
+    });
+};
+
+export const renderAngular = (name, Component, Module) => hypernova({
+  server() {
+    return async (propsData) => {
+      const ServerAppModule = getServerAppModule(Component, Module);
+
+      const html = await renderServer(ServerAppModule, propsData);
+
+      return serialize(name, html, propsData);
+    };
+  },
+
+  client() {
+    const payloads = load(name);
+    if (payloads) {
+      payloads.forEach((payload) => {
+        const { node, data: propsData } = payload;
+
+        const BrowserAppModule = getBrowserAppModule(Component, Module, node);
+
+        platformBrowserDynamic([
+          {
+            provide: HYPERNOVA_DATA,
+            useValue: propsData,
+          },
+        ]).bootstrapModule(BrowserAppModule);
+      });
+    }
+    return Component;
+  },
+});