A lightweight, Signal-driven JSX web application framework
Airx is a modern frontend framework built on JSX and Signal primitives, designed to provide a simple, performant, and intuitive solution for building reactive web applications.
- 🔄 Signal-driven reactivity: Seamlessly integrates with TC39 Signal proposal
- 📝 TypeScript-first: Developed entirely in TypeScript with excellent type safety
- ⚡ Functional components: Define components using clean JSX functional syntax
- 🚫 No hooks complexity: Simple and straightforward API without React-style hooks
- 🪶 Lightweight: Minimal bundle size with zero dependencies
- 🔌 Extensible: Plugin system for advanced functionality
- 🌐 Universal: Works in both browser and server environments
npm install airx
# or
yarn add airx
# or
pnpm add airximport * as airx from 'airx'
import { Signal } from 'signal-polyfill'
// Create reactive state using Signal
const count = new Signal.State(0)
const doubleCount = new Signal.Computed(() => count.get() * 2)
function Counter() {
const localState = new Signal.State(0)
const increment = () => {
count.set(count.get() + 1)
localState.set(localState.get() + 1)
}
// Return a render function
return () => (
<div>
<h1>Counter App</h1>
<p>Global count: {count.get()}</p>
<p>Double count: {doubleCount.get()}</p>
<p>Local count: {localState.get()}</p>
<button onClick={increment}>
Click me!
</button>
</div>
)
}
// Create and mount the app
const app = airx.createApp(<Counter />)
app.mount(document.getElementById('app'))Airx supports server-side rendering (SSR) out of the box. SSR allows you to render your components to HTML strings on the server, which can improve initial page load performance and SEO.
📦 SSR APIs (
createSSRApp,hydrate,renderToString) are available via theairx/serversubpath export:import { createSSRApp, hydrate, renderToString } from 'airx/server'
import * as airx from 'airx'
// Create an SSR app
const app = airx.createSSRApp(<MyComponent />)
// Render to HTML string
const html = await app.renderToString()
// html === '<div><h1>Hello World</h1></div>'import { createSSRApp } from 'airx/server'
// Define a component
function UserCard({ name, email }: { name: string; email: string }) {
return () => (
<div className="user-card">
<h2>{name}</h2>
<p>{email}</p>
</div>
)
}
// Server-side rendering
async function renderPage() {
const app = createSSRApp(
<UserCard name="Alice" email="alice@example.com" />
)
const html = await app.renderToString()
console.log(html)
// <div class="user-card"><h2>Alice</h2><p>alice@example.com</p></div>
return html
}✅ Hydration is stable in 0.8.0+ for activating server-rendered HTML on the client.
import { createSSRApp, hydrate } from 'airx/server'
// Server: render HTML
const app = createSSRApp(<App />)
const ssrHtml = await app.renderToString()
// Send ssrHtml to client...
// Client: activate SSR HTML
const container = document.getElementById('app')
if (container) {
container.innerHTML = ssrHtml
hydrate(ssrHtml, container, app)
// App is now interactive!
}Creates an SSR application instance for server-side rendering.
const app = airx.createSSRApp(<MyComponent />)Renders an SSR app to an HTML string (returns a Promise).
const html = await app.renderToString()Activates server-rendered HTML on the client for interactive updates.
const hydrated = hydrate(<App />, container, {
stateSnapshot, // optional: Signal state from SSR
forceReset: false // optional: skip SSR state, recalculate from scratch
})
// hydrated.unmount() - cleanup functionComponents in Airx are simple functions that return a render function:
function MyComponent() {
const state = new Signal.State('Hello')
return () => (
<div>{state.get()} World!</div>
)
}Airx leverages the Signal primitive for reactive state management:
// State
const count = new Signal.State(0)
// Computed values
const isEven = new Signal.Computed(() => count.get() % 2 === 0)
// Effects
const effect = new Signal.Effect(() => {
console.log('Count changed:', count.get())
})const ThemeContext = Symbol('theme')
function App() {
// Provide values down the component tree
airx.provide(ThemeContext, 'dark')
return () => <Child />
}
function Child() {
// Inject values from parent components
const theme = airx.inject(ThemeContext)
return () => (
<div className={`theme-${theme}`}>
Current theme: {theme}
</div>
)
}function Component() {
airx.onMounted(() => {
console.log('Component mounted')
// Return cleanup function
return () => {
console.log('Component unmounted')
}
})
airx.onUnmounted(() => {
console.log('Component will unmount')
})
return () => <div>My Component</div>
}
## 📚 API Reference
Airx follows a minimal API design philosophy. Here are the core APIs:
### `createApp(element)`
Creates an application instance.
```tsx
const app = airx.createApp(<App />)
app.mount(document.getElementById('root'))Provides a value down the component tree through context. Must be called synchronously within a component.
function Parent() {
airx.provide('theme', 'dark')
return () => <Child />
}Retrieves a provided value from the component tree. Must be called synchronously within a component.
function Child() {
const theme = airx.inject('theme')
return () => <div>Theme: {theme}</div>
}Registers a callback for when the component is mounted to the DOM.
type MountedListener = () => (() => void) | void
airx.onMounted(() => {
console.log('Mounted!')
return () => console.log('Cleanup')
})Registers a callback for when the component is unmounted from the DOM.
type UnmountedListener = () => void
airx.onUnmounted(() => {
console.log('Unmounted!')
})Creates virtual DOM elements (usually handled by JSX transpiler).
A component for grouping multiple elements without adding extra DOM nodes.
function App() {
return () => (
<airx.Fragment>
<div>First</div>
<div>Second</div>
</airx.Fragment>
)
}A component that catches JavaScript errors in child components and displays a fallback UI.
import { ErrorBoundary } from 'airx'
function App() {
return (
<ErrorBoundary fallback={(error) => <div>Error: {error.message}</div>}>
<Child />
</ErrorBoundary>
)
}# Clone the repository
git clone https://github.com/airxjs/airx.git
cd airx
# Install dependencies
npm install
# Build the project
npm run build
# Run tests
npm test
# Run tests with UI
npm run test:ui
# Run tests with coverage
npm run test:coveragesource/
├── app/ # Application creation and management
├── element/ # Virtual DOM and JSX handling
├── logger/ # Internal logging utilities
├── render/ # Rendering engine
│ ├── basic/ # Core rendering logic
│ ├── browser/ # Browser-specific rendering
│ └── server/ # Server-side rendering
├── signal/ # Signal integration
├── symbol/ # Internal symbols
└── types/ # TypeScript type definitions
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Add tests for your changes
- Ensure all tests pass (
npm test) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Airx 0.9.0 is compatible with the following ecosystem packages:
| Package | Version | Peer Dependency |
|---|---|---|
| airx-router | 0.9.0 | airx: ^0.9.0 |
| vite-plugin-airx | 0.9.0 | airx: ^0.9.0 |
Note: Previous versions of ecosystem packages (≤0.7.x) specified airx: ^0.7.1 as peer dependency. When upgrading to airx 0.9.0, please also upgrade ecosystem packages to their 0.9.0 versions.
# Install airx 0.9.0 with compatible ecosystem packages
npm install airx airx-router vite-plugin-airxThis project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to all contributors and supporters of the Airx project
- Inspired by the TC39 Signal proposal
- Built with ❤️ by the Airx community
Made with ☁️ by the Airx team