{"id":15414885,"url":"https://github.com/lxsmnsyc/solid-pebble","last_synced_at":"2026-02-26T23:30:56.498Z","repository":{"id":56851923,"uuid":"525822534","full_name":"lxsmnsyc/solid-pebble","owner":"lxsmnsyc","description":"State management library for SolidJS","archived":false,"fork":false,"pushed_at":"2024-01-28T08:06:20.000Z","size":445,"stargazers_count":55,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T23:36:04.436Z","etag":null,"topics":["solid-js","state","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lxsmnsyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-08-17T14:13:09.000Z","updated_at":"2025-03-02T07:00:51.000Z","dependencies_parsed_at":"2023-01-20T07:00:49.398Z","dependency_job_id":"feaa3c8c-2d2e-494b-af77-4bc9ba7816ff","html_url":"https://github.com/lxsmnsyc/solid-pebble","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"e930aa2a94f3291591694bf7b10965b3043f843d"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/lxsmnsyc/solid-pebble","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-pebble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-pebble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-pebble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-pebble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/solid-pebble/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-pebble/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29876895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T22:37:10.609Z","status":"ssl_error","status_checked_at":"2026-02-26T22:37:09.019Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["solid-js","state","state-management"],"created_at":"2024-10-01T17:05:10.684Z","updated_at":"2026-02-26T23:30:56.480Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","readme":"# solid-pebble\n\n\u003e State management library for SolidJS\n\n[![NPM](https://img.shields.io/npm/v/solid-pebble.svg)](https://www.npmjs.com/package/solid-pebble) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-pebble/tree/main/examples/demo)\n\n## Install\n\n```bash\nnpm i solid-pebble\n```\n\n```bash\nyarn add solid-pebble\n```\n\n```bash\npnpm add solid-pebble\n```\n\n## Why\n\nGlobal state management in SolidJS is an already solved problem, however, even though it is handy, it introduces another problem: when working with SSR, global state tend to persist its current state as long as the runtime persist, which is bad for SSR because a lifetime of a global state should be bound to the app's instance. This is referred to as \"cross-request state pollution\" as two concurrent SSR requests may inadvertently share the same state.\n\n`solid-pebble` allows you to declare global states that behave like a local state. These states are tied to their app/boundary instance so it keeps the state from getting shared across boundaries.\n\n## Usage\n\n### Boundary\n\nBefore using `solid-pebble`, one must mount the `PebbleBoundary` to their app, ideally, at the root.\n\n```js\nimport { PebbleBoundary } from 'solid-pebble';\n\n\u003cPebbleBoundary\u003e\n  \u003cApp /\u003e\n\u003c/PebbleBoundary\u003e\n```\n\n`PebbleBoundary` will manage the lifecycles and instances of the pebbles.\n\n### Pebbles\n\nA pebble is the synonym of `createSignal` for `solid-pebble`: a fundamental \"global\" state. It shares almost the same syntax:\n\n```tsx\nimport { createPebble } from 'solid-pebble';\n\nconst countPebble = createPebble(0);\n```\n\nbut unlike signals, pebbles are lazily-evaluated, so you won't get the accessor nor the setter of a pebble without the use of `usePebble`.\n\n```tsx\nimport { usePebble } from 'solid-pebble';\n\nfunction Counter() {\n  const [count, setCount] = usePebble(countPebble);\n  \n  function increment() {\n    setCount((c) =\u003e c + 1);\n  }\n\n  return (\n    \u003c\u003e \n      \u003ch1\u003eCount: {count()}\u003c/h1\u003e\n      \u003cbutton onClick={increment}\u003eIncrement\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nSince pebble instances are managed by `PebbleBoundary`, unmounting the component that uses `usePebble` won't reset the state of the given pebble, and the state of the given pebble is also shared by similar components, which means that if one component updates a given pebble, the other components that uses it will also receive the same update.\n\nand by lazily-evaluated, you can also use lazy initial values\n\n```js\nconst lazyPebble = createPebble(() =\u003e initializePebbleValue());\n```\n\n### Computed pebbles\n\nPebbles themselves are great, just like signals, but how do we make computed pebbles? We can use `createComputedPebble` which is also similar to `createMemo` with some significant difference.\n\n```js\nimport { createComputedPebble } from 'solid-pebble';\n\nconst doubleCountPebble = createComputedPebble(\n  (context) =\u003e context.get(countPebble) * 2,\n);\n```\n\n`createComputedPebble` receives a context object that helps us read values from other pebbles and computed pebbles, this also tracks the pebbles for value updates.\n\nLike `createPebble`, we use `usePebble` to get the accessor from `createComputedPebble`\n\n```js\nimport { usePebble } from 'solid-pebble';\n\nfunction DoubleCounter() {\n  const doubleCount = usePebble(doubleCountPebble);\n\n  return (\n    \u003ch1\u003eDouble Count: {doubleCount()}\u003c/h1\u003e\n  );\n}\n```\n\nJust like `createMemo`, you can pass an initial value and/or receive the previously computed value\n\n```js\nconst upwardsCount = createComputedPebble((context, previous) =\u003e {\n  const current = context.get(countPebble);\n  if (previous \u003c current) {\n    return current;\n  }\n  return previous;\n}, {\n  initialValue: 10, // can also be lazy i.e. () =\u003e Math.random() * 100\n});\n```\n\n### Proxy pebbles\n\nProxy pebbles are pebbles that are stateless pebbles that you can use to read from and write to pebbles.\n\nSince proxy pebbles are stateless, it doesn't have or need an initial value, it cannot track its previous value nor it doesn't have to receive a value for its setter.\n\nHere's an example that emulates a reducer\n\n```js\nimport { createProxyPebble } from 'solid-pebble';\n\nconst countPebble = createPebble(0);\n\nconst reduce = (state, action) =\u003e {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1;\n    case 'DECREMENT':\n      return state - 1;\n    default:\n      return state;\n  }\n}\n\nconst reducerPebble = createProxyPebble({\n  get(context) {\n    return context.get(countPebble);\n  },\n  set(context, action) {\n    context.set(countPebble, reduce(context.get(countPebble), action));\n  },\n});\n\n/// ...\n\nconst [count, dispatch] = usePebble(reducerPebble);\n\ndispatch({ type: 'INCREMENT' });\n```\n\n### Custom pebbles\n\nCustom pebbles are pebbles where you get to control when it should track and trigger updates. It's like a combination of a normal pebble and a proxy pebble.\n\n```js\nimport { createCustomPebble } from 'solid-pebble';\n\nconst idlePebble = createCustomPebble((context) =\u003e {\n  let value;\n  let schedule;\n\n  return {\n    get(track) {\n      track();\n      return value;\n    },\n    set(trigger, action) {\n      if (schedule) {\n        cancelIdleCallback(schedule);\n      }\n      schedule = requestIdleCallback(() =\u003e {\n        value = action;\n        trigger();\n      });\n    },\n  };\n})\n\n```\n\n## Sponsors\n\n![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-pebble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxsmnsyc%2Fsolid-pebble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Fsolid-pebble/lists"}