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

package/dist/story/performance.d.ts

@@ -0,0 +1,129 @@
+/**
+ * STX Story - Component Performance Profiling
+ * Track render times, re-render counts, and memory usage
+ */
+/**
+ * Performance metrics for a component
+ */
+export interface ComponentMetrics {
+    /** Component ID */
+    componentId: string;
+    /** Component name */
+    componentName: string;
+    /** Render count */
+    renderCount: number;
+    /** Total render time in ms */
+    totalRenderTime: number;
+    /** Average render time in ms */
+    avgRenderTime: number;
+    /** Min render time in ms */
+    minRenderTime: number;
+    /** Max render time in ms */
+    maxRenderTime: number;
+    /** Last render time in ms */
+    lastRenderTime: number;
+    /** Memory usage in bytes (if available) */
+    memoryUsage?: number;
+    /** Render history */
+    history: RenderRecord[];
+}
+/**
+ * Single render record
+ */
+export interface RenderRecord {
+    /** Timestamp */
+    timestamp: number;
+    /** Render duration in ms */
+    duration: number;
+    /** Props that triggered render */
+    props?: Record<string, any>;
+    /** Memory snapshot */
+    memory?: number;
+}
+/**
+ * Performance profiler
+ */
+export declare class PerformanceProfiler {
+    private metrics;
+    private maxHistorySize;
+    private enabled;
+    /**
+     * Enable/disable profiling
+     */
+    setEnabled(enabled: boolean): void;
+    /**
+     * Record a render
+     */
+    recordRender(componentId: string, componentName: string, duration: number, props?: Record<string, any>): void;
+    /**
+     * Get metrics for a component
+     */
+    getMetrics(componentId: string): ComponentMetrics | undefined;
+    /**
+     * Get all metrics
+     */
+    getAllMetrics(): ComponentMetrics[];
+    /**
+     * Get slowest components
+     */
+    getSlowestComponents(limit?: number): ComponentMetrics[];
+    /**
+     * Get most rendered components
+     */
+    getMostRenderedComponents(limit?: number): ComponentMetrics[];
+    /**
+     * Clear all metrics
+     */
+    clear(): void;
+    /**
+     * Clear metrics for a component
+     */
+    clearComponent(componentId: string): void;
+    /**
+     * Get memory usage (if available)
+     */
+    private getMemoryUsage;
+    /**
+     * Export metrics as JSON
+     */
+    exportMetrics(): string;
+    /**
+     * Create a render timer
+     */
+    createTimer(componentId: string, componentName: string): RenderTimer;
+}
+/**
+ * Render timer helper
+ */
+export declare class RenderTimer {
+    private profiler;
+    private componentId;
+    private componentName;
+    private startTime;
+    private props?;
+    constructor(profiler: PerformanceProfiler, componentId: string, componentName: string);
+    /**
+     * Set props for this render
+     */
+    setProps(props: Record<string, any>): this;
+    /**
+     * End timing and record
+     */
+    end(): number;
+}
+/**
+ * Global profiler instance
+ */
+export declare const profiler: PerformanceProfiler;
+/**
+ * Generate performance panel HTML
+ */
+export declare function getPerformancePanelHtml(metrics: ComponentMetrics[]): string;
+/**
+ * Generate performance panel styles
+ */
+export declare function getPerformancePanelStyles(): string;
+/**
+ * Generate performance client script
+ */
+export declare function getPerformanceScript(): string;

package/dist/story/performance.js

