@merkur/cli 0.36.4 → 0.37.1

package/src/merkurConfig.mjs

@@ -16,10 +16,12 @@ export async function createMerkurConfig({ cliConfig, context, args } = {}) {
 
   try {
     logger.debug(
-      `Load merkur config on path ${projectFolder}/${MERKUR_CONFIG_FILE}`,
+      `Load merkur config on path ${path.resolve(`${projectFolder}/${MERKUR_CONFIG_FILE}`)}`,
     );
 
-    const file = await import(`${projectFolder}/${MERKUR_CONFIG_FILE}`);
+    const file = await import(
+      path.resolve(`${projectFolder}/${MERKUR_CONFIG_FILE}`)
+    );
     merkurConfig = await file.default({
       cliConfig,
       context,
@@ -28,6 +30,7 @@ export async function createMerkurConfig({ cliConfig, context, args } = {}) {
     });
   } catch (error) {
     logger.error(error);
+    process.exit(1);
   }
 
   cliConfig = { ...cliConfig, ...(merkurConfig?.cliConfig ?? {}), ...args };
@@ -84,7 +87,7 @@ async function registerHooks({ merkurConfig }) {
 emitter.on(
   EMITTER_EVENTS.MERKUR_CONFIG,
   function defaultTask({ merkurConfig, cliConfig }) {
-    const { staticFolder, runTask } = cliConfig;
+    const { staticFolder } = cliConfig;
 
     merkurConfig.task = merkurConfig.task ?? {};
 
@@ -94,22 +97,25 @@ emitter.on(
         build: {
           platform: 'node',
           write: true,
+          metafile: false,
         },
       },
       es13: {
         name: 'es13',
+        folder: 'es13',
         build: {
           platform: 'browser',
-          outdir: `${staticFolder}/es13`,
+          outdir: path.resolve(`${staticFolder}/es13`),
           plugins: [devPlugin],
         },
       },
       es9: {
         name: 'es9',
+        folder: 'es9',
         build: {
           platform: 'browser',
           target: 'es2018',
-          outdir: `${staticFolder}/es9`,
+          outdir: path.resolve(`${staticFolder}/es9`),
         },
       },
     };
@@ -128,14 +134,6 @@ emitter.on(
       );
     });
 
-    if (runTask.length !== 0) {
-      Object.keys(merkurConfig.task)
-        .filter((taskName) => !runTask.includes(taskName))
-        .forEach((taskKey) => {
-          delete merkurConfig.task[taskKey];
-        });
-    }
-
     return merkurConfig;
   },
 );
