import react locally (#320)

* import react locally

* load react types from typecell

* remove comment

* fix css types

* fix logs

Author: YousefED

packages/editor/package.json

@@ -100,9 +100,11 @@
   },
   "scripts": {
     "copytypes:self": "rimraf public/types && tsc --declaration --stripInternal --emitDeclarationOnly --noEmit false --declarationDir public/types/@typecell-org/editor",
+    "copytypes:externaldep": "mkdir -p public/types/$npm_config_pkgname && cp -rf ../../node_modules/$npm_config_pkgname/. public/types/$npm_config_pkgname",
+    "copytypes:allexternaldeps": "npm run copytypes:externaldep --pkgname=@types/react && npm run copytypes:externaldep --pkgname=@types/scheduler && npm run copytypes:externaldep --pkgname=@types/prop-types",
     "copytypes:dep": "mkdir -p public/types/@typecell-org/$npm_config_pkgname && cp -rf ../$npm_config_pkgname/types/. public/types/@typecell-org/$npm_config_pkgname",
     "copytypes:alldeps": "npm run copytypes:dep --pkgname=common && npm run copytypes:dep --pkgname=engine",
-    "copytypes": "npm run copytypes:self && npm run copytypes:alldeps",
+    "copytypes": "npm run copytypes:self && npm run copytypes:alldeps && npm run copytypes:allexternaldeps",
     "start": "npm run copytypes && npm run vite:dev",
     "start:local": "npm run copytypes && cross-env VITE_REACT_APP_HOMESERVER_URI=http://localhost:8888 VITE_REACT_APP_HOMESERVER_NAME=test.typecell.org npm run vite:dev",
     "copy-docs": "rimraf public/_docs && mkdir public/_docs && node copy-docs.mjs > public/_docs/index.json && cp -rf ../../docs/. public/_docs",

packages/editor/src/runtime/editor/languages/typescript/typeAcquisition.ts

@@ -165,24 +165,44 @@ const convertToModuleReferenceID = (
   }
 };
 
