build(replay): Improve replay-worker build (#7173)

Author: mydea

packages/replay-worker/package.json

@@ -2,18 +2,20 @@
   "name": "@sentry-internal/replay-worker",
   "version": "7.37.2",
   "description": "Worker for @sentry/replay",
-  "main": "build/index.js",
-  "module": "build/index.js",
+  "main": "build/npm/esm/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
   "sideEffects": false,
   "private": true,
   "scripts": {
-    "build": "yarn build:transpile",
+    "build": "run-p build:transpile build:types",
     "build:transpile": "rollup -c rollup.worker.config.js",
-    "build:types": "yarn build:transpile",
+    "build:types": "tsc -p tsconfig.types.json",
     "build:dev": "yarn build",
-    "build:watch": "run-p build:transpile:watch",
+    "build:watch": "run-p build:transpile:watch build:types:watch",
     "build:dev:watch": "run-p build:watch",
     "build:transpile:watch": "yarn build:rollup --watch",
+    "build:types:watch": "yarn build:types --watch",
     "clean": "rimraf build",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
@@ -36,7 +38,6 @@
   "homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
   "devDependencies": {
     "@types/pako": "^2.0.0",
-    "rollup-plugin-copy": "~3.4.0",
     "tslib": "^1.9.3"
   },
   "dependencies": {

packages/replay-worker/rollup.worker.config.js

@@ -4,32 +4,46 @@ import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import { defineConfig } from 'rollup';
 import { terser } from 'rollup-plugin-terser';
-import copy from 'rollup-plugin-copy';
 
-const config = defineConfig({
-  input: ['./src/worker.ts'],
-  output: {
-    dir: './build/',
-    format: 'esm',
+const config = defineConfig([
+  {
+    input: ['./src/index.ts'],
+    output: {
+      dir: './build/npm/esm',
+      format: 'esm',
+    },
+    external: ['./worker'],
+    plugins: [
+      typescript({ tsconfig: './tsconfig.json', inlineSourceMap: false, sourceMap: false, inlineSources: false }),
+      terser({
+        mangle: {
+          module: true,
+        },
+      }),
+    ],
   },
-  plugins: [
-    typescript({ tsconfig: './tsconfig.json', inlineSourceMap: false, sourceMap: false, inlineSources: false }),
-    resolve(),
-    terser({
-      mangle: {
-        module: true,
-      },
-    }),
-    {
-      name: 'worker-to-string',
-      renderChunk(code) {
-        return `export default \`${code}\`;`;
-      },
+  {
+    input: ['./src/_worker.ts'],
+    output: {
+      file: './build/npm/esm/worker.ts',
+      format: 'esm',
     },
-    copy({
-      targets: [{ src: 'vendor/*', dest: 'build' }],
-    }),
-  ],
-});
+    plugins: [
+      typescript({ tsconfig: './tsconfig.json', inlineSourceMap: false, sourceMap: false, inlineSources: false }),
+      resolve(),
+      terser({
+        mangle: {
+          module: true,
+        },
+      }),
+      {
+        name: 'worker-to-string',
+        renderChunk(code) {
+          return `export default \`${code}\`;`;
+        },
+      },
+    ],
+  },
+]);
 
 export default config;

packages/replay-worker/src/_worker.ts

@@ -0,0 +1,12 @@
+import { handleMessage } from './handleMessage';
+
+addEventListener('message', handleMessage);
+
+// Immediately send a message when worker loads, so we know the worker is ready
+// @ts-ignore this syntax is actually fine
+postMessage({
+  id: undefined,
+  method: 'init',
+  success: true,
+  response: undefined,
+});

packages/replay-worker/vendor/index.js renamed to packages/replay-worker/src/index.ts

@@ -1,6 +1,9 @@
 import workerString from './worker';
 
-export function getWorkerURL() {
+/**
+ * Get the URL for a web worker.
+ */
+export function getWorkerURL(): string {
   const workerBlob = new Blob([workerString]);
   return URL.createObjectURL(workerBlob);
 }

packages/replay-worker/src/worker.ts

@@ -1,12 +1,3 @@
-import { handleMessage } from './handleMessage';
-
-addEventListener('message', handleMessage);
-
-// Immediately send a message when worker loads, so we know the worker is ready
-// @ts-ignore this syntax is actually fine
-postMessage({
-  id: undefined,
-  method: 'init',
-  success: true,
-  response: undefined,
-});
+// This is replaced at build-time with the content from _worker.ts, wrapped as a string.
+// This is just a placeholder so that types etc. are correct.
+export default '' as string;

packages/replay-worker/tsconfig.types.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/index.ts", "src/worker.ts"],
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/npm/types"
+  }
+}

packages/replay-worker/vendor/index.d.ts

@@ -3785,13 +3785,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/fs-extra@^8.0.1":
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.2.tgz#7125cc2e4bdd9bd2fc83005ffdb1d0ba00cca61f"
-  integrity sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/fs-extra@^8.1.0":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068"
@@ -8204,7 +8197,7 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
-colorette@^1.1.0, colorette@^1.2.1, colorette@^1.2.2:
+colorette@^1.2.1, colorette@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
@@ -12657,20 +12650,6 @@ [email protected]:
     merge2 "^1.2.3"
     slash "^3.0.0"
 
-[email protected]:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.1.tgz#4782c34cb75dd683351335c5829cc3420e606b22"
-  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
 [email protected], globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -14165,11 +14144,6 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-plain-object@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
-  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
-
 is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
@@ -21149,17 +21123,6 @@ [email protected]:
     js-cleanup "^1.2.0"
     rollup-pluginutils "^2.8.2"
 
-rollup-plugin-copy@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.4.0.tgz#f1228a3ffb66ffad8606e2f3fb7ff23141ed3286"
-  integrity sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ==
-  dependencies:
-    "@types/fs-extra" "^8.0.1"
-    colorette "^1.1.0"
-    fs-extra "^8.1.0"
-    globby "10.0.1"
-    is-plain-object "^3.0.0"
-
 rollup-plugin-license@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-license/-/rollup-plugin-license-2.6.1.tgz#20f15cc37950f362f8eefdc6e3a2e659d0cad9eb"