@mizchi/luna

A lightweight reactive UI library with SolidJS-compatible API. Implemented in MoonBit.

Documentation

- API Reference
- Tutorial

Installation

``bash
npm install @mizchi/luna
`

Setup

$3

tsconfig.json:

Set "jsxImportSource": "@mizchi/luna"

`json
{
"compilerOptions": {
//...
"jsxImportSource": "@mizchi/luna",
}
}
`

vite.config.ts:

`ts
import { defineConfig } from 'vite';

export default defineConfig({});
`

Basic Usage

`tsx
import { createSignal, createMemo, render } from '@mizchi/luna';

function Counter() {
const [count, setCount] = createSignal(0);
const doubled = createMemo(() => count() * 2);

return (


render(document.getElementById('app')!, );
`

API

$3

`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());
});
`

$3

`tsx
import { For, Show } from '@mizchi/luna';

// For: list rendering

{(item) =>

`tsx
// Object syntax (camelCase → kebab-case auto-conversion)


// String syntax


`tsx
console.log('clicked')}>Click
setValue(e.target.value)} />