@merkur/cli 0.35.0

package/src/logger.mjs

@@ -0,0 +1,77 @@
+import chalk from 'chalk';
+
+export class Logger {
+  #identifier = null;
+  #cliConfig = null;
+
+  constructor(identifier, cliConfig) {
+    this.#identifier = identifier;
+    this.#cliConfig = cliConfig;
+  }
+
+  #log(prefix, color, message) {
+    if (prefix) {
+      process.stdout.write(
+        color(`${prefix}: ${this.#identifier ? `(${this.#identifier}) ` : ''}`),
+      );
+    }
+
+    try {
+      message = message ?? typeof message;
+      process.stdout.write(message);
+    } catch (error) {
+      console.error(error);
+    }
+
+    process.stdout.write('\n');
+  }
+
+  info(message, options) {
+    // if (!this.#cliConfig?.verbose) {
+    //   return;
+    // }
+
+    this.#log('info', chalk.bold.cyan, message, options);
+  }
+
+  log(message, options) {
+    this.#log(null, chalk.bold.cyan, message, options);
+  }
+
+  debug(message, options) {
+    if (!this.#cliConfig?.verbose) {
+      return;
+    }
+
+    this.#log('debug', chalk.bold.cyan, message, options);
+  }
+
+  warn(message, options) {
+    this.#log('warn', chalk.bold.yellow, message, options);
+  }
+
+  error(message, options) {
+    if (message instanceof Error) {
+      const [_, ...stackLines] = message.stack?.split('\n') ?? ''; //eslint-disable-line
+
+      this.#log(
+        'error',
+        chalk.bold.red,
+        `${chalk.underline(message.name)}: ${message.message.trim()}`,
+        options,
+      );
+
+      process.stdout.write(`\n${chalk.gray(stackLines.join('\n'))}\n`);
+
+      if (message?.cause instanceof Error) {
+        this.error(message.cause, options);
+      }
+    } else {
+      this.#log('error', chalk.bold.red, message, options);
+    }
+  }
+}
+
+export function createLogger(name, cliConfig = {}) {
+  return new Logger(name, cliConfig);
+}

package/src/merkurConfig.mjs

@@ -0,0 +1,252 @@
+import path from 'node:path';
+
+import { EMITTER_EVENTS, emitter, RESULT_KEY } from './emitter.mjs';
+import { createLogger } from './logger.mjs';
+import { devPlugin } from './plugins/devPlugin.mjs';
+import { deepMerge } from './utils.mjs';
+import { COMMAND_NAME } from './commands/constant.mjs';
+
+const MERKUR_CONFIG_FILE = 'merkur.config.mjs';
+
+export async function createMerkurConfig({ cliConfig, context } = {}) {
+  const logger = createLogger('merkurConfig', cliConfig);
+  const { projectFolder } = cliConfig;
+  let merkurConfig;
+
+  try {
+    logger.debug(
+      `Load merkur config on path ${projectFolder}/${MERKUR_CONFIG_FILE}`,
+    );
+
+    const file = await import(`${projectFolder}/${MERKUR_CONFIG_FILE}`);
+    merkurConfig = await file.default({
+      cliConfig,
+      context,
+      emitter,
+      EMITTER_EVENTS,
+    });
+  } catch (error) {
+    logger.error(error);
+  }
+
+  cliConfig = { ...(merkurConfig?.cliConfig ?? {}), ...cliConfig };
+
+  await loadExtender({ merkurConfig, cliConfig, logger, context });
+
+  await registerHooks({ merkurConfig });
+
+  let event = {
+    merkurConfig: {
+      ...merkurConfig,
+    },
+    cliConfig,
+    context,
+    [RESULT_KEY]: 'merkurConfig',
+  };
+
+  event = await emitter.emit(EMITTER_EVENTS.MERKUR_CONFIG, event);
+
+  return event;
+}
+
+async function loadExtender({ merkurConfig, cliConfig, logger, context }) {
+  await Promise.all(
+    merkurConfig?.extends?.map(async (modulePath) => {
+      try {
+        const file = await import(`${modulePath}`);
+        await file.default({
+          cliConfig,
+          merkurConfig,
+          context,
+          emitter,
+          EMITTER_EVENTS,
+        });
+      } catch (error) {
+        logger.error(error);
+      }
+    }) ?? [],
+  );
+}
+
+async function registerHooks({ merkurConfig }) {
+  Object.values(EMITTER_EVENTS)
+    .filter((eventName) => eventName in merkurConfig)
+    .forEach((eventName) => {
+      emitter.on(eventName, function autoRegister(event) {
+        return merkurConfig[eventName](event);
+      });
+    });
+}
+
+emitter.on(
+  EMITTER_EVENTS.MERKUR_CONFIG,
+  function defaultTask({ merkurConfig, cliConfig }) {
+    const { staticFolder, runTask } = cliConfig;
+
+    merkurConfig.task = merkurConfig.task ?? {};
+
+    const defaultTaskDefinition = {
+      node: {
+        name: 'node',
+        build: {
+          platform: 'node',
+          write: true,
+        },
+      },
+      es13: {
+        name: 'es13',
+        build: {
+          platform: 'browser',
+          outdir: `${staticFolder}/es13`,
+          plugins: [devPlugin],
+        },
+      },
+      es9: {
+        name: 'es9',
+        build: {
+          platform: 'browser',
+          target: 'es2018',
+          outdir: `${staticFolder}/es9`,
+        },
+      },
+    };
+
+    const tasks = [
+      ...new Set([
+        ...Object.keys(merkurConfig.task ?? {}),
+        ...Object.keys(defaultTaskDefinition),
+      ]),
+    ];
+
+    tasks.forEach((key) => {
+      merkurConfig.task[key] = deepMerge(
+        defaultTaskDefinition[key] ?? {},
+        merkurConfig.task[key] ?? {},
+      );
+    });
+
+    if (runTask.length !== 0) {
+      Object.keys(merkurConfig.task)
+        .filter((taskName) => !runTask.includes(taskName))
+        .forEach((taskKey) => {
+          delete merkurConfig.task[taskKey];
+        });
+    }
+
+    return merkurConfig;
+  },
+);
+
+emitter.on(
+  EMITTER_EVENTS.MERKUR_CONFIG,
+  function devServer({ merkurConfig, cliConfig }) {
+    merkurConfig.devServer = {
+      ...merkurConfig.devServer,
+      ...{
+        protocol: 'http:',
+        host: 'localhost:4445',
+        port: 4445,
+        staticPath: cliConfig.staticPath,
+        staticFolder: path.resolve(
+          cliConfig.projectFolder,
+          cliConfig.staticFolder,
+        ),
+      },
+    };
+
+    const { origin, host, protocol } = merkurConfig.devServer;
+
+    merkurConfig.devServer.origin =
+      origin ?? new URL(`${protocol}//${host}`).origin;
+
+    return merkurConfig;
+  },
+);
+
+emitter.on(
+  EMITTER_EVENTS.MERKUR_CONFIG,
+  function defaultEntries({ merkurConfig, cliConfig }) {
+    merkurConfig.defaultEntries = {
+      client: [`${cliConfig.projectFolder}/src/entries/client.js`],
+      server: [`${cliConfig.projectFolder}/src/entries/server.js`],
+      ...merkurConfig.defaultEntries,
+    };
+
+    return merkurConfig;
+  },
+);
+
+emitter.on(
+  EMITTER_EVENTS.MERKUR_CONFIG,
+  function playground({ merkurConfig, cliConfig }) {
+    merkurConfig.playground = {
+      template: `${cliConfig.cliFolder}/templates/playground.ejs`,
+      templateFolder: `${cliConfig.cliFolder}/templates`,
+      path: '/',
+      widgetHandler: async (req) => {
+        const { protocol, host } = merkurConfig.widgetServer;
+        let widgetProperties = null;
+        const response = await fetch(
+          `${protocol}//${host}/widget?${new URLSearchParams(req.params)}`,
+        );
+
+        widgetProperties = await response.json();
+        if (!response.ok) {
+          const error = new Error(widgetProperties?.error?.message);
+          error.stack = widgetProperties?.error?.stack;
+          throw error;
+        }
+
+        return widgetProperties;
+      },
+      ...merkurConfig.playground,
+    };
+
+    return merkurConfig;
+  },
+);
+
+emitter.on(
+  EMITTER_EVENTS.MERKUR_CONFIG,
+  function socketServer({ merkurConfig }) {
+    merkurConfig.socketServer = {
+      protocol: 'ws:',
+      host: 'localhost:4321',
+      port: 4321,
+      ...merkurConfig.socketServer,
+    };
+
+    return merkurConfig;
+  },
+);
+
+emitter.on(
+  EMITTER_EVENTS.MERKUR_CONFIG,
+  function widgetServer({ merkurConfig, cliConfig }) {
+    merkurConfig.widgetServer = {
+      protocol: 'http:',
+      host: 'localhost:4444',
+      port: 4444,
+      staticPath: cliConfig.staticPath,
+      staticFolder: path.resolve(
+        cliConfig.projectFolder,
+        cliConfig.staticFolder,
+      ),
+      buildFolder: path.resolve(cliConfig.projectFolder, cliConfig.buildFolder),
+      clusters: cliConfig.command === COMMAND_NAME.DEV ? 0 : 3,
+      ...merkurConfig.widgetServer,
+    };
+
+    const { origin, host, protocol } = merkurConfig.widgetServer;
+
+    merkurConfig.widgetServer.origin =
+      origin ?? new URL(`${protocol}//${host}`).origin;
+
+    return merkurConfig;
+  },
+);
+emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function devServer({ merkurConfig }) {
+  merkurConfig.HMR = merkurConfig?.HMR ?? true;
+
+  return merkurConfig;
+});

