Skip to content
Merged
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
95db6ce
Updated CHANGELOG and package.json
hexplus Mar 28, 2026
56080d8
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 28, 2026
7eeec49
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 28, 2026
14a9cd4
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
9487727
ci: use npm install instead of npm ci
hexplus Mar 29, 2026
6b4bd83
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
0b9a0cc
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
0777184
trusted-publisher
hexplus Mar 29, 2026
4d46e82
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
bea9788
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
825a8dc
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
55c4436
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
0d2c7e0
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
8da81e8
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
325ce5d
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Mar 29, 2026
0cad329
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 1, 2026
aea6787
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 4, 2026
00e5e88
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 7, 2026
b10a2c5
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 7, 2026
639eae0
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 9, 2026
405e4fe
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 11, 2026
ee7cf48
Updated main
hexplus Apr 11, 2026
8c77fca
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 11, 2026
da6d752
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 11, 2026
c047837
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 12, 2026
a52fffc
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 12, 2026
43b5675
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 14, 2026
44df880
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 18, 2026
aba311a
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 19, 2026
4bf3286
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Apr 19, 2026
a086428
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus May 29, 2026
e316ae0
Missing update package.json
hexplus May 29, 2026
278bfc6
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus May 29, 2026
08bc9b8
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 1, 2026
7b5557d
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 5, 2026
226ae51
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 5, 2026
0d5c8de
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 12, 2026
b0053ef
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 12, 2026
1b60022
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
24659ad
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
539f29a
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
1f9c493
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
9c4213c
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
f037b5d
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
830bc82
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jun 26, 2026
10a0184
Merge branch 'main' of https://github.com/hexplus/SibuJS
hexplus Jul 8, 2026
d4f840d
Updated README
hexplus Jul 8, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 107 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ A lightweight, function-based frontend framework with fine-grained reactivity, d

## Why SibuJS?

- **Zero VDOM:** Updates only what changes, directly in the DOM.
- **Function-Based:** Components are just plain functions. No classes, no complex life cycles.
- **Fine-Grained Reactivity:** Powered by lightweight signals.
- **No Build Step Required:** Works natively in the browser, but includes a Vite plugin for advanced optimizations.
- **Modular & Lean:** Core is minimal; features like Router and i18n are optional plugins.
- **Zero VDOM:** Signals bind straight to the DOM, so only the exact node that changed updates — no diffing, no reconciliation.
- **Function-Based:** Components are plain functions returning nodes. No classes, no hooks rules, no compiler-only syntax.
- **Fine-Grained Reactivity:** `signal`, `derived`, and `effect` track dependencies automatically and update at the value level.
- **No Build Step Required:** Runs natively in the browser (or via a `<script>` tag), with an optional Vite plugin for template compilation and other build-time optimizations.
- **Modular & Lean:** The core stays small; every advanced capability ships as a tree-shakeable subpath import, so you pay only for what you use.
- **Full-Featured:** When you need more, it's already there — router, i18n, SSR with streaming and hydration, islands & progressive enhancement, data fetching, state machines, and reactive wrappers for dozens of browser APIs.
- **TypeScript-First:** Written in TypeScript with typed props for common elements and full type inference across signals and components.

## Quick Start

Expand Down Expand Up @@ -90,15 +92,107 @@ For full documentation, guides, and advanced examples, visit our official websit

---

## Features at a Glance
## Core (`sibujs`)

The lean core: reactivity, rendering, and components. Everything below imports from the root.

### Reactivity
- **`signal`** — reactive value returned as a `[get, set]` tuple; reads inside effects auto-track.
- **`derived`** — memoized value computed from other signals.
- **`asyncDerived`** — derived value from an async computation, with loading/error state.
- **`effect`** — run a side effect whenever its tracked dependencies change.
- **`watch`** — observe specific sources and react to their new/old values.
- **`batch`** — group multiple updates into a single flush.
- **`untracked` / `retrack`** — read signals without subscribing, or re-enable tracking.
- **`store`** — simple keyed state container.
- **`deepSignal`** — deep reactive proxy over nested objects/arrays.
- **`reactiveArray`** — reactive array with fine-grained item tracking.
- **`writable`** — writable derived (two-way computed).
- **`ref`** — hold a DOM element or mutable value.
- **`nextTick`** — await the next reactive flush.

### Rendering & Control Flow
- **HTML/SVG tag factories** — `div`, `span`, `button`, … and SVG tags with the correct namespace.
- **`mount`** — render a component into a DOM node.
- **`html`** — tagged-template authoring (compiler-free, legacy-friendly).
- **`when`** — conditionally swap subtrees; **`show`** — toggle visibility without unmounting.
- **`each`** — efficient keyed list rendering (LIS-based diffing).
- **`match`** — pattern-matching over a value to pick a branch.
- **`Fragment`** — group children without a wrapper element.
- **`Portal`** — render a subtree elsewhere in the DOM.
- **`DynamicComponent`** — render a component chosen at runtime.
- **`lazy` / `Suspense`** — code-split async components with a fallback.
- **`slot` / `getSlot`** — named content slots.
- **`KeepAlive`** — cache and preserve unmounted subtrees.
- **Directives** — `clickOutside`, `longPress`, `copyOnClick`, `autoResize`, `trapFocus`.
- **`action`** — register reusable element behaviors.

