{"_id":"@adaskothebeast/http-params-processor-angular-http","name":"@adaskothebeast/http-params-processor-angular-http","dist-tags":{"latest":"10.0.0"},"versions":{"10.0.0":{"name":"@adaskothebeast/http-params-processor-angular-http","version":"10.0.0","description":"Angular HttpClient/HttpParams integration for http-params-processor","author":{"name":"Adam Pluciński","email":"adaskothebeast@gmail.com"},"homepage":"https://github.com/AdaskoTheBeAsT/HttpParamsProcessor","keywords":["ng","angular","http","HttpParams","HttpClient"],"repository":{"type":"git","url":"git+https://github.com/AdaskoTheBeAsT/HttpParamsProcessor.git"},"bugs":{"url":"https://github.com/AdaskoTheBeAsT/HttpParamsProcessor/issues"},"peerDependencies":{"@angular/common":"^21.0.0","@angular/core":"^21.0.0","@adaskothebeast/http-params-processor-angular":"^10.0.0"},"sideEffects":false,"module":"fesm2022/adaskothebeast-http-params-processor-angular-http.mjs","typings":"types/adaskothebeast-http-params-processor-angular-http.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/adaskothebeast-http-params-processor-angular-http.d.ts","default":"./fesm2022/adaskothebeast-http-params-processor-angular-http.mjs"}},"dependencies":{"tslib":"^2.3.0"},"gitHead":"1e61d6323f67038b9af916e4f3d263a73fe76497","_id":"@adaskothebeast/http-params-processor-angular-http@10.0.0","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-C8q6Esqg1Wj6ES8iC2WpvIUX2BZ6PYp0m3xLCbm9+BI3vuLayyv46Bg+TfSknm2BTfZYyVr5WBsIFYP5brCPZQ==","shasum":"8896b7a4120cb0814c03aac38d791e74baed65bc","tarball":"https://registry.npmjs.org/@adaskothebeast/http-params-processor-angular-http/-/http-params-processor-angular-http-10.0.0.tgz","fileCount":6,"unpackedSize":30551,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH2tIaOH/5g0bcc1dnFyzdw/DUQkWzwEwSqxaGwYYxsaAiALxnx3qEMXcj2Mo/UbV8lRi6LLm0RaCm8WTeRgjIOqdg=="}]},"_npmUser":{"name":"adasko","email":"adaskothebeast@gmail.com"},"directories":{},"maintainers":[{"name":"adasko","email":"adaskothebeast@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/http-params-processor-angular-http_10.0.0_1768076948976_0.2692138944129645"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-10T20:29:08.888Z","10.0.0":"2026-01-10T20:29:09.142Z","modified":"2026-01-10T20:29:09.486Z"},"maintainers":[{"name":"adasko","email":"adaskothebeast@gmail.com"}],"description":"Angular HttpClient/HttpParams integration for http-params-processor","homepage":"https://github.com/AdaskoTheBeAsT/HttpParamsProcessor","keywords":["ng","angular","http","HttpParams","HttpClient"],"repository":{"type":"git","url":"git+https://github.com/AdaskoTheBeAsT/HttpParamsProcessor.git"},"author":{"name":"Adam Pluciński","email":"adaskothebeast@gmail.com"},"bugs":{"url":"https://github.com/AdaskoTheBeAsT/HttpParamsProcessor/issues"},"readme":"# HttpParamsProcessor\n\n> Transform complex TypeScript objects into query parameters for Angular, Axios, Fetch, and more\n\n[![npm version](https://img.shields.io/npm/v/@adaskothebeast/http-params-processor.svg)](https://www.npmjs.com/package/@adaskothebeast/http-params-processor)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![Angular](https://img.shields.io/badge/Angular-20.x-red.svg)](https://angular.io/)\n[![Tests](https://img.shields.io/badge/tests-passing-brightgreen.svg)](https://github.com/AdaskoTheBeAsT/HttpParamsProcessor)\n\n## The Problem\n\nEver struggled with sending complex nested objects as query parameters in Angular GET requests? Manually building query strings for deeply nested objects is tedious, error-prone, and hard to maintain.\n\n```typescript\n// The old way - manual & painful\nlet params = new HttpParams()\n  .set('user.name', 'John')\n  .set('user.address.city', 'New York')\n  .set('filters[0].type', 'category')\n  .set('filters[0].value', 'electronics')\n  // ... and so on\n```\n\n## The Solution\n\nHttpParamsProcessor automatically converts any TypeScript object (including nested objects and arrays) into properly formatted Angular HttpParams - perfect for GET requests to REST APIs.\n\n```typescript\n// The new way - automatic & elegant\nconst params = processor.process('query', {\n  user: { name: 'John', address: { city: 'New York' } },\n  filters: [{ type: 'category', value: 'electronics' }]\n});\n```\n\n## Installation\n\n```bash\nnpm install @adaskothebeast/http-params-processor\n```\n\n## Quick Start\n\n### 1. Import the Service\n\nThe service is automatically provided in root - no module imports needed!\n\n```typescript\nimport { HttpParamsProcessorService } from '@adaskothebeast/http-params-processor';\n```\n\n### 2. Inject and Use\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { HttpParamsProcessorService } from '@adaskothebeast/http-params-processor';\n\n@Injectable({ providedIn: 'root' })\nexport class ApiService {\n  constructor(\n    private http: HttpClient,\n    private processor: HttpParamsProcessorService\n  ) {}\n\n  searchProducts(filters: ProductFilters) {\n    const params = this.processor.process('filter', filters);\n    return this.http.get<Product[]>('/api/products', { params });\n  }\n}\n```\n\n## Features\n\n- **Zero Configuration** - Works out of the box\n- **Deep Nesting** - Handles objects, arrays, and nested combinations\n- **Date Support** - Automatically converts dates to ISO format\n- **Type Safe** - Full TypeScript support\n- **Well Tested** - Comprehensive test coverage\n- **Lightweight** - No external dependencies\n- **Circular Reference Detection** - Prevents infinite loops\n- **Plugin Architecture** - Extensible value converters for different API styles\n\n## Usage Examples\n\n### Simple Object\n\n```typescript\nconst params = processor.process('user', { id: 123, name: 'John Doe' });\n// Result: user.id=123&user.name=John%20Doe\n```\n\n### Nested Objects\n\n```typescript\nconst params = processor.process('query', {\n  user: { profile: { firstName: 'John', lastName: 'Doe' } }\n});\n// Result: query.user.profile.firstName=John&query.user.profile.lastName=Doe\n```\n\n### Arrays\n\n```typescript\nconst params = processor.process('items', [\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' }\n]);\n// Result: items[0].id=1&items[0].name=Item%201&items[1].id=2&items[1].name=Item%202\n```\n\n### Date Handling\n\n```typescript\nconst params = processor.process('filter', {\n  startDate: new Date('2024-01-01'),\n  endDate: new Date('2024-12-31')\n});\n// Result: filter.startDate=2024-01-01T00:00:00.000Z&filter.endDate=2024-12-31T00:00:00.000Z\n```\n\n### Extending Existing HttpParams\n\n```typescript\nlet params = new HttpParams().set('page', '1').set('size', '10');\nparams = processor.processWithParams(params, 'filter', { status: 'active' });\n// Result: page=1&size=10&filter.status=active\n```\n\n## Plugin Architecture - Value Converter Pipeline\n\nHttpParamsProcessor supports a **two-stage value converter pipeline**:\n\n1. **value-from** - Normalizes library-specific types to intermediate types (Date, DurationComponents, PeriodComponents)\n2. **value-to** - Serializes intermediate types to string output\n\nThis allows mixing any input library (dayjs, moment, luxon, js-joda) with any output format (ISO, Unix timestamp, NodaTime).\n\n### Available Plugin Libraries\n\n#### Key Formatting (how to format nested keys)\n\n| Library | Format | Use Case |\n|---------|--------|----------|\n| **Default** (built-in) | `user.name`, `items[0]` | ASP.NET Core, most APIs |\n| `key-bracket-notation` | `user[name]`, `items[0]` | PHP, Symfony, Laravel |\n| `key-flat` | `user_profile_name` | Flat structure APIs |\n| `key-json` | `filter={\"status\":\"active\"}` | APIs accepting JSON params |\n| `key-custom-delimiter` | `user:name`, `user->name` | Custom delimiters |\n| `key-rails` | `user[name]`, `items[0]` | Ruby on Rails |\n\n#### Value From (input normalization)\n\n| Library | Converts | To |\n|---------|----------|-----|\n| `value-from-dayjs` | Dayjs, dayjs.Duration | Date, DurationComponents |\n| `value-from-moment` | Moment, moment.Duration | Date, DurationComponents |\n| `value-from-luxon` | DateTime, Duration | Date, DurationComponents |\n| `value-from-js-joda` | LocalDate, Duration, Period | Date, DurationComponents, PeriodComponents |\n\n#### Value To (output serialization)\n\n| Library | Input | Output |\n|---------|-------|--------|\n| `value-to-unix-timestamp` | Date | `\"1704067200\"` |\n| `value-to-ms-timestamp` | Date | `\"1704067200000\"` |\n| `value-to-iso` | Date, DurationComponents, PeriodComponents | ISO 8601 format |\n| `value-to-nodatime` | Date, DurationComponents, PeriodComponents | NodaTime format |\n| `value-to-date-fns` | Date | Custom format via date-fns |\n\n### Using Value Converters\n\n```typescript\nimport { \n  HttpParamsProcessorService, \n  createValueConverter \n} from '@adaskothebeast/http-params-processor';\nimport { DayjsDateValueFromStrategy } from '@adaskothebeast/http-params-processor-value-from-dayjs';\nimport { UnixTimestampValueToStrategy } from '@adaskothebeast/http-params-processor-value-to-unix-timestamp';\nimport dayjs from 'dayjs';\n\nconst params = processor.process('filter', \n  { createdAt: dayjs('2024-01-01') },\n  {\n    valueConverters: [\n      createValueConverter(\n        new DayjsDateValueFromStrategy(),\n        new UnixTimestampValueToStrategy()\n      )\n    ]\n  }\n);\n// Result: filter.createdAt=1704067200\n```\n\n### Using Key Formatters\n\n```typescript\nimport { BracketNotationKeyFormattingStrategy } from '@adaskothebeast/http-params-processor-key-bracket-notation';\n\nconst params = processor.process('filter', \n  { user: { name: 'John' } },\n  {\n    keyFormatter: new BracketNotationKeyFormattingStrategy()\n  }\n);\n// Result: filter[user][name]=John\n```\n\n### App-Wide Configuration via DI\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from '@angular/core';\nimport { \n  HTTP_PARAMS_KEY_FORMATTER, \n  HTTP_PARAMS_VALUE_CONVERTERS,\n  createValueConverter \n} from '@adaskothebeast/http-params-processor';\nimport { BracketNotationKeyFormattingStrategy } from '@adaskothebeast/http-params-processor-key-bracket-notation';\nimport { DayjsDateValueFromStrategy } from '@adaskothebeast/http-params-processor-value-from-dayjs';\nimport { UnixTimestampValueToStrategy } from '@adaskothebeast/http-params-processor-value-to-unix-timestamp';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    { \n      provide: HTTP_PARAMS_KEY_FORMATTER, \n      useClass: BracketNotationKeyFormattingStrategy \n    },\n    {\n      provide: HTTP_PARAMS_VALUE_CONVERTERS,\n      useValue: [\n        createValueConverter(\n          new DayjsDateValueFromStrategy(),\n          new UnixTimestampValueToStrategy()\n        )\n      ]\n    }\n  ]\n};\n```\n\n### Complete Example with Duration + NodaTime Backend\n\n```typescript\nimport { \n  DayjsDateValueFromStrategy, \n  DayjsDurationValueFromStrategy \n} from '@adaskothebeast/http-params-processor-value-from-dayjs';\nimport { \n  NodaTimeDateValueToStrategy, \n  NodaTimeDurationValueToStrategy \n} from '@adaskothebeast/http-params-processor-value-to-nodatime';\nimport dayjs from 'dayjs';\nimport duration from 'dayjs/plugin/duration';\n\ndayjs.extend(duration);\n\nconst params = processor.process('filter', {\n  createdAt: dayjs('2024-01-01'),\n  timeout: dayjs.duration({ hours: 1, minutes: 30 })\n}, {\n  valueConverters: [\n    createValueConverter(new DayjsDateValueFromStrategy(), new NodaTimeDateValueToStrategy()),\n    createValueConverter(new DayjsDurationValueFromStrategy(), new NodaTimeDurationValueToStrategy())\n  ]\n});\n```\n\n## API Reference\n\n### `process(key, obj, options?): HttpParams`\n\nCreates a new `HttpParams` instance from the provided object.\n\n**Parameters:**\n- `key` - The root parameter name\n- `obj` - The object to convert\n- `options` - Optional configuration:\n  - `keyFormatter` - Custom key formatting strategy\n  - `valueConverters` - Array of value converters\n\n### `processWithParams(params, key, obj, options?): HttpParams`\n\nAdds parameters to an existing `HttpParams` instance.\n\n### Injection Tokens\n\n- `HTTP_PARAMS_KEY_FORMATTER` - Provide a default key formatter\n- `HTTP_PARAMS_VALUE_CONVERTERS` - Provide default value converters\n\n## Intermediate Types\n\nFor Duration and Period handling, the library defines intermediate types:\n\n```typescript\ninterface DurationComponents {\n  years?: number;\n  months?: number;\n  weeks?: number;\n  days?: number;\n  hours?: number;\n  minutes?: number;\n  seconds?: number;\n  milliseconds?: number;\n}\n\ninterface PeriodComponents {\n  years?: number;\n  months?: number;\n  weeks?: number;\n  days?: number;\n}\n```\n\n## Requirements\n\n- Angular 20.x or higher (for Angular adapter)\n- TypeScript 5.x or higher\n\n---\n\n## 🆕 Framework-Agnostic Adapters\n\nIn addition to the Angular library, we now provide **framework-agnostic adapters** for Axios and Fetch!\n\n### Package Overview\n\n| Package | Use Case | Install |\n|---------|----------|---------|\n| `@adaskothebeast/http-params-processor-core` | Core logic, framework-agnostic | `npm i @adaskothebeast/http-params-processor-core` |\n| `@adaskothebeast/http-params-processor-axios` | Axios integration | `npm i @adaskothebeast/http-params-processor-core @adaskothebeast/http-params-processor-axios` |\n| `@adaskothebeast/http-params-processor-fetch` | Fetch API / URLSearchParams | `npm i @adaskothebeast/http-params-processor-core @adaskothebeast/http-params-processor-fetch` |\n| `@adaskothebeast/http-params-processor` | Angular HttpParams | `npm i @adaskothebeast/http-params-processor` |\n| `@adaskothebeast/http-params-processor-resource` | Angular httpResource | `npm i @adaskothebeast/http-params-processor-resource` |\n| `@adaskothebeast/http-params-processor-tanstack-query` | TanStack Query (React Query) | `npm i @adaskothebeast/http-params-processor-tanstack-query` |\n| `@adaskothebeast/http-params-processor-swr` | SWR (React) | `npm i @adaskothebeast/http-params-processor-swr` |\n\n### Axios Example\n\n```typescript\nimport axios from 'axios';\nimport { createAxiosParamsProcessor } from '@adaskothebeast/http-params-processor-axios';\n\nconst processor = createAxiosParamsProcessor();\n\n// Use with paramsSerializer\naxios.get('/api/products', {\n  params: {\n    filter: {\n      category: 'electronics',\n      price: { min: 100, max: 500 }\n    }\n  },\n  paramsSerializer: processor.createSerializer('')\n});\n// URL: /api/products?filter.category=electronics&filter.price.min=100&filter.price.max=500\n\n// Or set globally\naxios.defaults.paramsSerializer = processor.createSerializer('');\n```\n\n### Fetch Example\n\n```typescript\nimport { createFetchParamsProcessor } from '@adaskothebeast/http-params-processor-fetch';\n\nconst processor = createFetchParamsProcessor();\n\n// Build URL with query parameters\nconst url = processor.buildUrl('/api/products', 'filter', {\n  category: 'electronics',\n  tags: ['new', 'featured']\n});\n\nconst response = await fetch(url);\n// URL: /api/products?filter.category=electronics&filter.tags[0]=new&filter.tags[1]=featured\n\n// Or use URLSearchParams directly\nconst params = processor.toURLSearchParams('filter', { status: 'active' });\nfetch(`/api/data?${params}`);\n```\n\n### React Hook Example\n\n```typescript\nimport { useMemo } from 'react';\nimport { createFetchParamsProcessor } from '@adaskothebeast/http-params-processor-fetch';\n\nfunction useApiUrl(baseUrl: string, filters: Record<string, unknown>) {\n  const processor = useMemo(() => createFetchParamsProcessor(), []);\n  return useMemo(\n    () => processor.buildUrl(baseUrl, 'filter', filters),\n    [processor, baseUrl, filters]\n  );\n}\n\n// Usage with React Query / SWR\nfunction ProductList({ filters }) {\n  const url = useApiUrl('/api/products', filters);\n  const { data } = useQuery(['products', url], () => fetch(url).then(r => r.json()));\n}\n```\n\n### Using Key Formatters with Any Adapter\n\nAll adapters support the same key formatting strategies:\n\n```typescript\nimport { createAxiosParamsProcessor } from '@adaskothebeast/http-params-processor-axios';\nimport { BracketNotationKeyFormattingStrategy } from '@adaskothebeast/http-params-processor-key-bracket-notation';\n\nconst processor = createAxiosParamsProcessor({\n  keyFormatter: new BracketNotationKeyFormattingStrategy()\n});\n\n// Creates: filter[user][name]=John instead of filter.user.name=John\n```\n\n### Using Value Converters with Any Adapter\n\n```typescript\nimport { createFetchParamsProcessor, createValueConverter } from '@adaskothebeast/http-params-processor-fetch';\nimport { DayjsDateValueFromStrategy } from '@adaskothebeast/http-params-processor-value-from-dayjs';\nimport { UnixTimestampValueToStrategy } from '@adaskothebeast/http-params-processor-value-to-unix-timestamp';\nimport dayjs from 'dayjs';\n\nconst processor = createFetchParamsProcessor({\n  valueConverters: [\n    createValueConverter(\n      new DayjsDateValueFromStrategy(),\n      new UnixTimestampValueToStrategy()\n    )\n  ]\n});\n\nconst url = processor.buildUrl('/api/events', 'filter', {\n  startDate: dayjs('2024-01-01')\n});\n// URL: /api/events?filter.startDate=1704067200\n```\n\n### Angular httpResource Example\n\nAngular 19+ introduced `httpResource` for declarative data fetching. Use `http-params-processor-resource` for seamless integration:\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { httpResourceWithParams } from '@adaskothebeast/http-params-processor-resource';\n\n@Component({\n  selector: 'app-products',\n  template: `\n    @if (products.isLoading()) {\n      <p>Loading...</p>\n    }\n    @if (products.value(); as data) {\n      <ul>\n        @for (product of data; track product.id) {\n          <li>{{ product.name }}</li>\n        }\n      </ul>\n    }\n  `\n})\nexport class ProductsComponent {\n  filters = signal({ category: 'electronics', inStock: true });\n\n  products = httpResourceWithParams<Product[]>({\n    url: '/api/products',\n    paramsKey: 'filter',\n    params: this.filters\n  });\n}\n```\n\n#### Reactive httpResource with Computed Params\n\n```typescript\nimport { computed, signal } from '@angular/core';\nimport { reactiveHttpResourceWithParams } from '@adaskothebeast/http-params-processor-resource';\n\n@Component({ /* ... */ })\nexport class SearchComponent {\n  searchTerm = signal('');\n  category = signal('all');\n\n  // Params are computed reactively\n  searchParams = computed(() => ({\n    q: this.searchTerm(),\n    category: this.category(),\n    timestamp: new Date()\n  }));\n\n  results = reactiveHttpResourceWithParams<SearchResult[]>({\n    url: '/api/search',\n    paramsKey: 'query',\n    params: this.searchParams\n  });\n}\n```\n\n### TanStack Query (React Query) Example\n\nFor React applications using TanStack Query v5+:\n\n```typescript\nimport { useQueryWithParams } from '@adaskothebeast/http-params-processor-tanstack-query';\n\nfunction ProductList() {\n  const { data, isLoading, error } = useQueryWithParams<Product[]>({\n    queryKey: ['products'],\n    url: '/api/products',\n    paramsKey: 'filter',\n    params: {\n      category: 'electronics',\n      price: { min: 100, max: 500 },\n      tags: ['new', 'featured']\n    }\n  });\n\n  if (isLoading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error.message}</div>;\n\n  return (\n    <ul>\n      {data?.map(product => (\n        <li key={product.id}>{product.name}</li>\n      ))}\n    </ul>\n  );\n}\n// Query URL: /api/products?filter.category=electronics&filter.price.min=100&filter.price.max=500&filter.tags[0]=new&filter.tags[1]=featured\n```\n\n#### Prefetching with TanStack Query\n\n```typescript\nimport { createQueryOptionsWithParams } from '@adaskothebeast/http-params-processor-tanstack-query';\nimport { useQueryClient } from '@tanstack/react-query';\n\nfunction App() {\n  const queryClient = useQueryClient();\n\n  const prefetchProducts = async () => {\n    await queryClient.prefetchQuery(\n      createQueryOptionsWithParams<Product[]>({\n        queryKey: ['products'],\n        url: '/api/products',\n        paramsKey: 'filter',\n        params: { featured: true }\n      })\n    );\n  };\n\n  return <button onMouseEnter={prefetchProducts}>View Products</button>;\n}\n```\n\n#### With Custom Key Formatter\n\n```typescript\nimport { useQueryWithParams } from '@adaskothebeast/http-params-processor-tanstack-query';\nimport { BracketNotationKeyFormattingStrategy } from '@adaskothebeast/http-params-processor-key-bracket-notation';\n\nconst { data } = useQueryWithParams<User[]>({\n  queryKey: ['users'],\n  url: '/api/users',\n  paramsKey: 'filter',\n  params: { status: 'active' },\n  processorOptions: {\n    keyFormatter: new BracketNotationKeyFormattingStrategy()\n  }\n});\n// Query URL: /api/users?filter[status]=active\n```\n\n### SWR Example\n\nFor React applications using SWR:\n\n```typescript\nimport { useSWRWithParams } from '@adaskothebeast/http-params-processor-swr';\n\nfunction UserList() {\n  const { data, error, isLoading, mutate } = useSWRWithParams<User[]>({\n    url: '/api/users',\n    paramsKey: 'filter',\n    params: {\n      status: 'active',\n      roles: ['admin', 'editor'],\n      pagination: { page: 1, size: 20 }\n    }\n  });\n\n  if (isLoading) return <div>Loading...</div>;\n  if (error) return <div>Error loading users</div>;\n\n  return (\n    <>\n      <ul>\n        {data?.map(user => (\n          <li key={user.id}>{user.name}</li>\n        ))}\n      </ul>\n      <button onClick={() => mutate()}>Refresh</button>\n    </>\n  );\n}\n// Query URL: /api/users?filter.status=active&filter.roles[0]=admin&filter.roles[1]=editor&filter.pagination.page=1&filter.pagination.size=20\n```\n\n#### With SWR Options\n\n```typescript\nimport { useSWRWithParams } from '@adaskothebeast/http-params-processor-swr';\n\nconst { data } = useSWRWithParams<Product[]>({\n  url: '/api/products',\n  paramsKey: 'filter',\n  params: { category: 'electronics' },\n  swrOptions: {\n    refreshInterval: 5000,\n    revalidateOnFocus: true,\n    dedupingInterval: 2000\n  }\n});\n```\n\n#### Creating Custom Fetchers\n\n```typescript\nimport { createFetcherWithParams, createSWRKey } from '@adaskothebeast/http-params-processor-swr';\nimport useSWR from 'swr';\n\n// Create a reusable fetcher with params processing\nconst fetcher = createFetcherWithParams<Product[]>({\n  paramsKey: 'filter',\n  params: { status: 'active' },\n  fetchOptions: {\n    headers: { 'Authorization': 'Bearer token' }\n  }\n});\n\n// Use with standard useSWR\nconst { data } = useSWR('/api/products', fetcher);\n\n// Get the SWR key for cache manipulation\nconst cacheKey = createSWRKey('/api/products', 'filter', { status: 'active' });\n```\n\n---\n\n## Migration Guide\n\n### Migrating from `@adaskothebeast/http-params-processor` to `@adaskothebeast/http-params-processor-angular-http`\n\nThe original `http-params-processor` package has been split into a modular architecture. For Angular applications using `HttpClient`, migrate to `http-params-processor-angular-http`.\n\n#### 1. Update Package Installation\n\n```bash\n# Remove old package\nnpm uninstall @adaskothebeast/http-params-processor\n\n# Install new packages\nnpm install @adaskothebeast/http-params-processor-core @adaskothebeast/http-params-processor-angular-http\n```\n\n#### 2. Update Imports\n\n```typescript\n// Before\nimport { HttpParamsProcessorService } from '@adaskothebeast/http-params-processor';\n\n// After\nimport { HttpParamsProcessorService } from '@adaskothebeast/http-params-processor-angular-http';\n```\n\n#### 3. Update Module Imports (if using NgModule)\n\n```typescript\n// Before\nimport { HttpParamsProcessorModule } from '@adaskothebeast/http-params-processor';\n\n// After\nimport { HttpParamsProcessorModule } from '@adaskothebeast/http-params-processor-angular-http';\n```\n\n#### 4. Update Injection Tokens\n\n```typescript\n// Before\nimport { \n  HTTP_PARAMS_KEY_FORMATTER, \n  HTTP_PARAMS_VALUE_CONVERTERS \n} from '@adaskothebeast/http-params-processor';\n\n// After\nimport { \n  HTTP_PARAMS_KEY_FORMATTER, \n  HTTP_PARAMS_VALUE_CONVERTERS \n} from '@adaskothebeast/http-params-processor-angular-http';\n```\n\n#### 5. Update Key Formatter Imports (if using custom formatters)\n\nKey formatters are now in separate packages:\n\n```typescript\n// Before (if custom strategies were in the main package)\nimport { BracketNotationKeyFormattingStrategy } from '@adaskothebeast/http-params-processor';\n\n// After\nimport { BracketNotationKeyFormattingStrategy } from '@adaskothebeast/http-params-processor-key-bracket-notation';\n```\n\n#### 6. Update Value Converter Imports\n\nValue converters are now split into `value-from-*` and `value-to-*` packages:\n\n```typescript\n// Before (example with date handling)\n// Dates were converted directly\n\n// After - use the two-stage pipeline\nimport { DayjsDateValueFromStrategy } from '@adaskothebeast/http-params-processor-value-from-dayjs';\nimport { UnixTimestampValueToStrategy } from '@adaskothebeast/http-params-processor-value-to-unix-timestamp';\nimport { createValueConverter } from '@adaskothebeast/http-params-processor-angular-http';\n\nconst converter = createValueConverter(\n  new DayjsDateValueFromStrategy(),\n  new UnixTimestampValueToStrategy()\n);\n```\n\n#### API Compatibility\n\nThe `HttpParamsProcessorService` API remains the same:\n- `process(key, obj, options?)` - Creates new `HttpParams`\n- `processWithParams(params, key, obj, options?)` - Extends existing `HttpParams`\n\n#### Quick Reference: New Package Names\n\n| Old Import | New Package |\n|------------|-------------|\n| `@adaskothebeast/http-params-processor` | `@adaskothebeast/http-params-processor-angular-http` |\n| Key formatters (built-in) | `@adaskothebeast/http-params-processor-key-*` |\n| Value converters | `@adaskothebeast/http-params-processor-value-from-*` + `value-to-*` |\n| Core types/interfaces | `@adaskothebeast/http-params-processor-core` |\n\n---\n\n## License\n\nMIT License - see the [LICENSE](LICENSE) file for details.\n\n## Author\n\n**Adam \"AdaskoTheBeAsT\" Pluciński**\n- GitHub: [@AdaskoTheBeAsT](https://github.com/AdaskoTheBeAsT)\n","readmeFilename":"README.md","_rev":"1-c3e77beb5c499cf42f2bf02502f128f9"}