feat: migrate esbuild to rollup (#678)

Author: danilowoz

.nvmrc

@@ -1 +1 @@
-v14.17.0
+v16

package.json

@@ -6,12 +6,12 @@
     "sandpack-client",
     "sandpack-react",
     "sandpack-themes",
-    "website/*",
-    "examples/*"
+    "website/*"
   ],
   "nohoist": [
     "website/docs/**",
-    "**/html-minifier-terser"
+    "**/html-minifier-terser",
+    "examples/**"
   ],
   "description": "",
   "scripts": {
@@ -36,16 +36,17 @@
   "author": "CodeSandbox",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@octokit/rest": "^18.12.0",
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
-    "@octokit/rest": "^18.12.0",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-typescript": "^10.0.1",
     "@types/jest": "^27.4.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^27.4.5",
-    "esbuild": "^0.12.21",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-react-app": "^6.0.0",
@@ -63,6 +64,8 @@
     "package-build-stats": "7.3.13",
     "prettier": "^2.2.1",
     "react-test-renderer": "^18.1.0",
+    "rollup": "^3.9.1",
+    "rollup-plugin-replace": "^2.2.0",
     "turbo": "^1.5.5"
   },
   "lint-staged": {

sandpack-client/build.js

@@ -17,7 +17,7 @@
     "clean": "rm -rf dist sandpack",
     "prebuild": "yarn run clean",
     "test": "jest .",
-    "build": "node build.js && yarn run build:types",
+    "build": "rollup -c && yarn run build:types",
     "build:types": "tsc -p tsconfig.json",
     "lint": "eslint '**/*.ts?(x)' --fix",
     "build:publish": "yarn build && gulp",

sandpack-client/package.json

@@ -0,0 +1,39 @@
+const typescript = require("@rollup/plugin-typescript");
+const pkg = require("./package.json");
+const commonjs = require("@rollup/plugin-commonjs");
+
+const replace = require("rollup-plugin-replace");
+
+const configBase = {
+  input: "src/index.ts",
+  output: [
+    {
+      file: pkg.main,
+      exports: "named",
+      format: "cjs",
+      inlineDynamicImports: true,
+      interop: "auto",
+    },
+    {
+      file: pkg.module,
+      exports: "named",
+      format: "es",
+      inlineDynamicImports: true,
+    },
+  ],
+
+  plugins: [
+    typescript({ tsconfig: "./tsconfig.json" }),
+    replace({
+      "process.env.CODESANDBOX_ENV": `"${process.env.CODESANDBOX_ENV}"`,
+      "process.env.PACKAGE_VERSION": `"${pkg.version}"`,
+    }),
+    commonjs({ requireReturnsDefault: "preferred" }),
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies),
+    ...Object.keys(pkg.devDependencies),
+  ],
+};
+
+module.exports = configBase;

sandpack-client/rollup.config.js

@@ -3,7 +3,7 @@ import isEqual from "lodash.isequal";
 
 import Protocol from "./file-resolver-protocol";
 import { IFrameProtocol } from "./iframe-protocol";
