@stacksjs/stx 0.2.94 → 0.2.96

package/dist/view-composers.js

@@ -1,2 +1,29 @@
-// @bun
-import{it as a,jt as b,kt as c,lt as d}from"./chunk-03c26pjz.js";import"./chunk-3jm3snz8.js";export{c as runComposers,b as composerPattern,a as composer,d as clearComposers};
+const composers = {
+  patterns: [],
+  exact: {}
+};
+export function composer(view, callback) {
+  if (!composers.exact[view])
+    composers.exact[view] = [];
+  composers.exact[view].push(callback);
+}
+export function composerPattern(pattern, callback) {
+  const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+  composers.patterns.push({ pattern: regex, callback });
+}
+export async function runComposers(filePath, context) {
+  const viewName = filePath.split("/").pop()?.split(".")[0] || "";
+  if (composers.exact[filePath])
+    for (const callback of composers.exact[filePath])
+      await Promise.resolve(callback(context, filePath));
+  if (composers.exact[viewName])
+    for (const callback of composers.exact[viewName])
+      await Promise.resolve(callback(context, filePath));
+  for (const { pattern, callback } of composers.patterns)
+    if (pattern.test(filePath) || pattern.test(viewName))
+      await Promise.resolve(callback(context, filePath));
+}
+export function clearComposers() {
+  composers.patterns = [];
+  composers.exact = {};
+}

package/dist/virtual-scrolling.js

