chocola 1.6.0 → 2.0.0-next.10

package/README.md

@@ -1,45 +1,43 @@
-# chocola
+<picture>
+    <source media="(prefers-color-scheme: dark)" srcset="assets/banner_dark.jpg">
+    <img src="assets/banner.jpg" alt="Chocola • The sweetest way to build the web" />
+</picture>
 
-Chocola is a JavaScript library for creating web user interfaces.
+## What is Chocola
 
-`chocola` only contains the functionality to build and serve web static builds. For production you may want to implement `chocola` to your workflow with other frameworks as Vite until official workflows are provided.
+Chocola is a new and sweeter way to build your web apps.
 
-## Usage
+No bundler config. No virtual DOM. No hydration ceremony. Just `.html` files with `<template>`, `<script>`, and `<style>` compiled to HTML with scoped CSS the browser already understands, and optional runtime when you need it.
 
-```html
-<!-- counter.html -->
-<div>
-  <button title={title}>{text}</button>
-
-  <div class="main">
-    <div class="number">{count}</div>
-  </div>
-</div>
-```
+Import components. Instantiate them. Mount, update, remove. Client-side or server-side. Same file, minimal overhead.
 
-```js
-import body from "./html/counter.html";
-import styles from "./css/counter.css";
-
-function RUNTIME(self, ctx) {
-  const btn = self.querySelector("button");
-  const number = self.querySelector(".number");
-
-  btn.addEventListener("click", () => {
-    ctx.count++;
-    number.textContent = ctx.count;
-  })
-}
-
-export default function Counter() {
-  return {
-    body,
-    styles,
-    script: RUNTIME
-  }
-}
+```html
+<script>
+    import CoolButton from './CoolButton.html';
+
+    let self;
+    let input;
+
+    export let title = "Hello";
+
+    function $runtime() {
+        input.focus();
+    }
+</script>
+
+<template>
+    <div>
+        <h1>{title}</h1>
+        <input bind:self="input" type="text" placeholder="Your name">
+        <CoolButton label="Not lame button"></CoolButton>
+    </div>
+</template>
+
+<style>
+    h1 { color: chocolate; }
+</style>
 ```
 
 ## Documentation
 
-See https://github.com/sad-gabi/chocola/wiki
+https://github.com/chocolajs/chocola/tree/main/documentation

package/compiler/chalk.js

@@ -0,0 +1,34 @@
+const ansi = {
+  bold: "\x1b[1m",
+  underline: "\x1b[4m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[36m",
+  dim: "\x1b[90m"
+};
+
+const reset = "\x1b[0m";
+
+function hexToAnsi(h) {
+  const r = parseInt(h.slice(1, 3), 16);
+  const g = parseInt(h.slice(3, 5), 16);
+  const b = parseInt(h.slice(5, 7), 16);
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+function makeChalk(stack) {
+  const fn = (s) => {
+    if (stack.length === 0) return s;
+    return stack.map(n => ansi[n] || hexToAnsi(n)).join("") + s + reset;
+  };
+  return new Proxy(fn, {
+    get(_, prop) {
+      if (prop === "hex") return (h) => makeChalk([...stack, h]);
+      return makeChalk([...stack, prop]);
+    },
+  });
+}
+
+const chalk = makeChalk([]);
+export default chalk;