{"id":13727261,"url":"https://github.com/tjkandala/baahu","last_synced_at":"2025-05-07T22:30:58.522Z","repository":{"id":42871795,"uuid":"257982438","full_name":"tjkandala/baahu","owner":"tjkandala","description":"🐘 (fast) state machine-based UI framework","archived":false,"fork":false,"pushed_at":"2023-01-06T04:02:40.000Z","size":2345,"stargazers_count":116,"open_issues_count":20,"forks_count":1,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-14T17:48:07.113Z","etag":null,"topics":["fast","framework","frontend","javascript","library","lightweight","state-machine","state-management","typescript","ui","web"],"latest_commit_sha":null,"homepage":"https://baahu.dev","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/tjkandala.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":"2020-04-22T18:11:29.000Z","updated_at":"2024-06-06T22:53:19.000Z","dependencies_parsed_at":"2023-02-05T06:46:12.319Z","dependency_job_id":null,"html_url":"https://github.com/tjkandala/baahu","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/tjkandala%2Fbaahu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjkandala%2Fbaahu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjkandala%2Fbaahu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjkandala%2Fbaahu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tjkandala","download_url":"https://codeload.github.com/tjkandala/baahu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965275,"owners_count":21832858,"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":["fast","framework","frontend","javascript","library","lightweight","state-machine","state-management","typescript","ui","web"],"created_at":"2024-08-03T01:03:46.704Z","updated_at":"2025-05-07T22:30:57.963Z","avatar_url":"https://github.com/tjkandala.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/37420160/82601152-18f2bd00-9b7d-11ea-9188-a60d70518bb5.png\" alt=\"Baahu\" width=\"550\"/\u003e\n  \u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\" style=\"border-top: 1px solid black\"\u003e\n  \u003ca href=\"https://baahu.dev/docs/introduction\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/go%20to-docs-blue\" alt=\"read the documentation\" /\u003e\n  \u003c/a\u003e\n  \u003ca href='https://coveralls.io/github/tjkandala/baahu?branch=master'\u003e\u003cimg src='https://coveralls.io/repos/github/tjkandala/baahu/badge.svg?branch=master\u0026service=github' alt='Coverage Status' /\u003e\u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/baahu/dist/baahu.cjs.production.min.js\"\u003e\n  \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/baahu/dist/baahu.cjs.production.min.js?compression=gzip\u0026label=gzip\" alt=\"gzip size\" /\u003e\n  \u003c/a\u003e \n  \u003ca href=\"https://unpkg.com/baahu/dist/baahu.cjs.production.min.js\"\u003e\n  \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/baahu/dist/baahu.cjs.production.min.js?compression=brotli\u0026label=brotli\" alt=\"brotli size\" /\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n  \u003cimg src=\"https://img.shields.io/github/languages/top/tjkandala/baahu\" alt=\"GitHub top language\" /\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/baahu\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/tjkandala/baahu\" alt=\"license\" /\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/workflow/status/tjkandala/baahu/CI\"\u003e\n\u003c/p\u003e\n\n---\n\n## What is Baahu?\n\nBaahu is a small zero-dependency [Moore machine-based](https://en.wikipedia.org/wiki/Moore_machine) UI framework for Javascript + TypeScript\n\n## Features\n\n- [Faster and smaller than major frameworks/libraries](https://baahu.dev/docs/performance) (Svelte, Preact, Vue, React, and Angular)\n- Built-in robust state management: Finite State Machines!\n- Event-driven, not change-driven/reactive\n- Built-in trie-based router \u0026 code-splitting\n- First-class TypeScript support: type-checked JSX, props, states, events.\n- [O(1) component rendering](https://baahu.dev/docs/performance#higher-level-internal-optimizations) for _all_ components, not just leaves.\n\n## Get Started\n\nEverything you need to know about Baahu is in the [docs](https://baahu.dev/docs/introduction)!\n\n[Try it out live on Code Sandbox!](https://codesandbox.io/s/hello-baahu-2zzv7?file=/src/index.tsx)\n\n## Example Components\n\nYou should read the docs, but if you want a sneak peek at what the API looks like, here a couple of example components:\n\n### Toggle\n\n```tsx\nimport { b, machine, emit } from 'baahu';\n\nconst Toggle = machine({\n  id: 'toggle',\n  initial: 'inactive',\n  context: () =\u003e ({}),\n  when: {\n    inactive: { on: { TOGGLE: { to: 'active' } } },\n    active: { on: { TOGGLE: { to: 'inactive' } } },\n  },\n  render: state =\u003e (\n    \u003cdiv\u003e\n      \u003ch3\u003e{state}\u003c/h3\u003e\n      \u003cbutton onClick={() =\u003e emit({ type: 'TOGGLE' })}\u003eToggle\u003c/button\u003e\n    \u003c/div\u003e\n  ),\n});\n```\n\n### Traffic Light\n\nA traffic light component that doesn't let you cross the street when it is red, and displays the # of times you crossed the street.\n\n[codesandbox](https://codesandbox.io/s/baahu-traffic-light-zox6c)\n\n```tsx\nimport { b, machine, emit } from 'baahu';\n\n/** returns a function that is called by baahu. emit the\n * provided event after the specified time */\nfunction delayedEmit(event, delayMS) {\n  return () =\u003e setTimeout(() =\u003e emit(event, 'light'), delayMS);\n}\n\n/**\n * you can make your own abstractions like `delayedEmit`\n * for entry/exit/\"do\" actions.\n *\n * embracing js/ts (as opposed to shipping with every\n * possible abstraction) keeps baahu fast and light!\n */\n\nconst Light = machine({\n  id: 'light',\n  initial: 'red',\n  context: () =\u003e ({\n    streetsCrossed: 0,\n  }),\n  when: {\n    red: {\n      entry: delayedEmit({ type: 'START' }, 3000),\n      on: {\n        START: {\n          to: 'green',\n        },\n        CROSS: {\n          do: () =\u003e alert('JAYWALKING'),\n        },\n      },\n    },\n    yellow: {\n      entry: delayedEmit({ type: 'STOP' }, 1500),\n      on: {\n        STOP: {\n          to: 'red',\n        },\n        CROSS: {\n          do: ctx =\u003e ctx.streetsCrossed++,\n        },\n      },\n    },\n    green: {\n      entry: delayedEmit({ type: 'SLOW_DOWN' }, 2500),\n      on: {\n        SLOW_DOWN: {\n          to: 'yellow',\n        },\n        CROSS: {\n          do: ctx =\u003e ctx.streetsCrossed++,\n        },\n      },\n    },\n  },\n  render: (state, ctx) =\u003e (\n    \u003cdiv\u003e\n      \u003ch3\u003e{state}\u003c/h3\u003e\n      {/* this is a targeted event: \n        only the machine with the specified\n        id will be checked */}\n      \u003cbutton onClick={() =\u003e emit({ type: 'CROSS' }, 'light')}\u003e\n        Cross the Street\n      \u003c/button\u003e\n      \u003cp\u003eTime(s) street crossed: {ctx.streetsCrossed}\u003c/p\u003e\n    \u003c/div\u003e\n  ),\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftjkandala%2Fbaahu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftjkandala%2Fbaahu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftjkandala%2Fbaahu/lists"}