@bquery/bquery 1.3.0 → 1.5.0

package/src/full.ts

@@ -1,187 +1,223 @@
-/**
- * bQuery.js — Full Bundle
- *
- * This is the complete bundle containing all modules for CDN usage.
- * Use this when you want all features without tree-shaking concerns.
- *
- * @module bquery/full
- *
- * @example CDN Usage (ES Modules)
- * ```html
- * <script type="module">
- *   import { $, signal, component } from 'https://unpkg.com/bquery@1/dist/full.es.mjs';
- *
- *   const count = signal(0);
- *   $('#counter').text(count.value);
- * </script>
- * ```
- *
- * @example CDN Usage (UMD/Global)
- * ```html
- * <script src="https://unpkg.com/bquery@1/dist/full.umd.js"></script>
- * <script>
- *   const { $, signal } = bQuery;
- *   const count = signal(0);
- * </script>
- * ```
- *
- * @example CDN Usage (IIFE)
- * ```html
- * <script src="https://unpkg.com/bquery@1/dist/full.iife.js"></script>
- * <script>
- *   // bQuery is available as a global variable
- *   const { $, $$ } = bQuery;
- * </script>
- * ```
- */
-
-// ============================================================================
-// Core Module: Selectors, DOM operations, events, utilities
-// ============================================================================
-export { $, $$, BQueryCollection, BQueryElement, utils } from './core/index';
-
-// ============================================================================
-// Reactive Module: Signals, computed values, effects, batching
-// ============================================================================
-export {
-  Computed,
-  Signal,
-  batch,
-  computed,
-  effect,
-  isComputed,
-  isSignal,
-  persistedSignal,
-  readonly,
-  signal,
-  untrack,
-  watch,
-} from './reactive/index';
-export type { CleanupFn, Observer, ReadonlySignal } from './reactive/index';
-
-// ============================================================================
-// Component Module: Web Components helper with Shadow DOM
-// ============================================================================
-export { component, html, safeHtml } from './component/index';
-export type { ComponentDefinition, PropDefinition } from './component/index';
-
-// ============================================================================
-// Motion Module: View transitions, FLIP animations, springs
-// ============================================================================
-export {
-  animate,
-  capturePosition,
-  easeInCubic,
-  easeInOutCubic,
-  easeInOutQuad,
-  easeInQuad,
-  easeOutBack,
-  easeOutCubic,
-  easeOutExpo,
-  easeOutQuad,
-  easingPresets,
-  flip,
-  flipElements,
-  flipList,
-  keyframePresets,
-  linear,
-  prefersReducedMotion,
-  scrollAnimate,
-  sequence,
-  spring,
-  springPresets,
-  stagger,
-  timeline,
-  transition,
-} from './motion/index';
-export type {
-  AnimateOptions,
-  EasingFunction,
-  ElementBounds,
-  FlipGroupOptions,
-  FlipOptions,
-  ScrollAnimateCleanup,
-  ScrollAnimateOptions,
-  SequenceOptions,
-  SequenceStep,
-  Spring,
-  SpringConfig,
-  StaggerFunction,
-  StaggerOptions,
-  TimelineConfig,
-  TimelineControls,
-  TimelineStep,
-  TransitionOptions,
-} from './motion/index';
-
-// ============================================================================
-// Security Module: Sanitization, CSP compatibility, Trusted Types
-// ============================================================================
-export {
-  createTrustedHtml,
-  escapeHtml,
-  generateNonce,
-  getTrustedTypesPolicy,
-  hasCSPDirective,
-  isTrustedTypesSupported,
-  sanitize,
-  sanitizeHtml,
-  stripTags,
-} from './security/index';
-export type { SanitizeOptions } from './security/index';
-
-// ============================================================================
-// Platform Module: Storage, buckets, notifications, cache
-// ============================================================================
-export { buckets, cache, notifications, storage } from './platform/index';
-export type {
-  Bucket,
-  CacheHandle,
-  IndexedDBOptions,
-  NotificationOptions,
-  StorageAdapter,
-} from './platform/index';
-
-// ============================================================================
-// Router Module: SPA routing, navigation guards, lazy loading
-// ============================================================================
-export {
-  back,
-  createRouter,
-  currentRoute,
-  forward,
-  interceptLinks,
-  isActive,
-  isActiveSignal,
-  link,
-  navigate,
-  resolve,
-} from './router/index';
-export type {
-  NavigationGuard,
-  Route,
-  RouteDefinition,
-  Router,
-  RouterOptions,
-} from './router/index';
-
-// ============================================================================
-// Store Module: Signal-based state management
-// ============================================================================
-export {
-  createPersistedStore,
-  createStore,
-  destroyStore,
-  getStore,
-  listStores,
-  mapActions,
-  mapState,
-  registerPlugin,
-} from './store/index';
-export type { StateFactory, Store, StoreDefinition, StorePlugin } from './store/index';
-
-// ============================================================================
-// View Module: Declarative DOM bindings without compiler
-// ============================================================================
-export { createTemplate, mount } from './view/index';
-export type { BindingContext, MountOptions, View } from './view/index';
+/**
+ * bQuery.js — Full Bundle
+ *
+ * This is the complete bundle containing all modules for CDN usage.
+ * Use this when you want all features without tree-shaking concerns.
+ *
+ * @module bquery/full
+ *
+ * @example CDN Usage (ES Modules)
+ * ```html
+ * <script type="module">
+ *   import { $, signal, component } from 'https://unpkg.com/bquery@1/dist/full.es.mjs';
+ *
+ *   const count = signal(0);
+ *   $('#counter').text(count.value);
+ * </script>
+ * ```
+ *
+ * @example CDN Usage (UMD/Global)
+ * ```html
+ * <script src="https://unpkg.com/bquery@1/dist/full.umd.js"></script>
+ * <script>
+ *   const { $, signal } = bQuery;
+ *   const count = signal(0);
+ * </script>
+ * ```
+ *
+ * @example CDN Usage (IIFE)
+ * ```html
+ * <script src="https://unpkg.com/bquery@1/dist/full.iife.js"></script>
+ * <script>
+ *   // bQuery is available as a global variable
+ *   const { $, $$ } = bQuery;
+ * </script>
+ * ```
+ */
+
+// ============================================================================
+// Core Module: Selectors, DOM operations, events, utilities
+// ============================================================================
+export { $, $$, BQueryCollection, BQueryElement, utils } from './core/index';
+
+// ============================================================================
+// Reactive Module: Signals, computed values, effects, batching
+// ============================================================================
+export {
+  Computed,
+  Signal,
+  batch,
+  computed,
+  createUseFetch,
+  effect,
+  isComputed,
+  isSignal,
+  linkedSignal,
+  persistedSignal,
+  readonly,
+  signal,
+  useAsyncData,
+  useFetch,
+  untrack,
+  watch,
+} from './reactive/index';
+export type {
+  AsyncDataState,
+  AsyncDataStatus,
+  AsyncWatchSource,
+  CleanupFn,
+  FetchInput,
+  LinkedSignal,
+  Observer,
+  ReadonlySignal,
+  UseAsyncDataOptions,
+  UseFetchOptions,
+} from './reactive/index';
+
+// ============================================================================
+// Component Module: Web Components helper with Shadow DOM
+// ============================================================================
+export { component, html, registerDefaultComponents, safeHtml } from './component/index';
+export type {
+  ComponentDefinition,
+  DefaultComponentLibraryOptions,
+  PropDefinition,
+  RegisteredDefaultComponents,
+} from './component/index';
+
+// ============================================================================
+// Motion Module: View transitions, FLIP animations, springs
+// ============================================================================
+export {
+  animate,
+  capturePosition,
+  easeInCubic,
+  easeInOutCubic,
+  easeInOutQuad,
+  easeInQuad,
+  easeOutBack,
+  easeOutCubic,
+  easeOutExpo,
+  easeOutQuad,
+  easingPresets,
+  flip,
+  flipElements,
+  flipList,
+  keyframePresets,
+  linear,
+  prefersReducedMotion,
+  scrollAnimate,
+  sequence,
+  spring,
+  springPresets,
+  stagger,
+  timeline,
+  transition,
+} from './motion/index';
+export type {
+  AnimateOptions,
+  EasingFunction,
+  ElementBounds,
+  FlipGroupOptions,
+  FlipOptions,
+  ScrollAnimateCleanup,
+  ScrollAnimateOptions,
+  SequenceOptions,
+  SequenceStep,
+  Spring,
+  SpringConfig,
+  StaggerFunction,
+  StaggerOptions,
+  TimelineConfig,
+  TimelineControls,
+  TimelineStep,
+  TransitionOptions,
+} from './motion/index';
+
+// ============================================================================
+// Security Module: Sanitization, CSP compatibility, Trusted Types
+// ============================================================================
+export {
+  createTrustedHtml,
+  escapeHtml,
+  generateNonce,
+  getTrustedTypesPolicy,
+  hasCSPDirective,
+  isTrustedTypesSupported,
+  sanitize,
+  sanitizeHtml,
+  stripTags,
+} from './security/index';
+export type { SanitizeOptions } from './security/index';
+
+// ============================================================================
+// Platform Module: Storage, buckets, notifications, cache
+// ============================================================================
+export {
+  buckets,
+  cache,
+  defineBqueryConfig,
+  definePageMeta,
+  getBqueryConfig,
+  notifications,
+  storage,
+  useAnnouncer,
+  useCookie,
+} from './platform/index';
+export type {
+  AnnounceOptions,
+  AnnouncerHandle,
+  Bucket,
+  BqueryConfig,
+  CacheHandle,
+  IndexedDBOptions,
+  NotificationOptions,
+  PageMetaDefinition,
+  StorageAdapter,
+  UseAnnouncerOptions,
+  UseCookieOptions,
+} from './platform/index';
+
+// ============================================================================
+// Router Module: SPA routing, navigation guards, lazy loading
+// ============================================================================
+export {
+  back,
+  createRouter,
+  currentRoute,
+  forward,
+  interceptLinks,
+  isActive,
+  isActiveSignal,
+  link,
+  navigate,
+  resolve,
+} from './router/index';
+export type {
+  NavigationGuard,
+  Route,
+  RouteDefinition,
+  Router,
+  RouterOptions,
+} from './router/index';
+
+// ============================================================================
+// Store Module: Signal-based state management
+// ============================================================================
+export {
+  createPersistedStore,
+  createStore,
+  destroyStore,
+  getStore,
+  listStores,
+  mapActions,
+  mapState,
+  registerPlugin,
+} from './store/index';
+export type { StateFactory, Store, StoreDefinition, StorePlugin } from './store/index';
+
+// ============================================================================
+// View Module: Declarative DOM bindings without compiler
+// ============================================================================
+export { createTemplate, mount } from './view/index';
+export type { BindingContext, MountOptions, View } from './view/index';

