Umd folder

.changeset/thirty-shirts-grow.md

@@ -0,0 +1,16 @@
+---
+"all": patch
+"packer": patch
+"plugins": patch
+"record": patch
+"replay": patch
+"rrdom": patch
+"rrdom-nodejs": patch
+"rrweb": patch
+"rrweb-player": patch
+"rrweb-snapshot": patch
+"types": patch
+"utils": patch
+---
+
+Provide a /umd/ output folder alongside the /dist/ one so that we can serve UMD (Universal Module Definition) files with a .js extension, without upsetting expectations set by package.json that all .js files in /dist/ are modules

guide.md

@@ -15,13 +15,13 @@ You are recommended to install rrweb via jsdelivr's CDN service:
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/umd/rrweb.min.js"></script>
 ```
 
 Also, you can link to a specific version number that you can update manually:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.14/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.19/umd/rrweb.min.js"></script>
 ```
 
 #### Only include the recorder code
@@ -30,7 +30,7 @@ rrweb's code includes both the record and the replay parts. Most of the time you
 This also can be done by using the `@rrweb/record` package and the CDN service:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js"></script>
 ```
 
 #### Other packages

guide.zh_CN.md

@@ -13,21 +13,21 @@
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/umd/rrweb.min.js"></script>
 ```
 
 也可以在 URL 中指定具体的版本号，例如：
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.14/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.19/umd/rrweb.min.js"></script>
 ```
 
 #### 仅引入录制部分
 
 rrweb 代码分为录制和回放两部分，大多数时候用户在被录制的应用中只需要引入录制部分代码。同样可以通过使用 @rrweb/record 包和 CDN 服务来实现：
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js"></script>
 ```
 
 #### 其他包

packages/rrweb-player/README.md

@@ -19,7 +19,7 @@ rrweb-player can also be included with `<script>`：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/index.js"></script>
 ```
 
 Or installed by using NPM：

packages/rrweb/src/record/index.ts

@@ -209,7 +209,16 @@
       e.type !== EventType.FullSnapshot &&
       !(
         e.type === EventType.IncrementalSnapshot &&
-        e.data.source === IncrementalSource.Mutation
+        [
+          IncrementalSource.Mutation,
+          IncrementalSource.MediaInteraction, // often automatic e.g. background video loop
+          IncrementalSource.StyleSheetRule,
+          IncrementalSource.CanvasMutation,
+          IncrementalSource.Font,
+          IncrementalSource.Log,
+          IncrementalSource.StyleDeclaration,
+          IncrementalSource.AdoptedStyleSheet,
+        ].includes(e.data.source)
       )
     ) {
       // we've got a user initiated event so first we need to apply
@@ -557,7 +566,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -575,7 +584,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);

vite.config.default.ts

@@ -1,9 +1,9 @@
 /// <reference types="vite/client" />
 import dts from 'vite-plugin-dts';
-import { copyFileSync } from 'node:fs';
+import { copyFileSync, mkdirSync, existsSync } from 'node:fs';
 import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
 import { build, Format } from 'esbuild';
-import { resolve } from 'path';
+import { resolve, dirname } from 'path';
 import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
 import * as fs from 'node:fs';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -51,22 +51,36 @@ function minifyAndUMDPlugin({
               outDir,
             });
           } else {
+            const umdDir = dirname(outputFilePath).replace('/dist', '/umd');
+            if (!existsSync(umdDir)) {
+              mkdirSync(umdDir);
+            }
+            const outUmd = `${outputFilePath}.umd.cjs`;
             await buildFile({
               name,
               input: inputFilePath,
-              output: `${outputFilePath}.umd.cjs`,
+              output: outUmd,
               minify: false,
               isCss: false,
               outDir,
             });
+            copyFileSync(
+              outUmd,
+              `${outputFilePath.replace('/dist/', '/umd/')}.js`,
+            );
+            const outUmdMin = `${outputFilePath}.umd.min.cjs`;
             await buildFile({
               name,
               input: inputFilePath,
-              output: `${outputFilePath}.umd.min.cjs`,
+              output: outUmdMin,
               minify: true,
               isCss: false,
               outDir,
             });
+            copyFileSync(
+              outUmdMin,
+              `${outputFilePath.replace('/dist/', '/umd/')}.min.js`,
+            );
           }
         }
       }