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
+```

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).
 

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

src/graph.luau

@@ -136,40 +136,6 @@ end
 
 local update_queue = {} :: { Node<any> }
 
--- -- runs node effects, recalculates descendants and runs descendant effects
--- local function rec<T>(node: StartNode<T>)
---     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<T>(node: StartNode<T>)
---     --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<T>(node: StartNode<T>)
     local children = node.children :: {}
     if not children then return end

src/root.luau

@@ -18,7 +18,7 @@ local function root<T>(fn: () -> T): (T, () -> ())
 
     open_scope(node)
 
-    local v = fn()
+    local ok, v = pcall(fn)
 
     close_scope()
 

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
 

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