vue-context-storage 0.1.13 → 0.1.15

package/README.md

@@ -1,356 +1,354 @@
-# vue-context-storage
-
-Vue 3 context storage system with URL query synchronization support.
-
-[![npm downloads](https://img.shields.io/npm/dm/vue-context-storage.svg)](https://www.npmjs.com/package/vue-context-storage)
-[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label)](https://www.typescriptlang.org/)
-[![Vue 3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/vue-context-storage)](https://bundlephobia.com/package/vue-context-storage)
-[![GitHub issues](https://img.shields.io/github/issues/lviobio/vue-context-storage)](https://github.com/lviobio/vue-context-storage/issues)
-[![GitHub License](https://img.shields.io/github/license/lviobio/vue-context-storage)](https://github.com/lviobio/vue-context-storage)
-[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://lviobio.github.io/vue-context-storage/)
-
-A powerful state management solution for Vue 3 applications that provides:
-- **Context-based storage** using Vue's provide/inject API
-- **Automatic URL query synchronization** for preserving state across page reloads
-- **Multiple storage contexts** with activation management
-- **Type-safe** TypeScript support
-- **Tree-shakeable** and lightweight
-
-## Live Demo
-
-🚀 **[Try the interactive playground](https://lviobio.github.io/vue-context-storage)**
-
-## Installation
-
-```bash
-npm install vue-context-storage
-```
-
-## Features
-
-- ✅ **Vue 3 Composition API** - Built with modern Vue patterns
-- ✅ **URL Query Sync** - Automatically sync state with URL parameters
-- ✅ **Multiple Contexts** - Support multiple independent storage contexts
-- ✅ **TypeScript** - Full type safety and IntelliSense support
-- ✅ **Flexible** - Works with vue-router 4+
-- ✅ **Transform Helpers** - Built-in utilities for type conversion
-
-## Basic Usage
-
-### Option 1: Using Vue Plugin (Recommended)
-
-Register the plugin in your main app file:
-
-```typescript
-import { createApp } from 'vue'
-import { VueContextStoragePlugin } from 'vue-context-storage/plugin'
-import App from './App.vue'
-
-const app = createApp(App)
-
-// Register components globally
-app.use(VueContextStoragePlugin)
-
-app.mount('#app')
-```
-
-Then use components without importing in your `App.vue`:
-
-```vue
-<template>
-  <ContextStorage>
-    <router-view />
-  </ContextStorage>
-</template>
-```
-
-### Option 2: Manual Component Import
-
-Import components individually when needed in your `App.vue`:
-
-```vue
-<template>
-  <ContextStorage>
-    <router-view />
-  </ContextStorage>
-</template>
-
-<script setup lang="ts">
-import { ContextStorage } from 'vue-context-storage/components'
-</script>
-```
-
-## Use Query Handler in Components
-
-Sync reactive state with URL query parameters:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useContextStorageQueryHandler } from 'vue-context-storage'
-
-interface Filters {
-  search: string
-  status: string
-  page: number
-}
-
-const filters = reactive<Filters>({
-  search: '',
-  status: 'active',
-  page: 1,
-})
-
-// Automatically syncs filters with URL query
-useContextStorageQueryHandler(filters, {
-  prefix: 'filters', // URL will be: ?filters[search]=...&filters[status]=...
-})
-</script>
-```
-
-## Advanced Usage
-
-### Using Transform Helpers
-
-Convert URL query string values to proper types:
-
-```typescript
-import { ref } from 'vue'
-import { useContextStorageQueryHandler, asNumber, asString } from 'vue-context-storage'
-
-interface TableState {
-  page: number
-  search: string
-  perPage: number
-}
-
-const state = ref<TableState>({
-  page: 1,
-  search: '',
-  perPage: 25,
-})
-
-useContextStorageQueryHandler(state, {
-  prefix: 'table',
-  transform: (deserialized, initial) => ({
-    page: asNumber(deserialized.page, { fallback: 1 }),
-    search: asString(deserialized.search, { fallback: '' }),
-    perPage: asNumber(deserialized.perPage, { fallback: 25 }),
-  }),
-})
-```
-
-### Available Transform Helpers
-
-- `asNumber(value, options)` - Convert to number
-- `asString(value, options)` - Convert to string
-- `asBoolean(value, options)` - Convert to boolean
-- `asArray(value, options)` - Convert to array
-- `asNumberArray(value, options)` - Convert to number array
-
-### Using Zod Schemas
-
-Alternatively, you can use [Zod](https://zod.dev/) schemas for automatic validation and type inference:
-
-```typescript
-import { z } from 'zod'
-import { useContextStorageQueryHandler } from 'vue-context-storage'
-
-// Define schema with automatic coercion
-const FiltersSchema = z.object({
-  search: z.string().default(''),
-  page: z.coerce.number().int().positive().default(1),
-  status: z.enum(['active', 'inactive']).default('active'),
-})
-
-const filters = ref(FiltersSchema.parse({}))
-
-// Use schema for automatic validation
-useContextStorageQueryHandler(filters, {
-  prefix: 'filters',
-  schema: FiltersSchema,
-})
-```
-
-**Benefits:**
-- Automatic type coercion (strings → numbers, etc.)
-- Runtime validation with detailed errors
-- Automatic TypeScript type inference
-- Less boilerplate code
-- Single source of truth for structure and validation
-
-See [ZOD_INTEGRATION.md](./ZOD_INTEGRATION.md) for detailed examples and comparison with manual transforms.
-
-### Preserve Empty State
-
-Keep empty state in URL to prevent resetting on reload:
-
-```typescript
-useContextStorageQueryHandler(filters, {
-  prefix: 'filters',
-  preserveEmptyState: true,
-  // Empty filters will show as: ?filters
-  // Without this option, empty filters would clear the URL completely
-})
-```
-
-### Configure Query Handler
-
-Customize global behavior:
-
-```typescript
-import { ContextStorageQueryHandler } from 'vue-context-storage'
-
-ContextStorageQueryHandler.configure({
-  mode: 'push', // 'replace' (default) or 'push' for history
-  preserveUnusedKeys: true, // Keep other query params
-  preserveEmptyState: false,
-})
-```
-
-## API Reference
-
-### Composables
-
-#### `useContextStorageQueryHandler<T>(data, options)`
-
-Registers reactive data for URL query synchronization.
-
-**Parameters:**
-- `data: MaybeRefOrGetter<T>` - Reactive reference to sync
-- `options?: RegisterQueryHandlerOptions<T>`
-  - `prefix?: string` - Query parameter prefix
-  - `transform?: (deserialized, initial) => T` - Transform function
-  - `preserveEmptyState?: boolean` - Keep empty state in URL
-  - `mergeOnlyExistingKeysWithoutTransform?: boolean` - Only merge existing keys (default: true)
-
-### Classes
-
-#### `ContextStorageQueryHandler`
-
-Main handler for URL query synchronization.
-
-**Static Methods:**
-- `configure(options): ContextStorageHandlerConstructor` - Configure global options
-- `getInitialStateResolver(): () => LocationQuery` - Get initial state resolver
-
-**Methods:**
-- `register<T>(data, options): () => void` - Register data for sync
-- `setEnabled(state, initial): void` - Enable/disable handler
-- `setInitialState(state): void` - Set initial state
-
-### Transform Helpers
-
-All transform helpers support nullable and missable options:
-
-```typescript
-asNumber(value, {
-  fallback: 0,      // Default value
-  nullable: false,  // Allow null return
-  missable: false,   // Allow undefined return
-})
-```
-
-## TypeScript Support
-
-Full TypeScript support with type inference:
-
-```typescript
-import type {
-  ContextStorageHandler,
-  ContextStorageHandlerConstructor,
-  IContextStorageQueryHandler,
-  QueryValue,
-  SerializeOptions,
-} from 'vue-context-storage'
-```
-
-When using Zod schemas, TypeScript will automatically infer types:
-
-```typescript
-const FiltersSchema = z.object({
-  search: z.string().default(''),
-  page: z.coerce.number().default(1),
-})
-
-type Filters = z.infer<typeof FiltersSchema>
-// Result: { search: string; page: number }
-```
-
-## Examples
-
-### Pagination with URL Sync
-
-```typescript
-import { ref } from 'vue'
-import { useContextStorageQueryHandler, asNumber } from 'vue-context-storage'
-
-const pagination = ref({
-  page: 1,
-  perPage: 25,
-  total: 0,
-})
-
-useContextStorageQueryHandler(pagination, {
-  prefix: 'page',
-  transform: (data, initial) => ({
-    page: asNumber(data.page, { fallback: 1 }),
-    perPage: asNumber(data.perPage, { fallback: 25 }),
-    total: initial.total, // Don't sync total from URL
-  })
-})
-```
-
-## Peer Dependencies
-
-- `vue`: ^3.5.0
-- `vue-router`: ^4.0.0
-- `zod`: ^4.0.0 (optional - only if using schema validation)
-
-## License
-
-MIT
-
-## Development
-
-### Running Playground Locally
-
-```bash
-# Development mode (hot reload)
-npm run play
-
-# Production preview
-npm run build:playground
-npm run preview:playground
-```
-
-### Building
-
-```bash
-# Build library
-npm run build
-
-# Build playground for deployment
-npm run build:playground
-```
-
-### Testing & Quality
-
-```bash
-# Run all checks
-npm run check
-
-# Type checking
-npm run ts:check
-
-# Linting
-npm run lint
-
-# Formatting
-npm run format
-```
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
+# vue-context-storage
+
+Vue 3 context storage system with URL query synchronization support.
+
+[![npm downloads](https://img.shields.io/npm/dm/vue-context-storage.svg)](https://www.npmjs.com/package/vue-context-storage)
+[![TypeScript](https://badgen.net/badge/icon/TypeScript?icon=typescript&label)](https://www.typescriptlang.org/)
+[![Vue 3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/vue-context-storage)](https://bundlephobia.com/package/vue-context-storage)
+[![GitHub issues](https://img.shields.io/github/issues/lviobio/vue-context-storage)](https://github.com/lviobio/vue-context-storage/issues)
+[![GitHub License](https://img.shields.io/github/license/lviobio/vue-context-storage)](https://github.com/lviobio/vue-context-storage)
+[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://lviobio.github.io/vue-context-storage/)
+
+A powerful state management solution for Vue 3 applications that provides:
+- **Context-based storage** using Vue's provide/inject API
+- **Automatic URL query synchronization** for preserving state across page reloads
+- **Multiple storage contexts** with activation management
+- **Type-safe** TypeScript support
+- **Tree-shakeable** and lightweight
+
+## Live Demo
+
+🚀 **[Try the interactive playground](https://lviobio.github.io/vue-context-storage)**
+
+## Installation
+
+```bash
+npm install vue-context-storage
+```
+
+## Features
+
+- ✅ **Vue 3 Composition API** - Built with modern Vue patterns
+- ✅ **URL Query Sync** - Automatically sync state with URL parameters
+- ✅ **Multiple Contexts** - Support multiple independent storage contexts
+- ✅ **TypeScript** - Full type safety and IntelliSense support
+- ✅ **Flexible** - Works with vue-router 4+
+- ✅ **Transform Helpers** - Built-in utilities for type conversion
+
+## Basic Usage
+
+### Option 1: Using Vue Plugin (Recommended)
+
+Register the plugin in your main app file:
+
+```typescript
+import { createApp } from 'vue'
+import { VueContextStoragePlugin } from 'vue-context-storage/plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+
+// Register components globally
+app.use(VueContextStoragePlugin)
+
+app.mount('#app')
+```
+
+Then use components without importing in your `App.vue`:
+
+```vue
+<template>
+  <ContextStorage>
+    <router-view />
+  </ContextStorage>
+</template>
+```
+
+### Option 2: Manual Component Import
+
+Import components individually when needed in your `App.vue`:
+
+```vue
+<template>
+  <ContextStorage>
+    <router-view />
+  </ContextStorage>
+</template>
+
+<script setup lang="ts">
+import { ContextStorage } from 'vue-context-storage/components'
+</script>
+```
+
+## Use Query Handler in Components
+
+Sync reactive state with URL query parameters:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useContextStorageQueryHandler } from 'vue-context-storage'
+
+interface Filters {
+  search: string
+  status: string
+  page: number
+}
+
+const filters = reactive<Filters>({
+  search: '',
+  status: 'active',
+  page: 1,
+})
+
+// Automatically syncs filters with URL query
+useContextStorageQueryHandler(filters, {
+  prefix: 'filters', // URL will be: ?filters[search]=...&filters[status]=...
+})
+</script>
+```
+
+## Advanced Usage
+
+### Using Transform Helpers
+
+Convert URL query string values to proper types:
+
+```typescript
+import { ref } from 'vue'
+import { useContextStorageQueryHandler, asNumber, asString } from 'vue-context-storage'
+
+interface TableState {
+  page: number
+  search: string
+  perPage: number
+}
+
+const state = ref<TableState>({
+  page: 1,
+  search: '',
+  perPage: 25,
+})
+
+useContextStorageQueryHandler(state, {
+  prefix: 'table',
+  transform: (deserialized, initial) => ({
+    page: asNumber(deserialized.page, { fallback: 1 }),
+    search: asString(deserialized.search, { fallback: '' }),
+    perPage: asNumber(deserialized.perPage, { fallback: 25 }),
+  }),
+})
+```
+
+### Available Transform Helpers
+
+- `asNumber(value, options)` - Convert to number
+- `asString(value, options)` - Convert to string
+- `asBoolean(value, options)` - Convert to boolean
+- `asArray(value, options)` - Convert to array
+- `asNumberArray(value, options)` - Convert to number array
+
+### Using Zod Schemas
+
+Alternatively, you can use [Zod](https://zod.dev/) schemas for automatic validation and type inference:
+
+```typescript
+import { z } from 'zod'
+import { useContextStorageQueryHandler } from 'vue-context-storage'
+
+// Define schema with automatic coercion
+const FiltersSchema = z.object({
+  search: z.string().default(''),
+  page: z.coerce.number().int().positive().default(1),
+  status: z.enum(['active', 'inactive']).default('active'),
+})
+
+const filters = ref(FiltersSchema.parse({}))
+
+// Use schema for automatic validation
+useContextStorageQueryHandler(filters, {
+  prefix: 'filters',
+  schema: FiltersSchema,
+})
+```
+
+**Benefits:**
+- Automatic type coercion (strings → numbers, etc.)
+- Runtime validation with detailed errors
+- Automatic TypeScript type inference
+- Less boilerplate code
+- Single source of truth for structure and validation
+
+### Preserve Empty State
+
+Keep empty state in URL to prevent resetting on reload:
+
+```typescript
+useContextStorageQueryHandler(filters, {
+  prefix: 'filters',
+  preserveEmptyState: true,
+  // Empty filters will show as: ?filters
+  // Without this option, empty filters would clear the URL completely
+})
+```
+
+### Configure Query Handler
+
+Customize global behavior:
+
+```typescript
+import { ContextStorageQueryHandler } from 'vue-context-storage'
+
+ContextStorageQueryHandler.configure({
+  mode: 'push', // 'replace' (default) or 'push' for history
+  preserveUnusedKeys: true, // Keep other query params
+  preserveEmptyState: false,
+})
+```
+
+## API Reference
+
+### Composables
+
+#### `useContextStorageQueryHandler<T>(data, options)`
+
+Registers reactive data for URL query synchronization.
+
+**Parameters:**
+- `data: MaybeRefOrGetter<T>` - Reactive reference to sync
+- `options?: RegisterQueryHandlerOptions<T>`
+  - `prefix?: string` - Query parameter prefix
+  - `transform?: (deserialized, initial) => T` - Transform function
+  - `preserveEmptyState?: boolean` - Keep empty state in URL
+  - `mergeOnlyExistingKeysWithoutTransform?: boolean` - Only merge existing keys (default: true)
+
+### Classes
+
+#### `ContextStorageQueryHandler`
+
+Main handler for URL query synchronization.
+
+**Static Methods:**
+- `configure(options): ContextStorageHandlerConstructor` - Configure global options
+- `getInitialStateResolver(): () => LocationQuery` - Get initial state resolver
+
+**Methods:**
+- `register<T>(data, options): () => void` - Register data for sync
+- `setEnabled(state, initial): void` - Enable/disable handler
+- `setInitialState(state): void` - Set initial state
+
+### Transform Helpers
+
+All transform helpers support nullable and missable options:
+
+```typescript
+asNumber(value, {
+  fallback: 0,      // Default value
+  nullable: false,  // Allow null return
+  missable: false,   // Allow undefined return
+})
+```
+
+## TypeScript Support
+
+Full TypeScript support with type inference:
+
+```typescript
+import type {
+  ContextStorageHandler,
+  ContextStorageHandlerConstructor,
+  IContextStorageQueryHandler,
+  QueryValue,
+  SerializeOptions,
+} from 'vue-context-storage'
+```
+
+When using Zod schemas, TypeScript will automatically infer types:
+
+```typescript
+const FiltersSchema = z.object({
+  search: z.string().default(''),
+  page: z.coerce.number().default(1),
+})
+
+type Filters = z.infer<typeof FiltersSchema>
+// Result: { search: string; page: number }
+```
+
+## Examples
+
+### Pagination with URL Sync
+
+```typescript
+import { ref } from 'vue'
+import { useContextStorageQueryHandler, asNumber } from 'vue-context-storage'
+
+const pagination = ref({
+  page: 1,
+  perPage: 25,
+  total: 0,
+})
+
+useContextStorageQueryHandler(pagination, {
+  prefix: 'page',
+  transform: (data, initial) => ({
+    page: asNumber(data.page, { fallback: 1 }),
+    perPage: asNumber(data.perPage, { fallback: 25 }),
+    total: initial.total, // Don't sync total from URL
+  })
+})
+```
+
+## Peer Dependencies
+
+- `vue`: ^3.5.0
+- `vue-router`: ^4.0.0
+- `zod`: ^4.0.0 (optional - only if using schema validation)
+
+## License
+
+MIT
+
+## Development
+
+### Running Playground Locally
+
+```bash
+# Development mode (hot reload)
+npm run play
+
+# Production preview
+npm run build:playground
+npm run preview:playground
+```
+
+### Building
+
+```bash
+# Build library
+npm run build
+
+# Build playground for deployment
+npm run build:playground
+```
+
+### Testing & Quality
+
+```bash
+# Run all checks
+npm run check
+
+# Type checking
+npm run ts:check
+
+# Linting
+npm run lint
+
+# Formatting
+npm run format
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/index.d.ts

@@ -62,9 +62,9 @@ declare const __VLS_export$1: vue9.DefineComponent<vue9.ExtractPropTypes<{
 interface Props {
   handlers?: ContextStorageHandlerConstructor[];
 }
-declare var __VLS_20: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-  default?: (props: typeof __VLS_20) => any;
+  default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: vue9.DefineComponent<Props, {}, {}, {}, {}, vue9.ComponentOptionsMixin, vue9.ComponentOptionsMixin, {}, string, vue9.PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, vue9.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -78,6 +78,32 @@ type __VLS_WithSlots<T, S> = T & {
 //#region src/plugin.d.ts
 declare const VueContextStoragePlugin: Plugin;
 //#endregion
+//#region src/collection.d.ts
+type CollectionManagerItem = {
+  key: string;
+  handlers: ContextStorageHandler[];
+};
+interface ItemOptions {
+  key: string;
+}
+declare class CollectionManager {
+  private handlerConstructors;
+  active?: CollectionManagerItem;
+  private collection;
+  private onActiveChangeCallbacks;
+  private readonly isReadyPromise;
+  private resolveMarkAsReady;
+  constructor(handlerConstructors: ContextStorageHandlerConstructor[]);
+  isReady(): Promise<void>;
+  markAsReady(): void;
+  onActiveChange(callback: (item: CollectionManagerItem) => void): void;
+  first(): CollectionManagerItem | undefined;
+  findItemByKey(key: string): CollectionManagerItem | undefined;
+  add(options: ItemOptions): CollectionManagerItem;
+  remove(removeItem: CollectionManagerItem): void;
+  setActive(activeItem: CollectionManagerItem): void;
+}
+//#endregion
 //#region src/symbols.d.ts
 declare const collection: unique symbol;
 declare const collectionItem: unique symbol;
@@ -247,52 +273,6 @@ declare class ContextStorageQueryHandler implements IContextStorageQueryHandler
   register<T extends Record<string, unknown>>(data: MaybeRefOrGetter<T>, options: RegisterQueryHandlerOptions<T>): () => void;
 }
 //#endregion
-//#region src/handlers/query/helpers.d.ts
-interface SerializeOptions {
-  /**
-   * Custom prefix for serialized keys.
-   * @example
-   * - prefix: 'filters' => 'filters[key]'
-   * - prefix: 'search' => 'search[key]'
-   * - prefix: '' => 'key' (no prefix)
-   */
-  prefix?: string;
-}
-/**
- * Serializes filter parameters into a URL-friendly format.
- *
- * @param params - Raw parameters object to serialize
- * @param options - Serialization options
- * @returns Serialized parameters with prefixed keys
- *
- * @example
- * // With default prefix 'filters'
- * serializeFiltersParams({ status: 'active', tags: ['a', 'b'] })
- * // => { 'filters[status]': 'active', 'filters[tags]': 'a,b' }
- *
- * @example
- * // With custom prefix
- * serializeFiltersParams({ name: 'John', all: true }, { prefix: 'search' })
- * // => { 'search[name]': 'John', 'search[all]': '1' }
- *
- * @example
- * // Without prefix
- * serializeFiltersParams({ page: 1, all: false }, { prefix: '' })
- * // => { 'page': '1', 'all': '0' }
- */
-declare function serializeParams(params: Record<string, unknown>, options?: SerializeOptions): LocationQuery;
-/**
- * Deserializes query parameters from a URL-friendly format back to an object.
- *
- * @param params - Serialized parameters object
- * @returns Deserialized parameters object
- *
- * @example
- * deserializeParams({ 'filters[status]': 'active', search: 'test' })
- * // => { filters: {status: 'active'}, search: 'test' }
- */
-declare function deserializeParams(params: Record<string, any>): Record<string, any>;
-//#endregion
 //#region src/handlers/query/transform-helpers.d.ts
 declare function asNumber(value: QueryValue | number | undefined): number;
 declare function asNumber(value: QueryValue | number | undefined, options: {
@@ -417,35 +397,13 @@ declare const transform: {
   asBoolean: typeof asBoolean;
 };
 //#endregion
-//#region src/collection.d.ts
-type ContextStorageCollectionItem = {
-  key: string;
-  handlers: ContextStorageHandler[];
-};
-interface ItemOptions {
-  key: string;
-}
-declare class ContextStorageCollection {
-  private handlerConstructors;
-  active?: ContextStorageCollectionItem;
-  private collection;
-  private onActiveChangeCallbacks;
-  constructor(handlerConstructors: ContextStorageHandlerConstructor[]);
-  onActiveChange(callback: (item: ContextStorageCollectionItem) => void): void;
-  first(): ContextStorageCollectionItem | undefined;
-  findItemByKey(key: string): ContextStorageCollectionItem | undefined;
-  add(options: ItemOptions): ContextStorageCollectionItem;
-  remove(removeItem: ContextStorageCollectionItem): void;
-  setActive(activeItem: ContextStorageCollectionItem): void;
-}
-//#endregion
 //#region src/injectionSymbols.d.ts
-declare const contextStorageCollectionInjectKey: InjectionKey<ContextStorageCollection>;
-declare const contextStorageCollectionItemInjectKey: InjectionKey<ContextStorageCollectionItem>;
-declare const contextStorageHandlersInjectKey: InjectionKey<ContextStorageCollectionItem['handlers']>;
+declare const contextStorageCollectionInjectKey: InjectionKey<CollectionManager>;
+declare const contextStorageCollectionItemInjectKey: InjectionKey<CollectionManagerItem>;
+declare const contextStorageHandlersInjectKey: InjectionKey<CollectionManagerItem['handlers']>;
 declare const contextStorageQueryHandlerInjectKey: InjectionKey<InstanceType<typeof ContextStorageQueryHandler>>;
 //#endregion
 //#region src/constants.d.ts
 declare const defaultHandlers: ContextStorageHandlerConstructor[];
 //#endregion
-export { _default as ContextStorage, _default$1 as ContextStorageActivator, _default$2 as ContextStorageCollection, type ContextStorageHandler, type ContextStorageHandlerConstructor, _default$3 as ContextStorageProvider, ContextStorageQueryHandler, type IContextStorageQueryHandler, type QueryValue, type RegisterBaseOptions, type SerializeOptions, VueContextStoragePlugin, asArray, asBoolean, asNumber, asNumberArray, asString, collection, collectionItem, contextStorageCollectionInjectKey, contextStorageCollectionItemInjectKey, contextStorageHandlersInjectKey, contextStorageQueryHandler, contextStorageQueryHandlerInjectKey, defaultHandlers, deserializeParams, handlers, serializeParams, transform, useContextStorageQueryHandler };
+export { CollectionManager, type CollectionManagerItem, _default as ContextStorage, _default$1 as ContextStorageActivator, _default$2 as ContextStorageCollection, type ContextStorageHandler, type ContextStorageHandlerConstructor, _default$3 as ContextStorageProvider, ContextStorageQueryHandler, type IContextStorageQueryHandler, type QueryValue, type RegisterBaseOptions, VueContextStoragePlugin, asArray, asBoolean, asNumber, asNumberArray, asString, collection, collectionItem, contextStorageCollectionInjectKey, contextStorageCollectionItemInjectKey, contextStorageHandlersInjectKey, contextStorageQueryHandler, contextStorageQueryHandlerInjectKey, defaultHandlers, handlers, transform, useContextStorageQueryHandler };

package/dist/index.js

@@ -1,14 +1,25 @@
-import { computed, createBlock, createVNode, defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, onUnmounted, openBlock, provide, renderSlot, toValue, watch, withCtx } from "vue";
+import { createBlock, createVNode, defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, onUnmounted, openBlock, provide, renderSlot, toValue, watch, withCtx } from "vue";
 import { cloneDeep, isEqual, merge, pick } from "lodash";
 import { useRoute, useRouter } from "vue-router";
 
 //#region src/collection.ts
-var ContextStorageCollection = class {
+var CollectionManager = class {
 	active = void 0;
 	collection = [];
 	onActiveChangeCallbacks = [];
+	isReadyPromise;
+	resolveMarkAsReady = void 0;
 	constructor(handlerConstructors) {
 		this.handlerConstructors = handlerConstructors;
+		this.isReadyPromise = new Promise((resolve) => {
+			this.resolveMarkAsReady = resolve;
+		});
+	}
+	isReady() {
+		return this.isReadyPromise;
+	}
+	markAsReady() {
+		this.resolveMarkAsReady?.();
 	}
 	onActiveChange(callback) {
 		this.onActiveChangeCallbacks.push(callback);
@@ -28,7 +39,7 @@ var ContextStorageCollection = class {
 		return item;
 	}
 	remove(removeItem) {
-		if (this.collection.indexOf(removeItem) === -1) throw new Error("[ContextStorage] Item not found in collection");
+		if (this.collection.indexOf(removeItem) === -1) throw new Error("[vue-context-storage] Item not found in collection");
 		this.collection = this.collection.filter((item) => item !== removeItem);
 		if (this.active === removeItem && this.collection.length > 0) this.setActive(this.collection[this.collection.length - 1]);
 	}
@@ -130,7 +141,7 @@ const contextStorageQueryHandler = Symbol("context-storage-query-handler");
 //#region src/handlers/query/index.ts
 function useContextStorageQueryHandler(data, options) {
 	const handler = inject(contextStorageQueryHandler);
-	if (!handler) throw new Error("[ContextStorage] ContextStorageQueryHandler is not provided");
+	if (!handler) throw new Error("[vue-context-storage] ContextStorageQueryHandler is not provided");
 	const uid = getCurrentInstance()?.uid || 0;
 	const causer = (/* @__PURE__ */ new Error()).stack?.split("\n")[2]?.trimStart() || "unknown";
 	const stop = handler.register(data, {
@@ -272,9 +283,7 @@ var ContextStorageQueryHandler = class ContextStorageQueryHandler {
 			if (deserializedKeys.length === 1 && deserialized[this.options.emptyPlaceholder] === null) delete deserialized[this.options.emptyPlaceholder];
 		}
 		if (item.options?.schema) {
-			console.log("[vue-context-storage] 248", deserialized);
 			const result = item.options.schema.safeParse(deserialized);
-			console.log("[vue-context-storage] 251", result);
 			if (result.success) deserialized = result.data;
 			else console.warn("[vue-context-storage] schema parse failed", result.error);
 			if (item.options?.transform) console.warn("[vue-context-storage] transform is not supported with schema");
@@ -348,14 +357,18 @@ const contextStorageHandlersInjectKey = handlers;
 const contextStorageQueryHandlerInjectKey = contextStorageQueryHandler;
 
 //#endregion
-//#region src/components/ContextStorageActivator.vue?vue&type=script&lang.ts
-var ContextStorageActivator_vue_vue_type_script_lang_default = defineComponent({ setup(_, { slots }) {
+//#region src/composables/useContextStorageActivator.ts
+function useContextStorageCollection$2() {
 	const collection$1 = inject(contextStorageCollectionInjectKey);
 	const item = inject(contextStorageCollectionItemInjectKey);
-	const onActivate = () => {
-		collection$1.setActive(item);
-	};
-	return () => h("div", { onMousedown: onActivate }, slots.default?.());
+	return { activate: () => collection$1.setActive(item) };
+}
+
+//#endregion
+//#region src/components/ContextStorageActivator.vue?vue&type=script&lang.ts
+var ContextStorageActivator_vue_vue_type_script_lang_default = defineComponent({ setup(_, { slots }) {
+	const { activate } = useContextStorageCollection$2();
+	return () => h("div", { onMousedown: activate }, slots.default?.());
 } });
 
 //#endregion
@@ -366,6 +379,14 @@ var ContextStorageActivator_default = ContextStorageActivator_vue_vue_type_scrip
 //#region src/constants.ts
 const defaultHandlers = [ContextStorageQueryHandler];
 
+//#endregion
+//#region src/composables/useContextStorageCollection.ts
+function useContextStorageCollection$1(handlers$1) {
+	const collection$1 = new CollectionManager(handlers$1);
+	provide(contextStorageCollectionInjectKey, collection$1);
+	return collection$1;
+}
+
 //#endregion
 //#region src/components/ContextStorageCollection.vue?vue&type=script&lang.ts
 var ContextStorageCollection_vue_vue_type_script_lang_default = defineComponent({
@@ -374,46 +395,11 @@ var ContextStorageCollection_vue_vue_type_script_lang_default = defineComponent(
 		default: () => defaultHandlers
 	} },
 	setup({ handlers: handlers$1 }, { slots }) {
-		const lastActive = computed({
-			get: () => localStorage.getItem("context-storage-last-active") || "main",
-			set: (value) => localStorage.setItem("context-storage-last-active", value)
-		});
 		const router = useRouter();
-		const initialNavigatorState = /* @__PURE__ */ new Map();
-		const initialNavigatorStateResolvers = /* @__PURE__ */ new Map();
-		handlers$1.forEach((handler) => {
-			if (!handler.getInitialStateResolver) return;
-			initialNavigatorStateResolvers.set(handler, handler.getInitialStateResolver());
-		});
+		const collection$1 = useContextStorageCollection$1(handlers$1);
 		router.isReady().then(() => {
-			initialNavigatorStateResolvers.forEach((resolver, handler) => {
-				initialNavigatorState.set(handler, resolver());
-			});
-			activateLastActiveItem();
-		});
-		const collection$1 = new ContextStorageCollection(handlers$1);
-		collection$1.onActiveChange((item) => {
-			lastActive.value = item.key;
+			collection$1.markAsReady();
 		});
-		provide(contextStorageCollectionInjectKey, collection$1);
-		const activateInitialItem = (item) => {
-			item.handlers.forEach((handler) => {
-				const state = initialNavigatorState.get(handler.constructor);
-				if (!state) return;
-				handler.setInitialState?.(state);
-			});
-			collection$1.setActive(item);
-		};
-		const activateLastActiveItem = () => {
-			const lastActiveItem = collection$1.findItemByKey(lastActive.value);
-			if (lastActiveItem) {
-				activateInitialItem(lastActiveItem);
-				return;
-			}
-			const firstItem = collection$1.first();
-			if (!firstItem) throw new Error("[ContextStorage] Cannot find first item in collection");
-			activateInitialItem(firstItem);
-		};
 		return () => {
 			return slots.default?.();
 		};
@@ -424,6 +410,22 @@ var ContextStorageCollection_vue_vue_type_script_lang_default = defineComponent(
 //#region src/components/ContextStorageCollection.vue
 var ContextStorageCollection_default = ContextStorageCollection_vue_vue_type_script_lang_default;
 
+//#endregion
+//#region src/composables/useContextStorageProvider.ts
+function useContextStorageCollection(key) {
+	const collection$1 = inject(contextStorageCollectionInjectKey);
+	if (!collection$1) throw new Error("[vue-context-storage] Context storage collection not found");
+	const item = collection$1.add({ key });
+	provide(contextStorageCollectionItemInjectKey, item);
+	provide(contextStorageHandlersInjectKey, item.handlers);
+	item.handlers.forEach((handler) => {
+		provide(handler.getInjectionKey(), handler);
+	});
+	onUnmounted(() => {
+		collection$1.remove(item);
+	});
+}
+
 //#endregion
 //#region src/components/ContextStorageProvider.vue?vue&type=script&lang.ts
 var ContextStorageProvider_vue_vue_type_script_lang_default = defineComponent({
@@ -432,17 +434,7 @@ var ContextStorageProvider_vue_vue_type_script_lang_default = defineComponent({
 		required: true
 	} },
 	setup(props, { slots }) {
-		const collection$1 = inject(contextStorageCollectionInjectKey);
-		if (!collection$1) throw new Error("[ContextStorage] Context storage collection not found");
-		const item = collection$1.add({ key: props.itemKey });
-		provide(contextStorageCollectionItemInjectKey, item);
-		provide(contextStorageHandlersInjectKey, item.handlers);
-		item.handlers.forEach((handler) => {
-			provide(handler.getInjectionKey(), handler);
-		});
-		onUnmounted(() => {
-			collection$1.remove(item);
-		});
+		useContextStorageCollection(props.itemKey);
 		return () => slots.default?.();
 	}
 });
@@ -453,6 +445,7 @@ var ContextStorageProvider_default = ContextStorageProvider_vue_vue_type_script_
 
 //#endregion
 //#region src/components/ContextStorage.vue?vue&type=script&setup=true&lang.ts
+const itemKey = "main";
 var ContextStorage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ContextStorage",
 	props: { handlers: {
@@ -461,17 +454,41 @@ var ContextStorage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		default: () => defaultHandlers
 	} },
 	setup(__props) {
+		const router = useRouter();
+		const collection$1 = useContextStorageCollection$1(__props.handlers);
+		const initialNavigatorState = /* @__PURE__ */ new Map();
+		const initialNavigatorStateResolvers = /* @__PURE__ */ new Map();
+		__props.handlers.forEach((handler) => {
+			if (!handler.getInitialStateResolver) return;
+			initialNavigatorStateResolvers.set(handler, handler.getInitialStateResolver());
+		});
+		const activateMainItem = () => {
+			const item = collection$1.findItemByKey(itemKey);
+			if (!item) throw new Error(`[vue-context-storage] Cannot find "${itemKey}" item in collection`);
+			item.handlers.forEach((handler) => {
+				const state = initialNavigatorState.get(handler.constructor);
+				if (!state) return;
+				handler.setInitialState?.(state);
+			});
+			collection$1.setActive(item);
+		};
+		router.isReady().then(() => {
+			collection$1.markAsReady();
+		});
+		collection$1.isReady().then(() => {
+			initialNavigatorStateResolvers.forEach((resolver, handler) => {
+				initialNavigatorState.set(handler, resolver());
+			});
+			activateMainItem();
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(ContextStorageCollection_default, { handlers: __props.handlers }, {
-				default: withCtx(() => [createVNode(ContextStorageProvider_default, { "item-key": "main" }, {
-					default: withCtx(() => [createVNode(ContextStorageActivator_default, null, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-						_: 3
-					})]),
+			return openBlock(), createBlock(ContextStorageProvider_default, { "item-key": itemKey }, {
+				default: withCtx(() => [createVNode(ContextStorageActivator_default, null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
 				})]),
 				_: 3
-			}, 8, ["handlers"]);
+			});
 		};
 	}
 });
@@ -552,4 +569,4 @@ const transform = {
 };
 
 //#endregion
-export { ContextStorage_default as ContextStorage, ContextStorageActivator_default as ContextStorageActivator, ContextStorageCollection_default as ContextStorageCollection, ContextStorageProvider_default as ContextStorageProvider, ContextStorageQueryHandler, VueContextStoragePlugin, asArray, asBoolean, asNumber, asNumberArray, asString, collection, collectionItem, contextStorageCollectionInjectKey, contextStorageCollectionItemInjectKey, contextStorageHandlersInjectKey, contextStorageQueryHandler, contextStorageQueryHandlerInjectKey, defaultHandlers, deserializeParams, handlers, serializeParams, transform, useContextStorageQueryHandler };
+export { CollectionManager, ContextStorage_default as ContextStorage, ContextStorageActivator_default as ContextStorageActivator, ContextStorageCollection_default as ContextStorageCollection, ContextStorageProvider_default as ContextStorageProvider, ContextStorageQueryHandler, VueContextStoragePlugin, asArray, asBoolean, asNumber, asNumberArray, asString, collection, collectionItem, contextStorageCollectionInjectKey, contextStorageCollectionItemInjectKey, contextStorageHandlersInjectKey, contextStorageQueryHandler, contextStorageQueryHandlerInjectKey, defaultHandlers, handlers, transform, useContextStorageQueryHandler };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-context-storage",
   "type": "module",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Vue 3 context storage system with URL query synchronization support",
   "author": "",
   "license": "MIT",