esm.dev 1.5.0

package/.prettierignore

@@ -0,0 +1,4 @@
+dist
+*.log
+.pnp.cjs
+.yarn/*

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 John Wright
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# esm.dev
+
+A set of utils when working with local NPM packages and [esm.sh](https://esm.sh/).
+
+It expects you to have a local version of ESM.sh and verdaccio running. It will monitor changes in a configurable set of directories. When it sees any changes, it will unpublish from verdaccio, remove builds & cache from ESM.sh and then re-publish the package.
+
+## Usage
+
+The simplest solution is to use docker-compose. Using the configuration below:
+
+`docker compose up`
+
+```yaml
+services:
+  esm.dev:
+    image: ghcr.io/johngeorgewright/esm.dev:latest
+    depends_on:
+      - esm.sh
+      - npm
+    environment:
+      - NPM_REGISTRY=http://npm:4873
+      - ESM_ORIGIN=http://esm.sh:8080
+      - ESM_STORAGE_PATH=/esmd
+      - PORT=3000
+    command:
+      - start
+      - /watch/*
+    ports:
+      - '3000:3000'
+    volumes:
+      - ./docker-storage/esm/esmd:/esmd
+      # The following are paths to all the packages you wish to auto publish
+      - ./packages/package-1:/watch/package-1:ro
+      - ./packages/package-2:/watch/package-2:ro
+
+  esm.sh:
+    image: ghcr.io/esm-dev/esm.sh:latest
+    environment:
+      - NPM_REGISTRY=http://npm:4873
+      - NPM_TOKEN=fake
+      - LOG_LEVEL=debug
+    ports:
+      - '8080:8080'
+    volumes:
+      - ./docker-storage/esm/esmd:/esmd
+
+  npm:
+    image: verdaccio/verdaccio:latest
+    ports:
+      - '4873:4873'
+```
+
+Once the above is running point your ESM modules to `localhost:3000`:
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react",
+      "package-1": "http://localhost:3000/package-1"
+    }
+  }
+</script>
+<script type="module">
+  import Package1 from 'package1'
+  // ...
+</script>
+```

package/commitlint.config.cjs

@@ -0,0 +1,8 @@
+// @ts-check
+
+/**
+ * @type {import('@commitlint/types').UserConfig}
+ */
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

package/dist/cli.js

@@ -0,0 +1,17 @@
+import { runExit } from 'clipanion';
+import { WatchCommand } from './commands/WatchCommand.js';
+import { RepublishCommand } from './commands/RepublishCommand.js';
+import { LoginCommand } from './commands/LoginCommand.js';
+import { TokenCommand } from './commands/TokenCommand.js';
+import { WaitForRegistryCommand } from './commands/WaitForRegistryCommand.js';
+import { StartCommand } from './commands/StartCommand.js';
+import { InitCommand } from './commands/InitCommand.js';
+runExit([
+    InitCommand,
+    LoginCommand,
+    TokenCommand,
+    RepublishCommand,
+    StartCommand,
+    WaitForRegistryCommand,
+    WatchCommand,
+]);

package/dist/commands/ESMDevCommand.js

@@ -0,0 +1,6 @@
+import { Command } from 'clipanion';
+import { RegistrySpecific } from './mixins/RegistrySpecific.js';
+import { ESMStorageSpecific } from './mixins/ESMStorageSpecific.js';
+import { PackagePathSpecific } from './mixins/PackagePathSpecific.js';
+export class ESMDevCommand extends ESMStorageSpecific(RegistrySpecific(PackagePathSpecific(Command))) {
+}

package/dist/commands/InitCommand.js

@@ -0,0 +1,40 @@
+import * as path from 'node:path';
+import { ESMDevCommand } from './ESMDevCommand';
+import { PackagePathSpecific } from './mixins/PackagePathSpecific';
+import { MustacheGeneratorCommand } from './MustacheGeneratorCommand';
+import { Option } from 'clipanion';
+export class InitCommand extends PackagePathSpecific(MustacheGeneratorCommand) {
+    static paths = [['init']];
+    static usage = ESMDevCommand.Usage({
+        description: 'Initialises your repo ready to work with ESM.sh locally',
+    });
+    esmOrigin = Option.String('-e,--esm-origin', 'http://localhost:8080', {
+        description: 'The base URL of the ESM Server',
+    });
+    esmStoragePath = Option.String('-s,--esm-storage-path', './docker-storage/esm/esmd', {
+        description: "Path to ESM.sh's storage",
+    });
+    port = Option.String('-p,--port', '3000', {
+        description: "The server's port",
+    });
+    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',
+    });
+    esmURL;
+    npmRegistryURL;
+    packages;
+    async execute() {
+        this.templateDir = path.join(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),
+        }));
+        await super.execute();
+    }
+}

