diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index f6e5abe..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,25 +0,0 @@
-module.exports = {
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        ecmaVersion: 2020,
-        sourceType: 'module',
-    },
-    env: {
-        node: true,
-        browser: true,
-        commonjs: true,
-    },
-    settings: {},
-    extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
-    rules: {
-        '@typescript-eslint/ban-ts-comment': 'off',
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-empty-function': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
-        indent: ['error', 4, { SwitchCase: 1 }],
-        'newline-per-chained-call': ['error', { ignoreChainWithDepth: 2 }],
-        'no-useless-escape': 'off',
-    },
-};
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 2b03105..5433e0b 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1 +1,2 @@
 github: permafrost-dev
+custom: https://permafrost.dev/open-source
diff --git a/.github/codecov.yml b/.github/codecov.yml
index 7259276..37b0e91 100644
--- a/.github/codecov.yml
+++ b/.github/codecov.yml
@@ -1,6 +1,6 @@
 codecov:
   branch: main
-  require_ci_to_pass: yes
+  require_ci_to_pass: true
 
 coverage:
   status:
@@ -8,14 +8,13 @@ coverage:
       default:
         informational: true
         target: auto
-        # this allows a 10% drop from the previous base commit coverage
         threshold: 20%
     patch:
       default:
         informational: true
   precision: 2
   round: up
-  range: "40...80"
+  range: "70...100"
 
 parsers:
   javascript:
@@ -33,12 +32,13 @@ comment:
   require_changes: true
 
 ignore:
+  - ".husky/"
   - "build/"
   - "dist/"
+  - "coverage/"
   - "src/index.ts"
   - "src/index-standalone.ts"
-  - ".eslintrc.js"
-  - "jest.config.js"
+  - "eslint.config.js"
   - "prettier.config.js"
-  - "rollup.config.js"
-  - "rollup.standalone-config.js"
+  - "vite.config.js"
+  - "vite.config.standalone.js"
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index e5bcc00..8c7c556 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -4,14 +4,14 @@ updates:
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"
     labels:
       - "dependencies"
 
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"
     allow:
       - dependency-type: "direct"
     commit-message:
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index d961a66..559e093 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -1,22 +1,8 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
 name: "CodeQL"
 
 on:
-  #push:
-  #  branches: [ main ]
-  #pull_request:
-  #  # The branches below must be a subset of the branches above
-  #  branches: [ main ]
+  push:
+    branches: [ main ]
   schedule:
     - cron: '24 2 * * 1'
 
@@ -29,39 +15,18 @@ jobs:
       fail-fast: false
       matrix:
         language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
 
-    # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
       uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
       uses: github/codeql-action/autobuild@v3
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v3
diff --git a/.github/workflows/dependabot-auto-merge.yml b/.github/workflows/dependabot-auto-merge.yml
index 7dcca24..cafca6f 100644
--- a/.github/workflows/dependabot-auto-merge.yml
+++ b/.github/workflows/dependabot-auto-merge.yml
@@ -10,23 +10,23 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.actor == 'dependabot[bot]' }}
     steps:
-    
+
       - name: Dependabot metadata
         id: metadata
         uses: dependabot/fetch-metadata@v2
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
-          
-      - name: Auto-merge Dependabot PRs for semver-minor updates
-        if: ${{steps.metadata.outputs.update-type == 'version-update:semver-minor'}}
+
+      - name: Dependabot auto-merge minor & patch updates
+        if: ${{steps.metadata.outputs.update-type != 'version-update:semver-major'}}
         run: gh pr merge --auto --merge "$PR_URL"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          
