xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bundle player as an component

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 6da7175741
commit 0e4f6649e4
5 changed files with 55 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.json
View File

@@ -1,13 +1,14 @@
{
"extends": "google",
"parserOptions": {
"ecmaVersion": 7,
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"require-jsdoc": "off",
"arrow-parens": "off",
"object-curly-spacing": "off"
"object-curly-spacing": "off",
"indent": "off"
},
"plugins": ["html"]
}

2
.gitignore vendored
View File

@@ -6,3 +6,5 @@ yarn.lock
.vscode
temp
dist

24
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "rrweb-player",
"version": "0.1.0",
"version": "0.2.0",
"devDependencies": {
"eslint": "^5.7.0",
"eslint-config-google": "^0.11.0",
@@ -19,9 +19,29 @@
},
"scripts": {
"build": "rollup -c",
"prepublishOnly": "npm run build",
"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",
"start": "sirv public",
"start:dev": "sirv public --dev"
}
},
"description": "rrweb's replayer UI",
"main": "dist/index.js",
"module": "dist/index.mjs",
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "git+https://github.com/rrweb-io/rrweb-player.git"
},
"keywords": [
"rrweb"
],
"author": "yanzhen@smartx.com",
"license": "MIT",
"bugs": {
"url": "https://github.com/rrweb-io/rrweb-player/issues"
},
"homepage": "https://github.com/rrweb-io/rrweb-player#readme"
}

23
public/index.html
View File

@@ -1,16 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>Svelte app</title>
<title>dev panel</title>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='bundle.css'>
<link rel='stylesheet' href='./global.css'>
<link rel="stylesheet" href="./bundle.css">
</head>
<body>
<script src='bundle.js'></script>
<script src="./bundle.js"></script>
<script src="./bundle.events.js"></script>
<script>
const player = new rrwebPlayer({
target: document.body,
data: {
events,
},
});
</script>
</body>
</html>

20
rollup.config.js
View File

@@ -2,19 +2,20 @@ import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js',
},
export default [
{ file: pkg.module, format: 'es' },
{ file: pkg.main, format: 'iife', name: 'rrwebPlayer' },
{ file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
].map(output => ({
input: 'src/Player.html',
output,
plugins: [
svelte({
cascade: false,
// opt in to v3 behaviour today
skipIntroByDefault: true,
nestedTransitions: true,
@@ -24,6 +25,7 @@ export default {
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('dist/style.css');
css.write('public/bundle.css');
},
}),
@@ -40,4 +42,4 @@ export default {
// instead of npm run dev), minify
production && terser(),
],
};
}));