package/dist/commands/LoginCommand.js

@@ -0,0 +1,12 @@
+import { Command } from 'clipanion';
+import { RegistrySpecific } from './mixins/RegistrySpecific.js';
+export class LoginCommand extends RegistrySpecific(Command) {
+    static paths = [['login']];
+    static usage = Command.Usage({
+        description: 'Login in to the NPM registry',
+    });
+    async execute() {
+        const { login } = await import('../lib/login.js');
+        return login(this.registry);
+    }
+}

package/dist/commands/MustacheGeneratorCommand.js

@@ -0,0 +1,9 @@
+import { GeneratorCommand } from 'clipanion-generator-command';
+import { MustacheGenerator } from '../lib/MustacheGenerator';
+export class MustacheGeneratorCommand extends GeneratorCommand {
+    get generator() {
+        return new MustacheGenerator(this.templateDir, this.destinationDir, [
+            '.mustache',
+        ]);
+    }
+}

package/dist/commands/RepublishCommand.js

@@ -0,0 +1,11 @@
+import { ESMDevCommand } from './ESMDevCommand.js';
+export class RepublishCommand extends ESMDevCommand {
+    static paths = [['republish']];
+    static usage = ESMDevCommand.Usage({
+        description: 'Removes the references, of given packages, from the ESM server and registry and republishes.',
+    });
+    async execute() {
+        const { republish } = await import('../lib/republish.js');
+        await this.eachPackagePath((packagePath) => republish(packagePath, this));
+    }
+}

package/dist/commands/StartCommand.js

@@ -0,0 +1,16 @@
+import { ESMDevCommand } from './ESMDevCommand.js';
+import { Servable } from './mixins/Servable.js';
+import { Watchable } from './mixins/Watchable.js';
+import { ESMServed } from './mixins/ESMServed.js';
+export class StartCommand extends Servable(Watchable(ESMServed(ESMDevCommand))) {
+    static paths = [['start']];
+    static usage = ESMDevCommand.Usage({
+        description: 'Runs a server and concurrently watches a file system',
+    });
+    async execute() {
+        const { watch } = await import('../lib/watch.js');
+        const { serve } = await import('../lib/server.js');
+        serve(this.port, this.esmOrigin);
+        await this.eachPackagePath((packagePath) => watch(packagePath, this));
+    }
+}

package/dist/commands/TokenCommand.js

@@ -0,0 +1,20 @@
+import { Command } from 'clipanion';
+import { RegistrySpecific } from './mixins/RegistrySpecific.js';
+export class TokenCommand extends RegistrySpecific(Command) {
+    static paths = [['token']];
+    static usage = Command.Usage({
+        description: 'Get the NPM token',
+    });
+    async execute() {
+        const { default: escapeStringRegexp } = await import('escape-string-regexp');
+        const npmrc = await Bun.file(`~/.npmrc`).text();
+        const url = new URL(this.registry);
+        const regex = new RegExp(`^//${escapeStringRegexp(url.hostname)}/:_authToken=(.*)$`, 'm');
+        const match = regex.exec(npmrc);
+        if (!match) {
+            this.context.stderr.write(`Token has not been created yet\n`);
+            return 1;
+        }
+        this.context.stdout.write(match[1] + '\n');
+    }
+}

package/dist/commands/WaitForRegistryCommand.js

@@ -0,0 +1,12 @@
+import { Command } from 'clipanion';
+import { RegistrySpecific } from './mixins/RegistrySpecific.js';
+import { Retryable } from './mixins/Retryable.js';
+export class WaitForRegistryCommand extends Retryable(RegistrySpecific(Command)) {
+    static paths = [['wait-for-registry'], ['wfr']];
+    static usage = Command.Usage({
+        description: 'wait for the registry to be online',
+    });
+    async execute() {
+        return this.retry(this.registry);
+    }
+}

