feat(module-loader): use standard package entry for node module loader (

#203)

There is also a new demo for the commonjs module loader.

jest.config.js

@@ -17,7 +17,8 @@ module.exports = {
   moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
   moduleNameMapper: {
     '^@feature-hub/([^/]+)$': '<rootDir>/packages/$1/src/index.ts',
-    '^@feature-hub/([^/]+)/node$': '<rootDir>/packages/$1/src/node.ts'
+    '^@feature-hub/module-loader/lib/node$':
+      '<rootDir>/packages/module-loader/src/node.ts'
   },
   modulePathIgnorePatterns: ['/lib'],
   setupTestFrameworkScriptFile: '<rootDir>/scripts/setup-test-framework.js',

packages/demos/README.md

@@ -19,6 +19,10 @@ Now run one of the following demos:
 yarn watch:demo amd-module-loader
 ```
 
+```sh
+yarn watch:demo commonjs-module-loader
+```
+
 ```sh
 yarn watch:demo history-service
 ```

packages/demos/src/amd-module-loader/index.test.ts

@@ -16,7 +16,7 @@ describe('integration test: "amd module loader"', () => {
   let server: Server;
 
   beforeAll(async () => {
-    server = await startServer(webpackConfigs);
+    server = await startServer(webpackConfigs, undefined);
 
     const {port} = server.address() as AddressInfo;
 

packages/demos/src/commonjs-module-loader/feature-app.tsx

@@ -0,0 +1,17 @@
+import {Card, Label} from '@blueprintjs/core';
+import {ReactFeatureApp} from '@feature-hub/react';
+import * as React from 'react';
+
+export default {
+  id: 'test:hello-world',
+
+  create(): ReactFeatureApp {
+    return {
+      render: () => (
+        <Card style={{margin: '20px'}}>
+          <Label>Hello, World!</Label>
+        </Card>
+      )
+    };
+  }
+};

packages/demos/src/commonjs-module-loader/index.test.ts

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment puppeteer
+ */
+
+import {Server} from 'http';
+import {AddressInfo} from 'net';
+import {Browser} from '../browser';
+import {startServer} from '../start-server';
+import renderMainHtml from './integrator.node';
+import webpackConfigs from './webpack-config';
+
+jest.setTimeout(60000);
+
+describe('integration test: "commonjs module loader"', () => {
+  const browser = new Browser(5000);
+
+  let server: Server;
+
+  beforeAll(async () => {
+    server = await startServer(webpackConfigs, renderMainHtml);
+
+    const {port} = server.address() as AddressInfo;
+
+    await browser.goto(`http://localhost:${port}`, 60000);
+  });
+
+  afterAll(done => server.close(done));
+
+  it('loads the server-side rendered feature app HTML', async () => {
+    await expect(page).toMatch('Hello, World!');
+  });
+});

packages/demos/src/commonjs-module-loader/integrator.node.tsx

@@ -0,0 +1,20 @@
+import {FeatureAppManager, FeatureServiceRegistry} from '@feature-hub/core';
+import {loadCommonJsModule} from '@feature-hub/module-loader/lib/node';
+import {FeatureAppLoader} from '@feature-hub/react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+
+export default async function renderMainHtml(port: number): Promise<string> {
+  const featureAppNodeUrl = `http://localhost:${port}/feature-app.commonjs.js`;
+  const registry = new FeatureServiceRegistry();
+
+  const manager = new FeatureAppManager(registry, {
+    moduleLoader: loadCommonJsModule
+  });
+
+  await manager.preloadFeatureApp(featureAppNodeUrl);
+
+  return ReactDOM.renderToString(
+    <FeatureAppLoader manager={manager} src="" nodeSrc={featureAppNodeUrl} />
+  );
+}

packages/demos/src/commonjs-module-loader/integrator.ts

@@ -0,0 +1,2 @@
+// tslint:disable-next-line:no-import-side-effect
+import '../blueprint-css';

packages/demos/src/commonjs-module-loader/webpack-config.ts

@@ -0,0 +1,24 @@
+import {join} from 'path';
+import {Configuration} from 'webpack';
+import {webpackBaseConfig} from '../webpack-base-config';
+
+export default [
+  {
+    ...webpackBaseConfig,
+    entry: join(__dirname, './feature-app.tsx'),
+    output: {
+      filename: 'feature-app.commonjs.js',
+      libraryTarget: 'commonjs2',
+      publicPath: '/'
+    },
+    target: 'node'
+  },
+  {
+    ...webpackBaseConfig,
+    entry: join(__dirname, './integrator.ts'),
+    output: {
+      filename: 'integrator.js',
+      publicPath: '/'
+    }
+  }
+] as Configuration[];

