diff --git a/docs/tut/crash-course/1-introduction.md b/docs/tut/crash-course/1-introduction.md index 7376579..9436414 100644 --- a/docs/tut/crash-course/1-introduction.md +++ b/docs/tut/crash-course/1-introduction.md @@ -24,3 +24,24 @@ Some of the main focuses behind Vide's design choices: - Independence from instance lifetimes. - A powerful reactive system that can surgically update properties as a result of state changes. + +## Structure Of A Vide App + +The entry point for all Vide apps is the `root()` function. This function +sets up Vide's reactivity system and allows proper disposal of your app. It +takes and calls a function that should create your entire app, then returns the +result. + +In Vide, your app should be composed of functions, each function creates a +specific part of your app, and can be reused if needed. These functions are +called *components*. + +```lua +local function App() + return create "ScreenGui" { + create "TextLabel" { Text = "hi" } + } +end + +root(App).Parent = game.StarterGui +``` diff --git a/docs/tut/crash-course/2-creation.md b/docs/tut/crash-course/2-creation.md index e180910..2a12819 100644 --- a/docs/tut/crash-course/2-creation.md +++ b/docs/tut/crash-course/2-creation.md @@ -1,4 +1,4 @@ -# Creating UI Elements +# Creating UI Instances are created using [`create()`](../../api/creation.md#create). diff --git a/docs/tut/crash-course/3-components.md b/docs/tut/crash-course/3-components.md index ef97920..0009cf0 100644 --- a/docs/tut/crash-course/3-components.md +++ b/docs/tut/crash-course/3-components.md @@ -5,7 +5,7 @@ Components are custom-made reusable pieces of UI made from other pieces of UI. By using components you can make your application more modular and better organized. -```lua +```lua [Button.lua] local function Button(props: { Position: UDim2, Text: string, @@ -20,6 +20,27 @@ local function Button(props: { Activated = props.Activated } end + +return Button +``` + +```lua [App.lua] +local Button = require(Button) + +local function App() + return create "ScreenGui" { + Button { + Position = UDim2.fromOffset(200, 200), + Text = "click me!", + + Activated = function() + print "clickeD" + end + } + } +end + +root(App).Parent = game.StarterGui ``` Above is a simple example of a button component with its background color set to diff --git a/src/graph.luau b/src/graph.luau index 29baa5b..6015e40 100644 --- a/src/graph.luau +++ b/src/graph.luau @@ -136,40 +136,6 @@ end local update_queue = {} :: { Node } --- -- runs node effects, recalculates descendants and runs descendant effects --- local function rec(node: StartNode) --- if not node.children then return end - --- local children = node.children :: {} - --- while children[1] do --- table.insert(update_queue, children[1]) --- rec(children[1]) --- unparent(children[1]) --- end - --- table.clear(children) --- end - --- local function update(node: StartNode) --- --assert(#update_queue == 0, "update already in progress") --- -- check if recursive update --- local first = update_queue[1] == nil - --- rec(node) - --- if first then --- for _, n in next, update_queue do --- open_scope(n) -- todo --- run_cleanups(n) --- run_effect(n) --- close_scope() --- end - --- table.clear(update_queue) --- end --- end - local function update(node: StartNode) local children = node.children :: {} if not children then return end diff --git a/src/root.luau b/src/root.luau index b211518..4e5921d 100644 --- a/src/root.luau +++ b/src/root.luau @@ -18,7 +18,7 @@ local function root(fn: () -> T): (T, () -> ()) open_scope(node) - local v = fn() + local ok, v = pcall(fn) close_scope() diff --git a/test/benchmark.luau b/test/benchmark.luau index 5a2b284..59a54b5 100644 --- a/test/benchmark.luau +++ b/test/benchmark.luau @@ -1,18 +1,8 @@ local BENCH, START = require("test/testkit").benchmark() --- try prevent inlining by wrapping in a closure referencing an upvalue that --- cannot be determined at compile-time -local function NO_INLINE(fn) - local r = math.random() - return function(x) - local _ = r - fn(x) - end -end - local vide = require "src/init" -local N = 2^18 -- 262144[ +local N = 2^18 -- 262144 BENCH("create state", function() local source = vide.source @@ -153,6 +143,8 @@ BENCH("update binding", function() end) end) +N /= 1024 + BENCH("indexes() no change", function() local data = {} @@ -307,6 +299,8 @@ BENCH("values() all remove", function() end) end) +N *= 1024 + BENCH("register new cleanup", function() local cleanup = vide.cleanup diff --git a/todo.md b/todo.md index 24f6b03..c2ef0ec 100644 --- a/todo.md +++ b/todo.md @@ -8,6 +8,8 @@ - solution to nested reactivity, see: SolidJS stores - SolidJS control flow components - equality checking of derived sources +- investigate performance of wide graphs +- optimize child removal - implement from solid: - Show - Switch