@journeyapps/reactor-lib-server 2.1.4 → 2.1.5

package/dist/@types/ReactorConfig.d.ts

@@ -0,0 +1,9 @@
+export interface ReactorModuleConfig {
+    name: string;
+    slug: string;
+    env: string[];
+    loader?: {
+        fragment: string;
+        backgroundColor: string;
+    };
+}

package/dist/@types/ReactorModule.d.ts

@@ -0,0 +1,34 @@
+import { ReactorModuleConfig } from './ReactorConfig';
+export interface ReactorModuleOptions {
+    directory: string;
+    resolveGlobalEnv: (key: string) => string | undefined;
+}
+export declare class ReactorModule {
+    options: ReactorModuleOptions;
+    protected confFile: string;
+    protected conf?: ReactorModuleConfig;
+    protected confPackage?: {
+        name: string;
+        version: string;
+    };
+    protected fragment: string | null;
+    constructor(options: ReactorModuleOptions);
+    getEnvs(): Record<string, string>;
+    get name(): string;
+    get packageJson(): {
+        name: string;
+        version: string;
+    };
+    get config(): ReactorModuleConfig;
+    get loaderPayload(): {
+        fragmentData: string;
+        background: string;
+    } | null;
+}
+export declare const loadModules: (options: {
+    env: {
+        MODULES: string[];
+    } & {
+        [key: string]: any;
+    };
+}) => ReactorModule[];

package/dist/@types/basic-html.d.ts

@@ -0,0 +1,21 @@
+import { Request, Response } from 'express';
+import { CheerioAPI } from 'cheerio';
+export interface CreateHtmlGeneratorOptions {
+    domTransform?: (data: CheerioAPI) => void;
+    indexFile: string;
+    templateVars?: {};
+    title: string;
+}
+export declare const createHtmlGenerator: (options: CreateHtmlGeneratorOptions) => Promise<(env?: Record<string, string>) => string>;
+export interface CreateBaseIndexMiddlewareOptions extends CreateHtmlGeneratorOptions {
+    transform?: (req: Request, res: Response, content: string) => Promise<string>;
+    getEnv?: (req: Request) => Record<string, string | undefined>;
+}
+export declare const createBaseIndexMiddleware: (options: CreateBaseIndexMiddlewareOptions) => Promise<(req: Request, res: Response) => Promise<void>>;
+/**
+ * Escape environment variables to protect against XSS.
+ *
+ * The resulting value is both valid JSON and valid JS, and is safe to inject directly in a <script> tag.
+ */
+export declare function escapeEnv(values: Record<string, string | undefined>): string;
+export declare function escapeForHtmlScript(value: any): string;

package/dist/@types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ReactorModule';
+export * from './ReactorConfig';
+export * from './basic-html';
+export * from './reactor-html';
+export * from './logging';

package/dist/@types/logging.d.ts

@@ -0,0 +1,2 @@
+import { Logger } from '@journeyapps/common-logger';
+export declare const reactorServerLogger: Logger;

package/dist/@types/reactor-html.d.ts

@@ -0,0 +1,8 @@
+import { Application } from 'express';
+import { ReactorModule } from './ReactorModule';
+import { CheerioAPI } from 'cheerio';
+export declare const serveModules: (options: {
+    app: Application;
+    modules: ReactorModule[];
+}) => void;
+export declare const createModuleLoaderContentTransformer: ($: CheerioAPI, modules: ReactorModule[]) => void;

package/dist/ReactorConfig.js