-const addTypecellModuleToRuntime = async (
+const builtInModules = ["react", "scheduler", "prop-types", "csstype"];
+
+const isBuiltInModule = (mod: string) => {
+  const mainMod = mod.split("/")[0] || mod;
+  return builtInModules.includes(mainMod);
+};
+
+const addBuiltInTypesToRuntime = async (
   mod: string,
   path: string,
   config: ATAConfig
 ) => {
-  const typecellPath = mod === "typecell" ? "@typecell-org/editor" : mod;
+  let typePath = mod;
 
-  let content: string;
+  if (mod === "typecell") {
+    typePath = "@typecell-org/editor";
+  } else if (isBuiltInModule(mod)) {
+    if (mod === "csstype") {
+      typePath = "@types/react/node_modules/csstype"; // TODO: would be better to have 1 version of csstype, and in @types/csstype
+    } else {
+      typePath = "@types/" + mod;
+    }
+  } else if (mod.startsWith("@typecell-org")) {
+    typePath = mod;
+  } else {
+    throw new Error("unknown local type module");
+  }
+
+  let content: string | void;
   if (import.meta.env.NODE_ENV === "test") {
     // TODO: extract this case
     let fs = require("fs");
-    content = fs.readFileSync(
-      "public/types/" + typecellPath + "/" + path,
-      "utf-8"
-    );
+    content = fs.readFileSync("public/types/" + typePath + "/" + path, "utf-8");
   } else {
-    const url = new URL("/types/" + typecellPath + "/" + path, import.meta.url);
-    content = await (await config.fetcher(url.toString())).text();
+    const url = new URL("/types/" + typePath + "/" + path, import.meta.url);
+    // console.log("RESOLVE", mod, url.toString(), path);
+    content = await getCachedDTSString(config, url.toString());
+    // content = await (await config.fetcher(url.toString())).text();
   }
   if (!content) {
     return errorMsg(
@@ -194,7 +214,10 @@ const addTypecellModuleToRuntime = async (
   // Now look and grab dependent modules where you need the
   await getDependenciesForModule(content, mod, path, config);
 
-  config.logger.log("adding typecell module", path);
+  config.logger.log(
+    "adding typecell module",
+    `file:///node_modules/@types/${mod}/${path}`
+  );
   config.addLibraryToRuntime(
     content,
     `file:///node_modules/@types/${mod}/${path}`
@@ -260,6 +283,7 @@ const getModuleAndRootDefTypePath = async (
   const url = moduleJSONURL(packageName);
 
   const response = await config.fetcher(url);
+
   if (!response.ok) {
     return errorMsg(
       `Could not get Algolia JSON for the module '${packageName}'`,
@@ -366,6 +390,7 @@ const getCachedDTSString = async (config: ATAConfig, url: string) => {
   }
 
   const response = await config.fetcher(url);
+
   if (!response.ok) {
     return errorMsg(
       `Could not get DTS response for the module at ${url}`,
@@ -374,6 +399,10 @@ const getCachedDTSString = async (config: ATAConfig, url: string) => {
     );
   }
 
+  if (response.headers.get("content-type") === "text/html") {
+    // this happens when the file is not found, and the server is returning a dynamic route (html fallback) instead
+    console.warn(`possibly wrong file for typescript types at ${url}`);
+  }
   // TODO: handle checking for a resolve to index.d.ts whens someone imports the folder
   let content = await response.text();
   if (!content) {
@@ -407,6 +436,10 @@ const getReferenceDependencies = async (
       if (relativePath) {
         let newPath = mapRelativePath(relativePath, path);
         if (newPath) {
+          if (isBuiltInModule(mod)) {
+            await addBuiltInTypesToRuntime(mod, newPath, config);
+            return;
+          }
           const dtsRefURL = unpkgURL(mod, newPath);
 
           const dtsReferenceResponseText = await getCachedDTSString(
@@ -519,18 +552,19 @@ const getDependenciesForModule = async (
       moduleToDownload.split("/").length === 1;
     const isPackageRootImport = modIsPackageOnly || modIsScopedPackageOnly;
     const isDenoModule = moduleToDownload.indexOf("https://") === 0;
-
+    const isPackageSpecificFileImport =
+      !isPackageRootImport &&
+      !moduleToDownload.startsWith(".") &&
+      moduleToDownload.includes("/"); // absolute path
     if (moduleToDownload.startsWith("!@")) {
       // typecell imports are loaded in TypecellTypeResolver
       return;
       // config.addLibraryToRuntime(code.dtsCode, moduleToDownload+".d.ts");
     } else if (isPackageRootImport) {
       if (moduleToDownload.startsWith("@typecell-org/")) {
-        await addTypecellModuleToRuntime(
-          moduleToDownload,
-          "index.d.ts",
-          config
-        );
+        await addBuiltInTypesToRuntime(moduleToDownload, "index.d.ts", config);
+      } else if (builtInModules.includes(moduleToDownload)) {
+        await addBuiltInTypesToRuntime(moduleToDownload, "index.d.ts", config);
       } else {
         // So it doesn't run twice for a package
         acquiredTypeDefs[moduleID] = null;
@@ -549,22 +583,16 @@ const getDependenciesForModule = async (
     } else if (isDenoModule) {
       // E.g. import { serve } from "https://deno.land/[email protected]/http/server.ts";
       await addModuleToRuntime(moduleToDownload, moduleToDownload, config);
-      // TODO: Possible fix for scheduler/tracing, but not critical / should file with original repo
-      // } else if (
-      //   !moduleToDownload.startsWith(".") &&
-      //   moduleToDownload.includes("/")
-      // ) {
-      //   const parts = moduleToDownload.split("/", 2);
-      //   const packageDef = await getModuleAndRootDefTypePath(parts[0], config);
-
-      //   if (packageDef) {
-      //     acquiredTypeDefs[moduleID] = packageDef.packageJSON;
-      //     const absolutePathForModule = mapRelativePath(
-      //       parts[1] + ".d.ts",
-      //       packageDef.path
-      //     );
-      //     await addModuleToRuntime(packageDef.mod, absolutePathForModule, config);
-      //   }
+    } else if (isPackageSpecificFileImport) {
+      // fix for scheduler/tracing
+      const parts = moduleToDownload.split("/", 2);
+      const modname = parts[0];
+      const pathName = parts[1] + ".d.ts";
+      if (isBuiltInModule(moduleName!)) {
+        await addBuiltInTypesToRuntime(modname, pathName, config);
+      } else {
+        await addModuleToRuntime(modname, pathName, config);
+      }
     } else {
       // E.g. import {Component} from "./MyThing"
       if (!moduleToDownload || !path)
@@ -594,14 +622,16 @@ const getDependenciesForModule = async (
         moduleName?.startsWith("typecell") ||
         moduleName?.startsWith("@typecell-org/")
       ) {
-        await addTypecellModuleToRuntime(moduleName!, resolvedFilepath, config);
+        await addBuiltInTypesToRuntime(moduleName!, resolvedFilepath, config);
+      } else if (isBuiltInModule(moduleName!)) {
+        await addBuiltInTypesToRuntime(moduleName!, resolvedFilepath, config);
       } else {
         await addModuleToRuntime(moduleName!, resolvedFilepath, config);
       }
     }
   });
 
-  // Also support the
+  // Also support the <reference> comments
   promises.push(
     getReferenceDependencies(sourceCode, moduleName!, path!, config)
   );