@nebula.js/cli-serve 2.0.0-beta.1

package/docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.1'
+
+services:
+  engine:
+    image: qlikcore/engine:${ENGINE_VERSION:-12.972.0}
+    # restart: always
+    command: |
+      -S AcceptEULA=${ACCEPT_EULA:-no}
+      -S DocumentDirectory=/apps
+    ports:
+      - ${ENGINE_PORT:-9076}:9076
+    volumes:
+      - ${APPS_PATH:-./data/apps}:/apps

package/lib/engine.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const { spawn } = require('child_process');
+
+const execCmd = (cmd, cmdArgs = [], opts) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(cmd, cmdArgs, opts);
+    const res = {
+      exitCode: null,
+      out: '',
+      err: '',
+    };
+    child.on('error', reject);
+    child.stdout.on('data', (chunk) => {
+      res.out += chunk.toString();
+    });
+    child.stderr.on('data', (chunk) => {
+      res.err += chunk.toString();
+    });
+    child.on('exit', (exitCode) => {
+      res.exitCode = exitCode;
+      if (exitCode === 0) {
+        resolve(res);
+      } else {
+        reject(res);
+      }
+    });
+  });
+
+const useEngine = ({ ACCEPT_EULA = false, cwd = path.resolve(__dirname, '../'), files }) => {
+  if (ACCEPT_EULA !== true) {
+    throw new Error('Need to accept EULA in order to start engine container');
+  }
+  console.error('Starting engine container...');
+  const f = (files || []).reduce((acc, curr) => [...acc, '-f', curr], []);
+  process.env.ACCEPT_EULA = 'yes';
+  const stopEngine = async () => {
+    console.error('Stopping engine container...');
+    try {
+      await execCmd('docker-compose', [...f, 'down', '--remove-orphans'], {
+        cwd,
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  return execCmd('docker-compose', [...f, 'up', '-d', '--build'], { cwd }).then(() => stopEngine);
+};
+
+module.exports = useEngine;

package/lib/init-config.js

@@ -0,0 +1,80 @@
+/* eslint global-require: 0 */
+
+const fs = require('fs');
+
+const defaultFilename = 'nebula.config.js';
+const RX = new RegExp(`${defaultFilename.replace(/\./g, '\\.')}$`);
+
+const options = {
+  config: {
+    type: 'string',
+    description: 'Path to config file',
+    default: defaultFilename,
+    alias: 'c',
+  },
+  entry: {
+    type: 'string',
+    description: 'File entrypoint',
+  },
+  type: {
+    type: 'string',
+    description: 'Generic object type',
+  },
+  build: {
+    type: 'boolean',
+    default: true,
+  },
+  host: {
+    type: 'string',
+    default: 'localhost',
+  },
+  port: {
+    type: 'number',
+  },
+  disableHostCheck: {
+    type: 'boolean',
+    default: false,
+  },
+  resources: {
+    type: 'string',
+    description: 'Path to a folder that will be served as static files under /resources',
+  },
+  scripts: {
+    type: 'array',
+    description: 'Array of scripts to inject',
+  },
+  stylesheets: {
+    type: 'array',
+    description: 'Array of stylesheets to inject',
+  },
+  'enigma.host': {
+    type: 'string',
+    default: 'localhost',
+  },
+  'enigma.port': {
+    type: 'number',
+    default: 9076,
+  },
+  webIntegrationId: {
+    type: 'string',
+  },
+  ACCEPT_EULA: {
+    type: 'boolean',
+    default: false,
+  },
+};
+
+module.exports = (yargs) =>
+  yargs.options(options).config('config', (configPath) => {
+    if (configPath === null) {
+      return {};
+    }
+    if (!fs.existsSync(configPath)) {
+      if (RX.test(configPath)) {
+        // do nothing if default filename doesn't exist
+        return {};
+      }
+      throw new Error(`Config ${configPath} not found`);
+    }
+    return require(configPath).serve || {};
+  });

package/lib/placeholder.js

@@ -0,0 +1,7 @@
+export default {
+  component: {
+    mounted() {
+      console.log('mounted');
+    },
+  },
+};

package/lib/serve.js

@@ -0,0 +1,191 @@
+const path = require('path');
+const fs = require('fs');
+const portfinder = require('portfinder');
+const extend = require('extend');
+const yargs = require('yargs');
+const WebSocket = require('ws').Server;
+const chokidar = require('chokidar');
+const build = require('@nebula.js/cli-build');
+
+const initConfig = require('./init-config');
+
+const webpackServe = require('./webpack.serve');
+const useEngine = require('./engine');
+
+const initiateWatch = async ({ snPath, snName, host }) => {
+  // TODO - timeout
+  let onInitiated;
+  const done = new Promise((resolve) => {
+    onInitiated = resolve;
+  });
+
+  const wsPort = await portfinder.getPortPromise({ port: 5001, host });
+
+  const ws = new WebSocket({
+    port: wsPort,
+    clientTracking: true,
+  });
+
+  const choker = chokidar.watch(snPath, {
+    ignoreInitial: false,
+    disableGlobbing: true,
+  });
+
+  choker.on('add', () => {
+    onInitiated();
+  });
+
+  choker.on('change', () => {
+    [...ws.clients].forEach((client) => {
+      client.send(
+        JSON.stringify({
+          changed: [snName],
+        })
+      );
+    });
+  });
+
+  const cache = {};
+
+  return {
+    addRoutes(app) {
+      app.get('/pkg/:name', async (req, res) => {
+        const { name } = req.params;
+        await done;
+
+        let file;
+        if (cache[name]) {
+          file = cache[name];
+        } else if (name === snName) {
+          file = snPath;
+        } else if (/\.map$/.test(name)) {
+          const sources = Object.keys(cache);
+          for (let i = 0; i < sources.length; i++) {
+            const p = cache[sources[i]];
+            const filename = path.basename(p);
+            if (`${filename}.map` === name) {
+              file = path.resolve(path.dirname(p), name);
+              break;
+            }
+          }
+        } else {
+          file = require.resolve(name, {
+            paths: [process.cwd()],
+          });
+        }
+
+        cache[name] = file;
+
+        if (fs.existsSync(file)) {
+          const f = fs.readFileSync(file);
+          res.send(f);
+        } else {
+          res.sendStatus('404');
+        }
+      });
+    },
+    async close() {
+      await ws.close();
+      await choker.close();
+    },
+    port: wsPort,
+  };
+};
+
+module.exports = async (argv) => {
+  let context = process.cwd();
+  let defaultServeConfig = {};
+  let runFromDirectory = false;
+
+  if (!argv.$0) {
+    const yargsArgs = argv.config ? ['--config', argv.config] : [];
+    defaultServeConfig = initConfig(yargs(yargsArgs)).argv;
+  }
+
+  const serveConfig = extend(true, {}, defaultServeConfig, argv);
+
+  let stopEngine = () => {};
+  if (serveConfig.ACCEPT_EULA) {
+    stopEngine = await useEngine(serveConfig);
+  }
+  const host = serveConfig.host || 'localhost';
+  const port = serveConfig.port || (await portfinder.getPortPromise({ host }));
+  const enigmaConfig = serveConfig.enigma;
+
+  let snPath;
+  let snName;
+  let watcher;
+  let snUrl;
+  if (/^https?/.test(serveConfig.entry)) {
+    snName = 'remote';
+    snUrl = serveConfig.entry;
+  } else if (serveConfig.entry) {
+    snPath = path.resolve(context, serveConfig.entry);
+    const stat = fs.statSync(snPath);
+    if (stat.isDirectory()) {
+      runFromDirectory = true;
+      context = snPath;
+    } else {
+      const parsed = path.parse(snPath);
+      snName = parsed.name;
+    }
+  } else {
+    runFromDirectory = true;
+  }
+
+  if (runFromDirectory) {
+    if (serveConfig.build !== false) {
+      watcher = await build({
+        watch: true,
+        config: serveConfig.config,
+        cwd: context,
+      });
+    }
+    try {
+      const externalPkg = require(path.resolve(context, 'package.json')); // eslint-disable-line global-require
+      const externalEntry = externalPkg.main;
+      snName = externalPkg.name;
+      snPath = path.resolve(context, externalEntry);
+    } catch (e) {
+      //
+    }
+  }
+
+  const ww = snUrl ? null : await initiateWatch({ snPath, snName: serveConfig.type || snName, host });
+
+  const server = await webpackServe({
+    host,
+    port,
+    disableHostCheck: serveConfig.disableHostCheck,
+    enigmaConfig,
+    webIntegrationId: serveConfig.webIntegrationId,
+    snName: serveConfig.type || snName,
+    snUrl,
+    dev: process.env.MONO === 'true',
+    open: serveConfig.open !== false,
+    entryWatcher: ww,
+    watcher,
+    serveConfig,
+  });
+
+  const close = async () => {
+    await stopEngine();
+    if (watcher) {
+      watcher.close();
+    }
+    if (ww) {
+      await ww.close();
+    }
+    server.close();
+  };
+
+  ['SIGINT', 'SIGTERM'].forEach((signal) => {
+    process.on(signal, close);
+  });
+
+  // eslint-disable-next-line consistent-return
+  return {
+    url: server.url,
+    close,
+  };
+};

package/lib/sn.js

@@ -0,0 +1 @@
+// dummy entrypoint

package/lib/snapshot-router.js

@@ -0,0 +1,58 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+
+module.exports = function router({ base, snapshotUrl, snapshooter }) {
+  const r = express.Router();
+
+  r.use(
+    bodyParser.json({
+      limit: '10mb',
+    })
+  );
+
+  // returns an existing image
+  r.get('/image/:id', (req, res) => {
+    const p = snapshooter.getStoredImage(req.params.id);
+    if (p) {
+      res.contentType('image/png');
+      res.end(p, 'binary');
+    } else {
+      res.sendStatus('404');
+    }
+  });
+
+  r.post('/capture', async (req, res) => {
+    try {
+      const key = await snapshooter.captureImageOfSnapshot(req.body);
+      res.send({
+        url: `${base}/image/${key}`,
+      });
+    } catch (e) {
+      console.error(e);
+      res.sendStatus('500');
+    }
+  });
+
+  // post snapshot
+  r.post('/snapshot', (req, res) => {
+    const key = snapshooter.storeSnapshot(req.body);
+    res.json({
+      url: `${snapshotUrl}?snapshot=${key}`,
+    });
+  });
+
+  r.get('/snapshot/:id', (req, res) => {
+    const p = snapshooter.getStoredSnapshot(req.params.id);
+    if (p) {
+      res.json(p);
+    } else {
+      res.sendStatus('404');
+    }
+  });
+
+  r.get('/snapshots', (req, res) => {
+    res.json(snapshooter.getStoredSnapshots());
+  });
+
+  return r;
+};

package/lib/snapshot-server.js

@@ -0,0 +1,83 @@
+/* eslint no-param-reassign: 0 */
+
+const puppeteer = require('puppeteer');
+
+function snapshooter({ snapshotUrl, chrome = {} } = {}) {
+  const snapshots = {};
+  const images = {};
+  let browser;
+  let cachedPage;
+  let rendering = false;
+
+  const hasConnectOptions = chrome.browserWSEndpoint || chrome.browserURL;
+
+  const createBrowser = () => (hasConnectOptions ? puppeteer.connect(chrome) : puppeteer.launch(chrome));
+
+  const doIt = async (snapshot, runCached) => {
+    browser = browser || (await createBrowser());
+    let page;
+    if (runCached) {
+      cachedPage = cachedPage || (await browser.newPage());
+      page = cachedPage;
+    } else {
+      page = await browser.newPage();
+    }
+    await page.setViewport({
+      width: snapshot.meta.size.width,
+      height: snapshot.meta.size.height,
+    });
+    await page.goto(`${snapshotUrl}?snapshot=${snapshot.key}`);
+    try {
+      await page.waitFor(
+        () =>
+          (document.querySelector('.njs-viz') &&
+            +document.querySelector('.njs-viz').getAttribute('data-render-count') > 0) ||
+          document.querySelector('[data-njs-error]')
+      );
+    } catch (e) {
+      // empty
+    }
+    const image = await page.screenshot();
+    images[snapshot.key] = image;
+    rendering = false;
+    return snapshot.key;
+  };
+
+  return {
+    getStoredImage(id) {
+      return images[id];
+    },
+    getStoredSnapshot(id) {
+      return snapshots[id];
+    },
+    getStoredSnapshots() {
+      return Object.keys(snapshots).map((key) => snapshots[key]);
+    },
+    storeSnapshot(snapshot) {
+      if (!snapshot) {
+        throw new Error('Empty snapshot');
+      }
+      if (!snapshot.key) {
+        snapshot.key = String(+Date.now());
+      }
+      snapshots[snapshot.key] = snapshot;
+      return snapshot.key;
+    },
+    async captureImageOfSnapshot(snapshot) {
+      this.storeSnapshot(snapshot);
+      if (rendering) {
+        return doIt(snapshot);
+      }
+      rendering = true;
+      const key = await doIt(snapshot, true);
+      rendering = false;
+      return key;
+    },
+    async close() {
+      if (browser) {
+        await browser.close();
+      }
+    },
+  };
+}
+module.exports = snapshooter;

package/lib/webpack.build.js

@@ -0,0 +1,125 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const babelPath = require.resolve('babel-loader');
+const babelPresetEnvPath = require.resolve('@babel/preset-env');
+const babelPresetReactPath = require.resolve('@babel/preset-react');
+const sourceMapLoaderPath = require.resolve('source-map-loader');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+const favicon = path.resolve(__dirname, '../../../docs/assets/njs.png');
+
+const crypto = require('crypto');
+const { version } = require('../package.json');
+
+const versionHash = crypto.createHash('md5').update(version).digest('hex').slice(0, 4);
+
+const cfg = ({ srcDir, distDir, dev = false, serveConfig = {} }) => {
+  const config = {
+    mode: dev ? 'development' : 'production',
+    entry: {
+      eRender: [path.resolve(srcDir, 'eRender')],
+      eDev: [path.resolve(srcDir, 'eDev')],
+      eHub: [path.resolve(srcDir, 'eHub')],
+    },
+    devtool: dev ? 'eval-cheap-module-source-map' : false,
+    output: {
+      path: distDir,
+      filename: '[name].js',
+    },
+    resolve: {
+      alias: {
+        '@nebula.js/stardust': path.resolve(__dirname, '../../../apis/stardust/src'),
+        '@nebula.js/snapshooter/client': path.resolve(__dirname, '../../../apis/snapshooter/src/renderer'),
+        '@nebula.js/theme': path.resolve(__dirname, '../../../apis/theme/src'),
+        '@nebula.js/conversion': path.resolve(__dirname, '../../../apis/conversion/src'),
+        '@nebula.js/locale/all.json$': path.resolve(__dirname, '../../../apis/locale/all.json'),
+        '@nebula.js/locale': path.resolve(__dirname, '../../../apis/locale/src'),
+        fixtures: path.resolve(__dirname, '../../../test/component'),
+      },
+      extensions: ['.dev.js', '.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          include: [/node_modules[/\\]monaco-editor/],
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.ttf$/,
+          include: [/node_modules[/\\]monaco-editor/],
+          use: ['file-loader'],
+        },
+        {
+          enforce: 'pre',
+          test: /\.js?$/,
+          loader: sourceMapLoaderPath,
+        },
+        {
+          test: /\.jsx?$/,
+          sideEffects: false,
+          include: [srcDir, /nucleus/, /ui[/\\]icons/],
+          use: {
+            loader: babelPath,
+            options: {
+              presets: [
+                [
+                  babelPresetEnvPath,
+                  {
+                    modules: false,
+                    targets: {
+                      browsers: ['last 2 chrome versions'],
+                    },
+                  },
+                ],
+                babelPresetReactPath,
+              ],
+            },
+          },
+        },
+      ],
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        __NEBULA_DEV__: true,
+        'process.env.NEBULA_VERSION': JSON.stringify(version),
+        'process.env.NEBULA_VERSION_HASH': JSON.stringify(versionHash),
+      }),
+      new MonacoWebpackPlugin({ languages: ['json'] }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(srcDir, 'eRender.html'),
+        filename: 'eRender.html',
+        chunks: ['eRender'],
+        favicon,
+        scripts: serveConfig.scripts,
+        stylesheets: serveConfig.stylesheets,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(srcDir, 'eDev.html'),
+        filename: 'eDev.html',
+        chunks: ['eDev'],
+        favicon,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(srcDir, 'eHub.html'),
+        filename: 'eHub.html',
+        chunks: ['eHub'],
+        favicon,
+      }),
+    ],
+  };
+
+  return config;
+};
+
+if (!process.env.DEFAULTS) {
+  module.exports = cfg;
+} else {
+  module.exports = cfg({
+    srcDir: path.resolve(__dirname, '../web'),
+    distDir: path.resolve(__dirname, '../dist'),
+    dev: false,
+  });
+}

