metadom
v0.1.0
Published
Meta-DOM. Signal-driven, declarative UI.
Downloads
4
Readme
metadom
Meta-DOM. Signal-driven, declarative UI.
Example • Installation • Philosophy
Example
import { mount, Signal } from "metadom";
mount(<Counter />);
export function Counter(): JSX.Element {
const count = Signal(0);
return (
<div>
<dl>
<dt>Count</dt>
<dd>{count}</dd>
<dt>Count * 10</dt>
<dd>{() => count() * 10}</dd>
</dl>
<div>
<button onclick={() => count((a) => a + 1)}>increment</button>
<button onclick={() => count((a) => a - 1)}>decrement</button>
</div>
</div>
);
}
Philosophy
- No compilation.
- No virtual-DOM.
- Simple reactivity pattern:
- A Signal is a Function.
- When called it returns its value.
- When called with an argument, it sets it also sets its value.
- Functions define reactive UI children.
- Functions define reactive UI attributes.
- A Signal is a Function.
Installation
Available on npm
(link):
metadom
Vite
Config
Add to your project's vite.config.ts
:
+ import Metadom from "metadom/config/vite";
export default defineConfig({
+ plugins: [Metadom()],
});
TypeScript
Config
Add to your project's tsconfig.json
:
{
+ "extends": ["metadom/config/tsconfig.json"],
}
Global JSX Namespace
Instead of having to import the JSX
namespace for typing your project's
components' return types, you may make it globally available.
via tsconfig.json
:
{
"compilerOptions": {
+ "types": ["metadom/globals"],
}
}
via entry-point:
+ import "metadom/globals";