[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93026":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":13,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":15,"rankGlobal":10,"rankLanguage":10,"license":16,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":17,"hasPages":17,"topics":19,"createdAt":10,"pushedAt":10,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":14,"starSnapshotCount":14,"syncStatus":23,"lastSyncTime":24,"discoverSource":25},93026,"octane","octanejs\u002Foctane","octanejs","Octane is an incredibly efficient React replacement UI library with improved developer ergonomics","https:\u002F\u002Foctanejs.dev",null,"TypeScript",53,1,0,41,"MIT License",false,"main",[],"2026-07-22 04:02:07","\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003C!-- white wordmark in dark mode, black wordmark in light mode -->\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Ficon.svg\">\n    \u003Cimg alt=\"Octane\" src=\".\u002Ficon-black.svg\" width=\"320\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Foctanejs\u002Foctane\u002Factions\u002Fworkflows\u002Fci.yml\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Foctanejs\u002Foctane\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg\" alt=\"CI\">\u003C\u002Fa>\n  \u003Ca href=\"#status\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstatus-alpha-orange\" alt=\"status: alpha\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Foctane\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Foctane?logo=npm\" alt=\"npm version\">\u003C\u002Fa>\n  \u003Ca href=\"LICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue\" alt=\"License: MIT\">\u003C\u002Fa>\n\u003C\u002Fp>\n\nOctane is a fast, TypeScript-first UI framework — the successor to\n[Inferno](https:\u002F\u002Fgithub.com\u002Finfernojs\u002Finferno), the React-like library built to\nstay close to the speed of hand-written DOM code. Octane keeps that goal and\nmodernizes everything around it: you write with the React API you already know,\nbut a compiler does most of the framework's work ahead of time, so there is far\nless left to do when the page actually loads.\n\nIf you know React, you already know Octane. `useState`, `useEffect`, `memo`,\ncontext, portals, Suspense, transitions — same API, same mental model, checked\nthe boring way against 2,200+ conformance tests lifted straight from\n`facebook\u002Freact`. Your React knowledge just works.\n\nSpeed was never going to be enough on its own, though. The reason to reach for\nOctane is the day-to-day feel:\n\n- **Write the JSX you already write.** Standard `.tsx`\u002F`.jsx` runs out of the\n  box — paste a component from the React docs and it works, hooks and all.\n- **Or opt into `.tsrx` for more.** TSRX is the spiritual successor to JSX: the\n  same mental model, plus template directives (`@if`, `@for`, `@switch`, `@try`)\n  that compile to keyed fast paths, and an `@{ … }` shorthand that lets setup sit\n  right next to the output. Mix both dialects in one app and import freely across\n  the boundary — you choose per component.\n- **No rules of hooks.** Hooks are tracked by call site, not call order, so a\n  hook can live inside an `if` or after an early return — the usual React\n  footguns simply aren't there. The one rule that remains is enforced for you:\n  a hook in a plain JS loop is a compile error (every iteration would share one\n  call-site slot) — loop with the keyed `@for` directive instead, where each\n  item gets its own hook state.\n- **The platform, not a reimplementation of it.** Real delegated DOM events,\n  controlled form components on native events (React's `value`\u002F`checked`\n  semantics — `onInput` per keystroke, no synthetic `onChange`), and\n  refs-as-props (`ref={cb}`, `ref={obj}`, even `ref={[a, b]}`) — no synthetic\n  layer second-guessing the browser.\n- **No virtual DOM.** Components re-render like React, but a compiled render path\n  and a LIS-based keyed reconciler keep the runtime overhead minimal.\n\nCreated by [Dominic Gannaway](https:\u002F\u002Fgithub.com\u002Ftrueadm), who also created\nInferno and has worked on React, Lexical, Ripple, and Svelte.\n\n## Status\n\nOctane is currently in alpha development.\n\n## At a glance\n\n- **The full React hook API** — `useState`, `useEffect`, `useMemo`, `useRef`,\n  `useId`, `useTransition`, `useDeferredValue`, `use`, and the rest — with the\n  same effect ordering and Suspense semantics.\n- **Fully async** — transitions, deferred values, and `\u003CActivity>`.\n- **Streaming SSR and byte-stable hydration** — out-of-order Suspense flushing\n  over Node or web streams, or buffered\u002Fstatic rendering when you want it.\n- **Errors handled two ways** — the `\u003CErrorBoundary>` component, or `@try` \u002F\n  `@catch` in TSRX.\n- **`class` \u002F `className` composes clsx-style** everywhere — strings, arrays,\n  objects, and nesting, at every apply site.\n- **Refs as props**, including array composition (`ref={[a, b]}`) — no\n  `forwardRef`. Works with spreads, SSR, and hydration.\n- **Controlled form components on native events** — `value`\u002F`checked` follow\n  React's controlled semantics exactly; `defaultValue`\u002F`defaultChecked` opt out.\n  The per-keystroke handler is the native `onInput` (no synthetic `onChange`).\n\nOctane is deliberately narrow where React has grown wide: **no class components,\nno Server Components, no synthetic event system.** Those are choices, not gaps —\nsee [Differences from React](https:\u002F\u002Foctanejs.dev\u002Fdocs\u002Fdifferences-from-react).\n\n## Quick start\n\n### Install\n\n```bash\npnpm add octane @octanejs\u002Fvite-plugin\n```\n\nAdd the plugin to your Vite config:\n\n```ts\n\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite';\nimport { octane } from 'octane\u002Fcompiler\u002Fvite';\n\nexport default defineConfig({\n  plugins: [octane()],\n});\n```\n\n`@octanejs\u002Fvite-plugin` is the optional metaframework (dev SSR, routing, hydrate). For\na plain SPA you only need the `octane()` compiler plugin shown above.\n\n### Mount\n\n```ts\n\u002F\u002F main.ts\nimport { createRoot } from 'octane';\nimport { App } from '.\u002FApp.tsrx';\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render(App, { title: 'Hello world!' });\n```\n\n### Server render and hydrate\n\nOctane's SSR entry points mirror React's, so this maps onto what you already do.\n`octane\u002Fserver` is the request-time renderer (React's `react-dom\u002Fserver`) — pick\nbuffered (`renderToString`) or streaming (`renderToPipeableStream` \u002F\n`renderToReadableStream`); `octane\u002Fstatic` is the static-generation renderer\n(`react-dom\u002Fstatic`). Buffered renders hand back `{ html, css }` — hoisted\n`\u003Ctitle>`\u002F`\u003Cmeta>`\u002F`\u003Clink>` fold into `html` (as in React 19), and `css` is the\ndeduped scoped-`\u003Cstyle>` tags, which the client's `injectStyle` matches on\nhydration so styles cross the boundary exactly once.\n\n```ts\n\u002F\u002F entry-server.ts\nimport { renderToString } from 'octane\u002Fserver'; \u002F\u002F sync; fallbacks for suspended boundaries\nimport { prerender } from 'octane\u002Fstatic'; \u002F\u002F async; awaits all Suspense data\nimport { App } from '.\u002FApp.tsrx';\n\nexport async function renderApp() {\n  const { html, css } = await prerender(App); \u002F\u002F { html, css }\n  return { html, css };\n}\n```\n\n| API | Module | Await | Suspense boundary that suspends |\n| --- | --- | --- | --- |\n| `renderToString(el, props?, opts?)` | `octane\u002Fserver` | no (sync) | renders its `@pending` fallback |\n| `renderToStaticMarkup(el, props?, opts?)` | `octane\u002Fserver` | no (sync) | fallback; **no** hydration markers\u002Fseeds |\n| `renderToPipeableStream(el, props?, opts?)` | `octane\u002Fserver` | streams | shell ships the fallback; boundary streams in when it settles |\n| `renderToReadableStream(el, props?, opts?)` | `octane\u002Fserver` | streams | shell ships the fallback; boundary streams in when it settles |\n| `prerender(el, props?, opts?)` | `octane\u002Fstatic` | yes | awaits data, renders the success arm |\n\nThe buffered\u002Fstatic renderers accept a `RenderOptions` (CSP `nonce`, an\n`AbortSignal`, a per-render `timeoutMs`). See [docs\u002Fssr.md](.\u002Fdocs\u002Fssr.md) for the\nfull server guide (Suspense on the server, head hoisting, `module server` RPC) and\nthe SSR roadmap.\n\n### Streaming SSR\n\nThis is the fast-first-paint story, and it works the way React's does.\n`renderToPipeableStream` (Node streams) and `renderToReadableStream` (web streams)\nflush a **shell** immediately — the full page, with `@pending` fallbacks standing\nin for anything still suspended — so the browser paints without waiting on your\nslowest data. Each Suspense boundary then streams in **out of order** the moment\nits data settles, as a hidden segment plus a tiny inline swap script. When the\nclient hydrates, `hydrateRoot` adopts the swapped-in DOM byte-for-byte, per-boundary\n`use()` seeds included — no re-render, no flash.\n\n```ts\n\u002F\u002F entry-server.ts (Node)\nimport { renderToPipeableStream } from 'octane\u002Fserver';\nimport { App } from '.\u002FApp.tsrx';\n\nexport function renderApp(res) {\n  const { pipe } = renderToPipeableStream(App, undefined, {\n    onShellReady() {\n      res.statusCode = 200;\n      res.setHeader('content-type', 'text\u002Fhtml');\n      pipe(res); \u002F\u002F shell flushes now; boundaries stream in behind it\n    },\n    onShellError(err) {\n      res.statusCode = 500;\n      res.end('\u003C!doctype html>Server error');\n    },\n  });\n}\n```\n\n`renderToReadableStream` returns a `Promise\u003CReadableStream\u003CUint8Array>>` that\nresolves once the shell is ready (rejects on a shell error); the stream carries an\n`allReady` promise that settles when every boundary has flushed. Both accept a\n`StreamOptions` (`RenderOptions` plus `onShellReady()`, `onShellError(err)`, and\n`onAllReady()`). `@octanejs\u002Fvite-plugin` renders through `renderToReadableStream`\nby default.\n\n```ts\n\u002F\u002F entry-client.ts\nimport { hydrateRoot } from 'octane';\nimport { App } from '.\u002FApp.tsrx';\n\nhydrateRoot(document.getElementById('app')!, App);\n```\n\n## Core syntax\n\n### Components\n\nA component is any function you use at a `\u003CFoo\u002F>` site — there's no separate\n\"component\" declaration. A function renders whatever it returns: a JSX root, a\nprimitive (coerced to text), `null`, or an array. `@{ … }` is simply shorthand\nfor returning JSX — `function f() @{ … }` desugars to `function f() { … return\n\u003Cjsx> }` — so hooks and locals can sit next to the output (the `@{ … }` scope ends\nwith one output node, a JSX element or a fragment). Both forms compile\nidentically, and any function can use either.\n\n```jsx\nimport { useState } from 'octane';\n\nexport function Counter() @{\n  const [count, setCount] = useState(0);\n\n  \u003Cbutton onClick={() => setCount(count + 1)}>\n    {'Count: ' + count}\n  \u003C\u002Fbutton>\n}\n```\n\nThe same component written with an explicit `return` is identical — and a\nfunction is free to return a non-JSX value, which is coerced like any renderable:\n\n```jsx\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return \u003Cbutton onClick={() => setCount(count + 1)}>{'Count: ' + count}\u003C\u002Fbutton>;\n}\n\nfunction Label(props) {\n  if (props.hidden) return null; \u002F\u002F renders nothing\n  return props.text; \u002F\u002F a string renders as text\n}\n```\n\n### State and effects\n\n```jsx\nimport { useState, useEffect } from 'octane';\n\nexport function Timer() @{\n  const [seconds, setSeconds] = useState(0);\n\n  useEffect(() => {\n    const id = setInterval(() => setSeconds((s) => s + 1), 1000);\n    return () => clearInterval(id);\n  }, []);\n\n  \u003Cp>{'Elapsed: ' + seconds}\u003C\u002Fp>\n}\n```\n\n### Conditional hooks\n\nUnlike React, a hook can sit behind a guard or after an early `return`:\n\n```jsx\nimport { useState, useEffect } from 'octane';\n\nexport function Panel(props) @{\n  const [n, setN] = useState(0);\n\n  \u002F\u002F An early return before a hook is fine in octane. Each hook call site has a\n  \u002F\u002F stable compiler-assigned slot, so render order can't desync the hooks.\n  if (props.hidden) return;\n\n  useEffect(() => {\n    console.log('n changed:', n);\n  }, [n]);\n\n  \u003Cbutton onClick={() => setN(n + 1)}>{'count: ' + n}\u003C\u002Fbutton>\n}\n```\n\n### Control flow\n\nRendered control flow uses directive-prefixed blocks: `@if`, `@for`, `@switch`,\nand `@try`. Plain JavaScript control flow stays in setup code.\n\n```jsx\nexport function Feed(props) @{\n  \u003Cul>\n    @for (const item of props.items; key item.id) {\n      \u003Cli>{item.title as string}\u003C\u002Fli>\n    } @empty {\n      \u003Cli>Nothing to show\u003C\u002Fli>\n    }\n  \u003C\u002Ful>\n}\n```\n\n```jsx\nexport function Greeting(props) @{\n  @if (props.name) {\n    \u003Cp>{'Hello, ' + props.name}\u003C\u002Fp>\n  } @else {\n    \u003Cp>Hello, stranger\u003C\u002Fp>\n  }\n}\n```\n\n### Class composition\n\n`class` (and its alias `className`) accepts more than a string. Octane composes the\nvalue the same way the `clsx` \u002F `classnames` libraries do — from strings, numbers,\narrays, objects, and any nesting of those — so you can build a class list inline\nwithout a helper. Falsy parts (`false`, `0`, `null`, `undefined`, `''`) drop out;\nobject keys are kept when their value is truthy.\n\n```jsx\nexport function Button(props) @{\n  \u003Cbutton\n    class={[\n      'btn',\n      props.size,                       \u002F\u002F 'btn lg'\n      { active: props.active, disabled: props.disabled },\n      props.extra,                      \u002F\u002F string | array | object | falsy\n    ]}\n  >\n    {props.label as string}\n  \u003C\u002Fbutton>\n}\n```\n\nComposition is native to the runtime (no dependency) and works everywhere a class\ndoes: dynamic bindings, `{...spread}` props, SVG elements, scoped-`\u003Cstyle>` components\n(the scope hash is appended after your classes), and server rendering (the SSR output\nand client render compose byte-identically, so hydration never mismatches).\n\n> Unlike React — which coerces `className={['a', 'b']}` to the string `\"a,b\"` — this is\n> a deliberate Octane convenience. A plain string still takes the fast path.\n\n## Documentation\n\nThe full docs live at **[octanejs.dev](https:\u002F\u002Foctanejs.dev)**, a site built with\nOctane itself. Good places to start:\n\n- **[Quick start](https:\u002F\u002Foctanejs.dev\u002Fdocs\u002Fquick-start)** — install, mount, and\n  the `.tsrx` essentials.\n- **[TSRX vs TSX\u002FJSX](https:\u002F\u002Foctanejs.dev\u002Fdocs\u002Ftsrx-vs-tsx)** — when to reach for\n  each dialect and exactly what TSRX unlocks: compiled `@for` collections,\n  template control flow, and text holes.\n- **[Differences from React](https:\u002F\u002Foctanejs.dev\u002Fdocs\u002Fdifferences-from-react)** —\n  the deliberate divergences, and why everything else matching React is the point.\n- **[Bindings](https:\u002F\u002Foctanejs.dev\u002Fdocs\u002Fbindings)** — the `@octanejs\u002F*` ports of\n  the React ecosystem.\n\n## Packages\n\nThis is a pnpm monorepo with eighteen publishable packages — the core\nruntime+compiler, the metaframework plugin (and its Vercel adapter), an MCP\nserver, and fourteen framework bindings:\n\n- [`octane`](.\u002Fpackages\u002Foctane) is the runtime and the compiler together. It covers\n  rendering, the hook API, the server (SSR) and client (hydration) entry points,\n  and the compiler itself, which is exposed at `octane\u002Fcompiler` (and\n  `octane\u002Fcompiler\u002Fvite` for the build transform).\n- [`@octanejs\u002Fvite-plugin`](.\u002Fpackages\u002Fvite-plugin-octane) is the optional metaframework\n  plugin, with dev SSR, routing, and hydration wiring for full apps;\n  [`@octanejs\u002Fadapter-vercel`](.\u002Fpackages\u002Fadapter-vercel) deploys its build\n  output to Vercel.\n- [`@octanejs\u002Fmcp-server`](.\u002Fpackages\u002Foctane-mcp-server) exposes octane docs and\n  compile tooling to AI agents over MCP.\n- The `@octanejs\u002F*` framework bindings — each an octane port of a React library:\n  [`zustand`](.\u002Fpackages\u002Fzustand), [`query`](.\u002Fpackages\u002Ftanstack-query),\n  [`motion`](.\u002Fpackages\u002Fmotion), [`stylex`](.\u002Fpackages\u002Fstylex),\n  [`router`](.\u002Fpackages\u002Ftanstack-router), [`lexical`](.\u002Fpackages\u002Flexical),\n  [`floating-ui`](.\u002Fpackages\u002Ffloating-ui), [`radix`](.\u002Fpackages\u002Fradix),\n  [`hook-form`](.\u002Fpackages\u002Fhook-form), [`base-ui`](.\u002Fpackages\u002Fbase-ui),\n  [`recharts`](.\u002Fpackages\u002Frecharts), [`redux`](.\u002Fpackages\u002Fredux),\n  [`testing-library`](.\u002Fpackages\u002Ftesting-library), and [`mdx`](.\u002Fpackages\u002Fmdx).\n  Parity varies by package — some are behaviorally complete, others are\n  explicitly partial or alpha. [`docs\u002Fbindings-status.md`](.\u002Fdocs\u002Fbindings-status.md)\n  is the generated per-package status table (upstream version, supported\n  surface, known divergences, SSR\u002Fhydration, last parity verification), sourced\n  from each package's `status.json` and checked in CI.\n\n## Development\n\nOctane uses [pnpm](https:\u002F\u002Fpnpm.io) for package management and workspace scripts.\n\n```bash\npnpm install      # install workspace dependencies\npnpm test         # run the test suite\npnpm typecheck    # type-check the packages\npnpm format       # format with Prettier\n```\n\n### Playground\n\nThe playground under [`playground\u002Foctane`](.\u002Fplayground\u002Foctane) covers state, keyed\nlists, conditional rendering, `@switch`, dynamic components, and suspense:\n\n```bash\npnpm --filter octane-playground dev\n```\n\n## License\n\nMIT\n","Octane 是一个高效、TypeScript 优先的 React 替代型 UI 框架，旨在提供与 React 高度兼容的开发体验同时显著提升运行时性能。其核心特点是基于编译时优化（TSRX 模板语法支持 @if\u002F@for 等指令）、无虚拟 DOM、真实 DOM 事件与原生表单语义、以及解除 React 的‘规则 hooks’限制（如允许在条件分支中调用 hooks）。项目适用于对性能敏感、需渐进迁移 React 代码或追求更可控渲染行为的中大型前端应用。当前处于 alpha 阶段，适合技术选型评估与早期采用者验证。",2,"2026-07-11 02:30:42","CREATED_QUERY"]