@magneticjs/server
v0.1.4
Published
Magnetic server-driven UI framework — JSX runtime, router, SSR
Maintainers
vishinventsReadme
@magneticjs/server
Server-driven UI framework for Magnetic. Provides the JSX runtime that transforms TSX into JSON DOM descriptors, plus routing and SSR utilities.
Installation
npm install @magneticjs/serverUsage
JSX Runtime (pages & components)
// tsconfig.json: { "jsx": "react-jsx", "jsxImportSource": "@magneticjs/server" }
import { Head, Link } from '@magneticjs/server/jsx-runtime';
export function IndexPage(props: any) {
return (
<div key="app">
<Head><title>My App</title></Head>
<h1>{props.title}</h1>
<Link href="/about">About</Link>
<button onClick="do_something">Click me</button>
</div>
);
}Router
import { createRouter } from '@magneticjs/server/router';
const router = createRouter([
{ path: '/', page: IndexPage },
{ path: '/about', page: AboutPage },
{ path: '*', page: NotFoundPage },
]);
const result = router.resolve('/about', viewModel);
// → { kind: 'render', dom: DomNode }Key Concepts
- DomNode: JSON DOM descriptor
{ tag, key?, attrs?, events?, text?, children? } - Events:
onClick,onSubmit,onInput→ action names (strings, not callbacks) - Head: Declares
<title>and<meta>tags for SSR - Link: Client-side navigation without page reload
- Fragment: Groups children without a wrapper element
Exports
| Path | Description |
|------|-------------|
| @magneticjs/server | Core index |
| @magneticjs/server/jsx-runtime | JSX factory, Head, Link, Fragment, DomNode |
| @magneticjs/server/router | createRouter, route matching |
| @magneticjs/server/ssr | render_page, PageOptions |
License
MIT