@withl5e/l5e 0.1.0-alpha.0

package/src/swap/swap.ts

@@ -0,0 +1,57 @@
+import type { SwapMode } from './types';
+
+export function swap(target: Element, nodes: Node[], mode: SwapMode): Node[] {
+  switch (mode) {
+    case 'innerHTML':
+      target.innerHTML = '';
+      const innerInserted: Node[] = [];
+      for (const n of nodes) {
+        const added = target.appendChild(n);
+        innerInserted.push(added);
+      }
+      return innerInserted;
+
+    case 'outerHTML': {
+      const parent = target.parentNode;
+      if (!parent) return [];
+      const outerInserted: Node[] = [];
+      for (const n of nodes) {
+        parent.insertBefore(n, target);
+        outerInserted.push(n);
+      }
+      parent.removeChild(target);
+      return outerInserted;
+    }
+
+    case 'beforebegin': {
+      const parent = target.parentNode;
+      if (!parent) return [];
+      return nodes.map((n) => parent.insertBefore(n, target));
+    }
+
+    case 'afterbegin': {
+      const first = target.firstChild;
+      return nodes.map((n) => target.insertBefore(n, first));
+    }
+
+    case 'beforeend':
+      return nodes.map((n) => target.appendChild(n));
+
+    case 'afterend': {
+      const parent = target.parentNode;
+      if (!parent) return [];
+      const ref = target.nextSibling;
+      return nodes.map((n) => parent.insertBefore(n, ref));
+    }
+
+    case 'delete':
+      target.remove();
+      return [];
+
+    case 'none':
+      return [];
+
+    default:
+      return [];
+  }
+}

package/src/swap/types.ts

@@ -0,0 +1,47 @@
+export type SwapMode =
+  | 'innerHTML'
+  | 'outerHTML'
+  | 'beforebegin'
+  | 'afterbegin'
+  | 'beforeend'
+  | 'afterend'
+  | 'delete'
+  | 'none';
+
+export interface SwapContext {
+  triggerElement: HTMLElement | null;
+  triggerDataset: DOMStringMap;
+}
+
+export interface SwapOptions {
+  action?: (ctx: SwapContext) => Promise<Response>;
+  select?: string;
+  target: string;
+  swap?: SwapMode;
+  trigger?: string;
+  event?: string;
+  loading?: {
+    target?: string;
+    class?: string;
+    html?: string;
+    disabled?: boolean;
+  };
+  onBefore?: (ctx: SwapContext) => boolean | void;
+  onNodes?: (nodes: Node[], meta: SwapMeta) => Node[] | void;
+  onAfter?: (inserted: Node[], meta: SwapMeta, ctx: SwapContext) => void;
+  /**
+   * @deprecated Use `onAfter` instead. Will be removed in the next release.
+   */
+  onSwap?: (inserted: Node[], meta: SwapMeta) => void;
+  onError?: (err: Error, status?: number) => void;
+}
+
+export interface SwapInstance {
+  exec(input?: HTMLElement | string): Promise<void>;
+  destroy(): void;
+}
+
+export interface SwapMeta {
+  root: Element | null;
+  response?: Response;
+}

package/src/swap/utils.ts

@@ -0,0 +1,7 @@
+export function debounce<T extends (...args: any[]) => void>(fn: T, ms: number): T {
+  let timer: ReturnType<typeof setTimeout>;
+  return ((...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  }) as unknown as T;
+}

package/src/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { initTooltips, setupTooltipObserver } from './tooltip-loader';
+export { showTooltip, showTooltipMobile } from './tooltip-runtime';

package/src/tooltip/tooltip-loader.ts

