vue-context-storage 0.1.0

package/src/collection.ts

@@ -0,0 +1,71 @@
+import { ContextStorageHandler, ContextStorageHandlerConstructor } from './handlers'
+
+export type ContextStorageCollectionItem = {
+  key: string
+  handlers: ContextStorageHandler[]
+}
+
+interface ItemOptions {
+  key: string
+}
+
+export class ContextStorageCollection {
+  public active?: ContextStorageCollectionItem = undefined
+  private collection: ContextStorageCollectionItem[] = []
+  private onActiveChangeCallbacks: ((item: ContextStorageCollectionItem) => void)[] = []
+
+  constructor(private handlerConstructors: ContextStorageHandlerConstructor[]) {}
+
+  onActiveChange(callback: (item: ContextStorageCollectionItem) => void): void {
+    this.onActiveChangeCallbacks.push(callback)
+  }
+
+  first(): ContextStorageCollectionItem | undefined {
+    return this.collection[0]
+  }
+
+  findItemByKey(key: string): ContextStorageCollectionItem | undefined {
+    return this.collection.find((item) => item.key === key)
+  }
+
+  add(options: ItemOptions): ContextStorageCollectionItem {
+    const handlers = this.handlerConstructors.map((constructor) => new constructor())
+
+    const item: ContextStorageCollectionItem = { handlers, key: options.key }
+
+    this.collection.push(item)
+
+    return item
+  }
+
+  remove(removeItem: ContextStorageCollectionItem): void {
+    if (this.collection.indexOf(removeItem) === -1) {
+      throw new Error('[ContextStorage] 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])
+    }
+  }
+
+  setActive(activeItem: ContextStorageCollectionItem): void {
+    if (this.active === activeItem) {
+      return
+    }
+
+    const hasActiveBefore = this.active !== undefined
+    this.active = activeItem
+
+    this.collection.forEach((item) => {
+      Object.values(item.handlers).forEach((handler) => {
+        if (handler.setEnabled) {
+          handler.setEnabled(item === activeItem, !hasActiveBefore)
+        }
+      })
+    })
+
+    this.onActiveChangeCallbacks.forEach((callback) => callback(activeItem))
+  }
+}

package/src/components/ContextStorageActivator.vue

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { defineComponent, h, inject } from 'vue'
+import {
+  contextStorageCollectionInjectKey,
+  contextStorageCollectionItemInjectKey,
+} from '../injectionSymbols'
+
+export default defineComponent({
+  setup(_, { slots }) {
+    const collection = inject(contextStorageCollectionInjectKey)!
+    const item = inject(contextStorageCollectionItemInjectKey)!
+
+    const onActivate = () => {
+      collection.setActive(item)
+    }
+
+    return () => h('div', { onMousedown: onActivate }, slots.default?.())
+  },
+})
+</script>

package/src/components/ContextStorageCollection.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { ContextStorageCollection, ContextStorageCollectionItem } from '../collection'
+import { ContextStorageHandlerConstructor } from '../handlers'
+import { contextStorageCollectionInjectKey } from '../injectionSymbols'
+import { computed, defineComponent, PropType, provide } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  props: {
+    handlers: {
+      type: Object as PropType<ContextStorageHandlerConstructor[]>,
+      required: true,
+    },
+  },
+  setup({ handlers }, { 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 = new Map<
+      ContextStorageHandlerConstructor,
+      Record<string, unknown>
+    >()
+    const initialNavigatorStateResolvers = new Map<
+      ContextStorageHandlerConstructor,
+      () => Record<string, unknown>
+    >()
+
+    handlers.forEach((handler) => {
+      if (!handler.getInitialStateResolver) {
+        return
+      }
+
+      initialNavigatorStateResolvers.set(handler, handler.getInitialStateResolver())
+    })
+
+    router.isReady().then(() => {
+      initialNavigatorStateResolvers.forEach((resolver, handler) => {
+        initialNavigatorState.set(handler, resolver())
+      })
+
+      activateLastActiveItem()
+    })
+
+    const collection = new ContextStorageCollection(handlers)
+    collection.onActiveChange((item) => {
+      lastActive.value = item.key
+    })
+
+    provide(contextStorageCollectionInjectKey, collection)
+
+    const activateInitialItem = (item: ContextStorageCollectionItem) => {
+      item.handlers.forEach((handler) => {
+        const state = initialNavigatorState.get(
+          handler.constructor as ContextStorageHandlerConstructor,
+        )
+
+        if (!state) {
+          return
+        }
+
+        handler.setInitialState?.(state)
+      })
+
+      collection.setActive(item)
+    }
+
+    const activateLastActiveItem = () => {
+      const lastActiveItem = collection.findItemByKey(lastActive.value)
+      if (lastActiveItem) {
+        activateInitialItem(lastActiveItem)
+        return
+      }
+
+      const firstItem = collection.first()
+      if (!firstItem) {
+        throw new Error('[ContextStorage] Cannot find first item in collection')
+      }
+
+      activateInitialItem(firstItem)
+    }
+
+    return () => {
+      return slots.default?.()
+    }
+  },
+})
+</script>

