Gea Framework Documentation

Gea is a compiler-first reactive UI framework that avoids the Virtual DOM in favor of surgical DOM patching.

Key characteristics:

• No Virtual DOM: The Vite plugin analyzes JSX at build time to generate targeted DOM patches.
• Proxy-based Reactivity: You mutate state directly (e.g., this.count++) using standard JavaScript, and the framework automatically updates the DOM.
• Just JavaScript: It uses standard classes, functions, objects, and getters instead of framework-specific primitives like signals or hooks.
• Minimal Runtime: A basic hello-world app can ship as little as 121 B (brotli).

The @geajs/mobile package provides several specialized components for mobile interfaces:

• View: A full-screen component that supports transitions.
• ViewManager: A navigation stack that handles push/pull transitions.
• GestureHandler: Handles touch gesture recognition (tap, swipe, long tap).
• Sidebar: A slide-out navigation panel.
• TabView: Enables tab-based view switching.
• NavBar: A top navigation bar.
• PullToRefresh: Implements the pull-down-to-refresh pattern.
• InfiniteScroll: Implements the load-more-on-scroll pattern.

Gea is a compiler-first reactive JavaScript UI framework designed for minimal runtime overhead. Unlike frameworks that use a Virtual DOM, Gea compiles JSX into efficient HTML string templates at build time and uses deep proxies to track state changes. It then patches only the specific DOM nodes that depend on the changed data, avoiding reconciliation overhead.

Key characteristics include:

• Near-zero baseline: A hello-world app ships as little as 121 B (Brotli).
• Proxy-based reactivity: Mutate state directly and the framework handles updates automatically.
• No framework-specific syntax: It uses standard JavaScript (classes, functions, getters, .map(), and ternaries) instead of signals, hooks, or compiler directives.

The Jira Clone example demonstrates the following technologies used in Gea development:

• @geajs/core: Provides the foundation for reactive components and stores.
• @geajs/ui: A library of pre-built UI primitives such as Dialog, Button, and Avatar.
• Vite: Used for the development server and build tooling, integrated via @geajs/vite-plugin.
• Tailwind CSS: Used for utility-first styling.

For complex applications, split state into domain-specific stores instead of one massive store. Each store should be an independent singleton. Stores can import and interact with each other by calling methods on their respective singleton instances.

import { Store } from '@geajs/core'
import optionsStore from './options-store'
import paymentStore from './payment-store'

class FlightStore extends Store {
  step = 1
  boardingPass = null

  startOver() {
    this.step = 1
    this.boardingPass = null
    optionsStore.reset()
    paymentStore.reset()
  }
}

export default new FlightStore()

Gea uses a proxy-based reactivity model that follows standard JavaScript patterns:

• State Mutation: Mutate state directly; the framework detects the change and updates the DOM.
• Computed Values: Use standard JavaScript getters for computed values.
• Props: Objects and arrays passed as props are the parent's reactive proxy. If a child mutates these, the parent is also updated. Primitives are passed as copies.
• No specialized syntax: There are no emit calls or v-model directives; data flows through standard JS object manipulation.

The geaSSR Vite plugin is intended for development only.

For production environments, you should build the client and server separately, and then use createNodeHandler from @geajs/ssr/node to serve the application.

The ViewManager supports a sidebar that can be toggled via vm.toggleSidebar().

To ensure a view correctly supports sidebar reveal (e.g., via swipe gestures), set the hasSidebar property to true on that view.

vm.toggleSidebar()

Use standard JavaScript getters on Store classes to create derived state. The Gea Vite plugin automatically tracks which state paths are read within the template() and triggers updates when those paths change.

class TodoStore extends Store {
  todos = []
  filter = 'all'

  get filteredTodos() {
    const { todos, filter } = this
    if (filter === 'active') return todos.filter(t => !t.done)
    if (filter === 'completed') return todos.filter(t => t.done)
    return todos
  }

  get activeCount() {
    return this.todos.filter(t => !t.done).length
  }
}

In Gea, use standard TypeScript/JavaScript get syntax on your Store classes to create derived state. These getters re-evaluate on every access. Because the Gea Vite plugin tracks which state paths are accessed during template execution, changes to the underlying data will automatically trigger a template update, which in turn re-calls the getter to fetch the fresh value.

import { Store } from '@geajs/core'

class TodoStore extends Store {
  todos = []
  filter = 'all'

  get filteredTodos() {
    const { todos, filter } = this
    if (filter === 'active') return todos.filter(t => !t.done)
    if (filter === 'completed') return todos.filter(t => t.done)
    return todos
  }
}