feat: Bundle canvas worker manually

packages/rrdom-nodejs/package.json

@@ -41,7 +41,6 @@
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
     "ts-jest": "^27.1.3"
   },
   "dependencies": {

packages/rrdom-nodejs/rollup.config.js

@@ -2,7 +2,6 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript2';
-import webWorkerLoader from 'rollup-plugin-web-worker-loader';
 import pkg from './package.json';
 
 function toMinPath(path) {
@@ -12,10 +11,6 @@ function toMinPath(path) {
 const basePlugins = [
   resolve({ browser: true }),
   commonjs(),
-
-  // supports bundling `web-worker:..filename` from rrweb
-  webWorkerLoader(),
-
   typescript({
     tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
   }),

packages/rrdom-nodejs/tsconfig.json

@@ -25,7 +25,6 @@
   "include": [
     "src",
     "test.d.ts",
-    "../rrweb/src/record/workers/workers.d.ts",
     "../rrweb/src/record/constructable-stylesheets.d.ts"
   ],
   "references": [

packages/rrdom/package.json

@@ -45,7 +45,6 @@
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
     "ts-jest": "^27.1.3"
   },
   "dependencies": {

packages/rrdom/rollup.config.js

@@ -2,7 +2,6 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import typescript from 'rollup-plugin-typescript2';
-import webWorkerLoader from 'rollup-plugin-web-worker-loader';
 import pkg from './package.json';
 
 function toMinPath(path) {
@@ -12,10 +11,6 @@ function toMinPath(path) {
 const basePlugins = [
   resolve({ browser: true }),
   commonjs(),
-
-  // supports bundling `web-worker:..filename` from rrweb
-  webWorkerLoader(),
-
   typescript({
     tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
   }),

packages/rrdom/tsconfig.json

@@ -32,7 +32,6 @@
   ],
   "include": [
     "src",
-    "../rrweb/src/record/workers/workers.d.ts",
     "../rrweb/src/record/constructable-stylesheets.d.ts"
   ]
 }

packages/rrweb-player/package.json

@@ -15,7 +15,6 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
     "sirv-cli": "^0.4.4",
     "svelte": "^3.59.2",
     "svelte-check": "^3.0.1",

packages/rrweb-player/rollup.config.js

@@ -4,7 +4,6 @@ import commonjs from '@rollup/plugin-commonjs';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
-import webWorkerLoader from 'rollup-plugin-web-worker-loader';
 import typescript from 'rollup-plugin-typescript2';
 import pkg from './package.json';
 import css from 'rollup-plugin-css-only';
@@ -69,9 +68,6 @@ export default entries.map((output) => ({
 
     commonjs(),
 
-    // supports bundling `web-worker:..filename` from rrweb
-    webWorkerLoader(),
-
     typescript(),
 
     css({

packages/rrweb-player/tsconfig.json

@@ -7,7 +7,6 @@
     "node_modules/*",
     "__sapper__/*",
     "public/*",
-    "../rrweb/src/record/workers/workers.d.ts"
   ],
   "compilerOptions": {
     "composite": true

packages/rrweb-worker/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "rules": {
+    "prefer-template": "off",
+    "@typescript-eslint/restrict-plus-operands": "off"
+  }
+}

packages/rrweb-worker/.gitignore

@@ -0,0 +1,18 @@
+.vscode
+.idea
+node_modules
+package-lock.json
+# yarn.lock
+*.tsbuildinfo
+build
+dist
+es
+lib
+typings
+
+temp
+
+*.log
+
+.env
+__diff_output__

packages/rrweb-worker/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sentry-internal/rrweb-worker",
+  "version": "2.6.0",
+  "description": "Worker for rrweb",
+  "main": "lib/rrweb-worker/index.cjs",
+  "module": "es/rrweb-worker/index.js",
+  "types": "typings/index.d.ts",
+  "sideEffects": false,
+  "private": true,
+  "scripts": {
+    "dev": "yarn bundle --watch",
+    "build:tarball": "npm pack",
+    "bundle": "rollup --config",
+    "typings": "tsc -p tsconfig.types.json",
+    "prepare": "npm run typings && npm run bundle",
+    "check-types": "tsc -noEmit",
+    "lint": "yarn eslint src"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getsentry/rrweb.git"
+  },
+  "author": "Sentry",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/getsentry/rrweb/issues"
+  },
+  "dependencies": {
+    "@sentry-internal/rrweb-snapshot": "2.6.0",
+    "@sentry-internal/rrweb-types": "2.6.0"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

packages/rrweb-worker/rollup.config.js

@@ -0,0 +1,83 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import { defineConfig } from 'rollup';
+import { terser } from 'rollup-plugin-terser';
+
+const workerStrBaseConfig = {
+  input: ['./src/_image-bitmap-data-url-worker.ts'],
+  treeshake: 'smallest',
+  plugins: [
+    commonjs(),
+    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}\`;`;
+      },
+    },
+  ],
+};
+
+const indexBaseConfig = {
+  input: ['./src/index.ts'],
+  treeshake: 'smallest',
+  external: ['./image-bitmap-data-url-worker'],
+  plugins: [
+    typescript({
+      tsconfig: './tsconfig.json',
+      inlineSourceMap: false,
+      sourceMap: false,
+      inlineSources: false,
+    }),
+    terser({
+      mangle: {
+        module: true,
+      },
+    }),
+  ],
+};
+
+const config = defineConfig([
+  {
+    ...workerStrBaseConfig,
+    output: {
+      file: './es/rrweb-worker/image-bitmap-data-url-worker.js',
+      format: 'esm',
+    },
+  },
+  {
+    ...workerStrBaseConfig,
+    output: {
+      file: './lib/rrweb-worker/image-bitmap-data-url-worker.cjs',
+      format: 'cjs',
+    },
+  },
+  {
+    ...indexBaseConfig,
+    output: {
+      file: './es/rrweb-worker/index.js',
+      format: 'esm',
+    },
+  },
+  {
+    ...indexBaseConfig,
+    output: {
+      file: './lib/rrweb-worker/index.cjs',
+      format: 'cjs',
+    },
+  },
+]);
+
+export default config;

packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts → packages/rrweb-worker/src/_image-bitmap-data-url-worker.ts

@@ -28,7 +28,7 @@ async function getTransparentBlobFor(
   height: number,
   dataURLOptions: DataURLOptions,
 ): Promise<string> {
-  const id = `${width}-${height}`;
+  const id = width + '-' + height;
   if ('OffscreenCanvas' in globalThis) {
     if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;
     const offscreen = new OffscreenCanvas(width, height);

packages/rrweb-worker/src/image-bitmap-data-url-worker.ts

@@ -0,0 +1,3 @@
+// This is replaced at build-time with the content from _image-bitmap-data-url-worker.ts, wrapped as a string.
+// This is just a placeholder so that types etc. are correct.
+export default '' as string;

packages/rrweb-worker/src/index.ts

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

packages/rrweb-worker/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "rootDir": "src",
+    "outDir": "build",
+    "lib": [
+      "webworker",
+      "scripthost"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "declarationMap": false,
+    "skipLibCheck": true,
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../rrweb-snapshot"
+    }
+  ],
+  "exclude": [
+    "test",
+    "scripts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+}

packages/rrweb-worker/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/*.ts"],
+  "compilerOptions": {
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "typings"
+  }
+}

packages/rrweb/package.json

@@ -73,13 +73,13 @@
     "rollup-plugin-postcss": "^3.1.1",
     "rollup-plugin-rename-node-modules": "^1.3.1",
     "rollup-plugin-typescript2": "^0.31.2",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
     "simple-peer-light": "^9.10.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.3.1"
   },
   "dependencies": {
+    "@sentry-internal/rrweb-worker": "2.6.0",
     "@sentry-internal/rrdom": "2.6.0",
     "@sentry-internal/rrweb-snapshot": "2.6.0",
     "@sentry-internal/rrweb-types": "2.6.0",

packages/rrweb/rollup.config.js

@@ -3,7 +3,6 @@ import esbuild from 'rollup-plugin-esbuild';
 import resolve from '@rollup/plugin-node-resolve';
 import postcss from 'rollup-plugin-postcss';
 import renameNodeModules from 'rollup-plugin-rename-node-modules';
-import webWorkerLoader from 'rollup-plugin-web-worker-loader';
 import pkg from './package.json';
 
 function toRecordPath(path) {
@@ -122,11 +121,6 @@ function getPlugins(options = {}) {
   const { minify = false, sourceMap = false } = options;
   return [
     resolve({ browser: true }),
-    webWorkerLoader({
-      targetPlatform: 'browser',
-      inline: true,
-      sourceMap,
-    }),
     esbuild({
       minify,
     }),
@@ -143,9 +137,6 @@ for (const c of baseConfigs) {
   const basePlugins = [
     resolve({ browser: true }),
 
-    // supports bundling `web-worker:..filename`
-    webWorkerLoader({ targetPlatform: 'browser' }),
-
     typescript(),
   ];
   const plugins = basePlugins.concat(