22
33[ ![ Continuous Integration] ( https://github.com/ilhajs/ilha/actions/workflows/ci.yml/badge.svg )] ( https://github.com/ilhajs/ilha/actions/workflows/ci.yml )
44[ ![ NPM Version] ( https://img.shields.io/npm/v/ilha )] ( https://www.npmjs.com/package/ilha )
5+ ![ Bundlephobia] ( https://badgen.net/bundlephobia/minzip/ilha )
56[ ![ Discord] ( https://img.shields.io/discord/1428724223756472373 )] ( https://discord.gg/WnVTMCTz74 )
67
78> Alpha is live
@@ -43,11 +44,13 @@ bun add ilha
4344
4445Scaffold a project in seconds with one of the official starters:
4546
46- | Template | Command | Sandbox |
47- | -------------------------------------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------- |
48- | [ Vite] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/vite ) | ` npx giget@latest gh:ilhajs/ilha/templates/vite ` | [ Open] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/vite ) |
49- | [ Hono] ( https://github.com/ilhajs/ilha/tree/main/templates/hono ) | ` npx giget@latest gh:ilhajs/ilha/templates/hono ` | [ Open] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/hono ) |
50- | [ Nitro] ( https://github.com/ilhajs/ilha/tree/main/templates/nitro ) | ` npx giget@latest gh:ilhajs/ilha/templates/nitro ` | [ Open] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/nitro ) |
47+ | Template | Command | Sandbox |
48+ | --------------------------------------------------------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------- |
49+ | [ Vite] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/vite ) | ` npx giget@latest gh:ilhajs/ilha/templates/vite ` | [ Open] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/vite ) |
50+ | [ Hono] ( https://github.com/ilhajs/ilha/tree/main/templates/hono ) | ` npx giget@latest gh:ilhajs/ilha/templates/hono ` | [ Open] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/hono ) |
51+ | [ Nitro] ( https://github.com/ilhajs/ilha/tree/main/templates/nitro ) | ` npx giget@latest gh:ilhajs/ilha/templates/nitro ` | [ Open] ( https://stackblitz.com/github/ilhajs/ilha/tree/main/templates/nitro ) |
52+ | [ Elysia] ( https://github.com/ilhajs/ilha/tree/main/templates/elysia ) | ` npx giget@latest gh:ilhajs/ilha/templates/elysia ` | |
53+ | [ Electrobun] ( https://github.com/ilhajs/ilha/tree/main/templates/electrobun ) | ` npx giget@latest gh:ilhajs/ilha/templates/electrobun ` | |
5154
5255---
5356
@@ -57,7 +60,7 @@ Place a mount point anywhere in your HTML:
5760
5861``` html
5962<body >
60- <div data-ilha =" counter " ></div >
63+ <div data-ilha =" Counter " ></div >
6164</body >
6265```
6366
@@ -66,19 +69,19 @@ Define your island and mount it:
6669``` ts
6770import ilha , { html , mount } from " ilha" ;
6871
69- const counter = ilha
72+ const Counter = ilha
7073 .state (" count" , 0 )
7174 .on (" [data-action=increase]@click" , ({ state }) => state .count (state .count () + 1 ))
7275 .on (" [data-action=decrease]@click" , ({ state }) => state .count (state .count () - 1 ))
7376 .render (
7477 ({ state }) => html `
75- <p>Count: ${state .count }</p>
78+ <p>Count: ${state .count () }</p>
7679 <button data-action="increase">Increase</button>
7780 <button data-action="decrease">Decrease</button>
7881 ` ,
7982 );
8083
81- mount ({ counter });
84+ mount ({ Counter });
8285```
8386
8487` mount() ` auto-discovers every ` [data-ilha] ` element on the page and activates the matching island.
0 commit comments