gulgdev/littlebag

littlebag is a very small JavaScript framework for building interactive websites, similar in spirit to tools like React, but aiming to be one of the smallest such frameworks around. Its core functions add up to only about 340 bytes once minified and compressed, which is tiny compared to most web frameworks. The author is upfront that it is not yet ready for serious production use, but welcomes people to try it on hobby projects and contribute feedback. The framework is built around a few simple ideas. First, keeping the code as small as possible, even at the cost of writing functions in a compact, code golfed style. Second, writing pieces of a webpage, called components, as plain ordinary functions that you call directly, rather than through a special syntax. Third, avoiding extra layers where they are not needed. For example, a component just returns a regular webpage element, so you attach it to the page the same way you would with plain code, no separate setup step required. For handling changing data, littlebag encourages using simple values rather than complex objects for its reactive state, the mechanism that lets parts of the page update automatically when data changes. If you use TypeScript, a popular typed version of JavaScript, the framework will actually give you an error if you try to create a state from an object, nudging you toward simpler values. The README walks through building a small TODO list app step by step, starting from static markup, then adding checkboxes and text editing, then making the list of items update automatically as items are added or removed, and finally showing a congratulations message once every item is marked done. It links to a separate contributing guide for anyone who wants to understand the framework's internal code structure.