diff --git a/docs/tut/crash-course/2-creation.md b/docs/tut/crash-course/2-creation.md index 62f7a63..e180910 100644 --- a/docs/tut/crash-course/2-creation.md +++ b/docs/tut/crash-course/2-creation.md @@ -61,10 +61,10 @@ of explicitly typing out the class name and constructor. ```lua create "Frame" { AnchorPoint = { 0.5, 1 }, - UDim2 = { 0.5, 0, 0.5, 0} + UDim2 = { 0.5, 0, 0.5, 0 } } ``` When a property is assigned a table, Vide will inspect the type of the property being assigned to, and call that type's default `new()` constructor with the -values from the unpacked table. +unpacked values from the assigned table. diff --git a/docs/tut/crash-course/3-components.md b/docs/tut/crash-course/3-components.md index 5556f1d..ef97920 100644 --- a/docs/tut/crash-course/3-components.md +++ b/docs/tut/crash-course/3-components.md @@ -13,14 +13,22 @@ local function Button(props: { }) return create "TextButton" { BackgroundColor3 = Color3.fromRGB(50, 50, 50), - Size = UDim2.fromOffset(400, 250), + Size = UDim2.fromOffset(200, 150), Position = props.Position, Text = props.Text, Activated = props.Activated } end +``` +Above is a simple example of a button component with its background color set to +a dark grey and with a fixed size. + +A single parameter `props` is used to pass properties to the component. +Creating instances of this button component is as simple as doing the below: + +```lua local button = Button { Position = UDim2.new(), Text = "Click me!", @@ -31,11 +39,6 @@ local button = Button { } ``` -Above is a simple example of a button component with its background color set to -a dark grey and with a fixed size. - -A single parameter `props` is used to pass properties to the component. - Components allow you to *encapsulate* behavior. You can only modify the component in ways that you allow in the component. diff --git a/docs/tut/crash-course/4-source.md b/docs/tut/crash-course/4-source.md index 89e6f24..20ff4f1 100644 --- a/docs/tut/crash-course/4-source.md +++ b/docs/tut/crash-course/4-source.md @@ -25,10 +25,13 @@ count(count() + 1) -- increment source by 1 Below is an example of a stateful counter component. ```lua -local function Counter() +local function Counter(props: { Position: UDim2 }) local count = source(0) return create "TextButton" { + Position = props.Position, + Size = UDim2.new(200, 50), + Text = count, Activated = function() @@ -38,21 +41,22 @@ local function Counter() end ``` +Each call of `Counter {}` will create a new counter element, each with their own +independent count. + Vide detects when you assign a function to a property. This is known as *binding* and doing so will cause the property to *automatically* update whenever a source in that function is updated, by rerunning the function and assigning its return value. You can only bind non-event properties, otherwise the function is connected as the event callback. -You as the programmer do not have to worry about manually updating variables or -UI instances, you can just focus on defining how the data maps to UI and -everything will update when changes occur. +This allows you as the programmer to not need to manually update GUI as the state +of your program changes. You just define how the data maps to UI, and Vide's +reactive system will surgically update any properties depending on sources that +are changed. -Each call of `Counter {}` will create a new counter element, each with their own -independent count. - -Since sources are just functions, you can pass an external source to a component -like so: +Since sources are just functions, you can also pass external sources to +components like so: ```lua local function Text(p: { diff --git a/docs/tut/crash-course/7-nested-properties.md b/docs/tut/crash-course/7-nested-properties.md index 8da9d78..1a61425 100644 --- a/docs/tut/crash-course/7-nested-properties.md +++ b/docs/tut/crash-course/7-nested-properties.md @@ -82,8 +82,8 @@ type Children = { local function List(props: Children & Layout) return create "Frame" { - props.Layout, props.Children, + props.Layout, create "UIListLayout" {} } end @@ -104,17 +104,16 @@ Deeper nested properties are guaranteed to be set after shallower nested properties, this can be used to create overridable default properties. ```lua -local function CenteredList(props: Children & Layout) - return List { - Layout = { - props.Layout, +local function List(props: Children & Layout) + return create "Frame" { + props.Children, - -- can be overriden by `props.Layout` - AnchorPoint = Vector2.new(0.5, 0), - Position = UDim2.fromScale(0.5, 0) - }, + props.Layout, + -- can be overriden by `props.Layout` + AnchorPoint = Vector2.new(0.5, 0), + Position = UDim2.fromScale(0.5, 0), - Children = props.Children + create "UIListLayout" {} } end ``` diff --git a/docs/tut/crash-course/8-actions.md b/docs/tut/crash-course/8-actions.md index 1fb2659..68fb06e 100644 --- a/docs/tut/crash-course/8-actions.md +++ b/docs/tut/crash-course/8-actions.md @@ -20,9 +20,6 @@ create "TextLabel" { -- will print "test" ``` -Actions take precedence over property and child assignment, just like property -nesting. - Actions can be wrapped with functions to re-use specific behaviors. Below is an example of an action used to listen for property changes: