fix(sandpack-client): setup build with rollup (#758)

Co-authored-by: Danilo Woznica <danilowoz@gmail.com>

Author: jeetiss

package.json

@@ -37,13 +37,15 @@
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
     "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.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.17.9",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-react-app": "^6.0.0",
@@ -52,15 +54,14 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "@esbuild-plugins/node-globals-polyfill": "0.1.1",
     "jest": "^27.4.5",
     "lerna": "^4.0.0",
     "lerna-changelog": "^2.1.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "react-test-renderer": "^18.1.0",
     "rollup": "^3.9.1",
-    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-string": "^3.0.0",
     "turbo": "^1.5.5"
   },
   "lint-staged": {

sandpack-client/build.js

@@ -12,16 +12,20 @@
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./clients/runtime": {
+      "types": "./dist/clients/runtime/index.d.ts",
       "import": "./dist/clients/runtime/index.mjs",
       "require": "./dist/clients/runtime/index.js"
     },
     "./clients/node": {
+      "types": "./dist/clients/node/index.d.ts",
       "import": "./dist/clients/node/index.mjs",
       "require": "./dist/clients/node/index.js"
     },
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     }
@@ -31,8 +35,7 @@
     "prebuild": "yarn run clean",
     "test": "jest .",
     "lint": "eslint '**/*.ts?(x)' --fix",
-    "build": "node build.js && yarn run build:types",
-    "build:types": "tsc -p tsconfig.json",
+    "build": "rollup -c --bundleConfigAsCjs",
     "build:publish": "yarn build && gulp",
     "build:bundler": "gulp",
     "format": "prettier --write '**/*.{ts,tsx,js,jsx}'",
@@ -47,6 +50,7 @@
   ],
   "dependencies": {
     "@codesandbox/nodebox": "0.1.0",
+    "buffer": "^6.0.3",
     "dequal": "^2.0.2",
     "outvariant": "1.3.0"
   },

sandpack-client/package.json

@@ -1,39 +1,68 @@
-const commonjs = require("@rollup/plugin-commonjs");
-const typescript = require("@rollup/plugin-typescript");
-const replace = require("rollup-plugin-replace");
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import { string } from "rollup-plugin-string";
 
-const pkg = require("./package.json");
+import pkg from "./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",
+const configs = [
+  {
+    input: "src/clients/node/inject-scripts/consoleHook.ts",
+    output: {
+      file: "src/clients/node/inject-scripts/dist/consoleHook.js",
       format: "es",
-      inlineDynamicImports: true,
     },
-  ],
+    plugins: [
+      typescript({
+        tsconfig: "./tsconfig.json",
+        compilerOptions: { declaration: false },
+      }),
+      commonjs(),
+      nodeResolve(),
+      terser({ compress: { passes: 2 } }),
+    ],
+    external: [],
+  },
+
+  {
+    input: {
+      index: "src/index.ts",
+      "clients/node/index": "src/clients/node/index.ts",
+      "clients/runtime/index": "src/clients/runtime/index.ts",
+    },
+    output: [
+      {
+        dir: "dist",
+        format: "cjs",
+      },
+      {
+        dir: "dist",
+        chunkFileNames: "[name]-[hash].mjs",
+        entryFileNames: "[name].mjs",
+        format: "es",
+      },
+    ],
 
-  plugins: [
-    typescript({ tsconfig: "./tsconfig.json" }),
-    replace({
-      "process.env.CODESANDBOX_ENV": `"${process.env.CODESANDBOX_ENV}"`,
-      "process.env.PACKAGE_VERSION": `"${pkg.version}"`,
+    plugins: [
+      typescript({ tsconfig: "./tsconfig.json" }),
+      string({ include: "**/dist/consoleHook.js" }),
+      replace({
+        preventAssignment: true,
+        values: {
+          global: "globalThis",
+          "process.env.CODESANDBOX_ENV": `"${process.env.CODESANDBOX_ENV}"`,
+          "process.env.PACKAGE_VERSION": `"${pkg.version}"`,
+        },
+      }),
+    ],
+    external: Object.keys({
+      ...(pkg.dependencies || {}),
+      ...(pkg.devDependencies || {}),
+      ...(pkg.peerDependencies || {}),
     }),
-    commonjs({ requireReturnsDefault: "preferred" }),
-  ],
-  external: [
-    ...Object.keys(pkg.dependencies),
-    ...Object.keys(pkg.devDependencies),
-  ],
-};
+  },
+];
 
-module.exports = configBase;
+export default configs;

sandpack-client/rollup.config.js

@@ -1,3 +1,5 @@
+import { Buffer } from "buffer";
+
 import type { ShellCommandOptions } from "@codesandbox/nodebox/build/modules/shell";
 import { invariant } from "outvariant";
 

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

@@ -1,5 +1,7 @@
 /* eslint-disable no-console,@typescript-eslint/no-explicit-any,prefer-rest-params,@typescript-eslint/explicit-module-boundary-types */
 
+import { Buffer } from "buffer";
+
 import { PREVIEW_LOADED_MESSAGE_TYPE, Nodebox } from "@codesandbox/nodebox";
 import type {
   FilesMap,

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

@@ -5,7 +5,7 @@ import { INJECT_MESSAGE_TYPE } from "@codesandbox/nodebox";
 
 // get the bundled file, which contains all dependencies
 // @ts-ignore
-import consoleHook from "./dist/consoleHook.txt";
+import consoleHook from "./dist/consoleHook.js";
 import { setupHistoryListeners } from "./historyListener";
 
 const scripts = [

sandpack-client/src/clients/node/inject-scripts/index.ts

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

sandpack-react/package.json

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const commonjs = require("@rollup/plugin-commonjs");
+const replace = require("@rollup/plugin-replace");
 const typescript = require("@rollup/plugin-typescript");
-const replace = require("rollup-plugin-replace");
 
 const pkg = require("./package.json");
 
@@ -25,11 +25,14 @@ const configBase = {
 
   plugins: [
     typescript({ tsconfig: "./tsconfig.json" }),
-    replace({ "process.env.TEST_ENV": "false" }),
+    replace({
+      preventAssignment: true,
+      values: { "process.env.TEST_ENV": "false" },
+    }),
     commonjs({ requireReturnsDefault: "preferred" }),
   ],
   external: [
-    'react/jsx-runtime',
+    "react/jsx-runtime",
     ...Object.keys(pkg.dependencies),
     ...Object.keys(pkg.devDependencies),
     ...Object.keys(pkg.peerDependencies),

sandpack-react/rollup.config.js

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

sandpack-themes/package.json

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const typescript = require("@rollup/plugin-typescript");
 
 const pkg = require("./package.json");