@zikojs/console 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/console",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "",
   "main": "src/index.js",
   "publishConfig": {

package/src/components/ConsoleFeed.js

@@ -1,21 +1,19 @@
-import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-const { div } = van.tags;
+import { tags } from 'ziko/dom'
+
+const { div } = tags;
 
 import { isProps } from "../utils/index.js";
 import { Hook } from "../hook/index.js";
 import { createFeed } from "../feed/index.js";
 import { nodeEntry } from "./nodeEntry.js";
 import { cache } from "./Row.js";
-import { ConsoleToolbar } from "./ConsoleToolbar.js";
 import { ConsoleBody } from "./ConsoleBody.js";
-import { ConsolePrompt } from "./ConsolePrompt.js";
 
 export function ConsoleFeed(...args) {
   const [props, ...kids] = isProps(args[0]) ? args : [{}, ...args];
   const feed = props.feed || createFeed(1000, cache);
   const {
     variant = "dark",
-    repl = true,
     hook = false,
   } = props;
 
@@ -28,16 +26,16 @@ export function ConsoleFeed(...args) {
   const initialTheme = typeof variant === "string" ? variant : (variant.val || "dark");
   feed.setTheme(initialTheme);
 
-  const bar = ConsoleToolbar(feed);
   const body = ConsoleBody(feed);
-  const prompt = repl ? ConsolePrompt(feed) : "";
 
   const container = div(
-    { class: () => "cf " + feed.theme, style: "flex:1" },
-    bar,
+    { class: "cf " + feed.theme },
+    // bar,
     body,
-    prompt,
-  );
+    // prompt,
+  ).style({
+    flex : 1
+  });
 
   feed.addEventListener("theme-change", (e) => {
     container.className = "cf " + e.detail + " flex:1";

package/src/components/index.js

@@ -1,8 +1,6 @@
 export * from './Inspect.js'
 export * from './Table.js'
 export * from './Row.js'
-export * from './ConsoleToolbar.js'
 export * from './ConsoleBody.js'
-export * from './ConsolePrompt.js'
 export * from './ConsoleFeed.js'
 export * from './Console.js'

package/src/index.css

@@ -15,67 +15,15 @@ body {
   display: flex;
   flex-direction: column;
 }
-header {
-  padding: 14px 20px 4px;
-}
-header h1 {
-  margin: 0;
-  font-size: 17px;
-  font-weight: 650;
-}
-header p {
-  margin: 2px 0 0;
-  color: #5c6578;
-  font-size: 13px;
-}
-main {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 230px 1fr;
-  gap: 14px;
-  padding: 12px 20px 20px;
-}
+
 @media (max-width: 720px) {
   main {
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;
   }
 }
-aside {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 6px;
-}
-aside h2 {
-  width: 100%;
-  margin: 6px 0 0;
-  font-size: 12px;
-  font-weight: 600;
-  color: #5c6578;
-}
-aside button {
-  font: inherit;
-  font-size: 13px;
-  padding: 5px 10px;
-  border: 1px solid #c9cedb;
-  background: #f6f7fa;
-  color: inherit;
-  border-radius: 5px;
-  cursor: pointer;
-}
-aside button:hover {
-  background: #fff;
-  border-color: #8a93a8;
-}
-button:focus-visible,
-input:focus-visible {
-  outline: 2px solid #3b82f6;
-  outline-offset: 1px;
-}
 
-/* ---------- Console component ---------- */
+/* ---------- Console feed ---------- */
 .cf {
   --bg: #171b24;
   --bar: #1e2330;
@@ -119,49 +67,7 @@ input:focus-visible {
   --err-fg: #b3261e;
   --hover: #f3f5f9;
 }
-.cf-bar {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  padding: 6px 8px;
-  background: var(--bar);
-  border-bottom: 1px solid var(--line);
-  flex-wrap: wrap;
-}
-.cf-bar input {
-  flex: 1;
-  min-width: 120px;
-  font: inherit;
-  background: var(--bg);
-  color: var(--fg);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  padding: 3px 8px;
-}
-.cf-bar button {
-  font: inherit;
-  background: none;
-  color: var(--dim);
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 2px 8px;
-  cursor: pointer;
-}
-.cf-bar button:hover {
-  color: var(--fg);
-  border-color: var(--line);
-}
-.cf-bar button.cf-chip.on {
-  color: var(--fg);
-  border-color: var(--line);
-  background: var(--bg);
-}
-.cf-chip.warn.on {
-  color: var(--warn-fg) !important;
-}
-.cf-chip.error.on {
-  color: var(--err-fg) !important;
-}
+
 .cf-body {
   flex: 1;
   overflow: auto;
@@ -288,23 +194,4 @@ input:focus-visible {
 .cf-table th {
   background: var(--bar);
   font-weight: 600;
-}
-.cf-prompt {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 10px;
-  border-top: 1px solid var(--line);
-  background: var(--bar);
-}
-.cf-prompt span {
-  color: var(--key);
-}
-.cf-prompt input {
-  flex: 1;
-  font: inherit;
-  background: none;
-  border: 0;
-  color: var(--fg);
-  outline: 0;
-}
+}

package/src/index.js

@@ -1,45 +1,4 @@
 import "./index.css";
-import { Hook } from "./hook/index.js";
-import { createFeed } from "./feed/index.js";
-import { ConsoleFeed, Console } from "./components/index.js";
-
-Object.assign(window, {
-  ConsoleFeed: { Hook, createFeed, ConsoleFeed, Console },
-});
-
-/* =====================================================================
-   Demo
-   ===================================================================== */
-
-Console.theme = 'light';
-
-// 1) Declarative
-// document.body.append(
-//   ConsoleFeed(
-//     { variant: theme.val, repl: false },
-//     Console.log("Hello from VanJS", 42, true, null, undefined),
-//     Console.info("Server listening on :3000"),
-//     Console.group("Request"),
-//     Console.log("parsing"),
-//     Console.warn("token expires soon"),
-//     Console.groupEnd(),
-//     Console.error(new Error("Something broke")),
-//     Console.table([
-//       { id: 1, name: "Ada" },
-//       { id: 2, name: "Linus" },
-//     ]),
-//   ),
-// );
-
-// 2) Standalone
-document.body.append(Console.log("Just one line", { a: 1, b: 1 }));
-document.body.append(Console.warn("Standalone warning"));
-document.body.append(Console.table([1, 2, 3]));
-
-// 3) Live
-// const feed = createFeed();
-// Hook(console, (e) => feed.push(e));
-// globalThis.c = ConsoleFeed({ feed, variant: theme.val });
-// document.body.append(c);
-
-// console.log("Hello from VanJS", 42, true, null, undefined);
+export { Hook } from "./hook/index.js";
+export { createFeed } from "./feed/index.js";
+export { ConsoleFeed, Console } from "./components/index.js";

package/src/components/ConsolePrompt.js

@@ -1,42 +0,0 @@
-import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-const { div, span, input } = van.tags;
-
-export function ConsolePrompt(feed) {
-  const hist = [];
-  let hi = 0;
-
-  const run = (code) => {
-    feed.push({ method: "command", args: [code] });
-    try {
-      feed.push({ method: "result", args: [(0, eval)(code)] });
-    } catch (err) {
-      feed.push({ method: "error", args: [err] });
-    }
-  };
-
-  return div(
-    { class: "cf-prompt" },
-    span("\u203A"),
-    input({
-      placeholder: "Run JavaScript",
-      "aria-label": "Run JavaScript",
-      spellcheck: false,
-      autocomplete: "off",
-      onkeydown: (e) => {
-        const el = e.target;
-        if (e.key === "Enter" && el.value.trim()) {
-          hist.push(el.value);
-          hi = hist.length;
-          run(el.value);
-          el.value = "";
-        } else if (e.key === "ArrowUp" && hi > 0) {
-          el.value = hist[--hi];
-          e.preventDefault();
-        } else if (e.key === "ArrowDown") {
-          el.value =
-            hi < hist.length - 1 ? hist[++hi] : ((hi = hist.length), "");
-        }
-      },
-    }),
-  );
-}

package/src/components/ConsoleToolbar.js

@@ -1,48 +0,0 @@
-import van from "https://cdn.jsdelivr.net/npm/vanjs-core@1.5.3/src/van.js";
-const { div, span, input, button } = van.tags;
-import { LEVELS } from "../utils/index.js";
-
-export function ConsoleToolbar(feed) {
-  const chipButtons = {};
-  const countSpans = {};
-
-  const updateToolbar = () => {
-    LEVELS.forEach((l) => {
-      if (chipButtons[l]) {
-        const isOn = feed.levels[l];
-        chipButtons[l].className = `cf-chip ${l}` + (isOn ? " on" : "");
-        chipButtons[l].setAttribute("aria-pressed", isOn);
-      }
-      if (countSpans[l]) {
-        countSpans[l].textContent = feed.getCount(l);
-      }
-    });
-  };
-
-  feed.addEventListener("filter-change", updateToolbar);
-
-  return div(
-    { class: "cf-bar" },
-    LEVELS.map((l) => {
-      countSpans[l] = span(feed.getCount(l));
-      chipButtons[l] = button(
-        {
-          class: `cf-chip ${l}` + (feed.levels[l] ? " on" : ""),
-          "aria-pressed": feed.levels[l],
-          onclick: () => feed.toggleLevel(l),
-        },
-        l,
-        " ",
-        countSpans[l],
-      );
-      return chipButtons[l];
-    }),
-    input({
-      type: "search",
-      placeholder: "Filter messages",
-      "aria-label": "Filter messages",
-      oninput: (e) => feed.setQuery(e.target.value),
-    }),
-    button({ onclick: () => feed.clear() }, "Clear"),
-  );
-}