Chore: Migrate build to vite (#1033)

* Chore: Add move most types from rrweb to @rrweb/types package * Split off type imports * Split off type import to its own line * Get vite to generate type definitions * Apply formatting changes * noEmit not allowed in tsconfig, moved it to build step * Migrate rrdom-nodejs build to vite * Apply formatting changes * Migrate rrweb-snapshot to vite * Unify configs * Chore: Migrate rrdom to vite Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined. To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not. * Chore: Migrate rrweb to vite WIP * build:browser was removed (for now) * BREAKING: moved rrweb-plugin-console to its own npm module This removes console from rrweb-all.js * Support cjs files in startServer * Move canvas-webrtc plugin to its own package * Chore: move sequential-id plugin to its own package * Chore: Configure rrweb's vite bundling * `Id` had lowercase `d` before, making it lowercase again * Test: Move console tests to their own package * remove unused utils from rrdom * pull in latest version of master something when wrong earlier when resolving merge conflicts, this should be correct * Fix type casting issue in diff.ts * Fix typo * Fix duplicate entries in package.json and tsconfig.json * Apply formatting changes * Update dependencies in package.json files * Update dependencies to use Vite 5.2.8 in package.json files * Get tests passing for rrdom `apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies * Fix image loading issue in integration tests * Move pack/unpack to its own @rrweb/packer module * Get tests to work in rrdom-nodejs * Port tests in rrweb-snapshot to vitest and fix them * Fix tests for rrweb-plugin-console-record * Add @rrweb/all package * Fix publint and attw errors for rrdom and @rrweb/types * Use shared vitest.config.ts in rrweb-snapshot package * Fix publint and attw issues for rrweb-snapshot * Export `ReplayPlugin` type directly from rrweb * Fix publint and attw issues for packages * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * move some rrdom tests that require rrweb to rrweb package * Use pre-jest 29 syntax for snapshotting * get rrweb passing publint and attw * const enum does not work with isolated modules flag * Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts * Fix paths * Move tests for console record plugin and fix bundle path * Fix tests for rrweb * pack integration tests were moved to @rrweb/all * Update rrweb bundle path in test files * Fix flaky scroll emit from test * Migrate rrweb's tests over to vitest and make them pass * Make sure benchmarks & updating tests work * Remove jest from rrweb * Fix paths * always use rrweb's own cssom * Update tsconfig.json for rrweb-plugin-sequential-id-record Fixes this error: Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb' * Add tsbuildinfo config to extended tsconfig files * Move rrdom over to vitest * Apply formatting changes * Update rrweb imports to use the new package structure * extend rrweb-snapshot's tsconfig from monorepo base config * extend @rrweb/types's tsconfig from monorepo base config * extend rrdom's tsconfig from monorepo base config * extend rrdom-nodejs's tsconfig from monorepo base config * extend web-extension's tsconfig from monorepo base config * unify tsconfigs * Continue when tests fail * Add stricter type checking * Add check-types global command * remove jest * Remove unused code * Add check-types command to build script * Fix linting issues * Add setup Chrome action for CI/CD workflow * Update puppeteer version in package.json for rrweb * Update Chrome setup in CI/CD workflow * Update Chrome setup in CI/CD workflow * Add Chrome setup and test cache location * Update CI/CD workflow to test chrome cache location * Add chrome installation step to CI/CD workflow * Update Puppeteer configuration for headless testing * Update dependencies and workflow configuration * Use same version of chrome on CI as is run locally * Use version of chrome that seems to work with rrdom tests * Try using puppeteerrc to define chrome version * Add .cache directory to .gitignore * Move global flag to vitest config * Update puppeteer version to 20.9.0 * Update console log messages in rrweb-plugin-console-record for new puppeteer version * Remove redundant Chrome setup from CI/CD workflow * Add minification and umd for all built files * Update import paths for rrweb dist files * Add @rrweb/replay and @rrweb/record * Add script to lint packages * Apply formatting changes * exclude styles export from typescript package type checking * WIP Move rrweb-player over to vite * Apply formatting changes * chore: Update rrweb plugin import paths * Remove rollup from rrweb-player * Fix typing issues * Fix typing issues * chore: Update rrweb-player to use vite for build process * Apply formatting changes * chore: Export Player class in rrweb-player/src/main.ts Makes attw happy * Apply formatting changes * Gets wiped by yarn workspaces-to-typescript-project-references * Add .eslintignore and .eslintrc.cjs files for rrweb-player package * Apply formatting changes * Update dependencies in rrweb-player/package.json * Apply formatting changes * chore: Update eslint configuration for rrweb-player package * Apply formatting changes * chore: Remove unused files from rrweb-player package * Apply formatting changes * chore: Update rrweb-player import path to use rrweb-player.cjs * chore: Update addEventListener signature in rrweb-player * Apply formatting changes * Add .eslintignore and update .gitignore files for to root * Apply formatting changes * Update documentation * Update @rrweb/types package description * Apply formatting changes * Update build and run commands in CONTRIBUTING.md * Apply formatting changes * Update package versions to 2.0.0-alpha.13 * Apply formatting changes * Apply formatting changes * Fix import statement in media/index.ts * Apply formatting changes * chore: Update .gitignore to exclude build and dist directories * Apply formatting changes * Apply formatting changes * Migrate setTimeout to vitest * Apply formatting changes * Apply formatting changes * Fix isNativeShadowDom function signature in utils.ts * try out jsr * Apply formatting changes * Update package versions to 2.0.0-alpha.14 * Apply formatting changes * Fix name of rrwebSnapshot object * Apply formatting changes * Remove unused lock files * Apply formatting changes * Update rrweb bundle path to use umd.cjs format * Apply formatting changes * Trigger tests to run again * Rename snapshots for vitest * Apply formatting changes * Ping CI * Apply formatting changes * Ping CI * Apply formatting changes * Ignore files generated by svelte-kit for prettier * Correct Player object
2024-06-07 11:07:36 +02:00
parent 609b7fac79
commit 7261c43f60
266 changed files with 11616 additions and 9614 deletions
--- a/packages/rrweb-player/.eslintignore
+++ b/packages/rrweb-player/.eslintignore
@@ -0,0 +1,7 @@
+dist
+types
+vite.config.ts
+vite-env.d.ts
+svelte.config.js
+public/events.js
+src/**/*.d.ts
--- a/packages/rrweb-player/.eslintrc.cjs
+++ b/packages/rrweb-player/.eslintrc.cjs
@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    '../../.eslintrc.js',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte'],
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+};
--- a/packages/rrweb-player/.eslintrc.json
+++ b/packages/rrweb-player/.eslintrc.json
@@ -1,22 +0,0 @@
-{
-  "extends": ["../../.eslintrc.js"],
-  "rules": {
-    "require-jsdoc": "off",
-    "arrow-parens": "off",
-    "object-curly-spacing": "off",
-    "indent": "off"
-  },
-  "parserOptions": {
-    "extraFileExtensions": [".svelte"]
-  },
-  "plugins": ["svelte3"],
-  "overrides": [
-    {
-      "files": ["*.svelte"],
-      "processor": "svelte3/svelte3"
-    }
-  ],
-  "settings": {
-    "svelte3/typescript": true
-  }
-}
--- a/packages/rrweb-player/.gitignore
+++ b/packages/rrweb-player/.gitignore
@@ -1,7 +1,5 @@
 .DS_Store
 node_modules
