@merkur/cli 0.35.0

package/src/commands/build.mjs

@@ -0,0 +1,61 @@
+import chalk from 'chalk';
+
+import { createBuildConfig } from '../buildConfig.mjs';
+import { createCLIConfig } from '../CLIConfig.mjs';
+import { createContext } from '../context.mjs';
+import { createTaskConfig } from '../taskConfig.mjs';
+import { runTask } from '../runTask.mjs';
+import { createMerkurConfig } from '../merkurConfig.mjs';
+import { createLogger } from '../logger.mjs';
+import { time } from '../utils.mjs';
+import { handleExit } from '../handleExit.mjs';
+
+export async function build({ args, command }) {
+  const buildTime = time();
+
+  const context = await createContext();
+  const baseCliConfig = await createCLIConfig({ args, context, command });
+
+  const { merkurConfig, cliConfig } = await createMerkurConfig({
+    cliConfig: baseCliConfig,
+    context,
+  });
+  const logger = createLogger(undefined, cliConfig);
+
+  await handleExit({ context });
+
+  const task = await Object.keys(merkurConfig.task).reduce(
+    async (result, key) => {
+      const definition = merkurConfig.task[key];
+
+      const config = await createTaskConfig({
+        definition,
+        merkurConfig,
+        cliConfig,
+        context,
+      });
+      const build = await createBuildConfig({
+        definition,
+        config,
+        merkurConfig,
+        cliConfig,
+        context,
+      });
+      result[definition.name] = await runTask({
+        definition,
+        build,
+        merkurConfig,
+        cliConfig,
+        config,
+        context,
+      });
+
+      return result;
+    },
+    context.task,
+  );
+
+  await Promise.all(Object.values(task));
+
+  logger.log(`Build success ${chalk.green(buildTime())} [ms]`);
+}

package/src/commands/constant.mjs

@@ -0,0 +1,6 @@
+export const COMMAND_NAME = {
+  START: 'start',
+  DEV: 'dev',
+  BUILD: 'build',
+  TEST: 'test',
+};

package/src/commands/dev.mjs

@@ -0,0 +1,59 @@
+import { createBuildConfig } from '../buildConfig.mjs';
+import { createCLIConfig } from '../CLIConfig.mjs';
+import { createContext } from '../context.mjs';
+import { runDevServer } from '../devServer.mjs';
+import { createTaskConfig } from '../taskConfig.mjs';
+import { runTask } from '../runTask.mjs';
+import { createMerkurConfig } from '../merkurConfig.mjs';
+import { runSocketServer } from '../websocket.mjs';
+import { runWidgetServer } from '../widgetServer.mjs';
+import { handleExit } from '../handleExit.mjs';
+
+export async function dev({ args, command }) {
+  const context = await createContext();
+  const baseCliConfig = await createCLIConfig({ args, context, command });
+
+  const { merkurConfig, cliConfig } = await createMerkurConfig({
+    cliConfig: baseCliConfig,
+    context,
+  });
+
+  await handleExit({ context });
+
+  const task = await Object.keys(merkurConfig.task).reduce(
+    async (result, key) => {
+      const definition = merkurConfig.task[key];
+
+      const config = await createTaskConfig({
+        definition,
+        merkurConfig,
+        cliConfig,
+        context,
+      });
+      const build = await createBuildConfig({
+        definition,
+        config,
+        merkurConfig,
+        cliConfig,
+        context,
+      });
+      result[definition.name] = await runTask({
+        definition,
+        build,
+        merkurConfig,
+        cliConfig,
+        config,
+        context,
+      });
+
+      return result;
+    },
+    context.task,
+  );
+
+  await Promise.all(Object.values(task));
+
+  await runDevServer({ merkurConfig, cliConfig, context });
+  await runSocketServer({ merkurConfig, cliConfig, context });
+  await runWidgetServer({ merkurConfig, cliConfig, context });
+}

package/src/commands/start.mjs

@@ -0,0 +1,21 @@
+import { createCLIConfig } from '../CLIConfig.mjs';
+import { createContext } from '../context.mjs';
+import { runDevServer } from '../devServer.mjs';
+import { createMerkurConfig } from '../merkurConfig.mjs';
+import { runWidgetServer } from '../widgetServer.mjs';
+import { handleExit } from '../handleExit.mjs';
+
+export async function start({ args, command }) {
+  const context = await createContext();
+  let baseCliConfig = await createCLIConfig({ args, context, command });
+
+  const { merkurConfig, cliConfig } = await createMerkurConfig({
+    cliConfig: baseCliConfig,
+    context,
+  });
+
+  await handleExit({ context });
+
+  await runDevServer({ merkurConfig, cliConfig, context });
+  await runWidgetServer({ merkurConfig, cliConfig, context });
+}

