Umd folder (#1704)
* Don't allow video autoplay to automatically unfreeze page. If it's a 'real' playback, there should be a mount or a keyboard event which will serve to unfreeze the page. Also add other non-user events to the list (we really should have an `isUserEvent` function) * Apply formatting changes * Create a new `umd` folder alongside `dist` for output of UMD files with a plain `.js` instead of `.cjs` extension, as the latter won't be served with the correct mime type by jsdelivr - #1687 (just rename `.cjs` to `.js`) was rejected due to the the 'dual package hazard' [1], and produces a warning when run through publint.dev (which was the original motivation for changing to \.cjs) - jsdelivr won't be serving `.cjs` with the correct mime type: https://github.com/jsdelivr/jsdelivr/issues/18584 [1] https://nodejs.org/en/learn/modules/publishing-a-package#the-dual-package-hazard * Update to point to alpha.19 as presumably that's when the umd folder will be available after the changes in this PR * Apply formatting changes * Don't try to create the same directory twice (was failing on packages/packer/umd) * Create thirty-shirts-grow.md * Revert something that shouldn't have gotten into the UMD branch folder * Apply formatting changes * Update vite.config.default.ts * Apply formatting changes * build: include umd builds in published packages Add umd directory to the files array in package.json for all packages to include UMD builds in npm publications. Also update .gitignore to exclude umd folders from version control. * Docs: point to correct file * Remove unused code * docs: update rrweb cdn urls to umd bundles Align README and guide examples with published UMD file locations for rrweb, @rrweb/record, and @rrweb/replay. Update versioned rrweb script examples from 2.0.0-alpha.19 to 2.0.0-alpha.21 in both English and Chinese guides. * build(all): include umd folder in package files --------- Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com> Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
This commit is contained in:
Eoghan Murray
@@ -44,6 +44,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"build",
|
||||
"dist",
|
||||
"package.json"
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -44,6 +44,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
"./dist/style.css": "./dist/style.css"
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -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/rrweb-player.umd.cjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/rrweb-player.js"></script>
|
||||
```
|
||||
|
||||
Or installed by using NPM：
|
||||
|
||||
@@ -51,6 +51,7 @@
|
||||
"./dist/style.css": "./dist/style.css"
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -44,6 +44,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -49,6 +49,7 @@
|
||||
"./dist/style.css": "./dist/style.css"
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -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;
|
||||
@@ -42,6 +42,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"umd",
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user