package/dist/commands/WatchCommand.js

@@ -0,0 +1,12 @@
+import { ESMDevCommand } from './ESMDevCommand.js';
+import { Watchable } from './mixins/Watchable.js';
+export class WatchCommand extends Watchable(ESMDevCommand) {
+    static paths = [['watch']];
+    static usage = ESMDevCommand.Usage({
+        description: 'Watches directories and republishes on changes',
+    });
+    async execute() {
+        const { watch } = await import('../lib/watch.js');
+        await this.eachPackagePath((packagePath) => watch(packagePath, this));
+    }
+}

package/dist/commands/mixins/CommandClass.js

@@ -0,0 +1 @@
+export {};

package/dist/commands/mixins/ESMServed.js

@@ -0,0 +1,9 @@
+import { EnvOption } from '../../options/EnvOption';
+export function ESMServed(Base) {
+    class ESMServed extends Base {
+        esmOrigin = EnvOption('ESM_ORIGIN', '-e,--esm-origin', {
+            description: 'The base URL of the ESM Server',
+        });
+    }
+    return ESMServed;
+}

package/dist/commands/mixins/ESMStorageSpecific.js

@@ -0,0 +1,9 @@
+import { EnvOption } from '../../options/EnvOption.js';
+export function ESMStorageSpecific(Base) {
+    class ESMStorageSpecific extends Base {
+        esmStoragePath = EnvOption('ESM_STORAGE_PATH', '-s,--esm-storage-path', {
+            description: "Path to ESM.sh's storage",
+        });
+    }
+    return ESMStorageSpecific;
+}

package/dist/commands/mixins/PackagePathSpecific.js

@@ -0,0 +1,14 @@
+import { Option } from 'clipanion';
+export function PackagePathSpecific(Base) {
+    class PackagePathSpecific extends Base {
+        packagePaths = Option.Rest({
+            name: 'packages',
+        });
+        async eachPackagePath(cb) {
+            const { glob } = await import('glob');
+            const packagePaths = (await Promise.all(this.packagePaths.map((packagePath) => glob(packagePath)))).flat();
+            await Promise.all(packagePaths.map(cb));
+        }
+    }
+    return PackagePathSpecific;
+}

package/dist/commands/mixins/RegistrySpecific.js

@@ -0,0 +1,9 @@
+import { EnvOption } from '../../options/EnvOption.js';
+export function RegistrySpecific(Base) {
+    class RegistrySpecific extends Base {
+        registry = EnvOption('NPM_REGISTRY', '-r,--registry', {
+            description: 'The URL of your local registry',
+        });
+    }
+    return RegistrySpecific;
+}

package/dist/commands/mixins/Retryable.js

@@ -0,0 +1,28 @@
+import { Option } from 'clipanion';
+import { isNumber } from 'typanion';
+export function Retryable(Base) {
+    class Retryable extends Base {
+        timeout = Option.String('-t,--timeout', '10000', {
+            description: 'The amount of total ms to keep trying for',
+            validator: isNumber(),
+        });
+        interval = Option.String('-i,--interval', '300', {
+            description: 'The amount of ms inbetween each attempt',
+            validator: isNumber(),
+        });
+        async retry(endpoint) {
+            const { until } = await import('../../lib/until.js');
+            if (!(await until({
+                ...this,
+                try: async (signal) => {
+                    const response = await fetch(endpoint, { signal });
+                    return response.ok;
+                },
+            }))) {
+                this.context.stderr.write(`${endpoint} is not available\n`);
+                return 1;
+            }
+        }
+    }
+    return Retryable;
+}

package/dist/commands/mixins/Servable.js

@@ -0,0 +1,11 @@
+import { isNumber } from 'typanion';
+import { EnvOption } from '../../options/EnvOption.js';
+export function Servable(Base) {
+    class Servable extends Base {
+        port = EnvOption('PORT', '-p,--port', {
+            description: 'The port to run the server on',
+            validator: isNumber(),
+        });
+    }
+    return Servable;
+}

package/dist/commands/mixins/Watchable.js