### Components & Lifecycle
- **Functional components** — plain functions returning nodes.
- **Lifecycle** — `onMount`, `onUnmount`, `onCleanup`.
- **`context`** — dependency injection down the tree.
- **`ErrorBoundary` / `ErrorDisplay`** — catch and render render-time errors.
- **`Loading`** — standard loading placeholder.
- **`catchError` / `catchErrorAsync`** — scoped error handling helpers.

### Islands & Progressive Enhancement
- **`enhance` / `enhanceAll`** — attach fine-grained reactivity to existing server-rendered HTML with no build step (the third rendering mode alongside `mount` and `hydrate`).
- **`island` / `registerIsland` / `hydrateIslands`** — hydrate isolated interactive regions on demand.

- **Reactivity:** `signal`, `effect`, `derived`, `watch`, `batch`.
- **Components:** Functional, reusable, and lifecycle-aware (`onMount`, `onUnmount`).
- **Control Flow:** `when` (conditional swaps), `each` (efficient keyed lists), `match` (pattern matching), `show` (toggle visibility).
- **DOM Utilities:** `Portal` (render out-of-tree), `Fragment` (group children), `Suspense` & `lazy` (async components), `ErrorBoundary`.
- **State Management:** `store` (simple state containers), `deepSignal` (object proxies), `ref`.
- **Performance:** Zero VDOM overhead, LIS-based list diffing, and optional template compilation.
- **Plugins:** Official Router (nested routes, guards), i18n (reactive translations), logic patterns (Finite State Machines).
---

## Subpath Modules

Import advanced features from focused entry points for optimal tree-shaking. `sibujs/extras` re-exports all of them for convenience.

### `sibujs/data` — Data fetching & realtime
`query` (cached async fetching), `mutation`, `infiniteQuery`, `resource`, `routeLoader`, `offlineStore`, `retry`, `debounce`, `throttle`, `previous`, plus `socket` and `stream` for realtime connections.

### `sibujs/browser` — Reactive browser APIs
Reactive wrappers for `media` queries, `resize`, `scroll`, `online`/`network`, `geo`, `battery`, `idle`, `permissions`, `clipboard`, `dragDrop`, `title`/`favicon`, `colorScheme`, `visibility`, `mouse`/`swipe`, `windowSize`, `urlState`, `broadcast`, `fullscreen`, `wakeLock`, `animationFrame`, `mutationObserver`, `bounds`, `keyboard`, `speech`, `gamepad`, `pointerLock`, `vibrate`, `textSelection`, `imageLoader`, and `format`.

### `sibujs/ui` — UI utilities
`form` & `formAction` (validation/binding), `virtualList`, `intersection`, `inputMask`, `a11y` / `a11yPrimitives`, `scopedStyle`, `reactiveAttr`, `dialog`, `toast`, `infiniteScroll`, `pagination`, `eventBus`, `timers`, `hover`, `scrollLock`, `lazyEffect`, plus composable/HOC patterns.

### `sibujs/widgets` — Pre-built components
Accessible `Combobox`, `Tabs`, `Accordion`, `Popover`, `Select`, `Tooltip`, `FileUpload`, `contentEditable`, and `datePicker`.

### `sibujs/motion` — Transitions & animation
`transition`, `TransitionGroup`, `animationPresets`, `viewTransition`, `springSignal`, and `reducedMotion`.

### `sibujs/patterns` — State & component patterns
`machine` (finite state machines), `persist`, `optimistic`, `timeTravel`, `globalStore`; plus `hoc`, `composable`, `componentProps`, and `contracts`.

### `sibujs/plugins` — First-party plugins
**Router** — `createRouter`, `Route`/`Outlet`/`RouterLink`, nested routes, guards (`beforeEach`, `beforeResolve`, `afterEach`), programmatic navigation, `preloadRoute`, memory router, and per-route transitions. **i18n** — `setLocale`, `t`, `Trans`, `registerTranslations`, reactive locale switching. Plus the plugin system (`modular`, `ecosystem`, `versioning`, `startup`).

### `sibujs/ssr` — Server rendering
`renderToString`, `renderToReadableStream`, `renderToDocument`, `hydrate`, streaming `Suspense`, `head` management, static site generation, incremental regeneration, route actions/middleware, scroll restoration, service worker & web/wasm workers, and microfrontend helpers.

### `sibujs/performance` — Scheduling & optimization
Concurrent rendering (`startTransition`, `scheduleUpdate`), cooperative `scheduler`, `domRecycler`, `compiled` templates, `chunkLoader`, `bundleOptimize`, and `normalize`.

### `sibujs/devtools` — Developer tools
`debug`, `debugValue`, `componentProfiler`, `signalGraph`, `introspect`, `devtoolsOverlay`, HMR support, and source maps.

### `sibujs/build` — Build tooling
Bundler plugins (`vite`, `webpack`), template compilation, route splitting, static analysis, linting, `.d.ts` declaration generation, CDN helpers, and IDE integration.

### `sibujs/ecosystem` — Adapters
Adapters bridging third-party state managers (e.g. Redux, MobX) and UI component libraries.

### `sibujs/testing` — Test helpers
Utilities for testing components and reactivity.

### `sibujs/cdn` — Script-tag bundle
Self-registering IIFE build exposing `window.Sibu`, for use without a bundler.

```html
<script src="https://unpkg.com/sibujs@latest/dist/sibu.global.js"></script>
<script>
const { signal, effect, div, mount } = window.Sibu;
</script>
```

---

Expand Down
Loading