@@ -0,0 +1,108 @@
+// tooltip-loader.ts
+// File này chỉ làm nhiệm vụ wake up tooltip khi cần thiết
+
+// Định nghĩa kiểu cho tooltip host element
+type TooltipHost = HTMLElement & {
+  dataset: {
+    tooltipId: string;
+    tooltipType?: string;
+  };
+};
+
+/**
+ * Kiểm tra xem thiết bị hiện tại có phải là thiết bị di động hay không
+ * @returns true nếu là thiết bị di động
+ */
+function isMobileDevice(): boolean {
+  // Kiểm tra User Agent
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isMobile =
+    /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|tablet/i.test(userAgent);
+
+  // Kiểm tra thêm kích thước màn hình (dưới 768px thường được coi là thiết bị di động)
+  const isTouchScreen = window.matchMedia('(max-width: 768px)').matches;
+
+  return isMobile || isTouchScreen;
+}
+
+/**
+ * Hàm khởi tạo tooltip, chỉ load runtime khi cần thiết
+ */
+export function initTooltips(): void {
+  const tooltipTriggers = document.querySelectorAll<TooltipHost>('[data-tooltip-id]');
+  if (tooltipTriggers.length === 0) return;
+
+  const mobile = isMobileDevice();
+
+  tooltipTriggers.forEach((trigger) => {
+    if (trigger.hasAttribute('data-tooltip-initialized')) return;
+    trigger.setAttribute('data-tooltip-initialized', 'true');
+
+    if (mobile) {
+      trigger.addEventListener('click', async (e) => {
+        e.preventDefault();
+        const { showTooltipMobile } = await import('./tooltip-runtime');
+        showTooltipMobile(trigger);
+      });
+    } else {
+      trigger.addEventListener(
+        'pointerenter',
+        async () => {
+          const { showTooltip } = await import('./tooltip-runtime');
+          showTooltip(trigger);
+        },
+        { passive: true },
+      );
+    }
+  });
+}
+
+// Thêm một MutationObserver để theo dõi các phần tử DOM mới (cho React components)
+export function setupTooltipObserver(): void {
+  // Kiểm tra xem đã có observer chưa
+  if (window.__tooltipObserver) return;
+
+  // Observer theo dõi khi có phần tử mới được thêm vào DOM
+  const observer = new MutationObserver((mutations) => {
+    let shouldInit = false;
+
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+        // Kiểm tra xem có phần tử tooltip nào mới được thêm vào không
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as HTMLElement;
+            // Kiểm tra nếu phần tử có data-tooltip-id hoặc chứa phần tử con có data-tooltip-id
+            if (
+              element.hasAttribute('data-tooltip-id') ||
+              element.querySelector('[data-tooltip-id]')
+            ) {
+              shouldInit = true;
+            }
+          }
+        });
+      }
+    });
+
+    // Chỉ gọi initTooltips nếu có phát hiện tooltip mới
+    if (shouldInit) {
+      initTooltips();
+    }
+  });
+
+  // Bắt đầu theo dõi toàn bộ DOM
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  // Lưu observer vào window để tránh tạo nhiều observer
+  window.__tooltipObserver = observer;
+}
+
+// Typescript declaration cho window object
+declare global {
+  interface Window {
+    __tooltipObserver?: MutationObserver;
+  }
+}

package/src/tooltip/tooltip-runtime.ts

