{"id":13525740,"url":"https://github.com/jamesbirtles/fpreact","last_synced_at":"2025-03-21T07:31:12.845Z","repository":{"id":57241306,"uuid":"106613876","full_name":"jamesbirtles/fpreact","owner":"jamesbirtles","description":"fpreact provides an alternative api for creating preact components, heavily inspired by elm.","archived":false,"fork":false,"pushed_at":"2017-10-15T14:40:51.000Z","size":24,"stargazers_count":47,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-14T18:51:03.923Z","etag":null,"topics":["preact"],"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/jamesbirtles.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":"2017-10-11T21:59:21.000Z","updated_at":"2023-07-25T12:59:04.000Z","dependencies_parsed_at":"2022-09-08T00:40:49.851Z","dependency_job_id":null,"html_url":"https://github.com/jamesbirtles/fpreact","commit_stats":null,"previous_names":["unwrittenfun/fpreact"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesbirtles%2Ffpreact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesbirtles%2Ffpreact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesbirtles%2Ffpreact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesbirtles%2Ffpreact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesbirtles","download_url":"https://codeload.github.com/jamesbirtles/fpreact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244757554,"owners_count":20505418,"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":["preact"],"created_at":"2024-08-01T06:01:21.646Z","updated_at":"2025-03-21T07:31:12.554Z","avatar_url":"https://github.com/jamesbirtles.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"# fpreact (Functional Preact)\r\nfpreact provides an alternative api for creating preact components, heavily inspired by elm. The api includes redux style state management and lends itself to functional programming, avoiding the use of `this`\r\n\r\nIt has first class TypeScript support (it's written in it!), but also works great with regular JavaScript.\r\n\r\n## Install\r\n```\r\nnpm i -S fpreact preact\r\n```\r\n\r\n## Example\r\nFind more in the `examples` folder.\r\n\r\n### TypeScript\r\n```tsx\r\nimport { h, render, component, Message } from 'fpreact';\r\n\r\nenum Msg {\r\n    UpdateName,\r\n}\r\n\r\ninterface Model {\r\n    name: string;\r\n}\r\n\r\ntype Messages = Message\u003cMsg.UpdateName, string\u003e;\r\n\r\nconst Greet = component\u003cModel, Messages\u003e({\r\n    update(model = { name: 'world' }, msg) {\r\n        switch (msg.kind) {\r\n            case Msg.UpdateName:\r\n                return { ...model, name: msg.value };\r\n        }\r\n\r\n        return model;\r\n    },\r\n\r\n    view(model, dispatch) {\r\n        return (\r\n            \u003cdiv\u003e\r\n                \u003ch1\u003eHello, {model.name}\u003c/h1\u003e\r\n                \u003clabel\u003e\r\n                    \u003cspan\u003eName:\u003c/span\u003e\r\n                    \u003cinput value={model.name} onInput={dispatch(Msg.UpdateName)} /\u003e\r\n                \u003c/label\u003e\r\n            \u003c/div\u003e\r\n        );\r\n    },\r\n});\r\n\r\nrender(\u003cGreet /\u003e, document.body);\r\n```\r\n\r\n### JavaScript (ES6 + JSX)\r\n```jsx\r\nimport { h, render, component } from 'fpreact';\r\n\r\nconst Msg = {\r\n    // You don't have to use a number here.\r\n    // You could just as easily use \"UPDATE_NAME\" or anything else if you desire,\r\n    // just make sure each item has a unique value\r\n    UpdateName: 0,\r\n};\r\n\r\nconst Greet = component({\r\n    update(model = { name: 'world' }, msg) {\r\n        switch (msg.kind) {\r\n            case Msg.UpdateName:\r\n                return { ...model, name: msg.value };\r\n        }\r\n\r\n        return model;\r\n    },\r\n\r\n    view(model, dispatch) {\r\n        return (\r\n            \u003cdiv\u003e\r\n                \u003ch1\u003eHello, {model.name}\u003c/h1\u003e\r\n                \u003clabel\u003e\r\n                    \u003cspan\u003eName:\u003c/span\u003e\r\n                    \u003cinput value={model.name} onInput={dispatch(Msg.UpdateName)} /\u003e\r\n                \u003c/label\u003e\r\n            \u003c/div\u003e\r\n        );\r\n    },\r\n});\r\n\r\nrender(\u003cGreet /\u003e, document.body);\r\n```\r\n\r\n### JavaScript (ES5)\r\n```js\r\n'use strict';\r\n\r\nvar fpreact = require('fpreact');\r\n\r\nvar Msg = {\r\n    UpdateName: 0,\r\n};\r\n\r\nvar Greet = fpreact.component({\r\n    update: function(model, msg) {\r\n        if (model == null) {\r\n            return { name: 'world' };\r\n        }\r\n\r\n        switch (msg.kind) {\r\n            case Msg.UpdateName:\r\n                return Object.assign({}, model, { name: msg.value });\r\n        }\r\n\r\n        return model;\r\n    },\r\n\r\n    view: function(model, dispatch) {\r\n        return fpreact.h(\r\n            'div',\r\n            null,\r\n            fpreact.h('h1', null, 'Hello, ', model.name),\r\n            fpreact.h(\r\n                'label',\r\n                null,\r\n                fpreact.h('span', null, 'Name:'),\r\n                fpreact.h('input', { value: model.name, onInput: dispatch(Msg.UpdateName) }),\r\n            ),\r\n        );\r\n    },\r\n});\r\n\r\nfpreact.render(fpreact.h(Greet, null), document.body);\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesbirtles%2Ffpreact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesbirtles%2Ffpreact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesbirtles%2Ffpreact/lists"}