a tiny userland loader, using a "parse" and "link" primitive

a.js

import {b} from "./b.js";
import $ from "jquery";

export function a() {
  // ...
}

b.js

import {a} from "./a.js";
import $ from "jquery";

export function b() {
  // ...
}

tiny-dynamic-example.js

import Dict from "dict";

class TinyLittleLoader {
  constructor(realm, jquery) {
    this.#realm = realm;
    this.#jquery = jquery;
    this.#registry = new Dict();
  }

  load(specifier) {
    if (specifier === 'jquery') {
      return Promise.resolve(this.#jquery);
    }

    let name = specifier.replace(/^\.\//, "")
                        .replace(/\.js$/, "");

    if (!this.#registry.has(name)) {
      let module = fetch(specifier).then(source => this.#realm.parseModule(source));

      let complete = module.then(module => {
        let specifiers = module.requestedNames();
        return Promise.all(specifiers.map(specifier => {
          let entry = this.load(specifier);
          return entry.complete.then(() => entry.module.then(dependency => {
            module.add(specifier, dependency);
            return dependency;
          }));
        }));
      });

      let linked = module.then(module => complete.then(() => {
        module.link();
        return module;
      }));

      this.#registry.set(name, {
        module,
        complete,
        linked
      });
    }

    return this.#registry.get(name);
  }
}

import * as jquery from "jquery";

class TinyLittleRealm extends Realm {
    constructor() {
      super();
      this.#loader = new TinyLittleLoader(this, jquery);
    }

    async [Realm.import](name, referrer) {
      let module = await this.#loader.load(name).linked;
      module.ensureEvaluated();
      return module;
    }
}

let realm = new TinyLittleRealm();

realm.eval("import('./a.js')").then(m => m.a());