feat(demos): add custom logging demo (#418)

packages/demos/README.md

@@ -76,6 +76,17 @@ Demonstrates:
 yarn watch:demo server-side-rendering
 ```
 
+### [Custom Logging](src/custom-logging)
+
+Demonstrates:
+
+- how to configure custom loggers for the server and client, using [pino][pino]
+  on the server, and a customized `console` on the client
+
+```sh
+yarn watch:demo custom-logging
+```
+
 ### [TodoMVC](src/todomvc)
 
 Demonstrates:
@@ -97,3 +108,4 @@ terms of the [MIT License][license].
 [website-badge]:
   https://img.shields.io/badge/Website-feature--hub.io-%23500dc5.svg
 [todomvc]: http://todomvc.com
+[pino]: http://getpino.io

packages/demos/package.json

@@ -22,6 +22,7 @@
     "@types/express": "^4.16.0",
     "@types/get-port": "^4.0.0",
     "@types/history": "^4.7.2",
+    "@types/pino": "^5.8.5",
     "@types/styled-components": "4.1.8",
     "@types/webpack": "^4.4.20",
     "@types/webpack-dev-middleware": "^2.0.2",
@@ -32,6 +33,8 @@
     "get-port": "^4.0.0",
     "history": "^4.7.2",
     "lit-html": "^1.0.0",
+    "pino": "^5.11.1",
+    "pino-pretty": "^2.5.0",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.5.0",
     "puppeteer": "^1.11.0",

packages/demos/src/custom-logging/app.tsx

@@ -0,0 +1,18 @@
+import {FeatureAppContainer} from '@feature-hub/react';
+import * as React from 'react';
+import featureAppDefinition from './feature-app';
+
+export function App(): JSX.Element {
+  return (
+    <>
+      <FeatureAppContainer
+        featureAppDefinition={featureAppDefinition}
+        idSpecifier="first"
+      />
+      <FeatureAppContainer
+        featureAppDefinition={featureAppDefinition}
+        idSpecifier="second"
+      />
+    </>
+  );
+}

packages/demos/src/custom-logging/feature-app.tsx

@@ -0,0 +1,43 @@
+import {Card, Label} from '@blueprintjs/core';
+import {FeatureAppDefinition} from '@feature-hub/core';
+import {Logger} from '@feature-hub/logger';
+import {ReactFeatureApp} from '@feature-hub/react';
+import * as React from 'react';
+
+interface Dependencies {
+  readonly 's2:logger': Logger;
+}
+
+const featureAppDefinition: FeatureAppDefinition<
+  ReactFeatureApp,
+  undefined,
+  undefined,
+  Dependencies
+> = {
+  id: 'test:logging-app',
+
+  dependencies: {
+    externals: {react: '^16.7.0'},
+    featureServices: {'s2:logger': '^1.0.0'}
+  },
+
+  create: env => {
+    const logger = env.featureServices['s2:logger'];
+
+    logger.trace('logger trace test');
+    logger.debug('logger debug test');
+    logger.info('logger info test');
+    logger.warn('logger warn test');
+    logger.error('logger error test');
+
+    return {
+      render: () => (
+        <Card style={{margin: '20px'}}>
+          <Label>This is the {env.idSpecifier} Feature App!</Label>
+        </Card>
+      )
+    };
+  }
+};
+
+export default featureAppDefinition;

packages/demos/src/custom-logging/integrator.node.tsx

@@ -0,0 +1,31 @@
+import {createFeatureHub} from '@feature-hub/core';
+import {defineLogger} from '@feature-hub/logger';
+import {loadCommonJsModule} from '@feature-hub/module-loader-commonjs';
+import {FeatureHubContextProvider} from '@feature-hub/react';
+import pino from 'pino';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import {getPkgVersion} from '../get-pkg-version';
+import {AppRendererResult} from '../start-server';
+import {App} from './app';
+
+export default async function renderApp(): Promise<AppRendererResult> {
+  const logger = pino({prettyPrint: {translateTime: true}, level: 'trace'});
+
+  const {featureAppManager} = createFeatureHub('test:integrator', {
+    logger,
+    moduleLoader: loadCommonJsModule,
+    providedExternals: {react: getPkgVersion('react')},
+    featureServiceDefinitions: [
+      defineLogger(consumerUid => logger.child({consumerUid}))
+    ]
+  });
+
+  const html = ReactDOM.renderToString(
+    <FeatureHubContextProvider value={{featureAppManager, logger}}>
+      <App />
+    </FeatureHubContextProvider>
+  );
+
+  return {html};
+}

packages/demos/src/custom-logging/integrator.tsx

@@ -0,0 +1,35 @@
+import {createFeatureHub} from '@feature-hub/core';
+import {ConsumerLoggerCreator, defineLogger} from '@feature-hub/logger';
+import {defineExternals, loadAmdModule} from '@feature-hub/module-loader-amd';
+import {FeatureHubContextProvider} from '@feature-hub/react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import '../blueprint-css';
+import {App} from './app';
+
+defineExternals({react: React});
+
+const createConsumerConsole: ConsumerLoggerCreator = consumerUid => {
+  const prefixArgs = [`%c${consumerUid}`, 'font-weight: bold'];
+
+  return {
+    trace: console.trace.bind(console, ...prefixArgs),
+    debug: console.debug.bind(console, ...prefixArgs),
+    info: console.info.bind(console, ...prefixArgs),
+    warn: console.warn.bind(console, ...prefixArgs),
+    error: console.error.bind(console, ...prefixArgs)
+  };
+};
+
+const {featureAppManager} = createFeatureHub('test:integrator', {
+  moduleLoader: loadAmdModule,
+  providedExternals: {react: process.env.REACT_VERSION as string},
+  featureServiceDefinitions: [defineLogger(createConsumerConsole)]
+});
+
+ReactDOM.hydrate(
+  <FeatureHubContextProvider value={{featureAppManager}}>
+    <App />
+  </FeatureHubContextProvider>,
+  document.querySelector('main')
+);

packages/demos/src/custom-logging/webpack-config.js

@@ -0,0 +1,20 @@
+// @ts-check
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const webpackBaseConfig = require('../webpack-base-config');
+
+/**
+ * @type {webpack.Configuration[]}
+ */
+const configs = [
+  merge.smart(webpackBaseConfig, {
+    entry: path.join(__dirname, './integrator.tsx'),
+    output: {
+      filename: 'integrator.js',
+      publicPath: '/'
+    }
+  })
+];
+
+module.exports = configs;

packages/demos/src/history-service/history-consumer-definition.tsx

@@ -6,11 +6,15 @@ import {HistoryConsumer} from './history-consumer';
 
 const inBrowser = typeof window !== 'undefined';
 
+interface Dependencies {
+  readonly 's2:history': HistoryServiceV1;
+}
+
 export const historyConsumerDefinition: FeatureAppDefinition<
   ReactFeatureApp,
   undefined,
   undefined,
-  {'s2:history': HistoryServiceV1}
+  Dependencies
 > = {
   id: 'test:history-consumer',
 

packages/demos/src/server-side-rendering/feature-app.tsx

@@ -6,8 +6,8 @@ import {SerializedStateManagerV1} from '@feature-hub/serialized-state-manager';
 import * as React from 'react';
 
 interface Dependencies {
-  's2:async-ssr-manager': AsyncSsrManagerV1 | undefined;
-  's2:serialized-state-manager': SerializedStateManagerV1;
+  readonly 's2:async-ssr-manager': AsyncSsrManagerV1 | undefined;
+  readonly 's2:serialized-state-manager': SerializedStateManagerV1;
 }
 
 async function fetchSubject(): Promise<string> {