{"id":"magicoal-nerb/mini-react-luau","name":"mini-react-luau","scope":"magicoal-nerb","platform":"roblox","description":"compact reimplementation of react. only function components","version":"0.1.2","latest":"0.1.2","versions":["0.1.0","0.1.1","0.1.2"],"license":"MIT","licenseRating":"safe","licenseCaveats":[],"licenseVerified":true,"dependencies":{},"integrity":"e7cc8237c0f3a9fa1d4569b8e417498da7455299a5f286aea8359aca5f4abdcf","likes":0,"downloads":0,"install":"forest install magicoal-nerb/mini-react-luau","url":"https://forest.dev/p/roblox/magicoal-nerb/mini-react-luau","files":"https://api.forest.dev/ai/package/roblox/magicoal-nerb/mini-react-luau/files","readme":"# [react-luau](https://react.dev/)\r\n*<b>Yet another luau reimplementation of React</b>*<br>\r\n\r\n## Features\r\n* Typed luau and autocompletion\r\n* Most of the barebones React hooks and has a Roblox renderer built-in :D\r\n\r\n## Documentation\r\n* This project aims to have parity with the official [React Documentation](https://react.dev/)\r\n* Main difference between React and react-luau is the use of tuples for hooks(this way, we don't create more tables)\r\n\r\n## Examples\r\nAlso, sorry for the really bad example, currently I'm just using it<br>\r\nfor really basic UI plugins!! This isn't a really good example but ¯\\_(ツ)_/¯\r\n\r\n```luau\r\n--!strict\r\n\r\nexport type InitialState = { clicks: number }\r\nlocal State = { clicks = 0 }\r\n\r\nlocal SomethingIdk = React.createContext(1)\r\n\r\nlocal function clickReducer(\r\n\tcurrentState: InitialState,\r\n\tnumClicks: number\r\n): InitialState\r\n\tcurrentState.clicks += numClicks\r\n\treturn currentState\r\nend\r\n\r\nlocal function laggyComponent(props, dom)\r\n\t-- Something that takes a while to do\t\r\n\tlocal children = {}\r\n\tfor i = 1, 256 do\r\n\t\tchildren[i] = React.createElement(\"TextButton\", {\r\n\t\t\tPosition = UDim2.fromOffset(0, 32 * i - 32),\r\n\t\t\tSize = UDim2.fromOffset(200, 32),\r\n\t\t\tText = `name: {props.name}, {i}`,\r\n\t\t\tTextScaled = true,\r\n\t\t\tTextColor3 = Color3.fromRGB(255, 255, 255),\r\n\r\n\t\t\t[React.event.Activated] = function(label: TextButton, object: InputObject)\r\n\t\t\t\tSomethingIdk:set(SomethingIdk:get() + 1)\r\n\t\t\tend,\r\n\t\t})\r\n\tend\r\n\r\n\treturn children\r\nend\r\n\r\nlocal laggyMemoize = React.memo(laggyComponent)\r\nreturn function(props, dom)\r\n\tlocal stuff = React.useContext(SomethingIdk)\r\n\tlocal clicks, setClicks = React.useState(0)\r\n\t\r\n\tlocal myRef: React.Ref<TextButton?> = React.useRef(nil :: TextButton?)\r\n\t\r\n\treturn {\r\n\t\tFrame = React.createElement(\"Frame\", {\r\n\t\t\tSize = UDim2.fromScale(0.25, 0.25),\r\n\t\t\tBackgroundColor3 = Color3.fromRGB(0, 0, 0),\r\n\t\t\tBackgroundTransparency = 0.5,\r\n\t\t}, {\r\n\t\t\tLabel = React.createElement(\"TextButton\", {\r\n\t\t\t\tSize = UDim2.fromScale(1, 0.5),\r\n\t\t\t\tTextScaled = true,\r\n\t\t\t\tText = `Clicked: {clicks}`,\r\n\t\t\t\t\r\n\t\t\t\t[React.ref] = myRef,\r\n\t\t\t\t[React.event.Activated] = function(label: TextButton, object: InputObject)\r\n\t\t\t\t\tsetClicks(clicks + 1)\r\n\t\t\t\tend,\r\n\t\t\t}),\r\n\t\t}),\r\n\t\t\r\n\t\tLaggy = React.createElement(\r\n\t\t\tlaggyMemoize,\r\n\t\t\t{ name = stuff }\r\n\t\t),\r\n\t}\r\nend\r\n```\r\n\r\n## Contributing\r\nCurrently, this is just a solo exploration project about UI libraries in general, so contributing can really help here!!<br>\r\nMoreover, this project isn't really stable yet, so expect alot of random bugs and missing quality of life features.<br>\r\nI'm currently trying to have close-enough parity with React while maintaining decent performance aswell.\r\n","readmeTruncated":false}