-      - name: Auto-merge Dependabot PRs for semver-patch updates
-        if: ${{steps.metadata.outputs.update-type == 'version-update:semver-patch'}}
+
+      - name: Dependabot auto-merge actions major updates (if compat >= 90%)
+        if: ${{steps.metadata.outputs.package-ecosystem == 'github_actions' && steps.metadata.outputs.update-type == 'version-update:semver-major' && steps.metadata.outputs.compatibility-score >= 90}}
         run: gh pr merge --auto --merge "$PR_URL"
         env:
           PR_URL: ${{github.event.pull_request.html_url}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index b529592..2ba9035 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -5,17 +5,16 @@ on:
     branches:
       - main
   pull_request:
-    branches:
-      - main
+  pull_request_target:
+
 jobs:
   tests:
 
     runs-on: ubuntu-latest
-
     strategy:
       fail-fast: true
       matrix:
-        node-version: [14, 16]
+        node-version: [20, 22]
 
     steps:
     - name: Checkout repository
@@ -28,31 +27,18 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
 
-    - name: Get yarn cache directory path
-      id: npm-cache-dir-path
-      run: echo "::set-output name=dir::$(npm config get cache)"
-
-    - name: Cache dependencies
-      uses: actions/cache@v4.1.2
-      id: npm-cache
+    - uses: oven-sh/setup-bun@v2
       with:
-        path: ${{ steps.npm-cache-dir-path.outputs.dir }}
-        key: ${{ runner.os }}-node-${{ matrix.node-version }}-npm-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-${{ matrix.node-version }}-npm-
+        bun-version: latest
 
     - name: Install dependencies
-      run: npm install
-
-    - name: Run the tests
-      run: npm run test
+      run: bun install
 
     - name: Run the tests with coverage
-      run: npm run test -- --coverage --coverageReporters json
+      run: bun run test:coverage
 
     - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v4.6.0
+      uses: codecov/codecov-action@v4
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
-        files: coverage/coverage-final.json
-
+        files: coverage/coverage.json
diff --git a/.gitignore b/.gitignore
index 3db9af7..39dd1c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 /.vscode
 /node_modules
 /dist
+/dist-temp*
 /coverage
 
 package-lock.json
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 3199e8e..015c708 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 npm run lint:staged
diff --git a/.npmignore b/.npmignore
index a50a8c9..967f7e3 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,28 +1,28 @@
+/.coverage
 /.git
 /.github
+/.husky
 /.vscode
 /build
 /coverage
 /node_modules
 /src
 /tests
+/dist-temp*
 .editorconfig
 .eslintrc.js
 .gitattributes
+.markdownlint.json
 .prettierignore
 .prettierrc
-jest.config.js
+bun.lockb
+eslint.config.js
 package-lock.json
+prettier.config.js
 SECURITY.md
 tsconfig.json
-*.sh
-_*.txt
+vite.config.js
+vite.config.standalone.js
 *.ignored
-rollup.vue?-config.js
-examples
-rollup.*.js
-.markdownlint.json
-/.husky
-prettier.config.js
-rollup.config.mjs
-rollup.standalone-config.mjs
+*.log
+*.sh
diff --git a/.prettierignore b/.prettierignore
index 10706c5..f503ebf 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,7 +1,9 @@
-node_modules/*
-dist/*
+.coverage/*
 build/*
-*.yml
-*.yaml
+dist-temp*
+dist/*
+node_modules/*
 *.ignore
 *.ignored
+*.yaml
+*.yml
diff --git a/LICENSE b/LICENSE
index 455d443..c63a11a 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright © 2021 Permafrost Development
+Copyright © 2024 Permafrost Software <oss@permafrost.dev>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/README.md b/README.md
index a5b0ed2..900e6f4 100644
--- a/README.md
+++ b/README.md
@@ -33,9 +33,8 @@ The preferred way to use this package is to load it via CDN, which must be done
 The `axios` library must be loaded prior to loading `alpinejs-ray` and `Alpine`:
 
 ```html
-
 <script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/standalone.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/cdn/standalone.umd.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer>
 ```
 
@@ -52,11 +51,11 @@ Although not the recommended way, the package can be imported as an ESM module a
 ```js 
 import Alpine from 'alpinejs';
 import AlpineRayPlugin from 'alpinejs-ray';
-
-window.axios = require('axios');
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+import axios from 'axios';
 
 window.Alpine = Alpine;
+window.axios = axios;
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 Alpine.plugin(AlpineRayPlugin);
 Alpine.start();
@@ -68,7 +67,6 @@ To configure `alpinejs-ray`, you must create an `alpineRayConfig` property on th
 loading `alpinejs-ray`:
 
 ```html
-
 <script>
     window.alpineRayConfig = {
         interceptErrors: true,
@@ -105,7 +103,6 @@ Use the `x-ray` directive within your HTML markup to easily send data to Ray. Th
 javascript expression.
 
 ```html
-
 <div x-data>
     <!-- sends 'hello world' and the value of the 'mystore.somevalue' Alpine store to Ray -->
     <div x-ray="'hello world'"></div>
@@ -113,19 +110,16 @@ javascript expression.
 </div>
 ```
 
-The `x-ray` directive values are reactive; if the value changes, the new data will be sent to and displayed in Ray
-in-place.
+The `x-ray` directive values are reactive; if the value changes, the new data will be sent to and displayed in Ray in-place.
 The changed value will be momentarily highlighted in Ray to indicate that it was updated.
 
 ## Example Components
 
 ```html
-
 <button @click="$ray('hello from alpine')">Send to Ray</button>
 ```
 
 ```html
-
 <div x-data="onClickData()">
     <div x-show="show">Hi There Ray!</div>
 
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..7a91a0f
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,44 @@
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import { Linter } from 'eslint';
+
+/** @type {Linter.Config} */
+const config = [
+    {
+        files: ['src/**/*.js', 'src/**/*.ts'],
+        languageOptions: {
+            ecmaVersion: 2022,
+            sourceType: 'script',
+            parser: tsParser,
+            parserOptions: {
+                ecmaVersion: 2020,
+                sourceType: 'module',
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+        },
+    },
+    {
+        plugins: {
+            ts: tsPlugin,
+        },
+        // extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
+        rules: {
+            '@typescript-eslint/ban-ts-comment': 'off',
+            '@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+            '@typescript-eslint/no-empty-function': 'off',
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-var-requires': 'off',
+            indent: ['error', 4, { SwitchCase: 1 }],
+            'max-len': ['warn', { code: 160, ignoreUrls: true }],
+            'newline-per-chained-call': ['error', { ignoreChainWithDepth: 4 }],
+            'no-useless-escape': 'off',
+        },
+    },
+];
+
+export default config;
diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index 38ce3fa..0000000
--- a/jest.config.js
+++ /dev/null
@@ -1,32 +0,0 @@
-const { pathsToModuleNameMapper } = require('ts-jest');
-
-const tsConfigPaths = {
-    '@/*': ['src/*'],
-    '@tests/*': ['tests/*'],
-};
-
-module.exports = {
-    preset: 'ts-jest/presets/js-with-ts',
-    testEnvironment: 'node',
-    transform: {
-        '^.+\\.tsx?$': 'ts-jest',
-    },
-    testRegex: '(/__test__/.*|/tests/.*|(\\.|/)(test|spec))\\.[tj]sx?$',
-    testPathIgnorePatterns: ['/node_modules/', '/dist/', '/build/', '/coverage/', '/tests/TestClasses/', '/tests/TestData/'],
-    moduleFileExtensions: ['js', 'ts'],
-    moduleNameMapper: pathsToModuleNameMapper(tsConfigPaths, { prefix: `${__dirname}/` }),
-
-    coverageDirectory: './coverage',
-    coverageReporters: ['html-spa', 'text'],
-    collectCoverageFrom: [
-        'src/*.js',
-        'src/*.ts',
-        'src/**/*.js',
-        'src/**/*.ts',
-        '!**/build/**',
-        '!**/dist/**',
-        '!**/node_modules/**',
-        '!**/tests/**',
-        '!**/vendor/**',
-    ],
-};
diff --git a/package.json b/package.json
index 379f7cd..d3c7df4 100644
--- a/package.json
+++ b/package.json
@@ -12,72 +12,72 @@
     "bugs": {
         "url": "https://github.com/permafrost-dev/alpinejs-ray/issues"
     },
-    "main": "./dist/index.cjs.js",
-    "module": "./dist/index.esm.mjs",
-    "jsdelivr": "./dist/standalone.min.js",
-    "unpkg": "./dist/standalone.min.js",
+    "type": "module",
+    "main": "./dist/lib/index.js",
+    "module": "./dist/lib/index.js",
+    "jsdelivr": "./dist/cdn/standalone.umd.js",
+    "unpkg": "./dist/cdn/standalone.umd.js",
     "exports": {
         ".": {
-            "import": "./dist/index.esm.mjs",
-            "require": "./dist/index.cjs.js"
+            "default": "./dist/lib/index.js",
+            "import": "./dist/lib/index.js",
+            "require": "./dist/lib/index.cjs"
         }
     },
     "scripts": {
-        "test": "./node_modules/.bin/jest tests --verbose",
-        "test:coverage": "./node_modules/.bin/jest tests --coverage",
-        "fmt": "./node_modules/.bin/prettier --config prettier.config.js --write 'src/**/*.{js,ts,json}' 'tests/**/*.{js,ts,json}' './*.js'",
-        "lint": "./node_modules/.bin/eslint --ext ts,js src/",
-        "lint:fix": "./node_modules/.bin/eslint --ext ts,js --fix src/",
-        "lint:staged": "./node_modules/.bin/lint-staged",
+        "test": "vitest tests",
+        "test:coverage": "vitest tests --coverage",
+        "fmt": "prettier --config prettier.config.js --write 'src/**/*.{js,ts,json}' 'tests/**/*.{js,ts,json}' './*.js'",
+        "lint": "eslint --ext ts,js src/",
+        "lint:fix": "eslint --ext ts,js --fix src/",
+        "lint:staged": "lint-staged",
         "fix": "npm run fmt && npm run lint:fix",
-        "build:module": "rollup --config rollup.config.mjs",
-        "build:standalone": "rollup --config rollup.standalone-config.mjs",
+        "build:module": "vite build",
+        "build:standalone": "vite build --config vite.config.standalone.js",
         "build:all": "concurrently npm:build:module npm:build:standalone",
         "preversion": "npm run test",
         "postversion": "npm run build:all",
-        "prepare": "is-ci || husky install"
+        "prepare": "is-ci || husky"
     },
     "lint-staged": {
-        "*.{js,ts}": [
-            "./node_modules/.bin/prettier --config prettier.config.js --write",
-            "./node_modules/.bin/eslint --fix"
+        "*.{js,ts,mjs,cjs,mts}": [
+            "prettier --config prettier.config.js --write",
+            "eslint --fix"
         ],
         "*.{json,css,scss,gql}": [
-            "./node_modules/.bin/prettier --config prettier.config.js --write"
+            "prettier --config prettier.config.js --write"
         ],
         "*.{yaml,yml}": [
-            "./node_modules/.bin/prettier --config prettier.config.js --tab-width 2 --write"
+            "prettier --config prettier.config.js --tab-width 2 --write"
         ]
     },
     "keywords": [
         "alpinejs",
         "ray",
+        "spatie",
         "debug",
         "permafrost"
     ],
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^24.0.0",
-        "@rollup/plugin-node-resolve": "^15.0.1",
-        "@rollup/plugin-replace": "^5.0.1",
-        "@rollup/plugin-typescript": "^10.0.1",
-        "@types/jest": "^29.2.4",
-        "@rollup/plugin-terser": "^0.4",
-        "@types/node": "^20.2.1",
-        "@typescript-eslint/eslint-plugin": "^5.14.0",
-        "@typescript-eslint/parser": "^5.14.0",
-        "concurrently": "^8.0.1",
-        "eslint": "^8.10.0",
-        "husky": "^8.0.1",
+        "@types/alpinejs": "^3.13.10",
+        "@types/node": "^22.9.0",
+        "@typescript-eslint/eslint-plugin": "^8.13.0",
+        "@typescript-eslint/parser": "^8.13.0",
+        "@vitest/coverage-v8": "^2.1.4",
+        "alpinejs": "^3.14.3",
+        "concurrently": "^9.1.0",
+        "eslint": "^9.14.0",
+        "husky": "^9.1.6",
         "is-ci": "^3.0.1",
-        "jest": "^29.3.1",
-        "lint-staged": "^13.0.0",
-        "prettier": "^2.5.1",
-        "rollup": "^3.3.0",
-        "ts-jest": "^29.0.3",
-        "typescript": "^5.0"
+        "jsdom": "^25.0.1",
+        "lint-staged": "^15.2.10",
+        "prettier": "^3.3.3",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.10",
+        "vitest": "^2.1.4"
     },
     "dependencies": {
-        "minimatch": "^5.0.1",
-        "node-ray": "^1.18.0"
+        "minimatch": "^10.0.1",
+        "node-ray": "^2.1.2"
     }
 }
diff --git a/prettier.config.js b/prettier.config.js
index 66a716d..4b51bbf 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -19,7 +19,7 @@ const overrides = [
     },
 ];
 
