@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/virtual-scrolling.js

@@ -0,0 +1,454 @@
+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
+};

package/dist/visual-editor.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Generate a hierarchical outline of the template.
+ * Used for document outline view in IDEs.
+ */
+export declare function getTemplateOutline(template: string): OutlineNode;
+/**
+ * Analyze a template for visual editor purposes
+ * (Alias: analyzeTemplateContent)
+ */
+export declare function analyzeVisualEditorTemplate(template: string): TemplateAnalysis;
+/**
+ * Analyze a template string and extract all relevant information
+ * Use this for analyzing template content directly (not from a file path)
+ */
+export declare function analyzeTemplateContent(template: string): TemplateAnalysis;
+/**
+ * Generate preview HTML for a template.
+ * This is a simplified preview for editor integration.
+ */
+export declare function generatePreview(template: string, options?: VisualEditorPreviewOptions): Promise<string>;
+/**
+ * Get default component palette items.
+ */
+export declare function getDefaultPalette(): PaletteItem[];
+/**
+ * Generate insert result for a palette item.
+ */
+export declare function insertPaletteItem(item: PaletteItem, position: EditorPosition, indentation?: string): InsertResult;
+// =============================================================================
+// Helper Functions
+// =============================================================================
+declare function hasEndTag(directiveName: string): boolean;
+/** Template outline node */
+export declare interface OutlineNode {
+  type: OutlineNodeType
+  name: string
+  label: string
+  range: { start: number, end: number, line: number, column: number }
+  children: OutlineNode[]
+  attributes?: Record<string, string | true>
+  directiveCategory?: DirectiveCategory
+  isClosable?: boolean
+  icon?: string
+  description?: string
+}
+/** Template analysis result */
+export declare interface TemplateAnalysis {
+  variables: VariableUsage[]
+  components: ComponentReference[]
+  directives: VisualEditorDirectiveUsage[]
+  slots: SlotDefinition[]
+  sections: SectionDefinition[]
+  scripts: ScriptBlock[]
+  styles: StyleBlock[]
+  layout?: LayoutInfo
+  metrics: VisualEditorMetrics
+}
+/** Variable usage info */
+export declare interface VariableUsage {
+  name: string
+  line: number
+  column: number
+  context: 'expression' | 'directive' | 'attribute'
+  inferredType?: string
+}
+/** Component reference info */
+export declare interface ComponentReference {
+  name: string
+  path?: string
+  line: number
+  props: Record<string, string | true>
+  hasSlot: boolean
+}
+/** Visual editor directive usage info */
+export declare interface VisualEditorDirectiveUsage {
+  name: string
+  category: DirectiveCategory
+  line: number
+  params?: string
+  hasEndTag: boolean
+}
+/** Slot definition */
+export declare interface SlotDefinition {
+  name: string
+  line: number
+  isNamed: boolean
+  defaultContent?: string
+}
+/** Section definition */
+export declare interface SectionDefinition {
+  name: string
+  line: number
+  content: string
+}
+/** Script block info */
+export declare interface ScriptBlock {
+  type: 'typescript' | 'javascript'
+  line: number
+  content: string
+  exports: string[]
+}
+/** Style block info */
+export declare interface StyleBlock {
+  type: 'css' | 'scss' | 'less'
+  line: number
+  content: string
+  scoped: boolean
+}
+/** Layout info */
+export declare interface LayoutInfo {
+  extends: string
+  line: number
+  sections: string[]
+}
+/** Visual editor template complexity metrics */
+export declare interface VisualEditorMetrics {
+  lines: number
+  characters: number
+  maxNestingDepth: number
+  directiveCount: number
+  componentCount: number
+  expressionCount: number
+  complexity: number
+}
+/** Visual editor preview options */
+export declare interface VisualEditorPreviewOptions {
+  context?: Record<string, unknown>
+  includeStyles?: boolean
+  includeScripts?: boolean
+  wrapInDocument?: boolean
+  baseUrl?: string
+  customCss?: string
+}
+/** Component palette item */
+export declare interface PaletteItem {
+  name: string
+  displayName: string
+  category: string
+  description: string
+  icon?: string
+  snippet: string
+  props?: VisualEditorPropDefinition[]
+  slots?: string[]
+}
+/** Visual editor prop definition for palette */
+export declare interface VisualEditorPropDefinition {
+  name: string
+  type: string
+  required: boolean
+  default?: string
+  description?: string
+}
+/** Editor selection/position */
+export declare interface EditorPosition {
+  line: number
+  column: number
+  offset: number
+}
+/** Insert operation result */
+export declare interface InsertResult {
+  content: string
+  cursorPosition: EditorPosition
+}
+/** Node types in template outline */
+export type OutlineNodeType = | 'document'
+  | 'element'
+  | 'component'
+  | 'directive'
+  | 'slot'
+  | 'section'
+  | 'expression'
+  | 'script'
+  | 'style'
+  | 'comment'
+  | 'text';
+/** Directive category for visual grouping */
+export type DirectiveCategory = | 'control-flow'
+  | 'loop'
+  | 'layout'
+  | 'component'
+  | 'auth'
+  | 'form'
+  | 'seo'
+  | 'i18n'
+  | 'custom';