Loading page…
Pitch
Description
Comments
⚡ Fine grained reactive UI library with no-compiler and no-magic, explicit subscriptions for signals, and first class support for HMR at ~9kb
⚡ Fine grained reactive UI Library.
npm: npm i alfama
cdn: https://cdn.jsdelivr.net/npm/alfama/+esm
SVG to popular patterns like dangerouslySetInnerHTML, ref to <Fragment> and <Portal /> alfama has you covered.~9kB gzip.sample/untrack methods found in other fine grained reactive libraries like solid/sinuous. Importantly, many feel that this also makes your code easy to reason about.h for plain javascript or <JSX/> for babel/typescript.
| grati.co | Next-Generation IDE |
| alfama-router | Router with a familiar react-router like API |
/** @jsx h **/
import { component, h, render } from "alfama";
// 1) The signal/wire/store functions are passed as a param to
// component definition
const Page = component("HomePage", (props, { signal, wire }) => {
// 2) Named signals for stable HMR
const [count, setCount] = signal("count", 0);
// or $count = signal("count", 0) and then $count.get/$count.set
// 3) Most importantly: wire reactivity to signals
// with explicit subscription using the $ token param
// NB: also makes code easy to reason about and prevents those pesky untrack/sample related errors
const $doubleCount = wire(($) => count($) * 2);
return (
<div id="home">
<p>Hey, {props.name}</p>
<button onClick={() => setCount(count() + 1)}>
Increment / {wire(count)})
</button>
<p>Double count = {$doubleCount}</p>
</div>
);
});
render(<Page name="John Doe" />, document.body);
This library is at its core inspired by haptic that in particular it also favours manual subscription model instead of automatic subscriptions model. This oblivates the need of sample/untrack found in almost all other reactive libraries.
Also it borrows the nomenclature of aptly named Signal and Wire from haptic.
It's also influenced by Sinuous, Solid, & S.js
export const HomePage = component<{ name: string }>(
"HomePage",
(props, { signal, wire }) => {
const [count, setCount] = signal("count", 0);
//.. rest of component
}
);
<div id="home">
<button
onclick={() => {
setCount(count() + 1);
}}
>
Increment to {wire(($) => $(count))}
</button>
</div>
export const Todos = component("Todos", (props, { signal, wire, store }) => {
const $todos = store("todos", {
items: [{ task: "Do Something" }, { task: "Do Something else" }],
});
return (
<ul>
<Each
cursor={$todos.items}
renderItem={(cursor) => {
return <li>{cursor().task}</li>;
}}
></Each>
</ul>
);
});
export const RouterContext = defineContext<RouterObject>("RouterObject");
const BrowserRouter = component("Router", (props, { setContext, signal }) => {
setContext(
RouterContext,
signal("router", createRouter(window.history, window.location))
);
return props.children;
});
const Link = component("Link", (props: any, { signal, wire, getContext }) => {
const router = getContext(RouterContext);
//... rest of component
});
export const Prosemirror = component("Prosemirror", (props, { onMount }) => {
onMount(() => {
console.log("component mounted");
});
// ...
});
export const Prosemirror = component("Prosemirror", (props, { onUnmount }) => {
onUnmount(() => {
console.log("component unmounted");
});
// ...
});
<When
condition={($) => count($) > 5}
views={{
true: () => {
return <div key="true">"TRUE"</div>;
},
false: () => {
return <div key="false">"FALSE"</div>;
},
}}
></When>
<Each
cursor={$todos.items}
renderItem={(cursor) => {
return <li>{wire(cursor().task)}</li>;
}}
></Each>
export const PortalExample = component("PortalExample", (props, utils) => {
const [active, setActive] = utils.signal("active", false);
return (
<div>
<button
onClick={(e) => {
setActive(!active());
}}
>
toggle modal
</button>
<When
condition={($) => active($)}
views={{
true: () => {
return (
<Portal mount={document.body}>
<div style="position: fixed; max-width: 400px; max-height: 50vh; background: white; padding: 7px; width: 100%; border: 1px solid #000;top: 0;">
<h1>Portal</h1>
</div>
</Portal>
);
},
false: () => {
return "";
},
}}
></When>
</div>
);
});
/** @jsx h **/
import { h, render } from "alfama";
import { Layout } from "./index";
const renderApp = ({ Layout }: { Layout: typeof Layout }) =>
render(<Layout />, document.getElementById("app")!);
window.addEventListener("load", () => renderApp({ Layout }));
if (import.meta.hot) {
import.meta.hot.accept("./index", (newModule) => {
if (newModule) renderApp(newModule as unknown as { Layout: typeof Layout });
});
}
/** @jsx h **/
export const Prosemirror = component("Prosemirror", (props, { onUnmount }) => {
let container: Element | undefined = undefined;
let prosemirror: EditorView | undefined = undefined;
onUnmount(() => {
if (prosemirror) {
prosemirror.destroy();
}
});
return (
<div
style="
height: 100%; position: absolute; width: 100%;"
ref={(el) => {
container = el;
if (container) {
prosemirror = setupProsemirror(container);
}
}}
></div>
);
});
/** @jsx h **/
<div dangerouslySetInnerHTML={{ __html: `<!-- any HTML you want -->` }} />
These are reactive read/write variables who notify subscribers when they've been written to. They act as dispatchers in the reactive system.
const [count, setCount] = signal("count", 0);
count(); // Passive read (read-pass)
setCount(1); // Write
// also possible to use get/set on signal instead of tuples
const $count = signal("count", 0);
$count.get();
$count.set(5);
The subscribers to signals are wires, which will be introduced later. They subscribe by read-subscribing the signal.
Stores are for storing nested arrays/objects and also act as dispatchers in the reactive system. And like signals, stores can also be read subsribed by wires. Outside of wires, they can be read via reify function. Writes can be done via produce function immer style.
const val = { name: "Jane", friends: [{ id: "1", name: "John" }] };
const $profile = store("profile", val);
// Passive read (read-pass)
const friends = reify($profile.friends);
console.log(friends.length);
// Write
produce($profile.friends, (friends) => {
friends.push({ id: "2", name: "John Doe 2" });
});
These are task runners who subscribe to signals/stores and react to writes. They hold a function (the task) and manage its subscriptions, nested wires, run count, and other metadata. The wire provides a $ token to the function call that, at your discretion as the developer, can use to read-subscribe to signals.
wire(($) => {
// Explicitly subscribe to count signal getter using the subtoken "$"
const countValue = $(count);
// also possible to subscribe to a stores using "$" subtoken
const friendsCount = $($profile.friends);
return countValue + friendsCount;
});
No comments yet.
Sign in to be the first to comment.