-
Notifications
You must be signed in to change notification settings - Fork 0
FAQ
Chocola is a small web framework that lets you build apps out of reusable components — little self-contained pieces of HTML, CSS, and JavaScript that you snap together. When you're ready to ship, Chocola compiles everything into plain vanilla JavaScript. No framework baggage, no runtime to download, just clean code in the browser.
Install Chocola with npm install chocola, then create three things: a chocola.config.json (tells Chocola where your files live), an index.js (runs the build), and a chocola.server.js (starts the dev server). Your HTML entry point lives at src/index.html.
Once that's in place, node chocola.server.js gets you a live-reloading browser preview.
The <app> element is the landing zone where Chocola drops all your compiled components. Think of it as the stage — Chocola won't know where to put anything without it. Everything outside <app> (like your <head> or a nav bar) is left completely alone. Elements outside <app> can be a persistent static layout if you want.
A component is a JavaScript file that exports a function returning an object with up to three keys: body (your HTML), styles (your CSS), and script (your logic). Only body is required.
// Card.js
import body from "./html/card.html";
import styles from "./css/card.css";
export default function Card() {
return { body, styles };
}Use the component's filename as an HTML tag, written in PascalCase. A file called UserCard.js becomes <UserCard></UserCard> in your HTML. Chocola replaces that tag with the component's rendered output at compile time. Component names must be PascalCase (first letter capitalized).
Yes — put a <slot> element in your component's HTML template. Whatever you write between the component's opening and closing tags in the parent gets rendered in that spot.
<!-- component template -->
<div class="card">
<slot></slot>
</div>
<!-- usage -->
<Card>
<p>Hello from the parent</p>
</Card>Add attributes to the component tag — those become props. Strings go in plain, everything else (numbers, booleans, variables) gets wrapped in curly braces so Chocola evaluates them properly:
<Counter label="Clicks" start={5} active={true}></Counter>Inside the component's script, you access those values through the ctx object: ctx.label, ctx.start, and so on.
Reactivity and state will be added in Chocola 3. As of now, manually update contents via components' RUNTIME() function and global scripts.
Two options. The if attribute hides the element visually (keeps it in the DOM with display: none). The del-if attribute removes it from the DOM entirely. Use del-if when the element shouldn't be there, and if when you might want to toggle it back quickly.
<div if={isVisible}>Hidden but still in the DOM</div>
<div del-if={shouldRemove}>Gone completely</div>Yes:
<h1>{title ?? "Untitled"}</h1>
<div class="box {isActive ? 'active' : ''}"></div>
<p if={temperature > 30}>It's hot outside!</p>No. CSS you import into a component is automatically scoped. Chocola adds a unique hash to the component's elements under the hood. A button { color: red } rule in one component won't affect buttons anywhere else.
Link a stylesheet the normal way in your src/index.html <head>. Those styles apply globally. When a component has a scoped rule that conflicts with a global one, the scoped style prevails inside that component.
Once, right after the component has been rendered into the DOM. It's the right place to attach event listeners, kick off fetches, set up timers, or anything else that needs the HTML to be there already.
-
selfis the root DOM node of your component instance. Always useself.querySelector()instead ofdocument.querySelector()to avoid bugs when multiple instances of the same component exist. -
ctxis where your props and state live. You can read props from it, write new state to it, and set default values:function RUNTIME(self, ctx = { count: 0 }).