Reducing use of ref and reactive.

[yogeshgalav]

Problem:
The new reactivity transform makes things even more confusing and hard for beginners. Instead of making things better then svelte, the community is making things hard to understand.
Use of ref and reactive is difficult to understand for beginners, hence simplification or abstraction is required for sure.

Solution:
Instead of using new properties, what if we just use $ dollar sign to represent all reactive variables.

We can transform the variable declaration (const | let | var) like below

const $variable:string|Ref = finalValue;

with something like

const $variable:string = finalValue;
const variable:Ref = ($variable typeof Ref) ? $variable : ref($variable);

And transform the variable usage like this

let newVar:Ref = $variable;
let newVarS:string = $variable;
let newVar2:number = $variable2.something;
composableFun($variable);
composableFun2($variable2.something);

with

let newVar:Ref = variable;
let newVarS:string = $variable;
let newVar2:number = variable2.value.something;
composableFun(variable);
composableFun2(variable2.value.something);

The basic idea here is to simplify most of the basic code (for beginners) and other features like ref and reactive might remain same for core part and better usage.
I love the way Vue3 code feels like normal Javascript code,
But it could be easier and more loveable with above mentioned feature.

Whole Php will not only embrace it but also may became addictive to vue.
thanks for your time to read this.

[Demivan]

And transform the variable usage like this

Not every variable usage needs to be transformed back to .value. Sometimes (often) you want to pass raw ref around.

[Demivan]

This looks like it leads to writing more code, not less.

Almost all composition functions use raw refs as inputs. And your proposal leads to duplicating variable definitions every time when you want to use them as a raw ref. This will make libraries like vueuse really inconvenient to use.

As a solution you can define a function that does conversion back from variable to ref. But now your proposal is almost the same as Reactivity Transform. But instead of using $ref you use $ in variable name.

[yogeshgalav]

Updated the discussion. Refactored my idea after the conversation.

[Demivan]

let newVar = variable;
let newVar2 = variable.value.something;
composableFun(variable);
composableFun2(variable.value.something);

This does not make sense. Why is it reactive in one instance and not in other? And how does the developer specifies that he wants variable or variable.value?

[yogeshgalav]

So the idea is to always use reactive values without use of .value,
In first instance we want "variable"(without dot) so we got it,
In second instance we want "something" without having to take care of "variable"(with dot), reactivity and .value.
In both instance we assigned what we want but has reduced the use of .value
Hence $variable should act only as syntactic sugar,
which forces beginners to always use reactive values.

[Demivan]

reactive already works like that for objects.

And how to get value from ref variable that just has a number?

const count = ref(0)

[yogeshgalav]

I got all my answers in this conversation.
Thanks to @Demivan for your valuable time.
And enlightening me.
I would like to close this discussion along with #487