Fix local rrweb playback flow and add demo page

vite.config.default.ts

@@ -3,7 +3,7 @@ import dts from 'vite-plugin-dts';
 import { copyFileSync, mkdirSync, existsSync } from 'node:fs';
 import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
 import { build, Format } from 'esbuild';
-import { resolve, dirname } from 'path';
+import { resolve, dirname, relative, basename } from 'path';
 import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
 import * as fs from 'node:fs';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -51,9 +51,15 @@ function minifyAndUMDPlugin({
               outDir,
             });
           } else {
-            const umdDir = dirname(outputFilePath).replace('/dist', '/umd');
+            const relativeOutputPath = relative(outputOptions.dir!, outputFilePath);
+            const umdBasePath = resolve(
+              dirname(outputOptions.dir!),
+              'umd',
+              relativeOutputPath,
+            );
+            const umdDir = dirname(umdBasePath);
             if (!existsSync(umdDir)) {
-              mkdirSync(umdDir);
+              mkdirSync(umdDir, { recursive: true });
             }
             const outUmd = `${outputFilePath}.umd.cjs`;
             await buildFile({
@@ -66,10 +72,7 @@ function minifyAndUMDPlugin({
             });
             // 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`,
-            );
+            copyFileSync(outUmd, `${umdBasePath}.js`);
             const outUmdMin = `${outputFilePath}.umd.min.cjs`;
             await buildFile({
               name,
@@ -79,10 +82,7 @@ function minifyAndUMDPlugin({
               isCss: false,
               outDir,
             });
-            copyFileSync(
-              outUmdMin,
-              `${outputFilePath.replace('/dist/', '/umd/')}.min.js`,
-            );
+            copyFileSync(outUmdMin, `${umdBasePath}.min.js`);
           }
         }
       }
@@ -119,7 +119,7 @@ async function buildFile({
       }),
     ],
   });
-  const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), '$1');
+  const filename = relative(process.cwd(), output).split(/\\/g).join('/');
   console.log(filename);
   console.log(`${filename}.map`);
 }