@@ -0,0 +1,9 @@
+import { Option } from 'clipanion';
+export function Watchable(Base) {
+    class Watchable extends Base {
+        legacyMethod = Option.Boolean('-l,--legacy-method', false, {
+            description: 'Use a less performant, legacy, watch method. Sometimes needed in docker or vagrant environments.',
+        });
+    }
+    return Watchable;
+}

package/dist/lib/MustacheGenerator.js

@@ -0,0 +1,9 @@
+import Mustache from 'mustache';
+import { Generator } from 'clipanion-generator-command/Generator';
+export class MustacheGenerator extends Generator {
+    renderTemplate(templateContext, template) {
+        return Mustache.render(template, templateContext, undefined, {
+            escape: (x) => x,
+        });
+    }
+}

package/dist/lib/getPackageMeta.js

@@ -0,0 +1,10 @@
+import { readFile, stat as getStat } from 'node:fs/promises';
+import * as path from 'node:path';
+export async function getPackageMeta(packagePath) {
+    const stat = await getStat(packagePath);
+    const packageRoot = stat.isDirectory()
+        ? packagePath
+        : path.dirname(packagePath);
+    const pckg = JSON.parse(await readFile(path.join(packageRoot, 'package.json'), 'utf-8'));
+    return { name: pckg.name, packageRoot, private: pckg.private };
+}

package/dist/lib/login.js

@@ -0,0 +1,31 @@
+import { spawn } from 'node:child_process';
+export function login(registry) {
+    return new Promise((resolve) => {
+        const child = spawn('bunx', [
+            'npm',
+            'login',
+            '--registry',
+            registry,
+            '--quiet',
+        ]);
+        child.stderr.on('data', (d) => console.error(d.toString()));
+        child.stdout.on('data', (d) => {
+            const data = d.toString();
+            switch (true) {
+                case /username/i.test(data):
+                    child.stdin.write('esm.dev\n');
+                    break;
+                case /password/i.test(data):
+                    child.stdin.write('esm.dev\n');
+                    break;
+                case /email/i.test(data):
+                    child.stdin.write('esm.dev@esm.dev.com');
+                    break;
+                case /logged in as/i.test(data):
+                    child.stdin.end();
+                    break;
+            }
+        });
+        child.on('exit', resolve);
+    });
+}

package/dist/lib/publish.js

@@ -0,0 +1,5 @@
+import { $ } from 'bun';
+import * as path from 'node:path';
+export async function publish({ packageRoot, registry, }) {
+    await $ `bunx npm publish --registry ${registry}`.cwd(path.resolve(packageRoot));
+}

package/dist/lib/queue.js

@@ -0,0 +1,33 @@
+import debounce from 'lodash.debounce';
+import throat from 'throat';
+export const queue = throat(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) {
+    let promiseWithResolvers;
+    const debounced = debounce(async (...args) => {
+        try {
+            const result = await fn(...args);
+            promiseWithResolvers?.resolve(result);
+        }
+        catch (error) {
+            promiseWithResolvers?.reject(error);
+        }
+        finally {
+            promiseWithResolvers = undefined;
+        }
+    }, delay);
+    return (...args) => {
+        start();
+        debounced(...args);
+        return promiseWithResolvers.promise;
+    };
+    function start() {
+        if (!promiseWithResolvers) {
+            promiseWithResolvers = Promise.withResolvers();
+            queue(async () => promiseWithResolvers?.promise);
+        }
+    }
+}

package/dist/lib/republish.js

@@ -0,0 +1,9 @@
+import { getPackageMeta } from './getPackageMeta.js';
+import { publish } from './publish.js';
+import { unpublish } from './unpublish.js';
+export async function republish(packagePath, opts) {
+    console.info(`Republishing ${packagePath}`);
+    const { name, packageRoot } = await getPackageMeta(packagePath);
+    await unpublish({ ...opts, name });
+    await publish({ ...opts, packageRoot });
+}

package/dist/lib/server.js

@@ -0,0 +1,23 @@
+import { queue } from './queue.js';
+import { createServer } from 'node:http';
+import httpProxy from 'http-proxy';
+export function serve(port, esmOrigin) {
+    const proxy = httpProxy.createProxyServer();
+    const server = createServer((req, res) => {
+        queue(() => new Promise((resolve, reject) => {
+            console.info('Proxying', req.url);
+            res.on('error', reject);
+            res.on('close', resolve);
+            res.on('finish', resolve);
+            proxy.web(req, res, { target: esmOrigin });
+        })).catch((error) => {
+            res.statusCode = 500;
+            res.setHeader('Content-Type', 'application/json; charset=utf-8');
+            res.write(JSON.stringify(error));
+            res.end();
+        });
+    }).listen(port, () => {
+        console.info('ESM proxy server listining on', server.address());
+    });
+    return server;
+}

