@epoch32/visage 0.0.0-stage → 1.0.0

package/src/virtual/virtual-list.tsx

@@ -0,0 +1,185 @@
+import { For } from "../dom/control-flow";
+import { computed, signal } from "../signals";
+import { createVirtualizer } from "./virtualizer";
+
+export interface VirtualListProps<T> {
+  each: T[] | (() => T[]);
+  itemHeight: number | ((index: number) => number);
+  height?: number | string;
+  width?: number | string;
+  overscan?: number;
+  class?: string;
+  style?: Record<string, any> | (() => Record<string, any>);
+  children: (item: T, index: () => number) => any;
+}
+
+export function VirtualList<T>(props: VirtualListProps<T>) {
+  const scrollElement = signal<HTMLElement | null>(null);
+
+  const getItems = (): T[] =>
+    typeof props.each === "function" ? (props.each as () => T[])() : props.each;
+  const count = computed(() => getItems().length);
+
+  const parsedHeight =
+    typeof props.height === "number"
+      ? props.height
+      : Number.parseInt(String(props.height || 400), 10) || 400;
+
+  const virtualizer = createVirtualizer({
+    count,
+    itemHeight: props.itemHeight,
+    overscan: props.overscan ?? 3,
+    initialSize: parsedHeight,
+    getScrollElement: () => scrollElement()
+  });
+
+  const containerHeight =
+    typeof props.height === "number" ? `${props.height}px` : (props.height ?? "400px");
+
+  const containerWidth =
+    typeof props.width === "number" ? `${props.width}px` : (props.width ?? "100%");
+
+  return (
+    <div
+      ref={(el: HTMLElement) => {
+        scrollElement.set(el);
+      }}
+      class={props.class}
+      style={() => {
+        const customStyle = typeof props.style === "function" ? props.style() : props.style || {};
+        return {
+          overflowY: "auto",
+          overflowX: "hidden",
+          position: "relative",
+          height: containerHeight,
+          width: containerWidth,
+          WebkitOverflowScrolling: "touch",
+          ...customStyle
+        };
+      }}
+    >
+      <div
+        style={() => ({
+          height: `${virtualizer.totalSize()}px`,
+          width: "100%",
+          position: "relative",
+          pointerEvents: "none"
+        })}
+      >
+        <For each={() => virtualizer.virtualItems()}>
+          {(vItem) => {
+            const itemData = computed(() => getItems()[vItem.index]);
+            return (
+              <div
+                style={() => ({
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: `${vItem.size}px`,
+                  transform: `translateY(${vItem.start}px)`,
+                  pointerEvents: "auto",
+                  willChange: "transform"
+                })}
+              >
+                {props.children(itemData() as T, () => vItem.index)}
+              </div>
+            );
+          }}
+        </For>
+      </div>
+    </div>
+  );
+}
+
+export interface VirtualGridProps<T> {
+  data: T[][] | (() => T[][]);
+  rowHeight: number;
+  columnWidth: number;
+  height?: number | string;
+  width?: number | string;
+  overscan?: number;
+  children: (item: T, rowIndex: number, colIndex: number) => any;
+}
+
+export function VirtualGrid<T>(props: VirtualGridProps<T>) {
+  const scrollElement = signal<HTMLElement | null>(null);
+  const getData = (): T[][] =>
+    typeof props.data === "function" ? (props.data as () => T[][])() : props.data;
+
+  const rowCount = computed(() => getData().length);
+  const colCount = computed(() => {
+    const d = getData();
+    return d[0] ? d[0].length : 0;
+  });
+
+  const rowVirtualizer = createVirtualizer({
+    count: rowCount,
+    itemHeight: props.rowHeight,
+    overscan: props.overscan ?? 3,
+    getScrollElement: () => scrollElement()
+  });
+
+  const colVirtualizer = createVirtualizer({
+    count: colCount,
+    itemHeight: props.columnWidth,
+    overscan: props.overscan ?? 3,
+    horizontal: true,
+    getScrollElement: () => scrollElement()
+  });
+
+  const containerHeight =
+    typeof props.height === "number" ? `${props.height}px` : (props.height ?? "400px");
+
+  const containerWidth =
+    typeof props.width === "number" ? `${props.width}px` : (props.width ?? "100%");
+
+  return (
+    <div
+      ref={(el: HTMLElement) => {
+        scrollElement.set(el);
+      }}
+      style={{
+        overflow: "auto",
+        position: "relative",
+        height: containerHeight,
+        width: containerWidth,
+        WebkitOverflowScrolling: "touch"
+      }}
+    >
+      <div
+        style={() => ({
+          height: `${rowVirtualizer.totalSize()}px`,
+          width: `${colVirtualizer.totalSize()}px`,
+          position: "relative"
+        })}
+      >
+        <For each={() => rowVirtualizer.virtualItems()}>
+          {(r) => (
+            <For each={() => colVirtualizer.virtualItems()}>
+              {(c) => {
+                const rowData = getData()[r.index];
+                const item = rowData ? rowData[c.index] : undefined;
+                return (
+                  <div
+                    style={() => ({
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: `${c.size}px`,
+                      height: `${r.size}px`,
+                      transform: `translate(${c.start}px, ${r.start}px)`,
+                      willChange: "transform"
+                    })}
+                  >
+                    {props.children(item as T, r.index, c.index)}
+                  </div>
+                );
+              }}
+            </For>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}

package/src/virtual/virtualizer.ts

@@ -0,0 +1,274 @@
+import { computed, effect, onCleanup, type ReadonlySignal, signal } from "../signals";
+
+export interface VirtualItem {
+  index: number;
+  start: number;
+  size: number;
+  end: number;
+  key: number | string;
+}
+
+export interface VirtualizerOptions {
+  count: number | (() => number);
+  itemHeight: number | ((index: number) => number);
+  getScrollElement: () => HTMLElement | null;
+  overscan?: number;
+  horizontal?: boolean;
+  initialSize?: number;
+  estimateSize?: (index: number) => number;
+}
+
+export interface Virtualizer {
+  virtualItems: ReadonlySignal<VirtualItem[]>;
+  totalSize: ReadonlySignal<number>;
+  scrollOffset: ReadonlySignal<number>;
+  containerSize: ReadonlySignal<number>;
+  startIndex: ReadonlySignal<number>;
+  endIndex: ReadonlySignal<number>;
+  scrollToIndex: (index: number, options?: { align?: "start" | "center" | "end" | "auto" }) => void;
+  scrollToOffset: (offset: number) => void;
+  measureElement: (element: HTMLElement | null, index: number) => void;
+}
+
+export function createVirtualizer(options: VirtualizerOptions): Virtualizer {
+  const overscan = options.overscan ?? 3;
+  const isHorizontal = Boolean(options.horizontal);
+
+  const getCount = (): number =>
+    typeof options.count === "function"
+      ? (options.count as () => number)()
+      : (options.count as number);
+
+  const getItemHeight =
+    typeof options.itemHeight === "function"
+      ? options.itemHeight
+      : () => options.itemHeight as number;
+
+  const scrollOffset = signal(0);
+  const containerSize = signal(options.initialSize ?? 400);
+
+  // Dynamic measurement cache for variable height rows
+  const dynamicSizeCache = new Map<number, number>();
+
+  const getItemSize = (index: number): number => {
+    const cached = dynamicSizeCache.get(index);
+    if (cached !== undefined) return cached;
+    return getItemHeight(index);
+  };
+
+  // Compute prefix offsets for fast range calculation
+  const totalSize = computed(() => {
+    const count = getCount();
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      return count * options.itemHeight;
+    }
+    let total = 0;
+    for (let i = 0; i < count; i++) {
+      total += getItemSize(i);
+    }
+    return total;
+  });
+
+  const getOffsetForIndex = (targetIndex: number): number => {
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      return targetIndex * options.itemHeight;
+    }
+    let offset = 0;
+    for (let i = 0; i < targetIndex; i++) {
+      offset += getItemSize(i);
+    }
+    return offset;
+  };
+
+  const findIndexAtOffset = (offset: number): number => {
+    const count = getCount();
+    if (count === 0) return 0;
+
+    if (typeof options.itemHeight === "number" && dynamicSizeCache.size === 0) {
+      const idx = Math.floor(offset / options.itemHeight);
+      return Math.max(0, Math.min(count - 1, idx));
+    }
+
+    let low = 0;
+    let high = count - 1;
+
+    while (low <= high) {
+      const mid = (low + high) >> 1;
+      const midStart = getOffsetForIndex(mid);
+      const midEnd = midStart + getItemSize(mid);
+
+      if (offset < midStart) {
+        high = mid - 1;
+      } else if (offset >= midEnd) {
+        low = mid + 1;
+      } else {
+        return mid;
+      }
+    }
+
+    return Math.max(0, Math.min(count - 1, low));
+  };
+
+  const startIndex = computed(() => {
+    const offset = scrollOffset();
+    const rawStart = findIndexAtOffset(offset);
+    return Math.max(0, rawStart - overscan);
+  });
+
+  const endIndex = computed(() => {
+    const count = getCount();
+    if (count === 0) return 0;
+    const endOffset = scrollOffset() + (containerSize() || 500);
+    const rawEnd = findIndexAtOffset(endOffset);
+    return Math.min(count - 1, rawEnd + overscan);
+  });
+
+  const itemCache = new Map<number, VirtualItem>();
+
+  const virtualItems = computed(() => {
+    const count = getCount();
+    if (count === 0) return [];
+
+    const start = startIndex();
+    const end = endIndex();
+    const items: VirtualItem[] = [];
+
+    let currentStart = getOffsetForIndex(start);
+
+    for (let i = start; i <= end; i++) {
+      const size = getItemSize(i);
+      let item = itemCache.get(i);
+      if (!item || item.start !== currentStart || item.size !== size) {
+        item = {
+          index: i,
+          start: currentStart,
+          size,
+          end: currentStart + size,
+          key: i
+        };
+        itemCache.set(i, item);
+      }
+      items.push(item);
+      currentStart += size;
+    }
+
+    return items;
+  });
+
+  // Setup DOM event listeners and ResizeObserver
+  effect(() => {
+    const el = options.getScrollElement();
+    if (!el || typeof el.addEventListener !== "function") return;
+
+    const handleScroll = () => {
+      const offset = isHorizontal ? el.scrollLeft : el.scrollTop;
+      scrollOffset.set(offset);
+    };
+
+    const handleResize = () => {
+      const size = isHorizontal ? el.clientWidth : el.clientHeight;
+      if (size > 0) {
+        containerSize.set(size);
+      }
+    };
+
+    // Initial sync
+    handleResize();
+    handleScroll();
+
+    el.addEventListener("scroll", handleScroll, { passive: true });
+
+    let resizeObserver: any;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        handleResize();
+      });
+      resizeObserver.observe(el);
+    }
+
+    onCleanup(() => {
+      el.removeEventListener("scroll", handleScroll);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
+  });
+
+  const scrollToIndex = (
+    index: number,
+    scrollOpts?: { align?: "start" | "center" | "end" | "auto" }
+  ) => {
+    const el = options.getScrollElement();
+    if (!el) return;
+
+    const align = scrollOpts?.align ?? "auto";
+    const itemStart = getOffsetForIndex(index);
+    const itemSize = getItemSize(index);
+    const itemEnd = itemStart + itemSize;
+    const currentScroll = scrollOffset();
+    const cSize = containerSize();
+
+    let targetOffset = itemStart;
+
+    if (align === "start") {
+      targetOffset = itemStart;
+    } else if (align === "end") {
+      targetOffset = itemEnd - cSize;
+    } else if (align === "center") {
+      targetOffset = itemStart - (cSize - itemSize) / 2;
+    } else {
+      // auto
+      if (itemStart < currentScroll) {
+        targetOffset = itemStart;
+      } else if (itemEnd > currentScroll + cSize) {
+        targetOffset = itemEnd - cSize;
+      } else {
+        return; // already fully in view
+      }
+    }
+
+    targetOffset = Math.max(0, targetOffset);
+    if (isHorizontal) {
+      el.scrollLeft = targetOffset;
+    } else {
+      el.scrollTop = targetOffset;
+    }
+    scrollOffset.set(targetOffset);
+  };
+
+  const scrollToOffset = (offset: number) => {
+    const el = options.getScrollElement();
+    if (el) {
+      if (isHorizontal) {
+        el.scrollLeft = offset;
+      } else {
+        el.scrollTop = offset;
+      }
+    }
+    scrollOffset.set(offset);
+  };
+
+  const measureElement = (element: HTMLElement | null, index: number) => {
+    if (!element) return;
+    const measuredSize = isHorizontal
+      ? element.getBoundingClientRect().width
+      : element.getBoundingClientRect().height;
+    if (measuredSize > 0 && dynamicSizeCache.get(index) !== measuredSize) {
+      dynamicSizeCache.set(index, measuredSize);
+      // Force recalculation by touching scrollOffset
+      scrollOffset.update((o) => o);
+    }
+  };
+
+  return {
+    virtualItems,
+    totalSize,
+    scrollOffset,
+    containerSize,
+    startIndex,
+    endIndex,
+    scrollToIndex,
+    scrollToOffset,
+    measureElement
+  };
+}

