Add generate config command (#47)

* feat: add run command

* feat: add generate config command

* chore: add changeset and update Readme

* chore: update yarn lock

* chore: add run command changeset

* chore: update changeset

.changeset/chilly-bobcats-reflect.md

@@ -0,0 +1,20 @@
+---
+"@heymp/scratchpad": major
+---
+
+Add `generate config` command [#38](https://github.com/heyMP/scratchpad/issues/38)
+
+```bash
+npx @heymp/scratchpad generate --help
+
+Usage: scratchpad generate [options] [command]
+
+Generate files from templates.
+
+Options:
+  -h, --help      display help for command
+
+Commands:
+  config          Generates an example config file.
+  help [command]  display help for command
+```

.changeset/loud-rivers-pretend.md

@@ -0,0 +1,25 @@
+---
+"@heymp/scratchpad": major
+---
+
+Add `run` command
+
+```bash
+npx @heymp/scratchpad run --help
+
+Usage: cli run [options] <file>
+
+Execute a file in a browser.
+
+Arguments:
+  file                  file to execute in the browser.
+
+Options:
+  --headless [boolean]  specify running the browser in headless
+                        mode.
+  --devtools [boolean]  open browser devtools automatically.
+  --ts-write [boolean]  write the js output of the target ts file.
+  --url [string]        specify a specific url to execute the code
+                        in.
+  -h, --help            display help for command
+```

README.md

@@ -8,24 +8,24 @@ https://github.com/heyMP/scratchpad/assets/3428964/2a58d587-510d-418f-bd8a-99958
 ## Usage
 
 ```bash
-npx @heymp/scratchpad@next ./my-test-file.js
+npx @heymp/scratchpad@next run ./my-test-file.js
 ```
 
-## Options
+## Commands
 
 ```bash
-Usage: @heymp/scratchpad@next <file> [options]
+Usage: @heymp/scratchpad@next run <file> [options]
 
-Arguments:
-  file                  file to execute in the browser.
+Run TS/JS snippets in a locally
 
 Options:
-  --headless [boolean]  specify running the browser in headless mode.
-  --devtools [boolean]  open browser devtools automatically.
-  --ts-write [boolean]  write the js output of the target ts file.
-  --url [string]        specify a specific url to execute the code in.
   -V, --version         output the version number
   -h, --help            display help for command
+
+Commands:
+  run [options] <file>  Execute a file in a browser.
+  generate              Generate files from templates.
+  help [command]        display help for command
 ```
 
 

package.json

@@ -1,5 +1,6 @@
 {
   "name": "@heymp/scratchpad",
+  "description": "Run TS/JS snippets in a locally",
   "version": "1.0.0-next.7",
   "main": "bin/cli.js",
   "type": "module",
@@ -12,7 +13,7 @@
     "types.d.ts"
   ],
   "dependencies": {
-    "commander": "^11.0.0",
+    "commander": "^12.0.0",
     "esbuild": "^0.23.0",
     "playwright": "^1.44.1"
   },
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "@commander-js/extra-typings": "^12.1.0",
     "@types/node": "^22.1.0",
     "typescript": "^5.5.4"
   },

src/Processor.ts

@@ -0,0 +1,83 @@
+import fs from 'node:fs';
+import { join } from 'node:path';
+import * as esbuild from 'esbuild';
+
+export class ProcessorChangeEvent extends Event {
+  constructor() {
+    super('change');
+  }
+}
+
+export type ProcessorOpts = {
+  headless?: boolean;
+  devtools?: boolean;
+  tsWrite?: boolean;
+  url?: string;
+  playwright?: any;
+  file: string;
+}
+
+/**
+ * Event Bus that monitors the target file for
+ * changes and emits stringified javascript to
+ * throught the 'change' event.
+ * */
+export class Processor extends EventTarget {
+  _func = '';
+
+  constructor(public opts: ProcessorOpts) {
+    super();
+    this.watcher();
+  }
+
+  get func() {
+    return this._func;
+  }
+
+  set func(func) {
+    this._func = func;
+    this.dispatchEvent(new ProcessorChangeEvent());
+  }
+
+  watcher() {
+    const file = this.opts.file;
+    if (!fs.existsSync(file)) {
+      throw new Error(`${file} file not found.`);
+    }
+    // execute it immediately then start watcher
+    this.build();
+    fs.watchFile(join(file), { interval: 100 }, () => {
+      this.build();
+    });
+  }
+
+  async build() {
+    const file = this.opts.file;
+    try {
+      if (!file) {
+        throw new Error(`${file} file not found.`);
+      }
+      if (file.endsWith('.ts')) {
+        const { outputFiles: [stdout]} = await esbuild.build({
+          entryPoints: [file],
+          format: 'esm',
+          bundle: true,
+          write: false,
+        });
+        this.func = new TextDecoder().decode(stdout.contents);
+        if (this.opts.tsWrite) {
+          fs.writeFile(join(process.cwd(), file.replace(/\.ts$/g, '.js')), this.func, 'utf8', () => {});
+        }
+      }
+      else {
+        this.func = fs.readFileSync(file, 'utf8');
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  start() {
+    this.dispatchEvent(new ProcessorChangeEvent());
+  }
+}

src/browser.ts

@@ -1,6 +1,6 @@
 import playwright from 'playwright';
 import util from 'node:util';
-import type { Processor } from './cli.js';
+import type { Processor } from './Processor.js';
 util.inspect.defaultOptions.maxArrayLength = null;
 util.inspect.defaultOptions.depth = null;
 
@@ -11,20 +11,21 @@ function nodelog(value:any) {
 export async function browser(processor: Processor) {
   // Launch the browser
   const browser = await playwright['chromium'].launch({
-    headless: !!processor.headless,
-    devtools: !!processor.devtools
+    headless: !!processor.opts.headless,
+    devtools: !!processor.opts.devtools
   });
   const context = await browser.newContext();
   const page = await context.newPage();
+  const playwrightConfig = processor.opts.playwright;
 
   // Allow playwright config override
-  if (processor.playwrightConfig && typeof processor.playwrightConfig === 'function') {
-    await processor.playwrightConfig({ browser, context, page });
+  if (playwrightConfig && typeof playwrightConfig === 'function') {
+    await playwrightConfig({ browser, context, page });
   }
 
   // Create a page
-  if (processor.url) {
-    await page.goto(processor.url);
+  if (processor.opts.url) {
+    await page.goto(processor.opts.url);
   }
 
   await page.exposeFunction('clear', () => {

src/cli.ts

@@ -3,10 +3,9 @@
 import fs from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { Command } from 'commander';
-import { browser } from './browser.js';
-import { getConfig } from './config.js';
-import * as esbuild from 'esbuild';
+import { Command } from '@commander-js/extra-typings';
+import { runCommand } from './runCommand.js';
+import { generateCommand } from './generateCommand.js';
 
 // Get pkg info
 const __filename = fileURLToPath(import.meta.url);
@@ -15,83 +14,8 @@ const pkg = JSON.parse(fs.readFileSync(join(__dirname, '../package.json'), 'utf8
 
 const program = new Command();
 program
-  .argument('<file>', 'file to execute in the browser.')
-  .option('--headless [boolean]', 'specify running the browser in headless mode.')
-  .option('--devtools [boolean]', 'open browser devtools automatically.')
-  .option('--ts-write [boolean]', 'write the js output of the target ts file.')
-  .option('--url [string]', 'specify a specific url to execute the code in.')
-  .version(pkg.version)
+  .description(pkg.description)
+  .version(pkg.version);
+program.addCommand(runCommand);
+program.addCommand(generateCommand);
 program.parse(process.argv);
-
-const file = program.args.at(0);
-const config = await getConfig();
-const opts = { ...config, ...program.opts()};
-
-export class Processor extends EventTarget {
-  url = opts['url'];
-  headless = opts['headless'];
-  devtools = opts['devtools'];
-  tsWrite = opts['tsWrite'];
-  playwrightConfig = opts['playwright'];
-  _func = '';
-
-  constructor() {
-    super();
-    this.watcher();
-    browser(this);
-  }
-
-  get func() {
-    return this._func;
-  }
-
-  set func(func) {
-    this._func = func;
-    this.dispatchEvent(new Event('change'));
-  }
-
-  watcher() {
-    if (!file) {
-      throw new Error(`${file} file not found.`);
-    }
-    if (!fs.existsSync(file)) {
-      throw new Error(`${file} file not found.`);
-    }
-    // execute it immediately then start watcher
-    this.build();
-    fs.watchFile(join(file), { interval: 100 }, () => {
-      this.build();
-    });
-  }
-
-  async build() {
-    try {
-      if (!file) {
-        throw new Error(`${file} file not found.`);
-      }
-      if (file.endsWith('.ts')) {
-        const { outputFiles: [stdout]} = await esbuild.build({
-          entryPoints: [file],
-          format: 'esm',
-          bundle: true,
-          write: false,
-        });
-        this.func = new TextDecoder().decode(stdout.contents);
-        if (this.tsWrite) {
-          fs.writeFile(join(process.cwd(), file.replace(/\.ts$/g, '.js')), this.func, 'utf8', () => {});
-        }
-      }
-      else {
-        this.func = fs.readFileSync(file, 'utf8');
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  start() {
-    this.dispatchEvent(new Event('change'));
-  }
-}
-
-new Processor();

src/config.ts

@@ -32,7 +32,7 @@ async function importConfig(rootDir:string) {
   }
 }
 
-export async function getConfig() {
+export async function getConfig(): Promise<Config> {
   const rootDir = process.cwd();
   return {
     ...await importConfig(rootDir),

src/generateCommand.ts

@@ -0,0 +1,32 @@
+import { Command } from '@commander-js/extra-typings';
+import * as readline from 'node:readline/promises';
+import { stdin, stdout } from 'node:process';
+import { writeFile, readFile, stat } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const configCommand = new Command('config')
+  .description('Generates an example config file.')
+  .action(async () => {
+    const rl = readline.createInterface({ input: stdin, output: stdout });
+    const template = await readFile(join(__dirname, '../templates/scratchpad.config.js'), 'utf8');
+    const outpath = join(process.cwd(), 'scratchpad.config.js');
+    const confirmation = await rl.question(`Are you sure you want to create the following
+${outpath} [Y/n]: `);
+
+    // if the user answers no then abort
+    if (['n', 'N'].includes(confirmation)) {
+      rl.close();
+      return;
+    }
+
+    // write the template file to the users directory
+    writeFile(outpath, template, 'utf8');
+    rl.close();
+  });
+
+export const generateCommand = new Command('generate')
+  .description('Generate files from templates.')
+  .addCommand(configCommand);

src/runCommand.ts

@@ -0,0 +1,26 @@
+import { Command } from '@commander-js/extra-typings';
+import { getConfig } from './config.js';
+import { Processor } from './Processor.js';
+import { browser } from './browser.js';
+
+export const runCommand = new Command('run')
+  .description('Execute a file in a browser.')
+  .argument('<file>', 'file to execute in the browser.')
+  .option('--headless [boolean]', 'specify running the browser in headless mode.')
+  .option('--devtools [boolean]', 'open browser devtools automatically.')
+  .option('--ts-write [boolean]', 'write the js output of the target ts file.')
+  .option('--url [string]', 'specify a specific url to execute the code in.')
+  .action(async (file, options, command) => {
+    const config = await getConfig();
+    const opts = { ...config, ...options};
+    const processor = new Processor({
+      // type narrow the options
+      headless: !!opts['headless'],
+      devtools: !!opts['devtools'],
+      tsWrite: !!opts['tsWrite'],
+      url: typeof opts['url'] === 'string' ? opts['url'] : undefined,
+      playwright: opts['playwright'],
+      file,
+    });
+    browser(processor);
+  });

templates/scratchpad.config.js

@@ -0,0 +1,2 @@
+export default /** @type {import('@heymp/scratchpad/src/config').Config} */ ({
+});