assets + stylesheet assets

.changeset/pretty-candles-chew.md

@@ -0,0 +1,8 @@
+---
+"rrweb-snapshot": minor
+"rrweb": minor
+"rrdom": patch
+"@rrweb/types": patch
+---
+
+Added support for Asset Event and capturing many different types of assets (not just img#src)

.changeset/yellow-vans-protect.md

@@ -0,0 +1,8 @@
+---
+"rrweb-snapshot": major
+"@rrweb/types": patch
+---
+
+`NodeType` enum was moved from rrweb-snapshot to @rrweb/types
+The following types where moved from rrweb-snapshot to @rrweb/types: `documentNode`, `documentTypeNode`, `attributes`, `legacyAttributes`, `elementNode`, `textNode`, `cdataNode`, `commentNode`, `serializedNode`, `serializedNodeWithId` and `DataURLOptions`
+`inlineImage` config option is deprecated and in `rrweb` is an alias for `captureAssets` config option

.github/workflows/style-check.yml

@@ -75,12 +75,12 @@ jobs:
     runs-on: ubuntu-latest
     name: Format Code
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.head_ref }}
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
           cache: 'yarn'

docs/assets.md

@@ -0,0 +1,66 @@
+# Asset Capture Methods & Configuration in rrweb
+
+[rrweb](https://rrweb.io/) is a JavaScript library that allows you to record and replay user interactions on your website. It provides various configuration options for capturing assets (such as images) during the recording process. In this document, we will explore the different asset capture methods and their configuration options in rrweb.
+
+## Asset Events
+
+Assets are a new type of event that embody a serialized version of a http resource captured during snapshotting. Some examples are images, media files and stylesheets. Resources can be fetched externally (from cache) in the case of a href, or internally for blob: urls and same-origin stylesheets. Asset events are emitted subsequent to either a FullSnapshot or an IncrementalSnapshot (mutation), and although they may have a later timestamp, during replay they are rebuilt as part of the snapshot that they are associated with. In the case where e.g. a stylesheet is referenced at the time of a FullSnapshot, but hasn't been downloaded yet, there can be a subsequent mutation event with a later timestamp which, along with the asset event, can recreate the experience of a network-delayed load of the stylesheet.
+
+## Assets to mitigate stylesheet processing cost
+
+In the case of stylesheets, rrweb does some record-time processing in order to serialize the css rules which had a negative effect on the initial page loading times and how quickly the FullSnapshot was taken (see https://pagespeed.web.dev/). These are now taken out of the main thread and processed asynchronously to be emitted (up to `processStylesheetsWithin` ms) later. There is no corresponding delay on the replay side so long as the stylesheet has been successfully emitted.
+
+## Asset Capture Configuration
+
+The `captureAssets` configuration option allows you to customize the asset capture process. It is an object with the following properties:
+
+- `objectURLs` (default: `true`): This property specifies whether to capture same-origin `blob:` assets using object URLs. Object URLs are created using the `URL.createObjectURL()` method. Setting `objectURLs` to `true` enables the capture of object URLs.
+
+- `origins` (default: `false`): This property determines which origins to capture assets from. It can have the following values:
+
+  - `false` or `[]`: Disables capturing any assets apart from object URLs, stylesheets (unless set to false) and images (if that setting is turned on).
+  - `true`: Captures assets from all origins.
+  - `[origin1, origin2, ...]`: Captures assets only from the specified origins. For example, `origins: ['https://s3.example.com/']` captures all assets from the origin `https://s3.example.com/`.
+
+- `images` (default: `false` or `true` if `inlineImages` is true in rrweb.record config): When set, this option turns on asset capturing for all images irrespective of their origin. When this configuration option is false, images may still be captured if their src url matches the `origins` setting above.
+
+- `stylesheets` (default: `'without-fetch'`): When set to `true`, this turns on capturing of all stylesheets and style elements via the asset system irrespective of origin. The default of `'without-fetch'` is designed to match with the previous `inlineStylesheet` behaviour, whereas the `true` value allows capturing of stylesheets which are otherwise inaccessible due to CORS restrictions to be captured via a fetch call, which will normally use the browser cache. If a stylesheet matches via the `origins` config above, it will be captured irrespective of this config setting (either directly or via fetch).
+
+- `stylesheetsRuleThreshold` (default: `0`): only invoke the asset system for stylesheets with more than this number of rules. Defaults to zero (rather than say 100) as it only looks at the 'outer' rules (e.g. could have a single media rule which nests 1000s of sub rules). This default may be increased based on feedback.
+
+- `processStylesheetsWithin` (default: `2000`): This property defines the maximum time in milliseconds that the browser should delay before processing stylesheets. Inline `<style>` elements will be processed within half this value. Lower this value if you wish to improve the odds that short 'bounce' visits will emit the asset before visitor unloads page. Set to zero or a negative number to process stylesheets synchronously, which can cause poor scores on e.g. https://pagespeed.web.dev/ ("Third-party code blocked the main thread").
+
+## TypeScript Type Definition
+
+Here is the TypeScript type definition for the `recordOptions` object, which includes the asset capture configuration options:
+
+```typescript
+export type recordOptions<T> = {
+  // Other configuration options...
+  captureAssets?: {
+    objectURLs: boolean;
+    origins: string[] | true | false;
+    images: boolean;
+    stylesheets: boolean | 'without-fetch';
+    processStylesheetsWithin: number;
+    stylesheetsRuleThreshold: number;
+  };
+  inlineImages?: boolean;
+  inlineStylesheet?: boolean;
+  // Other configuration options...
+};
+```
+
+This type definition shows that `captureAssets` is an optional property of the `recordOptions` object. It contains the `objectURLs` and `origins` properties, which have the same meanings as described above.
+
+## Inline Images
+
+When set in rrweb.record, the previous `inlineImages` configuration option has been changed so that images are now captured using the asset system instead of being inlined into the snapshot. The previous implementation had a problem in that the snapshot was modified asynchronously after images were loaded/processed. hadn't loaded yet, and the snapshot may have already been emitted. When using rrwebSnapshot.snapshot directly, the previous inlining behaviour is still preserved.
+
+## Inline Stylesheets
+
+In rrweb.record the `inlineStylesheet` configuration option has been updated to use the asset system. When it is `true` (the default), stylesheets whose rules are accessible from a CORS point of view are captured as an asset instead of being inlined. There is also now an `inlineStylesheet: 'all'` option which is equivalent to `captureAssets.stylesheets: true`. When using rrwebSnapshot.snapshot directly, the previous inlining behaviour is still preserved.
+
+## Conclusion
+
+By configuring the `captureAssets` option in rrweb, you can control how assets like images are captured during the recording process. This allows you to customize which assets are included in the recorded interactions on your website.

docs/assets.zh_CN.md

@@ -0,0 +1,40 @@
+# rrweb 中的录制静态资源的方法和配置
+
+[rrweb](https://rrweb.io/) 是一个 JavaScript 库，允许您录制并回放您网页上的用户操作。它为录制静态资源（如图像）提供了各种配置选项。在本文档中，我们将探讨 rrweb 中不同的录制静态资源的方法及其配置选项。
+
+## 内联图像（已弃用）
+
+`inlineImages` 配置选项已被弃用，不应再使用。它存在一些问题，即重写已经发出的事件，这可能使您错过已发送到服务器的内联图像。相反，请使用 `captureAssets` 选项来配置静态资源录制。
+
+## 录制静态资源配置
+
+`captureAssets` 配置选项允许您自定义录制静态资源的过程。它是一个具有以下属性的对象：
+
+- `objectURLs`（默认值：`true`）：此属性指定是否使用 object URL 录制同源 `blob:` 资源。Object URL 是使用 `URL.createObjectURL()` 方法创建的。将 `objectURLs` 设置为 `true` 可以启用对象 URL 的录制。
+
+- `origins`（默认值：`false`）：此属性确定录制哪些域名的资源。它可以有以下值：
+  - `false` 或 `[]`：除了 Object URL 之外，不录制任何静态资源。
+  - `true`：从所有来源获取资源。
+  - `[origin1, origin2, ...]`：仅从指定的来源获取资源。例如，`origins: ['https://s3.example.com/']` 表示录制来自 `https://s3.example.com/` 的所有静态资源。
+
+## TypeScript 类型定义
+
+这是 `recordOptions` 对象的 TypeScript 类型定义，其中包括录制静态资源的配置选项：
+
+```typescript
+export type recordOptions<T> = {
+  // 其他配置选项...
+  captureAssets?: {
+    objectURLs: boolean;
+    origins: string[] | true | false;
+  };
+  inlineImages?: boolean; // 已弃用
+  // 其他配置选项...
+};
+```
+
+这种类型定义表明 captureAssets 是 recordOptions 对象的一个可选属性。它包含 objectURLs 和 origins 属性，其含义与上述相同。
+
+## 结论
+
+通过在 rrweb 中配置 captureAssets 选项，您可以控制在记录过程中如何录制比如图像这样的静态资源。这允许你自定义在网页上录制的交互中包含哪些静态资源。