what-text 0.8.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "what-text",
+  "version": "0.8.0",
+  "description": "Optional text engine for What Framework, powered by @chenglou/pretext",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "import": "./src/index.js"
+    }
+  },
+  "files": ["src"],
+  "sideEffects": false,
+  "peerDependencies": {
+    "what-core": ">=0.7.0",
+    "@chenglou/pretext": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@chenglou/pretext": {
+      "optional": true
+    }
+  },
+  "keywords": ["what-framework", "text", "pretext", "layout", "measurement"],
+  "author": "ZVN DEV (https://zvndev.com)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CelsianJs/what-framework"
+  }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { configureText, getTextConfig, measureText, clearMeasureCache, ensurePretext } from './text-engine.js';
+export { TextFlow } from './text/TextFlow.js';
+export { TextCanvas } from './text/TextCanvas.js';
+export { TextSVG } from './text/TextSVG.js';

package/src/text/TextCanvas.js

@@ -0,0 +1,55 @@
+// What Text - TextCanvas (ALPHA)
+// Renders text to <canvas> via Pretext layout. Requires @chenglou/pretext.
+// No text selection or a11y in alpha.
+// @alpha APIs may change without a major version bump.
+
+import { effect } from 'what-core';
+import { ensurePretext } from '../text-engine.js';
+
+function parseFontSize(fontStr) {
+  const match = fontStr.match(/(\d+(?:\.\d+)?)\s*px/i);
+  return match ? parseFloat(match[1]) : 16;
+}
+
+export function TextCanvas(props) {
+  const width = props.width || 300;
+  const height = props.height || 150;
+  const font = props.font || '16px sans-serif';
+  const children = props.children;
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  // Load Pretext async, then set up reactive rendering
+  ensurePretext().then((pretext) => {
+    effect(() => {
+      const text = typeof children === 'function' ? children() : children;
+      const ctx = canvas.getContext && canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.clearRect(0, 0, width, height);
+      ctx.font = font;
+      const lineHeight = parseFontSize(font) * 1.5;
+      const prepared = pretext.prepareWithSegments(String(text || ''), font);
+      const layout = pretext.layoutWithLines(prepared, width, lineHeight);
+      ctx.fillStyle = getComputedStyle(canvas).color || '#000';
+      ctx.textBaseline = 'top';
+      if (layout && Array.isArray(layout.lines)) {
+        for (const line of layout.lines) {
+          ctx.fillText(line.text, 0, line.start ? line.start.segmentIndex * lineHeight : layout.lines.indexOf(line) * lineHeight);
+        }
+      }
+    });
+  }).catch((err) => {
+    // Show error in canvas
+    const ctx = canvas.getContext && canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = '#f44';
+      ctx.font = '14px sans-serif';
+      ctx.fillText('TextCanvas requires @chenglou/pretext', 10, 30);
+      ctx.fillText('npm install @chenglou/pretext', 10, 50);
+    }
+  });
+
+  return canvas;
+}

package/src/text/TextFlow.js

@@ -0,0 +1,49 @@
+// What Text - TextFlow (ALPHA)
+// Magazine-style text layout. Falls back to CSS columns without Pretext.
+// @alpha APIs may change without a major version bump.
+
+import { effect } from 'what-core';
+import { ensurePretext, resolveFontInfo, fontInfoToString } from '../text-engine.js';
+
+export function TextFlow(props) {
+  const columns = props.columns || 1;
+  const around = props.around;
+  const gap = props.gap || '1rem';
+  const children = props.children;
+
+  const el = document.createElement('div');
+  el.style.columnCount = String(columns);
+  el.style.columnGap = gap;
+
+  // Set text content reactively
+  let currentText = '';
+  effect(() => {
+    const text = typeof children === 'function' ? children() : children;
+    currentText = String(text || '');
+    el.textContent = currentText;
+  });
+
+  // Warn if around is set but Pretext is missing — check AFTER the text effect
+  // runs so there's no race condition reading el.textContent
+  if (around) {
+    ensurePretext().then((pretext) => {
+      if (!el.isConnected) return;
+      const font = resolveFontInfo(el);
+      const fontStr = fontInfoToString(font);
+      const width = el.clientWidth || 400;
+      const lineHeight = parseFloat(font.lineHeight) || parseFloat(font.fontSize) * 1.2;
+      const prepared = pretext.prepareWithSegments(currentText, fontStr);
+      const layout = pretext.layoutWithLines(prepared, width / columns, lineHeight);
+      if (typeof layout === 'object') {
+        el.setAttribute('data-pretext', 'laid-out');
+      }
+    }).catch(() => {
+      console.warn(
+        '[what-text] TextFlow: `around` prop requires @chenglou/pretext for shape-flow layout. ' +
+        'Install it with: npm i @chenglou/pretext'
+      );
+    });
+  }
+
+  return el;
+}

package/src/text/TextSVG.js

