diff --git a/.changeset/thirty-shirts-grow.md b/.changeset/thirty-shirts-grow.md new file mode 100644 index 0000000000..9281088ee4 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore index 4266261313..f5fee78edc 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ temp # output of `yarn build` build dist +umd # turbo cache .turbo diff --git a/README.md b/README.md index e73c2a8768..04ee58e8ce 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg) [![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io) ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size) -![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size) +![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js?compression=gzip&label=recorder%20gzip%20size) [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb) [中文文档](./README.zh_CN.md) diff --git a/README.zh_CN.md b/README.zh_CN.md index 6e6c408aa7..39623b16f2 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -11,7 +11,7 @@ [![Join the chat at slack](https://img.shields.io/badge/slack-@rrweb-teal.svg?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg) ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size) -![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size) +![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js?compression=gzip&label=recorder%20gzip%20size) [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb) > 我已开通 Github Sponsor， 您可以通过赞助的形式帮助 rrweb 的开发。 diff --git a/guide.md b/guide.md index 764e359fb4..6bc95206d9 100644 --- a/guide.md +++ b/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" /> - + ``` Also, you can link to a specific version number that you can update manually: ```html - + ``` #### 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 - + ``` #### Other packages @@ -326,7 +326,7 @@ rrweb-player can also be included with ` + ``` Or installed by using NPM： diff --git a/guide.zh_CN.md b/guide.zh_CN.md index 4078cb2b6a..c60f18f50b 100644 --- a/guide.zh_CN.md +++ b/guide.zh_CN.md @@ -13,13 +13,13 @@ rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css" /> - + ``` 也可以在 URL 中指定具体的版本号，例如： ```html - + ``` #### 仅引入录制部分 @@ -27,7 +27,7 @@ rrweb 代码分为录制和回放两部分，大多数时候用户在被录制的应用中只需要引入录制部分代码。同样可以通过使用 @rrweb/record 包和 CDN 服务来实现： ```html - + ``` #### 其他包 @@ -320,7 +320,7 @@ rrweb-player 同样可以使用 CDN 方式安装： rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" /> - + ``` 或者通过 npm 安装： diff --git a/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json b/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json index c5c0c38e29..b369e58b5d 100644 --- a/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json +++ b/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json @@ -20,6 +20,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json b/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json index 901039cf78..b0fa9810ba 100644 --- a/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json +++ b/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json @@ -20,6 +20,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/plugins/rrweb-plugin-console-record/package.json b/packages/plugins/rrweb-plugin-console-record/package.json index 07897f39dd..db3b6013fa 100644 --- a/packages/plugins/rrweb-plugin-console-record/package.json +++ b/packages/plugins/rrweb-plugin-console-record/package.json @@ -20,6 +20,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/plugins/rrweb-plugin-console-replay/package.json b/packages/plugins/rrweb-plugin-console-replay/package.json index 2484fd7eb4..e9ef667087 100644 --- a/packages/plugins/rrweb-plugin-console-replay/package.json +++ b/packages/plugins/rrweb-plugin-console-replay/package.json @@ -20,6 +20,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/plugins/rrweb-plugin-sequential-id-record/package.json b/packages/plugins/rrweb-plugin-sequential-id-record/package.json index dc3fc37a15..c8e9ffae58 100644 --- a/packages/plugins/rrweb-plugin-sequential-id-record/package.json +++ b/packages/plugins/rrweb-plugin-sequential-id-record/package.json @@ -20,6 +20,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/plugins/rrweb-plugin-sequential-id-replay/package.json b/packages/plugins/rrweb-plugin-sequential-id-replay/package.json index 0538a6db52..4838040e83 100644 --- a/packages/plugins/rrweb-plugin-sequential-id-replay/package.json +++ b/packages/plugins/rrweb-plugin-sequential-id-replay/package.json @@ -20,6 +20,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/record/package.json b/packages/record/package.json index 6b1d244d6f..b7469bf8da 100644 --- a/packages/record/package.json +++ b/packages/record/package.json @@ -44,6 +44,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/replay/package.json b/packages/replay/package.json index 5c9d3f44e9..bdbb3786ce 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -45,6 +45,7 @@ "./dist/style.css": "./dist/style.css" }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json index 455c317a7c..0576b4da5a 100644 --- a/packages/rrdom-nodejs/package.json +++ b/packages/rrdom-nodejs/package.json @@ -33,6 +33,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json index 9657f17209..a26ebeae52 100644 --- a/packages/rrdom/package.json +++ b/packages/rrdom/package.json @@ -21,6 +21,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/rrweb-player/README.md b/packages/rrweb-player/README.md index 866adc7c67..15fcf4c88e 100644 --- a/packages/rrweb-player/README.md +++ b/packages/rrweb-player/README.md @@ -19,7 +19,7 @@ rrweb-player can also be included with ` + ``` Or installed by using NPM： diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json index e9e7614bea..3dc5353863 100644 --- a/packages/rrweb-player/package.json +++ b/packages/rrweb-player/package.json @@ -51,6 +51,7 @@ "./dist/style.css": "./dist/style.css" }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json index 299384b2de..cd8bc7512f 100644 --- a/packages/rrweb-snapshot/package.json +++ b/packages/rrweb-snapshot/package.json @@ -44,6 +44,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json index abb46b258e..e0ebe93f75 100644 --- a/packages/rrweb/package.json +++ b/packages/rrweb/package.json @@ -49,6 +49,7 @@ "./dist/style.css": "./dist/style.css" }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js deleted file mode 100644 index 998433bda9..0000000000 --- a/packages/rrweb/rollup.config.js +++ /dev/null @@ -1,261 +0,0 @@ -import typescript from 'rollup-plugin-typescript2'; -import esbuild from 'rollup-plugin-esbuild'; -import resolve from '@rollup/plugin-node-resolve'; -import postcss from 'rollup-plugin-postcss'; -import renameNodeModules from 'rollup-plugin-rename-node-modules'; -import webWorkerLoader from 'rollup-plugin-web-worker-loader'; -import pkg from './package.json'; - -function toRecordPath(path) { - return path - .replace(/^([\w]+)\//, '$1/record/') - .replace('rrweb', 'rrweb-record'); -} - -function toRecordPackPath(path) { - return path - .replace(/^([\w]+)\//, '$1/record/') - .replace('rrweb', 'rrweb-record-pack'); -} - -function toReplayPath(path) { - return path - .replace(/^([\w]+)\//, '$1/replay/') - .replace('rrweb', 'rrweb-replay'); -} - -function toReplayUnpackPath(path) { - return path - .replace(/^([\w]+)\//, '$1/replay/') - .replace('rrweb', 'rrweb-replay-unpack'); -} - -function toAllPath(path) { - return path.replace('rrweb', 'rrweb-all'); -} - -function toPluginPath(pluginName, stage) { - return (path) => - path - .replace(/^([\w]+)\//, '$1/plugins/') - .replace('rrweb', `${pluginName}-${stage}`); -} - -function toMinPath(path) { - return path.replace(/\.js$/, '.min.js'); -} - -const baseConfigs = [ - // all in one - { - input: './src/entries/all.ts', - name: 'rrweb', - pathFn: toAllPath, - esm: true, - }, - // record only - { - input: './src/record/index.ts', - name: 'rrwebRecord', - pathFn: toRecordPath, - }, - // record and pack - { - input: './src/entries/record-pack.ts', - name: 'rrwebRecord', - pathFn: toRecordPackPath, - }, - // replay only - { - input: './src/replay/index.ts', - name: 'rrwebReplay', - pathFn: toReplayPath, - }, - // replay and unpack - { - input: './src/entries/replay-unpack.ts', - name: 'rrwebReplay', - pathFn: toReplayUnpackPath, - }, - // record and replay - { - input: './src/index.ts', - name: 'rrweb', - pathFn: (p) => p, - }, - // plugins - { - input: './src/plugins/console/record/index.ts', - name: 'rrwebConsoleRecord', - pathFn: toPluginPath('console', 'record'), - }, - { - input: './src/plugins/canvas-webrtc/record/index.ts', - name: 'rrwebCanvasWebRTCRecord', - pathFn: toPluginPath('canvas-webrtc', 'record'), - }, - { - input: './src/plugins/canvas-webrtc/replay/index.ts', - name: 'rrwebCanvasWebRTCReplay', - pathFn: toPluginPath('canvas-webrtc', 'replay'), - }, - { - input: './src/plugins/console/replay/index.ts', - name: 'rrwebConsoleReplay', - pathFn: toPluginPath('console', 'replay'), - }, - { - input: './src/plugins/sequential-id/record/index.ts', - name: 'rrwebSequentialIdRecord', - pathFn: toPluginPath('sequential-id', 'record'), - }, - { - input: './src/plugins/sequential-id/replay/index.ts', - name: 'rrwebSequentialIdReplay', - pathFn: toPluginPath('sequential-id', 'replay'), - }, -]; - -let configs = []; - -function getPlugins(options = {}) { - const { minify = false, sourceMap = false } = options; - return [ - resolve({ browser: true }), - webWorkerLoader({ - targetPlatform: 'browser', - inline: true, - preserveSource: true, - sourceMap, - }), - esbuild({ - minify, - }), - postcss({ - extract: true, - inject: false, - minimize: minify, - sourceMap, - }), - ]; -} - -for (const c of baseConfigs) { - const basePlugins = [ - resolve({ browser: true }), - - // supports bundling `web-worker:..filename` - webWorkerLoader({ - targetPlatform: 'browser', - inline: true, - preserveSource: true, - }), - - typescript(), - ]; - const plugins = basePlugins.concat( - postcss({ - extract: false, - inject: false, - }), - ); - // browser - configs.push({ - input: c.input, - plugins: getPlugins(), - output: [ - { - name: c.name, - format: 'iife', - file: c.pathFn(pkg.unpkg), - }, - ], - }); - // browser + minify - configs.push({ - input: c.input, - plugins: getPlugins({ minify: true, sourceMap: true }), - output: [ - { - name: c.name, - format: 'iife', - file: toMinPath(c.pathFn(pkg.unpkg)), - sourcemap: true, - }, - ], - }); - // CommonJS - configs.push({ - input: c.input, - plugins, - output: [ - { - format: 'cjs', - file: c.pathFn('lib/rrweb.cjs'), - }, - ], - }); - if (c.esm) { - // ES module - configs.push({ - input: c.input, - plugins, - preserveModules: true, - output: [ - { - format: 'esm', - dir: 'es/rrweb', - plugins: [renameNodeModules('ext')], - }, - ], - }); - } -} - -if (process.env.BROWSER_ONLY) { - const browserOnlyBaseConfigs = [ - { - input: './src/index.ts', - name: 'rrweb', - pathFn: (p) => p, - }, - { - input: './src/entries/all.ts', - name: 'rrweb', - pathFn: toAllPath, - }, - { - input: './src/plugins/console/record/index.ts', - name: 'rrwebConsoleRecord', - pathFn: toPluginPath('console', 'record'), - }, - { - input: './src/plugins/canvas-webrtc/record/index.ts', - name: 'rrwebCanvasWebRTCRecord', - pathFn: toPluginPath('canvas-webrtc', 'record'), - }, - { - input: './src/plugins/canvas-webrtc/replay/index.ts', - name: 'rrwebCanvasWebRTCReplay', - pathFn: toPluginPath('canvas-webrtc', 'replay'), - }, - ]; - - configs = []; - - for (const c of browserOnlyBaseConfigs) { - configs.push({ - input: c.input, - plugins: getPlugins(), - output: [ - { - name: c.name, - format: 'iife', - file: c.pathFn(pkg.unpkg), - }, - ], - }); - } -} - -export default configs; diff --git a/packages/types/package.json b/packages/types/package.json index 8fce976d2e..c1c1676d85 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -42,6 +42,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/packages/utils/package.json b/packages/utils/package.json index 10f0141da1..70521d1797 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -42,6 +42,7 @@ } }, "files": [ + "umd", "dist", "package.json" ], diff --git a/vite.config.default.ts b/vite.config.default.ts index 46af9327a6..da4b1bb3b8 100644 --- a/vite.config.default.ts +++ b/vite.config.default.ts @@ -1,9 +1,9 @@ /// 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,38 @@ 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, }); + // Workaround because jsdelivr does use correct mime types for .umd.cjs + // More info: https://github.com/jsdelivr/jsdelivr/issues/18584 https://github.com/rrweb-io/rrweb/pull/1704 + 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`, + ); } } }