-public/bundle.*
-public/build
 package-lock.json
 yarn.lock

@@ -9,6 +7,9 @@ yarn.lock
 temp

 dist
-lib

-*.log
+*.log
+
+# Svelte definitions are generated by vite
+src/**/*.svelte.d.ts
+types
--- a/packages/rrweb-player/.prettierignore
+++ b/packages/rrweb-player/.prettierignore
@@ -0,0 +1,4 @@
+# files generated by svelte-kit
+.svelte-kit/generated/*
+.svelte-kit/ambient.d.ts
+.svelte-kit/non-ambient.d.ts
--- a/packages/rrweb-player/.svelte-kit/ambient.d.ts
+++ b/packages/rrweb-player/.svelte-kit/ambient.d.ts
@@ -0,0 +1,503 @@
+// this file is generated — do not edit it
+
+/// <reference types="@sveltejs/kit" />
+
+/**
+ * Environment variables [loaded by Vite](https://vitejs.dev/guide/env-and-mode.html#env-files) from `.env` files and `process.env`. Like [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), this module cannot be imported into client-side code. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://kit.svelte.dev/docs/configuration#env) (if configured).
+ *
+ * _Unlike_ [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.
+ *
+ * ```ts
+ * import { API_KEY } from '$env/static/private';
+ * ```
+ *
+ * Note that all environment variables referenced in your code should be declared (for example in an `.env` file), even if they don't have a value until the app is deployed:
+ *
+ * ```
+ * MY_FEATURE_FLAG=""
+ * ```
+ *
+ * You can override `.env` values from the command line like so:
+ *
+ * ```bash
+ * MY_FEATURE_FLAG="enabled" npm run dev
+ * ```
+ */
+declare module '$env/static/private' {
+  export const GITHUB_STATE: string;
+  export const GIT_CLONE_PROTECTION_ACTIVE: string;
+  export const npm_package_scripts_test_cross_platform_build: string;
+  export const npm_package_devDependencies_rollup: string;
+  export const npm_package_devDependencies__types_node: string;
+  export const STATS_TRP: string;
+  export const DEPLOYMENT_BASEPATH: string;
+  export const DOTNET_NOLOGO: string;
+  export const npm_package_devDependencies_vitest: string;
+  export const USER: string;
+  export const npm_package_bin_svelte_kit: string;
+  export const npm_package_dependencies_sirv: string;
+  export const npm_package_dependencies_sade: string;
+  export const npm_package_dependencies_mrmime: string;
+  export const npm_package_dependencies_magic_string: string;
+  export const npm_config_version_commit_hooks: string;
+  export const npm_config_user_agent: string;
+  export const CI: string;
+  export const npm_package_scripts_generate_version: string;
+  export const npm_package_dependencies__types_cookie: string;
+  export const npm_config_bin_links: string;
+  export const RUNNER_ENVIRONMENT: string;
+  export const GITHUB_ENV: string;
+  export const PIPX_HOME: string;
+  export const npm_node_execpath: string;
+  export const npm_package_devDependencies_vite: string;
+  export const npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
+  export const npm_config_init_version: string;
+  export const JAVA_HOME_8_X64: string;
+  export const SHLVL: string;
+  export const npm_package_exports___node_types: string;
+  export const npm_package_files_0: string;
+  export const HOME: string;
+  export const npm_package_files_1: string;
+  export const npm_package_repository_directory: string;
+  export const RUNNER_TEMP: string;
+  export const GITHUB_EVENT_PATH: string;
+  export const npm_package_files_2: string;
+  export const JAVA_HOME_11_X64: string;
+  export const PIPX_BIN_DIR: string;
+  export const GITHUB_REPOSITORY_OWNER: string;
+  export const npm_package_engines_node: string;
+  export const npm_package_exports___vite_import: string;
+  export const npm_package_files_3: string;
+  export const npm_package_devDependencies_svelte_preprocess: string;
+  export const npm_config_init_license: string;
+  export const GRADLE_HOME: string;
+  export const ANDROID_NDK_LATEST_HOME: string;
+  export const JAVA_HOME_21_X64: string;
+  export const STATS_RDCL: string;
+  export const GITHUB_RETENTION_DAYS: string;
+  export const npm_package_files_4: string;
+  export const npm_config_version_tag_prefix: string;
+  export const GITHUB_REPOSITORY_OWNER_ID: string;
+  export const POWERSHELL_DISTRIBUTION_CHANNEL: string;
+  export const AZURE_EXTENSION_DIR: string;
+  export const GITHUB_HEAD_REF: string;
+  export const npm_package_scripts_check: string;
+  export const npm_package_files_5: string;
+  export const npm_package_dependencies_tiny_glob: string;
+  export const SYSTEMD_EXEC_PID: string;
+  export const npm_package_scripts_postinstall: string;
+  export const npm_package_files_6: string;
+  export const GITHUB_GRAPHQL_URL: string;
+  export const npm_package_devDependencies_typescript: string;
+  export const npm_package_devDependencies__types_connect: string;
+  export const npm_package_description: string;
+  export const GOROOT_1_20_X64: string;
+  export const NVM_DIR: string;
+  export const npm_package_readmeFilename: string;
+  export const npm_package_types: string;
+  export const npm_package_homepage: string;
+  export const DOTNET_SKIP_FIRST_TIME_EXPERIENCE: string;
+  export const GOROOT_1_21_X64: string;
+  export const JAVA_HOME_17_X64: string;
+  export const ImageVersion: string;
+  export const npm_package_exports___hooks_types: string;
+  export const npm_package_devDependencies__playwright_test: string;
+  export const RUNNER_OS: string;
+  export const GITHUB_API_URL: string;
+  export const GOROOT_1_22_X64: string;
+  export const SWIFT_PATH: string;
+  export const npm_package_type: string;
+  export const RUNNER_USER: string;
+  export const STATS_V3PS: string;
+  export const CHROMEWEBDRIVER: string;
+  export const JOURNAL_STREAM: string;
+  export const GITHUB_WORKFLOW: string;
+  export const _: string;
+  export const npm_package_scripts_lint: string;
+  export const npm_config_registry: string;
+  export const ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: string;
+  export const STATS_D: string;
+  export const GITHUB_RUN_ID: string;
+  export const STATS_VMFE: string;
+  export const GITHUB_REF_TYPE: string;
+  export const BOOTSTRAP_HASKELL_NONINTERACTIVE: string;
+  export const GITHUB_WORKFLOW_SHA: string;
+  export const GITHUB_BASE_REF: string;
+  export const ImageOS: string;
+  export const npm_package_exports___import: string;
+  export const npm_package_devDependencies_dts_buddy: string;
+  export const npm_package_dependencies_kleur: string;
+  export const npm_package_dependencies_devalue: string;
+  export const npm_config_ignore_scripts: string;
+  export const GITHUB_WORKFLOW_REF: string;
+  export const PERFLOG_LOCATION_SETTING: string;
+  export const GITHUB_ACTION_REPOSITORY: string;
+  export const npm_package_exports___package_json: string;
+  export const npm_package_peerDependencies_svelte: string;
+  export const PATH: string;
+  export const NODE: string;
+  export const ANT_HOME: string;
+  export const DOTNET_MULTILEVEL_LOOKUP: string;
+  export const RUNNER_TRACKING_ID: string;
+  export const INVOCATION_ID: string;
+  export const RUNNER_TOOL_CACHE: string;
+  export const npm_package_repository_type: string;
+  export const npm_package_name: string;
+  export const GITHUB_ACTION: string;
+  export const GITHUB_RUN_NUMBER: string;
+  export const GITHUB_TRIGGERING_ACTOR: string;
+  export const RUNNER_ARCH: string;
+  export const XDG_RUNTIME_DIR: string;
+  export const AGENT_TOOLSDIRECTORY: string;
+  export const npm_package_scripts_test_integration: string;
+  export const npm_package_exports___node_polyfills_import: string;
+  export const npm_package_devDependencies__types_set_cookie_parser: string;
+  export const npm_package_scripts_test_unit: string;
+  export const npm_package_exports___vite_types: string;
+  export const npm_config_ignore_path: string;
+  export const LANG: string;
+  export const VCPKG_INSTALLATION_ROOT: string;
+  export const CONDA: string;
+  export const RUNNER_NAME: string;
+  export const XDG_CONFIG_HOME: string;
+  export const STATS_VMD: string;
+  export const GITHUB_REF_NAME: string;
+  export const GITHUB_REPOSITORY: string;
+  export const STATS_D_D: string;
+  export const npm_lifecycle_script: string;
+  export const npm_package_scripts_test_cross_platform_dev: string;
+  export const STATS_UE: string;
+  export const ANDROID_NDK_ROOT: string;
+  export const GITHUB_ACTION_REF: string;
+  export const DEBIAN_FRONTEND: string;
+  export const npm_package_scripts_test: string;
+  export const npm_package_dependencies_esm_env: string;
+  export const npm_config_version_git_message: string;
+  export const GITHUB_REPOSITORY_ID: string;
+  export const GITHUB_ACTIONS: string;
+  export const npm_lifecycle_event: string;
+  export const npm_package_repository_url: string;
+  export const npm_package_version: string;
+  export const GITHUB_REF_PROTECTED: string;
+  export const npm_config_argv: string;
+  export const npm_package_scripts_generate_types: string;
+  export const npm_package_scripts_check_all: string;
+  export const npm_package_devDependencies_svelte: string;
+  export const npm_package_dependencies_cookie: string;
+  export const GITHUB_WORKSPACE: string;
+  export const ACCEPT_EULA: string;
+  export const GITHUB_JOB: string;
+  export const RUNNER_PERFLOG: string;
+  export const YARN_IGNORE_PATH: string;
+  export const npm_package_exports___node_import: string;
+  export const GITHUB_SHA: string;
+  export const GITHUB_RUN_ATTEMPT: string;
+  export const npm_package_devDependencies__types_sade: string;
+  export const npm_config_version_git_tag: string;
+  export const npm_config_version_git_sign: string;
+  export const GITHUB_REF: string;
+  export const GITHUB_ACTOR: string;
+  export const ANDROID_SDK_ROOT: string;
+  export const npm_package_license: string;
+  export const npm_config_strict_ssl: string;
+  export const LEIN_HOME: string;
+  export const npm_package_scripts_format: string;
+  export const GITHUB_PATH: string;
+  export const JAVA_HOME: string;
+  export const PWD: string;
+  export const GITHUB_ACTOR_ID: string;
+  export const RUNNER_WORKSPACE: string;
+  export const npm_execpath: string;
+  export const npm_package_dependencies_set_cookie_parser: string;
+  export const HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: string;
+  export const STATS_TIS: string;
+  export const GITHUB_EVENT_NAME: string;
+  export const HOMEBREW_NO_AUTO_UPDATE: string;
+  export const ANDROID_HOME: string;
+  export const GITHUB_SERVER_URL: string;
+  export const GECKOWEBDRIVER: string;
+  export const LEIN_JAR: string;
+  export const GHCUP_INSTALL_BASE_PREFIX: string;
+  export const GITHUB_OUTPUT: string;
+  export const npm_package_exports___types: string;
+  export const EDGEWEBDRIVER: string;
+  export const STATS_EXT: string;
+  export const npm_package_peerDependencies_vite: string;
+  export const npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string;
+  export const npm_config_save_prefix: string;
+  export const npm_config_ignore_optional: string;
+  export const ANDROID_NDK: string;
+  export const SGX_AESM_ADDR: string;
+  export const CHROME_BIN: string;
+  export const SELENIUM_JAR_PATH: string;
+  export const STATS_EXTP: string;
+  export const npm_package_exports___node_polyfills_types: string;
+  export const INIT_CWD: string;
+  export const ANDROID_NDK_HOME: string;
+  export const GITHUB_STEP_SUMMARY: string;
+  export const npm_package_exports___hooks_import: string;
+  export const npm_package_dependencies_import_meta_resolve: string;
+}
+
+/**
+ * Similar to [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private), except that it only includes environment variables that begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+ *
+ * Values are replaced statically at build time.
+ *
+ * ```ts
+ * import { PUBLIC_BASE_URL } from '$env/static/public';
+ * ```
+ */
+declare module '$env/static/public' {}
+
+/**
+ * This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using [`adapter-node`](https://github.com/sveltejs/kit/tree/main/packages/adapter-node) (or running [`vite preview`](https://kit.svelte.dev/docs/cli)), this is equivalent to `process.env`. This module only includes variables that _do not_ begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) _and do_ start with [`config.kit.env.privatePrefix`](https://kit.svelte.dev/docs/configuration#env) (if configured).
+ *
+ * This module cannot be imported into client-side code.
+ *
+ * Dynamic environment variables cannot be used during prerendering.
+ *
+ * ```ts
+ * import { env } from '$env/dynamic/private';
+ * console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);
+ * ```
+ *
+ * > In `dev`, `$env/dynamic` always includes environment variables from `.env`. In `prod`, this behavior will depend on your adapter.
+ */
+declare module '$env/dynamic/private' {
+  export const env: {
+    GITHUB_STATE: string;
+    GIT_CLONE_PROTECTION_ACTIVE: string;
+    npm_package_scripts_test_cross_platform_build: string;
+    npm_package_devDependencies_rollup: string;
+    npm_package_devDependencies__types_node: string;
+    STATS_TRP: string;
+    DEPLOYMENT_BASEPATH: string;
+    DOTNET_NOLOGO: string;
+    npm_package_devDependencies_vitest: string;
+    USER: string;
+    npm_package_bin_svelte_kit: string;
+    npm_package_dependencies_sirv: string;
+    npm_package_dependencies_sade: string;
+    npm_package_dependencies_mrmime: string;
+    npm_package_dependencies_magic_string: string;
+    npm_config_version_commit_hooks: string;
+    npm_config_user_agent: string;
+    CI: string;
+    npm_package_scripts_generate_version: string;
+    npm_package_dependencies__types_cookie: string;
+    npm_config_bin_links: string;
+    RUNNER_ENVIRONMENT: string;
+    GITHUB_ENV: string;
+    PIPX_HOME: string;
+    npm_node_execpath: string;
+    npm_package_devDependencies_vite: string;
+    npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
+    npm_config_init_version: string;
+    JAVA_HOME_8_X64: string;
+    SHLVL: string;
+    npm_package_exports___node_types: string;
+    npm_package_files_0: string;
+    HOME: string;
+    npm_package_files_1: string;
+    npm_package_repository_directory: string;
+    RUNNER_TEMP: string;
+    GITHUB_EVENT_PATH: string;
+    npm_package_files_2: string;
+    JAVA_HOME_11_X64: string;
+    PIPX_BIN_DIR: string;
+    GITHUB_REPOSITORY_OWNER: string;
+    npm_package_engines_node: string;
+    npm_package_exports___vite_import: string;
+    npm_package_files_3: string;
+    npm_package_devDependencies_svelte_preprocess: string;
+    npm_config_init_license: string;
+    GRADLE_HOME: string;
+    ANDROID_NDK_LATEST_HOME: string;
+    JAVA_HOME_21_X64: string;
+    STATS_RDCL: string;
+    GITHUB_RETENTION_DAYS: string;
+    npm_package_files_4: string;
+    npm_config_version_tag_prefix: string;
+    GITHUB_REPOSITORY_OWNER_ID: string;
+    POWERSHELL_DISTRIBUTION_CHANNEL: string;
+    AZURE_EXTENSION_DIR: string;
+    GITHUB_HEAD_REF: string;
+    npm_package_scripts_check: string;
+    npm_package_files_5: string;
+    npm_package_dependencies_tiny_glob: string;
+    SYSTEMD_EXEC_PID: string;
+    npm_package_scripts_postinstall: string;
+    npm_package_files_6: string;
+    GITHUB_GRAPHQL_URL: string;
+    npm_package_devDependencies_typescript: string;
+    npm_package_devDependencies__types_connect: string;
+    npm_package_description: string;
+    GOROOT_1_20_X64: string;
+    NVM_DIR: string;
+    npm_package_readmeFilename: string;
+    npm_package_types: string;
+    npm_package_homepage: string;
+    DOTNET_SKIP_FIRST_TIME_EXPERIENCE: string;
+    GOROOT_1_21_X64: string;
+    JAVA_HOME_17_X64: string;
+    ImageVersion: string;
+    npm_package_exports___hooks_types: string;
+    npm_package_devDependencies__playwright_test: string;
+    RUNNER_OS: string;
+    GITHUB_API_URL: string;
+    GOROOT_1_22_X64: string;
+    SWIFT_PATH: string;
+    npm_package_type: string;
+    RUNNER_USER: string;
+    STATS_V3PS: string;
+    CHROMEWEBDRIVER: string;
+    JOURNAL_STREAM: string;
+    GITHUB_WORKFLOW: string;
+    _: string;
+    npm_package_scripts_lint: string;
+    npm_config_registry: string;
+    ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: string;
+    STATS_D: string;
+    GITHUB_RUN_ID: string;
+    STATS_VMFE: string;
+    GITHUB_REF_TYPE: string;
+    BOOTSTRAP_HASKELL_NONINTERACTIVE: string;
+    GITHUB_WORKFLOW_SHA: string;
+    GITHUB_BASE_REF: string;
+    ImageOS: string;
+    npm_package_exports___import: string;
+    npm_package_devDependencies_dts_buddy: string;
+    npm_package_dependencies_kleur: string;
+    npm_package_dependencies_devalue: string;
+    npm_config_ignore_scripts: string;
+    GITHUB_WORKFLOW_REF: string;
+    PERFLOG_LOCATION_SETTING: string;
+    GITHUB_ACTION_REPOSITORY: string;
+    npm_package_exports___package_json: string;
+    npm_package_peerDependencies_svelte: string;
+    PATH: string;
+    NODE: string;
+    ANT_HOME: string;
+    DOTNET_MULTILEVEL_LOOKUP: string;
+    RUNNER_TRACKING_ID: string;
+    INVOCATION_ID: string;
+    RUNNER_TOOL_CACHE: string;
+    npm_package_repository_type: string;
+    npm_package_name: string;
+    GITHUB_ACTION: string;
+    GITHUB_RUN_NUMBER: string;
+    GITHUB_TRIGGERING_ACTOR: string;
+    RUNNER_ARCH: string;
+    XDG_RUNTIME_DIR: string;
+    AGENT_TOOLSDIRECTORY: string;
+    npm_package_scripts_test_integration: string;
+    npm_package_exports___node_polyfills_import: string;
+    npm_package_devDependencies__types_set_cookie_parser: string;
+    npm_package_scripts_test_unit: string;
+    npm_package_exports___vite_types: string;
+    npm_config_ignore_path: string;
+    LANG: string;
+    VCPKG_INSTALLATION_ROOT: string;
+    CONDA: string;
+    RUNNER_NAME: string;
+    XDG_CONFIG_HOME: string;
+    STATS_VMD: string;
+    GITHUB_REF_NAME: string;
+    GITHUB_REPOSITORY: string;
+    STATS_D_D: string;
+    npm_lifecycle_script: string;
+    npm_package_scripts_test_cross_platform_dev: string;
+    STATS_UE: string;
+    ANDROID_NDK_ROOT: string;
+    GITHUB_ACTION_REF: string;
+    DEBIAN_FRONTEND: string;
+    npm_package_scripts_test: string;
+    npm_package_dependencies_esm_env: string;
+    npm_config_version_git_message: string;
+    GITHUB_REPOSITORY_ID: string;
+    GITHUB_ACTIONS: string;
+    npm_lifecycle_event: string;
+    npm_package_repository_url: string;
+    npm_package_version: string;
+    GITHUB_REF_PROTECTED: string;
+    npm_config_argv: string;
+    npm_package_scripts_generate_types: string;
+    npm_package_scripts_check_all: string;
+    npm_package_devDependencies_svelte: string;
+    npm_package_dependencies_cookie: string;
+    GITHUB_WORKSPACE: string;
+    ACCEPT_EULA: string;
+    GITHUB_JOB: string;
+    RUNNER_PERFLOG: string;
+    YARN_IGNORE_PATH: string;
+    npm_package_exports___node_import: string;
+    GITHUB_SHA: string;
+    GITHUB_RUN_ATTEMPT: string;
+    npm_package_devDependencies__types_sade: string;
+    npm_config_version_git_tag: string;
+    npm_config_version_git_sign: string;
+    GITHUB_REF: string;
+    GITHUB_ACTOR: string;
+    ANDROID_SDK_ROOT: string;
+    npm_package_license: string;
+    npm_config_strict_ssl: string;
+    LEIN_HOME: string;
+    npm_package_scripts_format: string;
+    GITHUB_PATH: string;
+    JAVA_HOME: string;
+    PWD: string;
+    GITHUB_ACTOR_ID: string;
+    RUNNER_WORKSPACE: string;
+    npm_execpath: string;
+    npm_package_dependencies_set_cookie_parser: string;
+    HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: string;
+    STATS_TIS: string;
+    GITHUB_EVENT_NAME: string;
+    HOMEBREW_NO_AUTO_UPDATE: string;
+    ANDROID_HOME: string;
+    GITHUB_SERVER_URL: string;
+    GECKOWEBDRIVER: string;
+    LEIN_JAR: string;
+    GHCUP_INSTALL_BASE_PREFIX: string;
+    GITHUB_OUTPUT: string;
+    npm_package_exports___types: string;
+    EDGEWEBDRIVER: string;
+    STATS_EXT: string;
+    npm_package_peerDependencies_vite: string;
+    npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string;
+    npm_config_save_prefix: string;
+    npm_config_ignore_optional: string;
+    ANDROID_NDK: string;
+    SGX_AESM_ADDR: string;
+    CHROME_BIN: string;
+    SELENIUM_JAR_PATH: string;
+    STATS_EXTP: string;
+    npm_package_exports___node_polyfills_types: string;
+    INIT_CWD: string;
+    ANDROID_NDK_HOME: string;
+    GITHUB_STEP_SUMMARY: string;
+    npm_package_exports___hooks_import: string;
+    npm_package_dependencies_import_meta_resolve: string;
+    [key: `PUBLIC_${string}`]: undefined;
+    [key: `${string}`]: string | undefined;
+  };
+}
+
+/**
+ * Similar to [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private), but only includes variables that begin with [`config.kit.env.publicPrefix`](https://kit.svelte.dev/docs/configuration#env) (which defaults to `PUBLIC_`), and can therefore safely be exposed to client-side code.
+ *
+ * Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use `$env/static/public` instead.
+ *
+ * Dynamic environment variables cannot be used during prerendering.
+ *
+ * ```ts
+ * import { env } from '$env/dynamic/public';
+ * console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);
+ * ```
+ */
+declare module '$env/dynamic/public' {
+  export const env: {
+    [key: `PUBLIC_${string}`]: string | undefined;
+  };
+}
--- a/packages/rrweb-player/.svelte-kit/generated/client/app.js
+++ b/packages/rrweb-player/.svelte-kit/generated/client/app.js
@@ -0,0 +1,20 @@
+export { matchers } from './matchers.js';
+
+export const nodes = [
+	() => import('./nodes/0'),
+	() => import('./nodes/1')
+];
+
+export const server_loads = [];
+
+export const dictionary = {
+		
+	};
+
+export const hooks = {
+	handleError: (({ error }) => { console.error(error) }),
+
+	reroute: (() => {})
+};
+
+export { default as root } from '../root.svelte';
--- a/packages/rrweb-player/.svelte-kit/generated/client/matchers.js
+++ b/packages/rrweb-player/.svelte-kit/generated/client/matchers.js
@@ -0,0 +1 @@
+export const matchers = {};
--- a/packages/rrweb-player/.svelte-kit/generated/client/nodes/0.js
+++ b/packages/rrweb-player/.svelte-kit/generated/client/nodes/0.js
@@ -0,0 +1 @@
+export { default as component } from "../../../../../../node_modules/@sveltejs/kit/src/runtime/components/layout.svelte";
--- a/packages/rrweb-player/.svelte-kit/generated/client/nodes/1.js
+++ b/packages/rrweb-player/.svelte-kit/generated/client/nodes/1.js
@@ -0,0 +1 @@
+export { default as component } from "../../../../../../node_modules/@sveltejs/kit/src/runtime/components/error.svelte";
--- a/packages/rrweb-player/.svelte-kit/non-ambient.d.ts
+++ b/packages/rrweb-player/.svelte-kit/non-ambient.d.ts
@@ -0,0 +1,30 @@
+// this file is generated — do not edit it
+
+declare module 'svelte/elements' {
+  export interface HTMLAttributes<T> {
+    'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
+    'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
+    'data-sveltekit-preload-code'?:
+      | true
+      | ''
+      | 'eager'
+      | 'viewport'
+      | 'hover'
+      | 'tap'
+      | 'off'
+      | undefined
+      | null;
+    'data-sveltekit-preload-data'?:
+      | true
+      | ''
+      | 'hover'
+      | 'tap'
+      | 'off'
+      | undefined
+      | null;
+    'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
+    'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
+  }
+}
+
+export {};
--- a/packages/rrweb-player/.svelte-kit/tsconfig.json
+++ b/packages/rrweb-player/.svelte-kit/tsconfig.json
@@ -0,0 +1,39 @@
+{
+	"compilerOptions": {
+		"paths": {},
+		"rootDirs": [
+			"..",
+			"./types"
+		],
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"lib": [
+			"esnext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext"
+	},
+	"include": [
+		"ambient.d.ts",
+		"non-ambient.d.ts",
+		"./types/**/$types.d.ts",
+		"../vite.config.js",
+		"../vite.config.ts",
+		"../src/**/*.js",
+		"../src/**/*.ts",
+		"../src/**/*.svelte",
+		"../tests/**/*.js",
+		"../tests/**/*.ts",
+		"../tests/**/*.svelte"
+	],
+	"exclude": [
+		"../node_modules/**",
+		"../src/service-worker.js",
+		"../src/service-worker.ts",
+		"../src/service-worker.d.ts"
+	]
+}
--- a/packages/rrweb-player/README.md
+++ b/packages/rrweb-player/README.md
@@ -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/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
 ```

 Or installed by using NPM：
@@ -138,3 +138,177 @@ playRange(
    afterHook: undefined | (() => void) = undefined,
  )
 ```
+
+## Sponsors
+
+[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
+
+### Gold Sponsors 🥇
+
+<div dir="auto">
+
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
+
+</div>
+
+### Silver Sponsors 🥈
+
+<div dir="auto">
+
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
+
+</div>
+
+### Bronze Sponsors 🥉
+
+<div dir="auto">
+
+<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
+
+</div>
+
+### Backers
+
+<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
+
+## Core Team Members
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/Yuyz0112">
+        <img
+          src="https://avatars.githubusercontent.com/u/13651389?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Yuyz0112</b></sub>
+        <br /><br />
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/YunFeng0817">
+        <img
+          src="https://avatars.githubusercontent.com/u/27533910?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Yun Feng</b></sub>
+        <br /><br />
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/eoghanmurray">
+        <img
+          src="https://avatars.githubusercontent.com/u/156780?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>eoghanmurray</b></sub>
+        <br /><br />
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/Juice10">
+        <img
+          src="https://avatars.githubusercontent.com/u/4106?s=100"
+          width="100px;"
+          alt=""
+        />
+        <br /><sub><b>Juice10</b></sub>
+        <br /><sub>open for rrweb consulting</sub>
+      </a>
+    </td>
+  </tr>
+</table>
+
+## Who's using rrweb?
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="http://www.smartx.com/" target="_blank">
+        <img width="195px" src="https://www.rrweb.io/logos/smartx.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
+        <img width="195px" src="https://www.rrweb.io/logos/posthog.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://statcounter.com/session-replay/" target="_blank">
+        <img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://recordonce.com/" target="_blank">
+        <img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
+      </a>
+    </td>
+  </tr>
+    <tr>
+    <td align="center">
+      <a href="https://cux.io" target="_blank">
+        <img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://remsupp.com" target="_blank">
+        <img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://highlight.io" target="_blank">
+        <img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://analyzee.io" target="_blank">
+        <img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">
+      <a href="https://requestly.io" target="_blank">
+        <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://gleap.io" target="_blank">
+        <img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://uxwizz.com" target="_blank">
+        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://www.howdygo.com" target="_blank">
+        <img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
+      </a>
+    </td>
+  </tr>
+</table>
--- a/packages/rrweb-player/public/index.html
+++ b/packages/rrweb-player/public/index.html
@@ -7,14 +7,14 @@
    <title>Svelte app</title>

    <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/bundle.css" />
+    <script src="/events.js"></script>

-    <script src="/bundle.js"></script>
-    <script src="./events.js"></script>
+    <script type="module" src="/src/main.ts"></script>
  </head>

  <body></body>
-  <script>
+  <script type="module">
+    import rrwebPlayer from '/src/main.ts';
    // eslint-disable-next-line
    const component = new rrwebPlayer({
      target: document.body,
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -2,49 +2,58 @@
  "name": "rrweb-player",
  "version": "2.0.0-alpha.14",
  "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
    "@rrweb/types": "^2.0.0-alpha.14",
-    "@types/offscreencanvas": "^2019.6.4",
-    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss-easy-import": "^3.0.0",
-    "rollup": "^2.71.1",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.2",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
-    "sirv-cli": "^0.4.4",
-    "svelte": "^3.59.2",
-    "svelte-check": "^3.0.1",
-    "svelte-preprocess": "^5.0.0",
-    "tslib": "^2.0.0"
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint-plugin-svelte": "^2.37.0",
+    "prettier-plugin-svelte": "^3.1.2",
+    "svelte": "^4.2.14",
+    "svelte-check": "^3.4.3",
+    "svelte-preprocess": "^5.0.3",
+    "svelte2tsx": "^0.7.6",
+    "tslib": "^2.0.0",
+    "vite": "^5.2.8"
  },
  "dependencies": {
    "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^2.0.0-alpha.14"
+    "@rrweb/replay": "^2.0.0-alpha.14",
+    "@rrweb/packer": "^2.0.0-alpha.14"
  },
  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "dev": "vite build --watch",
+    "build": "vite build",
    "prepublishOnly": "yarn build",
-    "start": "sirv public",
-    "validate": "svelte-check",
+    "start": "vite",
+    "check-types": "svelte-check --tsconfig ./tsconfig.json",
    "prepublish": "yarn build",
    "lint": "yarn eslint src/**/*.ts"
  },
  "description": "rrweb's replayer UI",
-  "main": "lib/index.cjs",
-  "module": "dist/index.mjs",
-  "unpkg": "dist/index.js",
+  "main": "./dist/rrweb-player.umd.cjs",
+  "module": "./dist/rrweb-player.js",
+  "unpkg": "./dist/rrweb-player.umd.cjs",
+  "typings": "dist/rrweb-player.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/rrweb-player.d.ts",
+        "default": "./dist/rrweb-player.js"
+      },
+      "require": {
+        "types": "./dist/rrweb-player.d.cts",
+        "default": "./dist/rrweb-player.cjs"
+      }
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
  "files": [
-    "lib",
    "dist",
-    "typings"
+    "package.json"
  ],
-  "typings": "typings/index.d.ts",
  "type": "module",
  "repository": {
    "type": "git",
--- a/packages/rrweb-player/rollup.config.js
+++ b/packages/rrweb-player/rollup.config.js
@@ -1,116 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import webWorkerLoader from 'rollup-plugin-web-worker-loader';
-import typescript from 'rollup-plugin-typescript2';
-import pkg from './package.json';
-import css from 'rollup-plugin-css-only';
-
-// eslint-disable-next-line no-undef
-const production = !process.env.ROLLUP_WATCH;
-
-const entries = (production
-  ? [
-      { file: pkg.module, format: 'es', css: false },
-      { file: pkg.main, format: 'cjs', css: false },
-      {
-        file: pkg.unpkg,
-        format: 'iife',
-        name: 'rrwebPlayer',
-        css: 'style.css',
-      },
-    ]
-  : []
-).concat([
-  {
-    file: 'public/bundle.js',
-    format: 'iife',
-    name: 'rrwebPlayer',
-    css: 'bundle.css',
-  },
-]);
-
-export default entries.map((output) => ({
-  input: 'src/main.ts',
-  output: {
-    file: output.file,
-    format: output.format,
-    name: output.name,
-    sourcemap: true,
-    exports: 'auto',
-  },
-  plugins: [
-    svelte({
-      compilerOptions: {
-        // enable run-time checks when not in production
-        dev: !production,
-      },
-      preprocess: sveltePreprocess({
-        postcss: {
-          // eslint-disable-next-line no-undef
-          plugins: [require('postcss-easy-import')],
-        },
-      }),
-    }),
-
-    // If you have external dependencies installed from
-    // npm, you'll most likely need these plugins. In
-    // some cases you'll need additional configuration —
-    // consult the documentation for details:
-    // https://github.com/rollup/rollup-plugin-commonjs
-    resolve({
-      browser: true,
-      dedupe: ['svelte'],
-      extensions: ['.js', '.ts', '.svelte'],
-    }),
-
-    commonjs(),
-
-    // supports bundling `web-worker:..filename` from rrweb
-    webWorkerLoader(),
-
-    typescript(),
-
-    css({
-      // we'll extract any component CSS out into
-      // a separate file — better for performance
-      output: output.css,
-    }),
-
-    // In dev mode, call `npm run start` once
-    // the bundle has been generated
-    !production && serve(),
-
-    // Watch the `public` directory and refresh the
-    // browser on changes when not in production
-    !production && livereload('public'),
-
-    // If we're building for production (npm run build
-    // instead of npm run dev), minify
-    production && terser(),
-  ],
-  watch: {
-    clearScreen: false,
-  },
-}));
-
-function serve() {
-  let started = false;
-
-  return {
-    writeBundle() {
-      if (!started) {
-        started = true;
-
-        // eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
-        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-          stdio: ['ignore', 'inherit', 'inherit'],
-          shell: true,
-        });
-      }
-    },
-  };
-}
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { EventType } from 'rrweb';
-  import type { Replayer } from 'rrweb';
+  import { EventType } from '@rrweb/types';
  import type { playerMetaData } from '@rrweb/types';
  import type {
+    Replayer,
    PlayerMachineState,
    SpeedMachineState,
-  } from 'rrweb/typings/replay/machine';
+  } from '@rrweb/replay';
  import {
    onMount,
    onDestroy,
@@ -37,11 +37,10 @@
  }
  let speedState: 'normal' | 'skipping';
  let progress: HTMLElement;
