Overview

The 2.0.0-next.4 pre-release is now available on npm, introducing Single-File Components as .html files.

If interested in trying it out, install with npm i chocola@next to get the latest Chocola 2 pre-release and read the documentation included in the code for up-to-date info.

Chocola is a web framework designed for simplicity and modularity. It lets you build components by compiling JS modules into HTML templates, CSS, and JS logic, keeping your projects clean and optimized.

// Counter.js
import body from "./html/counter.html";
import styles from "./css/counter.css";

function RUNTIME(self, ctx) {
  self.querySelector("button").addEventListener("click", () => {
    ctx.count++;
  })
}

export default function Counter() {
  return {
    body,
    styles,
    script: RUNTIME
  }
}