Fine-grained reactive UI library for Moonbit/JS
npm install @luna_ui/lunaA lightweight reactive UI library with SolidJS-Like API. Implemented in MoonBit.
``bashCreate a new TSX project
npx @luna_ui/luna new myapp
cd myapp
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 (
Count: {count}
Doubled: {doubled}
);
}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)
styled content
// String syntax
styled content
`$3
`tsx
setValue(e.target.value)} />
`$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
)}
);
}
``MIT