chocola 2.0.0-next.2 → 2.0.0-next.5

package/README.md

@@ -1,45 +1,36 @@
-# chocola
-
-Chocola is a JavaScript library for creating web user interfaces.
-
-`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.
-
-## Usage
-
-```html
-<!-- counter.html -->
-<div>
-  <button title={title}>{text}</button>
-
-  <div class="main">
-    <div class="number">{count}</div>
-  </div>
-</div>
-```
-
-```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
-  }
-}
-```
-
-## Documentation
-
-See https://github.com/sad-gabi/chocola/wiki
+# chocola
+
+Chocola is a JavaScript library for creating web user interfaces.
+
+`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 until official workflows are provided.
+
+## Usage
+
+```html
+<!-- Greeting.html -->
+<script>
+    let self = new HTMLDivElement;
+    let input = new HTMLInputElement;
+
+    export let title = "Hello";
+
+    function $runtime() {
+        input.focus();
+    }
+</script>
+
+<template>
+    <div>
+        <h1>{title}</h1>
+        <input bind:self="input" type="text" placeholder="Your name">
+    </div>
+</template>
+
+<style>
+    h1 { color: chocolate; }
+</style>
+```
+
+## Documentation
+
+See https://github.com/chocolajs/chocola/wiki/Overview

package/compiler/chalk.js

@@ -0,0 +1,32 @@
+const ansi = {
+  bold: "\x1b[1m",
+  underline: "\x1b[4m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+};
+
+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;