build: Add size limit action (#127)

Add action for size limit info, similar to the sentry-javascript repo.

This should make it much easier to check the impact of changes.

---------

Co-authored-by: mydea <mydea@users.noreply.github.com>

.github/workflows/size-check.yml

@@ -0,0 +1,38 @@
+name: Size Check
+
+on:
+  push:
+    branches:
+      - master
+      - release/**
+  pull_request:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  job_size_check:
+    name: Size Check
+    timeout-minutes: 15
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js lts/*
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: 'yarn'
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build Project
+        run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
+      - name: Check bundle sizes
+        uses: getsentry/size-limit-action@runForBranch
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          skip_step: build
+          main_branch: sentry-v2
+

.size-limit.js

@@ -0,0 +1,33 @@
+module.exports = [
+  // Main browser webpack builds
+  {
+    name: 'rrweb - record only (gzipped)',
+    path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
+    import: '{ record }',
+    gzip: true
+  },
+  {
+    name: 'rrweb - record only (min)',
+    path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
+    import: '{ record }',
+    gzip: false
+  },
+  {
+    name: 'rrweb - record with treeshaking flags (gzipped)',
+    path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
+    import: '{ record }',
+    gzip: true,
+    modifyWebpackConfig: function (config) {
+      const webpack = require('webpack');
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          __RRWEB_EXCLUDE_CANVAS__: true,
+          __RRWEB_EXCLUDE_SHADOW_DOM__: true,
+          __RRWEB_EXCLUDE_IFRAME__: true,
+        }),
+      );
+      return config;
+    },
+  },
+
+];

package.json

@@ -21,6 +21,8 @@
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.0",
     "@monorepo-utils/workspaces-to-typescript-project-references": "^2.10.2",
+    "@size-limit/preset-small-lib": "~8.2.6",
+    "@size-limit/webpack": "~8.2.6",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "browserslist": "^4.21.4",
@@ -33,6 +35,7 @@
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
+    "size-limit": "~8.2.6",
     "turbo": "^1.2.4",
     "typescript": "^4.9.5"
   },
@@ -52,7 +55,8 @@
   },
   "resolutions": {
     "**/jsdom/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-    "**/@types/dom-webcodecs": "0.1.5"
+    "**/@types/dom-webcodecs": "0.1.5",
+    "**/@types/estree": "^1.0.0"
   },
   "browserslist": [
     "defaults",

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -1,4 +1,3 @@
-import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,

packages/rrweb/src/types.ts

@@ -8,20 +8,11 @@ import type {
   MaskAttributeFn,
 } from '@sentry-internal/rrweb-snapshot';
 import type { PackFn, UnpackFn } from './packer/base';
-import type {
-  IframeManager,
-  IframeManagerInterface,
-} from './record/iframe-manager';
-import type {
-  ShadowDomManager,
-  ShadowDomManagerInterface,
-} from './record/shadow-dom-manager';
+import type { IframeManagerInterface } from './record/iframe-manager';
+import type { ShadowDomManagerInterface } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
 import type { RRNode } from '@sentry-internal/rrdom';
-import type {
-  CanvasManager,
-  CanvasManagerInterface,
-} from './record/observers/canvas/canvas-manager';
+import type { CanvasManagerInterface } from './record/observers/canvas/canvas-manager';
 import type { StylesheetManager } from './record/stylesheet-manager';
 import type {
   addedNodeMutation,

packages/web-extension/vite.config.ts

@@ -12,8 +12,12 @@ function useSpecialFormat(
   return {
     name: 'use-special-format',
     config(config) {
-      const shouldUse =
-        config.build?.lib && entriesToUse.includes(config.build.lib.entry);
+      const entryOrEntries = config.build?.lib
+        ? config.build.lib.entry
+        : undefined;
+      const entry =
+        typeof entryOrEntries === 'string' ? entryOrEntries : undefined;
+      const shouldUse = entry && entriesToUse.includes(entry);
       if (shouldUse) {
         config.build = config.build ?? {};
         // @ts-expect-error: lib needs to be an object, forcing it.