@merkur/cli 0.36.3 → 0.37.0

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, runTasks } = 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,9 +134,9 @@ emitter.on(
       );
     });
 
-    if (runTask.length !== 0) {
+    if (runTasks.length !== 0) {
       Object.keys(merkurConfig.task)
-        .filter((taskName) => !runTask.includes(taskName))
+        .filter((taskName) => !runTasks.includes(taskName))
         .forEach((taskKey) => {
           delete merkurConfig.task[taskKey];
         });
@@ -170,8 +176,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 +193,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 +256,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;
@@ -253,8 +277,20 @@ emitter.on(
     return merkurConfig;
   },
 );
-emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function devServer({ merkurConfig }) {
-  merkurConfig.HMR = merkurConfig?.HMR ?? true;
+
+emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function hmr({ merkurConfig }) {
+  merkurConfig.HMR = merkurConfig.HMR ?? true;
+
+  return merkurConfig;
+});
+
+emitter.on(EMITTER_EVENTS.MERKUR_CONFIG, function constant({ merkurConfig }) {
+  merkurConfig.constant = {
+    ...{
+      HOST: 'localhost',
+    },
+    ...merkurConfig.constant,
+  };
 
   return merkurConfig;
 });

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/runTask.mjs

@@ -1,6 +1,10 @@
+import fs from 'node:fs/promises';
+
 import esbuild from 'esbuild';
+import { createLogger } from './logger.mjs';
 
-export async function runTask({ cliConfig, build }) {
+export async function runTask({ cliConfig, build, config }) {
+  const logger = createLogger(undefined, cliConfig);
   const { watch } = cliConfig;
 
   //es6 === es2015, es9 === es2018, es11 === es2020 es13 ===es2022
@@ -9,6 +13,21 @@ export async function runTask({ cliConfig, build }) {
       ? 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();
     }

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(<%- JSON.stringify(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,25 @@
+<script>
+  window.addEventListener('load', function () {
+    __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/templates/head.ejs

@@ -1,8 +1,8 @@
 <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) %>;
+  window.__merkur_dev__.merkurConfig = <%- escapeToJSON(merkurConfig) %>;
+   window.__merkur_dev__.assets = <%- escapeToJSON(assets) %>;
+  window.__merkur_dev__.widgetProperties = <%- escapeToJSON(widgetProperties) %>;
   <%- devClient %>
 </script>
 <% assets.forEach((asset)=> { %>

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,10 +69,18 @@ export interface WidgetServer {
   staticPath: string;
   buildFolder: string;
   clusters: number;
+  cors: {
+    options: CorsOptions;
+  };
+}
+
+export interface Constant {
+  HOST: string;
 }
 
 export interface MerkurConfig {
   HMR: boolean;
+  constant: Constant;
   cliConfig: CLIConfig;
   extends: Extend[];
   task: {