@@ -1,2 +1,454 @@
-// @bun
-import{tf as a,uf as b,vf as c,wf as d,xf as e,yf as f,zf as g}from"./chunk-w4n8fqp7.js";import"./chunk-3jm3snz8.js";export{d as useVirtualList,b as processVirtualListDirectives,f as processVirtualGridDirectives,e as processInfiniteListDirectives,c as generateVirtualListCSS,g as default,a as createVirtualList};
+export function createVirtualList(items, options) {
+  const {
+    itemHeight,
+    containerHeight,
+    overscan = 3,
+    keyProperty = "id",
+    dynamicHeight = !1,
+    estimatedItemHeight = itemHeight,
+    direction = "vertical"
+  } = options;
+  let currentItems = [...items], scrollTop = 0;
+  const itemHeights = new Map;
+  function calculateVisibleRange() {
+    if (dynamicHeight)
+      return calculateDynamicVisibleRange();
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan), visibleCount = Math.ceil(containerHeight / itemHeight), endIndex = Math.min(currentItems.length - 1, startIndex + visibleCount + overscan * 2);
+    return { startIndex, endIndex };
+  }
+  function calculateDynamicVisibleRange() {
+    let accumulatedHeight = 0, startIndex = 0, endIndex = currentItems.length - 1;
+    for (let i = 0;i < currentItems.length; i++) {
+      const height = itemHeights.get(i) || estimatedItemHeight;
+      if (accumulatedHeight + height > scrollTop) {
+        startIndex = Math.max(0, i - overscan);
+        break;
+      }
+      accumulatedHeight += height;
+    }
+    accumulatedHeight = 0;
+    for (let i = 0;i < currentItems.length; i++) {
+      const height = itemHeights.get(i) || estimatedItemHeight;
+      accumulatedHeight += height;
+      if (accumulatedHeight > scrollTop + containerHeight) {
+        endIndex = Math.min(currentItems.length - 1, i + overscan);
+        break;
+      }
+    }
+    return { startIndex, endIndex };
+  }
+  function calculateTotalHeight() {
+    if (dynamicHeight) {
+      let total = 0;
+      for (let i = 0;i < currentItems.length; i++)
+        total += itemHeights.get(i) || estimatedItemHeight;
+      return total;
+    }
+    return currentItems.length * itemHeight;
+  }
+  function getItemOffset(index) {
+    if (dynamicHeight) {
+      let offset = 0;
+      for (let i = 0;i < index; i++)
+        offset += itemHeights.get(i) || estimatedItemHeight;
+      return offset;
+    }
+    return index * itemHeight;
+  }
+  function getState() {
+    const { startIndex, endIndex } = calculateVisibleRange();
+    return {
+      startIndex,
+      endIndex,
+      scrollTop,
+      totalHeight: calculateTotalHeight(),
+      visibleItems: currentItems.slice(startIndex, endIndex + 1),
+      itemHeights: new Map(itemHeights)
+    };
+  }
+  function scrollToIndex(index, behavior = "auto") {
+    const offset = getItemOffset(index);
+    scrollToOffset(offset, behavior);
+  }
+  function scrollToOffset(offset, _behavior = "auto") {
+    scrollTop = Math.max(0, Math.min(offset, calculateTotalHeight() - containerHeight));
+  }
+  function refresh() {
+    calculateVisibleRange();
+  }
+  function setItems(newItems) {
+    currentItems = [...newItems];
+    itemHeights.clear();
+    refresh();
+  }
+  function destroy() {
+    currentItems = [];
+    itemHeights.clear();
+  }
+  return {
+    scrollToIndex,
+    scrollToOffset,
+    getState,
+    refresh,
+    setItems,
+    destroy
+  };
+}
+export function processVirtualListDirectives(template, context = {}, _filePath) {
+  const virtualListRegex = /@virtualList\s*\(\s*([^,]+)\s*(?:,\s*(\{[^}]*\}))?\s*\)\s*([\s\S]*?)@endvirtualList/gi;
+  return template.replace(virtualListRegex, (_, itemsExpr, optionsExpr, content) => {
+    const itemsName = itemsExpr.trim(), items = context[itemsName];
+    if (!items || !Array.isArray(items))
+      return `<!-- virtualList: items "${itemsName}" not found or not an array -->`;
+    let options = {
+      itemHeight: 50,
+      containerHeight: 400,
+      overscan: 3
+    };
+    if (optionsExpr)
+      try {
+        const optionsStr = optionsExpr.trim(), parsed = Function(`return ${optionsStr}`)();
+        options = { ...options, ...parsed };
+      } catch {}
+    const listId = `vlist-${Math.random().toString(36).substring(2, 9)}`, visibleCount = Math.ceil(options.containerHeight / options.itemHeight), overscan = options.overscan || 3, startIndex = 0, endIndex = Math.min(items.length - 1, visibleCount + overscan);
+    let visibleItemsHtml = "";
+    for (let i = startIndex;i <= endIndex && i < items.length; i++) {
+      const item = items[i], itemContent = content.replace(/\{\{\s*item\s*\}\}/g, typeof item === "object" ? JSON.stringify(item) : String(item)).replace(/\{\{\s*item\.(\w+)\s*\}\}/g, (_, prop) => {
+        if (typeof item === "object" && item !== null)
+          return String(item[prop] ?? "");
+        return "";
+      }).replace(/\{\{\s*index\s*\}\}/g, String(i));
+      visibleItemsHtml += `
+        <div class="virtual-item ${options.itemClass || ""}"
+             style="position: absolute; top: ${i * options.itemHeight}px; height: ${options.itemHeight}px; width: 100%;"
+             data-index="${i}">
+          ${itemContent}
+        </div>`;
+    }
+    const totalHeight = items.length * options.itemHeight;
+    return `
+      <div id="${listId}"
+           class="virtual-list-container ${options.containerClass || ""}"
+           style="position: relative; height: ${options.containerHeight}px; overflow-y: auto;"
+           data-item-height="${options.itemHeight}"
+           data-total-items="${items.length}"
+           data-overscan="${overscan}">
+        <div class="virtual-list-viewport ${options.viewportClass || ""}"
+             style="position: relative; height: ${totalHeight}px; width: 100%;">
+          ${visibleItemsHtml}
+        </div>
+      </div>
+      <script data-virtual-list="${listId}">
+        (function() {
+          const container = document.getElementById('${listId}');
+          if (!container) return;
+
+          const viewport = container.querySelector('.virtual-list-viewport');
+          const itemHeight = ${options.itemHeight};
+          const totalItems = ${items.length};
+          const overscan = ${overscan};
+          const containerHeight = ${options.containerHeight};
+          const items = ${JSON.stringify(items)};
+          const template = ${JSON.stringify(content.trim())};
+
+          let lastStartIndex = 0;
+
+          function renderItems(scrollTop) {
+            const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+            const visibleCount = Math.ceil(containerHeight / itemHeight);
+            const endIndex = Math.min(totalItems - 1, startIndex + visibleCount + overscan * 2);
+
+            if (startIndex === lastStartIndex) return;
+            lastStartIndex = startIndex;
+
+            // Clear and re-render
+            viewport.innerHTML = '';
+
+            for (let i = startIndex; i <= endIndex; i++) {
+              const item = items[i];
+              const div = document.createElement('div');
+              div.className = 'virtual-item ${options.itemClass || ""}';
+              div.style.cssText = 'position: absolute; top: ' + (i * itemHeight) + 'px; height: ' + itemHeight + 'px; width: 100%;';
+              div.dataset.index = i;
+
+              let html = template
+                .replace(/\\{\\{\\s*item\\s*\\}\\}/g, typeof item === 'object' ? JSON.stringify(item) : String(item))
+                .replace(/\\{\\{\\s*item\\.(\\w+)\\s*\\}\\}/g, (_, prop) => {
+                  return typeof item === 'object' && item !== null ? String(item[prop] ?? '') : '';
+                })
+                .replace(/\\{\\{\\s*index\\s*\\}\\}/g, String(i));
+
+              div.innerHTML = html;
+              viewport.appendChild(div);
+            }
+          }
+
+          container.addEventListener('scroll', function() {
+            requestAnimationFrame(() => renderItems(container.scrollTop));
+          });
+
+          // Expose API
+          container.__virtualList = {
+            scrollToIndex: function(index) {
+              container.scrollTop = index * itemHeight;
+            },
+            refresh: function() {
+              renderItems(container.scrollTop);
+            }
+          };
+        })();
+      </script>
+    `;
+  });
+}
+export function generateVirtualListCSS() {
+  return `
+    .virtual-list-container {
+      position: relative;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .virtual-list-container::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .virtual-list-container::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+    }
+
+    .virtual-list-container::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 4px;
+    }
+
+    .virtual-list-container::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .virtual-list-viewport {
+      position: relative;
+      width: 100%;
+    }
+
+    .virtual-item {
+      position: absolute;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+    }
+
+    /* Loading placeholder for items */
+    .virtual-item-placeholder {
+      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: virtual-shimmer 1.5s infinite;
+    }
+
+    @keyframes virtual-shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+  `;
+}
+export function useVirtualList(items, options) {
+  let instance = null;
+  const getOrCreateInstance = () => {
+    if (!instance)
+      instance = createVirtualList(items(), options);
+    return instance;
+  };
+  return {
+    visibleItems: () => {
+      return getOrCreateInstance().getState().visibleItems;
+    },
+    totalHeight: () => {
+      return getOrCreateInstance().getState().totalHeight;
+    },
+    containerProps: () => ({
+      style: {
+        height: `${options.containerHeight}px`,
+        overflow: "auto",
+        position: "relative"
+      },
+      onScroll: (e) => {
+        const target = e.target;
+        if (instance)
+          instance.scrollToOffset(target.scrollTop);
+      }
+    }),
+    itemProps: (index) => ({
+      style: {
+        position: "absolute",
+        top: `${index * options.itemHeight}px`,
+        height: `${options.itemHeight}px`,
+        width: "100%"
+      },
+      "data-index": index
+    }),
+    scrollToIndex: (index) => {
+      getOrCreateInstance().scrollToIndex(index);
+    }
+  };
+}
+export function processInfiniteListDirectives(template, context = {}, _filePath) {
+  const infiniteListRegex = /@infiniteList\s*\(\s*([^,]+)\s*(?:,\s*(\{[^}]*\}))?\s*\)\s*([\s\S]*?)@loading\s*([\s\S]*?)@endinfiniteList/gi;
+  return template.replace(infiniteListRegex, (_, itemsExpr, optionsExpr, content, loadingContent) => {
+    const itemsName = itemsExpr.trim(), items = context[itemsName];
+    if (!items || !Array.isArray(items))
+      return `<!-- infiniteList: items "${itemsName}" not found or not an array -->`;
+    let options = {
+      itemHeight: 50,
+      containerHeight: 400,
+      overscan: 3,
+      threshold: 100,
+      hasMore: !0
+    };
+    if (optionsExpr)
+      try {
+        const parsed = Function(`return ${optionsExpr.trim()}`)();
+        options = { ...options, ...parsed };
+      } catch {}
+    const listId = `ilist-${Math.random().toString(36).substring(2, 9)}`;
+    let virtualListHtml = processVirtualListDirectives(`@virtualList(${itemsName}, ${JSON.stringify({
+      itemHeight: options.itemHeight,
+      containerHeight: options.containerHeight,
+      overscan: options.overscan,
+      containerClass: options.containerClass
+    })})${content}@endvirtualList`, context);
+    virtualListHtml = virtualListHtml.replace("</script>", `
+          // Infinite scroll detection
+          container.addEventListener('scroll', function() {
+            const scrollBottom = container.scrollTop + container.clientHeight;
+            const threshold = ${options.threshold};
+            const totalHeight = viewport.offsetHeight;
+
+            if (scrollBottom >= totalHeight - threshold) {
+              container.dispatchEvent(new CustomEvent('loadmore', { bubbles: true }));
+            }
+          });
+        </script>`);
+    return `
+      <div id="${listId}" class="infinite-list-wrapper">
+        ${virtualListHtml}
+        <div class="infinite-list-loading" style="display: none;">
+          ${loadingContent}
+        </div>
+      </div>
+    `;
+  });
+}
+export function processVirtualGridDirectives(template, context = {}, _filePath) {
+  const virtualGridRegex = /@virtualGrid\s*\(\s*([^,]+)\s*(?:,\s*(\{[^}]*\}))?\s*\)\s*([\s\S]*?)@endvirtualGrid/gi;
+  return template.replace(virtualGridRegex, (_, itemsExpr, optionsExpr, content) => {
+    const itemsName = itemsExpr.trim(), items = context[itemsName];
+    if (!items || !Array.isArray(items))
+      return `<!-- virtualGrid: items "${itemsName}" not found or not an array -->`;
+    let options = {
+      columns: 3,
+      rowHeight: 100,
+      containerHeight: 400,
+      gap: 10,
+      overscan: 2
+    };
+    if (optionsExpr)
+      try {
+        const parsed = Function(`return ${optionsExpr.trim()}`)();
+        options = { ...options, ...parsed };
+      } catch {}
+    const gridId = `vgrid-${Math.random().toString(36).substring(2, 9)}`, totalRows = Math.ceil(items.length / options.columns), totalHeight = totalRows * (options.rowHeight + (options.gap || 0)), visibleRowCount = Math.ceil(options.containerHeight / (options.rowHeight + (options.gap || 0))), overscan = options.overscan || 2, startRow = 0, endRow = Math.min(totalRows - 1, visibleRowCount + overscan);
+    let visibleItemsHtml = "";
+    for (let row = startRow;row <= endRow; row++)
+      for (let col = 0;col < options.columns; col++) {
+        const index = row * options.columns + col;
+        if (index >= items.length)
+          break;
+        const item = items[index], left = col * (100 / options.columns), top = row * (options.rowHeight + (options.gap || 0)), itemContent = content.replace(/\{\{\s*item\s*\}\}/g, typeof item === "object" ? JSON.stringify(item) : String(item)).replace(/\{\{\s*item\.(\w+)\s*\}\}/g, (_, prop) => {
+          if (typeof item === "object" && item !== null)
+            return String(item[prop] ?? "");
+          return "";
+        }).replace(/\{\{\s*index\s*\}\}/g, String(index));
+        visibleItemsHtml += `
+          <div class="virtual-grid-item"
+               style="position: absolute; top: ${top}px; left: ${left}%; width: calc(${100 / options.columns}% - ${options.gap || 0}px); height: ${options.rowHeight}px;"
+               data-index="${index}">
+            ${itemContent}
+          </div>`;
+      }
+    return `
+      <div id="${gridId}"
+           class="virtual-grid-container"
+           style="position: relative; height: ${options.containerHeight}px; overflow-y: auto;">
+        <div class="virtual-grid-viewport"
+             style="position: relative; height: ${totalHeight}px; width: 100%;">
+          ${visibleItemsHtml}
+        </div>
+      </div>
+      <script data-virtual-grid="${gridId}">
+        (function() {
+          const container = document.getElementById('${gridId}');
+          if (!container) return;
+
+          const viewport = container.querySelector('.virtual-grid-viewport');
+          const columns = ${options.columns};
+          const rowHeight = ${options.rowHeight};
+          const gap = ${options.gap || 0};
+          const totalItems = ${items.length};
+          const overscan = ${overscan};
+          const containerHeight = ${options.containerHeight};
+          const items = ${JSON.stringify(items)};
+          const template = ${JSON.stringify(content.trim())};
+
+          let lastStartRow = 0;
+
+          function renderItems(scrollTop) {
+            const startRow = Math.max(0, Math.floor(scrollTop / (rowHeight + gap)) - overscan);
+            const visibleRowCount = Math.ceil(containerHeight / (rowHeight + gap));
+            const endRow = Math.min(Math.ceil(totalItems / columns) - 1, startRow + visibleRowCount + overscan * 2);
+
+            if (startRow === lastStartRow) return;
+            lastStartRow = startRow;
+
+            viewport.innerHTML = '';
+
+            for (let row = startRow; row <= endRow; row++) {
+              for (let col = 0; col < columns; col++) {
+                const index = row * columns + col;
+                if (index >= totalItems) break;
+
+                const item = items[index];
+                const div = document.createElement('div');
+                div.className = 'virtual-grid-item';
+                div.style.cssText = 'position: absolute; top: ' + (row * (rowHeight + gap)) + 'px; left: ' + (col * (100 / columns)) + '%; width: calc(' + (100 / columns) + '% - ' + gap + 'px); height: ' + rowHeight + 'px;';
+                div.dataset.index = index;
+
+                let html = template
+                  .replace(/\\{\\{\\s*item\\s*\\}\\}/g, typeof item === 'object' ? JSON.stringify(item) : String(item))
+                  .replace(/\\{\\{\\s*item\\.(\\w+)\\s*\\}\\}/g, (_, prop) => {
+                    return typeof item === 'object' && item !== null ? String(item[prop] ?? '') : '';
+                  })
+                  .replace(/\\{\\{\\s*index\\s*\\}\\}/g, String(index));
+
+                div.innerHTML = html;
+                viewport.appendChild(div);
+              }
+            }
+          }
+
+          container.addEventListener('scroll', function() {
+            requestAnimationFrame(() => renderItems(container.scrollTop));
+          });
+        })();
+      </script>
+    `;
+  });
+}
+export default {
+  createVirtualList,
+  processVirtualListDirectives,
+  processInfiniteListDirectives,
+  processVirtualGridDirectives,
+  generateVirtualListCSS,
+  useVirtualList
+};