fix(sandpack-client): fixing package exports (#737)

Co-authored-by: Danilo Woznica <[email protected]>
fix #724
fix #677

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "packages": ["sandpack-client", "sandpack-react"],
   "sandboxes": ["sowx8r"],
-  "node": "14.18.0"
+  "node": "16"
 }

sandpack-client/package.json

@@ -11,10 +11,14 @@
   "author": "CodeSandbox",
   "sideEffects": false,
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "exports": {
+    "./clients/runtime": {
+      "import": "./dist/clients/runtime/index.mjs",
+      "require": "./dist/clients/runtime/index.js"
+    },
     "./clients/node": {
-      "import": "./dist/clients/node/index.js",
+      "import": "./dist/clients/node/index.mjs",
       "require": "./dist/clients/node/index.js"
     },
     ".": {
@@ -43,7 +47,6 @@
   ],
   "dependencies": {
     "@codesandbox/nodebox": "0.1.0",
-    "codesandbox-import-utils": "^1.2.3",
     "console-feed": "3.3.0",
     "lodash.isequal": "^4.5.0",
     "outvariant": "1.3.0"

sandpack-client/src/clients/runtime/index.ts

@@ -1,4 +1,3 @@
-import { getTemplate } from "codesandbox-import-utils/lib/create-sandbox/templates";
 import isEqual from "lodash.isequal";
 
 import type { SandpackMessage } from "../..";
@@ -26,6 +25,7 @@ import { SandpackClient } from "../base";
 import Protocol from "./file-resolver-protocol";
 import { IFrameProtocol } from "./iframe-protocol";
 import type { SandpackRuntimeMessage } from "./types";
+import { getTemplate } from "./utils";
 
 const BUNDLER_URL =
   process.env.CODESANDBOX_ENV === "development"

sandpack-client/src/clients/runtime/utils.ts

@@ -0,0 +1,182 @@
+const MAX_CLIENT_DEPENDENCY_COUNT = 50;
+
+type Dependencies = Record<string, string>;
+interface PackageJSON {
+  dependencies?: Dependencies;
+  devDependencies?: Dependencies;
+}
+export function getTemplate(
+  pkg: PackageJSON | null,
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  modules: any
+): string | undefined {
+  if (!pkg) {
+    return "static";
+  }
+
+  const { dependencies = {}, devDependencies = {} } = pkg;
+
+  const totalDependencies = [
+    ...Object.keys(dependencies),
+    ...Object.keys(devDependencies),
+  ];
+  const moduleNames = Object.keys(modules);
+
+  const adonis = ["@adonisjs/framework", "@adonisjs/core"];
+
+  if (totalDependencies.some((dep) => adonis.indexOf(dep) > -1)) {
+    return "adonis";
+  }
+
+  const nuxt = ["nuxt", "nuxt-edge", "nuxt-ts", "nuxt-ts-edge", "nuxt3"];
+
+  if (totalDependencies.some((dep) => nuxt.indexOf(dep) > -1)) {
+    return "nuxt";
+  }
+
+  if (totalDependencies.indexOf("next") > -1) {
+    return "next";
+  }
+
+  const apollo = [
+    "apollo-server",
+    "apollo-server-express",
+    "apollo-server-hapi",
+    "apollo-server-koa",
+    "apollo-server-lambda",
+    "apollo-server-micro",
+  ];
+
+  if (totalDependencies.some((dep) => apollo.indexOf(dep) > -1)) {
+    return "apollo";
+  }
+
+  if (totalDependencies.indexOf("mdx-deck") > -1) {
+    return "mdx-deck";
+  }
+
+  if (totalDependencies.indexOf("gridsome") > -1) {
+    return "gridsome";
+  }
+
+  if (totalDependencies.indexOf("vuepress") > -1) {
+    return "vuepress";
+  }
+
+  if (totalDependencies.indexOf("ember-cli") > -1) {
+    return "ember";
+  }
+
+  if (totalDependencies.indexOf("sapper") > -1) {
+    return "sapper";
+  }
+
+  if (totalDependencies.indexOf("gatsby") > -1) {
+    return "gatsby";
+  }
+
+  if (totalDependencies.indexOf("quasar") > -1) {
+    return "quasar";
+  }
+
+  if (totalDependencies.indexOf("@docusaurus/core") > -1) {
+    return "docusaurus";
+  }
+
+  if (totalDependencies.indexOf("remix") > -1) {
+    return "remix";
+  }
+
+  if (totalDependencies.indexOf("astro") > -1) {
+    return "node";
+  }
+
+  // CLIENT
+
+  if (moduleNames.some((m) => m.endsWith(".re"))) {
+    return "reason";
+  }
+
+  const parcel = ["parcel-bundler", "parcel"];
+  if (totalDependencies.some((dep) => parcel.indexOf(dep) > -1)) {
+    return "parcel";
+  }
+
+  const dojo = ["@dojo/core", "@dojo/framework"];
+  if (totalDependencies.some((dep) => dojo.indexOf(dep) > -1)) {
+    return "@dojo/cli-create-app";
+  }
+  if (
+    totalDependencies.indexOf("@nestjs/core") > -1 ||
+    totalDependencies.indexOf("@nestjs/common") > -1
+  ) {
+    return "nest";
+  }
+
+  if (totalDependencies.indexOf("react-styleguidist") > -1) {
+    return "styleguidist";
+  }
+
+  if (totalDependencies.indexOf("react-scripts") > -1) {
+    return "create-react-app";
+  }
+
+  if (totalDependencies.indexOf("react-scripts-ts") > -1) {
+    return "create-react-app-typescript";
+  }
+
+  if (totalDependencies.indexOf("@angular/core") > -1) {
+    return "angular-cli";
+  }
+
+  if (totalDependencies.indexOf("preact-cli") > -1) {
+    return "preact-cli";
+  }
+
+  if (
+    totalDependencies.indexOf("@sveltech/routify") > -1 ||
+    totalDependencies.indexOf("@roxi/routify") > -1
+  ) {
+    return "node";
+  }
+
+  if (totalDependencies.indexOf("vite") > -1) {
+    return "node";
+  }
+
+  if (totalDependencies.indexOf("@frontity/core") > -1) {
+    return "node";
+  }
+
+  if (totalDependencies.indexOf("svelte") > -1) {
+    return "svelte";
+  }
+
+  if (totalDependencies.indexOf("vue") > -1) {
+    return "vue-cli";
+  }
+
+  if (totalDependencies.indexOf("cx") > -1) {
+    return "cxjs";
+  }
+
+  const nodeDeps = [
+    "express",
+    "koa",
+    "nodemon",
+    "ts-node",
+    "@tensorflow/tfjs-node",
+    "webpack-dev-server",
+    "snowpack",
+  ];
+  if (totalDependencies.some((dep) => nodeDeps.indexOf(dep) > -1)) {
+    return "node";
+  }
+
+  if (Object.keys(dependencies).length >= MAX_CLIENT_DEPENDENCY_COUNT) {
+    // The dependencies are too much for client sandboxes to handle
+    return "node";
+  }
+
+  return undefined;
+}

sandpack-react/src/components/Console/SandpackConsole.tsx

@@ -4,10 +4,10 @@ import { useSandpack, useSandpackClient, useSandpackShell } from "../..";
 import { useSandpackShellStdout } from "../../hooks/useSandpackShellStdout";
 import { css, THEME_PREFIX } from "../../styles";
 import { classNames } from "../../utils/classNames";
+import { PreviewProgress } from "../Preview/PreviewProgress";
 import { SandpackStack } from "../common";
 import { RoundedButton } from "../common/RoundedButton";
 import { CleanIcon, RestartIcon } from "../icons";
-import { PreviewProgress } from "../Preview/PreviewProgress";
 
 import { ConsoleList } from "./ConsoleList";
 import { Header } from "./Header";
@@ -87,7 +87,7 @@ export const SandpackConsole: React.FC<
       {...props}
     >
       {showSetupProgress && (
-        <PreviewProgress dismissOnTimeout timeout={1_000} />
+        <PreviewProgress timeout={1_000} dismissOnTimeout />
       )}
 
       {(showHeader || isNodeEnvironment) && (

yarn.lock

@@ -6475,11 +6475,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-binaryextensions@2:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
-  integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==
-
 bindings@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -7284,25 +7279,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
-codesandbox-import-util-types@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-1.3.7.tgz#7a6097e248a75424d13b06b74368cd76bd2b3e10"
-  integrity sha512-8oP3emA0jyEuVOM2FBTpo/AF4C9vxHn14saVWZf2CQ/QhMtonBlNPE98ElrHkW+PFNXiO7Ad52Qr73b03n8qlA==
-
 codesandbox-import-util-types@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
   integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
 
-codesandbox-import-utils@^1.2.3:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-1.3.8.tgz#5576786439c5f37ebd3fee5751e06027a1edef84"
-  integrity sha512-S12zO49QEkldoYLGh5KbkHRLOacg5BCNTue2vlyZXSpuK3oQdArwC/G1hCLKryV460bW3Ecn5xdkpfkUcFeOwQ==
-  dependencies:
-    codesandbox-import-util-types "^1.3.7"
-    istextorbinary "2.2.1"
-    lz-string "^1.4.4"
-
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -8406,11 +8387,6 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-editions@^1.3.3:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
-  integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
-
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11713,15 +11689,6 @@ istanbul-reports@^3.1.3, istanbul-reports@^3.1.4:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-[email protected]:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53"
-  integrity sha512-TS+hoFl8Z5FAFMK38nhBkdLt44CclNRgDHWeMgsV8ko3nDlr/9UI2Sf839sW7enijf8oKsZYXRvM8g0it9Zmcw==
-  dependencies:
-    binaryextensions "2"
-    editions "^1.3.3"
-    textextensions "2"
-
 iterate-iterator@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/iterate-iterator/-/iterate-iterator-1.0.2.tgz#551b804c9eaa15b847ea6a7cdc2f5bf1ec150f91"
@@ -17861,11 +17828,6 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-textextensions@2:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
-  integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
-
 thenby@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/thenby/-/thenby-1.3.4.tgz#81581f6e1bb324c6dedeae9bfc28e59b1a2201cc"