Alef Component for Modern Web Apps, it's inspired by React and Svelte and based on TSX. Core features include:
- Born in Typescript
- With Standard JSX Syntax
- AOT Compile in Rust
- Zero Runtime
- No Virtual DOM
- Reactive
- Builtin Styling
- SSR
The main concept of Alef Component is parted in three stages:
- Stage 1 (Docs)
- Nodes Rendering - render nodes using native DOM
- Conditional Rendering - render if-else expression in JSX
- Loop Rendering - render list
- Memo - use computed state
- Side Effect - react for state changes
- Events - handle events to update view
- Stage 2 (Docs)
- Import Alef Component -
import Logo from "./Logo.alef" - Slots -
<Logo><img ... /></Logo> - Reuse Pattern - reuse common logics
- Inline Component - define component in Alef Component
- Context - share state in child component tree
- Styling - inline CSS with scope
- Transition - transition animation for view changes
- Asynchronous Component - wait for data fetching
- Error Boundary - catch errors in child component tree
- Import Alef Component -
- Stage 3 (Docs)
- Mount - mount Alef Component to DOM
- SSR - server side rendering
- Precompile - transfom Alef Component code before AOT compilation
- Hot Refresh - refresh component without data losing
Core concept is done, currently writing the MVP compiler.