ref(nextjs): Prework for wrapping data-fetching functions (#5508)

This is a number of boring structural changes pulled out of #5503 in order to make it easier to review.

Included changes:
- Create folders for loaders and templates, and move the existing loader and template into their respective new folders.
- Convert the `LoaderThis` type into a generic, so that each loader can specify its own options but share everything specified by webpack.
- Since we are only going to support wrapping for pages written in ESM, make sure that templates are ESM, even if the CJS version of the SDK is being used. This required creating a build script, which in turn required updating our ESLint config.
- Add/clarify comments in existing loader files.

Author: lobsterkatie

packages/nextjs/.eslintrc.js

@@ -11,4 +11,12 @@ module.exports = {
   rules: {
     '@sentry-internal/sdk/no-async-await': 'off',
   },
+  overrides: [
+    {
+      files: ['scripts/**/*.ts'],
+      parserOptions: {
+        project: ['../../tsconfig.dev.json'],
+      },
+    },
+  ],
 };

packages/nextjs/package.json

@@ -45,11 +45,11 @@
   "scripts": {
     "build": "run-p build:rollup build:types",
     "build:dev": "run-s build",
-    "build:rollup": "rollup -c rollup.npm.config.js",
+    "build:rollup": "ts-node scripts/buildRollup.ts",
     "build:types": "tsc -p tsconfig.types.json",
     "build:watch": "run-p build:rollup:watch build:types:watch",
     "build:dev:watch": "run-s build:watch",
-    "build:rollup:watch": "rollup -c rollup.npm.config.js --watch",
+    "build:rollup:watch": "nodemon --ext ts --watch src scripts/buildRollup.ts",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build",
     "circularDepCheck": "madge --circular src/index.client.ts && madge --circular --exclude 'config/types\\.ts' src/index.server.ts # see https://github.com/pahen/madge/issues/306",

packages/nextjs/rollup.npm.config.js

@@ -14,12 +14,12 @@ export default [
   ),
   ...makeNPMConfigVariants(
     makeBaseNPMConfig({
-      entrypoints: ['src/config/prefixLoaderTemplate.ts'],
+      entrypoints: ['src/config/templates/prefixLoaderTemplate.ts'],
 
       packageSpecificConfig: {
         output: {
           // preserve the original file structure (i.e., so that everything is still relative to `src`)
-          entryFileNames: 'config/[name].js',
+          entryFileNames: 'config/templates/[name].js',
 
           // this is going to be add-on code, so it doesn't need the trappings of a full module (and in fact actively
           // shouldn't have them, lest they muck with the module to which we're adding it)
@@ -31,15 +31,15 @@ export default [
   ),
   ...makeNPMConfigVariants(
     makeBaseNPMConfig({
-      entrypoints: ['src/config/prefixLoader.ts'],
+      entrypoints: ['src/config/loaders/prefixLoader.ts'],
 
       packageSpecificConfig: {
         output: {
           // make it so Rollup calms down about the fact that we're doing `export { loader as default }`
           exports: 'default',
 
           // preserve the original file structure (i.e., so that everything is still relative to `src`)
-          entryFileNames: 'config/[name].js',
+          entryFileNames: 'config/loaders/[name].js',
         },
       },
     }),

packages/nextjs/scripts/buildRollup.ts

@@ -0,0 +1,24 @@
+import * as childProcess from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Run the given shell command, piping the shell process's `stdin`, `stdout`, and `stderr` to that of the current
+ * process. Returns contents of `stdout`.
+ */
+function run(cmd: string, options?: childProcess.ExecSyncOptions): string | Buffer {
+  return childProcess.execSync(cmd, { stdio: 'inherit', ...options });
+}
+
+run('yarn rollup -c rollup.npm.config.js');
+
+// Regardless of whether nextjs is using the CJS or ESM version of our SDK, we want the code from our templates to be in
+// ESM (since we'll be adding it onto page files which are themselves written in ESM), so copy the ESM versions of the
+// templates over into the CJS build directory. (Building only the ESM version and sticking it in both locations is
+// something which in theory Rollup could do, but it would mean refactoring our Rollup helper functions, which isn't
+// worth it just for this.)
+const cjsTemplateDir = 'build/cjs/config/templates/';
+const esmTemplateDir = 'build/esm/config/templates/';
+fs.readdirSync(esmTemplateDir).forEach(templateFile =>
+  fs.copyFileSync(path.join(esmTemplateDir, templateFile), path.join(cjsTemplateDir, templateFile)),
+);

packages/nextjs/src/config/prefixLoader.ts renamed to packages/nextjs/src/config/loaders/prefixLoader.ts

@@ -1,27 +1,22 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
+import { LoaderThis } from './types';
+
 type LoaderOptions = {
   distDir: string;
 };
-// TODO Use real webpack types
-type LoaderThis = {
-  // Webpack 4
-  query?: LoaderOptions;
-  // Webpack 5
-  getOptions?: () => LoaderOptions;
-  addDependency: (filepath: string) => void;
-};
 
 /**
  * Inject templated code into the beginning of a module.
  */
-function prefixLoader(this: LoaderThis, userCode: string): string {
+function prefixLoader(this: LoaderThis<LoaderOptions>, userCode: string): string {
   // We know one or the other will be defined, depending on the version of webpack being used
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const { distDir } = this.getOptions ? this.getOptions() : this.query!;
 
-  const templatePath = path.resolve(__dirname, 'prefixLoaderTemplate.js');
+  const templatePath = path.resolve(__dirname, '../templates/prefixLoaderTemplate.js');
+  // make sure the template is included when runing `webpack watch`
   this.addDependency(templatePath);
 
   // Fill in the placeholder

packages/nextjs/src/config/loaders/types.ts

@@ -0,0 +1,10 @@
+// TODO Use real webpack types
+export type LoaderThis<Options> = {
+  // Loader options in Webpack 4
+  query?: Options;
+  // Loader options in Webpack 5
+  getOptions?: () => Options;
+
+  // Function to add outside file used by loader to `watch` process
+  addDependency: (filepath: string) => void;
+};

packages/nextjs/src/config/prefixLoaderTemplate.ts renamed to packages/nextjs/src/config/templates/prefixLoaderTemplate.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
 (global as any).__rewriteFramesDistDir__ = '__DIST_DIR__';
 
-// We need this to make this file an ESM module, which TS requires when using `isolatedModules`.
+// We need this to make this file an ESM module, which TS requires when using `isolatedModules`, but it doesn't affect
+// the end result - Rollup recognizes that it's a no-op and doesn't include it when building our code.
 export {};

packages/nextjs/src/config/webpack.ts

@@ -65,7 +65,7 @@ export function constructWebpackConfigFunction(
                 // Support non-default output directories by making the output path (easy to get here at build-time)
                 // available to the server SDK's default `RewriteFrames` instance (which needs it at runtime), by
                 // injecting code to attach it to `global`.
-                loader: path.resolve(__dirname, 'prefixLoader.js'),
+                loader: path.resolve(__dirname, 'loaders/prefixLoader.js'),
                 options: {
                   distDir: userNextConfig.distDir || '.next',
                 },