package/src/plugins/devPlugin.mjs

@@ -0,0 +1,97 @@
+import fs from 'node:fs';
+
+import chalk from 'chalk';
+
+import { createClient } from '../websocket.mjs';
+
+import { createLogger } from '../logger.mjs';
+
+export function devPlugin({ definition, merkurConfig, cliConfig }) {
+  const logger = createLogger('devPlugin', cliConfig);
+  const { projectFolder, buildDir } = cliConfig;
+  let memory = {};
+  let changed = [];
+  let errors = [];
+
+  return {
+    name: 'devPlugin',
+    setup(build) {
+      logger.debug(`Setup plugin for "${chalk.cyan(definition.name)}" task.`);
+
+      if (cliConfig.isProduction) {
+        return;
+      }
+
+      build.onEnd((result) => {
+        errors = result.errors.map((error) => {
+          const source = fs.readFileSync(
+            `${projectFolder}/${error.location.file}`,
+            'utf-8',
+          );
+
+          return {
+            ...error,
+            message: error.text,
+            source,
+            columnNumber: error.location.column,
+            fileName: error.location.file,
+            lineNumber: error.location.line,
+          };
+        });
+
+        changed =
+          result?.outputFiles?.reduce((changed, file) => {
+            const name = file.path
+              .replace(projectFolder, '')
+              .replace(buildDir, '')
+              .split('/')
+              .pop();
+
+            const isMapFile = name.endsWith('.map');
+
+            if (
+              (!memory[name] || memory[name].hash !== file.hash) &&
+              !isMapFile
+            ) {
+              memory[name] = file;
+              changed.push({ name });
+            }
+
+            return changed;
+          }, []) ?? [];
+
+        const client = createClient({ merkurConfig });
+        client.on('error', (error) => {
+          logger.error(error);
+          client.terminate();
+        });
+
+        client.on('open', function open() {
+          if (merkurConfig.HMR) {
+            client.send(
+              JSON.stringify({
+                to: 'browser',
+                command: 'refresh',
+                changed,
+                errors,
+              }),
+            );
+            client.terminate();
+          } else {
+            setTimeout(() => {
+              client.send(
+                JSON.stringify({
+                  to: 'browser',
+                  command: 'reload',
+                  changed,
+                  errors,
+                }),
+              );
+              client.terminate();
+            }, 50);
+          }
+        });
+      });
+    },
+  };
+}

