vanilla-jui 1.4.8 → 1.5.1

package/src/primitives/parabola.ts

@@ -1,4 +1,4 @@
-import { jsx } from 'vanilla-signal';
+import { insert, jsx } from 'vanilla-signal';
 
 import { type DOMReference, resolveElement } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
@@ -45,21 +45,10 @@ interface ResolvedParabolaProps extends Record<string, unknown> {
   onHidden: ((parabola: ParabolaInstance) => void) | null;
 }
 
-interface ParabolaDOM {
-  root: HTMLElement | null;
-  from: Element | null;
-  to: Element | null;
-  balls: Set<HTMLElement>;
-}
-
 interface ParabolaRuntime {
   destroyed: boolean;
 }
 
-interface ParabolaCache {
-  delays: Map<string, () => void>;
-}
-
 interface ParabolaPath {
   startX: number;
   startY: number;
@@ -67,10 +56,10 @@ interface ParabolaPath {
   endY: number;
 }
 
-interface ParabolaInstance {
-  props: ResolvedParabolaProps;
-  dom: ParabolaDOM;
-  runtime: ParabolaRuntime;
+export interface ParabolaInstance {
+  readonly props: ResolvedParabolaProps;
+  readonly element: HTMLElement | null;
+  readonly runtime: ParabolaRuntime;
   show(): Promise<boolean>;
   destroy(): void;
 }
@@ -135,39 +124,24 @@ function normalizeProps(input: ParabolaProps): ResolvedParabolaProps {
   };
 }
 
-class Parabola implements ParabolaInstance {
-  props: ResolvedParabolaProps;
-  dom: ParabolaDOM;
-  runtime: ParabolaRuntime;
-  cache: ParabolaCache;
-
-  constructor(props: ParabolaProps = {}) {
-    this.props = normalizeProps(props);
-    this.dom = {
-      root: null,
-      from: resolveElement(this.props.from),
-      to: resolveElement(this.props.to),
-      balls: new Set(),
-    };
-    this.runtime = {
-      destroyed: false,
-    };
-    this.cache = {
-      delays: new Map(),
-    };
-
-    this.createRoot();
-  }
-
-  private createRoot(): void {
-    if (this.runtime.destroyed) return;
-
-    if (this.dom.root) {
-      if (!this.dom.root.isConnected) document.body.appendChild(this.dom.root);
+export function createParabola(input: ParabolaProps = {}): ParabolaInstance {
+  const props = normalizeProps(input);
+  const runtime: ParabolaRuntime = { destroyed: false };
+  const balls = new Set<HTMLElement>();
+  const delays = new Map<string, () => void>();
+  const frames = new Map<HTMLElement, number>();
+  let root: HTMLElement | null = null;
+  let from = resolveElement(props.from);
+  let to = resolveElement(props.to);
+  let parabola!: ParabolaInstance;
+
+  const createRoot = (): void => {
+    if (runtime.destroyed) return;
+    if (root) {
+      if (!root.isConnected) insert(document.body, root);
       return;
     }
-
-    this.dom.root = jsx('div', {
+    root = jsx('div', {
       'data-parabola': 'root',
       style: {
         position: 'fixed',
@@ -176,19 +150,31 @@ class Parabola implements ParabolaInstance {
         zIndex: '9999',
       },
     }) as HTMLElement;
-    document.body.appendChild(this.dom.root);
-  }
-
-  private createBall(path: ParabolaPath): HTMLElement | null {
-    if (this.runtime.destroyed) return null;
-
-    this.createRoot();
-    if (!this.dom.root) return null;
-
-    const { color, size } = this.props.ball;
+    insert(document.body, root);
+  };
+  const removeRootIfIdle = (): void => {
+    if (!runtime.destroyed || balls.size > 0) return;
+    root?.remove();
+    root = null;
+  };
+  const removeBall = (ball: HTMLElement, notify: boolean): void => {
+    if (!balls.has(ball)) return;
+    const frame = frames.get(ball);
+    if (frame) cancelAnimationFrame(frame);
+    frames.delete(ball);
+    ball.remove();
+    balls.delete(ball);
+    if (notify) props.onHidden?.(parabola);
+    removeRootIfIdle();
+  };
+  const createBall = (path: ParabolaPath): HTMLElement | null => {
+    if (runtime.destroyed) return null;
+    createRoot();
+    if (!root) return null;
+    const { color, size } = props.ball;
 
     const ball = jsx('div', {
-      className: this.props.className.ball,
+      className: props.className.ball,
       'data-parabola': 'ball',
       style: {
         backgroundColor: color,
@@ -204,20 +190,13 @@ class Parabola implements ParabolaInstance {
         top: `${path.startY}px`,
       },
     }) as HTMLElement;
-    this.dom.root.appendChild(ball);
-    this.dom.balls.add(ball);
-
+    insert(root, ball);
+    balls.add(ball);
     return ball;
-  }
-
-  private resolveTargets(): void {
-    this.dom.from = resolveElement(this.props.from);
-    this.dom.to = resolveElement(this.props.to);
-  }
-
-  private calculatePath(): ParabolaPath | null {
-    const fromRect = this.dom.from?.getBoundingClientRect();
-    const toRect = this.dom.to?.getBoundingClientRect();
+  };
+  const calculatePath = (): ParabolaPath | null => {
+    const fromRect = from?.getBoundingClientRect();
+    const toRect = to?.getBoundingClientRect();
 
     if (!fromRect || !toRect) return null;
 
@@ -226,7 +205,7 @@ class Parabola implements ParabolaInstance {
 
     let startX: number;
     let startY: number;
-    switch (this.props.direction) {
+    switch (props.direction) {
       case 'top-left':
         startX = fL + fW * 0.2;
         startY = fT + fH * 0.2;
@@ -252,20 +231,15 @@ class Parabola implements ParabolaInstance {
     const endY = tT + tH / 2;
 
     return { startX, startY, endX, endY };
-  }
-
-  private easeOutCubic(t: number): number {
-    return 1 - (1 - t) ** 3;
-  }
-
-  private animate(
+  };
+  const animate = (
     ball: HTMLElement,
     startX: number,
     startY: number,
     endX: number,
     endY: number,
     duration = 800
-  ): void {
+  ): void => {
     if (!ball.isConnected) return;
 
     const startTime = performance.now();
@@ -274,11 +248,14 @@ class Parabola implements ParabolaInstance {
     const peakOffset = -100;
 
     const step = (currentTime: number): void => {
-      if (!ball.isConnected) return;
+      if (runtime.destroyed || !ball.isConnected) {
+        frames.delete(ball);
+        return;
+      }
 
       const elapsed = currentTime - startTime;
       const progress = Math.min(elapsed / duration, 1);
-      const eased = this.easeOutCubic(progress);
+      const eased = 1 - (1 - progress) ** 3;
 
       const currentX = startX + deltaX * eased;
       const currentY =
@@ -292,97 +269,79 @@ class Parabola implements ParabolaInstance {
       ball.style.transform = `translate(-50%, -50%) scale(${1 - eased * 0.3})`;
 
       if (progress < 1) {
-        requestAnimationFrame(step);
+        frames.set(ball, requestAnimationFrame(step));
       } else {
-        this.removeBall(ball, true);
+        frames.delete(ball);
+        removeBall(ball, true);
       }
     };
 
-    requestAnimationFrame(step);
-  }
-
-  private startDelay(callback: () => void, onCancel: () => void): void {
+    frames.set(ball, requestAnimationFrame(step));
+  };
+  const startDelay = (callback: () => void, onCancel: () => void): void => {
     const key = `parabola-show-${randomId()}`;
-    this.cache.delays.set(key, onCancel);
-
-    timer.start(key, this.props.showDelay, () => {
-      this.cache.delays.delete(key);
+    delays.set(key, onCancel);
+    timer.start(key, props.showDelay, () => {
+      delays.delete(key);
       callback();
     });
-  }
-
-  private cancelDelays(): void {
-    for (const [key, onCancel] of this.cache.delays) {
+  };
+  const cancelDelays = (): void => {
+    for (const [key, onCancel] of delays) {
       timer.cancel(key);
       onCancel();
     }
-    this.cache.delays.clear();
-  }
-
-  private removeBall(ball: HTMLElement, notify: boolean): void {
-    if (!this.dom.balls.has(ball)) return;
-
-    ball.remove();
-    this.dom.balls.delete(ball);
-
-    if (notify) this.props.onHidden?.(this);
-    this.removeRootIfIdle();
-  }
-
-  private removeRootIfIdle(): void {
-    if (!this.runtime.destroyed || this.dom.balls.size > 0) return;
-
-    this.dom.root?.remove();
-    this.dom.root = null;
-  }
-
-  show(): Promise<boolean> {
-    if (this.runtime.destroyed) return Promise.resolve(false);
-
-    return new Promise((resolve) => {
-      this.startDelay(
-        () => {
-          if (this.runtime.destroyed) {
-            resolve(false);
-            return;
-          }
-
-          this.resolveTargets();
-
-          const path = this.calculatePath();
-          if (!path) {
-            resolve(false);
-            return;
-          }
-
-          const ball = this.createBall(path);
-          if (!ball) {
-            resolve(false);
-            return;
-          }
-
-          this.props.onShow?.(this);
-
-          this.animate(ball, path.startX, path.startY, path.endX, path.endY);
-          resolve(true);
-        },
-        () => resolve(false)
-      );
-    });
-  }
-
-  destroy(): void {
-    if (this.runtime.destroyed) return;
-
-    this.cancelDelays();
-
-    this.dom.from = null;
-    this.dom.to = null;
-    this.runtime.destroyed = true;
-    this.removeRootIfIdle();
-  }
-}
+    delays.clear();
+  };
 
-export function createParabola(props: ParabolaProps = {}): ParabolaInstance {
-  return new Parabola(props);
+  parabola = {
+    props,
+    runtime,
+    get element() {
+      return root;
+    },
+    show() {
+      if (runtime.destroyed) return Promise.resolve(false);
+      return new Promise((resolve) => {
+        startDelay(
+          () => {
+            if (runtime.destroyed) {
+              resolve(false);
+              return;
+            }
+            from = resolveElement(props.from);
+            to = resolveElement(props.to);
+            const path = calculatePath();
+            if (!path) {
+              resolve(false);
+              return;
+            }
+
+            const ball = createBall(path);
+            if (!ball) {
+              resolve(false);
+              return;
+            }
+
+            props.onShow?.(parabola);
+            animate(ball, path.startX, path.startY, path.endX, path.endY);
+            resolve(true);
+          },
+          () => resolve(false)
+        );
+      });
+    },
+    destroy() {
+      if (runtime.destroyed) return;
+      cancelDelays();
+      from = null;
+      to = null;
+      runtime.destroyed = true;
+      for (const ball of balls) removeBall(ball, false);
+      frames.clear();
+      removeRootIfIdle();
+    },
+  };
+  createRoot();
+  return parabola;
 }

package/src/primitives/sticky.ts

@@ -0,0 +1,297 @@
+import { createDeepStore, flushSync } from 'vanilla-signal';
+import { randomId } from '../utilities/id.ts';
+import { type DOMReference, all, requireContainer } from '../utilities/dom.ts';
+import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+
+type StickyOverflow = 'destroy' | 'ignore';
+
+interface StickyProps extends Record<string, unknown> {
+  target?: DOMReference;
+  parent?: DOMReference;
+  max?: number;
+  top?: number;
+  gap?: number;
+  overflow?: StickyOverflow;
+  reactive?: boolean;
+  onReBuild?: ((sticky: StickyInstance) => void) | null;
+}
+
+interface ResolvedStickyProps extends Record<string, unknown> {
+  target: DOMReference;
+  parent: DOMReference;
+  max: number;
+  top: number;
+  gap: number;
+  overflow: StickyOverflow;
+  reactive: boolean;
+  onReBuild: ((sticky: StickyInstance) => void) | null;
+}
+
+interface StickyStateItem {
+  key: string;
+  index: number;
+  top: number;
+}
+
+interface StickyState extends Record<string, unknown> {
+  items: StickyStateItem[];
+}
+
+interface StickyOriginalStyle {
+  element: HTMLElement;
+  originalPosition: string;
+  originalTop: string;
+  originalZIndex: string;
+}
+
+interface StickyRuntime {
+  built: boolean;
+  destroyed: boolean;
+  reBuilding: boolean;
+  reBuildFrameId: number;
+}
+
+interface StickyCache {
+  originalStyles: Map<HTMLElement, StickyOriginalStyle>;
+  keys: WeakMap<HTMLElement, string>;
+}
+
+interface StickyInstance {
+  readonly props: ResolvedStickyProps;
+  readonly state: StickyState;
+  readonly runtime: StickyRuntime;
+  build(): StickyInstance;
+  reBuild(): StickyInstance;
+  destroy(): void;
+}
+
+const STICKY_PROPS_SCHEMA = {
+  target: { default: null },
+  parent: { default: null },
+  max: {
+    default: 10,
+    type: 'number',
+    integer: true,
+    greaterThan: 0,
+  },
+  top: {
+    default: 16,
+    type: 'number',
+    min: 0,
+  },
+  gap: {
+    default: 16,
+    type: 'number',
+    min: 0,
+  },
+  overflow: {
+    default: 'destroy',
+    type: 'string',
+    enum: ['destroy', 'ignore'],
+  },
+  reactive: { default: false, type: 'boolean' },
+  onReBuild: { default: null, types: ['function', 'null'] },
+} satisfies ResolveSchema<StickyProps>;
+
+function normalizeProps(input: StickyProps): ResolvedStickyProps {
+  const props = resolveProps(input, STICKY_PROPS_SCHEMA, 'Sticky.props');
+  return {
+    target: props.target as DOMReference,
+    parent: props.parent as DOMReference,
+    max: props.max as number,
+    top: props.top as number,
+    gap: props.gap as number,
+    overflow: props.overflow as StickyOverflow,
+    reactive: props.reactive as boolean,
+    onReBuild: props.onReBuild as ResolvedStickyProps['onReBuild'],
+  };
+}
+
+function uniqueElements(elements: readonly Node[]): HTMLElement[] {
+  const htmlElements = elements.filter(
+    (element): element is HTMLElement => element instanceof HTMLElement
+  );
+  return Array.from(new Set(htmlElements));
+}
+
+function resolveParent(parent: DOMReference): Element | null {
+  if (parent === false || parent == null) return null;
+  return requireContainer(parent, 'Sticky.parent', 'element');
+}
+
+function resolveTarget(
+  target: DOMReference,
+  parent: Element | null
+): HTMLElement[] {
+  if (target === false || target == null) return [];
+
+  if (typeof target === 'string') {
+    if (!parent) {
+      return uniqueElements(requireContainer(target, 'Sticky.target', 'array'));
+    }
+
+    const elements = uniqueElements(all<HTMLElement>(target, parent));
+    if (elements.length === 0) {
+      throw new Error('Sticky.target: target not found.');
+    }
+    return elements;
+  }
+
+  const elements = uniqueElements(
+    requireContainer(target, 'Sticky.target', 'array')
+  );
+  if (!parent) return elements;
+
+  const scopedElements = elements.filter(
+    (element) => element === parent || parent.contains(element)
+  );
+  if (scopedElements.length === 0) {
+    throw new Error('Sticky.target: target not found in parent.');
+  }
+  return scopedElements;
+}
+
+export function createSticky(props: StickyProps = {}): StickyInstance {
+  const settings = normalizeProps(props);
+  const state = createDeepStore({ items: [] }) as StickyState;
+  const runtime: StickyRuntime = {
+    built: false,
+    destroyed: false,
+    reBuilding: false,
+    reBuildFrameId: 0,
+  };
+  const cache: StickyCache = {
+    originalStyles: new Map(),
+    keys: new WeakMap(),
+  };
+  let parent: Element | null = null;
+  let targets: HTMLElement[] = [];
+  let observer: MutationObserver | null = null;
+  let sticky: StickyInstance;
+
+  const resolveOverflow = (elements: HTMLElement[]): HTMLElement[] => {
+    if (elements.length <= settings.max) return elements;
+    return settings.overflow === 'ignore' ? [] : elements.slice(-settings.max);
+  };
+
+  const restore = (): void => {
+    for (const item of cache.originalStyles.values()) restoreItem(item);
+  };
+
+  const restoreItem = (item: StickyOriginalStyle): void => {
+    item.element.style.position = item.originalPosition;
+    item.element.style.top = item.originalTop;
+    item.element.style.zIndex = item.originalZIndex;
+  };
+
+  const itemKey = (element: HTMLElement, index: number): string => {
+    if (element.id) return element.id;
+    const cached = cache.keys.get(element);
+    if (cached) return cached;
+    const key = `sticky-${randomId()}-${index}`;
+    cache.keys.set(element, key);
+    return key;
+  };
+
+  const rememberOriginalStyle = (element: HTMLElement): void => {
+    if (cache.originalStyles.has(element)) return;
+    cache.originalStyles.set(element, {
+      element,
+      originalPosition: element.style.position,
+      originalTop: element.style.top,
+      originalZIndex: element.style.zIndex,
+    });
+  };
+
+  const resolveTargets = (): HTMLElement[] => {
+    return resolveOverflow(resolveTarget(settings.target, parent));
+  };
+
+  const apply = (startTop = settings.top): number => {
+    let nextTop = startTop;
+    const items: StickyStateItem[] = [];
+    const activeTargets = new Set(targets);
+
+    for (const [element, item] of cache.originalStyles) {
+      if (!activeTargets.has(element)) {
+        restoreItem(item);
+        cache.originalStyles.delete(element);
+      }
+    }
+
+    targets.forEach((element, index) => {
+      rememberOriginalStyle(element);
+      element.style.position = 'sticky';
+      element.style.top = `${nextTop}px`;
+      items.push({ key: itemKey(element, index), index, top: nextTop });
+      nextTop += element.offsetHeight + settings.gap;
+    });
+
+    flushSync(() => {
+      state.items = items;
+    });
+    settings.onReBuild?.(sticky);
+    return nextTop;
+  };
+
+  const observeParent = (): void => {
+    observer?.disconnect();
+    observer = null;
+    if (!settings.reactive) return;
+    const root = parent || document.body;
+    observer = new MutationObserver(() => {
+      if (runtime.reBuilding || runtime.destroyed || !runtime.built) return;
+      runtime.reBuilding = true;
+      runtime.reBuildFrameId = requestAnimationFrame(() => {
+        runtime.reBuilding = false;
+        runtime.reBuildFrameId = 0;
+        sticky.reBuild();
+      });
+    });
+    observer.observe(root, { childList: true, subtree: true });
+  };
+
+  const build = (): StickyInstance => {
+    if (runtime.destroyed) throw new Error('Sticky.build: instance destroyed');
+    if (runtime.built) return sticky;
+
+    parent = resolveParent(settings.parent);
+    targets = resolveTargets();
+    runtime.built = true;
+    observeParent();
+    if (targets.length === 0) {
+      flushSync(() => {
+        state.items = [];
+      });
+      return sticky;
+    }
+    apply();
+    return sticky;
+  };
+
+  const reBuild = (): StickyInstance => {
+    if (!runtime.destroyed && runtime.built) {
+      targets = resolveTargets();
+      apply();
+    }
+    return sticky;
+  };
+
+  const destroy = (): void => {
+    if (runtime.destroyed) return;
+    if (runtime.reBuildFrameId) cancelAnimationFrame(runtime.reBuildFrameId);
+    observer?.disconnect();
+    observer = null;
+    restore();
+    runtime.destroyed = true;
+    runtime.built = false;
+    runtime.reBuilding = false;
+    runtime.reBuildFrameId = 0;
+    cache.originalStyles.clear();
+    targets = [];
+    parent = null;
+  };
+
+  sticky = { props: settings, state, runtime, build, reBuild, destroy };
+  return sticky;
+}