Bundles

[Yuyz0112]

With some further discussions in #151, now I plan to provide the following bundle outputs.

const baseConfigs = [
  // record only
  {
    input: './src/record/index.ts',
    name: 'rrwebRecord',
    pathFn: toRecordPath,
  },
  // pack only
  {
    input: './src/packer/pack.ts',
    name: 'rrwebPack',
    pathFn: toPackPath,
  },
  // packer only
  {
    input: './src/packer/index.ts',
    name: 'rrwebPacker',
    pathFn: toPackerPath,
  },
  // record and replay
  {
    input: './src/index.ts',
    name: 'rrweb',
    pathFn: (p) => p,
  },
  // all in one
  {
    input: './src/boost.ts',
    name: 'rrwebBoost',
    pathFn: toBoostPath,
  },
];

Under this config, the dist directory (iife output) looks like this:

dist
├── [996K]  packer
│   ├── [258K]  rrweb-packer.js
│   ├── [ 50K]  rrweb-packer.min.js
│   ├── [332K]  rrweb-packer.min.js.map
│   ├── [140K]  rrweb-pack.js
│   ├── [ 28K]  rrweb-pack.min.js
│   └── [185K]  rrweb-pack.min.js.map
├── [176K]  record
│   ├── [ 51K]  rrweb-record.js
│   ├── [ 19K]  rrweb-record.min.js
│   └── [103K]  rrweb-record.min.js.map
├── [381K]  rrweb-boost.js
├── [ 94K]  rrweb-boost.min.js
├── [512K]  rrweb-boost.min.js.map
├── [124K]  rrweb.js
├── [1.3K]  rrweb.min.css
├── [2.1K]  rrweb.min.css.map
├── [ 46K]  rrweb.min.js
└── [186K]  rrweb.min.js.map

And I change the CommonJS and es module entry point to the all in one file: boost.ts. So module users can still import from a single line:

import { record, pack } from 'rrweb'

[Yuyz0112]

A 'pure replayer' bundle seems moving to the side of explosive combinations. If we adopt that, we also need 'pure unpack' bundle and 'pure unpack + replayer' bundle:)

Let bundlers do that stuff seems a better choice:)

[eoghanmurray]

a 'pure unpack' bundle

I assume the use case for that would be to run it on the server in order to decompress prior to storage? If that's the case then I don't see why it should be generated in the /dist/ output folder, which I'm assuming is intended for direct <script> inclusion?

[eoghanmurray]

Note on naming:

• I don't understand the difference between 'pack' and 'packer'? Is one for record only? If so that one could be moved under the record/ folder..
• I don't think 'boost' is a good name for 'all'

From my understanding, here's another possibilitiy (have omitted minified and .map and css for simplicity):

dist
├── [176K]  record-only
│   ├── [140K]  rrweb-record-pack.js  (currently packer/rrweb-pack.js I think?)
│   └── [ 51K]  rrweb-record.js
├── [xxxK]  replay-only
│   ├── [ xxK]  rrweb-replay-unpack.js  (like rrweb-replay, but with unpacking)
│   └── [ xxK]  rrweb-replay.js  (based on current dist/rrweb.js, but without record features)
├── [xxxK]  rrweb-no-packing.js  (all in one without packing capabilities)
└── [381K]  rrweb.js  (all in one; can handle anything)

[MaheshCasiraghi]

@eoghanmurray I very much love your naming/logic proposal. @Yuyz0112 is there any chance you guys can adopt the bundle logic that @eoghanmurray is proposing here above?

[Yuyz0112]

Hi @MaheshCasiraghi @eoghanmurray, I'm trying to make the bundle files look like @eoghanmurray 's suggestion.

And the new minor version(0.8.0) will be released after this.

[Yuyz0112]

Now it looks like this:

dist
├── [577K]  record
│   ├── [ 52K]  rrweb-record.js
│   ├── [ 19K]  rrweb-record.min.js
│   ├── [105K]  rrweb-record.min.js.map
│   ├── [143K]  rrweb-record-pack.js
│   ├── [ 29K]  rrweb-record-pack.min.js
│   └── [224K]  rrweb-record-pack.min.js.map
├── [821K]  replay
│   ├── [ 85K]  rrweb-replay.js
│   ├── [1.2K]  rrweb-replay.min.css
│   ├── [2.0K]  rrweb-replay.min.css.map
│   ├── [ 32K]  rrweb-replay.min.js
│   ├── [144K]  rrweb-replay.min.js.map
│   ├── [203K]  rrweb-replay-unpack.js
│   ├── [1.2K]  rrweb-replay-unpack.min.css
│   ├── [2.0K]  rrweb-replay-unpack.min.css.map
│   ├── [ 54K]  rrweb-replay-unpack.min.js
│   └── [293K]  rrweb-replay-unpack.min.js.map
├── [387K]  rrweb-all.js
├── [1.2K]  rrweb-all.min.css
├── [2.0K]  rrweb-all.min.css.map
├── [ 98K]  rrweb-all.min.js
├── [520K]  rrweb-all.min.js.map
├── [131K]  rrweb.js
├── [1.2K]  rrweb.min.css
├── [2.0K]  rrweb.min.css.map
├── [ 49K]  rrweb.min.js
└── [194K]  rrweb.min.js.map