{"_id":"@ekwoka/alpine-history","_rev":"5-2b1778ecb8e935317f8154af2655d432","name":"@ekwoka/alpine-history","dist-tags":{"latest":"0.2.1"},"versions":{"0.0.1":{"name":"@ekwoka/alpine-history","version":"0.0.1","keywords":["AlpineJS","RIAS","respimg","cloudinary","shopify"],"author":{"url":"https://thekwoka.net/","name":"Eric Kwoka","email":"eric@thekwoka.net"},"license":"MIT","_id":"@ekwoka/alpine-history@0.0.1","maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/xrias/README.md","bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"dist":{"shasum":"f6fbcbae5fc003321018a141b537d3b4bd795509","tarball":"https://registry.npmjs.org/@ekwoka/alpine-history/-/alpine-history-0.0.1.tgz","fileCount":7,"integrity":"sha512-DZlH2V8j8Pp86rnxBhpgEiiJJO1cr2PLwZv0PMK5oM62k8mMRZXV0h7PRuqvn6heG37I8i8pmNzavEZtf7yeGA==","signatures":[{"sig":"MEUCIBZ1+eL0HE73xci+SfvScHBNLbQTfDF/WQ3TDlEoYaYnAiEA0reQbfFeCpZeKDkX/2ngwJPu7BERfXoNhmCVVRqzAt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18033},"main":"dist/","type":"module","_from":"file:ekwoka-alpine-history-0.0.1.tgz","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./src":"./src/","./dist":"./dist/"},"scripts":{"lint":"eslint --fix ./src; prettier --write ./src --loglevel error","test":"vitest","build":"vite build","coverage":"vitest run --coverage","prebuild":"rm -rf dist","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit"},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"prettier":{"singleQuote":true,"bracketSameLine":true},"_resolved":"/private/var/folders/9x/mjsjrd1n2r3c8vs05jtn3cnc0000gn/T/f22008387bb7d15382f7e4a0d80841fd/ekwoka-alpine-history-0.0.1.tgz","_integrity":"sha512-DZlH2V8j8Pp86rnxBhpgEiiJJO1cr2PLwZv0PMK5oM62k8mMRZXV0h7PRuqvn6heG37I8i8pmNzavEZtf7yeGA==","repository":{"url":"git+https://github.com/ekwoka/alpine-plugins.git","type":"git"},"_npmVersion":"10.1.0","description":"A simple Alpine Directive for use with Cloudinary Fetch API for handling Responsive Images","directories":{},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"peerDependencies":{"alpinejs":"3.x"},"_npmOperationalInternal":{"tmp":"tmp/alpine-history_0.0.1_1700328373083_0.27995622668807973","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@ekwoka/alpine-history","version":"0.0.2","keywords":["AlpineJS","RIAS","respimg","cloudinary","shopify"],"author":{"url":"https://thekwoka.net/","name":"Eric Kwoka","email":"eric@thekwoka.net"},"license":"MIT","_id":"@ekwoka/alpine-history@0.0.2","maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/xrias/README.md","bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"dist":{"shasum":"f99c3656f8be45c1b685b599f709dd046e20427f","tarball":"https://registry.npmjs.org/@ekwoka/alpine-history/-/alpine-history-0.0.2.tgz","fileCount":7,"integrity":"sha512-h8PpiPj8FFfJDSswAos788eMBwpjscUo9eYyVMnbf9y2aoZ5cI2Wa8TgKnka5ujmSFIqwmSlctibWFUMQkGdSQ==","signatures":[{"sig":"MEUCIQC4emQrYXjS8SjvqrrNwHrjkzhZqDbyCNRStd1nlZ1wBgIgZRuzI7j/YLxOyTlKM6KFVPWnW4DenzzlLdPsbjyXSOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23302},"main":"dist/","type":"module","_from":"file:ekwoka-alpine-history-0.0.2.tgz","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./src":"./src/","./dist":"./dist/"},"scripts":{"lint":"eslint --fix ./src; prettier --write ./src --loglevel error","test":"vitest","build":"vite build","coverage":"vitest run --coverage","prebuild":"rm -rf dist","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit"},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"prettier":{"singleQuote":true,"bracketSameLine":true},"_resolved":"/tmp/850084070e7aaeb7a236a66b34d7c36a/ekwoka-alpine-history-0.0.2.tgz","_integrity":"sha512-h8PpiPj8FFfJDSswAos788eMBwpjscUo9eYyVMnbf9y2aoZ5cI2Wa8TgKnka5ujmSFIqwmSlctibWFUMQkGdSQ==","repository":{"url":"git+https://github.com/ekwoka/alpine-plugins.git","type":"git"},"_npmVersion":"10.1.0","description":"A simple Alpine Directive for use with Cloudinary Fetch API for handling Responsive Images","directories":{},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"peerDependencies":{"alpinejs":"3.x"},"_npmOperationalInternal":{"tmp":"tmp/alpine-history_0.0.2_1700489884824_0.46172572833537595","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@ekwoka/alpine-history","version":"0.0.3","keywords":["AlpineJS","RIAS","respimg","cloudinary","shopify"],"author":{"url":"https://thekwoka.net/","name":"Eric Kwoka","email":"eric@thekwoka.net"},"license":"MIT","_id":"@ekwoka/alpine-history@0.0.3","maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/xrias/README.md","bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"dist":{"shasum":"cae3bded918f74cd2d9ea5401bc0656dafbf460c","tarball":"https://registry.npmjs.org/@ekwoka/alpine-history/-/alpine-history-0.0.3.tgz","fileCount":7,"integrity":"sha512-G1K/DiaRtgpJGoSjHcKQH1pEP1MGjOR8utHzHbY4njfn/XMeBEbyFVGfZZKaXEsQdSfunwVZ/lAhUNvN+IFAEg==","signatures":[{"sig":"MEQCIEWLTIP28wryLZcvt/Ah0ZtG3AA/PxQHPwrTULQnntg/AiAX/aI1h0R3f5XlifdF6BJP4NFlHvFNNHibI11IyvlRIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":23501},"main":"dist/","type":"module","_from":"file:ekwoka-alpine-history-0.0.3.tgz","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./src":"./src/","./dist":"./dist/"},"scripts":{"lint":"eslint --fix ./src; prettier --write ./src --loglevel error","test":"vitest","build":"vite build","coverage":"vitest run --coverage","prebuild":"rm -rf dist","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit"},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"prettier":{"singleQuote":true,"bracketSameLine":true},"_resolved":"/tmp/7d6ac0af9d20fc276d07be35d1125be0/ekwoka-alpine-history-0.0.3.tgz","_integrity":"sha512-G1K/DiaRtgpJGoSjHcKQH1pEP1MGjOR8utHzHbY4njfn/XMeBEbyFVGfZZKaXEsQdSfunwVZ/lAhUNvN+IFAEg==","repository":{"url":"git+https://github.com/ekwoka/alpine-plugins.git","type":"git"},"_npmVersion":"10.1.0","description":"A simple Alpine Directive for use with Cloudinary Fetch API for handling Responsive Images","directories":{},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"peerDependencies":{"alpinejs":"3.x"},"_npmOperationalInternal":{"tmp":"tmp/alpine-history_0.0.3_1700491357440_0.48475578427959354","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@ekwoka/alpine-history","version":"0.1.0","keywords":["AlpineJS"],"author":{"url":"https://thekwoka.net/","name":"Eric Kwoka","email":"eric@thekwoka.net"},"license":"MIT","_id":"@ekwoka/alpine-history@0.1.0","maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/params/README.md","bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"dist":{"shasum":"4586144bf6a652940085e509f4c440f35d0a03d4","tarball":"https://registry.npmjs.org/@ekwoka/alpine-history/-/alpine-history-0.1.0.tgz","fileCount":23,"integrity":"sha512-No215ggZpii1NI3qRG14jIuVhM4JyUg7yMxsiTvCuG8u6FUaoSc0tjtvDggRyuPcw5kh3w8uOx5Ovp5ZaJxC5A==","signatures":[{"sig":"MEUCIHhjP2M62WnVW5Kta8Fs0/pBT+z373e4tRFmdGmo+NDDAiEA+45dVWWKnmIiK4Z/bsy65b/bawxYP0AJ5Ddki0DnRzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67244},"main":"dist/","type":"module","_from":"file:ekwoka-alpine-history-0.1.0.tgz","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./src":"./src/","./dist":"./dist/"},"scripts":{"lint":"eslint --fix ./src; prettier --write ./src --loglevel error","test":"vitest","build":"vite build","coverage":"vitest run --coverage","prebuild":"rm -rf dist","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit"},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"prettier":{"singleQuote":true,"bracketSameLine":true},"_resolved":"/tmp/4e8833165f83e6c9257839b86fdb1d27/ekwoka-alpine-history-0.1.0.tgz","_integrity":"sha512-No215ggZpii1NI3qRG14jIuVhM4JyUg7yMxsiTvCuG8u6FUaoSc0tjtvDggRyuPcw5kh3w8uOx5Ovp5ZaJxC5A==","repository":{"url":"git+https://github.com/ekwoka/alpine-plugins.git","type":"git"},"_npmVersion":"10.1.0","description":"Sync Component an Store values to the URL Search Params!!!","directories":{},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"peerDependencies":{"alpinejs":"3.x"},"_npmOperationalInternal":{"tmp":"tmp/alpine-history_0.1.0_1701282274599_0.5448191804224718","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@ekwoka/alpine-history","version":"0.2.0","keywords":["AlpineJS"],"author":{"url":"https://thekwoka.net/","name":"Eric Kwoka","email":"eric@thekwoka.net"},"license":"MIT","_id":"@ekwoka/alpine-history@0.2.0","maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/params/README.md","bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"dist":{"shasum":"4afe4042703ff082b12e075a6de38eed40acc2ea","tarball":"https://registry.npmjs.org/@ekwoka/alpine-history/-/alpine-history-0.2.0.tgz","fileCount":28,"integrity":"sha512-8PP0mGtJrGVJWE4+/OnLtPCee0L3Ly1lsnux4VbGBaZs8CqNjlkR31AcmoYKhfESRmNIP30Q21Jwzsc42fdJLw==","signatures":[{"sig":"MEUCIQDNP7TA3dieaz/Vbyl6+QBHsUKPhwfCo6QZ0T+yESdXowIgbdJ7VXrjdG2t0BvJK5wSnkMSd4Wp9hQhtiwiNjBfb7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75089},"main":"dist/","type":"module","_from":"file:ekwoka-alpine-history-0.2.0.tgz","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./src":"./src/","./dist":"./dist/"},"scripts":{"lint":"eslint --fix ./src; prettier --write ./src --loglevel error","test":"vitest","build":"vite build","coverage":"vitest run --coverage","prebuild":"rm -rf dist","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit"},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"prettier":{"singleQuote":true,"bracketSameLine":true},"_resolved":"/tmp/d12b46134a3a2388cc515c826c69eaf9/ekwoka-alpine-history-0.2.0.tgz","_integrity":"sha512-8PP0mGtJrGVJWE4+/OnLtPCee0L3Ly1lsnux4VbGBaZs8CqNjlkR31AcmoYKhfESRmNIP30Q21Jwzsc42fdJLw==","repository":{"url":"git+https://github.com/ekwoka/alpine-plugins.git","type":"git"},"_npmVersion":"10.2.3","description":"Sync Component an Store values to the URL Search Params!!!","directories":{},"sideEffects":false,"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"peerDependencies":{"alpinejs":"3.x"},"_npmOperationalInternal":{"tmp":"tmp/alpine-history_0.2.0_1705340292053_0.9169994504839407","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@ekwoka/alpine-history","version":"0.2.1","description":"Sync Component an Store values to the URL Search Params!!!","author":{"name":"Eric Kwoka","email":"eric@thekwoka.net","url":"https://thekwoka.net/"},"license":"MIT","keywords":["AlpineJS"],"type":"module","sideEffects":false,"main":"dist/","types":"dist/","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./dist":"./dist/","./src":"./src/"},"peerDependencies":{"alpinejs":"3.x"},"prettier":{"singleQuote":true,"bracketSameLine":true},"repository":{"type":"git","url":"git+https://github.com/ekwoka/alpine-plugins.git"},"homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/params/README.md","scripts":{"build":"vite build","coverage":"vitest run --coverage","lint":"eslint --fix ./src; prettier --write ./src --loglevel error","lint:check":"eslint --max-warnings 10 ./src && prettier --check ./src","lint:types":"tsc --noEmit","prebuild":"rm -rf dist","test":"vitest"},"_id":"@ekwoka/alpine-history@0.2.1","bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"_integrity":"sha512-LtC7pLXlTH81chguk9utMt1PfKynysoRPa95PCLn9Www+hRPRGQFuj5kqy3nlzRzwkqo2tgXgT2K9zMmurXp5A==","_resolved":"/tmp/318f1dac112752acda16dbd8e2b18fdc/ekwoka-alpine-history-0.2.1.tgz","_from":"file:ekwoka-alpine-history-0.2.1.tgz","_nodeVersion":"20.15.1","_npmVersion":"10.7.0","dist":{"integrity":"sha512-LtC7pLXlTH81chguk9utMt1PfKynysoRPa95PCLn9Www+hRPRGQFuj5kqy3nlzRzwkqo2tgXgT2K9zMmurXp5A==","shasum":"e6893ae98ccec5cb3b2857a606b31207c4bca720","tarball":"https://registry.npmjs.org/@ekwoka/alpine-history/-/alpine-history-0.2.1.tgz","fileCount":28,"unpackedSize":79157,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqrGnm0HP+BEFcyjL2jKbdBNPaFHx/Fy6vt5XWmqbX6gIhALQBc+MRfgXDVMhB3FDAxdVljZopjlk6HzzVWxdaOXox"}]},"_npmUser":{"name":"ekwoka","email":"ninjatheory@gmail.com"},"directories":{},"maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-history_0.2.1_1722241319040_0.9471381853051961"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-18T17:26:13.013Z","modified":"2024-07-29T08:21:59.365Z","0.0.1":"2023-11-18T17:26:13.274Z","0.0.2":"2023-11-20T14:18:04.994Z","0.0.3":"2023-11-20T14:42:37.609Z","0.1.0":"2023-11-29T18:24:34.853Z","0.2.0":"2024-01-15T17:38:12.195Z","0.2.1":"2024-07-29T08:21:59.170Z"},"bugs":{"url":"https://github.com/ekwoka/alpine-plugins/issues"},"author":{"name":"Eric Kwoka","email":"eric@thekwoka.net","url":"https://thekwoka.net/"},"license":"MIT","homepage":"https://github.com/ekwoka/alpine-plugins/blob/main/packages/params/README.md","keywords":["AlpineJS"],"repository":{"type":"git","url":"git+https://github.com/ekwoka/alpine-plugins.git"},"description":"Sync Component an Store values to the URL Search Params!!!","maintainers":[{"name":"ekwoka","email":"ninjatheory@gmail.com"}],"readme":"# Alpine History: Param Persistance for AlpineJS\n\n[<img src=\"https://img.shields.io/npm/v/@ekwoka/alpine-history?label=%20&style=for-the-badge&logo=pnpm&logoColor=white\">](https://www.npmjs.com/package/@ekwoka/alpine-history)\n<img src=\"https://img.shields.io/npm/types/@ekwoka/alpine-history?label=%20&amp;logo=typescript&amp;logoColor=white&amp;style=for-the-badge\">\n<img src=\"https://img.shields.io/npm/dt/@ekwoka/alpine-history?style=for-the-badge&logo=npm&logoColor=white\" >\n[<img src=\"https://img.shields.io/bundlephobia/minzip/@ekwoka/alpine-history?style=for-the-badge&logo=esbuild&logoColor=white\">](https://bundlephobia.com/package/@ekwoka/alpine-history)\n\n> This exposes a simple magic `$query` to allow syncing and persisting values in an Alpine Component to the URL query string. This is useful for things like search forms, where you want to be able to share a link to the search results.\n\n## Install\n\n```sh\nnpm i @ekwoka/alpine-history\n```\n\nImport to Build (Simple Version):\n\n```js\nimport Alpine from 'alpinejs';\nimport Params from '@ekwoka/alpine-history';\n\nAlpine.plugin(Params);\n\nwindow.Alpine = Alpine;\nAlpine.start();\n```\n\n## Usage:\n\nWhen you want to sync a value to the URL query string, simply use the `$query` magic property when defining your Alpine component:\n\n```html\n<div\n  x-data=\"{\n  search: $query(''),\n}\">\n  <span x-text=\"search\"></span>\n  <input type=\"text\" x-model=\"search\" />\n</div>\n```\n\nNow you will see as you type in the input, the URL will update to include the query string `?search=your+input+here`. Refresh the page and your value will be restored! It's so easy!\n\nYou can even go back and forward in the navigation! It's like magic!\n\n> This adds `Alpine.query` to allow this to be used in contexts that don't have Magics available, like when using `Alpine.data`.\n\n## Options\n\nThe Query Interceptor exposes a few handy helpers to customize the behavior. These are available as methods to call after defining your initial value.\n\n### `.as(name: string)`\n\nBy default, the query key will be the path in your component from the root until where the query is used. `as` can be used to customize the name of the query key.\n\n```html\n<div\n  x-data=\"{\n  search: $query('').as('q'),\n}\"></div>\n```\n\nThis will now use `q` as the query key instead of `search`.\n\nWhen the `$query` is nested in an object or array, the key in the query param will be visible as `key[key][key]` in the query string. This can be customized by using `as` on the parent object or array. For example:\n\n```js\n{\n  search: {\n    query: $query('hello'),\n  },\n}\n```\n\nwould be `?search[query]=hello` by default.\n\n### `.alwaysShow()`\n\nBy default, if the current value of the query is the same as the defined initial value, the query will not be shown in the URL. This can be overridden by calling `.alwaysShow()`.\n\n```js\n{\n  search: $query('hello').as('q').alwaysShow(), // ?q=hello\n}\n```\n\n### `.usePush()`\n\nBy default, the query will be updated using `history.replaceState` to avoid adding a new entry to the browser history. This can be overridden by calling `.usePush()`. This should be used when the query is used to handle major state changes for the user, but will likely be less useful for quickly updating minor steps.\n\n```js\n{\n  episodeId: $query('').as('eid').usePush();\n}\n```\n\nWhenever `episodeId` the URL will be updated with `?eid=123` and a new entry will be added to the browser history.\n\nThis plugin also implements a `popstate` listener to note when the user navigates back or forward in the browser history. This will update the value of the query to match the URL. Two way binding!\n\n### `.into(fn: Transformer<T>)`\n\nNaturally, query params are always strings. If you want to handle numbers or booleans, or other types, you can use the `.into` method to transform the value before it is used in your component.\n\n```js\n{\n  episodeId: $query('').as('eid').into(Number);\n}\n```\n\nNow, `episodeId` will be a number instead of a string when loaded from the query string.\n\nThis only handles how the value is converted from the query string. It will not affect how the value is converted to a string when updating the query string. Due to this, object types that aren't simple objects or arrays will not work as expected. Speaking of...\n\n#### `Transformer<T>`\n\nFor TypeScript people, here's the type signature for the transformer:\n\n```ts\ntype Transformer<T> = (val: T | PrimitivesToStrings<T>) => T;\n\ntype PrimitivesToStrings<T> = T extends string | number | boolean | null\n  ? `${T}`\n  : T extends Array<infer U>\n    ? Array<PrimitivesToStrings<U>>\n    : T extends object\n      ? {\n          [K in keyof T]: PrimitivesToStrings<T[K]>;\n        }\n      : T;\n```\n\nNote, the transformer will need to be able to handle being called with the type of the value or a simply parsed structure that equates to all primitives being strings. This is because the transformer will be called with the value when initializing, which can be the provided value, or the one determined from the query string.\n\nWhen writing your transformer as a literal or typed function, TypeScript should help guide you to a properly formatted transformer.\n\nAdditionally, if you have an initial value that contains non-string primitives, the value of the key on the data context will resolve to `never` which should indicate, if you attempt to use it, that you need to add a transformer.\n\n```ts\n{\n  episodeId: $query(123), // never\n  seasonNumber: $query(1).into(Number), // number\n}\n```\n\n## Arrays and Objects\n\nThis plugin supports arrays and objects as well! It will automatically treat objects and arrays as if they are made up of `$query` interceptors. For example:\n\n```js\n{\n  search: $query({\n    query: 'hello',\n    results: ['1', '2', '3'],\n  }),\n}\n```\n\nwill be `?search[query]=hello&search[results][0]=1&search[results][1]=2&search[results][2]=3` by default.\n\nIf you have nested primitives like booleans and numbers, you can use `.into` to transform them, but your transformer will need to handle the nested values.\n\n```js\n{\n  search: $query({\n    query: 'hello',\n    results: [1, 2, 3],\n  }).into((obj) => {\n    obj.results = obj.results.map(Number);\n  }),\n}\n```\n\nYou may choose to use separate `$query` interceptors to make this simpler.\n\n## `observeHistory`\n\nYou might want to use `$query` and have other tools that make changes to the query. By default, when `$query` intercepted values change, it is unaware of any other changes made to the `URL` and those change may be removed.\n\nTo handle this, you can import `observeHistory` and call it (with a `History` object, or it will default to `globalThis.history`), and the `pushState` and `replaceState` methods will be wrapped to update the reactive params when they are called.\n\n```js\nimport Alpine from 'alpinets/src';\nimport { query, observeHistory } from '../src/index.ts';\nAlpine.plugin(query);\nAlpine.data('test', () => ({\n  count: Alpine.query(0).into(Number),\n}));\nobserveHistory();\nAlpine.start();\n\nhistory.pushState({}, '', '?count=123');\n```\n\nThis is not needed to handle `popState` events which are already handled by the plugin.\n\n## Reactivity\n\nAll normal reactive behaviors apply to the `$query` interceptor. You can hook up effects to them, and just have a grand old time.\n\n## What This Doesn't Do\n\nThis plugin does not do anything to manage params not associated with an `$query` interceptor. This means that if you have a query string like `?search=hello&sort=asc` and you only have a `$query` interceptor for `search`, the `sort` param will be perpetuated during query string updates.\n\nThis does not directly expose anything for triggering events or handlers on query string changes. As the query interceptors are reactive, you can hook directly into the ones you care about and use Alpine Effects to trigger events or other behaviors.\n\n## Author\n\n👤 **Eric Kwoka**\n\n- Website: http://thekwoka.net\n- Github: [@ekwoka](https://github.com/ekwoka)\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n","readmeFilename":"README.md"}