@@ -0,0 +1,3 @@
+"use strict";
+// !----------- MODULE ----------
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ReactorModule.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadModules = exports.ReactorModule = void 0;
+const tslib_1 = require("tslib");
+const fs = tslib_1.__importStar(require("fs"));
+const path = tslib_1.__importStar(require("path"));
+const logging_1 = require("./logging");
+const common_logger_1 = require("@journeyapps/common-logger");
+class ReactorModule {
+    constructor(options) {
+        this.options = options;
+        this.confFile = path.join(options.directory, 'reactor.config.json');
+        this.confPackage = require(path.join(options.directory, 'package.json'));
+        this.fragment = null;
+        if (fs.existsSync(this.confFile)) {
+            this.conf = require(this.confFile);
+        }
+        else {
+            throw new Error(`No config file for ${options.directory} at ${this.confFile}`);
+        }
+        this.getEnvs();
+    }
+    getEnvs() {
+        return this.config.env.reduce((env, key) => {
+            const value = this.options.resolveGlobalEnv(key);
+            if (value == null) {
+                throw new Error(`Environment variable '${key}' required by Reactor module '${this.name}' is missing`);
+            }
+            env[key] = value;
+            return env;
+        }, {});
+    }
+    get name() {
+        return this.config.name;
+    }
+    get packageJson() {
+        return this.confPackage;
+    }
+    get config() {
+        var _a;
+        return Object.assign(Object.assign({}, this.conf), { env: (_a = this.conf.env) !== null && _a !== void 0 ? _a : [] });
+    }
+    get loaderPayload() {
+        if (this.config.loader) {
+            if (!this.fragment) {
+                this.fragment = fs.readFileSync(path.join(path.dirname(this.confFile), this.config.loader.fragment), {
+                    encoding: 'utf-8'
+                });
+            }
+            return {
+                background: this.config.loader.backgroundColor,
+                fragmentData: this.fragment
+            };
+        }
+        return null;
+    }
+}
+exports.ReactorModule = ReactorModule;
+const loadModules = (options) => {
+    return options.env.MODULES.map((m) => {
+        let directory = path.join(process.cwd(), m);
+        if (m.startsWith('@')) {
+            // this should be the directory that contains the reactor config file
+            directory = path.resolve(path.dirname(require.resolve(m, { paths: [process.cwd()] })), '..');
+        }
+        const module = new ReactorModule({
+            resolveGlobalEnv: (key) => {
+                return options.env[key];
+            },
+            directory: directory
+        });
+        logging_1.reactorServerLogger.info(common_logger_1.Log.green('Loaded module'), common_logger_1.Log.bold(common_logger_1.Log.cyan(module.name)), common_logger_1.Log.purple(`${module.packageJson.name}@${module.packageJson.version}`), common_logger_1.Log.gray(`slug: ${module.config.slug}`), common_logger_1.Log.dim(directory));
+        logging_1.reactorServerLogger.debug(common_logger_1.Log.dim('Module environment'), common_logger_1.Log.bold(module.name), module.config.env);
+        return module;
+    });
+};
+exports.loadModules = loadModules;