package/dist/lib/unpublish.js

@@ -0,0 +1,25 @@
+import { $ } from 'bun';
+import { glob } from 'glob';
+import { rm } from 'node:fs/promises';
+export async function unpublish({ registry, esmStoragePath, name, }) {
+    await Promise.all([
+        unpublishPackage(registry, name),
+        deleteESMCache(esmStoragePath, name),
+    ]);
+}
+async function unpublishPackage(registry, name) {
+    try {
+        await $ `bunx npm unpublish --registry ${registry} --force ${name}`;
+    }
+    catch (error) {
+        if (!(error instanceof $.ShellError &&
+            error.stderr.includes('npm error code E404')))
+            throw error;
+    }
+}
+async function deleteESMCache(esmStoragePath, name) {
+    await glob(`${esmStoragePath}/**/${name}@*`).then((paths) => Promise.all(paths.map((path) => {
+        console.info('Deleting', path);
+        return rm(path, { recursive: true });
+    })));
+}

package/dist/lib/until.js

@@ -0,0 +1,16 @@
+import { setTimeout } from 'node:timers/promises';
+export async function until({ interval, timeout, try: Try, }) {
+    const signal = AbortSignal.timeout(timeout);
+    while (!signal.aborted) {
+        try {
+            if (await Try(signal))
+                return true;
+        }
+        catch (error) { }
+        try {
+            await setTimeout(interval, { signal });
+        }
+        catch (error) { }
+    }
+    return false;
+}

package/dist/lib/watch.js

@@ -0,0 +1,61 @@
+import { watch as fsWatch, watchFile } from 'node:fs';
+import { republish } from './republish.js';
+import { getPackageMeta } from './getPackageMeta.js';
+import { readFile, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import { glob } from 'glob';
+import { queue, queuedDebounce } from './queue.js';
+export async function watch(packagePath, opts) {
+    const { name, packageRoot, private: prvte, } = await getPackageMeta(packagePath);
+    if (prvte) {
+        console.info(`${name} is a private package... ignoring`);
+        return () => { };
+    }
+    console.info('Watching', packagePath);
+    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);
+    if (opts.legacyMethod) {
+        return await legacyWatch(packagePath, () => debounceRepublish());
+    }
+    else {
+        const watcher = fsWatch(packageRoot, { recursive: true }, (_, filename) => debounceRepublish(filename ?? ''));
+        return () => watcher.close();
+    }
+}
+async function legacyWatch(dirname, cb) {
+    const filename = await hashDirectory(dirname);
+    const watcher = watchFile(filename, cb);
+    let timer;
+    beginTimer();
+    return () => {
+        watcher.unref();
+        clearTimeout(timer);
+    };
+    function beginTimer() {
+        timer = setTimeout(() => hashDirectory(dirname).catch(console.error).finally(beginTimer), 1_000);
+    }
+}
+async function hashDirectory(dirname) {
+    const filename = `/tmp/${dirname.replace(/\//g, '-')}.hash.txt`;
+    const files = await glob(`${dirname}/**/*`, { nodir: true });
+    const hashes = await Promise.all(files.map(async (file) => {
+        const contents = await readFile(file, 'utf-8');
+        return createHash('sha256').update(contents).digest('hex');
+    }));
+    const newHash = hashes.join('');
+    let previousHash = '';
+    try {
+        previousHash = await readFile(filename, 'utf-8');
+    }
+    catch (error) {
+        if (error.code !== 'ENOENT')
+            throw error;
+    }
+    if (newHash !== previousHash)
+        await writeFile(filename, newHash);
+    return filename;
+}

package/dist/options/EnvOption.js

@@ -0,0 +1,6 @@
+import { Option } from 'clipanion';
+export function EnvOption(envName, descriptor, opts = {}) {
+    return process.env[envName]
+        ? Option.String(descriptor, process.env[envName], opts)
+        : Option.String(descriptor, { ...opts, required: true });
+}