Communication Examples

[mibes]

Description

A set of examples to demonstrate various ways to communicate between components. These cover:

• Parent to child (through a property)
• Child to parent (through a callback)
• Grandparent to grandchildren (through a context)
• Grandchildren to grandparent (through a context with a callback)

Fixes #2197

Checklist

• I have reviewed my own code
• I have added tests

[github-actions]

Size Comparison

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
boids	169.393	169.391	-0.002	-0.001%
communication_child_to_parent	N/A	89.654	N/A	N/A
communication_grandchild_with_grandparent	N/A	104.546	N/A	N/A
communication_grandparent_to_grandchild	N/A	100.810	N/A	N/A
communication_parent_to_child	N/A	86.875	N/A	N/A
contexts	107.280	107.271	-0.009	-0.008%
counter	84.771	84.771	0	0.000%
counter_functional	85.397	85.395	-0.003	-0.003%
dyn_create_destroy_apps	87.727	87.725	-0.002	-0.002%
file_upload	99.433	99.433	0	0.000%
function_memory_game	162.710	162.705	-0.005	-0.003%
function_router	345.659	345.667	+0.008	+0.002%
function_todomvc	157.669	157.668	-0.001	-0.001%
futures	222.104	222.104	0	0.000%
game_of_life	104.965	104.965	0	0.000%
immutable	180.424	180.430	+0.006	+0.003%
inner_html	81.870	81.871	+0.001	+0.001%
js_callback	110.632	110.629	-0.003	-0.003%
keyed_list	193.426	193.428	+0.002	+0.001%
mount_point	84.553	84.555	+0.002	+0.002%
nested_list	111.890	111.893	+0.003	+0.003%
node_refs	91.753	91.752	-0.001	-0.001%
password_strength	1546.475	1546.476	+0.001	+0.000%
portals	95.329	95.322	-0.007	-0.007%
router	315.121	315.130	+0.009	+0.003%
simple_ssr	151.292	151.290	-0.002	-0.001%
ssr_router	391.170	391.077	-0.093	-0.024%
suspense	108.327	108.335	+0.008	+0.007%
timer	87.565	87.565	0	0.000%
todomvc	139.161	139.162	+0.001	+0.001%
two_apps	85.416	85.417	+0.001	+0.001%
web_worker_fib	150.426	150.418	-0.008	-0.005%
webgl	84.311	84.311	0	0.000%

✅ None of the examples has changed their size significantly.

[WorldSEnder]

I appreciate the examples. While I think much of the grandparent-with-grandchildren example is contained in the context example already, it's more easily discovered through this naming convention, so I wouldn't mind having both.

A few comments about code organization, and I'm not 100% sure how the current layout is handled by the CI and live deployment on examples.yew.rs (which doesn't have an index, but see e.g. https://examples.yew.rs/boids/)

[WorldSEnder]

I think it would be good to have a FunctionChild that shows the usage of use_context for comparison and completeness.

[mibes]

I get your point, but keeping the communication examples structurally the same helps people spot the differences between them.

The use of use_context in a functional component is demonstrated by the examples/contexts example. Maybe we can include a comment here to point this out explicitly: "See the context example for a demonstration of the use of contexts in a functional component." ?

[WorldSEnder]

Yeah a comment sounds good, I agree that a single style is easier to read.

[mibes]

I've included the comment on the use of the context in a functional component and squashed the commits.