Asset event attrs in dom

.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/wise-pens-peel.md

@@ -0,0 +1,9 @@
+---
+'rrweb-snapshot': major
+'rrweb': major
+---
+
+`inlineImages` recording option has been deprecated and is now an alias for `captureAssets: { objectURLs: true, origins: true }`.
+Please see [asset recording documentation](/docs/recipes/assets.md) for more information.
+
+The reason we deprecated `inlineImages` is because it modified events after they where already emitted, which could lead to events being saved without the corresponding images. The new `captureAssets` option records assets as a separate event, ensuring that all assets are recorded and events are not modified after they are emitted.

.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

.vscode/rrweb-monorepo.code-workspace

@@ -36,6 +36,7 @@
       " rrweb monorepo",
       "rrweb-player (package)",
       "@rrweb/types"
-    ]
+    ],
+    "typescript.tsdk": " rrweb monorepo/node_modules/typescript/lib"
   }
 }

docs/recipes/assets.md

@@ -0,0 +1,40 @@
+# 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.
+
+## Inline Images (Deprecated)
+
+The `inlineImages` configuration option is deprecated and should not be used anymore. The previous implementation had some issues, namely rewriting events that are already emitted which might make you miss the inlined image if the event has already been sent to the server. Currently it just turns on `captureAssets`, so use please directly use the `captureAssets` option to configure asset capture.
+
+## 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.
+  - `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/`.
+
+## 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;
+  };
+  inlineImages?: boolean; // Deprecated, don't use it anymore
+  // 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.
+
+## 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/recipes/assets.zh_CN.md

@@ -0,0 +1,40 @@
+# rrweb 中的资源捕获方法和配置
+
+[rrweb](https://rrweb.io/) 是一个 JavaScript 库，允许您记录并重放您网站上的用户互动。它为捕获资产（如图像）提供了各种配置选项。在本文档中，我们将探讨 rrweb 中不同的资源捕获方法及其配置选项。
+
+## 内联图像（已弃用）
+
+`inlineImages` 配置选项已弃用，不应再使用。之前的实现存在一些问题，即重写已经发出的事件，这可能使您错过已经发送到服务器的内联图像。目前它只是开启了 `captureAssets`，所以请直接使用 `captureAssets` 选项来配置资源捕获。
+
+## 资源捕获配置
+
+`captureAssets` 配置选项允许您自定义资源捕获过程。它是一个具有以下属性的对象：
+
+- `objectURLs`（默认值：`true`）：此属性指定是否使用对象 URL 捕获同源 `blob:` 资源。对象 URL 是使用 `URL.createObjectURL()` 方法创建的。将 `objectURLs` 设置为 `true` 可以启用对象 URL 的捕获。
+
+- `origins`（默认值：`false`）：此属性确定从哪些来源捕获资源。它可以有以下值：
+  - `false` 或 `[]`：除了对象 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 选项，您可以控制在记录过程中如何捕获像图像这样的资源。这允许您