package/src/vite/hmr.ts

@@ -0,0 +1,38 @@
+/**
+ * Transform JSX/TSX modules to attach Hot Module Replacement (HMR) acceptance
+ */
+export function transformHmr(code: string, id: string): { code: string; map?: any } | null {
+  // Only target user code JSX/TSX files
+  if (!/\.[jt]sx$/.test(id) || id.includes("node_modules")) {
+    return null;
+  }
+
+  // Check if file exports any functions or components
+  const hasExports =
+    /\bexport\s+(?:default\s+)?(?:function|const|class)\s+([A-Z][A-Za-z0-9_]*)/.test(code) ||
+    /\bexport\s+\{\s*([A-Za-z0-9_,\s]+)\s*\}/.test(code);
+
+  if (!hasExports) {
+    return null;
+  }
+
+  // Append lightweight HMR boundary
+  const hmrFooter = `
+/* @visage/vite-hmr */
+if (import.meta.hot) {
+  import.meta.hot.accept((newMod) => {
+    if (newMod) {
+      // Re-trigger reactive components without wiping signal stores
+      if (typeof window !== "undefined" && window.__VISAGE_DEVTOOLS__) {
+        window.__VISAGE_DEVTOOLS__.refresh?.();
+      }
+    }
+  });
+}
+`;
+
+  return {
+    code: `${code}\n;${hmrFooter}`,
+    map: null
+  };
+}