package/src/components/ContextStorageProvider.vue

@@ -0,0 +1,38 @@
+<script lang="ts">
+import {
+  contextStorageCollectionInjectKey,
+  contextStorageCollectionItemInjectKey,
+  contextStorageHandlersInjectKey,
+} from '../injectionSymbols'
+import { defineComponent, inject, onUnmounted, provide } from 'vue'
+
+export default defineComponent({
+  props: {
+    itemKey: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const collection = inject(contextStorageCollectionInjectKey)
+    if (!collection) throw new Error('[ContextStorage] Context storage collection not found')
+
+    const item = collection.add({
+      key: props.itemKey,
+    })
+
+    provide(contextStorageCollectionItemInjectKey, item)
+    provide(contextStorageHandlersInjectKey, item.handlers)
+
+    item.handlers.forEach((handler) => {
+      provide(handler.getInjectionKey(), handler)
+    })
+
+    onUnmounted(() => {
+      collection.remove(item)
+    })
+
+    return () => slots.default?.()
+  },
+})
+</script>

package/src/components/ContextStorageRoot.vue

@@ -0,0 +1,23 @@
+<template>
+  <ContextStorageCollection :handlers="handlers">
+    <ContextStorageProvider item-key="main">
+      <ContextStorageActivator>
+        <slot />
+      </ContextStorageActivator>
+    </ContextStorageProvider>
+  </ContextStorageCollection>
+</template>
+
+<script setup lang="ts">
+import ContextStorageActivator from './ContextStorageActivator.vue'
+import ContextStorageCollection from './ContextStorageCollection.vue'
+import ContextStorageProvider from './ContextStorageProvider.vue'
+import { ContextStorageHandlerConstructor } from '../handlers'
+import { defaultHandlers } from '../index'
+
+interface Props {
+  handlers: ContextStorageHandlerConstructor[]
+}
+
+const { handlers = defaultHandlers } = defineProps<Props>()
+</script>

package/src/components.ts

@@ -0,0 +1,5 @@
+// Vue components - import directly from source
+export { default as ContextStorageActivator } from './components/ContextStorageActivator.vue'
+export { default as ContextStorageCollection } from './components/ContextStorageCollection.vue'
+export { default as ContextStorageProvider } from './components/ContextStorageProvider.vue'
+export { default as ContextStorageRoot } from './components/ContextStorageRoot.vue'

package/src/handlers/query/helpers.ts

@@ -0,0 +1,134 @@
+import { LocationQuery } from 'vue-router'
+
+export 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' }
+ */
+export function serializeParams(
+  params: Record<string, unknown>,
+  options: SerializeOptions = {},
+): LocationQuery {
+  const { prefix = '' } = options
+
+  const result: LocationQuery = {}
+
+  Object.keys(params).forEach((key) => {
+    const value = params[key]
+
+    // Skip empty values, null, and empty arrays
+    if (value === '') {
+      return
+    }
+
+    if (value === null) {
+      return
+    }
+
+    if (Array.isArray(value) && value.length === 0) {
+      return
+    }
+
+    // Format the key with prefix (or without if prefix is empty)
+    const formattedKey = prefix ? `${prefix}[${key}]` : key
+
+    if (typeof value === 'object') {
+      if (Array.isArray(value)) {
+        // Serialize arrays directly: a=1&a=2&a=3
+        result[formattedKey] = value.map(String)
+      } else {
+        Object.assign(
+          result,
+          serializeParams(value as Record<string, unknown>, {
+            ...options,
+            prefix: formattedKey,
+          }),
+        )
+      }
+    } else if (typeof value === 'boolean') {
+      result[formattedKey] = value ? '1' : '0'
+    } else {
+      result[formattedKey] = String(value)
+    }
+  })
+
+  return result
+}
+
+/**
+ * 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' }
+ */
+export function deserializeParams(params: Record<string, any>): Record<string, any> {
+  return Object.keys(params).reduce<Record<string, any>>((acc, key) => {
+    const value = params[key]
+
+    // Parse nested structure: 'filters[status]' -> { filters: { status: value } }
+    const bracketMatch = key.match(/^([^[]+)\[(.+)]$/)
+
+    if (bracketMatch) {
+      const [, rootKey, nestedPath] = bracketMatch
+
+      // Initialize root object if needed
+      if (!acc[rootKey]) {
+        acc[rootKey] = {}
+      }
+
+      // Parse nested path: 'created_at][from' -> ['created_at', 'from']
+      const pathParts = nestedPath.split('][')
+
+      // Navigate/create nested structure
+      let current = acc[rootKey]
+      for (let i = 0; i < pathParts.length - 1; i++) {
+        const part = pathParts[i]
+        if (!current[part]) {
+          current[part] = {}
+        }
+        current = current[part]
+      }
+
+      // Set the final value
+      const finalKey = pathParts[pathParts.length - 1]
+      current[finalKey] = value
+    } else {
+      // No brackets - simple key
+      acc[key] = value
+    }
+
+    return acc
+  }, {})
+}