Fine-grained reactive UI library for Moonbit/JS
npm install @mizchi/lunaA lightweight reactive UI library with SolidJS-compatible API. Implemented in MoonBit.
``bash`
npm install @mizchi/luna
tsconfig.json:
Set "jsxImportSource": "@mizchi/luna"
`json`
{
"compilerOptions": {
//...
"jsxImportSource": "@mizchi/luna",
}
}
vite.config.ts:
`ts
import { defineConfig } from 'vite';
export default defineConfig({});
`
`tsx
import { createSignal, createMemo, render } from '@mizchi/luna';
function Counter() {
const [count, setCount] = createSignal(0);
const doubled = createMemo(() => count() * 2);
return (
Count: {count}
Doubled: {doubled}
render(document.getElementById('app')!,
`
`tsx
import { createSignal, createMemo, createEffect } from '@mizchi/luna';
// Signal: reactive value
const [count, setCount] = createSignal(0);
count(); // get value
setCount(5); // set value
setCount(c => c + 1); // update with function
// Memo: derived value
const doubled = createMemo(() => count() * 2);
// Effect: side effects
createEffect(() => {
console.log('Count changed:', count());
});
`
`tsx
import { For, Show } from '@mizchi/luna';
// For: list rendering
{(item) =>
// Show: conditional rendering
Visible content
`
`tsx
// Object syntax (camelCase → kebab-case auto-conversion)
styled content
// String syntax
$3
`tsx
setValue(e.target.value)} />
``MIT