Rewrite resolver (#286)

* wip: rewrite resolvers

* rewrite resolver

* fix

Author: YousefED

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  //   preset: "ts-jest",
+  projects: ["<rootDir>/packages/*/jest.config.js"],
+  testEnvironment: "jsdom",
+  // roots: ["<rootDir>"],
+  // modulePaths: ["<rootDir>"],
+  // moduleNameMapper: {
+  // },
+};

package-lock.json

@@ -124,6 +124,7 @@
     "copy-docs": "rimraf public/_docs && mkdir public/_docs && node copy-docs.mjs > public/_docs/index.json && cp -rf ../../docs/. public/_docs",
     "build": "tsc -v && npm run copytypes && npm run copy-docs",
     "build-react": "cross-env NODE_OPTIONS=--max_old_space_size=8192 CI=true craco build",
+    "build-react-stats": "npm run build-react -- --stats && npx webpack-bundle-analyzer build/bundle-stats.json",
     "lint": "eslint src",
     "test": "craco test",
     "test-no-watch": "craco test --watchAll=false",

packages/editor/package.json

@@ -3,3 +3,5 @@ declare module "probe.gl" {}
 declare module "@loaders.gl/loader-utils" {}
 
 declare module "@deck.gl/react" {}
+
+declare module "@deck.gl/aggregation-layers" {}

packages/editor/src/@types/probe.d.ts

