Concepts Summary

A summary of all the concepts covered during the crash course.

Source

A source of data.

Stores a single value that can be updated by the user.

Effect

Anything that happens in reponse to a source update.

Vide has built-in functions to create effects such as

effect() - runs arbitrary user code on source update
derive() - updates a derived source on source update

Reactive Scope

A scope created by certain Vide functions where source updates can be tracked, and cleanups queued.

When a source used inside a reactive scope is updated, the reactive scope will rerun.

Reactive scopes are created by functions such as

root()
effect()
derive()

Owner

A reactive scope created within an outer reactive scope, is owned by the outer reactive scope.

When a reactive scope is re-ran or destroyed, all reactive scopes owned by it are also destroyed.

Vide does not let you create reactive scopes without owners.

Root Reactive Scope

A top-level reactive scope. These scopes are an exception to the owner rule.

Created by root(), which mount() uses internally.

A root reactive scope can be created on its own. It allows other reactive scopes to be created with an owner.

Root reactive scopes must be destroyed manually by the user, a function to do this is given by root().

A root reactive scope can be created within another reactive scope and it will not automatically be owned by that scope.

Cleanup

Cleans up the result from an effect.

Unneeded in most cases, a cleanup is arbitrary code that can be ran before a reactive scope is rerun or destroyed, so that the result from the previous run can be cleaned up. A cleanup can be queued by using cleanup() within a reactive scope.

Tracking

Reactive scopes are tracking by default, meaning sources read from within scope will be tracked.

A reactive scope can be made temporarily non-tracking within untrack(), so that any source used will be ignored. The only function that creates a nontracking reactive scope by default is root().

Reactive Graph

The combination of reactive scopes can viewed graphically, called a reactive graph. This can be a more intuitive way to think of the relationships between effects and the sources they depend on.

Code

local count = source(0)

root(function()
    local text = derive(function()
        return "count: " .. text()
    end)

    effect(function()
        print(text())
    end)
end)

Graph resulting from code

%%{init: {
    "theme": "base",
    "themeVariables": {
        "primaryColor": "#1B1B1F",
        "primaryTextColor": "#fff",
        "primaryBorderColor": "#1B1B1F",
        "lineColor": "#79B8FF",
        "tertiaryColor": "#161618",
        "tertiaryBorderColor": "#1C1C1F"
    }
}}%%

graph LR

subgraph root
    text --> effect
end

count --> text

Notes:

Since count is a source, not an effect, it can exist outside of a root reactive scope.
An update to count will cause text to rerun, which then causes effect to rerun.
When the root reactive scope is destroyed, text and effect will be destroyed alongside it, since they are owned by it. count will be untouched and future updates to count will have no effect.

3.2 KiB Raw Blame History