@@ -0,0 +1,252 @@
+export class PerformanceProfiler {
+  metrics = new Map;
+  maxHistorySize = 100;
+  enabled = !0;
+  setEnabled(enabled) {
+    this.enabled = enabled;
+  }
+  recordRender(componentId, componentName, duration, props) {
+    if (!this.enabled)
+      return;
+    let metrics = this.metrics.get(componentId);
+    if (!metrics) {
+      metrics = {
+        componentId,
+        componentName,
+        renderCount: 0,
+        totalRenderTime: 0,
+        avgRenderTime: 0,
+        minRenderTime: 1 / 0,
+        maxRenderTime: 0,
+        lastRenderTime: 0,
+        history: []
+      };
+      this.metrics.set(componentId, metrics);
+    }
+    metrics.renderCount++;
+    metrics.totalRenderTime += duration;
+    metrics.avgRenderTime = metrics.totalRenderTime / metrics.renderCount;
+    metrics.minRenderTime = Math.min(metrics.minRenderTime, duration);
+    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, duration);
+    metrics.lastRenderTime = duration;
+    const memory = this.getMemoryUsage();
+    if (memory !== void 0)
+      metrics.memoryUsage = memory;
+    metrics.history.push({
+      timestamp: Date.now(),
+      duration,
+      props,
+      memory
+    });
+    if (metrics.history.length > this.maxHistorySize)
+      metrics.history = metrics.history.slice(-this.maxHistorySize);
+  }
+  getMetrics(componentId) {
+    return this.metrics.get(componentId);
+  }
+  getAllMetrics() {
+    return Array.from(this.metrics.values());
+  }
+  getSlowestComponents(limit = 10) {
+    return this.getAllMetrics().sort((a, b) => b.avgRenderTime - a.avgRenderTime).slice(0, limit);
+  }
+  getMostRenderedComponents(limit = 10) {
+    return this.getAllMetrics().sort((a, b) => b.renderCount - a.renderCount).slice(0, limit);
+  }
+  clear() {
+    this.metrics.clear();
+  }
+  clearComponent(componentId) {
+    this.metrics.delete(componentId);
+  }
+  getMemoryUsage() {
+    if (typeof performance < "u" && "memory" in performance)
+      return performance.memory?.usedJSHeapSize;
+    return;
+  }
+  exportMetrics() {
+    return JSON.stringify({
+      timestamp: Date.now(),
+      metrics: this.getAllMetrics()
+    }, null, 2);
+  }
+  createTimer(componentId, componentName) {
+    return new RenderTimer(this, componentId, componentName);
+  }
+}
+
+export class RenderTimer {
+  profiler;
+  componentId;
+  componentName;
+  startTime;
+  props;
+  constructor(profiler, componentId, componentName) {
+    this.profiler = profiler;
+    this.componentId = componentId;
+    this.componentName = componentName;
+    this.startTime = performance.now();
+  }
+  setProps(props) {
+    this.props = props;
+    return this;
+  }
+  end() {
+    const duration = performance.now() - this.startTime;
+    this.profiler.recordRender(this.componentId, this.componentName, duration, this.props);
+    return duration;
+  }
+}
+export const profiler = new PerformanceProfiler;
+export function getPerformancePanelHtml(metrics) {
+  return `
+    <div class="performance-panel">
+      <div class="performance-header">
+        <h3>Performance</h3>
+        <button onclick="clearPerformanceMetrics()">Clear</button>
+      </div>
+      <table class="performance-table">
+        <thead>
+          <tr>
+            <th>Component</th>
+            <th>Renders</th>
+            <th>Avg</th>
+            <th>Min</th>
+            <th>Max</th>
+            <th>Memory</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${metrics.map((m) => `
+    <tr>
+      <td>${m.componentName}</td>
+      <td>${m.renderCount}</td>
+      <td>${m.avgRenderTime.toFixed(2)}ms</td>
+      <td>${m.minRenderTime.toFixed(2)}ms</td>
+      <td>${m.maxRenderTime.toFixed(2)}ms</td>
+      <td>${m.memoryUsage ? formatBytes(m.memoryUsage) : "-"}</td>
+    </tr>
+  `).join("") || '<tr><td colspan="6" class="empty">No data</td></tr>'}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+export function getPerformancePanelStyles() {
+  return `
+    .performance-panel {
+      padding: 12px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+    }
+    .performance-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .performance-header h3 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .performance-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    .performance-table th,
+    .performance-table td {
+      padding: 6px 8px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    .performance-table th {
+      font-weight: 600;
+      color: var(--text-secondary);
+    }
+    .performance-table .empty {
+      text-align: center;
+      color: var(--text-secondary);
+      padding: 20px;
+    }
+  `;
+}
+export function getPerformanceScript() {
+  return `
+<script>
+window.__stxPerformance = {
+  metrics: new Map(),
+
+  recordRender(componentId, componentName, duration, props) {
+    let m = this.metrics.get(componentId);
+    if (!m) {
+      m = {
+        componentId,
+        componentName,
+        renderCount: 0,
+        totalRenderTime: 0,
+        avgRenderTime: 0,
+        minRenderTime: Infinity,
+        maxRenderTime: 0,
+        lastRenderTime: 0,
+        history: []
+      };
+      this.metrics.set(componentId, m);
+    }
+
+    m.renderCount++;
+    m.totalRenderTime += duration;
+    m.avgRenderTime = m.totalRenderTime / m.renderCount;
+    m.minRenderTime = Math.min(m.minRenderTime, duration);
+    m.maxRenderTime = Math.max(m.maxRenderTime, duration);
+    m.lastRenderTime = duration;
+
+    m.history.push({ timestamp: Date.now(), duration, props });
+    if (m.history.length > 100) m.history.shift();
+
+    this.updatePanel();
+  },
+
+  getMetrics() {
+    return Array.from(this.metrics.values());
+  },
+
+  clear() {
+    this.metrics.clear();
+    this.updatePanel();
+  },
+
+  updatePanel() {
+    const panel = document.getElementById('performance-panel');
+    if (panel) {
+      // Update panel content
+      window.dispatchEvent(new CustomEvent('stx:performance-update', {
+        detail: { metrics: this.getMetrics() }
+      }));
+    }
+  },
+
+  // Timer helper
+  startTimer(componentId, componentName) {
+    const start = performance.now();
+    return {
+      end: (props) => {
+        const duration = performance.now() - start;
+        this.recordRender(componentId, componentName, duration, props);
+        return duration;
+      }
+    };
+  }
+};
+
+window.clearPerformanceMetrics = () => window.__stxPerformance.clear();
+</script>
+`;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024)
+    return `${bytes}B`;
+  if (bytes < 1048576)
+    return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / 1048576).toFixed(1)}MB`;
+}

package/dist/story/presets.d.ts

@@ -0,0 +1,123 @@
+/**
+ * STX Story - Prop Presets
+ * Save and load prop configurations for quick testing
+ */
+/**
+ * Prop preset
+ */
+export interface PropPreset {
+    /** Preset ID */
+    id: string;
+    /** Preset name */
+    name: string;
+    /** Description */
+    description?: string;
+    /** Props values */
+    props: Record<string, any>;
+    /** Component this preset is for */
+    componentId?: string;
+    /** Created timestamp */
+    created: number;
+    /** Last used timestamp */
+    lastUsed?: number;
+    /** Usage count */
+    usageCount: number;
+    /** Tags for organization */
+    tags?: string[];
+}
+/**
+ * Presets storage
+ */
+export interface PresetsStorage {
+    /** Version for migrations */
+    version: number;
+    /** All presets */
+    presets: PropPreset[];
+    /** Recently used preset IDs */
+    recentIds: string[];
+}
+/**
+ * Presets manager
+ */
+export declare class PresetsManager {
+    private storage;
+    private storagePath;
+    private dirty;
+    constructor(rootDir: string);
+    /**
+     * Load storage from disk
+     */
+    private loadStorage;
+    /**
+     * Migrate storage to current version
+     */
+    private migrateStorage;
+    /**
+     * Save storage to disk
+     */
+    save(): Promise<void>;
+    /**
+     * Create a new preset
+     */
+    createPreset(name: string, props: Record<string, any>, options?: {
+        description?: string;
+        componentId?: string;
+        tags?: string[];
+    }): PropPreset;
+    /**
+     * Get a preset by ID
+     */
+    getPreset(id: string): PropPreset | undefined;
+    /**
+     * Get all presets
+     */
+    getAllPresets(): PropPreset[];
+    /**
+     * Get presets for a specific component
+     */
+    getPresetsForComponent(componentId: string): PropPreset[];
+    /**
+     * Get recent presets
+     */
+    getRecentPresets(): PropPreset[];
+    /**
+     * Use a preset (updates usage stats)
+     */
+    usePreset(id: string): PropPreset | undefined;
+    /**
+     * Update a preset
+     */
+    updatePreset(id: string, updates: Partial<Omit<PropPreset, 'id' | 'created'>>): PropPreset | undefined;
+    /**
+     * Delete a preset
+     */
+    deletePreset(id: string): boolean;
+    /**
+     * Search presets
+     */
+    searchPresets(query: string): PropPreset[];
+    /**
+     * Get most used presets
+     */
+    getMostUsedPresets(limit?: number): PropPreset[];
+    /**
+     * Export presets to JSON
+     */
+    exportPresets(ids?: string[]): string;
+    /**
+     * Import presets from JSON
+     */
+    importPresets(json: string, overwrite?: boolean): number;
+}
+/**
+ * Generate presets panel HTML
+ */
+export declare function getPresetsPanelHtml(presets: PropPreset[]): string;
+/**
+ * Generate presets panel styles
+ */
+export declare function getPresetsPanelStyles(): string;
+/**
+ * Generate presets client script
+ */
+export declare function getPresetsScript(): string;