@@ -0,0 +1,77 @@
+// What Text - TextSVG (ALPHA)
+// Renders text as SVG <text>/<tspan> elements via Pretext layout.
+// Requires @chenglou/pretext.
+// @alpha APIs may change without a major version bump.
+
+import { effect } from 'what-core';
+import { ensurePretext } from '../text-engine.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function parseFontSize(fontStr) {
+  const match = fontStr.match(/(\d+(?:\.\d+)?)\s*px/i);
+  return match ? parseFloat(match[1]) : 16;
+}
+
+export function TextSVG(props) {
+  const width = props.width || 300;
+  const height = props.height || 150;
+  const font = props.font || '16px sans-serif';
+  const children = props.children;
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('width', String(width));
+  svg.setAttribute('height', String(height));
+  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+
+  const textEl = document.createElementNS(SVG_NS, 'text');
+  svg.appendChild(textEl);
+
+  // Pool of tspan elements to avoid DOM thrash on every update
+  let tspanPool = [];
+
+  ensurePretext().then((pretext) => {
+    effect(() => {
+      const text = typeof children === 'function' ? children() : children;
+      const fSize = parseFontSize(font);
+      const lineHeight = fSize * 1.5;
+      const prepared = pretext.prepareWithSegments(String(text || ''), font);
+      const layout = pretext.layoutWithLines(prepared, width, lineHeight);
+      const lines = layout && Array.isArray(layout.lines) ? layout.lines : [];
+
+      // Grow pool if needed
+      while (tspanPool.length < lines.length) {
+        const tspan = document.createElementNS(SVG_NS, 'tspan');
+        textEl.appendChild(tspan);
+        tspanPool.push(tspan);
+      }
+      // Hide excess tspans
+      for (let i = lines.length; i < tspanPool.length; i++) {
+        tspanPool[i].textContent = '';
+        tspanPool[i].setAttribute('display', 'none');
+      }
+      // Update visible tspans
+      for (let i = 0; i < lines.length; i++) {
+        const tspan = tspanPool[i];
+        const line = lines[i];
+        tspan.setAttribute('x', '0');
+        tspan.setAttribute('y', String(fSize + i * lineHeight));
+        tspan.setAttribute('font-size', String(fSize));
+        tspan.setAttribute('font-family', font.replace(/^\d+(?:\.\d+)?\s*px\s*/, '').trim() || 'sans-serif');
+        tspan.setAttribute('display', '');
+        tspan.textContent = line.text;
+      }
+    });
+  }).catch(() => {
+    // Show error in SVG
+    const errText = document.createElementNS(SVG_NS, 'text');
+    errText.setAttribute('x', '10');
+    errText.setAttribute('y', '30');
+    errText.setAttribute('fill', '#f44');
+    errText.setAttribute('font-size', '14');
+    errText.textContent = 'TextSVG requires @chenglou/pretext';
+    svg.appendChild(errText);
+  });
+
+  return svg;
+}

package/src/text/index.js

@@ -0,0 +1,4 @@
+// What Text - Alpha Text Components barrel
+export { TextFlow } from './TextFlow.js';
+export { TextCanvas } from './TextCanvas.js';
+export { TextSVG } from './TextSVG.js';

package/src/text-engine.js

