@coherent.js/performance 1.0.0-beta.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Thomas Drouvin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -0,0 +1,1028 @@
+// src/code-splitting.js
+var CodeSplitter = class {
+  constructor(options = {}) {
+    this.options = {
+      preload: [],
+      prefetch: [],
+      timeout: 1e4,
+      retries: 3,
+      ...options
+    };
+    this.modules = /* @__PURE__ */ new Map();
+    this.loading = /* @__PURE__ */ new Map();
+    this.failed = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Dynamically import a module
+   * 
+   * @param {string} path - Module path
+   * @param {Object} [options] - Import options
+   * @returns {Promise} Module exports
+   */
+  async import(path, options = {}) {
+    if (this.modules.has(path)) {
+      return this.modules.get(path);
+    }
+    if (this.loading.has(path)) {
+      return this.loading.get(path);
+    }
+    const importPromise = this.loadModule(path, options);
+    this.loading.set(path, importPromise);
+    try {
+      const module = await importPromise;
+      this.modules.set(path, module);
+      this.loading.delete(path);
+      return module;
+    } catch (error) {
+      this.loading.delete(path);
+      this.failed.add(path);
+      throw error;
+    }
+  }
+  /**
+   * Load module with retries
+   */
+  async loadModule(path, options = {}) {
+    const maxRetries = options.retries ?? this.options.retries;
+    const timeout = options.timeout ?? this.options.timeout;
+    let lastError;
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        const importPath = attempt > 0 ? `${path}?retry=${attempt}&t=${Date.now()}` : path;
+        const module = await Promise.race([
+          import(importPath),
+          new Promise(
+            (_, reject) => setTimeout(() => reject(new Error("Import timeout")), timeout)
+          )
+        ]);
+        return module;
+      } catch (error) {
+        lastError = error;
+        if (attempt < maxRetries) {
+          await new Promise(
+            (resolve) => setTimeout(resolve, Math.pow(2, attempt) * 1e3)
+          );
+        }
+      }
+    }
+    throw new Error(`Failed to load module ${path}: ${lastError.message}`);
+  }
+  /**
+   * Preload modules
+   */
+  async preload(paths) {
+    const pathArray = Array.isArray(paths) ? paths : [paths];
+    return Promise.all(
+      pathArray.map((path) => this.import(path).catch((err) => {
+        console.warn(`Failed to preload ${path}:`, err);
+        return null;
+      }))
+    );
+  }
+  /**
+   * Prefetch modules (low priority)
+   */
+  prefetch(paths) {
+    const pathArray = Array.isArray(paths) ? paths : [paths];
+    if (typeof requestIdleCallback !== "undefined") {
+      requestIdleCallback(() => {
+        pathArray.forEach((path) => {
+          this.import(path).catch(() => {
+          });
+        });
+      });
+    } else {
+      setTimeout(() => {
+        pathArray.forEach((path) => {
+          this.import(path).catch(() => {
+          });
+        });
+      }, 0);
+    }
+  }
+  /**
+   * Check if module is loaded
+   */
+  isLoaded(path) {
+    return this.modules.has(path);
+  }
+  /**
+   * Check if module is loading
+   */
+  isLoading(path) {
+    return this.loading.has(path);
+  }
+  /**
+   * Check if module failed to load
+   */
+  hasFailed(path) {
+    return this.failed.has(path);
+  }
+  /**
+   * Clear cache
+   */
+  clearCache(path = null) {
+    if (path) {
+      this.modules.delete(path);
+      this.failed.delete(path);
+    } else {
+      this.modules.clear();
+      this.failed.clear();
+    }
+  }
+  /**
+   * Get statistics
+   */
+  getStats() {
+    return {
+      loaded: this.modules.size,
+      loading: this.loading.size,
+      failed: this.failed.size,
+      modules: Array.from(this.modules.keys())
+    };
+  }
+};
+function createCodeSplitter(options = {}) {
+  return new CodeSplitter(options);
+}
+function lazy(loader, options = {}) {
+  let modulePromise = null;
+  let module = null;
+  let error = null;
+  return function LazyComponent(props = {}) {
+    if (module) {
+      const Component = module.default || module;
+      return Component(props);
+    }
+    if (error) {
+      if (options.errorComponent) {
+        return options.errorComponent({ error, retry: () => {
+          error = null;
+          modulePromise = null;
+          return LazyComponent(props);
+        } });
+      }
+      return {
+        div: {
+          className: "lazy-error",
+          text: `Error loading component: ${error.message}`
+        }
+      };
+    }
+    if (!modulePromise) {
+      modulePromise = loader().then((mod) => {
+        module = mod;
+        return mod;
+      }).catch((err) => {
+        error = err;
+        throw err;
+      });
+    }
+    if (options.loadingComponent) {
+      return options.loadingComponent(props);
+    }
+    return {
+      div: {
+        className: "lazy-loading",
+        text: options.loadingText || "Loading..."
+      }
+    };
+  };
+}
+function splitComponent(componentPath, options = {}) {
+  const splitter = new CodeSplitter(options);
+  return lazy(
+    () => splitter.import(componentPath),
+    options
+  );
+}
+function createRouteSplitter(routes) {
+  const splitter = new CodeSplitter();
+  const routeMap = /* @__PURE__ */ new Map();
+  for (const [path, config] of Object.entries(routes)) {
+    if (typeof config === "string") {
+      routeMap.set(path, {
+        loader: () => splitter.import(config)
+      });
+    } else {
+      routeMap.set(path, {
+        loader: () => splitter.import(config.component),
+        preload: config.preload || [],
+        ...config
+      });
+    }
+  }
+  return {
+    /**
+     * Load route component
+     */
+    async loadRoute(path) {
+      const route = routeMap.get(path);
+      if (!route) {
+        throw new Error(`Route not found: ${path}`);
+      }
+      if (route.preload && route.preload.length > 0) {
+        splitter.prefetch(route.preload);
+      }
+      return await route.loader();
+    },
+    /**
+     * Preload route
+     */
+    preloadRoute(path) {
+      const route = routeMap.get(path);
+      if (route) {
+        return route.loader();
+      }
+    },
+    /**
+     * Get all routes
+     */
+    getRoutes() {
+      return Array.from(routeMap.keys());
+    },
+    /**
+     * Get splitter instance
+     */
+    getSplitter() {
+      return splitter;
+    }
+  };
+}
+var BundleAnalyzer = class {
+  constructor() {
+    this.chunks = /* @__PURE__ */ new Map();
+    this.loadTimes = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Track chunk load
+   */
+  trackLoad(chunkName, size, loadTime) {
+    this.chunks.set(chunkName, { size, loadTime });
+    this.loadTimes.set(chunkName, loadTime);
+  }
+  /**
+   * Get bundle statistics
+   */
+  getStats() {
+    const chunks = Array.from(this.chunks.entries());
+    const totalSize = chunks.reduce((sum, [, chunk]) => sum + chunk.size, 0);
+    const avgLoadTime = chunks.reduce((sum, [, chunk]) => sum + chunk.loadTime, 0) / chunks.length;
+    return {
+      totalChunks: chunks.length,
+      totalSize,
+      averageLoadTime: avgLoadTime,
+      chunks: chunks.map(([name, data]) => ({
+        name,
+        size: data.size,
+        loadTime: data.loadTime,
+        percentage: (data.size / totalSize * 100).toFixed(2)
+      }))
+    };
+  }
+  /**
+   * Find largest chunks
+   */
+  getLargestChunks(limit = 10) {
+    return Array.from(this.chunks.entries()).sort((a, b) => b[1].size - a[1].size).slice(0, limit).map(([name, data]) => ({ name, ...data }));
+  }
+  /**
+   * Find slowest chunks
+   */
+  getSlowestChunks(limit = 10) {
+    return Array.from(this.chunks.entries()).sort((a, b) => b[1].loadTime - a[1].loadTime).slice(0, limit).map(([name, data]) => ({ name, ...data }));
+  }
+};
+
+// src/cache.js
+var LRUCache = class {
+  constructor(options = {}) {
+    this.maxSize = options.maxSize || 100;
+    this.ttl = options.ttl || null;
+    this.cache = /* @__PURE__ */ new Map();
+    this.accessOrder = [];
+  }
+  /**
+   * Get value from cache
+   */
+  get(key) {
+    if (!this.cache.has(key)) {
+      return void 0;
+    }
+    const entry = this.cache.get(key);
+    if (this.ttl && Date.now() - entry.timestamp > this.ttl) {
+      this.delete(key);
+      return void 0;
+    }
+    this.updateAccessOrder(key);
+    return entry.value;
+  }
+  /**
+   * Set value in cache
+   */
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.delete(key);
+    }
+    if (this.cache.size >= this.maxSize) {
+      this.evict();
+    }
+    this.cache.set(key, {
+      value,
+      timestamp: Date.now()
+    });
+    this.accessOrder.push(key);
+    return this;
+  }
+  /**
+   * Check if key exists
+   */
+  has(key) {
+    if (!this.cache.has(key)) {
+      return false;
+    }
+    const entry = this.cache.get(key);
+    if (this.ttl && Date.now() - entry.timestamp > this.ttl) {
+      this.delete(key);
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Delete key
+   */
+  delete(key) {
+    this.cache.delete(key);
+    const index = this.accessOrder.indexOf(key);
+    if (index > -1) {
+      this.accessOrder.splice(index, 1);
+    }
+    return this;
+  }
+  /**
+   * Clear cache
+   */
+  clear() {
+    this.cache.clear();
+    this.accessOrder = [];
+    return this;
+  }
+  /**
+   * Get cache size
+   */
+  size() {
+    return this.cache.size;
+  }
+  /**
+   * Update access order
+   */
+  updateAccessOrder(key) {
+    const index = this.accessOrder.indexOf(key);
+    if (index > -1) {
+      this.accessOrder.splice(index, 1);
+    }
+    this.accessOrder.push(key);
+  }
+  /**
+   * Evict least recently used
+   */
+  evict() {
+    if (this.accessOrder.length > 0) {
+      const oldest = this.accessOrder.shift();
+      this.cache.delete(oldest);
+    }
+  }
+  /**
+   * Get all keys
+   */
+  keys() {
+    return Array.from(this.cache.keys());
+  }
+  /**
+   * Get all values
+   */
+  values() {
+    return Array.from(this.cache.values()).map((entry) => entry.value);
+  }
+  /**
+   * Get statistics
+   */
+  getStats() {
+    return {
+      size: this.cache.size,
+      maxSize: this.maxSize,
+      utilizationPercent: (this.cache.size / this.maxSize * 100).toFixed(2),
+      oldestKey: this.accessOrder[0],
+      newestKey: this.accessOrder[this.accessOrder.length - 1]
+    };
+  }
+};
+var MemoryCache = class {
+  constructor(options = {}) {
+    this.options = {
+      strategy: "lru",
+      // lru, lfu, fifo
+      maxSize: 100,
+      ttl: null,
+      ...options
+    };
+    this.cache = /* @__PURE__ */ new Map();
+    this.metadata = /* @__PURE__ */ new Map();
+    this.hits = 0;
+    this.misses = 0;
+  }
+  /**
+   * Get from cache
+   */
+  get(key) {
+    if (!this.cache.has(key)) {
+      this.misses++;
+      return void 0;
+    }
+    const entry = this.cache.get(key);
+    if (entry.ttl && Date.now() > entry.expiresAt) {
+      this.delete(key);
+      this.misses++;
+      return void 0;
+    }
+    this.updateMetadata(key);
+    this.hits++;
+    return entry.value;
+  }
+  /**
+   * Set in cache
+   */
+  set(key, value, options = {}) {
+    if (this.cache.size >= this.options.maxSize && !this.cache.has(key)) {
+      this.evict();
+    }
+    const ttl = options.ttl || this.options.ttl;
+    this.cache.set(key, {
+      value,
+      ttl,
+      expiresAt: ttl ? Date.now() + ttl : null,
+      createdAt: Date.now()
+    });
+    this.metadata.set(key, {
+      accessCount: 0,
+      lastAccess: Date.now()
+    });
+    return this;
+  }
+  /**
+   * Update metadata based on strategy
+   */
+  updateMetadata(key) {
+    const meta = this.metadata.get(key);
+    if (meta) {
+      meta.accessCount++;
+      meta.lastAccess = Date.now();
+    }
+  }
+  /**
+   * Evict based on strategy
+   */
+  evict() {
+    let keyToEvict;
+    switch (this.options.strategy) {
+      case "lru":
+        keyToEvict = this.findLRU();
+        break;
+      case "lfu":
+        keyToEvict = this.findLFU();
+        break;
+      case "fifo":
+        keyToEvict = this.findFIFO();
+        break;
+      default:
+        keyToEvict = this.cache.keys().next().value;
+    }
+    if (keyToEvict) {
+      this.delete(keyToEvict);
+    }
+  }
+  /**
+   * Find least recently used key
+   */
+  findLRU() {
+    let oldest = null;
+    let oldestTime = Infinity;
+    for (const [key, meta] of this.metadata.entries()) {
+      if (meta.lastAccess < oldestTime) {
+        oldestTime = meta.lastAccess;
+        oldest = key;
+      }
+    }
+    return oldest;
+  }
+  /**
+   * Find least frequently used key
+   */
+  findLFU() {
+    let leastUsed = null;
+    let minCount = Infinity;
+    for (const [key, meta] of this.metadata.entries()) {
+      if (meta.accessCount < minCount) {
+        minCount = meta.accessCount;
+        leastUsed = key;
+      }
+    }
+    return leastUsed;
+  }
+  /**
+   * Find first in (oldest)
+   */
+  findFIFO() {
+    let oldest = null;
+    let oldestTime = Infinity;
+    for (const [key, entry] of this.cache.entries()) {
+      if (entry.createdAt < oldestTime) {
+        oldestTime = entry.createdAt;
+        oldest = key;
+      }
+    }
+    return oldest;
+  }
+  /**
+   * Check if key exists
+   */
+  has(key) {
+    return this.cache.has(key);
+  }
+  /**
+   * Delete key
+   */
+  delete(key) {
+    this.cache.delete(key);
+    this.metadata.delete(key);
+    return this;
+  }
+  /**
+   * Clear cache
+   */
+  clear() {
+    this.cache.clear();
+    this.metadata.clear();
+    this.hits = 0;
+    this.misses = 0;
+    return this;
+  }
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    const total = this.hits + this.misses;
+    const hitRate = total > 0 ? (this.hits / total * 100).toFixed(2) : 0;
+    return {
+      size: this.cache.size,
+      maxSize: this.options.maxSize,
+      hits: this.hits,
+      misses: this.misses,
+      hitRate: `${hitRate}%`,
+      strategy: this.options.strategy
+    };
+  }
+};
+var MemoCache = class {
+  constructor(options = {}) {
+    this.cache = new LRUCache(options);
+    this.keyGenerator = options.keyGenerator || this.defaultKeyGenerator;
+  }
+  /**
+   * Default key generator
+   */
+  defaultKeyGenerator(...args) {
+    return JSON.stringify(args);
+  }
+  /**
+   * Memoize a function
+   */
+  memoize(fn) {
+    return (...args) => {
+      const key = this.keyGenerator(...args);
+      if (this.cache.has(key)) {
+        return this.cache.get(key);
+      }
+      const result = fn(...args);
+      this.cache.set(key, result);
+      return result;
+    };
+  }
+  /**
+   * Clear memoization cache
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * Get statistics
+   */
+  getStats() {
+    return this.cache.getStats();
+  }
+};
+var RenderCache = class {
+  constructor(options = {}) {
+    this.cache = new MemoryCache({
+      maxSize: options.maxSize || 50,
+      ttl: options.ttl || 6e4,
+      // 1 minute default
+      strategy: "lru"
+    });
+  }
+  /**
+   * Generate cache key for component
+   */
+  generateKey(component, props) {
+    const componentName = component.name || "anonymous";
+    const propsKey = this.hashProps(props);
+    return `${componentName}:${propsKey}`;
+  }
+  /**
+   * Hash props for cache key
+   */
+  hashProps(props) {
+    try {
+      return JSON.stringify(props, Object.keys(props).sort());
+    } catch {
+      return String(Date.now());
+    }
+  }
+  /**
+   * Get cached render
+   */
+  get(component, props) {
+    const key = this.generateKey(component, props);
+    return this.cache.get(key);
+  }
+  /**
+   * Cache render result
+   */
+  set(component, props, result, options = {}) {
+    const key = this.generateKey(component, props);
+    this.cache.set(key, result, options);
+  }
+  /**
+   * Clear cache
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * Get statistics
+   */
+  getStats() {
+    return this.cache.getStats();
+  }
+};
+function createCache(type = "lru", options = {}) {
+  switch (type) {
+    case "lru":
+      return new LRUCache(options);
+    case "memory":
+      return new MemoryCache(options);
+    case "memo":
+      return new MemoCache(options);
+    case "render":
+      return new RenderCache(options);
+    default:
+      return new LRUCache(options);
+  }
+}
+function memoize(fn, options = {}) {
+  const cache = new MemoCache(options);
+  return cache.memoize(fn);
+}
+
+// src/lazy-loading.js
+var LazyLoader = class {
+  constructor(options = {}) {
+    this.options = {
+      rootMargin: "50px",
+      threshold: 0.01,
+      ...options
+    };
+    this.observer = null;
+    this.observed = /* @__PURE__ */ new Set();
+    this.loaded = /* @__PURE__ */ new Set();
+    this.initObserver();
+  }
+  /**
+   * Initialize Intersection Observer
+   */
+  initObserver() {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    this.observer = new IntersectionObserver(
+      (entries) => this.handleIntersection(entries),
+      {
+        rootMargin: this.options.rootMargin,
+        threshold: this.options.threshold
+      }
+    );
+  }
+  /**
+   * Handle intersection
+   */
+  handleIntersection(entries) {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        this.loadElement(entry.target);
+      }
+    });
+  }
+  /**
+   * Observe an element
+   */
+  observe(element) {
+    if (!this.observer || this.observed.has(element)) {
+      return;
+    }
+    this.observer.observe(element);
+    this.observed.add(element);
+  }
+  /**
+   * Unobserve an element
+   */
+  unobserve(element) {
+    if (!this.observer) {
+      return;
+    }
+    this.observer.unobserve(element);
+    this.observed.delete(element);
+  }
+  /**
+   * Load an element
+   */
+  loadElement(element) {
+    if (this.loaded.has(element)) {
+      return;
+    }
+    if (element.tagName === "IMG") {
+      this.loadImage(element);
+    } else if (element.tagName === "SCRIPT") {
+      this.loadScript(element);
+    } else if (element.tagName === "IFRAME") {
+      this.loadIframe(element);
+    }
+    this.loaded.add(element);
+    this.unobserve(element);
+  }
+  /**
+   * Load image
+   */
+  loadImage(img) {
+    const src = img.dataset.src;
+    const srcset = img.dataset.srcset;
+    if (src) {
+      img.src = src;
+    }
+    if (srcset) {
+      img.srcset = srcset;
+    }
+    img.classList.add("loaded");
+  }
+  /**
+   * Load script
+   */
+  loadScript(script) {
+    const src = script.dataset.src;
+    if (src) {
+      script.src = src;
+    }
+  }
+  /**
+   * Load iframe
+   */
+  loadIframe(iframe) {
+    const src = iframe.dataset.src;
+    if (src) {
+      iframe.src = src;
+    }
+  }
+  /**
+   * Disconnect observer
+   */
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.observed.clear();
+  }
+};
+var ImageLazyLoader = class {
+  constructor(options = {}) {
+    this.options = {
+      placeholder: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"%3E%3C/svg%3E',
+      loadingClass: "lazy-loading",
+      loadedClass: "lazy-loaded",
+      errorClass: "lazy-error",
+      ...options
+    };
+    this.loader = new LazyLoader(options);
+  }
+  /**
+   * Create lazy image component
+   */
+  createImage(src, options = {}) {
+    return {
+      img: {
+        src: this.options.placeholder,
+        "data-src": src,
+        "data-srcset": options.srcset,
+        alt: options.alt || "",
+        className: this.options.loadingClass,
+        loading: "lazy",
+        onload: `this.classList.add("${this.options.loadedClass}")`,
+        onerror: `this.classList.add("${this.options.errorClass}")`
+      }
+    };
+  }
+  /**
+   * Observe images
+   */
+  observe(selector = "img[data-src]") {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const images = document.querySelectorAll(selector);
+    images.forEach((img) => this.loader.observe(img));
+  }
+  /**
+   * Load all images immediately
+   */
+  loadAll() {
+    this.observed.forEach((element) => {
+      this.loader.loadElement(element);
+    });
+  }
+};
+var ResourcePreloader = class {
+  constructor() {
+    this.preloaded = /* @__PURE__ */ new Set();
+    this.preloading = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Preload an image
+   */
+  async preloadImage(src) {
+    if (this.preloaded.has(src)) {
+      return;
+    }
+    if (this.preloading.has(src)) {
+      return this.preloading.get(src);
+    }
+    const promise = new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        this.preloaded.add(src);
+        this.preloading.delete(src);
+        resolve(img);
+      };
+      img.onerror = () => {
+        this.preloading.delete(src);
+        reject(new Error(`Failed to preload image: ${src}`));
+      };
+      img.src = src;
+    });
+    this.preloading.set(src, promise);
+    return promise;
+  }
+  /**
+   * Preload multiple images
+   */
+  async preloadImages(sources) {
+    return Promise.all(sources.map((src) => this.preloadImage(src)));
+  }
+  /**
+   * Preload a script
+   */
+  async preloadScript(src) {
+    if (this.preloaded.has(src)) {
+      return;
+    }
+    if (this.preloading.has(src)) {
+      return this.preloading.get(src);
+    }
+    const promise = new Promise((resolve, reject) => {
+      const link = document.createElement("link");
+      link.rel = "preload";
+      link.as = "script";
+      link.href = src;
+      link.onload = () => {
+        this.preloaded.add(src);
+        this.preloading.delete(src);
+        resolve();
+      };
+      link.onerror = () => {
+        this.preloading.delete(src);
+        reject(new Error(`Failed to preload script: ${src}`));
+      };
+      document.head.appendChild(link);
+    });
+    this.preloading.set(src, promise);
+    return promise;
+  }
+  /**
+   * Prefetch a resource
+   */
+  prefetch(href, options = {}) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const link = document.createElement("link");
+    link.rel = "prefetch";
+    link.href = href;
+    if (options.as) {
+      link.as = options.as;
+    }
+    document.head.appendChild(link);
+  }
+  /**
+   * Check if resource is preloaded
+   */
+  isPreloaded(src) {
+    return this.preloaded.has(src);
+  }
+  /**
+   * Clear preload cache
+   */
+  clear() {
+    this.preloaded.clear();
+    this.preloading.clear();
+  }
+};
+var ProgressiveImageLoader = class {
+  /**
+   * Create progressive image component
+   */
+  createImage(lowResSrc, highResSrc, options = {}) {
+    return {
+      div: {
+        className: "progressive-image",
+        style: options.style || {},
+        children: [
+          {
+            img: {
+              src: lowResSrc,
+              className: "progressive-image-low",
+              alt: options.alt || "",
+              style: "filter: blur(10px); transition: opacity 0.3s;"
+            }
+          },
+          {
+            img: {
+              "data-src": highResSrc,
+              className: "progressive-image-high",
+              alt: options.alt || "",
+              style: "opacity: 0; transition: opacity 0.3s;",
+              onload: "this.style.opacity = 1; this.previousElementSibling.style.opacity = 0;"
+            }
+          }
+        ]
+      }
+    };
+  }
+};
+function createLazyLoader(options = {}) {
+  return new LazyLoader(options);
+}
+function createImageLazyLoader(options = {}) {
+  return new ImageLazyLoader(options);
+}
+function createPreloader() {
+  return new ResourcePreloader();
+}
+function lazyImage(src, options = {}) {
+  const loader = new ImageLazyLoader();
+  return loader.createImage(src, options);
+}
+function progressiveImage(lowRes, highRes, options = {}) {
+  const loader = new ProgressiveImageLoader();
+  return loader.createImage(lowRes, highRes, options);
+}
+export {
+  BundleAnalyzer,
+  CodeSplitter,
+  ImageLazyLoader,
+  LRUCache,
+  LazyLoader,
+  MemoCache,
+  MemoryCache,
+  ProgressiveImageLoader,
+  RenderCache,
+  ResourcePreloader,
+  createCache,
+  createCodeSplitter,
+  createImageLazyLoader,
+  createLazyLoader,
+  createPreloader,
+  createRouteSplitter,
+  lazy,
+  lazyImage,
+  memoize,
+  progressiveImage,
+  splitComponent
+};
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@coherent.js/performance",
+  "version": "1.0.0-beta.2",
+  "description": "Performance optimization utilities for Coherent.js",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./code-splitting": "./dist/code-splitting.js",
+    "./cache": "./dist/cache.js",
+    "./lazy-loading": "./dist/lazy-loading.js"
+  },
+  "keywords": [
+    "coherent",
+    "performance",
+    "code-splitting",
+    "caching",
+    "lazy-loading"
+  ],
+  "author": "Coherent.js Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "@coherent.js/core": "1.0.0-beta.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tomdrouv1/coherent.js.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "./types/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "types/"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "clean": "rm -rf dist"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,166 @@
+/**
+ * Coherent.js Performance TypeScript Definitions
+ * @module @coherent.js/performance
+ */
+
+// ===== Code Splitting Types =====
+
+export interface SplitOptions {
+  loading?: any;
+  error?: any;
+  delay?: number;
+  timeout?: number;
+}
+
+export type LazyComponent = () => Promise<any>;
+
+export class CodeSplitter {
+  constructor();
+  lazy(loader: LazyComponent, options?: SplitOptions): LazyComponent;
+  split(component: any, chunkName?: string): LazyComponent;
+  preload(loader: LazyComponent): Promise<any>;
+  prefetch(loader: LazyComponent): void;
+}
+
+export function createCodeSplitter(): CodeSplitter;
+export function lazy(loader: LazyComponent, options?: SplitOptions): LazyComponent;
+export function splitComponent(component: any, chunkName?: string): LazyComponent;
+
+export interface RouteConfig {
+  path: string;
+  component: LazyComponent;
+  preload?: boolean;
+  prefetch?: boolean;
+}
+
+export function createRouteSplitter(routes: RouteConfig[]): {
+  getRoute(path: string): RouteConfig | undefined;
+  preloadRoute(path: string): Promise<void>;
+  prefetchRoute(path: string): void;
+};
+
+// ===== Cache Types =====
+
+export interface CacheEntry<T = any> {
+  value: T;
+  timestamp: number;
+  hits: number;
+  size?: number;
+}
+
+export interface CacheOptions {
+  maxSize?: number;
+  maxAge?: number;
+  onEvict?: (key: string, value: any) => void;
+}
+
+export class LRUCache<K = string, V = any> {
+  constructor(options?: CacheOptions);
+  get(key: K): V | undefined;
+  set(key: K, value: V): void;
+  has(key: K): boolean;
+  delete(key: K): boolean;
+  clear(): void;
+  size(): number;
+  keys(): K[];
+  values(): V[];
+  entries(): Array<[K, V]>;
+}
+
+export class MemoryCache<K = string, V = any> {
+  constructor(options?: CacheOptions);
+  get(key: K): V | undefined;
+  set(key: K, value: V, ttl?: number): void;
+  has(key: K): boolean;
+  delete(key: K): boolean;
+  clear(): void;
+  size(): number;
+  cleanup(): void;
+}
+
+export interface MemoOptions {
+  maxSize?: number;
+  keyGenerator?: (...args: any[]) => string;
+  ttl?: number;
+}
+
+export class MemoCache {
+  constructor(options?: MemoOptions);
+  memoize<T extends (...args: any[]) => any>(fn: T): T;
+  clear(fn?: Function): void;
+  has(fn: Function, args: any[]): boolean;
+  delete(fn: Function, args?: any[]): boolean;
+}
+
+export interface RenderCacheOptions extends CacheOptions {
+  keyGenerator?: (component: any, props: any) => string;
+}
+
+export class RenderCache {
+  constructor(options?: RenderCacheOptions);
+  get(component: any, props: any): string | undefined;
+  set(component: any, props: any, html: string): void;
+  clear(component?: any): void;
+  size(): number;
+}
+
+export function createCache<K = string, V = any>(type: 'lru' | 'memory' | 'memo' | 'render', options?: CacheOptions): LRUCache<K, V> | MemoryCache<K, V> | MemoCache | RenderCache;
+export function memoize<T extends (...args: any[]) => any>(fn: T, options?: MemoOptions): T;
+
+// ===== Lazy Loading Types =====
+
+export interface LazyLoadOptions {
+  threshold?: number;
+  rootMargin?: string;
+  root?: Element | null;
+  onLoad?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export class LazyLoader {
+  constructor(options?: LazyLoadOptions);
+  observe(element: Element, loader: () => Promise<any>): void;
+  unobserve(element: Element): void;
+  disconnect(): void;
+  loadAll(): Promise<void[]>;
+}
+
+export interface ImageLazyLoadOptions extends LazyLoadOptions {
+  placeholder?: string;
+  blurDataURL?: string;
+  fadeIn?: boolean;
+  fadeInDuration?: number;
+}
+
+export class ImageLazyLoader extends LazyLoader {
+  constructor(options?: ImageLazyLoadOptions);
+  lazyImage(element: HTMLImageElement, src: string, options?: ImageLazyLoadOptions): void;
+}
+
+export interface PreloadOptions {
+  as?: 'script' | 'style' | 'image' | 'font' | 'fetch';
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  type?: string;
+  media?: string;
+}
+
+export class ResourcePreloader {
+  constructor();
+  preload(url: string, options?: PreloadOptions): void;
+  prefetch(url: string): void;
+  preconnect(url: string, crossOrigin?: boolean): void;
+  dnsPrefetch(url: string): void;
+  hasPreloaded(url: string): boolean;
+}
+
+export function createLazyLoader(options?: LazyLoadOptions): LazyLoader;
+export function lazyImage(element: HTMLImageElement | string, src: string, options?: ImageLazyLoadOptions): void;
+
+export interface ProgressiveImageOptions {
+  lowQualitySrc: string;
+  highQualitySrc: string;
+  placeholder?: string;
+  fadeInDuration?: number;
+}
+
+export function progressiveImage(element: HTMLImageElement | string, options: ProgressiveImageOptions): Promise<void>;