{"id":28092486,"url":"https://github.com/haneenmahd/dapper","last_synced_at":"2025-05-13T13:17:48.575Z","repository":{"id":45896626,"uuid":"514913578","full_name":"haneenmahd/dapper","owner":"haneenmahd","description":"Blazing fast and lightweight state management framework for Node 👓","archived":false,"fork":false,"pushed_at":"2022-08-19T16:43:41.000Z","size":2052,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-13T13:17:40.056Z","etag":null,"topics":["framework","hacktoberfest","javascript","javascript-library","lightweight","nodejs","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/haneenmahd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2022-07-17T17:40:44.000Z","updated_at":"2023-05-08T01:32:54.000Z","dependencies_parsed_at":"2022-07-22T01:02:01.272Z","dependency_job_id":null,"html_url":"https://github.com/haneenmahd/dapper","commit_stats":null,"previous_names":["truelines/dapper"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fdapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fdapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fdapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haneenmahd%2Fdapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haneenmahd","download_url":"https://codeload.github.com/haneenmahd/dapper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948510,"owners_count":21988962,"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","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":["framework","hacktoberfest","javascript","javascript-library","lightweight","nodejs","state","state-management"],"created_at":"2025-05-13T13:17:48.029Z","updated_at":"2025-05-13T13:17:48.561Z","avatar_url":"https://github.com/haneenmahd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/TruelinesHQ/dapper/blob/main/resources/banner.png\" alt=\"Banner\" /\u003e\n\n\u003cbr /\u003e\n\n**Dapper** is a blazing fast and lightweight framework for managing state in a Javascript app.\n\n## Features\n\n- 💨 **Fast** − Our APIs just run lightning fast, no more slowdowns.\n- 🔋 **Efficient** - To reduce the consumption of energy, we have optimised it.\n- ⛑ **Type Safe** - To prevent type errors and bugs, we have made the framework type-safe.\n- 🛳 **Portable** - This framework works accorss web and Node environments. You can use this library together with React or any other Javascript UI libraries.\n- 😵 **Tiny (\u003e2kb)** - Too much lightweight, no more large bundle sizes\n- 🤓 **Extensible** - Extend the `State` class to create your own custom state object.\n\n## Installation\n\nYou can install this package using NPM, Yarn or PNPM using the specific command.\n\n**NPM**\n\n```\nnpm i @thq/dapper\n```\n\n**Yarn**\n\n```\nyarn add @thq/dapper\n```\n\n**PNPM**\n\n```\npnpm add @thq/dapper\n```\n\n## Documentation\n\n### APIs\n\n### `State`\n\nThe `State` class is the main API that powers all of the other APIs. You can create your own custom state class by extending this one. This API introduces a whole another world of possibilities and provides more flexibility and customasibility.\n\n**Classic**\n\n```ts\nconst name = new State(10);\n\nname.onChange = newValue =\u003e {\n\tconsole.log(newValue());\n};\n```\n\n**Extended State**:\n\n```ts\nimport { State, createState } from '@thq/dapper';\n\nclass CredentialsStore extends State\u003cstring\u003e {\n\tverifyValue(value: string) {\n\t\treturn value.length \u003e 5;\n\t}\n\n\t// You can also override other methods like\n\tget() {}\n\tset() {}\n\n\tonChange = newValue =\u003e {};\n\n\t// You could also add a custom action\n\t// to organise your code.\n\tfetchData() {}\n}\n\n// you can call the actions inside your state\nconst name = createStateWith(\n\tCredentialsStore('some-name')\n);\n\nnameInstance.get();\n```\n\n#### `createState()`\n\nCreates a new `State` object and returns an instance of it. This function is just a simplified form of the `State` class. If you wanna read about the usage, you might need to checkout the [State](https://github.com/TruelinesHQ/dapper#state) API.\n\nUsage:\n\n```ts\nconst isPrivate = createState(false);\n\nisPrivate.get();\n\nisPrivate.set(true);\n```\n\n**With Initial Effect**:\n\n```ts\nconst isPrivate = createState(false);\n```\n\n#### `createStateWith()`\n\nAlternative to the `createState()` API but instead also adds support for extensibility of a custom state class. Althought the return value of this function is same as the `createState()` API, the function doesn't expect a value directly and instead the instance of the extended class. But you can pass the `initialEffect` as the second argument.\n\n```ts\nclass CustomClass\u003cT\u003e extends State\u003cT\u003e {\n\t...\n}\n\nconst state = createStateWith(\n\tnew CustomClass(...)\n);\n```\n\n### Example\n\n```ts\nimport { createState } from '@thq/dapper';\n\n/**\n * Creates a new state object and returns an array of three elements with\n * the first one as the getter and second one as the setter and the third\n * one is the instane of the state object, this might be needed in\n * scenarios when you need to use `registerEffect()` hook\n * Expects a default value in the first parameter. The secon\n * parameter is an optional initial effect callback. I\n * passes in the initial value passed in to the `createState\n * function. This was created in order to fix the\n * accessing the value before it was initialised error.\n *\n * The getter is a function, so you would you have to call it to get the\n * state.\n *\n * The setter is also a function which you need to provide a new value to\n * be passed in to the function. If the new value passed in is the same as\n * the old one is used and the new unchanged value is ignored.\n * This function is type-safe and if the new value's type is not the same\n * as the new one, it will throw an error.\n *\n * The instance is a object that has the value of the state object created\n * by registerEfffect() hook.\n */\nconst username = createState('anonymous');\n\n/**\n * Registers an hook to trigger whenever a change is made. If you need to\n * detect changes from the creation of the state, you would need to register\n * it right after creating the state. This means that the changes would only\n * be detected after this hook is registered and not from the beginning.\n * So it would improve perfomance as it would help the developer optimise\n * triggering changes according to their apps.\n *\n * The first parameter is the callback when a new value is triggered. This\n * function also passes in the new value.\n *\n * The second parameter is instance of the state object. You can get the\n * instance from the createState() hook.\n */\nusername.onChange = newValue =\u003e {\n\tconsole.log(newValue);\n};\n\n// retrieving the value from the state.\nusername.get();\n\n// setting the state, the callback inside the registerEffect() hook\n// is triggered\nusername.set('hello-world');\n```\n\n## License\n\n**dapper** is licensed under `MIT` and the copyright is owned by Haneen Mahdin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaneenmahd%2Fdapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaneenmahd%2Fdapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaneenmahd%2Fdapper/lists"}