-import type {
+import {
   Dependencies,
   SandpackBundlerFiles,
   BundlerState,
@@ -16,15 +16,14 @@ import type {
   ReactDevToolsMode,
   Template,
   NpmRegistry,
+  SandpackLogLevel,
 } from "./types";
 import {
   createPackageJSON,
   addPackageJSONIfNeeded,
   extractErrorDetails,
 } from "./utils";
 
-import { SandpackLogLevel } from ".";
-
 export interface ClientOptions {
   /**
    * Paths to external resources

sandpack-client/src/client.ts

@@ -20,7 +20,7 @@
     "prebuild": "yarn run clean",
     "test": "TEST_ENV=true jest . --transformIgnorePatterns \"node_modules/(?!@codemirror)/\" --modulePathIgnorePatterns \"e2e\"",
     "lint": "eslint '**/*.ts?(x)' --fix",
-    "build": "node build.js && yarn run build:types",
+    "build": "rollup -c && yarn run build:types",
     "build:publish": "yarn build",
     "build:types": "tsc -p tsconfig.json",
     "start": "tsc -p tsconfig.esm.json --watch",

sandpack-react/build.js

@@ -0,0 +1,37 @@
+const typescript = require("@rollup/plugin-typescript");
+const pkg = require("./package.json");
+const commonjs = require("@rollup/plugin-commonjs");
+
+const replace = require("rollup-plugin-replace");
+
+const configBase = {
+  input: "src/index.ts",
+  output: [
+    {
+      file: pkg.main,
+      exports: "named",
+      format: "cjs",
+      inlineDynamicImports: true,
+      interop: "auto",
+    },
+    {
+      file: pkg.module,
+      exports: "named",
+      format: "es",
+      inlineDynamicImports: true,
+    },
+  ],
+
+  plugins: [
+    typescript({ tsconfig: "./tsconfig.json" }),
+    replace({ "process.env.TEST_ENV": "false" }),
+    commonjs({ requireReturnsDefault: "preferred" }),
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies),
+    ...Object.keys(pkg.devDependencies),
+    ...Object.keys(pkg.peerDependencies),
+  ],
+};
+
+module.exports = configBase;

sandpack-react/package.json

@@ -1,13 +1,11 @@
 import type { SandpackBundlerFiles } from "@codesandbox/sandpack-client";
 import * as React from "react";
 
-import type { SandpackOptions } from "../..";
-
+import type { SandpackFileExplorerProp } from ".";
+import { SandpackOptions } from "../../types";
 import { File } from "./File";
 import { ModuleList } from "./ModuleList";
 
-import type { SandpackFileExplorerProp } from ".";
-
 export interface Props extends SandpackFileExplorerProp {
   prefixedPath: string;
   files: SandpackBundlerFiles;

sandpack-react/rollup.config.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 
-import { stackClassName } from "../..";
 import { useSandpack } from "../../hooks/useSandpack";
 import { css, THEME_PREFIX } from "../../styles";
 import { classNames } from "../../utils/classNames";
+import { stackClassName } from "../common";
 
 import { ModuleList } from "./ModuleList";
 

sandpack-react/src/components/FileExplorer/Directory.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 
-import { ConsoleIcon } from "../..";
 import { css } from "../../styles";
 import { roundedButtonClassName, buttonClassName } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
+import { ConsoleIcon } from "../icons";
 
 import type { Status } from "./SandpackTests";
 

sandpack-react/src/components/FileExplorer/index.tsx

@@ -1,13 +1,13 @@
 import { useClasser } from "@code-hike/classer";
 import * as React from "react";
 
-import { stackClassName } from "../..";
 import { useSandpack } from "../../hooks/useSandpack";
 import { useTranspiledCode } from "../../hooks/useTranspiledCode";
 import { css, THEME_PREFIX } from "../../styles";
 import { classNames } from "../../utils/classNames";
 import type { CodeViewerProps } from "../CodeViewer";
 import { SandpackCodeViewer } from "../CodeViewer";
+import { stackClassName } from "../common";
 import { ErrorOverlay } from "../common/ErrorOverlay";
 import { LoadingOverlay } from "../common/LoadingOverlay";
 

sandpack-react/src/components/Tests/Header.tsx

@@ -5,8 +5,7 @@ import { useSandpack } from "../../hooks/useSandpack";
 import { css, THEME_PREFIX } from "../../styles";
 import { classNames } from "../../utils/classNames";
 import { useCombinedRefs } from "../CodeEditor/utils";
-
-import { stackClassName } from ".";
+import { stackClassName } from "./Stack";
 
 /**
  * @category Components

sandpack-react/src/components/TranspiledCode/index.tsx

@@ -5,6 +5,5 @@ export * from "./FileTabs";
 export * from "./Navigator";
 export * from "./Preview";
 export * from "./TranspiledCode";
-export * from "./ReactDevTools";
 export * from "./Tests";
 export * from "./Console";

sandpack-react/src/components/common/Layout.tsx

@@ -8,8 +8,7 @@ import * as React from "react";
 
 import type { SandpackState } from "../types";
 import { generateRandomId } from "../utils/stringUtils";
-
-import { useSandpack } from "./";
+import { useSandpack } from "./useSandpack";
 
 interface UseSandpackClient {
   sandpack: SandpackState;

sandpack-react/src/components/index.ts

@@ -33,7 +33,7 @@ describe("getSandpackCssText", () => {
       </SandpackProvider>
     );
 
-    expect(getSandpackCssText().length).toBe(4343);
+    expect(getSandpackCssText().length).toBe(4600);
     expect(getSandpackCssText()).not.toContain(componentClassName);
   });
 

sandpack-react/src/hooks/useSandpackClient.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as React from "react";
 
-import { SANDBOX_TEMPLATES, SandpackStack } from "..";
 import type { CodeEditorProps } from "../components/CodeEditor";
 import { SandpackCodeEditor } from "../components/CodeEditor";
 import { SandpackConsole } from "../components/Console";
@@ -24,6 +23,8 @@ import type {
   SandpackPredefinedTemplate,
 } from "../types";
 import { classNames } from "../utils/classNames";
+import { SandpackStack } from "../components/common";
+import { SANDBOX_TEMPLATES } from "../templates";
 
 /**
  * @hidden

sandpack-react/src/presets/Sandpack.test.tsx

@@ -16,7 +16,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "yarn run clean",
-    "build": "node build.js && yarn run build:types",
+    "build": "rollup -c && yarn run build:types",
     "build:types": "tsc -p tsconfig.json",
     "build:publish": "yarn build",
     "typecheck": "tsc"

sandpack-react/src/presets/Sandpack.tsx

@@ -0,0 +1,26 @@
+const typescript = require("@rollup/plugin-typescript");
+const pkg = require("./package.json");
+
+const configBase = {
+  input: "src/index.ts",
+  output: [
+    {
+      file: pkg.main,
+      exports: "named",
+      format: "cjs",
+      inlineDynamicImports: true,
+      interop: "auto",
+    },
+    {
+      file: pkg.module,
+      exports: "named",
+      format: "es",
+      inlineDynamicImports: true,
+    },
+  ],
+
+  plugins: [typescript({ tsconfig: "./tsconfig.json" })],
+  external: [...Object.keys(pkg.devDependencies)],
+};
+
+module.exports = configBase;

sandpack-themes/build.js

@@ -330,14 +330,17 @@ function Library({ setTheme }) {
     <>
       <Title>Themes</Title>
       <PickerContainer>
-        {Object.entries(themeGallery).map(([label, payload]) => (
-          <PickerTheme
-            key={JSON.stringify(payload)}
-            colors={[payload.colors.accent, payload.colors.surface1]}
-            label={label}
-            onClick={() => setTheme(payload)}
-          />
-        ))}
+        {Object.entries(themeGallery).map(([label, payload]) => {
+          if (!payload.colors) return null;
+          return (
+            <PickerTheme
+              key={JSON.stringify(payload)}
+              colors={[payload.colors.accent, payload.colors.surface1]}
+              label={label}
+              onClick={() => setTheme(payload)}
+            />
+          );
+        })}
       </PickerContainer>
     </>
   );