{"id":15416260,"url":"https://github.com/herber/xou","last_synced_at":"2025-04-19T14:33:16.871Z","repository":{"id":28077203,"uuid":"116154398","full_name":"herber/xou","owner":"herber","description":"⏳🚀 A rocket fast library for building component based UIs.","archived":false,"fork":false,"pushed_at":"2022-12-07T10:17:49.000Z","size":925,"stargazers_count":5,"open_issues_count":25,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T08:43:31.119Z","etag":null,"topics":["dom","dom-diffing","tagged-template-literals","ui","ui-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/herber.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":"2018-01-03T15:48:45.000Z","updated_at":"2022-12-08T08:31:03.000Z","dependencies_parsed_at":"2022-08-30T15:40:19.411Z","dependency_job_id":null,"html_url":"https://github.com/herber/xou","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/herber%2Fxou","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/herber%2Fxou/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/herber%2Fxou/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/herber%2Fxou/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/herber","download_url":"https://codeload.github.com/herber/xou/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249715121,"owners_count":21314981,"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":["dom","dom-diffing","tagged-template-literals","ui","ui-components"],"created_at":"2024-10-01T17:11:20.368Z","updated_at":"2025-04-19T14:33:16.820Z","avatar_url":"https://github.com/herber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/Jf9Bhzk.png\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A tiny \u003ci\u003elibrary\u003c/i\u003e for building simple \u003cb\u003ecomponent\u003c/b\u003e based UIs with template literals. It offers the same features as \u003ca href=\"https://github.com/maxogden/yo-yo\"\u003eyo-yo\u003c/a\u003e but is a bit smaller.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Xou is powered by \u003ca href=\"https://github.com/choojs/hyperx\"\u003ehyperx\u003c/a\u003e and \u003ca href=\"https://github.com/choojs/nanomorph\"\u003enanomorph\u003c/a\u003e.\n\u003c/p\u003e\n\n## Features\n\n- Tagged template literals\n- Diffing on real dom nodes\n- Tiny at just [4kb](https://bundlephobia.com/result?p=xou)\n\n## Install\n\n```\n$ npm install xou\n```\n\n## Usage\n\n```js\nconst xou = require('xou');\n\nconst time = xou`\u003cspan\u003eTime: ${ (new Date()).toUTCString() }\u003c/span\u003e`;\n\ndocument.body.appendChild(time);\n\nsetInterval(() =\u003e {\n  const newTime = xou`\u003cspan\u003eTime: ${ (new Date()).toUTCString() }\u003c/span\u003e`;\n  xou.update(time, newTime);\n}, 1000);\n```\n\n## API\n\n### xou\\`\\`\n\nA tagged template literal returning dom nodes\n\n#### Example\n\n```js\nconst node = xou`\u003cdiv\u003e\n  \u003ch1\u003eHello from xou\u003c/h1\u003e\n  \u003cp\u003eXou on \u003ca href=\"https://github.com/herber/xou\"\u003egithub\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e`;\n\ndocument.body.appendChild(node);\n```\n\n### xou.update(oldNode, newNode)\n\n`xou.update` diffs an old and a new dom node. The changes will be applied to `oldNode`.\n\n#### Example\n\n```js\nconst hello = xou`\u003cspan\u003eHello!\u003cbutton onclick=${ () =\u003e { update(); } }\u003eUpdate\u003c/button\u003e\u003c/span\u003e`;\n\nconst update = () =\u003e {\n  const hi = xou`\u003cspan\u003eHi!\u003c/span\u003e`;\n  xou.update(hello, hi);\n}\n\ndocument.body.appendChild(hello);\n```\n\n\u003c!-- ## Examples\n\nwebpackbin.com does not exist anymore - new examples coming soon.\n\n- [Greeting](https://www.webpackbin.com/bins/-L20tGtkIsPYlwjhliKs)\n- [Time](https://www.webpackbin.com/bins/-L1wiXzsEx4XuKe6ruPf)\n- [Input](https://www.webpackbin.com/bins/-L1wj0cRCCzTvHdWseTi)\n- [Todo list](https://www.webpackbin.com/bins/-L1wnYvBdijz8SUMzvvS) --\u003e\n\n## Other Modules\n\nThis whole thing is powered by [`hyperx`](https://github.com/choojs/hyperx) and [`nanomorph`](https://github.com/choojs/nanomorph) - two tiny but really great packages.\n\nThis module is heavily inspired by [`yo-yo`](https://github.com/maxogden/yo-yo) - `xou` is basically a smaller alternative to `yo-yo`.\n\nXou pairs really well with [`vxv`](https://github.com/herber/vxv) for styles and [`nation`](https://github.com/herber/nation) for state management.\n\n## License\n\nMIT © [Tobias Herber](http://tobihrbr.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fherber%2Fxou","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fherber%2Fxou","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fherber%2Fxou/lists"}