package/src/commands/test.mjs

@@ -0,0 +1,42 @@
+import { spawn } from 'node:child_process';
+import process from 'node:process';
+
+import { createCLIConfig } from '../CLIConfig.mjs';
+import { createContext } from '../context.mjs';
+import { createLogger } from '../logger.mjs';
+import { createMerkurConfig } from '../merkurConfig.mjs';
+import { handleExit } from '../handleExit.mjs';
+
+export async function test({ args, command }) {
+  const context = await createContext();
+  let baseCliConfig = await createCLIConfig({ args, context, command });
+
+  const { merkurConfig, cliConfig } = await createMerkurConfig({
+    cliConfig: baseCliConfig,
+    context,
+  });
+  const logger = createLogger('testRunner', cliConfig);
+
+  await handleExit({ context });
+
+  args.unshift('./jest.config.js');
+  args.unshift('-c');
+
+  const runner = spawn('./node_modules/.bin/jest', args, {
+    env: {
+      ...process.env,
+      NODE_CONFIG_DIR: './server/config',
+      MERKUR_CONFIG: JSON.stringify(merkurConfig),
+      CLI_CONFIG: JSON.stringify(cliConfig),
+    },
+    stdio: 'inherit',
+  });
+
+  runner.on('spawn', () => {
+    logger.debug(`Run test runner ${args.join(', ')}`);
+  });
+  runner.on('exit', (code, signal) => {
+    logger.info(`child process exited with code ${code} and signal ${signal}`);
+    process.exit(code);
+  });
+}

package/src/context.mjs

@@ -0,0 +1,17 @@
+import { emitter, EMITTER_EVENTS, RESULT_KEY } from './emitter.mjs';
+
+export async function createContext() {
+  let event = {
+    context: {
+      task: {},
+      memory: {},
+      process: {},
+      server: {},
+    },
+    [RESULT_KEY]: 'context',
+  };
+
+  event = await emitter.emit(EMITTER_EVENTS.CONTEXT, event);
+
+  return event.context;
+}

package/src/devClient/WebSocketClient.mjs

@@ -0,0 +1,79 @@
+import { Observable } from '@esmj/observable';
+
+const MAX_RECONNECTION = 5;
+
+export class WebSocketClient extends Observable {
+  /**
+   * @type {?WebSocket}
+   */
+  #socket = null;
+  #reconnectionAttempt = 0;
+  #options = {};
+
+  constructor(options) {
+    super();
+    /**
+     * @type {Object}
+     */
+    this.#options = options;
+  }
+
+  init() {
+    this.#connect();
+
+    return this;
+  }
+
+  send(data) {
+    if (this.#socket) {
+      this.#socket.send(data);
+    }
+
+    return this;
+  }
+
+  destroy() {
+    if (this.#socket) {
+      this.#socket.close();
+      this.#socket = null;
+    }
+
+    return this;
+  }
+
+  #connect() {
+    this.#socket = Reflect.construct(WebSocket, [
+      `${this.#options.protocol}//${this.#options.host}`,
+    ]);
+
+    this.#socket.onopen = () => {
+      this.#reconnectionAttempt = 0;
+    };
+
+    this.#socket.onmessage = (event) => {
+      try {
+        let data = JSON.parse(event.data);
+
+        this.next(data);
+      } catch (error) {
+        console.error(error); // eslint-disable-line no-console
+      }
+    };
+
+    this.#socket.onerror = (error) => {
+      console.error(error); // eslint-disable-line no-console
+    };
+
+    this.#socket.onclose = () => {
+      if (this.#reconnectionAttempt >= MAX_RECONNECTION) {
+        return;
+      }
+
+      this.#reconnectionAttempt += 1;
+
+      setTimeout(() => {
+        this.#connect();
+      }, this.#reconnectionAttempt * 500);
+    };
+  }
+}

package/src/devClient/hmr.mjs

