- Notifications
You must be signed in to change notification settings - Fork10
Server-side execution for React 🌋
calderajs/caldera-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Caldera is a server-side execution environment for React. Think of it as the Node.js analog to Phoenix LiveView —all of the application logic (including rendering) runs on the server, and DOM updates are sent to the client in real-time.
This allows developers to rapidly build interactive and multiplayer applications without developing boilerplate around RPC layers (REST/GraphQL/gRPC) and messaging primitives (WebSockets/subscriptions/etc).
Because it's built on top of the React reconciler, it's compatible with (currently, a reasonably useful subset of) the existing React API. Seewhat's currently included andwhat's to come for updates.
Runnpm install caldera to install Caldera.
A simple example (chat room) to get started:
importReact,{useState}from"react";import{renderCalderaApp,makeSharedResource,useSharedState}from"caldera";importfsfrom"fs";constDATA_PATH="messages.json";constmessagesResource=makeSharedResource(// Load initial messagesfs.existsSync(DATA_PATH) ?JSON.parse(fs.readFileSync(DATA_PATH,"utf-8")) :[]);constusePersistedMessages=()=>{// Basic shared state, synced with all clientsconst[messages,setMessages]=useSharedState(messagesResource);return[messages,// Persist to disk (in prod, use a database)(newMessages)=>{setMessages(newMessages);fs.writeFileSync(DATA_PATH,JSON.stringify(newMessages));},];};constApp=()=>{const[messages,setMessages]=usePersistedMessages();// local state, persisted across client reconnectsconst[draftMsg,setDraftMsg]=useState("");return(<><h1>Chat Room!</h1>{messages.map((message,i)=>(<divkey={i}>{message}</div>))}<formonSubmit={(e)=>{e.preventDefault();setMessages([...messages,draftMsg]);setDraftMsg("");}}><inputtype="text"value={draftMsg}onChange={(e)=>setDraftMsg(e.target.value)}/><buttontype="submit">Submit</button></form></>);};renderCalderaApp(<App/>,{port:4000});
Install Babel by runningnpm install @babel/core @babel/node @babel/preset-react.
Then, run the app usingbabel-node --presets @babel/preset-react index.jsx. For a runnable version, check thebasic-example folder.
A few other exampleshere demonstrate features like shared state, database usage, and session persistence.
[Work in progress]
Thecaldera package provides the following top-level exports:
Head: A React component that renders its children into the page's<head />renderCalderaApp: A function that takes in a React element, and runs the Caldera server on port 8080makeSharedResource: Creates a shared resource suitable for use inuseSharedStateanduseSharedReduceruseSharedState/useSharedReducer: Shared equivalents to theuseStateanduseReducerhooks that are initialized with the current value of the passed in resource, and trigger rerenders in all other call sites upon updatinguseHistory/useLocation- hooks that enable routing functionality
- Basic form inputs (text fields/areas, checkboxes, selects, radio buttons)
- Basic event listeners (onclick/onchange/onsubmit/onfocus/onblur/keyevents)
- CSS and other head tags (via
<Head />) - Basic input reconciliation (currently implemented via debounce)
- Shared state and reducer hooks
- State serialization and restore + state "forking" whenever a user opens a new client
- More events (ondragstart, intersection observers)
<input type="file">support- Better, diff-based input reconciliation
- Proper versioning for state serialization
- This will allow support for upgrading the server in-place, while retaining certain parts of the client state
- Support for selectively rendering arbitrary React components on the client
About
Server-side execution for React 🌋
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.