@bquery/bquery 1.4.0 → 1.6.0

package/src/full.ts

@@ -1,187 +1,229 @@
-/**
- * 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 { bool, component, html, registerDefaultComponents, safeHtml } from './component/index';
+export type {
+  AttributeChange,
+  ComponentDefinition,
+  ComponentRenderContext,
+  ComponentStateKey,
+  ComponentSignalLike,
+  ComponentSignals,
+  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,
+  trusted,
+} from './security/index';
+export type { SanitizedHtml, SanitizeOptions, TrustedHtml } 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/animate.ts

@@ -1,113 +1,113 @@
-/**
- * Web Animations helpers.
- *
- * @module bquery/motion
- */
-
-import { prefersReducedMotion } from './reduced-motion';
-import type { AnimateOptions } from './types';
-
-/** @internal */
-const isStyleValue = (value: unknown): value is string | number =>
-  typeof value === 'string' || typeof value === 'number';
-
-/**
- * Convert camelCase property names to kebab-case for CSS.
- * @internal
- */
-const toKebabCase = (str: string): string => {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-};
-
-/** @internal */
-export const applyFinalKeyframeStyles = (
-  element: Element,
-  keyframes: Keyframe[] | PropertyIndexedKeyframes
-): void => {
-  const htmlElement = element as HTMLElement;
-  const style = htmlElement.style;
-
-  if (Array.isArray(keyframes)) {
-    const last = keyframes[keyframes.length - 1];
-    if (!last) return;
-    for (const [prop, value] of Object.entries(last)) {
-      if (prop === 'offset' || prop === 'easing' || prop === 'composite') continue;
-      if (isStyleValue(value)) {
-        // Convert camelCase to kebab-case for CSS properties
-        const cssProp = prop.startsWith('--') ? prop : toKebabCase(prop);
-        style.setProperty(cssProp, String(value));
-      }
-    }
-    return;
-  }
-
-  for (const [prop, value] of Object.entries(keyframes)) {
-    if (prop === 'offset' || prop === 'easing' || prop === 'composite') continue;
-    const finalValue = Array.isArray(value) ? value[value.length - 1] : value;
-    if (isStyleValue(finalValue)) {
-      // Convert camelCase to kebab-case for CSS properties
-      const cssProp = prop.startsWith('--') ? prop : toKebabCase(prop);
-      style.setProperty(cssProp, String(finalValue));
-    }
-  }
-};
-
-/**
- * Animate an element using the Web Animations API with reduced-motion fallback.
- *
- * @param element - Element to animate
- * @param config - Animation configuration
- * @returns Promise that resolves when animation completes
- *
- * @example
- * ```ts
- * await animate(element, {
- *   keyframes: [{ opacity: 0 }, { opacity: 1 }],
- *   options: { duration: 200, easing: 'ease-out' },
- * });
- * ```
- */
-export const animate = (element: Element, config: AnimateOptions): Promise<void> => {
-  const { keyframes, options, commitStyles = true, respectReducedMotion = true, onFinish } = config;
-
-  if (respectReducedMotion && prefersReducedMotion()) {
-    if (commitStyles) {
-      applyFinalKeyframeStyles(element, keyframes);
-    }
-    onFinish?.();
-    return Promise.resolve();
-  }
-
-  const htmlElement = element as HTMLElement;
-  if (typeof htmlElement.animate !== 'function') {
-    if (commitStyles) {
-      applyFinalKeyframeStyles(element, keyframes);
-    }
-    onFinish?.();
-    return Promise.resolve();
-  }
-
-  return new Promise((resolve) => {
-    const animation = htmlElement.animate(keyframes, options);
-    let finalized = false;
-    const finalize = () => {
-      if (finalized) return;
-      finalized = true;
-      if (commitStyles) {
-        if (typeof animation.commitStyles === 'function') {
-          animation.commitStyles();
-        } else {
-          applyFinalKeyframeStyles(element, keyframes);
-        }
-      }
-      animation.cancel();
-      onFinish?.();
-      resolve();
-    };
-
-    animation.onfinish = finalize;
-    if (animation.finished) {
-      animation.finished.then(finalize).catch(finalize);
-    }
-  });
-};
+/**
+ * Web Animations helpers.
+ *
+ * @module bquery/motion
+ */
+
+import { prefersReducedMotion } from './reduced-motion';
+import type { AnimateOptions } from './types';
+
+/** @internal */
+const isStyleValue = (value: unknown): value is string | number =>
+  typeof value === 'string' || typeof value === 'number';
+
+/**
+ * Convert camelCase property names to kebab-case for CSS.
+ * @internal
+ */
+const toKebabCase = (str: string): string => {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+};
+
+/** @internal */
+export const applyFinalKeyframeStyles = (
+  element: Element,
+  keyframes: Keyframe[] | PropertyIndexedKeyframes
+): void => {
+  const htmlElement = element as HTMLElement;
+  const style = htmlElement.style;
+
+  if (Array.isArray(keyframes)) {
+    const last = keyframes[keyframes.length - 1];
+    if (!last) return;
+    for (const [prop, value] of Object.entries(last)) {
+      if (prop === 'offset' || prop === 'easing' || prop === 'composite') continue;
+      if (isStyleValue(value)) {
+        // Convert camelCase to kebab-case for CSS properties
+        const cssProp = prop.startsWith('--') ? prop : toKebabCase(prop);
+        style.setProperty(cssProp, String(value));
+      }
+    }
+    return;
+  }
+
+  for (const [prop, value] of Object.entries(keyframes)) {
+    if (prop === 'offset' || prop === 'easing' || prop === 'composite') continue;
+    const finalValue = Array.isArray(value) ? value[value.length - 1] : value;
+    if (isStyleValue(finalValue)) {
+      // Convert camelCase to kebab-case for CSS properties
+      const cssProp = prop.startsWith('--') ? prop : toKebabCase(prop);
+      style.setProperty(cssProp, String(finalValue));
+    }
+  }
+};
+
+/**
+ * Animate an element using the Web Animations API with reduced-motion fallback.
+ *
+ * @param element - Element to animate
+ * @param config - Animation configuration
+ * @returns Promise that resolves when animation completes
+ *
+ * @example
+ * ```ts
+ * await animate(element, {
+ *   keyframes: [{ opacity: 0 }, { opacity: 1 }],
+ *   options: { duration: 200, easing: 'ease-out' },
+ * });
+ * ```
+ */
+export const animate = (element: Element, config: AnimateOptions): Promise<void> => {
+  const { keyframes, options, commitStyles = true, respectReducedMotion = true, onFinish } = config;
+
+  if (respectReducedMotion && prefersReducedMotion()) {
+    if (commitStyles) {
+      applyFinalKeyframeStyles(element, keyframes);
+    }
+    onFinish?.();
+    return Promise.resolve();
+  }
+
+  const htmlElement = element as HTMLElement;
+  if (typeof htmlElement.animate !== 'function') {
+    if (commitStyles) {
+      applyFinalKeyframeStyles(element, keyframes);
+    }
+    onFinish?.();
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    const animation = htmlElement.animate(keyframes, options);
+    let finalized = false;
+    const finalize = () => {
+      if (finalized) return;
+      finalized = true;
+      if (commitStyles) {
+        if (typeof animation.commitStyles === 'function') {
+          animation.commitStyles();
+        } else {
+          applyFinalKeyframeStyles(element, keyframes);
+        }
+      }
+      animation.cancel();
+      onFinish?.();
+      resolve();
+    };
+
+    animation.onfinish = finalize;
+    if (animation.finished) {
+      animation.finished.then(finalize).catch(finalize);
+    }
+  });
+};