@@ -0,0 +1,92 @@
+export async function hmr({ to, command, changed }) {
+  if (to === 'browser' && command === 'refresh') {
+    await Promise.all(
+      changed.map(async (asset) => {
+        return new Promise((resolve) => {
+          const element = document.querySelector(`[data-name="${asset.name}"]`);
+
+          if (!element) {
+            location.reload();
+            return;
+          }
+
+          let newElement = null;
+          const searchParams = new URLSearchParams({ version: Math.random() });
+
+          if (element.nodeName === 'LINK') {
+            const url = new URL(element.href);
+            newElement = element.cloneNode();
+
+            newElement.onload = () => {
+              element.remove();
+              resolve();
+            };
+            newElement.onerror = () => {
+              element.remove();
+              resolve();
+            };
+            newElement.href = new URL(
+              `${url.origin}${url.pathname}?${searchParams.toString()}`,
+            );
+          }
+
+          if (element.nodeName === 'SCRIPT') {
+            const url = new URL(element.src);
+            newElement = document.createElement('script');
+            newElement.setAttribute('data-name', asset.name);
+            newElement.onload = () => {
+              element.remove();
+              resolve();
+            };
+            // TODO check bad scenario
+            newElement.onerror = () => {
+              element.remove();
+              resolve();
+            };
+
+            newElement.src = new URL(
+              `${url.origin}${url.pathname}?${searchParams.toString()}`,
+            );
+          }
+
+          element.parentNode.insertBefore(newElement, element.nextSibling);
+        });
+      }),
+    );
+
+    if (!changed.some((asset) => asset.name.endsWith('.js'))) {
+      return;
+    }
+
+    // HMR JS
+    const widgets = window.__merkur_dev__.widgets;
+    window.__merkur_dev__.widgets = [];
+
+    widgets.forEach(async (widget) => {
+      const {
+        props,
+        state,
+        $external,
+        name,
+        version,
+        containerSelector,
+        container,
+        slot,
+      } = widget;
+      const widgetProperties = {
+        props,
+        state,
+        $external,
+        name,
+        version,
+        containerSelector,
+        container,
+        slot,
+      };
+      const newWidget = await window.__merkur__.create(widgetProperties);
+
+      await widget.unmount();
+      await newWidget.mount();
+    });
+  }
+}

package/src/devClient/index.mjs

@@ -0,0 +1,26 @@
+import { WebSocketClient } from './WebSocketClient.mjs';
+
+import { reload } from './reload.mjs';
+import { hmr } from './hmr.mjs';
+
+const { __merkur_dev__ } = window;
+
+const webSocket = new WebSocketClient(__merkur_dev__.merkurConfig.socketServer);
+__merkur_dev__.webSocket = webSocket;
+__merkur_dev__.widgets = [];
+
+webSocket.init();
+
+webSocket.subscribe(reload);
+webSocket.subscribe(hmr);
+
+addEventListener('load', function hookMerkurCreate() {
+  const originalMerkurCreate = window.__merkur__.create;
+  window.__merkur__.create = async function devClientHook(...rest) {
+    const widget = await originalMerkurCreate(...rest);
+
+    __merkur_dev__.widgets.push(widget);
+
+    return widget;
+  };
+});

package/src/devClient/reload.mjs

@@ -0,0 +1,5 @@
+export async function reload({ to, command }) {
+  if (to === 'browser' && command === 'reload') {
+    location.reload();
+  }
+}

package/src/devServer.mjs

