chore: tweak effect docs

[Rich-Harris]

Alternative to #10750. We really do need to get rid of the first example, it's very strange — no clue is given as to why value_uppercase isn't just a $derived value (though if it was then it would be duplicative with the example directly above), and it suggests a rewrite that might not be possible.

The second example is also a bit confusing to my eyes — it's rather contrived, and a variable name like facade offers no hint as to the intent behind it. This PR replaces it with one that feels a bit more approachable to me

[changeset-bot]

⚠️ No Changeset found

Latest commit: f92d59f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dummdidumm]

I agree that the example is bad, but we can't get rid of it - it's the most common better solution. Most of the time you have both the parent and child component under your control and then think you need to use bind: everywhere because it's somehow more Svelte-y. The example is meant to show that in most cases it's better to separate the flow into a value and event handler instead. We need this in the docs, but I agree we need it presented differently.

[Rich-Harris]

Any suggestions?

[dummdidumm]

Suggested change

You might be tempted to do something convoluted with effects to link one value to another. Don't do this ([demo](/#H4sIAAAAAAAAE5WS8UrDMBDGX-UI-yN1ujlFkG4dyKAvYf2jSy8YaNOSXKej9J18Bp_MJG1xThElULgvX-77Hb2OSVWiZfFjx3ReIYvZQ9OwS0bHxhf2gCWhq23dGuGVjRVGNbTNdEYlEghIYGYpJ-TX0XpS5bk66aaudu5O5qXF9amanqpOn6GUKIjzCJItdF7KSNTaEhzyskVnv72BOXABF7Ba3A_Z7oSvksBDVjQ9zeh7tj8GqTV6LPvTHhMVmXay-7HmIX5BdapeseCrIbiP_s7NJVw5-AiWHvxH7vSMO_0n9-4rt_ide7P8_Kl6o3TTEvgFSDKm22qPJmOwV7qIQ4ukEz0st_D-5lL-5JejPw39LR1LDPszvBwHfVEFPcdwh9UAFrBGq1vAqi6UVFiw2M_VP_UfNJIG1bsCAAA=)):

You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for Fahrenheit and Celsius that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/#H4sIAAAAAAAAE5WS8UrDMBDGX-UI-yN1ujlFkG4dyKAvYf2jSy8YaNOSXKej9J18Bp_MJG1xThElULgvX-77Hb2OSVWiZfFjx3ReIYvZQ9OwS0bHxhf2gCWhq23dGuGVjRVGNbTNdEYlEghIYGYpJ-TX0XpS5bk66aaudu5O5qXF9amanqpOn6GUKIjzCJItdF7KSNTaEhzyskVnv72BOXABF7Ba3A_Z7oSvksBDVjQ9zeh7tj8GqTV6LPvTHhMVmXay-7HmIX5BdapeseCrIbiP_s7NJVw5-AiWHvxH7vSMO_0n9-4rt_ide7P8_Kl6o3TTEvgFSDKm22qPJmOwV7qIQ4ukEz0st_D-5lL-5JejPw39LR1LDPszvBwHfVEFPcdwh9UAFrBGq1vAqi6UVFiw2M_VP_UfNJIG1bsCAAA=)):

[dummdidumm]

Suggested change

If you need to use bindings, for whatever reason, consider using this pattern to synchronise state ([demo](/#H4sIAAAAAAAAE5VRQW7DIBD8CkI9JFIau4deiB2p7yg9kHhtIWGMYG3Fsvh7ARs3qnrpCWZGM8MuC22lAkfZ50K16IEy-mEMPVGcTQRuAoUQsBtGe49M5e5WGrxyzVEBEhxQKFKTt7K8ZM4Z0Bi4F4cC4VAeo7JpCtooLRFz7AIzCTXC4ZgpjhZwtHpLfl3TLqvoT-vpdt_0ZMy92TllVzx8AFXx83pdKXEDlQappDZjmCUMXXNqhe6AU3KTumGppV5StCe9eNRLivekSNZNKTKbYGza0_9XFPdzTvc_257kvTJyvxodzgrWP4pkXlEjnVFiZqRV8NiW0wnDSHl-hz4RPm0p2cO390MjWwkNZWhD5Zf_BkCCa6AxAgAA)):

If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/#H4sIAAAAAAAAE5VRQW7DIBD8CkI9JFIau4deiB2p7yg9kHhtIWGMYG3Fsvh7ARs3qnrpCWZGM8MuC22lAkfZ50K16IEy-mEMPVGcTQRuAoUQsBtGe49M5e5WGrxyzVEBEhxQKFKTt7K8ZM4Z0Bi4F4cC4VAeo7JpCtooLRFz7AIzCTXC4ZgpjhZwtHpLfl3TLqvoT-vpdt_0ZMy92TllVzx8AFXx83pdKXEDlQappDZjmCUMXXNqhe6AU3KTumGppV5StCe9eNRLivekSNZNKTKbYGza0_9XFPdzTvc_257kvTJyvxodzgrWP4pkXlEjnVFiZqRV8NiW0wnDSHl-hz4RPm0p2cO390MjWwkNZWhD5Zf_BkCCa6AxAgAA)):

[dummdidumm]

The second example with getters/setters feels easier to grasp - should we use that for the effects vs events example, too?

[Rich-Harris]

I preferred the previous example because it showed much more clearly why callbacks are superior — the effect-based solution to spent/left works because no infinite loop is created. As soon as you're dealing with non-primitives, that ceases to be the case.

Also, there's a typo — left.value rather than left.

Can we revisit this?