package/src/plugins/memoryStaticPlugin.mjs

@@ -0,0 +1,84 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import chalk from 'chalk';
+
+import { createLogger } from '../logger.mjs';
+
+export function memoryStaticPlugin({ definition, cliConfig, context }) {
+  const logger = createLogger('memoryStaticPlugin', cliConfig);
+  let manifest = {};
+  let manifestHash = '';
+
+  return {
+    name: 'memoryStaticPlugin',
+    setup(build) {
+      const { projectFolder, buildFolder } = cliConfig;
+      logger.debug(`Setup plugin for "${chalk.cyan(definition.name)}" task.`);
+
+      build.onEnd(async (result) => {
+        if (result.errors.length) {
+          return;
+        }
+
+        await generateManifest(result);
+        await saveGeneratedFileToMemory(result);
+      });
+
+      async function generateManifest(result) {
+        const pathToOutDir = path.resolve(
+          projectFolder,
+          definition?.build?.outdir,
+        );
+        result.outputFiles.map((file) => {
+          const key = file.path.replace(pathToOutDir, '').replace('/', '');
+
+          manifest[key] = key;
+        });
+        let newManifestHash = JSON.stringify(manifest);
+
+        if (newManifestHash !== manifestHash) {
+          try {
+            await createFolderStructure(pathToOutDir);
+
+            await fs.writeFile(
+              `${pathToOutDir}/manifest.json`,
+              JSON.stringify(manifest),
+            );
+            manifestHash = newManifestHash;
+
+            logger.debug(
+              `Create manifest for ${definition.name} to ${definition?.build?.outdir} folder.`,
+            );
+          } catch (error) {
+            logger.error(error);
+          }
+        }
+      }
+
+      async function saveGeneratedFileToMemory(result) {
+        result.outputFiles.map((file) => {
+          const key = file.path.replace(
+            path.resolve(projectFolder, buildFolder),
+            '',
+          );
+          const size = Math.round(
+            (result?.metafile?.outputs?.[`${path.normalize(buildFolder)}${key}`]
+              ?.bytes ?? 0) / 1024,
+          );
+
+          logger.debug(`Save file "${key}", size ${size} [kB] to memory.`);
+          context.memory[key] = file;
+        });
+      }
+    },
+  };
+}
+
+async function createFolderStructure(dir) {
+  try {
+    await fs.access(dir, fs.constants.R_OK);
+  } catch {
+    await fs.mkdir(dir, { recursive: true });
+  }
+}

