{"id":15888222,"url":"https://github.com/corecii/roact-template","last_synced_at":"2025-03-20T10:30:38.391Z","repository":{"id":105909267,"uuid":"494286342","full_name":"Corecii/roact-template","owner":"Corecii","description":"A runtime instance-to-Roact translator","archived":false,"fork":false,"pushed_at":"2022-05-25T05:32:23.000Z","size":850,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-17T16:11:54.805Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Lua","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/Corecii.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","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":"2022-05-20T01:50:26.000Z","updated_at":"2024-04-29T16:06:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"e0ba7554-86b2-4204-ba46-34c028e29114","html_url":"https://github.com/Corecii/roact-template","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/Corecii%2Froact-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corecii%2Froact-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corecii%2Froact-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Corecii%2Froact-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Corecii","download_url":"https://codeload.github.com/Corecii/roact-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244594788,"owners_count":20478339,"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-10-06T06:06:48.297Z","updated_at":"2025-03-20T10:30:38.385Z","avatar_url":"https://github.com/Corecii.png","language":"Lua","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Roact Template (from Instance)\n\nA library that allows you to load an instance as a Roact component at runtime\n\n[Documentation](https://corecii.github.io/roact-template/)\n\nInstall with [wally](https://wally.run):\n```toml\n# wally.toml\n[dependencies]\nRoactTemplate = \"corecii/roact-template@0.2.0\"\n```\n\nWhen API dumps become outdated, open your `wally.lock` and remove the `corecii/api-dump-static` section, then run `wally install` again.\n*(in the future, you will be able to use `wally upgrade`, but upgrade is not available yet)*\n\nYou can also use the [packaged release model](https://github.com/Corecii/roact-template/releases/latest),\nbut be aware that the internal\nAPI dump is *not* updated with every Roblox update. When using Wally, the newest API\ndump is fetched automatically on install. When using the pre-packaged model, the\nlatest API dump is *not* fetched automatically. You can download the latest API\ndump [here](https://github.com/Corecii/api-dump-static/releases/latest)\nto replace the included one with the newest version.\n\n---\n\nRoactTemplate allows you to change descendants of your template interface. You can:\n* Change descendants by their name\n* Assign descendants props and children\n* Wrap descendants in components (see `wrapped` in the docs!)\n* Select descendants to change according to a custom callback or pre-made selectors\n\n### Quick Simple Example\n\n```lua\nlocal Roact = require(game.ReplicatedStorage.Packages.Roact)\nlocal RoactTemplate = require(game.ReplicatedStorage.Packages.RoactTemplate)\n\nlocal InventoryTemplate = RoactTemplate.fromInstance(Roact, UITemplates.InventoryApp)\n\nlocal function InventoryApp(props)\n    return Roact.createElement(InventoryTemplate, {\n        WindowTitle = {\n            Text = props.category,\n        },\n        OuterFrame = {\n            Visible = props.visible,\n        },\n        Scroller = {\n            [Roact.Children] = makeInventoryItems(props.items),\n        },\n    })\nend\n```\n\n---\n\n## Notes\n\nCompared to the \"convert to Roact *code*\" approach, this allows you to easily\nedit UI in Studio even after you start programming it.\n\nRoactTemplate only replaces the *static* parts of your UI. This allows you to\nprogram the dynamic parts declaratively, while using Roblox's great built-in\neditor for the static parts.\n\nRoact is based on React, which was made for web development. Web development is\nfounded on hand-writing structure (HTML) and style (CSS) markup. Roblox, on the\nother hand, is founded on a great editor, and lacks a CSS-equivalent. Because of\nthese differences, using Roact typically involves throwing out one of Roblox's\nbiggest advantages: its editor. RoactTemplate allows you to use the editor as\nyou would before Roact existed, then program your UI declaratively using Roact.\nIt's the best of both worlds!\n\nI recommend storing your UI templates as `rbxm` or `rbxmx` files next to or as a\nchild of the code that uses the UI templates. You should ideally store each\ninterface or component as its own model so that resolving merge conflicts is easier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorecii%2Froact-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorecii%2Froact-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorecii%2Froact-template/lists"}