hakowork/vide
3
0
Fork 0
mirror of https://github.com/centau/vide.git synced 2026-08-20 14:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update css and snippets

Browse source
This commit is contained in:
alice 2024-10-28 15:54:22 +01:00
parent f7dac3f63a
commit cbce3348f2
27 changed files with 200 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -18,7 +18,7 @@ for a quick introduction to the library.
## Code sample ## Code sample
```lua ```luau
local create = vide.create local create = vide.create
local source = vide.source local source = vide.source

145
docs/.vitepress/config.ts
View file

@ -1,70 +1,75 @@
//import { defineConfig } from "vitepress" //import { defineConfig } from "vitepress"
import { withMermaid } from "vitepress-plugin-mermaid"; import { withMermaid } from "vitepress-plugin-mermaid";
import banner from "vite-plugin-banner"
// https://vitepress.dev/reference/site-config
export default withMermaid({ // https://vitepress.dev/reference/site-config
title: "Vide", export default withMermaid({
titleTemplate: ":title - A reactive UI library for Luau", title: "Vide",
description: "A reactive UI library for Luau.", titleTemplate: ":title - A reactive UI library for Luau",
base: "/vide/", description: "A reactive UI library for Luau.",
head: [["link", { rel: "icon", href: "/vide/logo.svg" }]], base: "/vide/",
head: [["link", { rel: "icon", href: "/vide/logo.svg" }]],
themeConfig: {
logo: "/logo.svg", themeConfig: {
logo: "/logo.svg",
// https://vitepress.dev/reference/default-theme-config
nav: [ search: {
{ text: "Home", link: "/" }, provider: "local"
{ text: "Tutorials", link: "/tut/crash-course/1-introduction" }, },
{ text: "API", link: "/api/reactivity-core"},
], // https://vitepress.dev/reference/default-theme-config
nav: [
sidebar: { { text: "Home", link: "/" },
"/api/": [ { text: "Tutorials", link: "/tut/crash-course/1-introduction" },
{ { text: "API", link: "/api/reactivity-core"},
text: "API", ],
items: [
{ text: "Reactivity: Core", link: "/api/reactivity-core" }, sidebar: {
{ text: "Reactivity: Utility", link: "/api/reactivity-utility" }, "/api/": [
{ text: "Reactivity: Control Flow", link: "/api/reactivity-flow" }, {
{ text: "Element Creation", link: "/api/creation" }, text: "API",
{ text: "Animation", link: "/api/animation" }, items: [
{ text: "Strict Mode", link: "/api/strict-mode" }, { text: "Reactivity: Core", link: "/api/reactivity-core" },
] { text: "Reactivity: Utility", link: "/api/reactivity-utility" },
} { text: "Reactivity: Control Flow", link: "/api/reactivity-flow" },
], { text: "Element Creation", link: "/api/creation" },
{ text: "Animation", link: "/api/animation" },
"/tut/": [ { text: "Strict Mode", link: "/api/strict-mode" },
{ ]
text: "Crash Course", }
items: [ ],
{ text: "Introduction", link: "/tut/crash-course/1-introduction" },
{ text: "Element Creation", link: "/tut/crash-course/2-creation" }, "/tut/": [
{ text: "Components", link: "/tut/crash-course/3-components" }, {
{ text: "Sources", link: "/tut/crash-course/4-source" }, text: "Crash Course",
{ text: "Effects", link: "/tut/crash-course/5-effect" }, items: [
{ text: "Scopes", link: "/tut/crash-course/6-scope" }, { text: "Introduction", link: "/tut/crash-course/1-introduction" },
{ text: "Stateful Components", link: "/tut/crash-course/7-stateful-component" }, { text: "Element Creation", link: "/tut/crash-course/2-creation" },
{ text: "Implicit Effects", link: "/tut/crash-course/8-implicit-effect" }, { text: "Components", link: "/tut/crash-course/3-components" },
{ text: "Derived Sources", link: "/tut/crash-course/9-derived-source" }, { text: "Sources", link: "/tut/crash-course/4-source" },
{ text: "Cleanup", link: "/tut/crash-course/10-cleanup" }, { text: "Effects", link: "/tut/crash-course/5-effect" },
{ text: "Control Flow", link: "/tut/crash-course/11-control-flow" }, { text: "Scopes", link: "/tut/crash-course/6-scope" },
{ text: "Actions", link: "/tut/crash-course/12-actions" }, { text: "Stateful Components", link: "/tut/crash-course/7-stateful-component" },
{ text: "Strict Mode", link: "/tut/crash-course/13-strict-mode" }, { text: "Implicit Effects", link: "/tut/crash-course/8-implicit-effect" },
{ text: "Concepts Summary", link: "/tut/crash-course/14-concepts" } { text: "Derived Sources", link: "/tut/crash-course/9-derived-source" },
] { text: "Cleanup", link: "/tut/crash-course/10-cleanup" },
}, { text: "Control Flow", link: "/tut/crash-course/11-control-flow" },
{ { text: "Actions", link: "/tut/crash-course/12-actions" },
text: "Advanced Reactivity", { text: "Strict Mode", link: "/tut/crash-course/13-strict-mode" },
items: [ { text: "Concepts Summary", link: "/tut/crash-course/14-concepts" }
{ text: "Nested Scopes", link: "/tut/advanced/nested-scoping.md"} ]
] },
} {
], text: "Advanced Reactivity",
}, items: [
{ text: "Nested Scopes", link: "/tut/advanced/nested-scoping.md"}
socialLinks: [ ]
{ icon: "github", link: "https://github.com/centau/vide" } }
] ],
} },
})
socialLinks: [
{ icon: "github", link: "https://github.com/centau/vide" }
]
}
})