packages/demos/src/history-service/index.test.ts

@@ -69,7 +69,7 @@ describe('integration test: "history-service"', () => {
   let url: string;
 
   beforeAll(async () => {
-    server = await startServer(webpackConfigs);
+    server = await startServer(webpackConfigs, undefined);
 
     const {port} = server.address() as AddressInfo;
 

packages/demos/src/start-server.ts

@@ -4,19 +4,27 @@ import {Server} from 'http';
 import webpack from 'webpack';
 import devMiddleware from 'webpack-dev-middleware';
 
+export type MainHtmlRenderer = (port: number) => Promise<string>;
+
 export async function startServer(
-  webpackConfigs: webpack.Configuration[]
+  webpackConfigs: webpack.Configuration[],
+  renderMainHtml: MainHtmlRenderer | undefined
 ): Promise<Server> {
+  // tslint:disable-next-line:await-promise
+  const port = await getPort();
+
   const app = express();
 
-  app.get('/', (_req, res) => {
+  app.get('/', async (_req, res) => {
+    const mainHtml = renderMainHtml ? await renderMainHtml(port) : '';
+
     res.send(
       `<html>
         <head>
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </head>
         <body>
-          <main></main>
+          <main>${mainHtml}</main>
           <script src="integrator.js"></script>
         </body>
       </html>`
@@ -25,9 +33,6 @@ export async function startServer(
 
   app.use(devMiddleware(webpack(webpackConfigs), {publicPath: '/'}));
 
-  // tslint:disable-next-line:await-promise
-  const port = await getPort();
-
   return new Promise<Server>(resolve => {
     const server = app.listen(port, () => resolve(server));
   });

packages/demos/src/watch-demo.ts

@@ -1,6 +1,6 @@
 import {AddressInfo} from 'net';
 import {Configuration} from 'webpack';
-import {startServer} from './start-server';
+import {MainHtmlRenderer, startServer} from './start-server';
 
 const demoName = process.argv[2];
 
@@ -15,7 +15,17 @@ function loadWebpackConfigs(): Configuration[] {
   return configs;
 }
 
-startServer(loadWebpackConfigs())
+function loadNodeIntegrator(): MainHtmlRenderer | undefined {
+  const nodeIntegratorPath = `./${demoName}/integrator.node`;
+
+  try {
+    return require(nodeIntegratorPath).default;
+  } catch {
+    return;
+  }
+}
+
+startServer(loadWebpackConfigs(), loadNodeIntegrator())
   .then(server => {
     const {port} = server.address() as AddressInfo;
 

packages/module-loader/package.json

@@ -13,12 +13,10 @@
   "author": "SinnerSchrader Deutschland GmbH",
   "files": [
     "lib",
-    "!__tests__",
-    "index.d.ts",
-    "index.js",
-    "node.d.ts",
-    "node.js"
+    "!__tests__"
   ],
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
   "dependencies": {
     "@feature-hub/core": "^0.9.0",
     "fs-extra": "^7.0.1",

packages/module-loader/src/node.ts

@@ -37,7 +37,7 @@ async function requireAsync(url: string): Promise<unknown> {
 
 /**
  * ```js
- * import {loadCommonJsModule} from '@feature-hub/module-loader/node';
+ * import {loadCommonJsModule} from '@feature-hub/module-loader/lib/node';
  * ```
  */
 export const loadCommonJsModule: ModuleLoader = async (url: string) =>

scripts/ci/test.sh

@@ -6,7 +6,7 @@ set -e
 
 yarn commitlint-travis
 
-yarn compile
-yarn lint
 yarn test --no-cache --maxWorkers 2 --no-verbose
+yarn lint
+yarn compile
 yarn verify

tsconfig.json

@@ -19,7 +19,9 @@
     "baseUrl": ".",
     "paths": {
       "@feature-hub/*": ["packages/*/src/index.ts"],
-      "@feature-hub/*/node": ["packages/*/src/node.ts"]
+      "@feature-hub/module-loader/lib/node": [
+        "packages/module-loader/src/node.ts"
+      ]
     }
   }
 }