fix(sandpack-react): build ReactDevTools component

sandpack-react/package.json

@@ -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 --bundleConfigAsCjs",
     "build:publish": "yarn build",
     "start": "tsc -p tsconfig.esm.json --watch",
     "dev": "start-storybook -p 6006 --quiet",

sandpack-react/rollup.config.js

@@ -1,30 +1,34 @@
 /* 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");
+import { relative } from "path";
 
-const pkg = require("./package.json");
+import commonjs from "@rollup/plugin-commonjs";
+import replace from "@rollup/plugin-replace";
+import typescript from "@rollup/plugin-typescript";
+
+import pkg from "./package.json";
 
 const configBase = {
   input: "src/index.ts",
   output: [
     {
-      file: pkg.main,
+      dir: "dist",
+      entryFileNames: relative("dist", pkg.main),
       exports: "named",
       format: "cjs",
-      inlineDynamicImports: true,
       interop: "auto",
     },
     {
-      file: pkg.module,
+      dir: "dist",
+      entryFileNames: relative("dist", pkg.module),
       exports: "named",
       format: "es",
-      inlineDynamicImports: true,
     },
   ],
 
   plugins: [
-    typescript({ tsconfig: "./tsconfig.json" }),
+    typescript({
+      tsconfig: "./tsconfig.json",
+    }),
     replace({
       preventAssignment: true,
       values: { "process.env.TEST_ENV": "false" },
@@ -33,10 +37,10 @@ const configBase = {
   ],
   external: [
     "react/jsx-runtime",
+    /react-devtools-inline/,
     ...Object.keys(pkg.dependencies),
-    ...Object.keys(pkg.devDependencies),
     ...Object.keys(pkg.peerDependencies),
   ],
 };
 
-module.exports = configBase;
+export default configBase;

sandpack-react/src/components/index.ts

@@ -7,3 +7,4 @@ export * from "./Preview";
 export * from "./TranspiledCode";
 export * from "./Tests";
 export * from "./Console";
+export * from "./ReactDevTools";