@@ -170,8 +168,12 @@ 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`],
+      client: [
+        path.resolve(`${cliConfig.projectFolder}/src/entries/client.js`),
+      ],
+      server: [
+        path.resolve(`${cliConfig.projectFolder}/src/entries/server.js`),
+      ],
       ...merkurConfig.defaultEntries,
     };
 
@@ -183,8 +185,11 @@ emitter.on(
   EMITTER_EVENTS.MERKUR_CONFIG,
   function playground({ merkurConfig, cliConfig }) {
     merkurConfig.playground = {
-      template: `${cliConfig.cliFolder}/templates/playground.ejs`,
-      templateFolder: `${cliConfig.cliFolder}/templates`,
+      template: path.resolve(`${cliConfig.cliFolder}/templates/playground.ejs`),
+      templateFolder: path.resolve(`${cliConfig.cliFolder}/templates`),
+      serverTemplateFolder: path.resolve(
+        `${cliConfig.projectFolder}/server/playground/templates`,
+      ),
       path: '/',
       widgetHandler: async (req) => {
         const { protocol, host } = merkurConfig.widgetServer;
@@ -243,6 +248,17 @@ emitter.on(
       buildFolder: path.resolve(cliConfig.projectFolder, cliConfig.buildFolder),
       clusters: cliConfig.command === COMMAND_NAME.DEV ? 0 : 3,
       ...merkurConfig.widgetServer,
+      cors: {
+        options: {
+          origin: [
+            new RegExp('^https?://localhost(:[0-9]+)?$'),
+            new RegExp('^https?://127\\.0\\.0\\.1(:[0-9]+)?$'),
+          ],
+          methods: ['GET', 'HEAD', 'PUT', 'PATCH', 'POST', 'DELETE', 'OPTIONS'],
+          optionsSuccessStatus: 200,
+          ...merkurConfig.widgetServer?.cors?.options,
+        },
+      },
     };
 
     const { origin, host, protocol } = merkurConfig.widgetServer;

package/src/plugins/aliasPlugin.mjs

@@ -0,0 +1,26 @@
+import { createLogger } from '../logger.mjs';
+
+import chalk from 'chalk';
+
+export function aliasPlugin({ definition, cliConfig }) {
+  const { projectFolder } = cliConfig;
+  const logger = createLogger('aliasPlugin', cliConfig);
+  return {
+    name: 'aliasPlugin',
+    setup(build) {
+      logger.debug(`Setup plugin for "${chalk.cyan(definition.name)}" task.`);
+
+      build.onResolve({ filter: /^@\// }, async (args) => {
+        const result = await build.resolve(args.path.replace(/^@\//, `./`), {
+          kind: 'import-statement',
+          resolveDir: `${projectFolder}/src/`,
+        });
+
+        if (result.errors.length > 0) {
+          return { errors: result.errors };
+        }
+        return { path: result.path };
+      });
+    },
+  };
+}

package/src/plugins/devPlugin.mjs

@@ -72,7 +72,14 @@ export function devPlugin({ definition, merkurConfig, cliConfig }) {
         });
 
         client.on('open', function open() {
-          if (merkurConfig.HMR) {
+          if (
+            merkurConfig.HMR &&
+            !(
+              cliConfig.writeToDisk &&
+              changed.length === 0 &&
+              errors.length === 0
+            )
+          ) {
             client.send(
               JSON.stringify({
                 to: 'browser',

package/src/plugins/excludeVendorsFromSourceMapPlugin.mjs

@@ -0,0 +1,19 @@
+import fs from 'node:fs/promises';
+
+export function excludeVendorsFromSourceMapPlugin() {
+  return {
+    name: 'excludeVendorsFromSourceMapPlugin',
+    setup(build) {
+      build.onLoad({ filter: /node_modules/ }, async (args) => {
+        const contents = await fs.readFile(args.path, { encoding: 'utf8' });
+
+        return {
+          contents:
+            contents +
+            '\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJtYXBwaW5ncyI6IkEifQ==',
+          loader: 'default',
+        };
+      });
+    },
+  };
+}

package/src/plugins/metaPlugin.mjs

@@ -1,4 +1,5 @@
 import fs from 'node:fs/promises';
+import path from 'node:path';
 
 import { createLogger } from '../logger.mjs';
 import { time } from '../utils.mjs';
@@ -31,7 +32,9 @@ export function metaPlugin({ definition, config, cliConfig }) {
 
           metaInformation = await Promise.all(
             generatedFiles.map(async (file) => {
-              const stat = await fs.stat(`${projectFolder}/${file}`);
+              const stat = await fs.stat(
+                path.resolve(`${projectFolder}/${file}`),
+              );
 
               return { stat, file };
             }),

package/src/runBuild.mjs

@@ -0,0 +1,40 @@
+import fs from 'node:fs/promises';
+
+import esbuild from 'esbuild';
+import { createLogger } from './logger.mjs';
+
+export async function runBuild({ cliConfig, build, config }) {
+  const logger = createLogger(undefined, cliConfig);
+  const { watch } = cliConfig;
+
+  //es6 === es2015, es9 === es2018, es11 === es2020 es13 ===es2022
+  try {
+    const result = await (watch
+      ? esbuild.context(build)
+      : esbuild.build(build));
+
+    if (config.analyze && result.metafile) {
+      logger.log(
+        await esbuild.analyzeMetafile(result.metafile, {
+          verbose: cliConfig.verbose,
+        }),
+      );
+
+      if (build.outdir) {
+        await fs.writeFile(
+          `${build.outdir}/${build.entryNames ?? config.name}.meta.json`,
+          JSON.stringify(result.metafile),
+        );
+      }
+    }
+
+    if (watch) {
+      await result.watch();
+    }
+
+    return result;
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+}

package/src/runTask.mjs

@@ -1,21 +1,44 @@
-import esbuild from 'esbuild';
+import { createBuildConfig } from './buildConfig.mjs';
+import { createTaskConfig } from './taskConfig.mjs';
+import { runBuild } from './runBuild.mjs';
 
-export async function runTask({ cliConfig, build }) {
-  const { watch } = cliConfig;
+export async function runTask({ cliConfig, merkurConfig, context }) {
+  const { runTasks } = cliConfig;
+  let task = { ...merkurConfig.task };
 
-  //es6 === es2015, es9 === es2018, es11 === es2020 es13 ===es2022
-  try {
-    const result = await (watch
-      ? esbuild.context(build)
-      : esbuild.build(build));
+  if (runTasks.length !== 0) {
+    Object.keys(task)
+      .filter((taskName) => !runTasks.includes(taskName))
+      .forEach((taskKey) => {
+        delete task[taskKey];
+      });
+  }
+
+  return Object.keys(task).reduce(async (result, key) => {
+    const definition = task[key];
 
-    if (watch) {
-      await result.watch();
-    }
+    const config = await createTaskConfig({
+      definition,
+      merkurConfig,
+      cliConfig,
+      context,
+    });
+    const build = await createBuildConfig({
+      definition,
+      config,
+      merkurConfig,
+      cliConfig,
+      context,
+    });
+    result[definition.name] = await runBuild({
+      definition,
+      build,
+      merkurConfig,
+      cliConfig,
+      config,
+      context,
+    });
 
     return result;
-  } catch (error) {
-    console.error(error);
-    process.exit(1);
-  }
+  }, context.task);
 }

package/src/taskConfig.mjs

@@ -9,6 +9,8 @@ export async function createTaskConfig({
     config: {
       isServer: definition?.build?.platform === 'node',
       writeToDisk: definition?.build?.write ?? cliConfig.writeToDisk,
+      sourcemap: definition?.build?.sourcemap ?? cliConfig.sourcemap,
+      analyze: definition?.build?.metafile ?? cliConfig.analyze,
       ...definition.config,
     },
     definition,

package/src/templates/body.ejs

@@ -1,18 +1,6 @@
 <% if(widgetProperties?.slot?.headline?.html){ %>
-  <div class="headline-view"><%- widgetProperties && widgetProperties.slot && widgetProperties.slot.headline &&
-      widgetProperties.slot.headline.html %></div>
+  <div class="<%= (widgetProperties?.slot?.headline?.containerSelector ?? 'merkur-headline').replace('.', '') %>">
+    <%- widgetProperties?.slot?.headline?.html %>
+  </div>
 <% } %>
-<div class="merkur-view"><%- html %></div>
-<script>
-  window.addEventListener('load', function () {
-    __merkur__.create(<%- escapeToJSON(widgetProperties) %>)
-      .then(function (widget) {
-        widget.containerSelector = '.merkur-view';
-        if (widget?.slot?.headline) {
-          widget.slot.headline.containerSelector = '.headline-view';
-        }
-
-        widget.mount();
-      });
-  });
-</script>
+<div class="<%= (widgetProperties?.containerSelector ?? 'merkur-main').replace('.', '') %>"><%- html %></div>

package/src/templates/footer.ejs

@@ -0,0 +1,30 @@
+<script>
+  window.addEventListener('load', function () {
+    if (!window.__merkur__) {
+      console.error('Merkur is not available in the global scope. Make sure you have included Merkur in your project.');
+      return;
+    }
+
+    window.__merkur__.create(<%- escapeToJSON(widgetProperties) %>)
+      .then(function (widget) {
+        widget.containerSelector = widget.containerSelector ?? '.merkur-main';
+
+        if (widget.slot && Object.keys(widget.slot).length > 0) {
+          Object.keys(widget.slot).forEach(function (slotName) {
+            widget.slot[slotName].containerSelector = widget.slot[slotName].containerSelector ?? '.merkur-' + slotName;
+          });
+        }
+
+        // support for router plugin
+        if (widget.router) {
+          widget.on('@merkur/plugin-router.redirect', function (_, url) {
+            var parsedUrl = new URL(url.url);
+            window.location = parsedUrl.href;
+          });
+        }
+
+        // mount widget to DOM
+        widget.mount();
+      });
+  });
+</script>

package/src/websocket.mjs

@@ -16,7 +16,6 @@ export async function runSocketServer({ merkurConfig, context }) {
   try {
     const server = new WebSocketServer({
       port: merkurConfig.socketServer.port,
-      host: merkurConfig.constant.HOST,
     });
 
     server.on('connection', function connection(ws) {

package/types.d.ts

@@ -1,5 +1,6 @@
 import type { BuildOptions } from 'esbuild';
 import type { Request, Response } from '@types/express';
+import type { CorsOptions } from '@types/cors';
 
 export interface CLIConfig {
   environment: string;
@@ -30,6 +31,7 @@ export type Extend =
 
 export interface Task {
   name: 'es13' | 'es9' | 'node' | string;
+  folder: 'es13' | 'es9' | string;
   build: BuildOptions;
   [key: string]: any;
 }
@@ -46,6 +48,7 @@ export interface DevServer {
 export interface Playground {
   template: string;
   templateFolder: string;
+  serverTemplateFolder: string;
   path: string;
   widgetHandler(req: Request, res: Response): Record<string, unknown>;
   widgetParams(req: Request): URLSearchParams;
@@ -66,6 +69,9 @@ export interface WidgetServer {
   staticPath: string;
   buildFolder: string;
   clusters: number;
+  cors: {
+    options: CorsOptions;
+  };
 }
 
 export interface Constant {
@@ -102,7 +108,4 @@ export interface MerkurConfig {
   }) => Partial<BuildOptions>;
 }
 
-export function defineConfig({
-  merkurConfig: MerkurConfig,
-  cliConfig: CLIConfig,
-}): Partial<MerkurConfig>;
+export function defineConfig({ cliConfig: CLIConfig }): Partial<MerkurConfig>;