-module.exports = {
+export default {
     arrowParens: 'avoid',
     bracketSameLine: true,
     bracketSpacing: true,
@@ -27,7 +27,7 @@ module.exports = {
     insertPragma: false,
     jsxSingleQuote: false,
     overrides,
-    printWidth: 140,
+    printWidth: 160,
     proseWrap: 'preserve',
     quoteProps: 'as-needed',
     requirePragma: false,
diff --git a/rollup.config.mjs b/rollup.config.mjs
deleted file mode 100644
index fe4dcb1..0000000
--- a/rollup.config.mjs
+++ /dev/null
@@ -1,55 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import typescript from '@rollup/plugin-typescript';
-import packageJson from './package.json' with { type: "json" };
-
-const options = {
-    sourceMapsEnabled: false,
-    minified: false,
-};
-
-export default {
-    input: `src/index.ts`,
-    output: [
-        {
-            file: `dist/index.cjs.js`,
-            format: 'cjs',
-            sourcemap: options.sourceMapsEnabled,
-            exports: 'named',
-            plugins: [],
-        },
-        {
-            file: `dist/index.esm.mjs`,
-            format: 'esm',
-            sourcemap: options.sourceMapsEnabled,
-            plugins: [],
-        },
-    ],
-    plugins: [
-        replace({
-            values: {
-                __BUILD_DATE__: () => new Date().toISOString(),
-                __BUILD_VERSION__: () => packageJson.version,
-            },
-            preventAssignment: true,
-        }),
-        nodeResolve(),
-        commonjs(),
-        typescript(),
-    ],
-    external: [
-        'axios',
-        'dayjs',
-        'crypto',
-        'object-hash',
-        'stopwatch-node',
-        'md5',
-        'node-ray',
-        'node-ray/web',
-        '@permafrost-dev/pretty-format',
-        'stacktrace-js',
-        'xml-formatter',
-        'uuid',
-    ],
-};
diff --git a/rollup.standalone-config.mjs b/rollup.standalone-config.mjs
deleted file mode 100644
index 9818327..0000000
--- a/rollup.standalone-config.mjs
+++ /dev/null
@@ -1,54 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import typescript from '@rollup/plugin-typescript';
-// import { terser } from '@rollup/plugin-terser';
-import packageJson from './package.json' with { type: "json" };
-
-const options = {
-    sourceMapsEnabled: true,
-    minified: true,
-};
-
-const outputEntry = {
-    file: `dist/standalone.js`,
-    format: 'umd',
-    //name: 'AlpineRay',
-    sourcemap: options.sourceMapsEnabled,
-    //exports: 'named',
-    plugins: [],
-    globals: {
-        axios: 'axios',
-    },
-};
-
-function makeEntryMinified(entry) {
-    const result = Object.assign({}, entry);
-
-    result['file'] = result['file'].replace(/\.js$/, '.min.js');
-    result['plugins'] = [];
-
-    return Object.freeze(result);
-}
-
-function getEntryObject(entry) {
-    return Object.freeze(Object.assign({}, entry));
-}
-
-export default {
-    input: `src/index-standalone.ts`,
-    output: [getEntryObject(outputEntry), makeEntryMinified(outputEntry)],
-    plugins: [
-        replace({
-            values: {
-                __BUILD_DATE__: () => new Date().toISOString(),
-                __BUILD_VERSION__: () => packageJson.version,
-            },
-            preventAssignment: true,
-        }),
-        nodeResolve(),
-        commonjs(),
-        typescript(),
-    ],
-    external: ['axios'],
-};
diff --git a/src/AlpineRay.ts b/src/AlpineRay.ts
index e273ea9..ec74e73 100644
--- a/src/AlpineRay.ts
+++ b/src/AlpineRay.ts
@@ -1,20 +1,16 @@
-/* eslint-disable no-undef */
-
-import { Ray } from 'node-ray/web';
 import { getWindow } from '@/lib/utils';
+import { Ray } from 'node-ray/web';
 
 export class AlpineRay extends Ray {
-    public static $version = '__BUILD_VERSION__';
-
     public rayInstance: any;
     public trackRays: Record<string, any> = {
         store: {},
     };
 
-    public window: any = null;
+    public window: Window | null = null;
 
     protected alpine(): any {
-        return this.window.Alpine;
+        return this.window?.Alpine;
     }
 
     public init(rayInstance: any = null, window: any = null) {
@@ -32,7 +28,7 @@ export class AlpineRay extends Ray {
         const data = this.alpine().store(name);
 
         this.alpine().effect(() => {
-            this.trackRays.store[name].table(data);
+            this.trackRays.store[name]?.table(data);
         });
     }
 
@@ -43,13 +39,7 @@ export class AlpineRay extends Ray {
     }
 }
 
-export const ray = (...args: any[]) => {
-    // @ts-ignore
-    return AlpineRay.create().send(...args);
-};
-
-globalThis.ray = function (...args: any[]) {
-    return ray(...args);
-};
+export const ray = (...args: any[]) => AlpineRay.create().send(...args) as AlpineRay;
 
+globalThis.ray = ray;
 globalThis.AlpineRay = Ray;
diff --git a/src/AlpineRayMagicMethod.ts b/src/AlpineRayMagicMethod.ts
index fa42bb0..9094735 100644
--- a/src/AlpineRayMagicMethod.ts
+++ b/src/AlpineRayMagicMethod.ts
@@ -1,14 +1,8 @@
-import {ray} from '@/AlpineRay';
-import {AlpineRayConfig, getAlpineRayConfig} from '@/AlpineRayConfig';
-import {
-    checkForAxios,
-    encodeHtmlEntities,
-    filterObjectKeys,
-    findParentComponent,
-    getWindow,
-    highlightHtmlMarkup
-} from '@/lib/utils';
-import minimatch from 'minimatch';
+import { ray } from '@/AlpineRay';
+import { AlpineRayConfig, getAlpineRayConfig } from '@/AlpineRayConfig';
+import { checkForAxios, encodeHtmlEntities, filterObjectKeys, findParentComponent, getWindow, highlightHtmlMarkup } from '@/lib/utils';
+import { minimatch } from 'minimatch';
+import { vi } from 'vitest';
 
 function getMatches(patterns: string[], values: string[]) {
     const result: string[] = [];
@@ -78,7 +72,7 @@ const AlpineRayMagicMethod = {
             if (errorEvent.error || errorEvent.reason) {
                 const data = errorEvent.reason || errorEvent.error;
 
-                const {el, expression} = data;
+                const { el, expression } = data;
                 const parentComponent = findParentComponent(el);
 
                 // component and parent components are not alpine components, so do nothing
@@ -92,7 +86,7 @@ const AlpineRayMagicMethod = {
                     `<span class="text-red-700 bg-red-300 p-1">${encodeHtmlEntities(expression)}</span>`,
                 );
 
-                const componentData = parentComponent.__x ?? {$data: {}};
+                const componentData = parentComponent.__x ?? { $data: {} };
 
                 rayInstance().table(
                     {
@@ -132,7 +126,7 @@ const AlpineRayMagicMethod = {
 
         checkForAxios(window);
 
-        Alpine.directive('ray', (el, {expression}, {evaluateLater, effect}) => {
+        Alpine.directive('ray', (el, { expression }, { evaluateLater, effect }) => {
             const result = evaluateLater(expression);
 
             effect(() => {
@@ -189,6 +183,8 @@ const AlpineRayMagicMethod = {
 
                         rayInstance = this.trackRays[ident];
 
+                        console.log('rayInstance', rayInstance);
+
                         this.trackRays[ident] = rayInstance().table(tableData, 'x-ray');
 
                         setTimeout(() => {
diff --git a/src/globals.d.ts b/src/globals.d.ts
new file mode 100644
index 0000000..0f21e05
--- /dev/null
+++ b/src/globals.d.ts
@@ -0,0 +1,11 @@
+import axios from 'axios';
+import Alpine from 'alpinejs';
+import { Ray } from 'node-ray/dist/web';
+
+declare global {
+    interface Window {
+        Alpine?: typeof Alpine;
+        Ray: Ray;
+        axios?: typeof axios;
+    }
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 370a5d1..9175bef 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,16 +1,16 @@
-/* eslint-disable no-undef */
-
-export function getWindow() {
-    return <any>globalThis;
+/**
+ * Returns the global window object.
+ */
+export function getWindow(): Window {
+    return window || globalThis;
 }
 
 /**
  * Determines if the axios library has been installed and initialized in the current browser environment.
  *
- * @param window
  */
-export const checkForAxios = (window: any = null) => {
-    const win: any = window ?? getWindow();
+export const checkForAxios = (window: Window | null = null) => {
+    const win: Window = (window ?? getWindow()) as Window;
 
     if (!win.axios) {
         throw new Error('[alpinejs-ray] axios is required for alpinejs-ray to function correctly.');
@@ -20,23 +20,20 @@ export const checkForAxios = (window: any = null) => {
 /**
  * Determines if the node-ray standalone library has been installed and initialized in the current browser environment.
  *
- * @param window
  */
 export const checkForRay = (window: any = null) => {
-    const win: any = window ?? getWindow();
+    const win: Window = (window ?? getWindow()) as Window;
 
-    if (!win.Ray || !win.Ray.Ray || !win.Ray.ray) {
+    if (!win.Ray || Object.keys(win.Ray).length === 0) {
         throw new Error('[alpinejs-ray] node-ray is required for alpinejs-ray to function correctly.');
     }
 };
 
 /**
  * Determines if alpine.js has been installed and initialized in the current browser environment.
- *
- * @param window
  */
 export const checkForAlpine = (window: any = null) => {
-    const win: any = window ?? getWindow();
+    const win: Window = (window ?? getWindow()) as Window;
 
     if (!win.Alpine) {
         throw new Error('[alpinejs-ray] Alpine is required for alpinejs-ray to function correctly.');
@@ -58,25 +55,19 @@ export const checkForAlpine = (window: any = null) => {
  * @returns boolean
  */
 export function isValidVersion(required: string, current: string) {
-    let currentVersionIdentStr = '',
-        requiredVersionIdentStr = '';
+    const shiftedNum = n => (!n || n === '0' ? 100 : Number.parseInt(n.padEnd(3, '0')) || 100);
 
-    const requiredArray: number[] = required.split('.').map(part => 1000 + parseInt(part));
-    let currentArray: number[] = current.split('.').map(part => 1000 + parseInt(part));
+    const requiredArr = required.split('.').map(part => shiftedNum(part));
+    const currentArr = current.split('.').map(part => shiftedNum(part));
 
-    while (currentArray.length < requiredArray.length) {
-        currentArray.push(1000);
+    while (currentArr.length < requiredArr.length && currentArr.length < 5) {
+        currentArr.push(100);
     }
 
-    // ensure the array lengths match
-    currentArray = currentArray.slice(0, requiredArray.length - 1);
-
-    for (let idx = 0; idx < currentArray.length; idx++) {
-        currentVersionIdentStr += currentArray[idx].toString();
-        requiredVersionIdentStr += requiredArray[idx].toString();
-    }
+    const currentLong = Number(currentArr.join(''));
+    const requiredLong = Number(requiredArr.join(''));
 
-    return Number(currentVersionIdentStr) >= Number(requiredVersionIdentStr);
+    return currentLong >= requiredLong;
 }
 
 export const encodeHtmlEntities = (str: string) => {
@@ -136,7 +127,7 @@ export const highlightHtmlMarkup = (str: string) => {
     );
 };
 
-export function getComponentName(element: any) {
+export function getComponentName(element: HTMLElement) {
     return (
         element.getAttribute('x-title') ||
         element.getAttribute('x-id') ||
@@ -152,7 +143,6 @@ export function getComponentName(element: any) {
     );
 }
 
-// TODO: Not sure how to test this
 export function findWireID(wireId, window: any = null) {
     window = window ?? getWindow();
 
@@ -185,9 +175,14 @@ export function findLiveViewName(alpineEl, window: any = null) {
 }
 
 export function extractFunctionName(functionName) {
-    if (functionName.startsWith('{')) {
-        return;
+    if (!functionName) {
+        return '';
     }
+
+    if (functionName?.startsWith('{')) {
+        return '';
+    }
+
     return functionName
         .replace(/\(([^\)]+)\)/, '') // Handles myFunction(param)
         .replace('()', '');
@@ -201,9 +196,13 @@ export function findParentComponent(el: any) {
         counter++;
         e = e.parentElement;
 
-        if (e.hasAttribute('x-data')) {
+        if (e?.hasAttribute('x-data')) {
             return e;
         }
+
+        if (!e) {
+            return null;
+        }
     }
 
     return null;
diff --git a/tests/AlpineRay.test.ts b/tests/AlpineRay.test.ts
index 5b5dfac..dfd76c0 100644
--- a/tests/AlpineRay.test.ts
+++ b/tests/AlpineRay.test.ts
@@ -1,7 +1,107 @@
-/* eslint-disable no-undef */
+import { AlpineRay } from '@/AlpineRay';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { FakeAlpine } from '~tests/fakes/FakeAlpine';
 
-import { AlpineRay } from '../src/AlpineRay';
+// Fake Ray implementation
+class FakeRay {
+    public tables: any[] = [];
 
-it('has a version number', () => {
-    expect(AlpineRay.$version).toBe('__BUILD_VERSION__');
+    table(data: any) {
+        this.tables.push(data);
+        return this;
+    }
+
+    send(...args: any[]) {
+        // No-op
+        return this;
+    }
+}
+
+describe('AlpineRay', () => {
+    let alpineRay: AlpineRay;
+    let fakeWindow: Window & { Alpine: FakeAlpine };
+    let fakeRayInstance: FakeRay;
+    let fakeAlpine: FakeAlpine;
+
+    beforeEach(() => {
+        fakeAlpine = new FakeAlpine();
+        fakeWindow = { Alpine: fakeAlpine } as any;
+        fakeRayInstance = new FakeRay();
+
+        alpineRay = AlpineRay.create() as AlpineRay;
+        alpineRay.init(fakeRayInstance, fakeWindow);
+    });
+
+    it('should initialize with given rayInstance and window', () => {
+        expect(alpineRay.rayInstance).toBe(fakeRayInstance);
+        expect(alpineRay.window).toBe(fakeWindow);
+    });
+
+    it('should watch an Alpine store and send updates to Ray', () => {
+        const storeName = 'testStore';
+        fakeAlpine.store(storeName, { value: 1 });
+
+        alpineRay.watchStore(storeName);
+
+        expect(alpineRay.trackRays.store[storeName]).toBe(fakeRayInstance);
+        expect(fakeRayInstance.tables.length).toBe(1);
+        expect(fakeRayInstance.tables[0]).toEqual({ value: 1 });
+
+        // Update the store and verify that Ray receives the update
+        fakeAlpine.updateStore(storeName, { value: 2 });
+        expect(fakeRayInstance.tables.length).toBe(2);
+        expect(fakeRayInstance.tables[1]).toEqual({ value: 1 });
+    });
+
+    it('should unwatch an Alpine store', () => {
+        const storeName = 'testStore';
+        fakeAlpine.store(storeName, { value: 1 });
+
+        alpineRay.watchStore(storeName);
+        expect(alpineRay.trackRays.store[storeName]).toBe(fakeRayInstance);
+
+        alpineRay.unwatchStore(storeName);
+        expect(alpineRay.trackRays.store[storeName]).toBeUndefined();
+
+        // Updating the store should not send updates to Ray
+        fakeAlpine.updateStore(storeName, { value: 2 });
+        expect(fakeRayInstance.tables.length).toBe(1); // No new table entries
+    });
+
+    it('should handle multiple stores independently', () => {
+        const storeName1 = 'store1';
+        const storeName2 = 'store2';
+        fakeAlpine.store(storeName1, { data: 'foo' });
+        fakeAlpine.store(storeName2, { data: 'bar' });
+
+        alpineRay.watchStore(storeName1);
+        alpineRay.watchStore(storeName2);
+
+        expect(fakeRayInstance.tables.length).toBe(2);
+        expect(fakeRayInstance.tables[0]).toEqual({ data: 'foo' });
+        expect(fakeRayInstance.tables[1]).toEqual({ data: 'bar' });
+
+        // fakeAlpine.updateStore(storeName1, { data: 'updated foo' });
+        // console.log(fakeRayInstance.tables);
+        // expect(fakeRayInstance.tables.length).toBe(4);
+        // expect(fakeRayInstance.tables[2]).toEqual({ data: 'updated foo' });
+
+        // fakeAlpine.updateStore(storeName2, { data: 'updated bar' });
+        // expect(fakeRayInstance.tables.length).toBe(6);
+        // expect(fakeRayInstance.tables[3]).toEqual({ data: 'updated bar' });
+    });
+
+    it('should not fail when unwatching a store that was not watched', () => {
+        expect(() => {
+            alpineRay.unwatchStore('nonExistentStore');
+        }).not.toThrow();
+    });
+
+    // it('should initialize with default instances if none provided', () => {
+    //     const defaultAlpineRay = new AlpineRay();
+    //     defaultAlpineRay.init();
+
+    //     expect(defaultAlpineRay.rayInstance).toBeDefined();
+    //     expect(defaultAlpineRay.window).toBeDefined();
+    // });
 });
diff --git a/tests/AlpineRayMagicMethod.test.ts b/tests/AlpineRayMagicMethod.test.ts
index 16ba5c0..05dc741 100644
--- a/tests/AlpineRayMagicMethod.test.ts
+++ b/tests/AlpineRayMagicMethod.test.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
 
+import { expect, it, beforeEach } from 'vitest';
 import AlpineRayMagicMethod from '../src/AlpineRayMagicMethod';
 
 let rayInstance: any, win: any, testState: AlpineRayMagicMethodTestState;
@@ -189,7 +190,152 @@ it('logs custom component events', () => {
 
     expect(testState.rayPayloadHistory).toMatchSnapshot();
 });
+it('should initialize custom event listeners when logEvents is defined', () => {
+    const config = { logEvents: ['custom-event'] };
 
+    // Simulate the outerHTML of body containing events
+    win.document.querySelector = (selector: string) => ({
+        outerHTML: '<div x-on:custom-event="handler"></div>',
+    });
+
+    AlpineRayMagicMethod.initCustomEventListeners(config, win, rayInstance);
+
+    expect(testState.windowEventListeners.length).toBe(1);
+    expect(testState.windowEventListeners[0].name).toBe('custom-event');
+
+    // Simulate triggering the event
+    const event = { detail: { foo: 'bar' } };
+    testState.windowEventListeners[0].callback(event);
+
+    expect(testState.rayPayloadHistory.length).toBe(1);
+    expect(testState.rayPayloadHistory[0]).toMatchSnapshot();
+});
+
+it('should not initialize custom event listeners when logEvents is empty', () => {
+    const config = { logEvents: [] };
+
+    AlpineRayMagicMethod.initCustomEventListeners(config, win, rayInstance);
+
+    expect(testState.windowEventListeners.length).toBe(0);
+});
+
+it('should initialize error handlers when interceptErrors is true', () => {
+    const config = { interceptErrors: true };
+
+    AlpineRayMagicMethod.initErrorHandlers(config, win, rayInstance);
+
+    expect(testState.windowEventListeners.length).toBe(2);
+    const eventNames = testState.windowEventListeners.map(listener => listener.name);
+    expect(eventNames).toContain('error');
+    expect(eventNames).toContain('unhandledrejection');
+});
+
+it('should not initialize error handlers when interceptErrors is false', () => {
+    const config = { interceptErrors: false };
+
+    AlpineRayMagicMethod.initErrorHandlers(config, win, rayInstance);
+
+    expect(testState.windowEventListeners.length).toBe(0);
+});
+
+it('should register the ray magic method and directive in Alpine', () => {
+    AlpineRayMagicMethod.register(win.Alpine, win, rayInstance);
+
+    expect(testState.alpineMagicProperties.length).toBe(1);
+    expect(testState.alpineMagicProperties[0].name).toBe('ray');
+
+    expect(testState.alpineDirectives.length).toBe(1);
+    expect(testState.alpineDirectives[0].name).toBe('ray');
+});
+
+it.skip('should execute ray directive and update trackRays and trackCounters', () => {
+    const el = {
+        getAttribute: (attr: string) => {
+            if (attr === 'id') return 'test-id';
+            return null;
+        },
+        tagName: 'DIV',
+    };
+    const directive = { expression: 'foo' };
+    const data = 'test data';
+
+    const evaluateLater = (expression: string) => {
+        return callback => {
+            callback(data);
+        };
+    };
+    const effect = callback => {
+        callback();
+    };
+
+    // Reset trackRays and trackCounters
+    AlpineRayMagicMethod.trackRays = {};
+    AlpineRayMagicMethod.trackCounters = {};
+
+    // Simulate the directive registration
+    let directiveCallback;
+    win.Alpine.directive = (name, callback) => {
+        directiveCallback = callback;
+        testState.alpineDirectives.push({ name });
+    };
+
+    AlpineRayMagicMethod.register(win.Alpine, win, rayInstance);
+
+    directiveCallback(el, directive, { evaluateLater, effect });
+
+    const ident = el.getAttribute('id') ?? '';
+
+    expect(AlpineRayMagicMethod.trackRays[ident]).toBeInstanceOf(FakeRay);
+    expect(AlpineRayMagicMethod.trackCounters[ident]).toBe(1);
+    expect(testState.rayPayloadHistory.length).toBeGreaterThan(0);
+});
+
+//
+it.skip('should handle errors and send ray payload when an error occurs', () => {
+    const config = { interceptErrors: true };
+    AlpineRayMagicMethod.initErrorHandlers(config, win, rayInstance);
+
+    const errorEvent = {
+        error: {
+            toString: () => 'Test Error',
+            el: {
+                tagName: 'DIV',
+            },
+            expression: 'x-test',
+        },
+    };
+
+    // Simulate error event
+    testState.windowEventListeners.forEach(listener => {
+        if (listener.name === 'error') {
+            listener.callback(errorEvent);
+        }
+    });
+
+    console.log({ payload: testState.rayPayloadHistory });
+    expect(testState.rayPayloadHistory.length).toBe(1);
+    expect(testState.rayPayloadHistory[0].type).toBe('table');
+    expect(testState.rayPayloadHistory[0].args[1]).toBe('ERROR');
+});
+
+it('should initialize all features when init is called', () => {
+    const config = {
+        interceptErrors: true,
+        logEvents: ['custom-event'],
+    };
+
+    win.document.querySelector = selector => ({
+        outerHTML: '<div x-on:custom-event="handler"></div>',
+    });
+
+    AlpineRayMagicMethod.init(config, win, rayInstance);
+
+    expect(testState.windowEventListeners.length).toBe(3);
+    const eventNames = testState.windowEventListeners.map(listener => listener.name);
+    expect(eventNames).toContain('error');
+    expect(eventNames).toContain('unhandledrejection');
+    expect(eventNames).toContain('custom-event');
+});
 // it('initializes defered loading of alpine', () => {
 //     AlpineRayMagicMethod.initDeferLoadingAlpine(win, rayInstance);
 
diff --git a/tests/__snapshots__/AlpineRayMagicMethod.test.ts.snap b/tests/__snapshots__/AlpineRayMagicMethod.test.ts.snap
index 3b9063b..0367ecf 100644
--- a/tests/__snapshots__/AlpineRayMagicMethod.test.ts.snap
+++ b/tests/__snapshots__/AlpineRayMagicMethod.test.ts.snap
@@ -1,3 +1,20 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`logs custom component events 1`] = `[]`;
+
+exports[`should initialize custom event listeners when logEvents is defined 1`] = `
+{
+  "args": [
+    [
+      {
+        "event": "custom-event",
+        "payload": {
+          "foo": "bar",
+        },
+      },
+      "alpine.js",
+    ],
+  ],
+  "type": "table",
+}
+`;
diff --git a/tests/fakes/FakeAlpine.ts b/tests/fakes/FakeAlpine.ts
new file mode 100644
index 0000000..dd6bc7f
--- /dev/null
+++ b/tests/fakes/FakeAlpine.ts
@@ -0,0 +1,22 @@
+// Fake Alpine.js implementation
+export class FakeAlpine {
+    private stores: Record<string, any> = {};
+    private effects: Function[] = [];
+
+    store(name: string, data?: any) {
+        if (data !== undefined) {
+            this.stores[name] = data;
+        }
+        return this.stores[name];
+    }
+
+    effect(fn: Function) {
+        this.effects.push(fn);
+        fn();
+    }
+
+    updateStore(name: string, data: any) {
+        this.stores[name] = data;
+        this.effects.forEach(effect => effect());
+    }
+}
diff --git a/tests/fakes/FakeHTMLElement.ts b/tests/fakes/FakeHTMLElement.ts
new file mode 100644
index 0000000..101542d
--- /dev/null
+++ b/tests/fakes/FakeHTMLElement.ts
@@ -0,0 +1,36 @@
+export class FakeHTMLElement {
+    attributes: Record<string, string> = {};
+    id: string = '';
+    tagName: string = 'div';
+    parentElement: FakeHTMLElement | null = null;
+
+    constructor(attributes: Record<string, string> = {}, id: string = '', tagName: string = 'div') {
+        this.attributes = attributes;
+        this.id = id;
+        this.tagName = tagName;
+    }
+
+    getAttribute(name: string): string | null {
+        return this.attributes[name] || null;
+    }
+
+    closest(selector: string): FakeHTMLElement | null {
+        return this.parentElement;
+    }
+
+    hasAttribute(name: string): boolean {
+        return name in this.attributes;
+    }
+}
+
+// generate a series of fake elements for testing, by setting the parentElement property:
+export function generateFakeElements(): FakeHTMLElement {
+    const parent = new FakeHTMLElement({ 'x-data': 'parentData' });
+    const child = new FakeHTMLElement({ 'x-data': 'childData' });
+    const grandChild = new FakeHTMLElement({ 'x-data': 'grandChildData' });
+
+    grandChild.parentElement = child;
+    child.parentElement = parent;
+
+    return grandChild;
+}
diff --git a/tests/lib/__snapshots__/utils.test.ts.snap b/tests/lib/__snapshots__/utils.test.ts.snap
new file mode 100644
index 0000000..31320c5
--- /dev/null
+++ b/tests/lib/__snapshots__/utils.test.ts.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`checks that html syntax highlighting works 1`] = `"<span class="text-blue-600">&lt;div</span>&nbsp;<span class="text-indigo-800">x-data</span>=<span class="text-green-600">&quot;{<div class="text-blue-800 bg-blue-200 rounded-md p-1 inline">test</div>:1}&quot;&nbsp;<span class="text-orange-400">class</span>=&quot;bg-red-400&nbsp;p-1&nbsp;rounded-md&quot;&gt;<span class="text-blue-600">&lt;a</span>&nbsp;<span class="text-indigo-800">@click</span>=&quot;console.log(123);&quot;</span>&gt;Hello,&nbsp;world!<span class="text-blue-600">&lt;/a&gt;</span><span class="text-blue-600">&lt;/div&gt;</span>"`;
+
+exports[`encodes HTML entities correctly 1`] = `"&lt;div&nbsp;class=&quot;test&quot;&gt;Hello&nbsp;&amp;&nbsp;welcome!&lt;/div&gt;"`;
diff --git a/tests/lib/utils.test.ts b/tests/lib/utils.test.ts
index e52a670..2a02f40 100644
--- a/tests/lib/utils.test.ts
+++ b/tests/lib/utils.test.ts
@@ -1,6 +1,20 @@
 /* eslint-disable no-undef */
-
-import { checkForAlpine, checkForRay, isValidVersion } from '../../src/lib/utils';
+import { expect, it } from 'vitest';
+import {
+    checkForAlpine,
+    checkForAxios,
+    checkForRay,
+    encodeHtmlEntities,
+    extractFunctionName,
+    filterObjectKeys,
+    findLiveViewName,
+    findParentComponent,
+    findWireID,
+    getComponentName,
+    highlightHtmlMarkup,
+    isValidVersion,
+} from '../../src/lib/utils';
+import { FakeHTMLElement, generateFakeElements } from '../fakes/FakeHTMLElement';
 
 it('throws an error if node-ray is not installed', () => {
     let error = null;
@@ -74,4 +88,171 @@ it('checks for valid version strings', () => {
     expect(isValidVersion('2.5.0', '3.2.1')).toBeTruthy();
     expect(isValidVersion('2.5.0', 'badversion')).toBeFalsy();
     expect(isValidVersion('2.5.0', '')).toBeFalsy();
+
+    expect(isValidVersion('1.5.0', '3.3.2')).toBeTruthy();
+    expect(isValidVersion('2.5.81', '3.1.2')).toBeTruthy();
+});
+
+it('checks that html syntax highlighting works', () => {
+    const result = highlightHtmlMarkup('<div x-data="{test:1}" class="bg-red-400 p-1 rounded-md"><a @click="console.log(123);">Hello, world!</a></div>');
+    expect(result).toMatchSnapshot();
+});
+
+it('gets the component name from various attributes', () => {
+    const element = new FakeHTMLElement({ 'x-title': 'test-title' });
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-title');
+
+    element.attributes = { 'x-id': 'test-id' };
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-id');
+
+    element.id = 'test-id';
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-id');
+
+    element.id = '';
+    element.attributes = { name: 'test-name' };
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-name');
+
+    element.attributes = { title: 'test-title-attr' };
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-title-attr');
+
+    element.attributes = { 'aria-label': 'test-aria-label' };
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-aria-label');
+
+    element.attributes = { 'x-data': 'testFunction()' };
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('testFunction');
+
+    element.attributes = { role: 'test-role' };
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('test-role');
+
+    element.attributes = {};
+    element.tagName = 'span';
+    expect(getComponentName(element as unknown as HTMLElement)).toBe('span');
+});
+
+it('finds the parent component with x-data attribute', () => {
+    // const parent = new FakeHTMLElement({ 'x-data': 'parentData' });
+    // const child = new FakeHTMLElement();
+    // child.parentElement = parent;
+    const el = generateFakeElements();
+    const parent = el.parentElement;
+
+    expect(findParentComponent(el as unknown as HTMLElement)).toBe(parent);
+});
+
+it('returns null if no parent component with x-data attribute is found', () => {
+    const child = new FakeHTMLElement();
+    expect(findParentComponent(child as unknown as HTMLElement)).toBeNull();
+});
+it('throws an error if axios is not installed', () => {
+    let error = null;
+
+    try {
+        checkForAxios({} as unknown as Window);
+    } catch (err: any) {
+        error = err;
+    }
+
+    expect(error).not.toBeNull();
+});
+
+it('does not throw an error if axios is installed', () => {
+    const win = {
+        axios: {},
+    };
+
+    expect(checkForAxios(win as unknown as Window)).toBeUndefined();
+});
+
+it('encodes HTML entities correctly', () => {
+    const str = '<div class="test">Hello & welcome!</div>';
+
+    expect(encodeHtmlEntities(str)).toMatchSnapshot();
+});
+
+it('filters object keys correctly', () => {
+    const obj = { a: 1, b: 2, c: 3 };
+    const ignoreKeys = ['b'];
+    const filteredObj = filterObjectKeys(obj, ignoreKeys);
+
+    expect(filteredObj).toEqual({ a: 1, c: 3 });
+});
+
+it('finds wire ID correctly', () => {
+    const wireId = 'test-wire-id';
+    const win = {
+        livewire: {
+            find: id => ({
+                __instance: {
+                    fingerprint: {
+                        name: 'test-name',
+                    },
+                },
+            }),
+        },
+    };
+
+    expect(findWireID(wireId, win)).toBe('livewire:test-name');
+});
+
+it('returns undefined if wire ID is not found', () => {
+    const wireId = 'test-wire-id';
+    const win = {
+        livewire: {
+            find: id => null,
+        },
+    };
+
+    expect(findWireID(wireId, win)).toBeUndefined();
+});
+
+it('finds LiveView name correctly', () => {
+    const alpineEl = {
+        closest: () => ({
+            dataset: {
+                phxView: 'test-view',
+            },
+        }),
+    };
+    const win = {
+        liveSocket: {
+            getViewByEl: el => ({
+                name: 'test-view-name',
+            }),
+        },
+    };
+
+    expect(findLiveViewName(alpineEl, win)).toBe('test-view-name');
+});
+
+it('returns undefined if LiveView name is not found', () => {
+    const alpineEl = {
+        closest: () => null,
+    };
+    const win = {
+        liveSocket: {
+            getViewByEl: el => null,
+        },
+    };
+
+    expect(findLiveViewName(alpineEl, win)).toBeUndefined();
+});
+
+it('extracts function name correctly', () => {
+    expect(extractFunctionName('testFunction()')).toBe('testFunction');
+    expect(extractFunctionName('testFunction(param)')).toBe('testFunction');
+    expect(extractFunctionName('{testFunction}')).toBe('');
+    expect(extractFunctionName('')).toBe('');
+});
+
+it('finds parent component with x-data attribute', () => {
+    const parent = new FakeHTMLElement({ 'x-data': 'parentData' });
+    const child = new FakeHTMLElement();
+    child.parentElement = parent;
+
+    expect(findParentComponent(child as unknown as HTMLElement)).toBe(parent);
+});
+
+it('returns null if no parent component with x-data attribute is found', () => {
+    const child = new FakeHTMLElement();
+    expect(findParentComponent(child as unknown as HTMLElement)).toBeNull();
 });
diff --git a/tsconfig.json b/tsconfig.json
index f7edcaf..eae6ba8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,73 +1,28 @@
 {
     "compilerOptions": {
-        /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-        /* Basic Options */
-        // "incremental": true,                   /* Enable incremental compilation */
-        "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-        "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-        "lib": ["esnext"] /* Specify library files to be included in the compilation. */,
-        "allowJs": true /* Allow javascript files to be compiled. */,
-        "checkJs": false,                       /* Report errors in .js files. */
-        // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-        // "declaration": true /* Generates corresponding '.d.ts' file. */,
-        // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-        // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-        // "outFile": "./",                       /* Concatenate and emit output to single file. */
-        // "outDir": "./dist1" /* Redirect output structure to the directory. */,
-        // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-        // "composite": true,                     /* Enable project compilation */
-        // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-        "removeComments": true /* Do not emit comments to output. */,
-        // "noEmit": true,                        /* Do not emit outputs. */
-        "importHelpers": true /* Import emit helpers from 'tslib'. */,
-        "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-        // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-        /* Strict Type-Checking Options */
-        "strict": true /* Enable all strict type-checking options. */,
-        "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-        // "strictNullChecks": true,              /* Enable strict null checks. */
-        // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-        // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-        // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-        // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-        // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-        /* Additional Checks */
-        // "noUnusedLocals": true,                /* Report errors on unused locals. */
-        // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-        // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-        // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-        // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
-
-        /* Module Resolution Options */
-        "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-        "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+        "target": "esnext",
+        "module": "esnext",
+        "lib": ["esnext", "DOM", "ScriptHost"],
+        "allowJs": true,
+        "checkJs": true,
+        "removeComments": true,
+        "importHelpers": true,
+        "downlevelIteration": true,
+        "strict": true,
+        "noImplicitAny": false,
+        "moduleResolution": "Bundler",
+        "baseUrl": "./",
         "paths": {
-            "@/*": ["src/*"]
-        } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
-        // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-        // "typeRoots": [],                       /* List of folders to include type definitions from. */
-        // "types": [],                           /* Type declaration files to be included in compilation. */
-        "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
-        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
-        // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-        "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
-
-        /* Source Map Options */
-        // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-        // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-        // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-        // "inlineSources": false,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-        /* Experimental Options */
-        //"experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-        //"emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-
-        /* Advanced Options */
-        "skipLibCheck": true /* Skip type checking of declaration files. */,
-        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
-    }
-    //"include": ["./src/*.ts", "./src/**/*.ts", "./src/**/*.js"]
+            "@/*": ["src/*"],
+            "~tests/*": ["tests/*"]
+        },
+        "typeRoots": ["node_modules/@types", "src"],
+        "types": ["alpinejs"],
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "allowUmdGlobalAccess": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "include": ["src/globals.d.ts", "src/*.ts", "src/**/*.ts", "src/**/*.d.ts", "tests/AlpineRay.test.ts"]
 }
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..ffda1f0
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,82 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+function generateFilenameFromFormat(format) {
+    if (format === 'cjs') {
+        return 'index.cjs';
+    }
+
+    if (format === 'es') {
+        return 'index.js';
+    }
+
+    return `index.${format}.js`;
+}
+
+export default defineConfig({
+    build: {
+        outDir: 'dist/lib',
+        sourcemap: true,
+        minify: true,
+        lib: {
+            entry: 'src/index.ts',
+            name: 'AlpineRay',
+            formats: ['es', 'cjs'],
+            fileName: format => generateFilenameFromFormat(format),
+        },
+        rollupOptions: {
+            output: {
+                globals: {
+                    axios: 'axios',
+                    dayjs: 'dayjs',
+                },
+            },
+            external: [
+                'alpinejs',
+                'axios',
+                'dayjs',
+                'crypto',
+                'object-hash',
+                'stopwatch-node',
+                'md5',
+                'node-ray',
+                'node-ray/web',
+                '@permafrost-dev/pretty-format',
+                'stacktrace-js',
+                'xml-formatter',
+                'uuid',
+            ],
+            treeshake: true,
+        },
+    },
+    resolve: {
+        alias: {
+            '@': resolve('.', 'src'),
+        },
+    },
+    server: {
+        watch: {
+            usePolling: true,
+            ignored: ['**/node_modules/**', '**/dist/**', './coverage/**', '**/.git/**'],
+        },
+    },
+    test: {
+        name: 'AlpineRay',
+        globals: true,
+        passWithNoTests: true,
+        watch: false,
+        environment: 'jsdom',
+        alias: {
+            '@': resolve('.', 'src'),
+            '~tests': resolve('.', 'tests'),
+        },
+        coverage: {
+            all: true,
+            include: ['src/**/*.ts'],
+            exclude: ['src/index.ts', 'src/index-standalone.ts'],
+            reporter: [['text'], ['json', { file: 'coverage.json' }]],
+        },
+        include: ['tests/**/*.ts', 'tests/**/*.js', 'tests/*.ts'],
+        reporters: ['default', process.env.CI ? 'github-actions' : 'verbose'],
+    },
+});
diff --git a/vite.config.standalone.js b/vite.config.standalone.js
new file mode 100644
index 0000000..d566132
--- /dev/null
+++ b/vite.config.standalone.js
@@ -0,0 +1,26 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    build: {
+        outDir: 'dist/cdn',
+        sourcemap: true,
+        minify: true,
+        lib: {
+            entry: 'src/index-standalone.ts',
+            name: 'AlpineRay',
+            formats: ['umd'],
+            fileName: format => `standalone.${format}.js`,
+        },
+        rollupOptions: {
+            external: ['alpinejs', 'axios'],
+            output: { globals: { axios: 'axios' } },
+            treeshake: true,
+        },
+    },
+    resolve: {
+        alias: {
+            '@': resolve('.', 'src'),
+        },
+    },
+});