package/src/motion/transition.ts

@@ -1,51 +1,97 @@
-/**
- * View transition helpers.
- *
- * @module bquery/motion
- */
-
-import type { TransitionOptions } from './types';
-
-/** Extended document type with View Transitions API */
-type DocumentWithTransition = Document & {
-  startViewTransition?: (callback: () => void) => {
-    finished: Promise<void>;
-    ready: Promise<void>;
-    updateCallbackDone: Promise<void>;
-  };
-};
-
-/**
- * Execute a DOM update with view transition animation.
- * Falls back to immediate update when View Transitions API is unavailable.
- *
- * @param updateOrOptions - Update function or options object
- * @returns Promise that resolves when transition completes
- *
- * @example
- * ```ts
- * await transition(() => {
- *   $('#content').text('Updated');
- * });
- * ```
- */
-export const transition = async (
-  updateOrOptions: (() => void) | TransitionOptions
-): Promise<void> => {
-  const update = typeof updateOrOptions === 'function' ? updateOrOptions : updateOrOptions.update;
-
-  // SSR/non-DOM environment fallback
-  if (typeof document === 'undefined') {
-    update();
-    return;
-  }
-
-  const doc = document as DocumentWithTransition;
-
-  if (doc.startViewTransition) {
-    await doc.startViewTransition(() => update()).finished;
-    return;
-  }
-
-  update();
-};
+/**
+ * View transition helpers.
+ *
+ * @module bquery/motion
+ */
+
+import type { TransitionOptions } from './types';
+import { prefersReducedMotion } from './reduced-motion';
+import { getBqueryConfig } from '../platform/config';
+
+/** Extended document type with View Transitions API */
+type DocumentWithTransition = Document & {
+  startViewTransition?: (callback: () => void | Promise<void>) => {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+    skipTransition?: () => void;
+    types?: {
+      add: (type: string) => void;
+    };
+  };
+};
+
+const sanitizeTokens = (tokens?: string[]): string[] =>
+  (tokens ?? []).map((token) => token.trim()).filter((token) => token.length > 0);
+
+/**
+ * Execute a DOM update with view transition animation.
+ * Falls back to immediate update when View Transitions API is unavailable.
+ *
+ * @param updateOrOptions - Update function or options object
+ * @returns Promise that resolves when transition completes
+ *
+ * @example
+ * ```ts
+ * await transition(() => {
+ *   $('#content').text('Updated');
+ * });
+ * ```
+ */
+export const transition = async (
+  updateOrOptions: (() => void | Promise<void>) | TransitionOptions
+): Promise<void> => {
+  const config = getBqueryConfig().transitions;
+  const options: TransitionOptions =
+    typeof updateOrOptions === 'function'
+      ? {
+          update: updateOrOptions,
+          classes: config?.classes,
+          types: config?.types,
+          skipOnReducedMotion: config?.skipOnReducedMotion,
+        }
+      : {
+          ...updateOrOptions,
+          classes: updateOrOptions.classes ?? config?.classes,
+          types: updateOrOptions.types ?? config?.types,
+          skipOnReducedMotion: updateOrOptions.skipOnReducedMotion ?? config?.skipOnReducedMotion,
+        };
+  const update = options.update;
+
+  // SSR/non-DOM environment fallback
+  if (typeof document === 'undefined') {
+    await update();
+    return;
+  }
+
+  const doc = document as DocumentWithTransition;
+  const root = document.documentElement;
+  const classes = sanitizeTokens(options.classes);
+  const types = sanitizeTokens(options.types);
+
+  if (!doc.startViewTransition || (options.skipOnReducedMotion && prefersReducedMotion())) {
+    await update();
+    options.onFinish?.();
+    return;
+  }
+
+  classes.forEach((className: string) => root.classList.add(className));
+
+  try {
+    const viewTransition = doc.startViewTransition(() => update());
+    const transitionTypes = viewTransition.types;
+
+    if (transitionTypes) {
+      for (const type of types) {
+        transitionTypes.add(type);
+      }
+    }
+
+    await viewTransition.ready;
+    options.onReady?.();
+    await viewTransition.finished;
+    options.onFinish?.();
+  } finally {
+    classes.forEach((className: string) => root.classList.remove(className));
+  }
+};