···11-# Volt.js
11+# VoltX.js
22+33+> ⚠️ **Pre-release Software**: VoltX.js is in active development. Breaking changes are expected until v1.0. Use in production at your own risk.
2435## Philosophy/Goals
46
···5566# binder
7788-Binder system for mounting and managing Volt.js bindings
88+Binder system for mounting and managing VoltX.js bindings
991010## mount
11111212-Mount Volt.js on a root element and its descendants and binds all data-volt-* attributes to the provided scope.
1212+Mount VoltX.js on a root element and its descendants and binds all data-volt-* attributes to the provided scope.
1313Returns a cleanup function to unmount and dispose all bindings.
14141515```typescript
+3-3
docs/api/events.md
···5566# Event Handling
7788-Volt.js provides declarative event handling through `data-volt-on-*` attributes with automatic access to special scoped references.
88+VoltX provides declarative event handling through `data-volt-on-*` attributes with automatic access to special scoped references.
991010## Event Binding Syntax
1111···35353636## Event Types
37373838-Volt.js aims to support all standard DOM events through `data-volt-on-*`:
3838+VoltX.js aims to support all standard DOM events through `data-volt-on-*`:
39394040**Mouse Events:**
4141···66666767## Implementation Details
68686969-When an event handler is bound, Volt.js:
6969+When an event handler is bound, VoltX.js:
707071711. Creates a new scope that extends the component scope
72722. Injects `$el` (the bound element) and `$event` (the event object) into this scope
+1-1
docs/api/lifecycle.md
···5566# lifecycle
7788-Global lifecycle hook system for Volt.js
88+Global lifecycle hook system for VoltX.js
99Provides beforeMount, afterMount, beforeUnmount, and afterUnmount hooks
10101111## registerGlobalHook
+2-2
docs/api/plugin.md
···5566# plugin
7788-Plugin system for extending Volt.js with custom bindings
88+Plugin system for extending VoltX.js with custom bindings
991010## registerPlugin
11111212Register a custom plugin with a given name.
1313-Plugins extend Volt.js with custom data-volt-* attribute bindings.
1313+Plugins extend VoltX.js with custom data-volt-* attribute bindings.
14141515```typescript
1616export function registerPlugin(name: string, handler: PluginHandler): void
+4-3
docs/bindings.md
···11-# Volt Bindings
11+# VoltX Bindings
2233Bindings connect reactive state to the DOM using `data-volt-*` attributes. Each binding evaluates expressions and updates the DOM when dependencies change.
44···56565757Each key in the object is a class name. When the corresponding value is truthy, the class is added; when falsy, the class is removed.
58585959-Class names with hyphens or spaces must be quoted. The binding preserves existing classes not managed by Volt.js.
5959+Class names with hyphens or spaces must be quoted. The binding preserves existing classes not managed by VoltX.js.
60606161## Event Bindings
6262···372372Register custom bindings for domain-specific behavior using the plugin API:
373373374374```js
375375-import { registerPlugin } from '@voltjs/volt';
375375+import { registerPlugin } from 'voltx.js';
376376+// or: import { registerPlugin } from '@voltx/core';
376377377378registerPlugin('tooltip', (ctx) => {
378379 const message = ctx.evaluate(ctx.element.getAttribute('data-volt-tooltip'));
···11# Expression Evaluation
2233-Volt.js evaluates JavaScript-like expressions in HTML templates using a sandboxed recursive descent parser.
33+VoltX.js evaluates JavaScript-like expressions in HTML templates using a sandboxed recursive descent parser.
44The evaluator is CSP-compliant and does not use `eval()` or `new Function()`.
5566## Supported Syntax
···11# Installation
2233-<!-- TODO: Figure out actual project path @voltjs/volt -->
44-55-Volt.js can be installed via CDN or package manager. Choose the method that best fits your project setup.
33+VoltX.js can be installed via CDN or package manager. Choose the method that best fits your project setup.
6475## CDN (unpkg)
8699-The simplest way to get started is loading Volt.js directly from a CDN. This approach requires no build tools and works immediately in any HTML file.
77+The simplest way to get started is loading VoltX.js directly from a CDN. This approach requires no build tools and works immediately in any HTML file.
108119### ES Modules
1210···14121513```html
1614<script type="module">
1717- import { charge, registerPlugin } from 'https://unpkg.com/@voltjs/volt@latest/dist/volt.js';
1515+ import { charge, registerPlugin } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
1816 charge();
1917</script>
2018```
···23212422```html
2523<script type="module">
2626- import { charge } from 'https://unpkg.com/@voltjs/volt@0.1.0/dist/volt.js';
2424+ import { charge } from 'https://unpkg.com/voltx.js@0.1.0/dist/volt.js';
2725 charge();
2826</script>
2927```
30283129## Package Manager
32303333-For applications using node based tools, install Volt.js via npm or similar:
3131+For applications using node based tools, install VoltX.js via npm or JSR:
3232+3333+### npm
3434+3535+```bash
3636+npm install voltx.js
3737+```
3838+3939+```bash
4040+pnpm add voltx.js
4141+```
4242+4343+### JSR (Deno, Node.js, Bun)
34443545```bash
3636-npm install @voltjs/volt
4646+npx jsr add @voltx/core
3747```
38483949```bash
4040-pnpm add @voltjs/volt
5050+deno add jsr:@voltx/core
4151```
42524353### Module Imports
···4555Import only the functions you need to minimize bundle size:
46564757```js
4848-import { charge, registerPlugin } from '@voltjs/volt';
4949-import { persistPlugin } from '@voltjs/volt/plugins';
5858+// npm
5959+import { charge, registerPlugin } from 'voltx.js';
6060+6161+// JSR
6262+import { charge, registerPlugin } from '@voltx/core';
50635164registerPlugin('persist', persistPlugin);
5265charge();
···56695770## TypeScript
58715959-Volt.js is written in TypeScript and includes complete type definitions.
7272+VoltX.js is written in TypeScript and includes complete type definitions.
60736174TypeScript users get automatic type inference for:
6275···7790<head>
7891 <meta charset="UTF-8">
7992 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8080- <title>Volt.js App</title>
9393+ <title>VoltX.js App</title>
8194</head>
8295<body>
8396 <div data-volt data-volt-state='{"count": 0}'>
···8699 </div>
8710088101 <script type="module">
8989- import { charge } from 'https://unpkg.com/@voltjs/volt@latest/dist/volt.js';
102102+ import { charge } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
90103 charge();
91104 </script>
92105</body>
···101114102115```html
103116<script type="module">
104104- import { mount, signal } from 'https://unpkg.com/@voltjs/volt@latest/dist/volt.js';
117117+ import { mount, signal } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
105118106119 const count = signal(0);
107120···120133121134```html
122135<script type="module">
123123- import { hydrate } from '@voltjs/volt';
136136+ import { hydrate } from 'voltx.js';
137137+ // or: import { hydrate } from '@voltx/core';
124138 hydrate();
125139</script>
126140```
···129143130144## Plugin Setup
131145132132-Volt.js includes several built-in plugins that must be registered before use:
146146+VoltX.js includes several built-in plugins that must be registered before use:
133147134148```html
135149<script type="module">
136136- import { charge, registerPlugin } from '@voltjs/volt';
137137- import { persistPlugin, scrollPlugin, urlPlugin } from '@voltjs/volt/plugins';
150150+ import { charge, registerPlugin, persistPlugin, scrollPlugin, urlPlugin } from 'voltx.js';
138151139152 registerPlugin('persist', persistPlugin);
140153 registerPlugin('scroll', scrollPlugin);
···148161149162## Browser Compatibility
150163151151-Volt.js requires modern browsers with support for:
164164+VoltX.js requires modern browsers with support for:
152165153166- ES2020 syntax (optional chaining, nullish coalescing)
154167- ES modules
+4-4
docs/lifecycle.md
···11# Server-Side Rendering & Lifecycle
2233-Server-Side Rendering (SSR) with Volt.js enables you to render initial HTML on the server and seamlessly hydrate it on the client without re-rendering or flash of unstyled content.
33+Server-Side Rendering (SSR) with VoltX enables you to render initial HTML on the server and seamlessly hydrate it on the client without re-rendering or flash of unstyled content.
4455## When to use SSR
66···27272828### Client-Side: Hydration
29293030-Instead of re-rendering the DOM, Volt.js "hydrates" the existing server-rendered HTML by:
3030+Instead of re-rendering the DOM, VoltX.js "hydrates" the existing server-rendered HTML by:
313132321. Reading the embedded state from the `<script>` tag
33332. Recreating reactive signals from the serialized values
···70707171### CSS-Based Hiding
72727373-Hide content until Volt.js hydrates:
7373+Hide content until VoltX.js hydrates:
74747575```html
7676<style>
···133133134134 <input type="email" name="email" required>
135135136136- <!-- Enhanced with Volt.js for client-side validation -->
136136+ <!-- Enhanced with VoltX.js for client-side validation -->
137137 <p data-volt-if="submitted" data-volt-text="'Thank you!'"></p>
138138139139 <button type="submit">Submit</button>
+1-1
docs/overview.md
···4455# Framework Overview
6677-Volt.js is a lightweight, hypermedia based reactive framework for building declarative UIs.
77+VoltX is a lightweight, hypermedia based reactive framework for building declarative UIs.
8899It combines HTML-driven behavior via `data-volt-*` attributes with signal-based reactivity.
1010
···98989999## Built-in Plugins
100100101101-Volt.js ships with three built-in plugins that must be explicitly registered.
101101+VoltX.js ships with three built-in plugins that must be explicitly registered.
102102103103### data-volt-persist
104104
+2-2
docs/state.md
···11# State Management
2233-Volt.js uses signal-based reactivity for state management. State changes automatically trigger DOM updates without virtual DOM diffing or reconciliation.
33+VoltX uses signal-based reactivity for state management. State changes automatically trigger DOM updates without virtual DOM diffing or reconciliation.
4455## Reactive Primitives
66···124124125125- Use browser DevTools to set breakpoints in signal `.set()` calls
126126- Subscribe to signals and log changes for debugging
127127-- Enable Volt.js lifecycle hooks to observe mount and binding creation
127127+- Enable VoltX.js lifecycle hooks to observe mount and binding creation
128128129129All errors in effects and subscriptions are caught and logged rather than thrown, preventing cascade failures.
+6-7
docs/usage/counter.md
···11# Building a Counter
2233-This tutorial walks through building a simple counter application to demonstrate Volt.js fundamentals: reactive state, event handling, computed values, and declarative markup.
33+This tutorial walks through building a simple counter application to demonstrate VoltX.js fundamentals: reactive state, event handling, computed values, and declarative markup.
4455## Basic Counter (Declarative)
66···1414<head>
1515 <meta charset="UTF-8">
1616 <meta name="viewport" content="width=device-width, initial-scale=1.0">
1717- <title>Counter - Volt.js</title>
1717+ <title>Counter - VoltX.js</title>
1818</head>
1919<body>
2020 <div data-volt data-volt-state='{"count": 0}'>
···2323 </div>
24242525 <script type="module">
2626- import { charge } from 'https://unpkg.com/@voltjs/volt@latest/dist/volt.js';
2626+ import { charge } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
2727 charge();
2828 </script>
2929</body>
···159159</div>
160160161161<script type="module">
162162- import { charge, registerPlugin } from 'https://unpkg.com/@voltjs/volt@latest/dist/volt.js';
163163- import { persistPlugin } from 'https://unpkg.com/@voltjs/volt@latest/dist/plugins.js';
162162+ import { charge, registerPlugin, persistPlugin } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
164163165164 registerPlugin('persist', persistPlugin);
166165 charge();
···227226228227```html
229228<script type="module">
230230- import { mount, signal, computed } from 'https://unpkg.com/@voltjs/volt@latest/dist/volt.js';
229229+ import { mount, signal, computed } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
231230232231 const count = signal(0);
233232 const message = computed(() => {
···270269271270## Summary
272271273273-This counter demonstrates core Volt.js concepts:
272272+This counter demonstrates core VoltX.js concepts:
274273275274- Reactive state with signals
276275- Event handling with `data-volt-on-*`
+6-1
lib/README.md
···11# VoltX.js
2233+> [!WARNING]
44+> VoltX.js is in active development.
55+>
66+> Breaking changes are expected until v1.0. Use in production at your own risk.
77+38A lightweight reactive framework for declarative UIs. Build interactive applications using only HTML attributes powered by signals.
49510## Features
···61666267## Documentation
63686464-Full documentation available at [your-docs-url]
6969+Full documentation available at [https://stormlightlabs.github.io/volt/](https://stormlightlabs.github.io/volt/)
65706671## License
6772