esm.dev 1.6.0 → 1.7.1

package/dist/commands/InitCommand.js

@@ -1,15 +1,24 @@
-import * as path from 'node:path';
 import { ESMDevCommand } from './ESMDevCommand.js';
 import { PackagePathSpecific } from './mixins/PackagePathSpecific.js';
 import { MustacheGeneratorCommand } from './MustacheGeneratorCommand.js';
 import { Option } from 'clipanion';
+import { isNumber } from 'typanion';
 export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
     static paths = [['init']];
     static usage = ESMDevCommand.Usage({
         description: 'Initialises your repo ready to work with ESM.sh locally',
+        examples: [
+            ['Create a minimal template', 'esm.dev init'],
+            ["Specify the packages you're developing", 'esm.dev init packages/*'],
+            [
+                'Specify different ports',
+                'esm.dev init --port 3001 --esm-port 8081 --registry-port 4444',
+            ],
+        ],
     });
-    esmOrigin = Option.String('-e,--esm-origin', 'http://localhost:8080', {
-        description: 'The base URL of the ESM Server',
+    esmPort = Option.String('-e,--esm-port', '8080', {
+        description: 'The port of the ESM Server',
+        validator: isNumber(),
     });
     esmStoragePath = Option.String('-s,--esm-storage-path', './docker-storage/esm/esmd', {
         description: "Path to ESM.sh's storage",
@@ -20,17 +29,17 @@ export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
     outputDirectory = Option.String('-o,--output-dir', '.', {
         description: 'The output directory',
     });
-    registry = Option.String('-r,--registry', 'http://localhost:4873', {
-        description: 'The URL of your local registry',
+    registryPort = Option.String('-r,--registry-port', '4873', {
+        description: 'The port of your local registry',
+        validator: isNumber(),
     });
     esmURL;
     npmRegistryURL;
     packages;
     async execute() {
+        const path = await import('node:path');
         this.templateDir = path.resolve(import.meta.dirname, '..', '..', 'templates', 'init');
         this.destinationDir = this.outputDirectory;
-        this.esmURL = new URL(this.esmOrigin);
-        this.npmRegistryURL = new URL(this.registry);
         this.packages = this.packagePaths.map((packagePath) => ({
             path: packagePath,
             basename: path.basename(packagePath),

package/dist/lib/queue.js

@@ -1,12 +1,19 @@
 import debounce from 'lodash.debounce';
 import throat from 'throat';
-export const queue = throat.default(1);
+export async function queue(signal, fn) {
+    return _queue((...args) => {
+        signal.throwIfAborted();
+        return fn(...args);
+    });
+}
+const _queue = throat.default(1);
 /**
  * Just like debounce, but the first call will add a promise to the queue
  * and that promise won't resolve until the debounced function is finally called.
  */
-export function queuedDebounce(fn, delay) {
+export function queuedDebounce(fn, delay, signal) {
     let promiseWithResolvers;
+    signal.addEventListener('abort', (reason) => promiseWithResolvers?.reject(reason));
     const debounced = debounce(async (...args) => {
         try {
             const result = await fn(...args);
@@ -20,14 +27,15 @@ export function queuedDebounce(fn, delay) {
         }
     }, delay);
     return (...args) => {
-        start();
+        const { promise } = start();
         debounced(...args);
-        return promiseWithResolvers.promise;
+        return promise;
     };
     function start() {
         if (!promiseWithResolvers) {
             promiseWithResolvers = Promise.withResolvers();
-            queue(async () => promiseWithResolvers?.promise);
+            queue(signal, async () => promiseWithResolvers?.promise);
         }
+        return promiseWithResolvers;
     }
 }

package/dist/lib/server.js

@@ -1,14 +1,19 @@
 import { queue } from './queue.js';
 import { createServer } from 'node:http';
 import httpProxy from 'http-proxy';
+import { addAbortSignal } from 'node:stream';
 export function serve(port, esmOrigin) {
     const proxy = httpProxy.createProxyServer();
+    const abortController = new AbortController();
+    const signal = abortController.signal;
     const server = createServer((req, res) => {
-        queue(() => new Promise((resolve, reject) => {
+        queue(signal, () => new Promise((resolve, reject) => {
             console.info('Proxying', req.url);
+            addAbortSignal(signal, req);
+            addAbortSignal(signal, res);
+            req.on('error', reject);
             res.on('error', reject);
             res.on('close', resolve);
-            res.on('finish', resolve);
             proxy.web(req, res, { target: esmOrigin });
         })).catch((error) => {
             res.statusCode = 500;
@@ -19,5 +24,10 @@ export function serve(port, esmOrigin) {
     }).listen(port, () => {
         console.info('ESM proxy server listining on', server.address());
     });
-    return server;
+    return () => {
+        console.info('closing the server');
+        abortController.abort();
+        server.closeAllConnections();
+        server.close();
+    };
 }

package/dist/lib/watch.js

@@ -12,18 +12,29 @@ export async function watch(packagePath, opts) {
         return () => { };
     }
     console.info('Watching', packagePath);
+    const abortController = new AbortController();
+    const signal = abortController.signal;
     const republishPackage = () => republish(packagePath, opts).catch(console.error);
     const debounceRepublish = queuedDebounce((filename = '') => {
         console.info(`Change detected at ${packagePath}/${filename}`);
         return republishPackage();
-    }, 1_000);
-    await queue(republishPackage);
+    }, 1_000, signal);
+    await queue(signal, republishPackage);
     if (opts.legacyMethod) {
-        return await legacyWatch(packagePath, () => debounceRepublish());
+        const close = await legacyWatch(packagePath, () => debounceRepublish());
+        return () => {
+            console.info('stop watching');
+            close();
+            abortController.abort();
+        };
     }
     else {
         const watcher = fsWatch(packageRoot, { recursive: true }, (_, filename) => debounceRepublish(filename ?? ''));
-        return () => watcher.close();
+        return () => {
+            console.info('stop watching');
+            watcher.close();
+            abortController.abort();
+        };
     }
 }
 async function legacyWatch(dirname, cb) {

package/docker-bake.hcl

@@ -0,0 +1,24 @@
+group "default" {
+  targets = ["app"]
+}
+
+variable "TAG" {
+  validation {
+    condition = TAG == regex("^(?:\\d+\\.\\d+\\.\\d+)?$", TAG)
+    error_message = "The variable 'TAG' has to be in the 'x.x.x' format."
+  }
+}
+
+variable "IMAGE" {
+  default = "ghcr.io/johngeorgewright/esm.dev"
+}
+
+target "app" {
+  context = "."
+  dockerfile = "Dockerfile"
+  platforms = ["linux/amd64", "linux/arm64"]
+  tags = [
+    "${IMAGE}:latest",
+    notequal("", TAG) ? "${IMAGE}:${TAG}" : ""
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esm.dev",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "TypeScript library template",
   "type": "module",
   "sideEffects": false,

package/src/commands/InitCommand.ts

@@ -1,23 +1,28 @@
-import * as path from 'node:path'
 import { ESMDevCommand } from './ESMDevCommand.js'
 import { PackagePathSpecific } from './mixins/PackagePathSpecific.js'
 import { MustacheGeneratorCommand } from './MustacheGeneratorCommand.js'
 import { Option } from 'clipanion'
+import { isNumber } from 'typanion'
 
 export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
   static override paths = [['init']]
 
   static override usage = ESMDevCommand.Usage({
     description: 'Initialises your repo ready to work with ESM.sh locally',
+    examples: [
+      ['Create a minimal template', 'esm.dev init'],
+      ["Specify the packages you're developing", 'esm.dev init packages/*'],
+      [
+        'Specify different ports',
+        'esm.dev init --port 3001 --esm-port 8081 --registry-port 4444',
+      ],
+    ],
   })
 
-  readonly esmOrigin = Option.String(
-    '-e,--esm-origin',
-    'http://localhost:8080',
-    {
-      description: 'The base URL of the ESM Server',
-    },
-  )
+  readonly esmPort = Option.String('-e,--esm-port', '8080', {
+    description: 'The port of the ESM Server',
+    validator: isNumber(),
+  })
 
   readonly esmStoragePath = Option.String(
     '-s,--esm-storage-path',
@@ -35,8 +40,9 @@ export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
     description: 'The output directory',
   })
 
-  readonly registry = Option.String('-r,--registry', 'http://localhost:4873', {
-    description: 'The URL of your local registry',
+  readonly registryPort = Option.String('-r,--registry-port', '4873', {
+    description: 'The port of your local registry',
+    validator: isNumber(),
   })
 
   esmURL!: URL
@@ -44,6 +50,7 @@ export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
   packages!: { path: string; basename: string }[]
 
   override async execute() {
+    const path = await import('node:path')
     this.templateDir = path.resolve(
       import.meta.dirname,
       '..',
@@ -52,8 +59,6 @@ export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
       'init',
     )
     this.destinationDir = this.outputDirectory
-    this.esmURL = new URL(this.esmOrigin)
-    this.npmRegistryURL = new URL(this.registry)
     this.packages = this.packagePaths.map((packagePath) => ({
       path: packagePath,
       basename: path.basename(packagePath),

package/src/lib/queue.ts

@@ -1,7 +1,17 @@
 import debounce from 'lodash.debounce'
 import throat from 'throat'
 
-export const queue = throat.default(1)
+export async function queue<TResult, TArgs extends any[] = []>(
+  signal: AbortSignal,
+  fn: (...args: TArgs) => Promise<TResult>,
+): Promise<TResult> {
+  return _queue((...args) => {
+    signal.throwIfAborted()
+    return fn(...(args as any))
+  })
+}
+
+const _queue = throat.default(1)
 
 /**
  * Just like debounce, but the first call will add a promise to the queue
@@ -10,9 +20,14 @@ export const queue = throat.default(1)
 export function queuedDebounce<Args extends unknown[], R>(
   fn: (...args: Args) => R,
   delay: number,
+  signal: AbortSignal,
 ): (...args: Args) => Promise<R> {
   let promiseWithResolvers: PromiseWithResolvers<R> | undefined
 
+  signal.addEventListener('abort', (reason) =>
+    promiseWithResolvers?.reject(reason),
+  )
+
   const debounced = debounce(async (...args: Args) => {
     try {
       const result = await fn(...args)
@@ -25,15 +40,16 @@ export function queuedDebounce<Args extends unknown[], R>(
   }, delay)
 
   return (...args: Args) => {
-    start()
+    const { promise } = start()
     debounced(...args)
-    return promiseWithResolvers!.promise
+    return promise
   }
 
   function start() {
     if (!promiseWithResolvers) {
       promiseWithResolvers = Promise.withResolvers<R>()
-      queue(async () => promiseWithResolvers?.promise)
+      queue(signal, async () => promiseWithResolvers?.promise)
     }
+    return promiseWithResolvers
   }
 }

package/src/lib/server.ts

@@ -1,18 +1,24 @@
 import { queue } from './queue.js'
 import { createServer } from 'node:http'
 import httpProxy from 'http-proxy'
+import { addAbortSignal } from 'node:stream'
 
 export function serve(port: number, esmOrigin: string) {
   const proxy = httpProxy.createProxyServer()
+  const abortController = new AbortController()
+  const signal = abortController.signal
 
   const server = createServer((req, res) => {
     queue(
+      signal,
       () =>
         new Promise<void>((resolve, reject) => {
           console.info('Proxying', req.url)
+          addAbortSignal(signal, req)
+          addAbortSignal(signal, res)
+          req.on('error', reject)
           res.on('error', reject)
           res.on('close', resolve)
-          res.on('finish', resolve)
           proxy.web(req, res, { target: esmOrigin })
         }),
     ).catch((error) => {
@@ -25,5 +31,10 @@ export function serve(port: number, esmOrigin: string) {
     console.info('ESM proxy server listining on', server.address())
   })
 
-  return server
+  return () => {
+    console.info('closing the server')
+    abortController.abort()
+    server.closeAllConnections()
+    server.close()
+  }
 }

package/src/lib/watch.ts

@@ -23,23 +23,39 @@ export async function watch(
 
   console.info('Watching', packagePath)
 
+  const abortController = new AbortController()
+  const signal = abortController.signal
+
   const republishPackage = () =>
     republish(packagePath, opts).catch(console.error)
 
-  const debounceRepublish = queuedDebounce((filename: string = '') => {
-    console.info(`Change detected at ${packagePath}/${filename}`)
-    return republishPackage()
-  }, 1_000)
+  const debounceRepublish = queuedDebounce(
+    (filename: string = '') => {
+      console.info(`Change detected at ${packagePath}/${filename}`)
+      return republishPackage()
+    },
+    1_000,
+    signal,
+  )
 
-  await queue(republishPackage)
+  await queue(signal, republishPackage)
 
   if (opts.legacyMethod) {
-    return await legacyWatch(packagePath, () => debounceRepublish())
+    const close = await legacyWatch(packagePath, () => debounceRepublish())
+    return () => {
+      console.info('stop watching')
+      close()
+      abortController.abort()
+    }
   } else {
     const watcher = fsWatch(packageRoot, { recursive: true }, (_, filename) =>
       debounceRepublish(filename ?? ''),
     )
-    return () => watcher.close()
+    return () => {
+      console.info('stop watching')
+      watcher.close()
+      abortController.abort()
+    }
   }
 }
 

package/templates/init/docker-compose.yml.mustache

@@ -5,8 +5,8 @@ services:
       - esm
       - npm
     environment:
-      - NPM_REGISTRY=http://npm:{{npmRegistryURL.port}}
-      - ESM_ORIGIN=http://esm:{{esmURL.port}}
+      - NPM_REGISTRY=http://npm:{{registryPort}}
+      - ESM_ORIGIN=http://esm:{{esmPort}}
       - ESM_STORAGE_PATH=/esmd
       - PORT={{port}}
     command:
@@ -20,19 +20,23 @@ services:
       {{#packages}}
       - {{path}}:/watch/{{basename}}:ro
       {{/packages}}
+      {{^packages}}
+      # EG:
+      # - ./packages/*:/watch:ro
+      {{/packages}}
 
   esm:
     image: ghcr.io/esm-dev/esm.sh:latest
     environment:
-      - NPM_REGISTRY=http://npm:{{npmRegistryURL.port}}
+      - NPM_REGISTRY=http://npm:{{registryPort}}
       - NPM_TOKEN=fake
       - LOG_LEVEL=debug
     ports:
-      - '{{esmURL.port}}:8080'
+      - '{{esmPort}}:8080'
     volumes:
       - {{esmStoragePath}}:/esmd
 
   npm:
     image: verdaccio/verdaccio:latest
     ports:
-      - '{{npmRegistryURL.port}}:4873'
+      - '{{registryPort}}:4873'