@merkur/cli 0.35.3 → 0.35.5

package/bin/merkur.mjs

@@ -23,12 +23,24 @@ program
   .option('--buildFolder <string>', 'Build folder.')
   .option('--staticFolder <string>', 'Static folder.')
   .option('--staticPath <string>', 'The static path for dev server and widget server.')
+  .option('--hasRunDevServer', 'Flag for starting dev server')
+  .option('--hasRunWidgetServer', 'Flag for starting widget server')
   .option('--inspect', 'Debugging widget server')
   .option('--verbose', 'Verbose mode which show debug information.')
   .version(packageFile.version);
 
 program.command(COMMAND_NAME.DEV).description('Dev command').action(async (options, cmd) => {
-  const args = { ...{ writeToDisk: false, watch: true, runTask: ['node', 'es13'] }, ...cmd.optsWithGlobals(), ...options };
+  const args = {
+    ...{
+      writeToDisk: false,
+      watch: true,
+      runTask: ['node', 'es13'],
+      hasRunDevServer: true,
+      hasRunWidgetServer: true,
+    },
+    ...cmd.optsWithGlobals(),
+    ...options,
+  };
   process.env.NODE_ENV = process.env.NODE_ENV ?? 'development';
 
   dev({ args, command: COMMAND_NAME.DEV });
@@ -45,7 +57,7 @@ program.command(COMMAND_NAME.BUILD).action(async (options, cmd) => {
 
 program.command(COMMAND_NAME.START).action(async (options, cmd) => {
   const args = {
-    ...{ watch: false }, ...cmd.optsWithGlobals(), ...options
+    ...{ watch: false, hasRunWidgetServer: true }, ...cmd.optsWithGlobals(), ...options
   };
   process.env.NODE_ENV = process.env.NODE_ENV ?? 'production';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkur/cli",
-  "version": "0.35.3",
+  "version": "0.35.5",
   "description": "Merkur is tiny and extensible library for creating front-end microservices.",
   "bin": {
     "merkur": "./bin/merkur.mjs"
@@ -54,6 +54,7 @@
     "esbuild": "^0.20.1",
     "esbuild-plugin-manifest": "^1.0.3",
     "express": "^4.18.2",
+    "npm-run-path": "^5.3.0",
     "ws": "^8.16.0"
   },
   "devDependencies": {
@@ -65,5 +66,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "6b65a5581c1c32a14479c3bb4702c394592d0a20"
+  "gitHead": "e5507ce65843bc50a615a3dd17c10ab2b59b3173"
 }

package/src/CLIConfig.mjs

@@ -20,6 +20,8 @@ export async function createCLIConfig({ args, context, command } = {}) {
       buildFolder: args?.buildFolder ?? './build',
       staticFolder: args?.staticFolder ?? './build/static',
       staticPath: args?.staticPath ?? '/static',
+      hasRunDevServer: args?.hasRunDevServer ?? false,
+      hasRunWidgetServer: args?.hasRunWidgetServer ?? false,
       inspect: args.inspect ?? false,
       verbose: args.verbose ?? false,
     },

package/src/commands/dev.mjs

@@ -53,7 +53,9 @@ export async function dev({ args, command }) {
 
   await Promise.all(Object.values(task));
 
-  await runDevServer({ merkurConfig, cliConfig, context });
+  cliConfig.hasRunDevServer &&
+    (await runDevServer({ merkurConfig, cliConfig, context }));
   await runSocketServer({ merkurConfig, cliConfig, context });
-  await runWidgetServer({ merkurConfig, cliConfig, context });
+  cliConfig.hasRunWidgetServer &&
+    (await runWidgetServer({ merkurConfig, cliConfig, context }));
 }

package/src/commands/test.mjs

@@ -1,6 +1,8 @@
 import { spawn } from 'node:child_process';
 import process from 'node:process';
 
+import { npmRunPath } from 'npm-run-path';
+
 import { createCLIConfig } from '../CLIConfig.mjs';
 import { createContext } from '../context.mjs';
 import { createLogger } from '../logger.mjs';
@@ -25,6 +27,7 @@ export async function test({ args, command }) {
   const runner = spawn('./node_modules/.bin/jest', args, {
     env: {
       ...process.env,
+      PATH: npmRunPath(),
       NODE_CONFIG_DIR: './server/config',
       MERKUR_CONFIG: JSON.stringify(merkurConfig),
       CLI_CONFIG: JSON.stringify(cliConfig),

package/src/devServer.mjs

@@ -25,8 +25,7 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
     path: playgroundPath,
     widgetHandler,
   } = merkurConfig.playground;
-  const { cliFolder, command, writeToDisk, buildFolder, projectFolder } =
-    cliConfig;
+  const { cliFolder, command, writeToDisk } = cliConfig;
 
   return new Promise((resolve, reject) => {
     const app = express();
@@ -61,14 +60,18 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
                 );
 
                 if (asset.type.includes('inline')) {
-                  const path = asset.source.replace(origin, '');
+                  const assetPath = asset.source.replace(origin, '');
                   if (writeToDisk) {
-                    asset.source = fs.readFileSync(
-                      path.join(path.resolve(projectFolder, buildFolder), path),
-                      'utf8',
-                    );
+                    // widget Server Handle right inline
+                    // asset.source = fs.readFileSync(
+                    //   path.join(
+                    //     path.resolve(projectFolder, buildFolder),
+                    //     assetPath,
+                    //   ),
+                    //   'utf8',
+                    // );
                   } else {
-                    asset.source = context.memory[path]?.text;
+                    asset.source = context.memory[assetPath]?.text;
                   }
                 }
 
@@ -84,17 +87,21 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
                   }
 
                   if (asset.type.includes('inline')) {
-                    const path = asset.source.replace(origin, '');
+                    const assetPath = asset.source[assetVersion].replace(
+                      origin,
+                      '',
+                    );
                     if (writeToDisk) {
-                      asset.source = fs.readFileSync(
-                        path.join(
-                          path.resolve(projectFolder, buildFolder),
-                          path,
-                        ),
-                        'utf8',
-                      );
+                      // widget Server Handle right inline
+                      // asset.source[assetVersion] = fs.readFileSync(
+                      //   path.join(
+                      //     path.resolve(projectFolder, buildFolder),
+                      //     assetPath,
+                      //   ),
+                      //   'utf8',
+                      // );
                     } else {
-                      asset.source = context.memory[path]?.text;
+                      asset.source = context.memory[assetPath]?.text;
                     }
                   }
                 });

package/src/merkurConfig.mjs

@@ -186,8 +186,10 @@ emitter.on(
       widgetHandler: async (req) => {
         const { protocol, host } = merkurConfig.widgetServer;
         let widgetProperties = null;
+        const params = merkurConfig.playground.widgetParams(req);
+
         const response = await fetch(
-          `${protocol}//${host}/widget?${new URLSearchParams(req.params)}`,
+          `${protocol}//${host}/widget${params?.size > 0 ? `?${params}` : ``}`,
         );
 
         widgetProperties = await response.json();
@@ -199,6 +201,9 @@ emitter.on(
 
         return widgetProperties;
       },
+      widgetParams: (req) => {
+        return new URLSearchParams(req.query);
+      },
       ...merkurConfig.playground,
     };
 

package/src/templates/head.ejs

@@ -11,7 +11,7 @@
   <% } %>
   <%if (asset.type==='inlineStyle' ) { %>
     <style data-name="<%= asset.name %>">
-      <%= asset.source %>
+      <%- asset.source %>
     </style>
   <% } %>
 
@@ -23,4 +23,17 @@
       <script src='<%= asset.source.es13 %>' defer='true' data-name="<%= asset.name %>"></script>
     <% } %>
   <% } %>
+
+  <%if (asset.type==='inlineScript' ) { %>
+    <%if (typeof asset.source==='string' ) { %>
+      <script data-name="<%= asset.name %>">
+        <%- asset.source %>
+      </script>
+    <% } %>
+    <%if (typeof asset.source==='object' ) { %>
+      <script data-name="<%= asset.name %>">
+        <%- asset.source %>
+      </script>
+    <% } %>
+  <% } %>
 <% }); %>

package/types.d.ts

@@ -0,0 +1,103 @@
+import type { BuildOptions } from 'esbuild';
+import type { Request, Response } from '@types/express';
+
+export interface CLIConfig {
+  environment: string;
+  isProduction: boolean;
+  watch: boolean;
+  writeToDisk: boolean;
+  outFile: string;
+  port: number;
+  runTask: string[];
+  devServerPort: number;
+  projectFolder: string;
+  cliFolder: string;
+  buildFolder: string;
+  staticFolder: string;
+  staticPath: string;
+  hasRunDevServer: boolean;
+  hasRunWidgetServer: boolean;
+  inspect: boolean;
+  verbose: boolean;
+}
+
+export type Extend =
+  | '@merkur/preact/cli'
+  | '@merkur/svelte/cli'
+  | '@merkur/uhtml/cli'
+  | string
+  | undefined;
+
+export interface Task {
+  name: 'es13' | 'es9' | 'node' | string;
+  build: BuildOptions;
+  [key: string]: any;
+}
+
+export interface DevServer {
+  protocol: string;
+  host: string;
+  port: number;
+  origin: string;
+  staticPath: string;
+  staticFolder: string;
+}
+
+export interface Playground {
+  template: string;
+  templateFolder: string;
+  path: string;
+  widgetHandler(req: Request, res: Response): Record<string, unknown>;
+  widgetParams(req: Request): URLSearchParams;
+}
+
+export interface SocketServer {
+  protocol: string;
+  host: string;
+  port: number;
+}
+
+export interface WidgetServer {
+  protocol: string;
+  host: string;
+  port: number;
+  origin: string;
+  staticFolder: string;
+  staticPath: string;
+  buildFolder: string;
+  clusters: number;
+}
+
+export interface MerkurConfig {
+  HMR: boolean;
+  cliConfig: CLIConfig;
+  extends: Extend[];
+  task: {
+    [key: string]: Task;
+  };
+  devServer: DevServer;
+  defaultEntries: {
+    client: string;
+    server: string;
+    [key: string]: string;
+  };
+  playground: Playground;
+  socketServer: SocketServer;
+  widgetServer: WidgetServer;
+  onMerkurConfig: ({
+    merkurConfig: MerkurConfig,
+    cliConfig: CLIConfig,
+  }) => Partial<MerkurConfig>;
+  onCliConfig: ({ cliConfig: CLIConfig }) => Partial<CLIConfig>;
+  onTaskBuild: ({
+    definition: Task,
+    build: BuildOptions,
+    cliConfig: CLIConfig,
+    merkurConfig: MerkurConfig,
+  }) => Partial<BuildOptions>;
+}
+
+export function defineConfig({
+  merkurConfig: MerkurConfig,
+  cliConfig: CLIConfig,
+}): Partial<MerkurConfig>;