@@ -0,0 +1,173 @@
+// tooltip-runtime.ts
+// Logic đầy đủ cho tooltip, chỉ được tải khi cần thiết
+
+import type { Middleware, Placement } from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, hide, offset, shift } from '@floating-ui/dom';
+
+type TooltipHost = HTMLElement & {
+  dataset: {
+    tooltipId: string;
+    tooltipType?: string;
+    tooltipPlacement?: Placement;
+    href?: string;
+  };
+};
+
+export async function showTooltip(host: TooltipHost): Promise<void> {
+  /*
+   * Trong lúc chờ dynamic import, con trỏ có thể đã rời khỏi phần tử host.
+   * Nếu vậy, việc tạo tooltip là không cần thiết và sẽ không có sự kiện
+   * `pointerleave` nào được kích hoạt để ẩn tooltip.
+   */
+  if (!host.matches(':hover')) return;
+
+  const tip = document.createElement('div');
+  tip.className = 'tp';
+  tip.innerHTML = '<div class="tp-loading">Loading...</div>';
+  document.body.append(tip);
+
+  // --- Cleanup ---
+  let cleanupAutoUpdate: (() => void) | null = null;
+
+  const cleanup = () => {
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+    if (document.body.contains(tip)) tip.remove();
+  };
+
+  host.addEventListener('pointerleave', cleanup);
+
+  // Con trỏ đã rời trước khi listener được gắn
+  if (!host.matches(':hover')) {
+    host.removeEventListener('pointerleave', cleanup);
+    tip.remove();
+    return;
+  }
+
+  // --- Position: autoUpdate thay thế manual scroll/resize ---
+  cleanupAutoUpdate = autoUpdate(host, tip, () => position(host, tip));
+
+  // --- Fetch nội dung từ server ---
+  try {
+    const { tooltipId: id, tooltipType: type } = host.dataset;
+    const html = await fetch(`/tooltip/${type}/${id}`, {
+      headers: { Accept: 'text/html' },
+    }).then((r) => r.text());
+
+    if (!document.body.contains(tip)) return;
+
+    tip.innerHTML = html;
+    await position(host, tip);
+  } catch {
+    if (document.body.contains(tip)) {
+      tip.innerHTML = '<div class="tp-error">Không thể tải tooltip</div>';
+    }
+  }
+}
+
+/**
+ * Mobile: hiển thị tooltip dạng fullscreen popup.
+ * Nếu host có data-href, thêm nút "Xem chi tiết" dẫn đến link đó.
+ */
+export async function showTooltipMobile(host: TooltipHost): Promise<void> {
+  const overlay = document.createElement('div');
+  overlay.className = 'tp-overlay';
+
+  const popup = document.createElement('div');
+  popup.className = 'tp-mobile';
+  popup.innerHTML = '<div class="tp-loading">Loading...</div>';
+
+  overlay.append(popup);
+  document.body.append(overlay);
+  document.body.style.overflow = 'hidden';
+
+  const cleanup = () => {
+    overlay.remove();
+    document.body.style.overflow = '';
+  };
+
+  // Đóng khi bấm vào overlay (bên ngoài popup)
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) cleanup();
+  });
+
+  try {
+    const { tooltipId: id, tooltipType: type } = host.dataset;
+    const html = await fetch(`/tooltip/${type}/${id}`, {
+      headers: { Accept: 'text/html' },
+    }).then((r) => r.text());
+
+    popup.innerHTML = '';
+
+    // Nút đóng
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'tp-mobile-close';
+    closeBtn.innerHTML = '&#x2715;';
+    closeBtn.addEventListener('click', cleanup);
+    popup.append(closeBtn);
+
+    // Nội dung
+    const content = document.createElement('div');
+    content.className = 'tp-mobile-content';
+    content.innerHTML = html;
+    popup.append(content);
+
+    // Nút "Xem chi tiết" nếu có data-href
+    const href = host.dataset.href;
+    if (href) {
+      const link = document.createElement('a');
+      link.className = 'tp-mobile-link';
+      link.href = href;
+      link.textContent = 'Xem chi tiết';
+      popup.append(link);
+    }
+  } catch {
+    popup.innerHTML = '<div class="tp-error">Không thể tải tooltip</div>';
+  }
+}
+
+/**
+ * Khi tooltip cao hơn 60% viewport, bỏ qua placement trên/dưới host
+ * và căn giữa theo chiều dọc màn hình + giới hạn maxHeight để scroll.
+ */
+function centerFallback(): Middleware {
+  return {
+    name: 'centerFallback',
+    fn({ rects }) {
+      const vh = window.innerHeight;
+      const padding = 8;
+
+      if (rects.floating.height <= vh * 0.6) return {};
+
+      return {
+        y: window.scrollY + Math.max(padding, (vh - rects.floating.height) / 2),
+        data: { centered: true, maxHeight: vh - padding * 2 },
+      };
+    },
+  };
+}
+
+function position(host: TooltipHost, tip: HTMLDivElement): Promise<void> {
+  const preferredPlacement = host.dataset.tooltipPlacement;
+  const placement = preferredPlacement ?? 'left';
+
+  return computePosition(host, tip, {
+    placement,
+    middleware: [offset(6), flip(), shift({ padding: 5 }), centerFallback(), hide()],
+  }).then(({ x, y, middlewareData }) => {
+    Object.assign(tip.style, { left: `${x}px`, top: `${y}px` });
+
+    tip.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible';
+
+    const center = middlewareData.centerFallback as { centered?: boolean; maxHeight?: number };
+    if (center?.centered) {
+      tip.style.maxHeight = `${center.maxHeight}px`;
+      tip.style.overflowY = 'auto';
+    } else {
+      tip.style.maxHeight = '';
+      tip.style.overflowY = '';
+    }
+  });
+}

package/types.d.ts

@@ -0,0 +1,14 @@
+// Minimal global JSX types for consumers of L5E.
+// This file intentionally avoids imports to ensure it loads cleanly everywhere
+// For internal use, prefer src/core/jsx-types.d.ts which has full type definitions
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+    // Use any for external consumers, but internal files should use jsx-types.d.ts
+    type Element = any;
+  }
+}
+
+export {};