@luna_ui/luna

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

Documentation

- API Reference
- Tutorial

Quick Start

``bash


Create a new TSX project

npx @luna_ui/luna new myapp
cd myapp
npm install
npm run dev

Or create a MoonBit project

npx @luna_ui/luna new myapp --mbt
cd myapp
moon update
npm install
npm run dev
`

Manual Setup

$3

`bash
npm install @luna_ui/luna
`

$3

tsconfig.json:

`json
{
"compilerOptions": {
"jsxImportSource": "@luna_ui/luna"
}
}
`

vite.config.ts:

`ts
import { defineConfig } from 'vite';

export default defineConfig({
esbuild: {
jsx: 'automatic',
jsxImportSource: '@luna_ui/luna',
},
});
`

Basic Usage

`tsx
import { createSignal, createMemo, render } from '@luna_ui/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 '@luna_ui/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, Switch, Match } from '@luna_ui/luna';

// For: list rendering

{(item) =>

{item.name}

}

// Show: conditional rendering
// ⚠️ Children must be a function for proper lifecycle support
isVisible()}>
{() => }

// Switch/Match: multiple conditions
Default

}>
value() === 'a'}>{() => }
value() === 'b'}>{() => }

`

$3

`tsx
import { onMount, onCleanup } from '@luna_ui/luna';

function Timer() {
const [count, setCount] = createSignal(0);

// Run after component mounts
onMount(() => {
console.log('Timer mounted');
});

// Cleanup when component unmounts
onCleanup(() => {
console.log('Timer cleanup');
});

return

Count: {count()}

;
}

// ⚠️ Important: For onCleanup to work inside Show/For/Switch,
// children must be passed as a function:

{() => } {/ ✅ Correct /}

// This won't trigger cleanup properly:

{/ ❌ Wrong - Timer runs outside owner scope /}

`

$3

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


// String syntax



`

$3

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


{ e.preventDefault(); submit(); }}>
`

$3

`tsx
import { createContext, useContext, Provider } from '@luna_ui/luna';

// Create a context with default value
const ThemeContext = createContext('light');

function App() {
return (
// ⚠️ Children must be a function for proper context access

{() => }

);
}

function ThemedComponent() {
const theme = useContext(ThemeContext);
return

Current theme: {theme}

;
}
`

$3

`tsx
import { Portal } from '@luna_ui/luna';

function Modal() {
return (
// ⚠️ Children must be a function for proper lifecycle support

{() => (


Modal Content


)}

);
}
``

License

MIT