9
docs/.vitepress/theme/index.js
View file

@ -1,4 +1,5 @@
// .vitepress/theme/index.js // .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme' import DefaultTheme from 'vitepress/theme'
import './vars.css' import './vars.css'
export default DefaultTheme
export default DefaultTheme

26
docs/.vitepress/theme/vars.css
View file

@ -1,3 +1,23 @@
:root { :root {
--vp-c-brand-1: #3086ff; --vp-c-brand-1: #3086ff;
}
--vp-c-bg: #f2f5f8;
--vp-c-bg-alt: #dfe8f5;
--vp-c-bg-elv: #dde7f4;
--vp-c-bg-soft: #e8f1fe;
--vp-c-border: #c0c3c6;
--vp-c-divider: #dfe2e6;
--vp-c-gutter: #dfe2e6;
}
.dark {
--vp-c-bg: #0d131b;
--vp-c-bg-alt: #111720;
--vp-c-bg-elv: #182231;
--vp-c-bg-soft: #182231;
--vp-c-border: #111720;
--vp-c-divider: #181d27;
--vp-c-gutter: #181d27;
}

2
docs/api/animation.md
View file

@ -6,7 +6,7 @@ Returns a new source with a value always moving torwards the input source value.
- **Type** - **Type**
```lua ```luau
function spring<T>( function spring<T>(
source: () -> T & Animatable, source: () -> T & Animatable,
period: number = 1, period: number = 1,

16
docs/api/creation.md
View file

@ -9,7 +9,7 @@ target instance.
- **Type** - **Type**
```lua ```luau
function mount<T>(component: () -> T, target: Instance?): () -> () function mount<T>(component: () -> T, target: Instance?): () -> ()
``` ```
@ -25,7 +25,7 @@ target instance.
- **Example** - **Example**
```lua ```luau
local function App() local function App()
return create "ScreenGui" { return create "ScreenGui" {
create "TextLabel" { Text = "Vide" } create "TextLabel" { Text = "Vide" }
@ -41,7 +41,7 @@ Creates a new UI element, applying any given properties.
- **Type** - **Type**
```lua ```luau
function create(class: string): (Properties) -> Instance function create(class: string): (Properties) -> Instance
function create(instance: Instance): (Properties) -> Instance function create(instance: Instance): (Properties) -> Instance
@ -76,7 +76,7 @@ Creates a new UI element, applying any given properties.
Basic element creation. Basic element creation.
```lua ```luau
local frame = create "Frame" { local frame = create "Frame" {
Name = "NewFrame", Name = "NewFrame",
Position = UDim2.fromScale(1, 0) Position = UDim2.fromScale(1, 0)
@ -85,7 +85,7 @@ Creates a new UI element, applying any given properties.
A component using property nesting. A component using property nesting.
```lua ```luau
type Layout = { type Layout = {
Layout = { Layout = {
Position: UDim2?, Position: UDim2?,
@ -116,7 +116,7 @@ instances.
- **Type** - **Type**
```lua ```luau
function action((Instance) -> (), priority: number = 1): Action function action((Instance) -> (), priority: number = 1): Action
``` ```
@ -133,7 +133,7 @@ instances.
An action to listen to changed properties: An action to listen to changed properties:
```lua ```luau
local function changed(property: string, callback: (new) -> ()) local function changed(property: string, callback: (new) -> ())
return action(function(instance) return action(function(instance)
local con - instance:GetPropertyChangedSignal(property):Connect(function() local con - instance:GetPropertyChangedSignal(property):Connect(function()
@ -161,7 +161,7 @@ A wrapper for `action()` to listen for property changes.
- **Type** - **Type**
```lua ```luau
function changed(property: string, callback: (...unknown) -> ()): Action function changed(property: string, callback: (...unknown) -> ()): Action
``` ```

14
docs/api/reactivity-core.md
View file

@ -13,7 +13,7 @@ Creates and runs a function in a new stable scope.
- **Type** - **Type**
```lua ```luau
function root<T...>(fn: (() -> ()) -> T...): (() -> (), T...) function root<T...>(fn: (() -> ()) -> T...): (() -> (), T...)
``` ```
@ -30,7 +30,7 @@ Creates a new source with the given value.
- **Type** - **Type**
```lua ```luau
function source<T>(value: T): Source<T> function source<T>(value: T): Source<T>
type Source<T> = type Source<T> =
@ -45,7 +45,7 @@ Creates a new source with the given value.
- **Example** - **Example**
```lua ```luau
local count = source(0) local count = source(0)
count() -- 0 count() -- 0
@ -59,7 +59,7 @@ Runs a side-effect in a new reactive scope on source update.
- **Type** - **Type**
```lua ```luau
function effect(callback: () -> ()) function effect(callback: () -> ())
``` ```
@ -72,7 +72,7 @@ Runs a side-effect in a new reactive scope on source update.
- **Example** - **Example**
```lua ```luau
local num = source(1) local num = source(1)
effect(function() effect(function()
@ -92,7 +92,7 @@ Derives a new source in a new reactive scope from existing sources.
- **Type** - **Type**
```lua ```luau
function derive<T>(source: () -> T): () -> T function derive<T>(source: () -> T): () -> T
``` ```
@ -108,7 +108,7 @@ Derives a new source in a new reactive scope from existing sources.
- **Example** - **Example**
```lua ```luau
local count = source(0) local count = source(0)
local text = derive(function() return `count: {count()}` end) local text = derive(function() return `count: {count()}` end)

14
docs/api/reactivity-flow.md
View file

@ -8,7 +8,7 @@ Shows one of two components depending on an input source.
- **Type** - **Type**
```lua ```luau
function show<T>(source: () -> unknown, component: () -> T): () -> T? function show<T>(source: () -> unknown, component: () -> T): () -> T?
function show<T, U>(source: () -> unknown, component: () -> T, fallback: () -> U): () -> T | U function show<T, U>(source: () -> unknown, component: () -> T, fallback: () -> U): () -> T | U
``` ```
@ -32,7 +32,7 @@ Shows one of a set of components depending on an input source and a mapping tabl
- **Type** - **Type**
```lua ```luau
function switch<K, V>(source: () -> K): (map: Map<K, () -> V>) -> V? function switch<K, V>(source: () -> K): (map: Map<K, () -> V>) -> V?
``` ```
@ -49,7 +49,7 @@ Shows one of a set of components depending on an input source and a mapping tabl
- **Example** - **Example**
```lua ```luau
local logged = source(false) local logged = source(false)
local button = switch(logged) { local button = switch(logged) {
@ -69,7 +69,7 @@ Maps each index in a table source to an object.
- **Type** - **Type**
```lua ```luau
function indexes<KI, VI, VO>( function indexes<KI, VI, VO>(
source: () -> Map<KI, VI>, source: () -> Map<KI, VI>,
transform: (value: () -> VI, index: KI) -> VO transform: (value: () -> VI, index: KI) -> VO
@ -102,7 +102,7 @@ Maps each index in a table source to an object.
The intended purpose of this function is to map each index in a table to The intended purpose of this function is to map each index in a table to
a UI element. a UI element.
```lua ```luau
type Item = { type Item = {
name: string, name: string,
icon: number icon: number
@ -129,7 +129,7 @@ Maps each value in a table source to an object.
- **Type** - **Type**
```lua ```luau
function values<KI, VI, VO>( function values<KI, VI, VO>(
source: () -> Map<KI, VI>, source: () -> Map<KI, VI>,
transform: (value: VI, index: () -> KI) -> VO transform: (value: VI, index: () -> KI) -> VO
@ -169,7 +169,7 @@ Maps each value in a table source to an object.
The intended purpose of this function is to map each value in a table to The intended purpose of this function is to map each value in a table to
a UI element. a UI element.
```lua ```luau
type Item = { type Item = {
name: string, name: string,
icon: number icon: number

16
docs/api/reactivity-utility.md
View file

@ -6,7 +6,7 @@ Runs a callback anytime a scope is reran or destroyed.
- **Type** - **Type**
```lua ```luau
function cleanup(callback: () -> ()) function cleanup(callback: () -> ())
function cleanup(obj: Destroyable) function cleanup(obj: Destroyable)
function cleanup(obj: Disconnectable) function cleanup(obj: Disconnectable)
@ -17,7 +17,7 @@ Runs a callback anytime a scope is reran or destroyed.
- **Example** - **Example**
```lua ```luau
local data = source(1) local data = source(1)
effect(function() effect(function()
@ -35,7 +35,7 @@ Runs a given function in a new stable scope.
- **Type** - **Type**
```lua ```luau
function untrack<T>(source: () -> T): T function untrack<T>(source: () -> T): T
``` ```
@ -46,7 +46,7 @@ Runs a given function in a new stable scope.
- **Example** - **Example**
```lua ```luau
local a = source(0) local a = source(0)
local b = source(0) local b = source(0)
@ -68,7 +68,7 @@ read can still be tracked inside a reactive scope.
- **Type** - **Type**
```lua ```luau
function read<T>(value: T | () -> T): T function read<T>(value: T | () -> T): T
``` ```
@ -79,7 +79,7 @@ trigger effects until after the function finishes running.
- **Type** - **Type**
```lua ```luau
function batch(fn: () -> ()) function batch(fn: () -> ())
``` ```
@ -96,7 +96,7 @@ Creates a new context.
- **Type** - **Type**
```lua ```luau
function context<T>(default: T): Context<T> function context<T>(default: T): Context<T>
type Context<T> = type Context<T> =
@ -113,7 +113,7 @@ Creates a new context.
- **Example** - **Example**
```lua ```luau
local theme = context() local theme = context()
local function Button() local function Button()

2
docs/api/strict-mode.md
View file

@ -2,7 +2,7 @@
Strict mode is library-wide and can get set by doing: Strict mode is library-wide and can get set by doing:
```lua ```luau
vide.strict = true vide.strict = true
``` ```

8
docs/index.md
View file

@ -11,13 +11,19 @@ hero:
alt: Vide alt: Vide
actions: actions:
- theme: brand - theme: brand
text: Tutorials text: Crash Course
link: /tut/crash-course/1-introduction link: /tut/crash-course/1-introduction
- theme: alt - theme: alt
text: API Reference text: API Reference
link: /api/reactivity-core link: /api/reactivity-core
features: features:
- title: Reactively driven
details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction
- title: Declarative and concise
details: Syntax built to be minimal while also obvious and easy to understand to anyone
- title: Fully Luau Typecheckable
details: Ensure you write correct code through the Luau typechecking engine.
- title: In Development - title: In Development
details: Not recommended for production use. details: Not recommended for production use.
--- ---

26
docs/package.json
View file

@ -1,14 +1,12 @@
{ {
"type": "module", "type": "module",
"scripts": {
"scripts": { "docs:dev": "vitepress dev",
"docs:dev": "vitepress dev", "docs:build": "vitepress build",
"docs:build": "vitepress build", "docs:preview": "vitepress preview"
"docs:preview": "vitepress preview" },
}, "devDependencies": {
"vitepress": "1.4.1",
"devDependencies": { "vitepress-plugin-mermaid": "2.0.17"
"vitepress": "1.0.0-rc.25", }
"vitepress-plugin-mermaid": "2.0.14" }
}
}

40
docs/public/logo.svg
View file

@ -1,37 +1,31 @@
<svg width="384" height="384" viewBox="8 8 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="200" height="200" viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ddd_1_134)"> <g filter="url(#filter0_ii_282_2)">
<path d="M21.4019 35.5C22.5566 37.5 25.4434 37.5 26.5981 35.5L38.4546 14.9639C39.2786 13.5367 38.1196 11.7812 36.4834 11.9783L30.3548 12.7164C28.9029 12.8913 27.6622 13.8444 27.1191 15.2021L24 23L20 13L11.5166 11.9783C9.88038 11.7812 8.72139 13.5367 9.54541 14.9639L21.4019 35.5Z" fill="url(#paint0_radial_1_134)"/> <path d="M63.659 130.625C69.1438 140.125 82.8561 140.125 88.341 130.625L144.659 33.0785C148.573 26.2993 143.068 17.9607 135.296 18.8969L106.185 22.4029C99.2887 23.2337 93.3954 27.7609 90.8157 34.21L76 71.25L57 23.75L16.7038 18.8969C8.93178 17.9607 3.42658 26.2993 7.34067 33.0785L63.659 130.625Z" fill="url(#paint0_radial_282_2)"/>
<path d="M20 13L24 23L28 33.0718C27.1412 34.5593 24.9736 34.4973 24.2012 32.9632L13.7728 12.25L20 13Z" fill="url(#paint1_radial_1_134)"/> <path d="M57 23.75L76 71.25L95 119.091C90.9207 126.157 80.6246 125.862 76.9557 118.575L27.4208 20.1875L57 23.75Z" fill="url(#paint1_radial_282_2)"/>
<path d="M38.4546 14.9639L26.5981 35.5C25.4434 37.5 22.5566 37.5 21.4019 35.5L20 33.0718L16 26.1436C17.6267 28.9319 21.7492 28.627 22.9481 25.6298L24 23L28 13L36.4834 11.9783C38.1196 11.7812 39.2786 13.5367 38.4546 14.9639Z" fill="#4896F3"/> <path d="M144.659 33.0785L88.3409 130.625C82.8561 140.125 69.1438 140.125 63.659 130.625L57 119.091L38 86.1821C45.7268 99.4265 65.3087 97.9783 71.0034 83.7416L76 71.25L95 23.75L135.296 18.8969C143.068 17.9607 148.573 26.2993 144.659 33.0785Z" fill="#4896F3"/>
</g> </g>
<defs> <defs>
<filter id="filter0_ddd_1_134" x="-4.72681" y="-0.0369511" width="61.4536" height="57.037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter0_ii_282_2" x="6.04761" y="18.8246" width="163.905" height="166.925" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="2" dy="4"/> <feOffset dx="24" dy="48"/>
<feGaussianBlur stdDeviation="8"/> <feGaussianBlur stdDeviation="96"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.12549 0 0 0 0 0.313726 0 0 0 0.2 0"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.12549 0 0 0 0 0.313726 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_134"/> <feBlend mode="normal" in2="shape" result="effect1_innerShadow_282_2"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="1" dy="2"/> <feOffset dx="12" dy="24"/>
<feGaussianBlur stdDeviation="4"/> <feGaussianBlur stdDeviation="48"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.12549 0 0 0 0 0.313726 0 0 0 0.1 0"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.12549 0 0 0 0 0.313726 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_1_134" result="effect2_dropShadow_1_134"/> <feBlend mode="normal" in2="effect1_innerShadow_282_2" result="effect2_innerShadow_282_2"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.12549 0 0 0 0 0.313726 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_1_134" result="effect3_dropShadow_1_134"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1_134" result="shape"/>
</filter> </filter>
<radialGradient id="paint0_radial_1_134" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24 39.5) rotate(-90) scale(28 32.3316)"> <radialGradient id="paint0_radial_282_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76 149.625) rotate(-90) scale(133 153.575)">
<stop stop-color="#24447F"/> <stop stop-color="#24447F"/>
<stop offset="1" stop-color="#3661A2"/> <stop offset="1" stop-color="#3661A2"/>
</radialGradient> </radialGradient>
<radialGradient id="paint1_radial_1_134" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21 12) rotate(74.3578) scale(25.9615 15.2089)"> <radialGradient id="paint1_radial_282_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(61.75 19) rotate(74.3578) scale(123.317 72.2423)">
<stop stop-color="#1D314F"/> <stop stop-color="#1D314F"/>
<stop offset="1" stop-color="#0D1A2E"/> <stop offset="1" stop-color="#0D1A2E"/>
</radialGradient> </radialGradient>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

6
docs/tut/advanced/nested-scoping.md
View file

@ -6,7 +6,7 @@ most common cases, but they do not cover all of them.
This tutorial will demonstrate how to implement a `show()` control flow function This tutorial will demonstrate how to implement a `show()` control flow function
using just sources and effects. using just sources and effects.
```lua ```luau
local mount = vide.mount local mount = vide.mount
local source = vide.source local source = vide.source
local show = vide.show local show = vide.show
@ -61,7 +61,7 @@ effect's reactive scope is destroyed whenever the show effect is rerun.
The same can be achieved without the use of `show()`: The same can be achieved without the use of `show()`:
```lua ```luau
local mount = vide.mount local mount = vide.mount
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
@ -126,7 +126,7 @@ may be rerun needlessly and recreate the counter.
Alternatively, instead of using `root()`: Alternatively, instead of using `root()`:
```lua ```luau
local mount = vide.mount local mount = vide.mount
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect

2
docs/tut/crash-course/10-cleanup.md
View file

@ -5,7 +5,7 @@ a side-effect from a source update. Vide provides a function `cleanup()` which
is used to queue a callback for the next time a reactive scope is rerun or is used to queue a callback for the next time a reactive scope is rerun or
destroyed, or when a stable scope is destroyed. destroyed, or when a stable scope is destroyed.
```lua ```luau
local root = vide.root local root = vide.root
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect

4
docs/tut/crash-course/11-control-flow.md
View file

@ -14,7 +14,7 @@ instance.
update to display the current value at that index. Each table index is given a update to display the current value at that index. Each table index is given a
single corresponding UI element. single corresponding UI element.
```lua ```luau
local list = source { local list = source {
"finish the crash course", "finish the crash course",
"star Vide's GitHub" "star Vide's GitHub"
@ -90,7 +90,7 @@ end
When you edit a table in a source, you must set that table again to actually When you edit a table in a source, you must set that table again to actually
update the source. update the source.
```lua ```luau
local src = source { 1, 2 } local src = source { 1, 2 }
local data = src() local data = src()
table.insert(data, 3) -- no effects will run table.insert(data, 3) -- no effects will run

6
docs/tut/crash-course/12-actions.md
View file

@ -3,11 +3,11 @@
Actions in Vide are special callbacks that you can pass along with properties, Actions in Vide are special callbacks that you can pass along with properties,
to run some code on an instance receiving them. to run some code on an instance receiving them.
```lua ```luau
local action = vide.action local action = vide.action
``` ```
```lua ```luau
create "TextLabel" { create "TextLabel" {
Text = "test", Text = "test",
@ -22,7 +22,7 @@ create "TextLabel" {
Actions can be wrapped with functions for reuse. Below is an example of an Actions can be wrapped with functions for reuse. Below is an example of an
action used to listen for property changes: action used to listen for property changes:
```lua ```luau
local action = vide.action local action = vide.action
local effect = vide.effect local effect = vide.effect
local cleanup = vide.cleanup local cleanup = vide.cleanup

2
docs/tut/crash-course/13-strict-mode.md
View file

@ -13,7 +13,7 @@ Strict mode will run derived sources and effects twice each time they update.
This is to help ensure that derived source computations are pure, and that any This is to help ensure that derived source computations are pure, and that any
cleanups made in derived sources or effects are done properly. cleanups made in derived sources or effects are done properly.
```lua ```luau
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect

2
docs/tut/crash-course/14-concepts.md
View file

@ -73,7 +73,7 @@ relationships between effects and the sources they depend on.
### Code ### Code
```lua ```luau
local count = source(0) local count = source(0)
root(function() root(function()

2
docs/tut/crash-course/2-creation.md
View file

@ -5,7 +5,7 @@ Instances are created using `create()`.
Parentheses `()` can be omitted when calling functions with string or Parentheses `()` can be omitted when calling functions with string or
table literals for brevity. table literals for brevity.
```lua ```luau
local create = vide.create local create = vide.create
return create "ScreenGui" { return create "ScreenGui" {

4
docs/tut/crash-course/3-components.md
View file

@ -10,7 +10,7 @@ together.
::: code-group ::: code-group
```lua [Button.luau] ```luau [Button.luau]
local create = vide.create local create = vide.create
local function Button(props: { local function Button(props: {
@ -34,7 +34,7 @@ end
return Button return Button
``` ```
```lua [Menu.luau] ```luau [Menu.luau]
local create = vide.create local create = vide.create
local Button = require(Button) local Button = require(Button)

6
docs/tut/crash-course/4-source.md
View file

@ -5,7 +5,7 @@ Vide's reactivity.
A source can be created using `source()`. A source can be created using `source()`.
```lua ```luau
local source = vide.source local source = vide.source
local count = source(0) local count = source(0)
@ -16,13 +16,13 @@ The value passed to `source()` is the initial value of the source.
The value of a source can be set by calling it with an argument, and can be read The value of a source can be set by calling it with an argument, and can be read
by calling it with no arguments. by calling it with no arguments.
```lua ```luau
count(count() + 1) -- increment count by 1 count(count() + 1) -- increment count by 1
``` ```
Sources can be *derived* by wrapping them in functions. Sources can be *derived* by wrapping them in functions.
```lua ```luau
local count = source(0) local count = source(0)
local text = function() local text = function()

4
docs/tut/crash-course/5-effect.md
View file

@ -5,7 +5,7 @@ A source and effect is analogous to a signal and connection.
Effects are created using `effect()`. Effects are created using `effect()`.
```lua ```luau
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
@ -26,7 +26,7 @@ that source is updated.
Derived sources are also tracked, it doesn't matter how deeply nested Derived sources are also tracked, it doesn't matter how deeply nested
inside a function a source is. inside a function a source is.
```lua ```luau
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect

4
docs/tut/crash-course/6-scope.md
View file

@ -22,7 +22,7 @@ destroyed, and so on. This is why all scopes must be created within another
scope, except `root()` which is used to create the initial scope that you can scope, except `root()` which is used to create the initial scope that you can
manually destroy. manually destroy.
```lua ```luau
local root = vide.root local root = vide.root
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
@ -45,7 +45,7 @@ count(1) -- prints "1"
The scope created by `root()` can be destroyed. The scope created by `root()` can be destroyed.
```lua ```luau
local function setup() local function setup()
local count = source(0) local count = source(0)

4
docs/tut/crash-course/7-stateful-component.md
View file

@ -5,7 +5,7 @@ store the data, and effects to display the data.
## Internal State ## Internal State
```lua ```luau
local create = vide.create local create = vide.create
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
@ -37,7 +37,7 @@ count source is created inside the component.
External sources can also be passed into components for them to use. External sources can also be passed into components for them to use.
```lua ```luau
local function Counter(props: { count: () -> number }) local function Counter(props: { count: () -> number })
local count = props.count local count = props.count

4
docs/tut/crash-course/8-implicit-effect.md
View file

@ -3,7 +3,7 @@
Explicitly creating effects to update properties is tedious. You can Explicitly creating effects to update properties is tedious. You can
*implicitly* create an effect to update properties instead. *implicitly* create an effect to update properties instead.
```lua ```luau
local create = vide.create local create = vide.create
local source = vide.source local source = vide.source
@ -34,7 +34,7 @@ with a number key instead of string key) can return an instance or an array of
instances. An effect is automatically created to unparent removed instances and instances. An effect is automatically created to unparent removed instances and
parent new instances on source update. parent new instances on source update.
```lua ```luau
local items = source { local items = source {
create "TextLabel" { Text = "A" } create "TextLabel" { Text = "A" }
} }

6
docs/tut/crash-course/9-derived-source.md
View file

@ -2,7 +2,7 @@
We have seen the basic way to derive a source: We have seen the basic way to derive a source:
```lua ```luau
local count = source(0) local count = source(0)
local text = function() local text = function()
@ -18,7 +18,7 @@ However, in some cases where this source could be used by multiple effects at
the same time, the function wrapping the source will needlessly rerun to convert the same time, the function wrapping the source will needlessly rerun to convert
the count into a string for each effect using it. the count into a string for each effect using it.
```lua ```luau
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
@ -39,7 +39,7 @@ To avoid this, you can use `derive()` to derive a new source instead. This will
run a function in a reactive scope only when a source used inside updated. run a function in a reactive scope only when a source used inside updated.
Reading this derived source multiple times will just return a cached result. Reading this derived source multiple times will just return a cached result.
```lua ```luau
local source = vide.source local source = vide.source
local effect = vide.effect local effect = vide.effect
local derive = vide.derive local derive = vide.derive