feat: 🎸 add new custom command for extendability

Author: mjancarik

packages/cli/bin/merkur.mjs

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
-import { Command, Option } from 'commander';
+import { Command, Option, Argument } from 'commander';
 import { dev } from '../src/commands/dev.mjs';
 import { build } from '../src/commands/build.mjs';
 import { start } from '../src/commands/start.mjs';
 import { test } from '../src/commands/test.mjs';
+import { custom, CUSTOM_PART } from '../src/commands/custom.mjs';
 import { COMMAND_NAME } from '../src/commands/constant.mjs';
 
 // eslint-disable-next-line 
@@ -66,6 +67,7 @@ program.command(COMMAND_NAME.DEV)
 
 program
   .command(COMMAND_NAME.BUILD)
+  .description('Build command')
   .addOption(writeToDiskOption)
   .addOption(sourcemapOption)
   .addOption(runTasksOption)
@@ -85,6 +87,7 @@ program
 
 program
   .command(COMMAND_NAME.START)
+  .description('Start widget server')
   .addOption(portOption)
   .addOption(devServerPortOption)
   .addOption(projectFolderOption)
@@ -106,6 +109,7 @@ program
 
 program
   .command(COMMAND_NAME.TEST)
+  .description('Test widget')
   .allowUnknownOption()
   .action(async (options, cmd) => {
   process.env.NODE_ENV = process.env.NODE_ENV ?? 'test';
@@ -117,4 +121,19 @@ program
     await test({ args, commandArgs: cmd.args, command: COMMAND_NAME.TEST });
 });
 
+program
+  .command(COMMAND_NAME.CUSTOM)
+  .description('Customize template')
+  .addArgument(new Argument('<part>', 'custom part').choices(Object.values(CUSTOM_PART)))
+  .addOption(verboseOption)
+  .allowUnknownOption()
+  .action(async (part, options, cmd) => {
+    const args = {
+      ...options,
+      part,
+    };
+
+    await custom({ args, commandArgs: cmd.args, command: COMMAND_NAME.CUSTOM });
+  });
+
 program.parse(process.argv);

packages/cli/src/commands/constant.mjs

@@ -3,4 +3,5 @@ export const COMMAND_NAME = {
   DEV: 'dev',
   BUILD: 'build',
   TEST: 'test',
+  CUSTOM: 'custom',
 };

packages/cli/src/commands/custom.mjs

@@ -0,0 +1,47 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import chalk from 'chalk';
+
+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 const CUSTOM_PART = {
+  PLAYGROUND_BODY: 'playground:body',
+};
+
+export async function custom({ args, command }) {
+  const context = await createContext();
+  let baseCliConfig = await createCLIConfig({ args, command });
+
+  const { merkurConfig, cliConfig } = await createMerkurConfig({
+    args,
+    cliConfig: baseCliConfig,
+    context,
+  });
+
+  const logger = createLogger('Custom command:', cliConfig);
+
+  await handleExit({ context });
+  switch (args.part) {
+    case CUSTOM_PART.PLAYGROUND_BODY: {
+      const file = 'body.ejs';
+      const src = path.resolve(
+        `${merkurConfig.playground.templateFolder}/${file}`,
+      );
+      const dest = path.resolve(
+        `${merkurConfig.playground.serverTemplateFolder}/${file}`,
+      );
+
+      logger.debug(`Copy file from ${src} to ${dest}`);
+
+      await fs.copyFile(src, dest);
+
+      logger.info(`You can customize ${chalk.green(dest)} file.`);
+      break;
+    }
+  }
+}

packages/cli/src/devServer.mjs

@@ -26,10 +26,11 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
   const {
     template,
     templateFolder,
+    serverTemplateFolder,
     path: playgroundPath,
     widgetHandler,
   } = merkurConfig.playground;
-  const { cliFolder, projectFolder, command, writeToDisk } = cliConfig;
+  const { cliFolder, command, writeToDisk } = cliConfig;
 
   return new Promise((resolve, reject) => {
     const app = express();
@@ -126,7 +127,7 @@ export async function runDevServer({ context, merkurConfig, cliConfig }) {
             fs.readFileSync(template, 'utf8'),
             {
               views: [
-                path.resolve(`${projectFolder}/server/playground/templates/`),
+                serverTemplateFolder,
                 path.dirname(template),
                 templateFolder,
               ],

packages/cli/src/merkurConfig.mjs

@@ -194,6 +194,9 @@ emitter.on(
     merkurConfig.playground = {
       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;

packages/cli/types.d.ts

@@ -30,6 +30,7 @@ export type Extend =
 
 export interface Task {
   name: 'es13' | 'es9' | 'node' | string;
+  folder: 'es13' | 'es9' | string;
   build: BuildOptions;
   [key: string]: any;
 }
@@ -46,6 +47,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;