urbit / shrub

An operating function (Prototype)
https://urbit.org
MIT License
29 stars 2 forks source link

Mast Sail Components #118

Closed R-JG closed 4 weeks ago

R-JG commented 1 month ago

Shrubs under mast are now sail components. This update lets you nest your UI shrubs inside of other UI shrubs using the <kid> element. For instance, if you have a diary shrub which contains text shrub children, you can write a shrub to view the text that can at once be used as the main UI representing the text shrub at its pith, and as a nested component within the diary shrub. It will exist as the same shrub in the back-end, and on the client if you have the text shrub and the diary shrub open in separate windows at the same time, the same diff is sent and applied to each.

Events which take place on nested sail components will be routed to the corresponding shrub, so you can write them in a self contained and modular way.

Only the shrubs that update are the ones that need to recompute their sail, so you can split your UI up to make it more efficient e.g. if you need to stream quick updates. To make things even more efficient, you can make a sail component static simply by not taking a rely poke and only rendering on init. You could use this for assets or large amounts of text, or you could have a static layout component as the root of your UI which has smaller dynamic ones nested in. Static components can be nested in dynamic ones and vice versa.

R-JG commented 1 month ago

Instead of a ;kid; element which takes two attributes for the renderer imp and the pith, the element tag is now the name of the renderer imp prefixed by "imp", and it takes a text node which encodes the pith of the dependency it renders, e.g. ;imp_diary-ui: pith.