package/src/plugins/metaPlugin.mjs

@@ -0,0 +1,53 @@
+import fs from 'node:fs/promises';
+
+import { createLogger } from '../logger.mjs';
+import { time } from '../utils.mjs';
+
+import chalk from 'chalk';
+
+export function metaPlugin({ definition, config, cliConfig }) {
+  const { projectFolder } = cliConfig;
+  const logger = createLogger('metaPlugin', cliConfig);
+  return {
+    name: 'metaPlugin',
+    setup(build) {
+      let timer = null;
+      logger.debug(`Setup plugin for "${chalk.cyan(definition.name)}" task.`);
+
+      build.onStart(() => {
+        timer = time();
+      });
+
+      build.onEnd(async (result) => {
+        if (result.errors.length) {
+          return;
+        }
+        let metaInformation = [];
+
+        if (config.writeToDisk) {
+          const generatedFiles = Object.keys(
+            result?.metafile?.outputs ?? {},
+          ).filter((file) => !file.endsWith('.map'));
+
+          metaInformation = await Promise.all(
+            generatedFiles.map(async (file) => {
+              const stat = await fs.stat(`${projectFolder}/${file}`);
+
+              return { stat, file };
+            }),
+          );
+        }
+
+        logger.log(
+          `Task ${chalk.bold.green(definition.name)} complete for ${chalk.bold.green(timer())} [ms]`,
+        );
+
+        metaInformation.map(({ file, stat }) => {
+          logger.log(
+            `  ->  ${chalk.bold(file)}, ${Math.round(stat.size / 1024)} kB`,
+          );
+        });
+      });
+    },
+  };
+}

package/src/runTask.mjs

