Releases

This release marks a major milestone in the development of the @sse-ui ecosystem. We have completely overhauled how hook metadata and types are generated, providing a much richer experience for developers and a more maintainable codebase for contributors.

💎 Key Highlights

• Intelligent Type Generation: The generate-nuxt-types.js engine has been rebuilt to track type usage. It now intelligently inlines simple type aliases (like AudioMimeType) into schemas while preserving complex standalone interfaces (like AudioAnalysisData) for better visibility.
• Cleaner Metadata: We’ve implemented redundancy filtering. Top-level Options and Return interfaces are now automatically omitted from the types array to avoid clutter, as they are already fully described in the props and returns schemas.
• Refactored Documentation Engine: generate-doc.js has been updated to handle the new metadata format, including improved descriptions, links, and schema visualization. We have also deprecated the old generate-md.js script in favor of this unified approach.
• Framework Integration: Added @ssets/scule and @vueuse/nuxt to our dependency stack to enhance camelCase conversion and framework-specific utility support.

🛠️ Internal Refactors

• Standalone Types Support: Added a dedicated types array to hook definitions to accommodate standalone interfaces, enums, and complex aliases.
• TypeDoc Integration: Enhanced the extraction of metadata from TypeDoc JSON to ensure better handling of optional flags and default values.
• Hook Cleanup: Removed unused interfaces and legacy types from useFetch, useIndexedDB, useMediaSession, and useUserMedia to streamline the library footprint.

📦 Versioning & Dependencies

• Bumped sse-hooks-directory to 1.4.0.
• Added support for TypeMeta in schema definitions for more robust type management.

Full Changelog: https://github.com/sseuniverse/sse-hooks/compare/v1.3.1...v1.4.0

This release marks a significant milestone with the introduction of a vast array of new hooks, a dedicated CLI for managing them, and a complete overhaul of the documentation website using Nuxt.

Breaking Change: Package support for sse-hooks has been removed. Use cli for installing hooks

New Features

New Hooks

We have significantly expanded the library with hooks covering media, UI, system utilities, and storage:

• Media & Network:
  • useConferenceSystem: Manages video/audio quality based on network conditions.
  • useMediaQuality: Manages media stream quality settings.
  • useNetworkInformation: Tracks network status and connection details.
  • useScreenShare: Captures and manages screen sharing functionality.
  • useUserMedia: Accesses user media streams (camera/microphone).
  • useScreen: General screen management utilities.
• UI & DOM:
  • usePortal: Renders components outside the main DOM hierarchy.
  • useClickAway: Detects clicks outside of a specific target.
  • useWindowSize: Tracks window dimensions.
  • useScrollLock: Prevents scrolling on the body.
  • useTernaryDarkMode: Handles ternary dark mode options (system/dark/light).
  • useBreakpoint: Utilities for responsive design breakpoints.
• State & Lifecycle:
  • useToggle: Manages boolean toggle state.
  • useStep: Manages step-based navigation.
  • useUnmount: Executes cleanup logic on component unmount.
  • useTimeout: Manages timeouts safely in components.
  • useCountdown & useCounter: Timer and counter logic.
• System & Utilities:
  • useKbd: Keyboard key mapping and Mac/Non-Mac environment detection.
  • useRoleGuard: Implements Role-Based Access Control (RBAC) with redirection and user management.
  • useSymbol: Manages unique ES6 symbols and utilities.
  • useSSR: Environment detection for Server-Side Rendering.
  • useScript: Dynamic script loading.
  • useCookie & useSessionStorage: Storage management.
  • useCopyToClipboard: Clipboard operations.
  • useForkRef: Utility to merge refs.
  • withDefaults: Utility helper for merging props with default values.

CLI Integration

A new CLI tool has been implemented to streamline the usage of hooks:

• New Commands: Added init, add, and list commands.
• Dependency Management: The add command now processes hook dependencies and includes installNpmDependencies utility.
• User Experience: Enhanced user prompts and added ora for loading states.
• Optimization: downloadHook now fetches metadata without writing unnecessary files to the filesystem.

Documentation & Website

• New Architecture: Initial setup of the www application using Nuxt and TypeScript.
• Categorization: Hooks are now better organized into categories (Utilities, Storage, Uncategorized) in the sidebar.
• Registry: Added JSON schema for registry item definitions.
• New Tools: Implemented get-page and list-pages tools for retrieving docs content.
• Visuals: Added project icon, favicon, and a new Releases page.

Improvements & Refactoring

• Metadata: Refactored metadata files for useSymbol, useTernaryDarkMode, useUserMedia, and others to improve readability and import structures.
• Performance: useConferenceSystem and useMediaQuality now include better logic for adaptive quality.
• Dependencies:
  • Added react-dom as a dependency in the root.
  • Added git-cliff for changelog generation.
  • Configured renovate.json for dependency management.
• Fixes:
  • Removed unnecessary path requirement from file properties in JSON schema.
  • Updated downloadHook to fetch metadata cleanly.

Full Changelog: https://github.com/sseuniverse/sse-hooks/compare/v1.3.0...v1.3.1

This release marks a significant milestone with the introduction of a vast array of new hooks, a dedicated CLI for managing them, and a complete overhaul of the documentation website using Nuxt.

New Features

New Hooks

We have significantly expanded the library with hooks covering media, UI, system utilities, and storage:

• Media & Network:
  • useConferenceSystem: Manages video/audio quality based on network conditions.
  • useMediaQuality: Manages media stream quality settings.
  • useNetworkInformation: Tracks network status and connection details.
  • useScreenShare: Captures and manages screen sharing functionality.
  • useUserMedia: Accesses user media streams (camera/microphone).
  • useScreen: General screen management utilities.
• UI & DOM:
  • usePortal: Renders components outside the main DOM hierarchy.
  • useClickAway: Detects clicks outside of a specific target.
  • useWindowSize: Tracks window dimensions.
  • useScrollLock: Prevents scrolling on the body.
  • useTernaryDarkMode: Handles ternary dark mode options (system/dark/light).
  • useBreakpoint: Utilities for responsive design breakpoints.
• State & Lifecycle:
  • useToggle: Manages boolean toggle state.
  • useStep: Manages step-based navigation.
  • useUnmount: Executes cleanup logic on component unmount.
  • useTimeout: Manages timeouts safely in components.
  • useCountdown & useCounter: Timer and counter logic.
• System & Utilities:
  • useKbd: Keyboard key mapping and Mac/Non-Mac environment detection.
  • useRoleGuard: Implements Role-Based Access Control (RBAC) with redirection and user management.
  • useSymbol: Manages unique ES6 symbols and utilities.
  • useSSR: Environment detection for Server-Side Rendering.
  • useScript: Dynamic script loading.
  • useCookie & useSessionStorage: Storage management.
  • useCopyToClipboard: Clipboard operations.
  • useForkRef: Utility to merge refs.
  • withDefaults: Utility helper for merging props with default values.

CLI Integration

A new CLI tool has been implemented to streamline the usage of hooks:

• New Commands: Added init, add, and list commands.
• Dependency Management: The add command now processes hook dependencies and includes installNpmDependencies utility.
• User Experience: Enhanced user prompts and added ora for loading states.
• Optimization: downloadHook now fetches metadata without writing unnecessary files to the filesystem.

Documentation & Website

• New Architecture: Initial setup of the www application using Nuxt and TypeScript.
• Categorization: Hooks are now better organized into categories (Utilities, Storage, Uncategorized) in the sidebar.
• Registry: Added JSON schema for registry item definitions.
• New Tools: Implemented get-page and list-pages tools for retrieving docs content.
• Visuals: Added project icon, favicon, and a new Releases page.

Improvements & Refactoring

• Metadata: Refactored metadata files for useSymbol, useTernaryDarkMode, useUserMedia, and others to improve readability and import structures.
• Performance: useConferenceSystem and useMediaQuality now include better logic for adaptive quality.
• Dependencies:
  • Added react-dom as a dependency in the root.
  • Added git-cliff for changelog generation.
  • Configured renovate.json for dependency management.
• Fixes:
  • Removed unnecessary path requirement from file properties in JSON schema.
  • Updated downloadHook to fetch metadata cleanly.

Full Changelog: https://github.com/sseuniverse/sse-hooks/compare/v1.2.0...v1.3.0

Features

• Reactivity System
  • Introduced a new computed system with dependency tracking and effect management.
  • Added useReactive hook for reactive state management.
  • Added useComputed hook for derived state calculations.
• Media & Audio
  • Added useAudioRecorder hook for audio recording with real-time analysis.
  • Added useMediaSession hook to manage media session metadata and playback state.
  • Added utility functions and types for handling media constraints and audio analysis.
• Sensors & DOM
  • Added useBattery hook for monitoring battery status.
  • Added useClickAway hook for detecting clicks outside specific elements.

Features

• UI & DOM
  • Added useWindowSize hook to track window dimensions with optional debouncing.
  • Added useTernaryDarkMode hook for handling dark mode preferences with local storage support.
• State & Lifecycle
  • Added useStep hook for managing multi-step processes.
  • Added useToggle hook for managing boolean toggle states.
  • Added useTimeout hook for managing timeouts within components.
  • Added useUnmount hook to execute cleanup functions on component unmount.

Documentation & Tooling

• Automation
  • Added scripts for generating documentation from JSDoc comments and TypeDoc output.
  • Created utility functions for transforming imports, removing comments, and handling markdown data.
  • Configured TypeDoc for generating structured documentation.
  • Updated README with generated hooks documentation.

Features

• UI & Responsive Design
  • Added useMediaQuery for responsive design based on media queries.
  • Added useResizeObserver to observe size changes of a DOM element.
  • Added useScreen and useWindowSize for accessing screen properties and dimensions.
  • Added useScrollLock to manage scroll locking on elements.
  • Added useTernaryDarkMode for handling dark mode preferences.
• Storage
  • Added useLocalStorage and useSessionStorage for managing state persistence.
  • Added useReadLocalStorage for reading values from local storage.
• Lifecycle & Environment
  • Added useIsClient to determine if the component is rendered on the client side.
  • Added useIsomorphicLayoutEffect for consistent behavior across server and client.
  • Added useIsMounted to track component mount status.
  • Added useUnmount for executing cleanup on component unmount.
• State & Timers
  • Added useInterval and useTimeout for managing timing events.
  • Added useToggle for managing boolean state toggling.
  • Added useMap for managing state as a Map.
  • Added useStep for managing step-based navigation.
• Utilities
  • Added useScript for dynamically loading external scripts.

Configuration

• Tooling
  • Added TypeScript configuration for the hooks package.