add esm.sh fallback (#302)

Author: YousefED

packages/editor/src/runtime/executor/resolver/LocalResolver.ts

@@ -18,7 +18,12 @@ async function resolveNestedModule(id: string, mode?: string) {
   // Any import if React and related libraries, we want to resolve to the
   // local imported React. Otherwise we get multiple instances of React, which breaks things
   // (plus, it's inefficient to load the library from a CDN)
-  if (id === "react" && (!mode || mode === "imports/optimized/react.js")) {
+  if (
+    id === "react" &&
+    (!mode ||
+      mode === "imports/optimized/react.js" ||
+      mode === "es2021/react.js")
+  ) {
     return react;
   }
 

packages/editor/src/runtime/executor/resolver/resolver.ts

@@ -4,15 +4,19 @@ import {
   ImportShimResolver,
   ResolvedImport,
   SkypackResolver,
+  // JSPMResolver,
+  ESMshResolver,
 } from "@typecell-org/engine";
 import getExposeGlobalVariables from "../lib/exports";
 import { LocalResolver } from "./LocalResolver";
 import { TypeCellCompiledCodeProvider } from "./typecell/TypeCellCompiledCodeProvider";
 
 // Used for resolving NPM imports
+const esmshResolver = new ESMshResolver();
 const skypackResolver = new SkypackResolver();
+// const jspmResolver = new JSPMResolver();
 const importShimResolver = new ImportShimResolver(
-  [skypackResolver],
+  [skypackResolver, esmshResolver],
   LocalResolver
 );
 

packages/engine/src/index.ts

@@ -1,6 +1,8 @@
 export * from "./Engine";
 export * from "./CodeModel";
-export * from "./resolvers/SkypackResolver";
+export * from "./resolvers/cdns/SkypackResolver";
+export * from "./resolvers/cdns/JSPMResolver";
+export * from "./resolvers/cdns/ESMshResolver";
 export * from "./resolvers/LocalModuleResolver";
 export * from "./resolvers/ImportShimResolver";
 export * from "./reactView";

packages/engine/src/resolvers/ImportShimResolver.ts

@@ -41,16 +41,42 @@ export class ImportShimResolver {
         dispose: () => {},
       };
     }
-    return {
-      module: await this.importShim(moduleName),
-      dispose: () => {},
-    };
+
+    /*
+    Let's try different resolvers one by one.
+    Because there is only one global importShim,
+    we use a hack to pass the resolver we're trying to importShim()
+    as part of the module name, e.g.: use$SkypackResolver$lodash
+
+    This is decoded again in onImportShimResolve below
+    */
+    for (let resolver of this.resolvers) {
+      try {
+        const module = await this.importShim(
+          "use$" + resolver.constructor.name + "$" + moduleName
+        );
+        console.log(
+          "loaded module",
+          moduleName,
+          "using",
+          resolver.constructor.name
+        );
+        return {
+          module,
+          dispose: () => {},
+        };
+      } catch (e) {
+        console.error("failed loading module", resolver.constructor.name, e);
+      }
+    }
+    throw new Error("couldn't resolve module" + moduleName);
   }
 
   /**
    * This is called by es-module-shims whenever it wants to resolve an Import.
    */
   private async doResolveImportURL(
+    resolver: ExternalModuleResolver,
     moduleName: string, // can be a relative URL, absolute URL, or "package name"
     parent: string, // the parent URL the package is loaded from
     importShimResolve: any // the original resolve function from es-module-shims
@@ -72,8 +98,8 @@ export class ImportShimResolver {
     const defaultURL = await importShimResolve(moduleName, parent);
 
     // Try the registered resolvers
-    for (let resolver of this.resolvers) {
-      if (defaultURL) {
+    if (defaultURL) {
+      for (let resolver of this.resolvers) {
         // Does the URL we're trying to load match with the resolver?
         const parsedModule = await resolver.getModuleInfoFromURL(defaultURL);
         if (parsedModule) {
@@ -92,21 +118,22 @@ export class ImportShimResolver {
             const parsedParent = await resolver.getModuleInfoFromURL(parent);
             if (parsedParent?.module === "react-map-gl") {
               return this.doResolveImportURL(
+                resolver,
                 "maplibre-gl",
                 parent,
                 importShimResolve
               );
             }
           }
         }
-      } else {
-        // moduleName + parent combination couldn't be resolved by es-module-shims
-        // (i.e.: it's not an absolute URL, but just a package name like "lodash")
-        // Try to get a CDN URL from our resolver
-        const resolverURL = await resolver.getURLForModule(moduleName, parent);
-        if (resolverURL) {
-          return resolverURL;
-        }
+      }
+    } else {
+      // moduleName + parent combination couldn't be resolved by es-module-shims
+      // (i.e.: it's not an absolute URL, but just a package name like "lodash")
+      // Try to get a CDN URL from our resolver
+      const resolverURL = await resolver.getURLForModule(moduleName, parent);
+      if (resolverURL) {
+        return resolverURL;
       }
     }
 
@@ -169,12 +196,41 @@ export class ImportShimResolver {
     return url;
   }
 
+  /**
+   * The hook called by es-module-shims
+   */
   private onImportShimResolve = async (
     id: string,
     parent: string,
     importShimResolve: any
   ) => {
-    const ret = await this.doResolveImportURL(id, parent, importShimResolve);
+    // by default, try the first resolver
+    let resolver = this.resolvers[0];
+
+    if (id.startsWith("use$")) {
+      // an explicit resolver was passed in (see doResolveImport)
+      const parts = id.split("$");
+      if (parts.length !== 3) {
+        throw new Error("expected resolver name in import" + id);
+      }
+      resolver = this.resolvers.find((r) => r.constructor.name === parts[1])!;
+      id = parts[2];
+    } else {
+      if (!parent) {
+        // when there is a parent, this is expected (because it's a nested module).
+        console.warn(
+          "no explicit resolver detected in import, falling back to default",
+          id
+        );
+      }
+    }
+
+    const ret = await this.doResolveImportURL(
+      resolver,
+      id,
+      parent,
+      importShimResolve
+    );
     return ret;
   };
 

packages/engine/src/resolvers/cdns/ESMshResolver.ts

@@ -0,0 +1,38 @@
+import { ExternalModuleResolver } from "../ExternalModuleResolver";
+
+export class ESMshResolver extends ExternalModuleResolver {
+  public async getModuleInfoFromURL(url: string) {
+    // https://cdn.esm.sh/v66/@tldraw/[email protected]/es2021/core.js
+
+    const prefix = "https://cdn.esm.sh/";
+    if (url.startsWith(prefix)) {
+      url = url.substring(prefix.length - 1);
+      let mode: string | undefined;
+      let library = url.match(/^\/v\d+\/[^\/]+\.js$/);
+      if (library) {
+        return undefined;
+      }
+      let matches = url.match(/^\/v\d+\/(.*)@[.\d]+\/(.*)$/);
+      if (!matches || !matches[1]) {
+        throw new Error("couldn't match url");
+      }
+      const matchedModuleName = matches[1];
+
+      // mode is necessary for jsx-runtime, e.g.: @yousef/use-p2
+      mode = matches[2];
+
+      return {
+        module: matchedModuleName,
+        mode,
+      };
+    }
+    return undefined;
+  }
+
+  public async getURLForModule(moduleName: string, parent: string) {
+    if (moduleName.startsWith("https://") || moduleName.startsWith("../")) {
+      throw new Error("unexpected modulename");
+    }
+    return `https://esm.sh/${moduleName}`;
+  }
+}

packages/engine/src/resolvers/cdns/JSPMResolver.ts

@@ -0,0 +1,34 @@
+import { ExternalModuleResolver } from "../ExternalModuleResolver";
+
+export class JSPMResolver extends ExternalModuleResolver {
+  public async getModuleInfoFromURL(url: string) {
+    // TODO: should also pass version identifier (@xx)
+
+    const prefix = "https://jspm.dev/";
+    if (url.startsWith(prefix)) {
+      url = url.substring(prefix.length - 1);
+      let mode: string | undefined;
+      let matches = url.match(/^\/npm:(.*)$/);
+      if (!matches || !matches[1]) {
+        throw new Error("couldn't match url");
+      }
+      const matchedModuleName = matches[1];
+
+      // mode is necessary for jsx-runtime, e.g.: @yousef/use-p2
+      mode = undefined; //matches[3];
+
+      return {
+        module: matchedModuleName,
+        mode,
+      };
+    }
+    return undefined;
+  }
+
+  public async getURLForModule(moduleName: string, parent: string) {
+    if (moduleName.startsWith("https://") || moduleName.startsWith("../")) {
+      throw new Error("unexpected modulename");
+    }
+    return `https://jspm.dev/npm:${moduleName}`;
+  }
+}

packages/engine/src/resolvers/SkypackResolver.ts renamed to packages/engine/src/resolvers/cdns/SkypackResolver.ts

@@ -1,4 +1,4 @@
-import { ExternalModuleResolver } from "./ExternalModuleResolver";
+import { ExternalModuleResolver } from "../ExternalModuleResolver";
 
 export class SkypackResolver extends ExternalModuleResolver {
   public async getModuleInfoFromURL(url: string) {
@@ -9,14 +9,14 @@ export class SkypackResolver extends ExternalModuleResolver {
     if (url.startsWith(prefix)) {
       url = url.substring(prefix.length - 1);
       let mode: string | undefined;
-      let matches = url.match(/^\/-\/(.+)@v[\d.]+-.*mode=(.*)$/);
-      if (!matches || !matches[1]) {
+      let matches = url.match(/^\/(new|-)\/(.+)@v[\d.]+[-\/].*mode=(.*)$/);
+      if (!matches || !matches[2]) {
         throw new Error("couldn't match url");
       }
-      const matchedModuleName = matches[1];
+      const matchedModuleName = matches[2];
 
       // mode is necessary for jsx-runtime, e.g.: @yousef/use-p2
-      mode = matches[2];
+      mode = matches[3];
 
       return {
         module: matchedModuleName,