package/dist/basic-html.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBaseIndexMiddleware = exports.createHtmlGenerator = void 0;
+exports.escapeEnv = escapeEnv;
+exports.escapeForHtmlScript = escapeForHtmlScript;
+const tslib_1 = require("tslib");
+const _ = tslib_1.__importStar(require("lodash"));
+const fs = tslib_1.__importStar(require("fs"));
+const path = tslib_1.__importStar(require("path"));
+const cheerio_1 = require("cheerio");
+_.templateSettings.interpolate = /<%=([\s\S]+?)%>/g;
+const readFileCached = _.memoize((fileName) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    return yield fs.promises.readFile(fileName, 'utf8');
+}));
+const createHtmlGenerator = (options) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    let index_data = yield readFileCached(options.indexFile);
+    // append the core stuff the to head which deals with ENV variables
+    let index_fragment = yield readFileCached(path.join(__dirname, '../media/core-fragment.html'));
+    const $ = (0, cheerio_1.load)(index_data);
+    $('head').prepend(`<title>${options.title}</title>`);
+    $('head').prepend(index_fragment);
+    // optionally mutate even more
+    (_a = options.domTransform) === null || _a === void 0 ? void 0 : _a.call(options, $);
+    // now turn it into a template so we can do variable substitution
+    const template = _.template($.html());
+    return (env = {}) => {
+        return template(Object.assign({ ENV: escapeEnv(Object.assign(Object.assign({}, env), { NODE_ENV: process.env.NODE_ENV || 'development' })) }, (options.templateVars || {})));
+    };
+});
+exports.createHtmlGenerator = createHtmlGenerator;
+const createBaseIndexMiddleware = (options) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const generator = yield (0, exports.createHtmlGenerator)(options);
+    return (req, res) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+            let env = ((_a = options.getEnv) === null || _a === void 0 ? void 0 : _a.call(options, req)) || {};
+            let index_data = generator(env);
+            if (options.transform) {
+                index_data = yield ((_b = options.transform) === null || _b === void 0 ? void 0 : _b.call(options, req, res, index_data));
+            }
+            res.send(index_data);
+            res.end();
+        }
+        catch (err) {
+            res.status(500).end();
+        }
+    });
+});
+exports.createBaseIndexMiddleware = createBaseIndexMiddleware;
+/**
+ * Escape environment variables to protect against XSS.
+ *
+ * The resulting value is both valid JSON and valid JS, and is safe to inject directly in a <script> tag.
+ */
+function escapeEnv(values) {
+    for (let value of Object.values(values)) {
+        if (value != null && typeof value != 'string') {
+            // This is not expected to happen. We just do this as an extra safety check, to avoid injecting nested values.
+            throw new Error(`Invalid environment variable: ${value}`);
+        }
+    }
+    return escapeForHtmlScript(values);
+}
+function escapeForHtmlScript(value) {
+    /*
+      Some background: https://dzone.com/articles/preventing-xss-vulnerabilities-when-developing-rub
+      https://portswigger.net/web-security/cross-site-scripting/preventing
+      Values injected in a <script> tag needs to be escaped for:
+      1. JavaScript: JSON.stringify covers this.
+      2. HTML: </script> in the middle of a JSON string still breaks out of the script. Using unicode escape sequences
+      covers this. At minimum, '<' and '>' should be escaped. Being extra cautious, we escape most characters except for a small allow-list.
+    */
+    const jsSafe = JSON.stringify(value);
+    // Our allow-list includes valid JSON control characters, allowing this to work on objects in addition to strings.
+    return jsSafe.replace(/[^\w. ",:{}\\\[\]]/gi, (c) => '\\u' + ('0000' + c.charCodeAt(0).toString(16)).slice(-4));
+}

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ReactorModule"), exports);
+tslib_1.__exportStar(require("./ReactorConfig"), exports);
+tslib_1.__exportStar(require("./basic-html"), exports);
+tslib_1.__exportStar(require("./reactor-html"), exports);
+tslib_1.__exportStar(require("./logging"), exports);

package/dist/logging.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactorServerLogger = void 0;
+const common_logger_1 = require("@journeyapps/common-logger");
+exports.reactorServerLogger = new common_logger_1.Logger({
+    name: 'Reactor server',
+    level: common_logger_1.LogLevel.INFO,
+    transport: new common_logger_1.NodeConsoleLoggerTransport()
+});

package/dist/reactor-html.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createModuleLoaderContentTransformer = exports.serveModules = void 0;
+const tslib_1 = require("tslib");
+const express_1 = tslib_1.__importDefault(require("express"));
+const path = tslib_1.__importStar(require("path"));
+const serveModules = (options) => {
+    options.modules.forEach((m) => {
+        options.app.use(`/module/${m.config.slug}`, express_1.default.static(path.join(m.options.directory, 'dist-module')));
+    });
+};
+exports.serveModules = serveModules;
+const createModuleLoaderContentTransformer = ($, modules) => {
+    let module_names_window = modules.map((m) => m.packageJson.name);
+    modules.forEach((m) => $('head').append(`<script nonce="SCRIPT_NONCE"
+        defer
+        data-module="${m.packageJson.name}" 
+        src="/module/${m.config.slug}/bundle.js" 
+        type="text/javascript" />`));
+    $('head').append(`
+<script nonce="SCRIPT_NONCE">
+    window.addEventListener('DOMContentLoaded', async (event) => {
+      // get all the reactor module classes
+      const module_classes = ${JSON.stringify(module_names_window)}.map(m => {
+        if(!window[m]){
+          throw new Error('Reactor module "' + m + '" was not loaded correctly.');
+        }
+        return window[m].default;
+      });
+
+      // call preboot on all of them if they have that method (such as the ReactorModule which inits the kernel)
+      module_classes.forEach(module => {
+        if (module.preboot) {
+          module.preboot(module_classes);
+        }
+      });
+    });
+</script>`);
+};
+exports.createModuleLoaderContentTransformer = createModuleLoaderContentTransformer;

package/media/core-fragment.html

@@ -0,0 +1,7 @@
+<script type='application/javascript' nonce='SCRIPT_NONCE'>
+  if (!window.process) {
+    window.process = {
+      env: <%= ENV %>
+    };
+  }
+</script>

package/media/index.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="<%= LOADER_BACKGROUND_COLOR %>" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <style>
+      html,
+      body {
+        background: <%= LOADER_BACKGROUND_COLOR %>;
+      }
+
+      @keyframes fadein {
+        0%{
+          opacity: 0;
+        }
+        100%{
+          opacity: 1;
+        }
+      }
+
+      .loader {
+        opacity: 0;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        animation: fadein;
+        animation-duration: 0.3s;
+        animation-delay: 0.5s;
+        animation-direction: normal;
+        animation-fill-mode: forwards;
+      }
+
+      .loading-bar-wrapper {
+        width: 200px;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.1);
+        margin-top: 40px;
+      }
+
+      .loading-text {
+        margin-top: 6px;
+        font-size: 11px;
+        color: white;
+        opacity: 0.2;
+        font-family: sans-serif;
+      }
+
+      .loading-bar {
+        width: 0%;
+        transition: width 0.3s;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.3);
+        will-change: width;
+      }
+    </style>
+    <script nonce="SCRIPT_NONCE">
+      let loaded = new Set();
+      window.reactorModuleLoaded = (module) => {
+        const scripts = Array.from(document.scripts).filter((s) => !!s.dataset['module']);
+        // could be multiple modules with the same name due to workers etc...
+        if(loaded.has(module)){
+          return;
+        }
+        loaded.add(module)
+        const loaderBar = document.querySelector('.loading-bar');
+        const loaderText = document.querySelector('.loading-text');
+        if (!loaderBar) {
+          return;
+        }
+        const percent = parseInt((loaded.size / scripts.length) * 100);
+        loaderBar.style.width = `${percent}%`;
+        if (percent === 100) {
+          loaderText.innerHTML = `Booting!`;
+        } else {
+          loaderText.innerHTML = `Loaded: ${module}`;
+        }
+      };
+    </script>
+  </head>
+  <body>
+    <div class="loader">
+      <div class="loading-bar-wrapper">
+        <div class="loading-bar"></div>
+      </div>
+      <div class="loading-text">Loading...</div>
+    </div>
+    <div id="application"></div>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@journeyapps/reactor-lib-server",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -15,7 +15,7 @@
   "typings": "./dist/@types/index",
   "dependencies": {
     "@journeyapps/common-logger": "1.1.2",
-    "@journeyapps/reactor-lib-utils": "2.0.16",
+    "@journeyapps/reactor-lib-utils": "2.0.17",
     "cheerio": "^1.2.0",
     "express": "^5.2.1",
     "lodash": "^4.18.1",
@@ -26,6 +26,11 @@
     "@types/express-session": "^1.19.0",
     "@types/lodash": "^4.17.25"
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "media"
+  ],
   "scripts": {
     "build": "../node_modules/.bin/tsc --build"
   }