-  let step: HTMLElement;
  let finished: boolean;

  let pauseAt: number | false = false;
-  let onPauseHook: () => unknown | undefined = undefined;
+  let onPauseHook: (() => unknown) | null = null;
  let loop: {
    start: number;
    end: number;
@@ -234,7 +233,7 @@
    }
    currentTime = timeOffset;
    pauseAt = endTimeOffset;
-    onPauseHook = afterHook;
+    onPauseHook = afterHook || null;
    replayer.play(timeOffset);
  };

@@ -254,6 +253,17 @@
    goto(timeOffset);
  };

+  const handleProgressKeydown = (event: KeyboardEvent) => { 
+    if (speedState === 'skipping') {
+      return;
+    }
+    if (event.key === 'ArrowLeft') {
+      goto(currentTime - 5);
+    } else if (event.key === 'ArrowRight') {
+      goto(currentTime + 5);
+    }
+  };
+
  export const setSpeed = (newSpeed: number) => {
    let needFreeze = playerState === 'playing';
    speed = newSpeed;
@@ -281,8 +291,8 @@
    speedState = replayer.speedService.state.value;
    replayer.on(
      'state-change',
-      (states: { player?: PlayerMachineState; speed?: SpeedMachineState }) => {
-        const { player, speed } = states;
+      (states) => {
+        const { player, speed } = states as { player?: PlayerMachineState; speed?: SpeedMachineState };
        if (player?.value && playerState !== player.value) {
          playerState = player.value;
          switch (playerState) {
@@ -428,10 +438,10 @@
        class:disabled={speedState === 'skipping'}
        bind:this={progress}
        on:click={handleProgressClick}
+        on:keydown={handleProgressKeydown}
      >
        <div
          class="rr-progress__step"
-          bind:this={step}
          style="width: {percentage}"
        />
        {#each inactivePeriods as period}
@@ -537,7 +547,6 @@
            48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48
            48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4
            68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z"
-            p-id="1286"
          />
        </svg>
      </button>
--- a/packages/rrweb-player/src/Player.svelte
+++ b/packages/rrweb-player/src/Player.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
  import { onMount, onDestroy } from 'svelte';
-  import { Replayer, unpack } from 'rrweb';
+  import { Replayer } from '@rrweb/replay';
+  import { unpack } from '@rrweb/packer/unpack';
  import type { eventWithTime } from '@rrweb/types';
  import {
    inlineCss,
@@ -11,19 +12,20 @@
    typeOf,
  } from './utils';
  import Controller from './Controller.svelte';
-
-  export let width = 1024;
-  export let height = 576;
-  export let maxScale = 1;
-  export let events: eventWithTime[] = [];
-  export let skipInactive = true;
-  export let autoPlay = true;
-  export let speedOption: number[] = [1, 2, 4, 8];
-  export let speed = 1;
-  export let showController = true;
-  export let tags: Record<string, string> = {};
+  import type { RRwebPlayerOptions, RRwebPlayerExpose } from './types';
+    
+  export let width: NonNullable<RRwebPlayerOptions['props']['width']>  = 1024;
+  export let height: NonNullable<RRwebPlayerOptions['props']['height']> = 576;
+  export let maxScale: NonNullable<RRwebPlayerOptions['props']['maxScale']> = 1;
+  export let events: RRwebPlayerOptions['props']['events'];
+  export let skipInactive: NonNullable<RRwebPlayerOptions['props']['skipInactive']> = true;
+  export let autoPlay: NonNullable<RRwebPlayerOptions['props']['autoPlay']> = true;
+  export let speedOption: NonNullable<RRwebPlayerOptions['props']['speedOption']> = [1, 2, 4, 8];
+  export let speed: NonNullable<RRwebPlayerOptions['props']['speed']> = 1;
+  export let showController: NonNullable<RRwebPlayerOptions['props']['showController']> = true;
+  export let tags: NonNullable<RRwebPlayerOptions['props']['tags']> = {};
  // color of inactive periods indicator
-  export let inactiveColor = '#D4D4D4';
+  export let inactiveColor: NonNullable<RRwebPlayerOptions['props']['inactiveColor']> = '#D4D4D4';

  let replayer: Replayer;

@@ -64,20 +66,20 @@
      `scale(${Math.min(...scale)})` + 'translate(-50%, -50%)';
  };

-  export const triggerResize = () => {
+  export const triggerResize: RRwebPlayerExpose['triggerResize'] = () => {
    updateScale(replayer.wrapper, {
      width: replayer.iframe.offsetWidth,
      height: replayer.iframe.offsetHeight,
    });
  };

-  export const toggleFullscreen = () => {
+  export const toggleFullscreen: RRwebPlayerExpose['toggleFullscreen'] = () => {
    if (player) {
      isFullscreen() ? exitFullscreen() : openFullscreen(player);
    }
  };

-  export const addEventListener = (
+  export const addEventListener: RRwebPlayerExpose['addEventListener'] = (
    event: string,
    handler: (detail: unknown) => unknown,
  ) => {
@@ -92,33 +94,33 @@
    }
  };

-  export const addEvent = (event: eventWithTime) => {
+  export const addEvent: RRwebPlayerExpose['addEvent'] = (event: eventWithTime) => {
    replayer.addEvent(event);
    controller.triggerUpdateMeta();
  };
-  export const getMetaData = () => replayer.getMetaData();
-  export const getReplayer = () => replayer;
+  export const getMetaData: RRwebPlayerExpose['getMetaData'] = () => replayer.getMetaData();
+  export const getReplayer: RRwebPlayerExpose['getReplayer'] = () => replayer;

  // by pass controller methods as public API
-  export const toggle = () => {
+  export const toggle: RRwebPlayerExpose['toggle'] = () => {
    controller.toggle();
  };
-  export const setSpeed = (speed: number) => {
+  export const setSpeed: RRwebPlayerExpose['setSpeed'] = (speed: number) => {
    controller.setSpeed(speed);
  };
-  export const toggleSkipInactive = () => {
+  export const toggleSkipInactive: RRwebPlayerExpose['toggleSkipInactive'] = () => {
    controller.toggleSkipInactive();
  };
-  export const play = () => {
+  export const play: RRwebPlayerExpose['play'] = () => {
    controller.play();
  };
-  export const pause = () => {
+  export const pause: RRwebPlayerExpose['pause'] = () => {
    controller.pause();
  };
-  export const goto = (timeOffset: number, play?: boolean) => {
+  export const goto: RRwebPlayerExpose['goto'] = (timeOffset: number, play?: boolean) => {
    controller.goto(timeOffset, play);
  };
-  export const playRange = (
+  export const playRange: RRwebPlayerExpose['playRange'] = (
    timeOffset: number,
    endTimeOffset: number,
    startLooping = false,
@@ -193,7 +195,7 @@
 </script>

 <style global>
-  @import 'rrweb/dist/rrweb.min.css';
+  @import '@rrweb/replay/dist/style.css';

  .rr-player {
    position: relative;
--- a/packages/rrweb-player/src/main.ts
+++ b/packages/rrweb-player/src/main.ts
@@ -1,17 +1,12 @@
-import type { eventWithTime } from '@rrweb/types';
 import _Player from './Player.svelte';
-
-type PlayerProps = {
-  events: eventWithTime[];
-};
-
-class Player extends _Player {
-  constructor(options: {
-    target: Element;
-    props: PlayerProps;
-    // for compatibility
-    data?: PlayerProps;
-  }) {
+import type { RRwebPlayerOptions } from './types';
+export class Player extends _Player {
+  constructor(
+    options: {
+      // for compatibility
+      data?: RRwebPlayerOptions['props'];
+    } & RRwebPlayerOptions,
+  ) {
    super({
      target: options.target,
      props: options.data || options.props,
--- a/packages/rrweb-player/typings/index.d.ts
+++ b/packages/rrweb-player/typings/index.d.ts
@@ -1,8 +1,6 @@
-import { playerConfig } from 'rrweb/typings/types';
-import { eventWithTime } from '@rrweb/types';
-import { Replayer } from 'rrweb';
-import { Mirror } from 'rrweb-snapshot';
-import { SvelteComponent } from 'svelte';
+import type { eventWithTime } from '@rrweb/types';
+import type { Replayer, playerConfig } from '@rrweb/replay';
+import type { Mirror } from 'rrweb-snapshot';

 export type RRwebPlayerOptions = {
  target: HTMLElement;
@@ -60,19 +58,20 @@ export type RRwebPlayerOptions = {
  } & Partial<playerConfig>;
 };

-export default class rrwebPlayer extends SvelteComponent {
-  constructor(options: RRwebPlayerOptions);
-
-  addEventListener(event: string, handler: (params: any) => unknown): void;
-
-  addEvent(event: eventWithTime): void;
+export type RRwebPlayerExpose = {
+  addEventListener: (
+    event: string,
+    handler: (params: unknown) => unknown,
+  ) => void;
+  addEvent: (event: eventWithTime) => void;
  getMetaData: Replayer['getMetaData'];
  getReplayer: () => Replayer;
  getMirror: () => Mirror;
-
+  // getSilly: () => void;
  toggle: () => void;
  setSpeed: (speed: number) => void;
  toggleSkipInactive: () => void;
+  toggleFullscreen: () => void;
  triggerResize: () => void;
  $set: (options: { width: number; height: number }) => void;
  play: () => void;
@@ -84,4 +83,4 @@ export default class rrwebPlayer extends SvelteComponent {
    startLooping?: boolean,
    afterHook?: undefined | (() => void),
  ) => void;
-}
+};
--- a/packages/rrweb-player/src/utils.ts
+++ b/packages/rrweb-player/src/utils.ts
@@ -15,7 +15,7 @@ declare global {
  }
 }

-import { EventType, IncrementalSource } from 'rrweb';
+import { EventType, IncrementalSource } from '@rrweb/types';
 import type { eventWithTime } from '@rrweb/types';

 export function inlineCss(cssObj: Record<string, string>): string {
@@ -68,6 +68,7 @@ export function openFullscreen(el: HTMLElement): Promise<void> {
    /* IE/Edge */
    return el.msRequestFullscreen();
  }
+  return Promise.resolve();
 }

 export function exitFullscreen(): Promise<void> {
@@ -83,16 +84,19 @@ export function exitFullscreen(): Promise<void> {
    /* IE/Edge */
    return document.msExitFullscreen();
  }
+  return Promise.resolve();
 }

 export function isFullscreen(): boolean {
  let fullscreen = false;
-  [
-    'fullscreen',
-    'webkitIsFullScreen',
-    'mozFullScreen',
-    'msFullscreenElement',
-  ].forEach((fullScreenAccessor) => {
+  (
+    [
+      'fullscreen',
+      'webkitIsFullScreen',
+      'mozFullScreen',
+      'msFullscreenElement',
+    ] as const
+  ).forEach((fullScreenAccessor) => {
    if (fullScreenAccessor in document) {
      fullscreen = fullscreen || Boolean(document[fullScreenAccessor]);
    }
@@ -140,9 +144,9 @@ export function typeOf(
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object',
-  };
+  } as const;
  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
-  return map[toString.call(obj)];
+  return map[toString.call(obj) as keyof typeof map];
 }

 /**
--- a/packages/rrweb-player/svelte.config.js
+++ b/packages/rrweb-player/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+};
+
+export default config;
--- a/packages/rrweb-player/tsconfig.json
+++ b/packages/rrweb-player/tsconfig.json
@@ -1,18 +1,28 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "node_modules/*",
-    "__sapper__/*",
-    "public/*",
-    "../rrweb/src/record/workers/workers.d.ts"
-  ],
+  "extends": "../../tsconfig.base.json",
+  "exclude": ["package.json", "vite.config.ts"],
+  "include": ["src/**/*", "vite-env.d.ts"],
  "compilerOptions": {
-    "composite": true
+    "composite": true,
+    "rootDir": "./src",
+    // defaults for svelte
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true
  },
  "references": [
    {
-      "path": "../rrweb"
+      "path": "../replay"
+    },
+    {
+      "path": "../packer"
    },
    {
      "path": "../types"
--- a/packages/rrweb-player/tsconfig.node.json
+++ b/packages/rrweb-player/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/packages/rrweb-player/vite-env.d.ts
+++ b/packages/rrweb-player/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/packages/rrweb-player/vite.config.ts
+++ b/packages/rrweb-player/vite.config.ts
@@ -0,0 +1,70 @@
+import path from 'path';
+import glob from 'fast-glob';
+import { Plugin } from 'vite';
+import config from '../../vite.config.default';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import sveltePreprocess from 'svelte-preprocess';
+import { emitDts, EmitDtsConfig } from 'svelte2tsx';
+import { createRequire } from 'node:module';
+import { copyFileSync } from 'node:fs';
+
+const declarationDir = path.resolve('./types');
+const require = createRequire(import.meta.url);
+const svelteShimsPath = require.resolve('svelte2tsx/svelte-shims-v4.d.ts');
+
+// Helper function to emit TypeScript definitions
+async function generateDts(inputPath: string) {
+  const config: EmitDtsConfig = {
+    declarationDir: declarationDir,
+    libRoot: path.dirname(inputPath),
+    svelteShimsPath: svelteShimsPath,
+  };
+
+  try {
+    await emitDts(config);
+  } catch (error) {
+    console.error(`Error generating .d.ts for ${inputPath}:`, error);
+  }
+}
+
+function viteSvelteDts(): Plugin {
+  return {
+    name: 'vite-plugin-svelte-dts',
+    async buildStart(options) {
+      console.log('Generating .d.ts files for Svelte components...');
+
+      const { input } = options;
+      if (typeof input === 'string') {
+        await generateDts(input);
+      } else if (Array.isArray(input)) {
+        for (const file of input) {
+          await generateDts(file);
+        }
+      } else {
+        for (const file of Object.values(input)) {
+          await generateDts(file);
+        }
+      }
+
+      // copy .d.ts files to src directory
+      const files = await glob('**/*.svelte.d.ts', {
+        cwd: declarationDir,
+        absolute: true,
+      });
+      for (const file of files) {
+        // resolve the path relative to the src directory
+        const dest = path.resolve('src', path.relative(declarationDir, file));
+        copyFileSync(file, dest);
+      }
+    },
+  };
+}
+
+export default config(path.resolve(__dirname, 'src/main.ts'), 'rrwebPlayer', {
+  plugins: [
+    viteSvelteDts(),
+    svelte({
+      preprocess: [sveltePreprocess({ typescript: true })],
+    }),
+  ],
+});
				`@@ -0,0 +1 @@`
				`export { default as component } from "../../../../../../node_modules/@sveltejs/kit/src/runtime/components/layout.svelte";`