Intro
Raccoon is an experimental project inspired by Vue. It's a component based reactive framework with basic functionality such as, reactivity, template engine, computed functions, dom-events, etc.
Raccoon is an experimental project inspired by Vue. It's a component based reactive framework with basic functionality such as, reactivity, template engine, computed functions, dom-events, etc.
Install Raccoon [From where?], Import it use it.
{proxy.name} or {just name} The proxy does the heavy lifting when it comes to the reactivities. It's basically an object with properties that will update the dom every-time a property changes.
Output: a = 1, b = 2
TODO: Explain when proxy.a is needed and when it's ok to use just a.
Output the computed sum
Sum in this case will be 24
This creates a button which counts up proxy.a by one on click using a function.
The funcs-function takes 2 arguments, the proxy which is magically applied by the framework and the value which in this case is passed as an argument from the @click event. In this example we are getting the value from proxy.a and then increase it by one and save it back.
This could be used with funcs too
This could be used with funcs too
An inner wrapper is required for the rendering precess.
Invalid r-for loop as inner wrapper is missing.
An r-for-key will be dynamically added to the markup which is required during the rendering process.
Most methods of deleting does not trigger the proxy set event, in other words no reactivity. Using splice is the way to delete a value and still keep the reactivity. See examples.
Adding value works works with the spread operator.
prefix with proxy is optional, above r-model could be used like this.
Having multiple components works as expected, proxies, computes, functions all works withing the component scope. Just ensure they are uniquely named as example shows. In this example proxy.a in component-1 is not the same as proxy.a in component-2.