@@ -17,7 +17,7 @@ export default class SourceModelCompiler extends lifecycle.Disposable {
       return `define(["require", "exports", "markdown-it"], function (require, exports, markdown_it_1) {
           "use strict";
           Object.defineProperty(exports, "__esModule", { value: true });
-          const md = markdown_it_1.default({
+          const md = markdown_it_1({
               html: true,
               linkify: true,
               typographer: true,

packages/editor/src/runtime/compiler/SourceModelCompiler.ts

@@ -0,0 +1,65 @@
+import { LocalModuleResolver } from "@typecell-org/engine";
+import * as markdownit from "markdown-it";
+import * as react from "react";
+import * as reactdnd from "react-dnd";
+import * as reactdom from "react-dom";
+import * as jsxruntime from "react/jsx-runtime";
+
+const sz = require("frontend-collective-react-dnd-scrollzone");
+
+async function resolveNestedModule(id: string, mode?: string) {
+  if (id === "markdown-it") {
+    return markdownit;
+  }
+
+  if (id === "react" && (!mode || mode === "imports/optimized/react.js")) {
+    return react;
+  }
+
+  if (id === "react" && mode === "imports/unoptimized/jsx-runtime.js") {
+    return jsxruntime;
+  }
+
+  if (id === "react-dom") {
+    return reactdom;
+  }
+
+  if (id === "frontend-collective-react-dnd-scrollzone") {
+    return sz;
+  }
+
+  if (id === "react-dnd") {
+    return reactdnd;
+  }
+
+  // We might want to remove hardcoded dependency for deckgl... We can't do this for every library..
+
+  if (id === "@deck.gl/react") {
+    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
+    return await import("@deck.gl/react");
+  }
+
+  if (id === "probe.gl") {
+    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
+    return await import("probe.gl");
+  }
+
+  if (id === "@loaders.gl/core") {
+    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
+    return await import("probe.gl");
+  }
+
+  if (id === "@deck.gl/aggregation-layers") {
+    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
+    return await import("@deck.gl/aggregation-layers");
+  }
+
+  if (id === "@loaders.gl/images") {
+    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
+    return await import("@loaders.gl/images");
+  }
+
+  return undefined;
+}
+
+export const LocalResolver = new LocalModuleResolver(resolveNestedModule);

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

@@ -1,88 +1,19 @@
 import {
   CodeModel,
   Engine,
+  ImportShimResolver,
   ResolvedImport,
   SkypackResolver,
 } from "@typecell-org/engine";
-import * as markdownit from "markdown-it";
-import * as react from "react";
-import * as jsxruntime from "react/jsx-runtime";
-import * as reactdnd from "react-dnd";
-import * as reactdom from "react-dom";
-import * as probe from "probe.gl";
-import * as dreact from "@deck.gl/react";
-
 import getExposeGlobalVariables from "../lib/exports";
+import { LocalResolver } from "./LocalResolver";
 import { TypeCellCompiledCodeProvider } from "./typecell/TypeCellCompiledCodeProvider";
 
-const agg = require("@deck.gl/aggregation-layers") as any;
-const lutil = require("@loaders.gl/core") as any;
-const limg = require("@loaders.gl/images") as any;
-const sz = require("frontend-collective-react-dnd-scrollzone");
-
-// TODO: make async
-function resolveNestedModule(id: string, mode?: string) {
-  function isModule(id: string, moduleName: string) {
-    return id === moduleName || id === "https://cdn.skypack.dev/" + moduleName;
-  }
-
-  if (isModule(id, "markdown-it")) {
-    return markdownit;
-  }
-
-  if (isModule(id, "react") && mode === "imports/optimized/react.js") {
-    return react;
-  }
-
-  if (isModule(id, "react") && mode === "imports/unoptimized/jsx-runtime.js") {
-    return jsxruntime;
-  }
-
-  if (isModule(id, "react-dom")) {
-    return reactdom;
-  }
-
-  if (isModule(id, "frontend-collective-react-dnd-scrollzone")) {
-    return sz;
-  }
-
-  if (isModule(id, "react-dnd")) {
-    return reactdnd;
-  }
-
-  // We might want to remove hardcoded dependency for deckgl... We can't do this for every library..
-
-  if (isModule(id, "@deck.gl/react")) {
-    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
-    return dreact;
-  }
-
-  if (isModule(id, "probe.gl")) {
-    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
-    return probe;
-  }
-
-  if (isModule(id, "@loaders.gl/core")) {
-    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
-    return lutil;
-  }
-
-  if (isModule(id, "@deck.gl/aggregation-layers")) {
-    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
-    return agg;
-  }
-
-  if (isModule(id, "@loaders.gl/images")) {
-    // workaround for https://github.com/skypackjs/skypack-cdn/issues/242
-    return limg;
-  }
-
-  return undefined;
-}
-
-const skypackResolver = new SkypackResolver(resolveNestedModule);
-
-// todo: caches
+const skypackResolver = new SkypackResolver();
+const importShimResolver = new ImportShimResolver(
+  [skypackResolver],
+  LocalResolver
+);
 
 const cache = new Map<string, ResolvedImport>();
 
@@ -125,7 +56,7 @@ async function resolveImport(
   ) => TypeCellCompiledCodeProvider
 ): Promise<ResolvedImport> {
   if (!moduleName.startsWith("!@")) {
-    return skypackResolver.resolveImport(moduleName);
+    return importShimResolver.resolveImport(moduleName);
   }
 
   if (!createTypeCellCompiledCodeProvider) {

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

@@ -0,0 +1,19 @@
+module.exports = {
+  preset: "ts-jest",
+  // transform: {
+  //   "^.+\\.(ts|tsx)?$": "ts-jest",
+  //   "^.+\\.(js|jsx)$": "babel-jest",
+  // },
+  // projects: ["<rootDir>/packages/*/jest.config.js"],
+  testEnvironment: "jsdom",
+  roots: ["<rootDir>"],
+  modulePaths: ["<rootDir>"],
+  testMatch: ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(spec|test).ts?(x)"],
+  moduleNameMapper: {
+    "@typecell-org/common": "<rootDir>/../common/src",
+    "^lib0/([a-zA-Z-]*)$": "<rootDir>/../../node_modules/lib0/dist/$1.cjs",
+    "^y-protocols/([a-zA-Z-]*)$":
+      "<rootDir>/../../node_modules/y-protocols/dist/$1.cjs",
+  },
+  setupFiles: ["<rootDir>/src/setupTests.ts"],
+};

packages/engine/jest.config.js

@@ -3,7 +3,7 @@
   "version": "0.0.3",
   "private": true,
   "dependencies": {
-    "es-module-shims": "0.7.1",
+    "es-module-shims": "1.4.3",
     "lodash": "^4.17.21",
     "mobx": "^6.2.0",
     "react": "^17.0.2",

packages/engine/package.json

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