{"id":22775557,"url":"https://github.com/chlbri/context-machine","last_synced_at":"2025-03-30T13:15:33.540Z","repository":{"id":47718393,"uuid":"396419467","full_name":"chlbri/context-machine","owner":"chlbri","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-12T13:35:10.000Z","size":379,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T14:50:43.167Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chlbri.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}},"created_at":"2021-08-15T16:43:13.000Z","updated_at":"2021-09-12T13:35:12.000Z","dependencies_parsed_at":"2022-09-23T17:31:55.181Z","dependency_job_id":null,"html_url":"https://github.com/chlbri/context-machine","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Fcontext-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Fcontext-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Fcontext-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Fcontext-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chlbri","download_url":"https://codeload.github.com/chlbri/context-machine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246320198,"owners_count":20758410,"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":[],"created_at":"2024-12-11T18:33:24.098Z","updated_at":"2025-03-30T13:15:33.508Z","avatar_url":"https://github.com/chlbri.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Context-Machine\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nThe most wanted thing.\n\nUse a machine across the entire app.\n\n\u003cbr/\u003e\n\n##### First,\n\n### **createContextMachine (_config_: MachineConfig, _options_ :MachineOptions)** : _React.Context_ \u003cInterpreter\u003e\n\n\u003cbr/\u003e\n\nIt will create the context and the machine as meta (_(out as any).machine = machine_)\n\nIt returns an _XState_ **Interpreter**\n\nFor the _service_ one, we omit the send, sender and state.\n\n**N.B :** At this state, the context is not modifiable. The **_Interpreter_** value resulted cannot be modifiable across many components.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n##### Optionaly,\n\n### **usePrepareContextMachine (machine:StateMachine, options?: MachineOptions )**: [state, send, service]\n\n\u003cbr/\u003e\n\nThis function is used to initialize the Context with a mutable service. It’s for more reffining.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n##### Secondly,\n\n## **MachineProvider(Context: MachineContext, children:ReactNode, options:MachineOptions)** : _JSX.Element_\n\n\u003cbr/\u003e\n\nThe Provider.\n\nYou just have to write your children. It calls the _usePrepareContextMachine_ internally.\n\n\u003cbr/\u003e\n\n_.../Wrapper.tsx_\n\n```tsx\nconst MyProvider: FC = ({ children }) =\u003e (\n  \u003cMachineProvider Context={LightContext}\u003e{children}\u003c/MachineProvider\u003e\n);\n```\n\n\u003cbr/\u003e\n\n_.../pages/\\_app.tsx_\n\n```tsx\nimport type { AppProps } from \"next/app\";\nimport Head from \"next/head\";\nimport ProviderMachine from \"../components/providers\";\nimport \"../styles/globals.css\";\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    \u003cMyProvider\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eThe best web App is Hellow World !!\u003c/title\u003e\n      \u003c/Head\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/MyProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n###### Thirdly,\n\n\u003cbr/\u003e\n\n## **useState(Context: MachineContext)** : XState _State_\n\n\u003cbr/\u003e\n\nAs the name says, It returns the current state of the machine accross all components.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## **useSend(Context: MachineContext)** : XState _send_\n\n\u003cbr/\u003e\n\nAs the name says, It returns the current state of the machine accross all components.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## **useService(Context: MachineContext)** : XState-custom _service_\n\n\u003cbr/\u003e\n\nAs the name says, It returns the service of the machine accross all components.\n\n**N.B :** We omit the _send_, _sender_ and _state_ from this service because they aren’t mutables. This is usually used for listening to events and context.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## **useContext(Context: MachineContext)** : _Entire Mutable Machine_\n\n\u003cbr/\u003e\n\nUse all of these three hooks.\n\nThe value is :\n\n```tsx\n{\n\n  state: State,\n\n  send: Sender,\n\n  service: Custom_Service,\n\n};\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## **useSelector(Context: MachineContext, selector: _StateSelector_)** : _Select \"wyw\" inside the state_\n\n\u003cbr/\u003e\n\nOnly listen to the selected value\n\nThe value is :\n\n```tsx\nconst select: useSelector(LightContext, state =\u003e state.context.elapsed);\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# And voilà!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchlbri%2Fcontext-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchlbri%2Fcontext-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchlbri%2Fcontext-machine/lists"}