@@ -0,0 +1,142 @@
+import path from 'node:path';
+import fs from 'node:fs';
+import ejs from 'ejs';
+import chalk from 'chalk';
+
+import compression from 'compression';
+import express from 'express';
+
+import { createLogger } from './logger.mjs';
+import { COMMAND_NAME } from './commands/constant.mjs';
+
+function asyncMiddleware(fn) {
+  return (req, res, next) => {
+    Promise.resolve(fn(req, res, next)).catch(next);
+  };
+}
+
+export async function runDevServer({ context, merkurConfig, cliConfig }) {
+  const logger = createLogger('devServer', cliConfig);
+  const { protocol, host, port, staticPath, staticFolder, origin } =
+    merkurConfig.devServer;
+  const {
+    template,
+    templateFolder,
+    path: playgroundPath,
+    widgetHandler,
+  } = merkurConfig.playground;
+  const { cliFolder, command } = cliConfig;
+
+  return new Promise((resolve, reject) => {
+    const app = express();
+
+    const server = app
+      .use((req, res, next) => {
+        const headerOrigin = req.get('Origin');
+        // Allow cors
+        if (headerOrigin) {
+          res.header('Access-Control-Allow-Origin', `${origin}`);
+          res.header('Access-Control-Allow-Headers', '*');
+        }
+
+        next();
+      })
+      .use(compression())
+      .get(
+        playgroundPath,
+        asyncMiddleware(async (req, res) => {
+          const isDevCommand = command === COMMAND_NAME.DEV;
+
+          const widgetProperties = await widgetHandler(req);
+
+          // TODO refactor
+          if (isDevCommand) {
+            const { widgetServer } = merkurConfig;
+            widgetProperties.assets = widgetProperties?.assets?.map((asset) => {
+              if (typeof asset.source === 'string') {
+                asset.source = asset.source.replace(
+                  widgetServer.origin,
+                  origin,
+                );
+
+                return asset;
+              }
+
+              if (Object.keys(asset.source) !== 0) {
+                Object.keys(asset.source).map((assetVersion) => {
+                  if (typeof asset.source[assetVersion] === 'string') {
+                    asset.source[assetVersion] = asset.source[
+                      assetVersion
+                    ].replace(widgetServer.origin, origin);
+                  }
+                });
+              }
+
+              return asset;
+            });
+          }
+
+          const devClient = isDevCommand
+            ? fs.readFileSync(`${cliFolder}/../lib/devClient.mjs`, 'utf8')
+            : '';
+
+          const playgroundTemplate = ejs.compile(
+            fs.readFileSync(template, 'utf8'),
+            {
+              views: [path.dirname(template), templateFolder],
+            },
+          );
+
+          const { html, assets, ...restProperties } = widgetProperties;
+
+          res.status(200).send(
+            playgroundTemplate({
+              widgetProperties: restProperties,
+              assets,
+              merkurConfig,
+              devClient,
+              html,
+            }),
+          );
+        }),
+      )
+      .use(staticPath, express.static(staticFolder))
+      .use((req, res) => {
+        const key = req.path;
+        const record = context.memory[key];
+
+        if (key.endsWith('.js')) {
+          res.type('js');
+        }
+
+        if (key.endsWith('.css')) {
+          res.type('css');
+        }
+
+        res.status(record ? 200 : 404).send(record?.text);
+      })
+      .use((error, req, res, next) => {
+        if (res.headersSent) {
+          return next(error);
+        }
+
+        logger.error(error);
+        res.status(500).json({
+          error: {
+            message: `Something is wrong with the @merkur/cli/devServer: ${error.message}`,
+            stack: error.stack,
+          },
+        });
+      })
+      .listen(port, () => {
+        logger.info(`Playground: ${chalk.green(`${protocol}//${host}`)}`);
+        resolve(app);
+      });
+
+    context.server.devServer = server;
+
+    server.on('error', (error) => {
+      reject(error);
+    });
+  });
+}

package/src/emitter.mjs

@@ -0,0 +1,13 @@
+import { Emitter, RESULT_KEY } from '@esmj/emitter';
+
+const emitter = new Emitter();
+
+const EMITTER_EVENTS = {
+  MERKUR_CONFIG: 'onMerkurConfig',
+  CLI_CONFIG: 'onCliConfig',
+  CLI_CONTEXT: 'onCliContext',
+  TASK_CONFIG: 'onTaskConfig',
+  TASK_BUILD: 'onTaskBuild',
+};
+
+export { emitter, EMITTER_EVENTS, RESULT_KEY };

package/src/handleExit.mjs

@@ -0,0 +1,33 @@
+import process from 'node:process';
+
+export async function handleExit({ context }) {
+  const handleExit = async () => {
+    Object.values(context.process).forEach((childProcess) => {
+      childProcess.kill('SIGTERM');
+    });
+
+    Object.values(context.task).forEach((task) => {
+      task.dispose();
+    });
+
+    await Promise.all(
+      Object.values(context.server).map((server) => {
+        return new Promise((resolve) => {
+          const timer = setTimeout(() => {
+            resolve();
+          }, 100);
+          server.close(() => {
+            clearTimeout(timer);
+            resolve();
+          });
+        });
+      }),
+    );
+
+    process.exit(0);
+  };
+
+  process.on('SIGINT', handleExit);
+  process.on('SIGQUIT', handleExit);
+  process.on('SIGTERM', handleExit);
+}

package/src/index.mjs

@@ -0,0 +1,62 @@
+import process from 'node:process';
+
+import { createClient } from './websocket.mjs';
+
+let cliConfig, merkurConfig;
+
+export function resolveConfig() {
+  if (process.env.CLI_CONFIG && !cliConfig) {
+    cliConfig = JSON.parse(process.env.CLI_CONFIG);
+  }
+
+  if (process.env.MERKUR_CONFIG && !merkurConfig) {
+    merkurConfig = JSON.parse(process.env.MERKUR_CONFIG);
+  }
+
+  return {
+    merkurConfig,
+    cliConfig,
+  };
+}
+
+export function autoReload({ merkurConfig, cliConfig }) {
+  function reload() {
+    const client = createClient({ merkurConfig });
+    client.on('error', (error) => {
+      console.error(error);
+      client.terminate();
+    });
+
+    client.on('open', function open() {
+      setTimeout(() => {
+        client.send(
+          JSON.stringify({
+            to: 'browser',
+            command: 'reload',
+            changed: [],
+            errors: [],
+          }),
+        );
+        client.terminate();
+      }, 50);
+    });
+  }
+
+  if (cliConfig.watch) {
+    reload();
+
+    const handleExit = () => process.exit(0);
+    process.on('SIGINT', handleExit);
+    process.on('SIGQUIT', handleExit);
+    process.on('SIGTERM', handleExit);
+
+    // TODO improve for error-overlay
+    process.on('uncaughtException', () => {
+      reload();
+    });
+
+    process.on('unhandledRejection', () => {
+      reload();
+    });
+  }
+}