@genarou/blazir-icons 1.2.11 → 1.2.15

package/dist/Icon.svelte

@@ -1,251 +1,206 @@
+<!-- DynamicIcon.svelte -->
 <script lang="ts">
+  import { coerceSize } from ".";
   import { iconRegistry, type IconName } from "./icons/registry";
-  import {
-    iconPresets,
-    iconVariants,
-    type IconPreset,
-    type IconVariant,
-  } from "./presets";
+  import { iconPresets, iconVariants } from "./presets";
   import type { IconProps } from "./types";
-  import { coerceSize } from "./utils/defaults";
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // POOLS (1 IO por root scrolleable, 1 RO global)
-  // ───────────────────────────────────────────────────────────────────────────
-  type RootKey = Element | undefined;
-  type Entry = {
-    el: HTMLElement;
-    onViewportChange?: (v: boolean) => void;
-    onSizeChange?: (w: number, h: number) => void;
-  };
-
-  class IntersectionPool {
-    private pools = new Map<
-      RootKey,
-      { io: IntersectionObserver; entries: Set<Entry> }
-    >();
-
-    register(root: RootKey, entry: Entry) {
-      let pool = this.pools.get(root);
-      if (!pool) {
-        const io = new IntersectionObserver(
-          (entries) => {
-            const p = this.pools.get(root);
-            if (!p) return;
-            for (const e of entries) {
-              const tgt = e.target as HTMLElement;
-              for (const item of p.entries) {
-                if (item.el === tgt) {
-                  item.onViewportChange?.(e.isIntersecting);
-                  break;
-                }
-              }
-            }
-          },
-          { root: root as Element | undefined, rootMargin: "200px" }
-        );
-        pool = { io, entries: new Set() };
-        this.pools.set(root, pool);
-      }
 
-      pool.entries.add(entry);
-      pool.io.observe(entry.el);
-
-      return () => {
-        const p = this.pools.get(root);
-        if (!p) return;
-        p.io.unobserve(entry.el);
-        p.entries.delete(entry);
-        if (p.entries.size === 0) {
-          p.io.disconnect();
-          this.pools.delete(root);
-        }
-      };
-    }
-  }
+  // Bridge de actions externas (no importamos lazy aquí)
+  type ActionFn<T = HTMLElement, P = any> = (
+    node: T,
+    params?: P
+  ) => void | { update?: (p?: P) => void; destroy?: () => void };
 
