@birdapi/velinstyle 0.8.0 → 0.9.0

package/core/highlight/highlight.js

@@ -0,0 +1,114 @@
+/** @import { LexerFn } from './types.js' */
+import { getLanguage, lazyLoadLanguage, normalizeLanguage } from './registry.js';
+import { applyHighlight } from './render.js';
+
+/**
+ * @param {Element} el
+ * @returns {string}
+ */
+export function resolveLanguage(el) {
+  const pre = el.tagName === 'PRE' ? el : el.closest('pre');
+  const code = el.tagName === 'CODE' ? el : pre?.querySelector('code') || el;
+  const host = pre || code;
+
+  const fromAttr =
+    host.getAttribute('language') ||
+    host.getAttribute('data-language') ||
+    host.getAttribute('velin-code') ||
+    '';
+
+  if (fromAttr && fromAttr !== 'true') return normalizeLanguage(fromAttr);
+
+  const cls = code?.className || '';
+  const langMatch = cls.match(/\blanguage-([\w-]+)\b/i);
+  if (langMatch) return normalizeLanguage(langMatch[1]);
+
+  return '';
+}
+
+/**
+ * @param {Element} el
+ * @returns {string}
+ */
+export function getSourceText(el) {
+  const code = el.tagName === 'CODE' ? el : el.querySelector('code');
+  const target = code || el;
+  if (target.dataset.velinSource != null) return target.dataset.velinSource;
+  const html = target.innerHTML;
+  if (html && /<|>|&/.test(html)) {
+    const ta = document.createElement('textarea');
+    ta.innerHTML = html.replace(/<br\s*\/?>/gi, '\n');
+    if (ta.value) return ta.value;
+  }
+  return target.textContent || '';
+}
+
+/**
+ * @param {Element} el
+ * @param {object} [options]
+ * @param {string} [options.language]
+ * @param {LexerFn} [options.lexer]
+ */
+export async function highlightElement(el, options = {}) {
+  if (el.dataset.velinHighlighted === '1') return;
+  const pre = el.tagName === 'PRE' ? el : el.closest('pre') || el;
+  const codeEl =
+    el.tagName === 'CODE' ? el : pre.querySelector('code') || document.createElement('code');
+
+  if (!pre.querySelector('code') && codeEl !== el) {
+    const text = getSourceText(pre);
+    codeEl.textContent = text;
+    pre.textContent = '';
+    pre.appendChild(codeEl);
+  }
+
+  if (!codeEl.dataset.velinSource) {
+    codeEl.dataset.velinSource = codeEl.textContent || '';
+  }
+
+  const lang = options.language || resolveLanguage(pre);
+  if (!lang) return;
+
+  pre.classList.add('velin-syntax-pending');
+  codeEl.classList.add('velin-syntax-pending');
+
+  let lexer = options.lexer || getLanguage(lang);
+  if (!lexer) lexer = await lazyLoadLanguage(lang);
+  if (!lexer) {
+    lexer = getLanguage('text') || (await lazyLoadLanguage('text'));
+  }
+
+  const source = codeEl.dataset.velinSource || getSourceText(codeEl) || '';
+  if (!lexer) {
+    codeEl.textContent = source;
+    pre.classList.remove('velin-syntax-pending');
+    codeEl.classList.remove('velin-syntax-pending');
+    pre.classList.add('velin-syntax-ready');
+    codeEl.classList.add('velin-syntax-ready');
+    return;
+  }
+
+  try {
+    const tokens = lexer(source);
+    applyHighlight(codeEl, tokens);
+    codeEl.dataset.velinHighlighted = '1';
+    pre.dataset.velinHighlighted = '1';
+  } catch (err) {
+    console.warn('[velin-highlight]', lang, err);
+    codeEl.textContent = source;
+  }
+  pre.classList.remove('velin-syntax-pending');
+  codeEl.classList.remove('velin-syntax-pending');
+  pre.classList.add('velin-syntax-ready');
+  codeEl.classList.add('velin-syntax-ready');
+}
+
+/**
+ * @param {ParentNode} [root]
+ */
+export async function highlightAll(root = document) {
+  const blocks = root.querySelectorAll(
+    'pre[velin-code], pre[data-language], pre code[class*="language-"], [velin-code-block] pre, .velin-doc-example__code pre',
+  );
+  await Promise.all([...blocks].map((el) => highlightElement(el)));
+}

