tessl/npm-vueuse--shared

Collection of essential shared Vue Composition Utilities providing foundational building blocks for reactive Vue applications

—

Pending

Overview

Eval results

Files

State Management

Name: tessl/npm-vueuse--shared
Author: tessl

State management utilities for sharing reactive state across components and composables in Vue applications.

Capabilities

createGlobalState

Creates a global state that can be shared across multiple components without using provide/inject.

/**
 * Creates a global state that can be shared across components
 * @param stateFactory - Factory function that creates the initial state
 * @returns Function that returns the shared state instance
 */
function createGlobalState<T>(stateFactory: () => T): () => T;

Usage Example:

import { createGlobalState, ref } from "@vueuse/shared";

// Create global counter state
const useGlobalCounter = createGlobalState(() => ref(0));

// Use in any component
export default {
  setup() {
    const counter = useGlobalCounter();
    
    const increment = () => counter.value++;
    
    return { counter, increment };
  }
};

createInjectionState

Creates an injection state pair for provide/inject pattern with type safety.

/**
 * Creates injectable state for provide/inject pattern
 * @param composable - Composable function to make injectable
 * @returns Tuple of [providing function, injecting function]
 */
function createInjectionState<Args extends Array<any>, Return>(
  composable: (...args: Args) => Return
): [
  useProvidingState: (...args: Args) => Return,
  useInjectedState: () => Return | undefined
];

Usage Example:

import { createInjectionState, ref } from "@vueuse/shared";

// Create injection state
const [useProvidingCounter, useInjectedCounter] = createInjectionState(
  (initialValue: number) => {
    const count = ref(initialValue);
    const increment = () => count.value++;
    return { count, increment };
  }
);

// In parent component
export const ParentComponent = {
  setup() {
    const { count, increment } = useProvidingCounter(0);
    return { count, increment };
  }
};

// In child component
export const ChildComponent = {
  setup() {
    const counterState = useInjectedCounter();
    // counterState will be undefined if not provided
    return { counterState };
  }
};

createSharedComposable

Creates a shared version of a composable that returns the same instance across all calls.

/**
 * Creates a shared version of a composable
 * @param composable - Composable function to make shared
 * @returns Shared version that returns same instance
 */
function createSharedComposable<Fn extends(...args: any[]) => any>(
  composable: Fn
): Fn;

Usage Example:

import { createSharedComposable, ref } from "@vueuse/shared";

// Original composable
const useCounter = () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
};

// Shared version
const useSharedCounter = createSharedComposable(useCounter);

// All calls return the same instance
const counter1 = useSharedCounter(); // count: 0
const counter2 = useSharedCounter(); // Same instance as counter1

createEventHook

Utility for creating event hooks with type-safe event handling.

/**
 * Creates an event hook system
 * @returns EventHook instance with on/off/trigger methods
 */
function createEventHook<T = any>(): EventHook<T>;

interface EventHook<T> {
  /** Register event listener */
  on: EventHookOn<T>;
  /** Remove event listener */
  off: EventHookOff<T>;
  /** Trigger event with data */
  trigger: EventHookTrigger<T>;
}

interface EventHookOn<T> {
  (fn: (param: T) => void): { off: () => void };
}

interface EventHookOff<T> {
  (fn: (param: T) => void): void;
}

interface EventHookTrigger<T> {
  (param: T): void;
}

Usage Example:

import { createEventHook } from "@vueuse/shared";

const useMyComposable = () => {
  const myHook = createEventHook<string>();
  
  const triggerEvent = (message: string) => {
    myHook.trigger(message);
  };
  
  return {
    onMessage: myHook.on,
    triggerEvent
  };
};

// Usage
const { onMessage, triggerEvent } = useMyComposable();

const { off } = onMessage((message) => {
  console.log('Received:', message);
});

triggerEvent('Hello World!');
off(); // Remove listener

Install with Tessl CLI