-  class ResizePool {
-    private ro: ResizeObserver | null = null;
-    private entries = new Set<Entry>();
-
-    private ensure() {
-      if (this.ro || typeof ResizeObserver === "undefined") return;
-      this.ro = new ResizeObserver((ros) => {
-        for (const r of ros) {
-          const tgt = r.target as HTMLElement;
-          for (const item of this.entries) {
-            if (item.el === tgt) {
-              item.onSizeChange?.(tgt.offsetWidth, tgt.offsetHeight);
-              break;
-            }
-          }
-        }
-      });
-    }
+  type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
 
-    register(entry: Entry) {
-      this.ensure();
-      this.entries.add(entry);
-      this.ro?.observe(entry.el);
-      entry.onSizeChange?.(entry.el.offsetWidth, entry.el.offsetHeight); // inicial
-      return () => {
-        this.ro?.unobserve(entry.el);
-        this.entries.delete(entry);
-        if (this.entries.size === 0) {
-          this.ro?.disconnect();
-          this.ro = null;
-        }
-      };
-    }
+  type IconPresetName = keyof typeof iconPresets;
+  type IconVariantName = keyof typeof iconVariants;
+
+  interface DynamicIconProps extends Omit<IconProps, "children"> {
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
+    actions?: ActionEntry[];
   }
 
-  const IO_POOL = new IntersectionPool();
-  const RO_POOL = new ResizePool();
+  const p: DynamicIconProps = $props();
 
-  function getScrollRoot(el: HTMLElement | null): Element | undefined {
-    let p: HTMLElement | null = el?.parentElement ?? null;
-    while (p) {
-      const s = getComputedStyle(p);
-      if (/(auto|scroll)/.test(`${s.overflow}${s.overflowX}${s.overflowY}`))
-        return p;
-      p = p.parentElement;
-    }
-    return undefined;
-  }
+  // 🔥 OPTIMIZACIÓN: Cache para props combinadas
+  const propsCache = new Map<string, any>();
 
-  // ───────────────────────────────────────────────────────────────────────────
-  // PROPS
-  // ───────────────────────────────────────────────────────────────────────────
-  interface DynamicIconProps extends Omit<IconProps, "children"> {
-    name: IconName;
-    preset?: IconPreset;
-    variant?: IconVariant;
-    skeleton?: boolean;
+  // 🔥 OPTIMIZACIÓN: Derivados en lugar de effects + states
+  const iconName = $derived(p.name ?? null);
+  const Comp = $derived(iconName ? iconRegistry[iconName] : null);
+
+  // 🔥 OPTIMIZACIÓN: Preset y variant como derivados
+  const presetProps = $derived(() => {
+    const key = p.preset as IconPresetName | undefined;
+    return key ? iconPresets[key] : {};
+  });
+
+  const variantProps = $derived(() => {
+    const key = p.variant as IconVariantName | undefined;
+    return key ? iconVariants[key] : {};
+  });
+
+  // 🔥 OPTIMIZACIÓN: Helper para normalizar ms
+  function toMs(v: unknown): string | undefined {
+    if (v == null) return undefined;
+    return typeof v === "number" ? `${v}ms` : String(v);
   }
 
-  const props: DynamicIconProps = $props();
-  const inputProps = $derived(() => ({ skeleton: false, ...props }));
-
-  const Comp = $derived.by(() => iconRegistry[inputProps().name]);
-  const presetProps = $derived(() =>
-    inputProps().preset ? iconPresets[inputProps().preset!] : {}
-  );
-  const variantProps = $derived(() =>
-    inputProps().variant ? iconVariants[inputProps().variant!] : {}
-  );
-  const mergedProps = $derived(() => ({
-    ...presetProps(),
-    ...variantProps(),
-    ...inputProps(),
-  }));
-
-  // 🔹 No pasar `skeleton` al hijo
-  const childProps = $derived(() => {
-    const { skeleton, animationDuration, animationDelay, ...rest } =
-      mergedProps();
-
-    const toMsString = (v?: string | number) =>
-      v === undefined ? undefined : typeof v === "number" ? `${v}ms` : v;
+  // 🔥 OPTIMIZACIÓN: Child props con memoización
+  const child = $derived(() => {
+    const cacheKey = `${p.preset || ""}-${p.variant || ""}-${p.name || ""}`;
 
-    return {
-      ...rest,
-      animationDuration: toMsString(animationDuration),
-      animationDelay: toMsString(animationDelay),
+    // Check cache primero
+    const cached = propsCache.get(cacheKey);
+    if (cached && cached.timestamp > Date.now() - 1000) {
+      // Cache válido por 1s
+      return { ...cached.props, ...p };
+    }
+
+    const merged = {
+      ...presetProps(),
+      ...variantProps(),
+      ...p,
     };
+
+    // Extraer y eliminar propiedades que no van al hijo
+    const { class: _class, style: _style, actions: _actions, ...rest } = merged;
+
+    // Normalizar animationDuration y animationDelay
+    const normalized: any = { ...rest };
+
+    if (normalized.animationDuration !== undefined) {
+      normalized.animationDuration = toMs(normalized.animationDuration);
+    }
+
+    if (normalized.animationDelay !== undefined) {
+      normalized.animationDelay = toMs(normalized.animationDelay);
+    }
+
+    const result = normalized as IconProps;
+
+    // Guardar en cache
+    propsCache.set(cacheKey, {
+      props: result,
+      timestamp: Date.now(),
+    });
+
+    // Limpiar cache viejo (mantener solo últimos 50)
+    if (propsCache.size > 50) {
+      const firstKey = propsCache.keys().next().value;
+      if (firstKey !== undefined) {
+        propsCache.delete(firstKey);
+      }
+    }
+
+    return result;
   });
 
+  // 🔥 OPTIMIZACIÓN: Box size como derivado
   const boxSize = $derived(() => {
-    const s = coerceSize(mergedProps().size, 24);
+    const rawSize =
+      (p as any).size ??
+      (presetProps() as any).size ??
+      (variantProps() as any).size;
+    const s = coerceSize(rawSize, 24);
     return typeof s === "number" ? `${s}px` : s;
   });
 
-  // ───────────────────────────────────────────────────────────────────────────
-  // Lazy-mount con pooling
-  // ───────────────────────────────────────────────────────────────────────────
-  let hostEl: HTMLElement | null = $state(null);
-  let isVisible = $state(false);
-  let inViewport = false,
-    hasSize = false;
-  let unregIO: (() => void) | null = null,
-    unregRO: (() => void) | null = null;
-
-  function tryMount() {
-    if (!isVisible && inViewport && hasSize) {
-      isVisible = true;
-      unregIO?.();
-      unregIO = null;
-      unregRO?.();
-      unregRO = null;
-    }
-  }
+  // 🔥 OPTIMIZACIÓN: Host class como derivado
+  const hostClass = $derived(`bz-icon-wrapper ${p.class ?? ""}`.trim());
 
-  $effect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof IntersectionObserver === "undefined"
-    ) {
-      isVisible = true;
-      return;
-    }
-    if (!hostEl || isVisible) return;
-
-    const root = getScrollRoot(hostEl) ?? undefined;
-    unregIO = IO_POOL.register(root, {
-      el: hostEl,
-      onViewportChange: (v) => {
-        inViewport = v;
-        tryMount();
-      },
-    });
+  // 🔥 OPTIMIZACIÓN: Host style como derivado
+  const hostStyle = $derived(() => {
+    const size = boxSize();
+    return (
+      `--bz-icon-size:${size};` +
+      `width:${size};height:${size};` +
+      `inline-size:${size};block-size:${size};` +
+      `${p.style ?? ""}`
+    );
+  });
+
+  // Key para forzar remonte y reiniciar animaciones
+  let mountKey = $state(0);
 
-    if (typeof ResizeObserver !== "undefined") {
-      unregRO = RO_POOL.register({
-        el: hostEl,
-        onSizeChange: (w, h) => {
-          hasSize = w > 0 && h > 0;
-          tryMount();
-        },
-      });
-    } else {
-      hasSize = hostEl.offsetWidth > 0 && hostEl.offsetHeight > 0;
-      tryMount();
+  // 🔥 OPTIMIZACIÓN: Bridge de actions más eficiente
+  function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
+    if (!entries || entries.length === 0) {
+      return { update() {}, destroy() {} };
     }
 
-    return () => {
-      unregIO?.();
-      unregIO = null;
-      unregRO?.();
-      unregRO = null;
+    let handles = entries
+      .map(([fn, params]) => fn?.(node, params))
+      .filter(Boolean);
+
+    return {
+      update(next: ActionEntry[] = []) {
+        // Cleanup anterior
+        handles.forEach((h) => h?.destroy?.());
+
+        // Aplicar nuevos
+        handles = next
+          .map(([fn, params]) => fn?.(node, params))
+          .filter(Boolean);
+      },
+      destroy() {
+        handles.forEach((h) => h?.destroy?.());
+        handles = [];
+      },
     };
-  });
+  }
+
+  // Reanima al recibir el evento del action
+  function onLazyMount() {
+    mountKey++;
+  }
 </script>
 
 {#if Comp}
   <span
-    bind:this={hostEl}
-    class="bz-icon-wrapper"
-    style={`inline-size:${boxSize};block-size:${boxSize};`}
-    data-mounted={isVisible ? "true" : "false"}
+    class={hostClass}
+    style={hostStyle()}
+    use:applyActions={p.actions ?? []}
+    onlazyMount={onLazyMount}
   >
-    {#if isVisible}
-      <Comp {...childProps()} />
-    {:else if mergedProps().skeleton}
-      <span class="bz-icon-skeleton" aria-hidden="true"></span>
-    {/if}
+    {#key mountKey}
+      <Comp {...child()} />
+    {/key}
   </span>
-{:else}
-  <span class="bz-icon-error" data-icon={inputProps().name}>
-    ⚠️ Icon not found: {inputProps().name}
+{:else if iconName}
+  <span class="bz-icon-error" data-icon={iconName}>
+    ⚠️ Icon not found: {iconName}
   </span>
+{:else}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
 {/if}
 
 <style>
   .bz-icon-wrapper {
+    cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    line-height: 1;
+    position: relative;
+    pointer-events: auto;
+    contain: layout style paint;
+    content-visibility: auto;
+  }
+
+  .bz-icon-wrapper :global(svg) {
+    pointer-events: bounding-box !important;
   }
+
+  .bz-icon-wrapper :global(svg *) {
+    pointer-events: none !important;
+  }
+
   .bz-icon-skeleton {
     width: 100%;
     height: 100%;
@@ -265,4 +220,37 @@
     border-radius: var(--ui-radius, 0.25rem);
     font-weight: 600;
   }
+  .is-entering {
+    opacity: 0.001;
+    transform: translateY(4px);
+    animation: ic-enter 160ms ease-out forwards;
+  }
+  .is-leaving {
+    opacity: 1;
+    transform: none;
+    animation: ic-leave 160ms ease-in forwards;
+  }
+  .is-mounted {
+    opacity: 1;
+    transform: none;
+  }
+  @keyframes ic-enter {
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  @keyframes ic-leave {
+    to {
+      opacity: 0.001;
+      transform: translateY(4px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .is-entering,
+    .is-leaving {
+      animation: none;
+      transform: none;
+    }
+  }
 </style>

package/dist/Icon.svelte.d.ts

@@ -1,11 +1,21 @@
 import { type IconName } from "./icons/registry";
-import { type IconPreset, type IconVariant } from "./presets";
+import { iconPresets, iconVariants } from "./presets";
 import type { IconProps } from "./types";
+type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
+    update?: (p?: P) => void;
+    destroy?: () => void;
+};
+type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+type IconPresetName = keyof typeof iconPresets;
+type IconVariantName = keyof typeof iconVariants;
 interface DynamicIconProps extends Omit<IconProps, "children"> {
-    name: IconName;
-    preset?: IconPreset;
-    variant?: IconVariant;
-    skeleton?: boolean;
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
+    actions?: ActionEntry[];
 }
 declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;