{"id":13566931,"url":"https://github.com/grucloud/bau","last_synced_at":"2025-04-12T18:38:49.990Z","repository":{"id":173090864,"uuid":"650176154","full_name":"grucloud/bau","owner":"grucloud","description":"Reactive library and components for building web user interface","archived":false,"fork":false,"pushed_at":"2024-12-19T20:07:08.000Z","size":8167,"stargazers_count":128,"open_issues_count":6,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-04T00:06:52.653Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://grucloud.github.io/bau/bau-ui/","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/grucloud.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":"2023-06-06T14:00:28.000Z","updated_at":"2025-02-21T04:59:43.000Z","dependencies_parsed_at":"2023-10-20T16:45:57.872Z","dependency_job_id":"cfa7c8bd-57a6-44a4-9523-874f9910fa8a","html_url":"https://github.com/grucloud/bau","commit_stats":null,"previous_names":["grucloud/bau"],"tags_count":108,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grucloud%2Fbau","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grucloud%2Fbau/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grucloud%2Fbau/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grucloud%2Fbau/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grucloud","download_url":"https://codeload.github.com/grucloud/bau/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247671460,"owners_count":20976756,"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-08-01T13:02:19.869Z","updated_at":"2025-04-12T18:38:49.943Z","avatar_url":"https://github.com/grucloud.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Bau.js\n\nA Javascript library to write reactive user interface for the web under 350 lines of code.\n\nNo JSX, no templating, no virtual DOM, no compiler, just a simple way to write UI components using Javascript.\n\nBau is reactive, data mutation drives the various views binded to this data. When the data is modified, the mutation is intercepted via carefully crafted Javascript proxies, and the DOM is updated accordingly.\n\nIn addition to this core library, a set of others has been released to provide a full ecosystem:\n\n- [bau-css](./bau-css): a CSS in JS library in 33 lines of code.\n- [bau-ui](https://grucloud.github.io/bau/bau-ui): a 50+ set of themable components such as Button, Input, Tabs, Tree View, Modal, etc...\n- [bau-router](./bau-router): a router with nested route, asynchronous loading, layout. Under 0.6kB\n- [bau-kit](./examples/bau-kit): a Multi Page App starter kit, all of these features packed under 5KB, a **20X** decreased compared to the combo React/Redux/React Router/Style Component.\n- [bausaurus](https://grucloud.github.io/bau/bausaurus/): A Static Site Generator (SSG) from Markdown content.\n- [bau-astro](./bau-astro): Bau integration for [Astro](https://astro.build/), allowing to leverage the SSR implementation provided by Astro.\n\n## Bundle size\n\nLet's compare the bundle sizes thanks to [bundlephobia](https://bundlephobia.com/):\n\n![bundle size](./doc/ui-library-bundle-size.svg)\n\n## Sample code\n\nBau aims to be easy to use and its API surface consits of few functions: `tags`, `state`, `loop`, and `derive`\n\n```js\n// main.js\n// Import the library\nimport Bau from \"@grucloud/bau\";\n\n// Instantiate the library\nconst bau = Bau();\n\n// Destructure any html tags used to describe the component\nconst { button, span } = bau.tags;\n\n// Create a state containing an integer\nconst counter = bau.state(0);\n\n// Create a component defined by a function that return a real DOM node.\nfunction Counter() {\n  return span(\n    \"❤️ \",\n    counter,\n    \" \",\n    button({ onclick: () =\u003e ++counter.val }, \"👍\"),\n    button({ onclick: () =\u003e --counter.val }, \"👎\")\n  );\n}\n\n// Your html file must contain an element with the id \"app\"\ndocument.getElementById(\"app\").replaceChildren(Counter());\n```\n\n## Dependencies\n\nInstall the dependencies:\n\n```sh\nnpm install @grucloud/bau\n```\n\n## Examples\n\nHave a look at the [examples](./examples) directory to find out how to use this library.\n\nCheck out the minimalistic [hello world example](https://codesandbox.io/s/bau-helloworld-twdxl5?file=/src/index.js) on CodeSanbox\n\n## Guide\n\n- [Component pattern](./doc/BauComponent.md)\n- [Reactivity with bau.state](./doc/BauReactivity.md)\n- [Event Handling](./doc/BauEventHandling.md)\n- [Conditional Rendering](./doc/BauConditionalRendering.md)\n- [Lifecycle Methods: bauCreated, bauMounted, bauUnmounted](./doc/BauLifecycle.md)\n- [Create a state array and display views](./doc/BauStateArray.md)\n- [State Derivation and Side Effects](./doc/BauDerive.md)\n- [Hash based router](./doc/BauRouting.md)\n\n## Benchmark\n\nBau has been benchmarked against other thanks to the project [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark),\nIt scores very well on most use cases, see prelimanary results [here](https://github.com/krausest/js-framework-benchmark/pull/1271)\n\nThe Chrome Lighthouse perfomance tool reports an overall 100% score even for an app built with all Bau UI components.\n\n![bau lighthouse](https://user-images.githubusercontent.com/4118089/248206941-b3a3bb7f-1502-498d-988f-635cf65bfdbc.png)\n\n## Typescript\n\nThe Bau ecosystem exports Typescript definition files allowing to improve the Developer's eXperience. Enjoy the code completion with VS Code or your favorite IDE, which is obviously VS Code.\n\n## Contribution\n\nPlease report bugs and suggestions to https://github.com/grucloud/bau\n\n## History\n\nBau is mostly inspired by [van.js](https://vanjs.org/), with the following differences:\n\n- Van.js only support primitive value as state, Bau state management also supports array and object.\n- Bau supports lifecycle methods such as **bauCreated**, **bauMounted** and **bauUnmounted**\n- Bau does not use a global variable, multiple instances of Bau could eventually be created.\n\n```js\nimport Bau from \"@grucloud/bau\";\nconst bau = Bau();\nconst { div } = bau.tags;\n```\n\n- Bau reactive functions can return an array of elements, the equivalent of a React Fragment.\n- Bau promotes only one paradigm: views derive from the state. Van could mix paradigms, imperative and state derived view. The imperative way is when your code directly maniplates the DOM, in the same way as vanilla js and jquery. This style of programming is error prone, therefore, preventing its use makes bau _hard to misuse_\n- Bau supports undefined or null attribute, see [issue 39](https://github.com/vanjs-org/van/pull/39)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrucloud%2Fbau","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrucloud%2Fbau","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrucloud%2Fbau/lists"}