{"id":18032340,"url":"https://github.com/dmitriz/universal-components","last_synced_at":"2026-01-19T16:32:34.668Z","repository":{"id":146747721,"uuid":"90350089","full_name":"dmitriz/universal-components","owner":"dmitriz","description":"Write UI components that work with any framework or any (virtual) dom library","archived":false,"fork":false,"pushed_at":"2017-05-06T16:58:16.000Z","size":3,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T21:46:42.573Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/dmitriz.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":"2017-05-05T07:37:39.000Z","updated_at":"2019-05-30T04:49:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"561f4809-b097-4153-bfe7-2333e4aece96","html_url":"https://github.com/dmitriz/universal-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dmitriz/universal-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Funiversal-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Funiversal-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Funiversal-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Funiversal-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitriz","download_url":"https://codeload.github.com/dmitriz/universal-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriz%2Funiversal-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28574347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T16:29:19.148Z","status":"ssl_error","status_checked_at":"2026-01-19T16:29:17.772Z","response_time":67,"last_error":"SSL_read: 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":[],"created_at":"2024-10-30T10:13:04.932Z","updated_at":"2026-01-19T16:32:34.646Z","avatar_url":"https://github.com/dmitriz.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# universal-components\nWrite UI components that work with any framework any DOM library\n\n\n## The Web has Fragmentation problem\n\nEveryone speaks about \"reusable\" UI components, yet most UI libraries are framework-specific, must be used exactly as intended, not modular, require hard configuration, fragile etc.\n\nDoes it really have to be that way and what is the alternative?\n\n\n## An Alternative from Ideal World\n\nIn an ideal world with no boundaries, all UI components are composed from small general purpose universal lego-block-style pure functions. Functions producing nodes from pure data and functions transforming nodes. You want to change the font size? Here:\n\n```js\n// data last Ramda style\nsetFontSize(size, node)\n\n// fluent style\nnode.setFontSize(size)\n```\n\nWhich are themselves derived from their universal style setter `setStyle`:\n\n```js\nsetFontSize = fontSize =\u003e node =\u003e setStyle({fontSize})\n```\n\nAnd now you never need to hard code font sizes inside your buttons!\nAll sizes and spaces should be exposed as functional parameters in the most general \n\n\nThe same goes to applying any other style.\n\nWant to set gap space between the children blocks which [semantically belongs to parent even if the CSS currently forces you to set margins onto children](https://medium.com/@taion/the-problem-with-css-in-js-circa-mid-2016-14060e69bf68), just write\n\n```js\nconst setChildrenGap = gap =\u003e node =\u003e\n    node.children.filter(notLast).setMarginRight(gap)\n```\n\nAnd done. \n\n### And frameworks? \n\nWhy should your component depend on a framework?\nThe DOM is just plain JSON node tree! \nIt looks exactly the same in any framework or no framework.\n\nWhy not keep the framework-specific element creator factories as simple parameters of your component?\n\n```js\n// use it inside React\nconst MyComp = createMyComp(React.createElement)\n\n// or Inferno\nconst MyComp = createMyComp(Inferno.createElemet)\n\n// or Mithril\nconst MyComp = createMyComp(m)\n\n// or Angular\nconst MyComp = createMyComp(Angular.createElement)\n\n// or Snabbdom\nconst MyComp = createMyComp(require('snabbdom/h'))\n\n// or nothing\nconst MyComp = createMyComp(require('hyperscript'))\n```\n\nI can't say it better than @sindresorhus about reusable modules:\nhttps://github.com/sindresorhus/ama/issues/10#issuecomment-117766328\n\nThen how about writing UI nodes or fancy UI components, styled or not, in the same way as @sindresorhus writes his modules? :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriz%2Funiversal-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitriz%2Funiversal-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriz%2Funiversal-components/lists"}