{"id":13780572,"url":"https://github.com/dldc-packages/democrat","last_synced_at":"2025-12-11T21:11:30.778Z","repository":{"id":36307017,"uuid":"222973468","full_name":"dldc-packages/democrat","owner":"dldc-packages","description":"React, but for state management !","archived":false,"fork":false,"pushed_at":"2024-05-03T23:53:48.000Z","size":2046,"stargazers_count":30,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-20T22:07:26.161Z","etag":null,"topics":["hooks","react","state-tree","typescript"],"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/dldc-packages.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":"2019-11-20T15:52:24.000Z","updated_at":"2024-05-03T23:53:51.000Z","dependencies_parsed_at":"2023-12-26T17:31:47.547Z","dependency_job_id":"65b03763-4a54-4485-a4dd-35c47c7d8fe6","html_url":"https://github.com/dldc-packages/democrat","commit_stats":null,"previous_names":["dldc-packages/democrat","etienne-dldc/democrat"],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/dldc-packages/democrat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dldc-packages%2Fdemocrat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dldc-packages%2Fdemocrat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dldc-packages%2Fdemocrat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dldc-packages%2Fdemocrat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dldc-packages","download_url":"https://codeload.github.com/dldc-packages/democrat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dldc-packages%2Fdemocrat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27670304,"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-12-11T02:00:11.302Z","response_time":56,"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":["hooks","react","state-tree","typescript"],"created_at":"2024-08-03T18:01:17.382Z","updated_at":"2025-12-11T21:11:30.759Z","avatar_url":"https://github.com/dldc-packages.png","language":"TypeScript","funding_links":[],"categories":["List"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/dldc-packages/democrat/blob/0f21d98066e3549419e47bd0cf0703e262300a31/design/logo.svg\" width=\"597\" alt=\"democrat logo\"\u003e\n\u003c/p\u003e\n\n# 📜 democrat\n\n\u003e React, but for state management !\n\nDemocrat is a library that mimic the API of React (Components, hooks, Context...) but instead of producing DOM mutation it produces a state tree.\nYou can then use this state tree as global state management system (like redux or mobx).\n\n## Project Status\n\nWhile this project is probably not 100% stable it has a decent amount of tests and is used in a few projects without any issue.\n\n## Install\n\n```bash\nnpm install democrat\n```\n\n## Gist\n\n```ts\nimport { useState, useCallback, createElement } from 'democrat';\n\n// Create a Democrat \"component\"\nconst MainStore = () =\u003e {\n  // all your familiar hooks are here\n  const [count, setCount] = useState(0);\n\n  const increment = useCallback(() =\u003e setCount(prev =\u003e prev + 1), []);\n\n  // return your state at the end\n  return {\n    count,\n    increment,\n  };\n};\n\n// Render your component\nconst store = Democrat.render(createElement(MainStore, {}));\n// subscribe to state update\nstore.subscribe(render);\nrender();\n\nfunction render = () =\u003e {\n  console.log(store.getState());\n};\n```\n\n## How is this different from React ?\n\nThere are a few diffrences with React\n\n### 1. Return value\n\nWith Democrat instead of JSX, you return data. More precisly, you return what you want to expose in your state.\n\n### 2. `useChildren`\n\nIn React to use other component you have to return an element of it in your render. In Democrat you can't do that since what you return is your state. Instead you can use the `useChildren` hook.\nThe `useChildren` is very similar to when you return `\u003cMyComponent /\u003e` in React:\n\n- It will create a diff to define what to update/mount/unmount\n- If props don't change it will not re-render but re-use the previous result instead\n  But the difference is that you get the result of that children an can use it in the parent component.\n\n```ts\nconst Child = () =\u003e {\n  // ..\n  return { some: 'data' };\n};\n\nconst Parent = () =\u003e {\n  //...\n  const childData = Democrat.useChildren(Democrat.createElement(Child, {}));\n  // childData = { some: 'data' }\n  //...\n  return { children: childData };\n};\n```\n\n### 3. `createElement` signature\n\nThe signature of Democrat's `createElement` is `createElement(Component, props, key)`. As you can see, unlike the React's one it does not accept `...children` as argument, instead you should pass children as a props.\nThis difference mainly exist because of TypeScript since we can't correctly type `...children`.\n\n## `useChildren` supported data\n\n`useChildren` supports the following data structure:\n\n- `Array` (`[]`)\n- `Object` (`{}`)\n- `Map`\n\n```ts\nconst Child = () =\u003e {\n  return 42;\n};\n\nconst Parent = () =\u003e {\n  //...\n  const childData = Democrat.useChildren({\n    a: Democrat.createElement(Child, {}),\n    b: Democrat.createElement(Child, {}),\n  });\n  // childData = { a: 42, b: 42 }\n  //...\n  return {};\n};\n```\n\n## Using hooks library\n\nBecause Democrat's hooks works just like React's ones with a little trick you can use some of React hooks in Democrat. This let you use third party hooks made for React directly in Democrat.\nAll you need to do is pass the instance of `React` to the `Democrat.render` options.\n\n```js\nimport React from 'react';\nimport { render } from 'democrat';\n\nrender(/*...*/, { ReactInstance: React });\n```\n\nFor now the following hooks are supported:\n\n- `useState`\n- `useReducer`\n- `useEffect`\n- `useMemo`\n- `useCallback`\n- `useLayoutEffect`\n- `useRef`\n\n**Note**: While `useContext` exists in Democrat we cannot use the React version of it because of how context works (we would need to also replace `createContext` but we have no way to detect when we should create a Democrat context vs when we should create a React context...).\n\n## `createFactory`\n\nThe `createFactory` function is a small helper. It returns the `Component` you pass in as well as two functions:\n\n- `createElement`: to create an element out of the component by passing the props.\n- `useChildren`: to quickly use the component as children.\n\n```js\nconst Child = createFactory(({ name }) =\u003e {});\n\nconst Parent = createFactory(() =\u003e {\n  const child1 = useChildren(Child.createElement({ name: 'Paul' }));\n  const child2 = Child.useChildren({ name: 'Paul' });\n});\n```\n\n## Components\n\n```ts\nimport * as Democrat from 'democrat';\n\nconst Counter = () =\u003e {\n  const [count, setCount] = Democrat.useState(1);\n\n  const increment = Democrat.useCallback(() =\u003e setCount((prev) =\u003e prev + 1), []);\n\n  const result = Democrat.useMemo(\n    () =\u003e ({\n      count,\n      increment,\n    }),\n    [count, increment],\n  );\n\n  return result;\n};\n\nconst Store = () =\u003e {\n  const counter = Democrat.useChildren(Democrat.createElement(Counter, {}));\n  const countersObject = Democrat.useChildren({\n    counterA: Democrat.createElement(Counter, {}),\n    counterB: Democrat.createElement(Counter, {}),\n  });\n  const countersArray = Democrat.useChildren(\n    // create as many counters as `count`\n    Array(counter.count)\n      .fill(null)\n      .map(() =\u003e Democrat.createElement(Counter, {})),\n  );\n\n  return Democrat.useMemo(\n    () =\u003e ({\n      counter,\n      countersObject,\n      countersArray,\n    }),\n    [counter, countersObject, countersArray],\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdldc-packages%2Fdemocrat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdldc-packages%2Fdemocrat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdldc-packages%2Fdemocrat/lists"}