Contexts / Environment state

[JaggerJo]

Allows controls to pass state to descendants (similar to swift UI environment objects & react contexts)

[JaggerJo]

Quite impressive how far you get with ~80 LOC which is almost the entire feature.

[JaggerJo]

@JordanMarr @sleepyfran I'm not happy with the naming and the API yet, but it works. Feedback is as always appreciated.

Describe value

Avalonia.FuncUI/src/Examples/Component Examples/Examples.EnvApp/Program.fs

Lines 15 to 19 in e2ddeba

	[<RequireQualifiedAccess>]
	module SharedState =
	let brush = EnvironmentState<IBrush>.Create "brush"
	let size = EnvironmentState<int>.Create "size"

Provide value

Avalonia.FuncUI/src/Examples/Component Examples/Examples.EnvApp/Program.fs

Lines 172 to 197 in e2ddeba

	static member main () =
	Component (fun ctx ->
	let brush = ctx.useState (Brushes.Black :> IBrush, renderOnChange = false)
	let size = ctx.useState (2, renderOnChange = false)
	EnvironmentStateProvider.create(
	state = SharedState.brush,
	providedValue = brush,
	content = (
	EnvironmentStateProvider.create(
	state = SharedState.size,
	providedValue = size,
	content = (
	DockPanel.create [
	DockPanel.lastChildFill true
	DockPanel.background Brushes.White
	DockPanel.children [
	Views.settings ()
	Views.canvas ()
	]
	]
	)
	)
	)
	)
	)

Consume value

Avalonia.FuncUI/src/Examples/Component Examples/Examples.EnvApp/Program.fs

Lines 24 to 32 in e2ddeba

	static member canvas () =
	Component.create ("canvas", fun ctx ->
	let canvasOutlet = ctx.useState (null, renderOnChange = false)
	let isPressed = ctx.useState (false, renderOnChange = false)
	let lastPoint = ctx.useState (None, renderOnChange = false)
	let brush = ctx.useEnvState (SharedState.brush, renderOnChange = false)
	let size = ctx.useEnvState (SharedState.size, renderOnChange = false)

[sleepyfran]

Looks good, although I'd maybe make the whole providing a bit more friendly by going full React. If you make the EnvironmentState contain a function that creates the Provider automatically, the providing part would end up like:

SharedState.brush.provider(
             value = brush, 
             content = (
                 ...
             )
)

Consumption-wise I think the API is okay.

I'm not a huge fan of contexts in general because they couple components with an invisible provider that makes it very hard to refactor later (going right now through a very painful transition with them in React at work, so this hits close to home 😆), and I think we have this partially solved with the store pattern that we have in some of the samples, but I also think they won't hurt and it might feel more familiar for people coming from React.

[JordanMarr]

I haven’t quite recovered from my GitHub session yesterday, but I will look at this in more detail later.

@sleepyfran I recently refactored a React app to use Fable.Store instead of useContext. What is an example of the store pattern you are referring to for FuncUI?

[sleepyfran]

@JordanMarr for example the Generic Algorithm sample declares this store:

Avalonia.FuncUI/src/Examples/Component Examples/Examples.GeneticAlgorithm/Views.fs

Lines 15 to 28 in 200bae3

	type StateStore =
	{ Random: Random
	ShowHeatMap: IWritable<bool>
	Worlds: IWritable<World list>
	Squirrels: IWritable<SimulationResult list>
	SelectedSquirrelId: IWritable<Guid option>
	SelectedSquirrel: IWritable<SimulationResult option>
	SelectedWorldResultIdx: IWritable<int>
	SelectedWorldResult: IReadable<IndividualWorldResult option>
	SelectedGameStateIdx: IWritable<int>
	SelectedGameState: IReadable<GameState option> }

Which are then used as a normal state:

Avalonia.FuncUI/src/Examples/Component Examples/Examples.GeneticAlgorithm/Views.fs

Lines 168 to 170 in 200bae3

	let showHeatMap = ctx.usePassed StateStore.shared.ShowHeatMap
	let population = ctx.usePassed StateStore.shared.Squirrels
	let selectedId = ctx.usePassed StateStore.shared.SelectedSquirrelId

I'm not familiar with Fable.Store, so not sure if they do something different, but basicaly this just creates a global state that is then shared between all components that reference it. So in order to have something similar to a context, declaring a store like this scoped to a set of components would end up being the same.

[JaggerJo]

Looks good, although I'd maybe make the whole providing a bit more friendly by going full React. If you make the EnvironmentState contain a function that creates the Provider automatically, the providing part would end up like:

SharedState.brush.provider(
             value = brush, 
             content = (
                 ...
             )
)

Consumption-wise I think the API is okay.

Good point 👍 that might be handy.

I'm not a huge fan of contexts in general because they couple components with an invisible provider that makes it very hard to refactor later (going right now through a very painful transition with them in React at work, so this hits close to home 😆), and I think we have this partially solved with the store pattern that we have in some of the samples, but I also think they won't hurt and it might feel more familiar for people coming from React.

I personally think both (global shared state & shared state via contexts) have their place.
If state only starts to exist at some point contexts make a lot of sense.

[sleepyfran]

If state only starts to exist at some point contexts make a lot of sense.

That's actually a really good point. I guess I've never had this exact use case, but it definitely makes sense to offer this out of the box.

Well, as I said, other than the provider change the rest looks all good to me. Awesome job!