@@ -0,0 +1,21 @@
+import esbuild from 'esbuild';
+
+export async function runTask({ cliConfig, build }) {
+  const { watch } = cliConfig;
+
+  //es6 === es2015, es9 === es2018, es11 === es2020 es13 ===es2022
+  try {
+    const result = await (watch
+      ? esbuild.context(build)
+      : esbuild.build(build));
+
+    if (watch) {
+      await result.watch();
+    }
+
+    return result;
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}

package/src/taskConfig.mjs

@@ -0,0 +1,23 @@
+import { EMITTER_EVENTS, emitter, RESULT_KEY } from './emitter.mjs';
+
+export async function createTaskConfig({
+  cliConfig,
+  definition,
+  context,
+} = {}) {
+  let event = {
+    config: {
+      isServer: definition?.build?.platform === 'node',
+      writeToDisk: definition?.build?.write ?? cliConfig.writeToDisk,
+      ...definition.config,
+    },
+    definition,
+    cliConfig,
+    context,
+    [RESULT_KEY]: 'config',
+  };
+
+  event = await emitter.emit(EMITTER_EVENTS.TASK_CONFIG, event);
+
+  return event.config;
+}

package/src/templates/head.ejs

@@ -0,0 +1,20 @@
+<script>
+  window.__merkur_dev__ = window.__merkur_dev__ || {};
+  window.__merkur_dev__.merkurConfig = <%- JSON.stringify(merkurConfig) %>;
+   window.__merkur_dev__.assets = <%- JSON.stringify(assets) %>;
+  window.__merkur_dev__.widgetProperties = <%- JSON.stringify(widgetProperties) %>;
+  <%- devClient %>
+</script>
+<% assets.forEach((asset)=> { %>
+  <%if (asset.type==='stylesheet' ) { %>
+    <link rel='stylesheet' href='<%= asset.source %>' data-name="<%= asset.name %>" />
+  <% } %>
+  <%if (asset.type==='script' ) { %>
+    <%if (typeof asset.source==='string' ) { %>
+      <script src='<%= asset.source %>' defer='true' data-name="<%= asset.name %>"></script>
+    <% } %>
+    <%if (typeof asset.source==='object' ) { %>
+      <script src='<%= asset.source.es13 %>' defer='true' data-name="<%= asset.name %>"></script>
+    <% } %>
+  <% } %>
+<% }); %>

package/src/templates/playground.ejs

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%- include('./head.ejs', {assets, merkurConfig, devClient, widgetProperties}) %>
+<title>MERKUR - widget</title>
+</head>
+
+<body>
+  <div class="headline-view"><%- widgetProperties && widgetProperties.slot && widgetProperties.slot.headline.html %>
+  </div>
+  <div class="merkur-view"><%- html %></div>
+  <script>
+    window.addEventListener('load', function () {
+      __merkur__.create(<%- JSON.stringify(widgetProperties) %>)
+        .then(function (widget) {
+          widget.containerSelector = '.merkur-view';
+          widget.slot.headline.containerSelector = '.headline-view';
+
+          widget.mount();
+        });
+    });
+  </script>
+    <%- include('./footer.ejs', {assets, merkurConfig, devClient, widgetProperties}) %>
+</body>
+
+</html>

package/src/utils.mjs

@@ -0,0 +1,33 @@
+export function time() {
+  const start = process.hrtime.bigint();
+
+  return () => Number((process.hrtime.bigint() - start) / BigInt(1e6));
+}
+
+const PROTECTED_FIELDS = ['__proto__', 'prototype', 'constructor'];
+export function deepMerge(target, source) {
+  const isObject = (obj) => !!obj && obj.constructor === Object;
+
+  if (!isObject(target) || !isObject(source)) {
+    return source;
+  }
+
+  Object.keys(source).forEach((key) => {
+    if (PROTECTED_FIELDS.includes(key)) {
+      return;
+    }
+
+    const targetValue = target[key];
+    const sourceValue = source[key];
+
+    if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+      target[key] = targetValue.concat(sourceValue);
+    } else if (isObject(targetValue) && isObject(sourceValue)) {
+      target[key] = deepMerge(Object.assign({}, targetValue), sourceValue);
+    } else {
+      target[key] = sourceValue;
+    }
+  });
+
+  return target;
+}