htmlboard 0.3.0 → 0.5.0

package/src/templates/components.js

@@ -0,0 +1,180 @@
+// components.js: every file in components/ is a custom element named after it, so
+// components/tx-item.html is <tx-item>. Designs load this file once, beside styles.css:
+//
+//   <script type="module" src="../components.js"></script>
+//
+// A component file is a piece of HTML (no <html>, <head> or <body>):
+//
+//   <!-- <tx-item name="Coffee" amount="-$6.75"></tx-item> -->   first: how to use it
+//   <b>{{name}}</b> <span class="amount">{{amount}}</span>          the element's attributes, as text
+//   <slot></slot> <slot name="icon"></slot>                         its content; its children with slot="icon"
+//   <style> & { display: flex } .amount { … } </style>              only for this element (& is the element)
+//   <script> this.… </script>                                       runs for each element, this = the element
+//
+// Relative links in it start from its file. Components can use other components.
+// Added by htmlboard (npx htmlboard components); yours to edit.
+
+const FOLDER = new URL('components/', import.meta.url);
+const AsyncFunction = (async () => {}).constructor;
+// At-rules that can't go inside a style rule: they stay at the top of the component's CSS
+const TOP_LEVEL_RULES = ['CSSKeyframesRule', 'CSSFontFaceRule', 'CSSPropertyRule', 'CSSCounterStyleRule',
+  'CSSFontFeatureValuesRule', 'CSSFontPaletteValuesRule'].map((name) => globalThis[name]).filter(Boolean);
+
+const loading = new Map(); // tag → its component loading
+const scripts = new Map(); // URL of a <script src> a component needs → it loading
+const built = new WeakSet();
+
+const isContent = (node) => node.nodeType === Node.ELEMENT_NODE || node.textContent.trim() !== '';
+const escape = (text) => text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+// Not "#…", "?…", "/…", "{{…}}" or with a scheme ("https:", "data:", "mailto:")
+const isRelative = (url) => url.trim() !== '' && !/^\s*([a-z][a-z\d+.-]*:|[/#?]|\{\{)/i.test(url);
+const absolute = (el, attribute, base) => new URL(el.getAttribute(attribute), base).href;
+
+// The elements of tags nobody defined yet, in root and under it, load their components. A custom
+// element's name has a hyphen: other elements can be undefined too (<tr is="…">), and aren't ours.
+function discover(root) {
+  for (const el of [root, ...root.querySelectorAll(':not(:defined)')]) {
+    if (el.localName.includes('-') && el.matches(':not(:defined)')) load(el.localName);
+  }
+}
+
+function load(tag) {
+  if (!loading.has(tag)) loading.set(tag, define(tag).catch((error) => console.error(`<${tag}>`, error)));
+  return loading.get(tag);
+}
+
+async function define(tag) {
+  const url = new URL(`${tag}.html`, FOLDER);
+  const response = await fetch(url);
+  if (!response.ok) {
+    if (!customElements.get(tag)) console.warn(`<${tag}>: there is no ${decodeURI(url.pathname)}`);
+    return;
+  }
+  const component = parse(await response.text(), url, tag);
+  await Promise.all(component.needs.map(addScript));
+  if (customElements.get(tag)) return; // defined by another script meanwhile
+  customElements.define(tag, class extends HTMLElement {
+    connectedCallback() {
+      if (built.has(this)) return;
+      built.add(this);
+      build(this, component);
+    }
+  });
+}
+
+// A component file: its markup, without its <style>, <script>, comments and what the canvas reads.
+function parse(source, url, tag) {
+  const template = document.createElement('template');
+  template.innerHTML = source;
+  const { content } = template;
+  let css = '';
+  let code = '';
+  const needs = [];
+  for (const node of [...content.children]) {
+    if (!['style', 'script', 'link', 'meta', 'title'].includes(node.localName)) continue;
+    node.remove();
+    if (node.localName === 'style') css += `${node.textContent}\n`;
+    else if (node.localName === 'script' && node.hasAttribute('src')) needs.push(absolute(node, 'src', url));
+    else if (node.localName === 'script') code += `${node.textContent}\n`;
+    else if (node.localName === 'link' && /\bstylesheet\b/i.test(node.getAttribute('rel'))) addLink(absolute(node, 'href', url));
+  }
+  const walker = document.createTreeWalker(content, NodeFilter.SHOW_COMMENT);
+  const comments = [];
+  while (walker.nextNode()) comments.push(walker.currentNode);
+  for (const comment of comments) comment.remove();
+  for (const el of content.querySelectorAll('[src], [href], [poster]')) {
+    for (const attribute of ['src', 'href', 'poster']) {
+      const value = el.getAttribute(attribute);
+      if (value && isRelative(value)) el.setAttribute(attribute, new URL(value, url).href);
+    }
+  }
+  addStyle(tag, css, url);
+  let run = null;
+  if (code.trim()) {
+    try {
+      run = new AsyncFunction(code);
+    } catch (error) {
+      console.error(`<${tag}> <script>`, error);
+    }
+  }
+  return { markup: template.innerHTML.trim(), run, needs };
+}
+
+// An element of the component: the markup with the element's attributes, and its content in the slots.
+function build(el, { markup, run }) {
+  let depth = 0;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.localName === el.localName && ++depth > 25) return console.error(`<${el.localName}> holds itself`);
+  }
+  const template = document.createElement('template');
+  template.innerHTML = markup.replace(/\{\{\s*([^{}\s]+)\s*\}\}/g, (_, name) => escape(el.getAttribute(name) ?? ''));
+  const { content } = template;
+  const given = [...el.childNodes];
+  const slots = content.querySelectorAll('slot');
+  if (slots.length) {
+    const placed = new Set();
+    for (const slot of slots) {
+      const name = slot.getAttribute('name') || '';
+      const nodes = given.filter((node) => !placed.has(node) && (node.getAttribute?.('slot') || '') === name);
+      nodes.forEach((node) => placed.add(node));
+      // A slot nobody fills shows what it holds
+      slot.replaceWith(...(nodes.some(isContent) ? nodes : slot.childNodes));
+    }
+  } else if (given.some(isContent)) {
+    // <tx-item /> isn't self-closing in HTML: what came after it was parsed into it, so it goes back
+    el.after(...given);
+  }
+  el.replaceChildren(content);
+  run?.call(el).catch((error) => console.error(`<${el.localName}> <script>`, error));
+}
+
+// The component's box and CSS, once per page. Its CSS goes inside :where(tag) { … }, so it only
+// reaches the element (& is the element itself) without adding weight to its selectors. It comes
+// after the shared stylesheets and before the page's own <style>, so a design can still restyle it.
+function addStyle(tag, css, url) {
+  css = css.replace(/url\(\s*(['"]?)(.*?)\1\s*\)/g, (whole, quote, value) =>
+    isRelative(value) ? `url("${new URL(value, url)}")` : whole);
+  const top = [];
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    for (const rule of sheet.cssRules) if (TOP_LEVEL_RULES.some((type) => rule instanceof type)) top.push(rule.cssText);
+  } catch {
+    // Nothing to take to the top
+  }
+  const style = document.createElement('style');
+  style.dataset.component = tag;
+  style.textContent = `:where(${tag}:not([hidden])) { display: block; }\n${top.join('\n')}\n:where(${tag}) {\n${css}\n}\n`;
+  toHead(style);
+}
+
+function addLink(href) {
+  if ([...document.querySelectorAll('link[rel~="stylesheet"]')].some((link) => link.href === href)) return;
+  toHead(Object.assign(document.createElement('link'), { rel: 'stylesheet', href }));
+}
+
+// A script a component needs (<script src="…">), loaded once, before its elements are built
+function addScript(src) {
+  if (!scripts.has(src)) {
+    scripts.set(src, [...document.scripts].some((script) => script.src === src) ? Promise.resolve() : new Promise((resolve) => {
+      const script = Object.assign(document.createElement('script'), { src });
+      script.onload = script.onerror = resolve;
+      document.head.append(script);
+    }));
+  }
+  return scripts.get(src);
+}
+
+// Ahead of the page's own <style>, after everything else in the <head>
+function toHead(node) {
+  document.head.insertBefore(node, document.head.querySelector('style:not([data-component])'));
+}
+
+// Every element of the page gets built, and so do the ones added later (by the page's scripts, or
+// inside other components).
+discover(document.documentElement);
+new MutationObserver((records) => {
+  for (const record of records) {
+    for (const node of record.addedNodes) if (node.nodeType === Node.ELEMENT_NODE) discover(node);
+  }
+}).observe(document.documentElement, { childList: true, subtree: true });

package/src/templates/styles.css

@@ -0,0 +1,155 @@
+/*
+ * Shared styles for every design in this folder: tokens, base styles, and the
+ * classes designs and components are built with (cards, buttons, badges…).
+ * Designs link it (<link rel="stylesheet" href="../styles.css">) and keep only
+ * what is specific to them in their own <style>. The components in components/
+ * keep their own CSS in their files.
+ */
+
+/* Tokens */
+:root {
+  --bg: #0b0d13;
+  --surface: #141724;
+  --surface-2: #1c2030;
+  --border: #23283c;
+  --text: #f1f5f9;
+  --text-muted: #94a3b8;
+  --text-subtle: #64748b;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --accent-light: #818cf8;
+  --accent-glow: rgba(99, 102, 241, 0.35);
+  --emerald: #10b981;
+  --amber: #f59e0b;
+  --rose: #f43f5e;
+  --purple: #a855f7;
+  --radius: 8px;
+  --radius-lg: 14px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* Base */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+}
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+}
+a { color: inherit; text-decoration: none; }
+
+/* Text */
+.muted { color: var(--text-muted); }
+.label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
+.page-sub { margin-top: 4px; font-size: 14px; color: var(--text-muted); }
+
+/* Desktop app: <app-sidebar> beside a column that scrolls */
+.app { display: flex; height: 100vh; overflow: hidden; }
+.app-main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
+.app-content { display: flex; flex-direction: column; gap: 24px; padding: 28px 32px; }
+
+/* Card */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font: 600 13px var(--font);
+  color: var(--text);
+  background: var(--surface-2);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-secondary { border-color: var(--border); }
+.btn-secondary:hover { background: #262c44; }
+.btn-outline { background: transparent; border-color: #3b4260; }
+.btn-outline:hover { background: rgba(255, 255, 255, 0.05); }
+.btn-danger { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: var(--rose); }
+.btn-danger:hover { background: rgba(244, 63, 94, 0.25); }
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--accent-light);
+}
+.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.badge-emerald { background: rgba(16, 185, 129, 0.15); color: var(--emerald); }
+.badge-amber { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
+.badge-rose { background: rgba(244, 63, 94, 0.15); color: var(--rose); }
+
+/* Inputs */
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field > span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
+.input {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 9px 12px;
+  font: 13px var(--font);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+.input:focus { border-color: var(--accent); }
+
+/* Avatar */
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--purple));
+  font-size: 14px;
+  font-weight: 700;
+}
+
+/* Table */
+.table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.table th {
+  padding: 0 16px 12px 0;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  font-weight: 500;
+  color: var(--text-subtle);
+}
+.table td { padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
+.table .badge { padding: 3px 8px; font-size: 11px; }