package/src/vite/index.ts

@@ -0,0 +1,3 @@
+export { type VisageLucideOptions, visageLucide } from "./lucide";
+export { default, visage } from "./plugin";
+export type { VisagePluginOptions, VisageVitePlugin } from "./types";

package/src/vite/lucide.ts

@@ -0,0 +1,124 @@
+import type { VisageVitePlugin } from "./types";
+
+export interface VisageLucideOptions {
+  /**
+   * Module aliases to intercept and translate.
+   * Defaults to `["lucide-react"]`.
+   */
+  aliases?: string[];
+}
+
+interface ParsedImport {
+  raw: string;
+  importedName: string;
+  localName: string;
+}
+
+function parseNamedImports(importClause: string): ParsedImport[] {
+  return importClause
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((item) => {
+      const parts = item.split(/\s+as\s+/).map((p) => p.trim());
+      const importedName = parts[0]!;
+      const localName = parts[1] ?? importedName;
+      return {
+        raw: item,
+        importedName,
+        localName
+      };
+    });
+}
+
+/**
+ * Official Visage Lucide Vite Plugin
+ *
+ * Statically transforms `import { Icon } from "lucide-react"` at build time into
+ * native, tree-shaken Visage SVG component instances using `createIcon` and `lucide`.
+ *
+ * Example:
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from "vite";
+ * import visage, { visageLucide } from "visage/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [visage(), visageLucide()]
+ * });
+ * ```
+ */
+export function visageLucide(options: VisageLucideOptions = {}): VisageVitePlugin {
+  const aliases = options.aliases ?? ["lucide-react"];
+
+  return {
+    name: "visage:lucide",
+    enforce: "pre",
+
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: aliases
+        }
+      };
+    },
+
+    resolveId(id: string) {
+      if (aliases.includes(id)) {
+        return `\0visage-lucide:${id}`;
+      }
+      return null;
+    },
+
+    load(id: string) {
+      if (id.startsWith("\0visage-lucide:")) {
+        return "export default {};";
+      }
+      return null;
+    },
+
+    transform(code: string, id: string) {
+      if (!id.match(/\.[jt]sx?$/) || id.includes("node_modules")) {
+        return null;
+      }
+
+      let transformed = code;
+      let hasMatches = false;
+
+      for (const alias of aliases) {
+        // Regex to match: import { ... } from "lucide-react" or 'lucide-react'
+        const regex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
+
+        transformed = transformed.replace(regex, (_match, importClause) => {
+          const imports = parseNamedImports(importClause);
+          if (imports.length === 0) return "";
+
+          hasMatches = true;
+
+          const lucideNamedImports = imports
+            .map((imp) => `${imp.importedName} as __icon_node_${imp.importedName}`)
+            .join(", ");
+
+          const componentDeclarations = imports
+            .map((imp) => {
+              return `const ${imp.localName} = /* @__PURE__ */ __visageCreateIcon("${imp.importedName}", __icon_node_${imp.importedName});`;
+            })
+            .join("\n");
+
+          return `import { createIcon as __visageCreateIcon } from "visage/ui";\nimport { ${lucideNamedImports} } from "lucide";\n${componentDeclarations}`;
+        });
+      }
+
+      if (!hasMatches) {
+        return null;
+      }
+
+      return {
+        code: transformed,
+        map: null
+      };
+    }
+  };
+}
+
+export default visageLucide;