package/core/highlight/index.js

@@ -0,0 +1,29 @@
+export {
+  registerLanguage,
+  getLanguage,
+  lazyLoadLanguage,
+  listLanguages,
+  normalizeLanguage,
+} from './registry.js';
+export { escapeHtml, renderTokens, applyHighlight } from './render.js';
+export {
+  resolveLanguage,
+  getSourceText,
+  highlightElement,
+  highlightAll,
+} from './highlight.js';
+export { initHighlight, observeCodeBlocks } from './observe.js';
+
+import { highlightElement, highlightAll } from './highlight.js';
+import { initHighlight, observeCodeBlocks } from './observe.js';
+import { registerLanguage, lazyLoadLanguage, listLanguages } from './registry.js';
+
+export const velinSyntax = {
+  highlightElement,
+  highlightAll,
+  initHighlight,
+  observeCodeBlocks,
+  registerLanguage,
+  lazyLoadLanguage,
+  listLanguages,
+};

package/core/highlight/languages/_utils.js

@@ -0,0 +1,52 @@
+/** @import { Token } from '../types.js' */
+
+/**
+ * @param {string} code
+ * @param {Array<{ type: Token['type']; re: RegExp }>} rules
+ * @returns {Token[]}
+ */
+export function tokenize(code, rules) {
+  /** @type {Token[]} */
+  const tokens = [];
+  let i = 0;
+  while (i < code.length) {
+    let matched = false;
+    for (const { type, re } of rules) {
+      re.lastIndex = i;
+      const m = re.exec(code);
+      if (m && m.index === i) {
+        tokens.push({ type, value: m[0] });
+        i += m[0].length;
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      const next = tokens[tokens.length - 1];
+      if (next?.type === 'plain') {
+        next.value += code[i];
+      } else {
+        tokens.push({ type: 'plain', value: code[i] });
+      }
+      i += 1;
+    }
+  }
+  return tokens;
+}
+
+/**
+ * @param {string} code
+ * @param {Record<string, string>} keywords
+ * @param {Array<{ type: Token['type']; re: RegExp }>} baseRules
+ */
+export function tokenizeWithKeywords(code, keywords, baseRules) {
+  const rules = [
+    ...baseRules,
+    {
+      type: 'keyword',
+      re: new RegExp(`\\b(${Object.keys(keywords).join('|')})\\b`, 'y'),
+    },
+    { type: 'identifier', re: /\b[A-Za-z_$][\w$]*\b/y },
+  ];
+  return tokenize(code, rules);
+}

package/core/highlight/languages/blade.js

@@ -0,0 +1,16 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /{{--[\s\S]*?--}}/y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'keyword', re: /@(?:vite|csrf|auth|guest|section|endsection|yield|extends|include|push|endpush|stack|once|endonce|forelse|empty|endempty|can|endcan|cannot|endcannot)\b/y },
+  { type: 'operator', re: /{{|}}|{!!|!!}|@[{}]/y },
+  { type: 'punctuation', re: /[()[\],]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexBlade(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/css.js

@@ -0,0 +1,26 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  important: 1,
+  inherit: 1,
+  initial: 1,
+  unset: 1,
+  revert: 1,
+};
+
+const RULES = [
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'number', re: /#[\da-fA-F]{3,8}\b|\b\d+(?:\.\d+)?(?:%|[a-z]+)?\b/y },
+  { type: 'tag', re: /\.[\w-]+|#[\w-]+/y },
+  { type: 'attr-name', re: /[\w-]+(?=\s*:)/y },
+  { type: 'punctuation', re: /[{}:;,()]/y },
+  { type: 'operator', re: /[+\-*/>~]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexCss(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, RULES);
+}

package/core/highlight/languages/html.js

@@ -0,0 +1,17 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /<!--[\s\S]*?-->/y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'tag', re: /<\/?[\w-]+/y },
+  { type: 'punctuation', re: /[<>/=]/y },
+  { type: 'attr-name', re: /\s[\w-]+(?==)/y },
+  { type: 'attr-value', re: /=(?:"[^"]*"|'[^']*'|[^\s>]+)/y },
+];
+
+/** @type {LexerFn} */
+export default function lexHtml(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/js.js

@@ -0,0 +1,58 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  const: 1,
+  let: 1,
+  var: 1,
+  function: 1,
+  return: 1,
+  if: 1,
+  else: 1,
+  for: 1,
+  while: 1,
+  do: 1,
+  switch: 1,
+  case: 1,
+  break: 1,
+  continue: 1,
+  new: 1,
+  class: 1,
+  extends: 1,
+  import: 1,
+  export: 1,
+  from: 1,
+  default: 1,
+  async: 1,
+  await: 1,
+  try: 1,
+  catch: 1,
+  finally: 1,
+  throw: 1,
+  typeof: 1,
+  instanceof: 1,
+  in: 1,
+  of: 1,
+  true: 1,
+  false: 1,
+  null: 1,
+  undefined: 1,
+  void: 1,
+  this: 1,
+};
+
+const BASE = [
+  { type: 'comment', re: /\/\/[^\n]*/y },
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'string', re: /`(?:\\.|[^`\\])*`/y },
+  { type: 'number', re: /\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/y },
+  { type: 'operator', re: /[+\-*/%=<>!&|^~?:]+/y },
+  { type: 'punctuation', re: /[{}[\]();,.]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexJs(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, BASE);
+}

package/core/highlight/languages/json.js

@@ -0,0 +1,14 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'number', re: /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/y },
+  { type: 'keyword', re: /\b(true|false|null)\b/y },
+  { type: 'punctuation', re: /[{}[\]:,]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexJson(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/markdown.js

@@ -0,0 +1,16 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /<!--[\s\S]*?-->/y },
+  { type: 'string', re: /```[\s\S]*?```/y },
+  { type: 'string', re: /`[^`\n]+`/y },
+  { type: 'keyword', re: /#{1,6}\s[^\n]+/y },
+  { type: 'tag', re: /\[[^\]]+\]\([^)]+\)/y },
+  { type: 'operator', re: /[*_~]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexMarkdown(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/php.js

@@ -0,0 +1,39 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  function: 1,
+  return: 1,
+  if: 1,
+  else: 1,
+  elseif: 1,
+  foreach: 1,
+  while: 1,
+  class: 1,
+  new: 1,
+  public: 1,
+  private: 1,
+  protected: 1,
+  static: 1,
+  namespace: 1,
+  use: 1,
+  true: 1,
+  false: 1,
+  null: 1,
+};
+
+const RULES = [
+  { type: 'comment', re: /\/\/[^\n]*/y },
+  { type: 'comment', re: /#[^\n]*/y },
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'(?:\\.|[^'\\])*'/y },
+  { type: 'number', re: /\b\d+(?:\.\d+)?\b/y },
+  { type: 'operator', re: /=>|\+\+|--|===|!==|==|!=|<=|>=|->|\?\?|[=+\-*/%.<>!&|^~?:]/y },
+  { type: 'punctuation', re: /[{}[\]();,.]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexPhp(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, RULES);
+}

package/core/highlight/languages/plain.js

@@ -0,0 +1,7 @@
+/** @import { LexerFn } from '../types.js' */
+
+/** @type {LexerFn} */
+export default function lexPlain(code) {
+  if (!code) return [];
+  return [{ type: 'plain', value: code }];
+}

package/core/highlight/languages/shell.js

@@ -0,0 +1,33 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenizeWithKeywords } from './_utils.js';
+
+const KEYWORDS = {
+  if: 1,
+  then: 1,
+  else: 1,
+  fi: 1,
+  for: 1,
+  do: 1,
+  done: 1,
+  while: 1,
+  case: 1,
+  esac: 1,
+  function: 1,
+  return: 1,
+  export: 1,
+  local: 1,
+};
+
+const RULES = [
+  { type: 'comment', re: /#[^\n]*/y },
+  { type: 'string', re: /"(?:\\.|[^"\\])*"/y },
+  { type: 'string', re: /'[^']*'/y },
+  { type: 'number', re: /\b\d+\b/y },
+  { type: 'operator', re: /[|&<>]/y },
+  { type: 'punctuation', re: /[();]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexShell(code) {
+  return tokenizeWithKeywords(code, KEYWORDS, RULES);
+}

package/core/highlight/languages/sql.js

@@ -0,0 +1,20 @@
+/** @import { LexerFn } from '../types.js' */
+import { tokenize } from './_utils.js';
+
+const RULES = [
+  { type: 'comment', re: /--[^\n]*/y },
+  { type: 'comment', re: /\/\*[\s\S]*?\*\//y },
+  { type: 'string', re: /'(?:''|[^'])*'/y },
+  { type: 'number', re: /\b\d+(?:\.\d+)?\b/y },
+  {
+    type: 'keyword',
+    re: /\b(?:SELECT|FROM|WHERE|INSERT|INTO|VALUES|UPDATE|SET|DELETE|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|NOT|NULL|AS|ORDER|BY|GROUP|HAVING|LIMIT|CREATE|TABLE|INDEX)\b/yi,
+  },
+  { type: 'operator', re: /[=<>!]+|,/y },
+  { type: 'punctuation', re: /[();]/y },
+];
+
+/** @type {LexerFn} */
+export default function lexSql(code) {
+  return tokenize(code, RULES);
+}

package/core/highlight/languages/typescript.js

@@ -0,0 +1,28 @@
+/** @import { LexerFn } from '../types.js' */
+import lexJs from './js.js';
+
+const TS_KEYWORDS = new Set([
+  'type',
+  'interface',
+  'enum',
+  'implements',
+  'declare',
+  'namespace',
+  'readonly',
+  'public',
+  'private',
+  'protected',
+  'abstract',
+  'as',
+  'satisfies',
+  'keyof',
+]);
+
+/** @type {LexerFn} */
+export default function lexTypeScript(code) {
+  return lexJs(code).map((t) =>
+    t.type === 'identifier' && TS_KEYWORDS.has(t.value)
+      ? { type: 'keyword', value: t.value }
+      : t,
+  );
+}

package/core/highlight/observe.js

@@ -0,0 +1,53 @@
+import { highlightElement } from './highlight.js';
+import { observeInView } from '../motion/scheduler.js';
+
+/**
+ * Lazy-highlight code blocks when they enter the viewport.
+ * @param {ParentNode} [root]
+ * @param {object} [options]
+ * @param {string} [options.selector]
+ * @param {boolean} [options.immediate]
+ */
+export function initHighlight(root = document, options = {}) {
+  if (typeof document === 'undefined') return () => {};
+
+  const selector =
+    options.selector ||
+    [
+      'pre[velin-code]',
+      'pre[language]',
+      'pre[data-language]',
+      'pre code[class*="language-"]',
+      'velin-code-block pre',
+      '.velin-doc-example__code pre',
+    ].join(',');
+
+  const nodes = root.querySelectorAll(selector);
+  const teardowns = [];
+
+  const reduced =
+    typeof matchMedia !== 'undefined' &&
+    matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  for (const node of nodes) {
+    const pre = node.tagName === 'PRE' ? node : node.closest('pre');
+    if (!pre || pre.dataset.velinObserve === '1') continue;
+    pre.dataset.velinObserve = '1';
+
+    if (reduced || options.immediate) {
+      void highlightElement(pre);
+      continue;
+    }
+
+    pre.classList.add('velin-syntax-pending');
+    const stop = observeInView(pre, async (el) => {
+      await highlightElement(el);
+    });
+    teardowns.push(stop);
+  }
+
+  return () => teardowns.forEach((fn) => fn());
+}
+
+/** @deprecated alias */
+export const observeCodeBlocks = initHighlight;

package/core/highlight/registry.js

@@ -0,0 +1,107 @@
+/** @import { LexerFn } from './types.js' */
+
+/** @type {Map<string, LexerFn>} */
+const languages = new Map();
+
+/** @type {Map<string, Promise<LexerFn>>} */
+const loading = new Map();
+
+const LAZY_LOADERS = {
+  js: () => import('./languages/js.js'),
+  javascript: () => import('./languages/js.js'),
+  ts: () => import('./languages/typescript.js'),
+  typescript: () => import('./languages/typescript.js'),
+  html: () => import('./languages/html.js'),
+  xml: () => import('./languages/html.js'),
+  css: () => import('./languages/css.js'),
+  json: () => import('./languages/json.js'),
+  md: () => import('./languages/markdown.js'),
+  markdown: () => import('./languages/markdown.js'),
+  shell: () => import('./languages/shell.js'),
+  bash: () => import('./languages/shell.js'),
+  sh: () => import('./languages/shell.js'),
+  sql: () => import('./languages/sql.js'),
+  text: () => import('./languages/plain.js'),
+  plain: () => import('./languages/plain.js'),
+  txt: () => import('./languages/plain.js'),
+  markup: () => import('./languages/html.js'),
+  console: () => import('./languages/plain.js'),
+  php: () => import('./languages/php.js'),
+  blade: () => import('./languages/blade.js'),
+};
+
+/** @param {string} name */
+export function normalizeLanguage(name) {
+  const n = (name || '').trim().toLowerCase();
+  if (!n) return '';
+  if (n.startsWith('language-')) return normalizeLanguage(n.slice(9));
+  const map = {
+    javascript: 'js',
+    jsx: 'js',
+    typescript: 'ts',
+    tsx: 'ts',
+    markup: 'html',
+    xml: 'html',
+    svg: 'html',
+    bash: 'shell',
+    sh: 'shell',
+    zsh: 'shell',
+    md: 'markdown',
+    plaintext: 'text',
+    'plain-text': 'text',
+    yml: 'text',
+    yaml: 'text',
+    toml: 'text',
+    ini: 'text',
+    php8: 'php',
+  };
+  return map[n] || n;
+}
+
+/**
+ * @param {string} name
+ * @param {LexerFn} lexerFn
+ */
+export function registerLanguage(name, lexerFn) {
+  languages.set(normalizeLanguage(name), lexerFn);
+}
+
+/**
+ * @param {string} name
+ * @returns {LexerFn|undefined}
+ */
+export function getLanguage(name) {
+  return languages.get(normalizeLanguage(name));
+}
+
+/**
+ * @param {string} name
+ * @returns {Promise<LexerFn|undefined>}
+ */
+export async function lazyLoadLanguage(name) {
+  const key = normalizeLanguage(name);
+  if (!key) return undefined;
+  if (languages.has(key)) return languages.get(key);
+  if (loading.has(key)) return loading.get(key);
+
+  const loader = LAZY_LOADERS[key];
+  if (!loader) return undefined;
+
+  const p = loader().then((mod) => {
+    const fn = mod.default;
+    languages.set(key, fn);
+    loading.delete(key);
+    return fn;
+  });
+  loading.set(key, p);
+  return p;
+}
+
+/** @returns {string[]} */
+export function listLanguages() {
+  return [...new Set([...languages.keys(), ...Object.keys(LAZY_LOADERS)])];
+}
+
+// Eager-register JS for zero-config demos
+import lexJs from './languages/js.js';
+registerLanguage('js', lexJs);

package/core/highlight/render.js

@@ -0,0 +1,35 @@
+/** @import { Token } from './types.js' */
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
+
+/**
+ * @param {string} s
+ */
+export function escapeHtml(s) {
+  return s.replace(/[&<>"]/g, (c) => ESC[c] || c);
+}
+
+/**
+ * @param {Token[]} tokens
+ * @returns {string}
+ */
+export function renderTokens(tokens) {
+  return tokens
+    .map((t) => {
+      const type = t.type === 'plain' ? '' : t.type;
+      const cls = type ? `velin-token velin-token--${type}` : 'velin-token';
+      return `<span class="${cls}">${escapeHtml(t.value)}</span>`;
+    })
+    .join('');
+}
+
+/**
+ * @param {HTMLElement} codeEl
+ * @param {Token[]} tokens
+ */
+export function applyHighlight(codeEl, tokens) {
+  codeEl.innerHTML = renderTokens(tokens);
+  codeEl.classList.add('velin-syntax-ready');
+  codeEl.closest('pre')?.classList.add('velin-syntax-ready');
+  codeEl.closest('.velin-code-block')?.classList.add('velin-syntax-ready');
+}