Prebundle Sandpack lint and theme

Author: feedthejim

package.json

@@ -4,10 +4,10 @@
   "private": true,
   "license": "CC",
   "scripts": {
-    "analyze": "ANALYZE=true next build --webpack",
-    "dev": "node scripts/buildRscWorker.mjs && next dev",
+    "analyze": "node scripts/buildRscWorker.mjs && node scripts/buildSandpackHooksLint.mjs && node scripts/buildSandpackTheme.mjs && ANALYZE=true next build --webpack",
+    "dev": "node scripts/buildRscWorker.mjs && node scripts/buildSandpackHooksLint.mjs && node scripts/buildSandpackTheme.mjs && next dev",
     "prebuild:rsc": "node scripts/buildRscWorker.mjs",
-    "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs",
+    "build": "node scripts/buildRscWorker.mjs && node scripts/buildSandpackHooksLint.mjs && node scripts/buildSandpackTheme.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
@@ -72,7 +72,6 @@
     "eslint-plugin-local-rules": "link:eslint-local-rules",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-hooks-browser": "npm:eslint-plugin-react-hooks@5.2.0",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",

scripts/buildSandpackHooksLint.mjs

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as esbuild from 'esbuild';
+import fs from 'fs';
+import path from 'path';
+import {fileURLToPath} from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, '..');
+const generatedHooksLintOutfile = path.resolve(
+  root,
+  'src/components/MDX/Sandpack/generatedHooksLint.ts'
+);
+
+const stubbedModules = new Set([
+  'fs',
+  'path',
+  'crypto',
+  'util',
+  'assert',
+  '@babel/core',
+  '@babel/parser',
+  'hermes-parser',
+]);
+
+const stubPlugin = {
+  name: 'stub-sandpack-hooks-runtime-deps',
+  setup(build) {
+    build.onResolve({filter: /.*/}, (args) => {
+      if (stubbedModules.has(args.path)) {
+        return {
+          path: args.path,
+          namespace: 'sandpack-hooks-stub',
+        };
+      }
+    });
+
+    build.onLoad(
+      {filter: /.*/, namespace: 'sandpack-hooks-stub'},
+      () => ({
+        contents: `
+          const stub = new Proxy(function () { return stub; }, {
+            get(_target, prop) {
+              if (prop === Symbol.toPrimitive) return () => '';
+              if (prop === 'toString') return () => '';
+              if (prop === 'valueOf') return () => '';
+              if (prop === 'then') return undefined;
+              return stub;
+            },
+            apply() { return stub; },
+            construct() { return stub; },
+          });
+
+          module.exports = stub;
+        `,
+        loader: 'js',
+      })
+    );
+  },
+};
+
+await esbuild.build({
+  stdin: {
+    contents: `
+      const plugin = require('eslint-plugin-react-hooks');
+
+      const rulesOfHooks = plugin.rules['rules-of-hooks'];
+      const exhaustiveDeps = plugin.rules['exhaustive-deps'];
+
+      export const reactHooksPlugin = {
+        rules: {
+          'rules-of-hooks': rulesOfHooks,
+          'exhaustive-deps': exhaustiveDeps,
+        },
+      };
+    `,
+    resolveDir: root,
+    sourcefile: 'sandpack-hooks-entry.js',
+  },
+  bundle: true,
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+  format: 'esm',
+  minify: true,
+  outfile: generatedHooksLintOutfile,
+  platform: 'browser',
+  plugins: [stubPlugin],
+});
+
+const generatedSource = fs.readFileSync(generatedHooksLintOutfile, 'utf8');
+const header = `// @ts-nocheck
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This file is generated by scripts/buildSandpackHooksLint.mjs.
+
+`;
+
+fs.writeFileSync(generatedHooksLintOutfile, header + generatedSource);

scripts/buildSandpackTheme.mjs

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import {createRequire} from 'module';
+import {fileURLToPath} from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, '..');
+const require = createRequire(import.meta.url);
+
+const generatedThemeOutfile = path.resolve(
+  root,
+  'src/components/MDX/Sandpack/generatedTheme.ts'
+);
+
+const tailwindConfig = require(path.resolve(root, 'tailwind.config.js'));
+
+const sandpackThemeFonts = {
+  body: tailwindConfig.theme.extend.fontFamily.text
+    .join(', ')
+    .replace(/"/g, ''),
+  mono: tailwindConfig.theme.extend.fontFamily.mono
+    .join(', ')
+    .replace(/"/g, ''),
+  size: tailwindConfig.theme.extend.fontSize.code,
+};
+
+const generatedThemeModule = `/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// This file is generated by scripts/buildSandpackTheme.mjs.
+
+export const sandpackThemeFonts = ${JSON.stringify(
+  sandpackThemeFonts,
+  null,
+  2
+)} as const;
+`;
+
+fs.writeFileSync(generatedThemeOutfile, generatedThemeModule);

src/components/MDX/Sandpack/Themes.tsx

@@ -9,7 +9,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import tailwindConfig from '../../../../tailwind.config';
+import {sandpackThemeFonts} from './generatedTheme';
 
 export const CustomTheme = {
   colors: {
@@ -38,13 +38,9 @@ export const CustomTheme = {
     string: 'inherit',
   },
   font: {
-    body: tailwindConfig.theme.extend.fontFamily.text
-      .join(', ')
-      .replace(/"/gm, ''),
-    mono: tailwindConfig.theme.extend.fontFamily.mono
-      .join(', ')
-      .replace(/"/gm, ''),
-    size: tailwindConfig.theme.extend.fontSize.code,
+    body: sandpackThemeFonts.body,
+    mono: sandpackThemeFonts.mono,
+    size: sandpackThemeFonts.size,
     lineHeight: '24px',
   },
 };