https://github.com/alien-dom/alien-dom
Next-generation JSX client renderer with observable data primitives, immediate DOM references, and more.
https://github.com/alien-dom/alien-dom
component-engine dom jsx observables
Last synced: 3 days ago
JSON representation
Next-generation JSX client renderer with observable data primitives, immediate DOM references, and more.
- Host: GitHub
- URL: https://github.com/alien-dom/alien-dom
- Owner: alien-dom
- Created: 2023-03-17T23:48:04.000Z (about 2 years ago)
- Default Branch: beta
- Last Pushed: 2024-08-28T18:03:27.000Z (8 months ago)
- Last Synced: 2025-04-07T09:04:07.938Z (28 days ago)
- Topics: component-engine, dom, jsx, observables
- Language: TypeScript
- Homepage:
- Size: 1.51 MB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# alien-dom
Component engine that feels like React but has…
- Transparent observables (implicit reactivity, _components are observers_)
- No need to explicitly wrap your components (see MobX)
- No need for weird `foo()` access patterns (see Solid.js)
- Host elements (i.e. `div`) accept observable refs as props!
- Synchronous top-down JSX evaluation (requires a compile step)
- …so stack traces aren't useless!
- …and you get DOM elements immediately! (no virtual DOM, thanks to `morphdom`)
- Automatically memoized functions and inline objects
- Automatic disposal of effects and event listeners (write less manual cleanup in `useEffect` destructors)
- Strongly typed event channels (see `defineChannel`)
- Nested components just work ™️
- Built-in niceties
- Flexible `class` prop (supports arrays and objects)
- Light-weight spring animations
- Light-weight observability engine
- jQuery-inspired DOM extensions (optional)
- A standard library of component hooks (tree-shakeable)
- Easy context forwarding
### How exactly does it "feel like React?"
The look and feel of React is preserved, including:
- Plain function components (but no component classes)
- Good ol' JSX (i.e. `
`) albeit with different evaluation semantics
- Component hooks with similar names (i.e. `useEffect`, `useMemo`, `useRef`, `useState`) albeit with different behavior (except for useEffect)
- The rules of React hooks apply to Alien DOM hooks (i.e. hooks must be called at the top level of a component) but event listeners can be attached anywhere
### Are there missing features?
As this library is in beta, there are drawbacks compared to React:
- No error boundaries (yet)
- No suspense (yet)
- No server-side rendering (yet)
- No plugin for Vite (yet)
- No concurrent mode (probably never)
### I'm ready to learn more!
- See the [Getting Started](docs/getting-started.md) page for a quick introduction.
- See the [Quirks](docs/quirks.md) page for things to keep in mind.
### Credits
These libraries contribute a ton to Alien DOM's functionality:
- we forked the awesome [jsx-dom](https://github.com/alex-kinokon/jsx-dom) package
- we forked the sublime [morphdom](https://github.com/patrick-steele-idem/morphdom) package