Add rrweb-worker package

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

@@ -20,7 +20,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

@@ -43,7 +43,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

@@ -27,7 +27,6 @@
   "exclude": ["test"],
   "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,26 +4,26 @@ 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';
 
 // eslint-disable-next-line no-undef
 const production = !process.env.ROLLUP_WATCH;
 
-const entries = (production
-  ? [
-      { file: pkg.module, format: 'es', css: false },
-      { file: pkg.main, format: 'cjs', css: false },
-      {
-        file: pkg.unpkg,
-        format: 'iife',
-        name: 'rrwebPlayer',
-        css: 'style.css',
-      },
-    ]
-  : []
+const entries = (
+  production
+    ? [
+        { file: pkg.module, format: 'es', css: false },
+        { file: pkg.main, format: 'cjs', css: false },
+        {
+          file: pkg.unpkg,
+          format: 'iife',
+          name: 'rrwebPlayer',
+          css: 'style.css',
+        },
+      ]
+    : []
 ).concat([
   {
     file: 'public/bundle.js',
@@ -66,14 +66,8 @@ export default entries.map((output) => ({
       dedupe: ['svelte'],
       extensions: ['.js', '.ts', '.svelte'],
     }),
-
     commonjs(),
-
-    // supports bundling `web-worker:..filename` from rrweb
-    webWorkerLoader(),
-
     typescript(),
-
     css({
       // we'll extract any component CSS out into
       // a separate file — better for performance

packages/rrweb-player/tsconfig.json

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

packages/rrweb-worker/.eslintrc.json

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

packages/rrweb-worker/.gitignore

@@ -0,0 +1,11 @@
+.vscode
+.idea
+node_modules
+package-lock.json
+*.tsbuildinfo
+build
+dist
+es
+lib
+typings
+temp

packages/rrweb-worker/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "rrweb-worker",
+    "version": "2.0.0-alpha.12",
+    "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/rrweb-io/rrweb.git"
+    },
+    "author": "Sentry",
+    "license": "MIT",
+    "bugs": {
+      "url": "https://github.com/rrweb-io/rrweb/issues"
+    },
+    "dependencies": {
+      "rrweb-snapshot": "2.0.0-alpha.12"
+    },
+    "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

@@ -75,7 +75,6 @@
     "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",
@@ -89,6 +88,7 @@
     "fflate": "^0.4.4",
     "mitt": "^3.0.0",
     "rrdom": "^2.0.0-alpha.12",
-    "rrweb-snapshot": "^2.0.0-alpha.12"
+    "rrweb-snapshot": "^2.0.0-alpha.12",
+    "rrweb-worker": "^2.0.0-alpha.12"
   }
 }