{"id":13533241,"url":"https://github.com/faassen/solid-dexie","last_synced_at":"2025-10-14T07:31:20.877Z","repository":{"id":43777151,"uuid":"511211911","full_name":"faassen/solid-dexie","owner":"faassen","description":"Dexie integration for Solid","archived":false,"fork":false,"pushed_at":"2024-08-01T23:39:25.000Z","size":192,"stargazers_count":63,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-02T11:49:10.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/faassen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-06T16:25:01.000Z","updated_at":"2025-09-17T12:31:11.000Z","dependencies_parsed_at":"2024-01-14T02:04:50.375Z","dependency_job_id":"ee6e422f-a93c-4305-9b81-26aec0470ead","html_url":"https://github.com/faassen/solid-dexie","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":0.02564102564102566,"last_synced_commit":"173f6cf32488a0c2fc4dbcb43c6326490257d656"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/faassen/solid-dexie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faassen%2Fsolid-dexie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faassen%2Fsolid-dexie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faassen%2Fsolid-dexie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faassen%2Fsolid-dexie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faassen","download_url":"https://codeload.github.com/faassen/solid-dexie/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faassen%2Fsolid-dexie/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018225,"owners_count":26086307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:17.946Z","updated_at":"2025-10-14T07:31:20.579Z","avatar_url":"https://github.com/faassen.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Storage"],"readme":"# solid-dexie, Dexie integration for Solid\n\n[DexieJS](https://dexie.org/) is a more friendly wrapper around\n[IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API).\nIndexedDB allows for the efficient browser storage and retrieval of structured\ndata; it's like a localstorage that's a database.\n\n[Solid](https://www.solidjs.com/) is a UI framework for browsers that offers\nreactive hooks.\n\nWhat this package does is integrate Dexie queries with Solid. It allows you to\nuse IndexedDB databases like you use any data in Solid - it's reactive.\n\nSo, you can write Dexie queries that are live: when you add data to your\ndatabase, the queries and thus your UI automatically updates. The queries are\nalso reactive: if you use signals to construct your query, the query result and\nthus your UI changes automatically when you update the signals.\n\n## Installation\n\n```shell\nnpm install solid-dexie\n```\n\nIt declares both `solid-js` and `dexie` as peer dependencies, so you\nalso need them installed in your projects.\n\n## `createDexieArrayQuery`\n\n`createDexieArrayQuery` lets you create live queries. Here's an example:\n\n```typescript\nimport { createDexieArrayQuery } from \"solid-dexie\";\n\nconst friends = createDexieArrayQuery(() =\u003e db.friends.toArray());\n```\n\n`friends` is a special Solid store (think `createStore`). So, you can build\nUIs with it:\n\n```tsx\n\u003cFor each={friends}\u003e\n  {(friend) =\u003e (\n    \u003cdiv\u003e\n      {friend.id} {friend.name} {friend.age}\n    \u003c/div\u003e\n  )}\n\u003c/For\u003e\n```\n\nThe UI updates automatically when you modify the database in some event handler:\n\n```typescript\nconst handleAdd = () =\u003e {\n  await db.friends.add({ name: \"Foo\", age: 10 });\n};\n```\n\nYou can also create dynamic queries with signals:\n\n```typescript\nconst [value, setValue] = createSignal(0);\nconst friends = createDexieArrayQuery(() =\u003e db.friends.where(\"age\").above(value()).toArray());\n```\n\nNow when you modify `value` with `setValue`, `friends` automatically updates to\nreflect this change.\n\n### Optimization note\n\nInternally, `createDexieArrayQuery` is optimized for arrays - it uses Solid's\n[`reconcile`](https://www.solidjs.com/docs/latest/api#reconcile) function to\nensure your data is stable so your UI won't update for objects that don't\nchange. It depends on the primary key of your database table to be `id`.\n\n## `createDexieSignalQuery`\n\nSome Dexie queries (`count()`, `first()`, `last()`, `get()`) return non-array\nvalues. For this, you should use `createDexieSignalQuery`, which behaves much\nlike a normal Solid signal.\n\n```typescript\nimport { createDexieSignalQuery } from \"solid-dexie\";\n\nconst friendsCount = createDexieSignalQuery(() =\u003e db.friends.count());\n```\n\n`friendsCount` starts out as `undefined`, then obtains the value of the query.\n\nYou use this like any signal in Solid:\n\n```tsx\n\u003cdiv\u003eMy friends count: {friendsCount()}\u003c/div\u003e\n```\n\nThe signal updates automatically when you modify the database, and is reactive\nto signals used in a dymnamic query, just like with `createDexieArrayQuery`.\n\nYou should not use `createDexieSignalQuery` with queries that produce an array\n(`.toArray()`), because it causes your UI to redraw for each item for all\nchanges; use `createDexieArrayQuery` instead. In fact, TypeScript prevents you\nfrom using array queries in `createDexieSignalQuery` to remind you of this.\n\n## Development\n\n### Running the demo\n\nYou can run the demo app by running:\n\n```shell\nnpm run dev\n```\n\n### Making a release\n\nYou can create a new npm release automatically by doing the following on the\n`main` branch:\n\n```shell\nnpm version patch  # or minor, major, etc\ngit push --follow-tags\n```\n\n[`npm version`](https://docs.npmjs.com/cli/v8/commands/npm-version) updates the\nversion number automatically and also puts the latest date in `CHANGELOG.md`.\nYou then need to push using `--follow-tags` (**NOT** `--tags`).\n\nThe release process is done through a github action defined in\n`.workflows/publish.yml` which publishes to the npm registry automatically.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaassen%2Fsolid-dexie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaassen%2Fsolid-dexie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaassen%2Fsolid-dexie/lists"}