package/lib/webpack.prod.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const isSrc = /^([.]{2}\/)/;
+const namespace = /^webpack:\/\/([^/]+)\//;
+const NM = /node_modules/;
+const WP = /\/\(?webpack\)?/;
+
+const cfg = ({ srcDir = path.resolve(__dirname, '../dist'), serveConfig = {} }) => {
+  const folderName = process.cwd().split('/').slice(-1)[0];
+
+  const config = {
+    mode: 'development',
+    entry: path.resolve(__dirname, './sn.js'),
+    devtool: false,
+    infrastructureLogging: {
+      level: 'error',
+    },
+    stats: 'errors-only',
+    output: {
+      path: path.resolve(srcDir, 'temp'),
+      filename: '[name].js',
+      devtoolModuleFilenameTemplate: (info) => {
+        // attempt to improve the mapping of multiple libraries into
+        // a better folder structure for easier debugging
+
+        // if source files are referenced as "webpack://foo/"
+        // then output those references as "foo:///"
+        const ns = namespace.exec(info.resourcePath);
+        if (ns && !NM.test(info.resourcePath) && !WP.test(info.resourcePath)) {
+          return `${ns[1]}:///${info.resourcePath.replace(namespace, '')}`;
+        }
+
+        // if source files are referenced as relative paths: "../bla"
+        // then output those references as "folderName:///bla"
+        if (!info.moduleId && isSrc.test(info.resourcePath)) {
+          const pp = info.resourcePath.replace(isSrc, '');
+          return `${folderName || 'sn'}:///${pp}`;
+        }
+
+        // otherwise output using webpack default pattern
+        return `webpack://${info.namespace}/${info.resourcePath}`;
+      },
+    },
+    resolve: {
+      alias: {
+        fixtures: path.resolve(process.cwd(), 'test/component'),
+      },
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(srcDir, 'eRender.html'),
+        filename: 'eRender.html',
+        inject: 'head',
+        scripts: serveConfig.scripts,
+        stylesheets: serveConfig.stylesheets,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(srcDir, 'eDev.html'),
+        filename: 'eDev.html',
+        inject: 'head',
+      }),
+    ],
+  };
+
+  return config;
+};
+
+module.exports = cfg;