@@ -0,0 +1,195 @@
+// What Text — Optional text engine for What Framework
+// Powered by @chenglou/pretext. Registers a text insertion hook with what-core.
+// All Pretext access flows through this module.
+
+import { _setTextInsertHook } from 'what-core';
+import { isHydrating } from 'what-core/render';
+
+// --- Configuration ---
+
+const KNOWN_KEYS = new Set(['measure', 'cacheSize']);
+const DEFAULT_CONFIG = { measure: false, cacheSize: 1000 };
+let textConfig = { ...DEFAULT_CONFIG };
+
+export function configureText(overrides) {
+  if (!overrides || typeof overrides !== 'object') return;
+  for (const key of Object.keys(overrides)) {
+    if (KNOWN_KEYS.has(key)) {
+      textConfig[key] = overrides[key];
+    }
+  }
+  // Register or unregister the hook with what-core's render.js
+  if (textConfig.measure) {
+    _setTextInsertHook(measureTextIfEnabled);
+  } else {
+    _setTextInsertHook(null);
+  }
+}
+
+export function getTextConfig() {
+  return { ...textConfig };
+}
+
+// --- Lazy Pretext loader ---
+
+let pretextModule = null;
+let pretextLoadPromise = null;
+
+export async function ensurePretext() {
+  if (pretextModule) return pretextModule;
+  if (pretextLoadPromise) return pretextLoadPromise;
+  pretextLoadPromise = import('@chenglou/pretext').then((mod) => {
+    pretextModule = mod;
+    return mod;
+  }).catch((err) => {
+    pretextLoadPromise = null;
+    throw new Error(
+      `[what-text] Failed to load @chenglou/pretext. ` +
+      `Install it with: npm install @chenglou/pretext\n` +
+      `Original error: ${err.message}`
+    );
+  });
+  return pretextLoadPromise;
+}
+
+export function _setPretextForTests(fake) {
+  pretextModule = fake;
+  pretextLoadPromise = Promise.resolve(fake);
+}
+
+export function _getPretextSync() {
+  return pretextModule;
+}
+
+// --- LRU measure cache ---
+
+const measureCache = new Map();
+
+function cacheGet(key) {
+  if (!measureCache.has(key)) return undefined;
+  const value = measureCache.get(key);
+  measureCache.delete(key);
+  measureCache.set(key, value);
+  return value;
+}
+
+function cacheSet(key, value) {
+  if (measureCache.has(key)) {
+    measureCache.delete(key);
+  } else if (measureCache.size >= textConfig.cacheSize) {
+    const oldest = measureCache.keys().next().value;
+    measureCache.delete(oldest);
+  }
+  measureCache.set(key, value);
+}
+
+export async function measureText(text, font, containerWidth, lineHeight) {
+  await ensureFontsReady();
+  const pretext = await ensurePretext();
+  const cacheKey = `${font}|${text}`;
+  let prepared = cacheGet(cacheKey);
+  if (!prepared) {
+    prepared = pretext.prepareWithSegments(text, font);
+    cacheSet(cacheKey, prepared);
+  }
+  return pretext.layoutWithLines(prepared, containerWidth, lineHeight);
+}
+
+export function clearMeasureCache() {
+  measureCache.clear();
+}
+
+// --- Font resolution ---
+
+const FONT_DEFAULTS = {
+  fontFamily: 'sans-serif',
+  fontSize: '16px',
+  fontWeight: '400',
+  fontStyle: 'normal',
+  lineHeight: 'normal',
+};
+
+export function resolveFontInfo(el) {
+  if (typeof getComputedStyle === 'undefined' || !el) {
+    return { ...FONT_DEFAULTS };
+  }
+  const style = getComputedStyle(el);
+  return {
+    fontFamily: style.fontFamily || FONT_DEFAULTS.fontFamily,
+    fontSize: style.fontSize || FONT_DEFAULTS.fontSize,
+    fontWeight: style.fontWeight || FONT_DEFAULTS.fontWeight,
+    fontStyle: style.fontStyle || FONT_DEFAULTS.fontStyle,
+    lineHeight: style.lineHeight || FONT_DEFAULTS.lineHeight,
+  };
+}
+
+export function fontInfoToString(info) {
+  return `${info.fontStyle} ${info.fontWeight} ${info.fontSize} ${info.fontFamily}`;
+}
+
+// --- Font size parsing (fixes parseFloat bug) ---
+// parseFloat('700 14px Inter') returns 700, not 14.
+// This extracts the actual font size from a CSS font shorthand.
+
+function parseFontSize(fontStr) {
+  const match = fontStr.match(/(\d+(?:\.\d+)?)\s*px/i);
+  return match ? parseFloat(match[1]) : 16;
+}
+
+// --- Font-ready gate ---
+
+let fontsReadyPromise = null;
+
+export function ensureFontsReady() {
+  if (fontsReadyPromise) return fontsReadyPromise;
+  if (typeof document === 'undefined' || !document.fonts || !document.fonts.ready) {
+    fontsReadyPromise = Promise.resolve();
+    return fontsReadyPromise;
+  }
+  fontsReadyPromise = document.fonts.ready.then(() => {
+    document.fonts.addEventListener('loadingdone', () => {
+      clearMeasureCache();
+    });
+  });
+  return fontsReadyPromise;
+}
+
+// --- Measure hook (registered with what-core via _setTextInsertHook) ---
+
+let _hookInvocationCount = 0;
+
+export function measureTextIfEnabled(parent, text) {
+  if (!textConfig.measure) return;
+  if (isHydrating()) return;
+  _hookInvocationCount++;
+  queueMicrotask(() => {
+    if (!parent || !parent.ownerDocument) return;
+    if (typeof parent.isConnected === 'boolean' && !parent.isConnected) return;
+    const font = resolveFontInfo(parent);
+    const fontStr = fontInfoToString(font);
+    const width = parent.clientWidth || 0;
+    const lh = parseFloat(font.lineHeight) || parseFontSize(font.fontSize) * 1.2;
+    if (width === 0) return;
+    measureText(text, fontStr, width, lh).catch(() => {});
+  });
+}
+
+export function _wasMeasureHookInvoked() {
+  return _hookInvocationCount > 0;
+}
+
+export function _resetMeasureHookInvocation() {
+  _hookInvocationCount = 0;
+}
+
+// --- Test helpers ---
+
+export function _resetTextEngineForTests() {
+  textConfig = { ...DEFAULT_CONFIG };
+  pretextModule = null;
+  pretextLoadPromise = null;
+  measureCache.clear();
+  fontsReadyPromise = null;
+  _hookInvocationCount = 0;
+  _setTextInsertHook(null);
+}