diff --git a/README.md b/README.md index 8ce077b..13e41b6 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ for a quick introduction to the library. ## Code sample -```lua +```luau local create = vide.create local source = vide.source diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 7708fdf..ee843b8 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,70 +1,86 @@ -//import { defineConfig } from "vitepress" -import { withMermaid } from "vitepress-plugin-mermaid"; - -// https://vitepress.dev/reference/site-config -export default withMermaid({ - title: "Vide", - titleTemplate: ":title - A reactive UI library for Luau", - description: "A reactive UI library for Luau.", - base: "/vide/", - head: [["link", { rel: "icon", href: "/vide/logo.svg" }]], - - themeConfig: { - logo: "/logo.svg", - - // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: "Home", link: "/" }, - { text: "Tutorials", link: "/tut/crash-course/1-introduction" }, - { text: "API", link: "/api/reactivity-core"}, - ], - - sidebar: { - "/api/": [ - { - text: "API", - items: [ - { 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" }, - { text: "Strict Mode", link: "/api/strict-mode" }, - ] - } - ], - - "/tut/": [ - { - text: "Crash Course", - items: [ - { text: "Introduction", link: "/tut/crash-course/1-introduction" }, - { text: "Element Creation", link: "/tut/crash-course/2-creation" }, - { text: "Components", link: "/tut/crash-course/3-components" }, - { text: "Sources", link: "/tut/crash-course/4-source" }, - { text: "Effects", link: "/tut/crash-course/5-effect" }, - { text: "Scopes", link: "/tut/crash-course/6-scope" }, - { text: "Stateful Components", link: "/tut/crash-course/7-stateful-component" }, - { text: "Implicit Effects", link: "/tut/crash-course/8-implicit-effect" }, - { 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: "Strict Mode", link: "/tut/crash-course/13-strict-mode" }, - { text: "Concepts Summary", link: "/tut/crash-course/14-concepts" } - ] - }, - { - text: "Advanced Reactivity", - items: [ - { text: "Nested Scopes", link: "/tut/advanced/nested-scoping.md"} - ] - } - ], - }, - - socialLinks: [ - { icon: "github", link: "https://github.com/centau/vide" } - ] - } -}) +//import { defineConfig } from "vitepress" +import { withMermaid } from "vitepress-plugin-mermaid"; +import { tabsMarkdownPlugin } from "vitepress-plugin-tabs" + +// https://vitepress.dev/reference/site-config +export default withMermaid({ + title: "Vide", + titleTemplate: ":title - A reactive UI library for Luau", + description: "A reactive UI library for Luau.", + base: "/vide/", + head: [["link", { rel: "icon", href: "/vide/logo.svg" }]], + + markdown: { + config(md) { + md.use(tabsMarkdownPlugin) + } + }, + + themeConfig: { + logo: "/logo.svg", + + search: { + provider: "local" + }, + + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2023-present centau' + }, + + // https://vitepress.dev/reference/default-theme-config + nav: [ + { text: "Home", link: "/" }, + { text: "Tutorials", link: "/tut/crash-course/1-introduction" }, + { text: "API", link: "/api/reactivity-core"}, + ], + + sidebar: { + "/api/": [ + { + text: "API", + items: [ + { 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" }, + { text: "Strict Mode", link: "/api/strict-mode" }, + ] + } + ], + + "/tut/": [ + { + text: "Crash Course", + items: [ + { text: "Introduction", link: "/tut/crash-course/1-introduction" }, + { text: "Element Creation", link: "/tut/crash-course/2-creation" }, + { text: "Components", link: "/tut/crash-course/3-components" }, + { text: "Sources", link: "/tut/crash-course/4-source" }, + { text: "Effects", link: "/tut/crash-course/5-effect" }, + { text: "Scopes", link: "/tut/crash-course/6-scope" }, + { text: "Stateful Components", link: "/tut/crash-course/7-stateful-component" }, + { text: "Implicit Effects", link: "/tut/crash-course/8-implicit-effect" }, + { 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: "Strict Mode", link: "/tut/crash-course/13-strict-mode" }, + { text: "Concepts Summary", link: "/tut/crash-course/14-concepts" } + ] + }, + { + text: "Advanced Reactivity", + items: [ + { text: "Nested Scopes", link: "/tut/advanced/nested-scoping.md"} + ] + } + ], + }, + + socialLinks: [ + { icon: "github", link: "https://github.com/centau/vide" } + ] + } +}) diff --git a/docs/.vitepress/theme/home.css b/docs/.vitepress/theme/home.css new file mode 100644 index 0000000..e1d17f1 --- /dev/null +++ b/docs/.vitepress/theme/home.css @@ -0,0 +1,18 @@ +.home > * > .plugin-tabs--tab-list { + background-color: var(--vp-c-bg-alt); +} + +.home > * > .VPNavBar:not(.top) { + backdrop-filter: blur(0.5rem); + background-color: transparent !important; +} + +.home > * > .VPNavBar > .divider { + opacity: 0; +} + +.home > .VPContent { + display: flex; + justify-content: center; + flex-direction: column; +} \ No newline at end of file diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index b8b9aa6..636d7fc 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,4 +1,14 @@ -// .vitepress/theme/index.js -import DefaultTheme from 'vitepress/theme' -import './vars.css' -export default DefaultTheme +// .vitepress/theme/index.js +import DefaultTheme from 'vitepress/theme' +import layout from './layout.vue' +import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client' +import './vars.css' +import './home.css' + +export default { + extends: DefaultTheme, + enhanceApp({ app }) { + enhanceAppWithTabs(app) + }, + Layout: layout +} \ No newline at end of file diff --git a/docs/.vitepress/theme/layout.vue b/docs/.vitepress/theme/layout.vue new file mode 100644 index 0000000..a0e527d --- /dev/null +++ b/docs/.vitepress/theme/layout.vue @@ -0,0 +1,16 @@ + + + + \ No newline at end of file diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 64df54f..cad99da 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,3 +1,176 @@ -:root { - --vp-c-brand-1: #3086ff; -} +/* Banner Stuff */ + +.banner { + background-color: var(--vp-button-brand-bg); + color: var(--vp-button-brand-text); + width: 100%; + text-align: center; + position: fixed; + bottom: 0px; + z-index: 50; +} + +.advertising { + margin: auto; +} + +@media only screen and (min-width: 768px) { + .advertising { + width: calc(100% - 8rem); + } +} + +@media only screen and (min-width: 960px) { + .banner { + position: fixed; + margin-top: var(--vp-nav-height); + bottom: auto; + } + #VPSidebarNav { + margin-top: 1.5rem; + } + .VPLocalNav { + top: calc(var(--vp-nav-height) + 1.5rem) !important; + } +} + +/* Colors */ + +:root { + --vp-c-brand-1: #3086ff; + --vp-c-brand-2: #75aeff; + + --vp-button-brand-bg: #3661a2; + --vp-button-brand-hover-bg: #24447f; + --vp-button-brand-press-bg: #4896f3; + + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient( + 120deg, + #3661a2, + #4896f3 + ); + --vp-home-hero-logo-background: -webkit-linear-gradient( + 120deg, + #3661a2, + #4896f3 + ); + + --vp-home-hero-image-filter: blur(96px); + + --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; + --vp-plugin-tabs-tab-bg: var(--vp-c-bg); +} + +.dark { + --vp-c-brand-2: #234782; + --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: #1d273c; + --vp-c-gutter: #181d27; +} + +/* Fonts */ + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold-Italic.woff") + format("woff"); + font-weight: 700; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold.woff") + format("woff"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold-Italic.woff") + format("woff"); + font-weight: 800; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold.woff") + format("woff"); + font-weight: 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Italic.woff") + format("woff"); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium-Italic.woff") + format("woff"); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium.woff") + format("woff"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") + format("woff2"), + url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff") + format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +:root { + --vp-font-family-mono: "JetBrains Mono"; +} diff --git a/docs/api/animation.md b/docs/api/animation.md index 6481cc3..9f3b805 100644 --- a/docs/api/animation.md +++ b/docs/api/animation.md @@ -6,7 +6,7 @@ Returns a new source with a value always moving torwards the input source value. - **Type** - ```lua + ```luau function spring( source: () -> T & Animatable, period: number = 1, diff --git a/docs/api/creation.md b/docs/api/creation.md index 539967d..528b4fb 100644 --- a/docs/api/creation.md +++ b/docs/api/creation.md @@ -9,7 +9,7 @@ target instance. - **Type** - ```lua + ```luau function mount(component: () -> T, target: Instance?): () -> () ``` @@ -25,7 +25,7 @@ target instance. - **Example** - ```lua + ```luau local function App() return create "ScreenGui" { create "TextLabel" { Text = "Vide" } @@ -41,7 +41,7 @@ Creates a new UI element, applying any given properties. - **Type** - ```lua + ```luau function create(class: string): (Properties) -> Instance function create(instance: Instance): (Properties) -> Instance @@ -76,7 +76,7 @@ Creates a new UI element, applying any given properties. Basic element creation. - ```lua + ```luau local frame = create "Frame" { Name = "NewFrame", Position = UDim2.fromScale(1, 0) @@ -85,7 +85,7 @@ Creates a new UI element, applying any given properties. A component using property nesting. - ```lua + ```luau type Layout = { Layout = { Position: UDim2?, @@ -116,7 +116,7 @@ instances. - **Type** - ```lua + ```luau function action((Instance) -> (), priority: number = 1): Action ``` @@ -133,7 +133,7 @@ instances. An action to listen to changed properties: - ```lua + ```luau local function changed(property: string, callback: (new) -> ()) return action(function(instance) local con - instance:GetPropertyChangedSignal(property):Connect(function() @@ -161,7 +161,7 @@ A wrapper for `action()` to listen for property changes. - **Type** - ```lua + ```luau function changed(property: string, callback: (...unknown) -> ()): Action ``` diff --git a/docs/api/reactivity-core.md b/docs/api/reactivity-core.md index 861e0e1..b68911c 100644 --- a/docs/api/reactivity-core.md +++ b/docs/api/reactivity-core.md @@ -13,7 +13,7 @@ Creates and runs a function in a new stable scope. - **Type** - ```lua + ```luau function root(fn: (() -> ()) -> T...): (() -> (), T...) ``` @@ -30,7 +30,7 @@ Creates a new source with the given value. - **Type** - ```lua + ```luau function source(value: T): Source type Source = @@ -45,7 +45,7 @@ Creates a new source with the given value. - **Example** - ```lua + ```luau local count = source(0) count() -- 0 @@ -59,7 +59,7 @@ Runs a side-effect in a new reactive scope on source update. - **Type** - ```lua + ```luau function effect(callback: () -> ()) ``` @@ -72,7 +72,7 @@ Runs a side-effect in a new reactive scope on source update. - **Example** - ```lua + ```luau local num = source(1) effect(function() @@ -92,7 +92,7 @@ Derives a new source in a new reactive scope from existing sources. - **Type** - ```lua + ```luau function derive(source: () -> T): () -> T ``` @@ -108,7 +108,7 @@ Derives a new source in a new reactive scope from existing sources. - **Example** - ```lua + ```luau local count = source(0) local text = derive(function() return `count: {count()}` end) diff --git a/docs/api/reactivity-flow.md b/docs/api/reactivity-flow.md index 6870367..03aea97 100644 --- a/docs/api/reactivity-flow.md +++ b/docs/api/reactivity-flow.md @@ -8,7 +8,7 @@ Shows one of two components depending on an input source. - **Type** - ```lua + ```luau function show(source: () -> unknown, component: () -> T): () -> T? function show(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** - ```lua + ```luau function switch(source: () -> K): (map: Map V>) -> V? ``` @@ -49,7 +49,7 @@ Shows one of a set of components depending on an input source and a mapping tabl - **Example** - ```lua + ```luau local logged = source(false) local button = switch(logged) { @@ -69,7 +69,7 @@ Maps each index in a table source to an object. - **Type** - ```lua + ```luau function indexes( source: () -> Map, 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 a UI element. - ```lua + ```luau type Item = { name: string, icon: number @@ -129,7 +129,7 @@ Maps each value in a table source to an object. - **Type** - ```lua + ```luau function values( source: () -> Map, 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 a UI element. - ```lua + ```luau type Item = { name: string, icon: number diff --git a/docs/api/reactivity-utility.md b/docs/api/reactivity-utility.md index 824fe35..6f719e1 100644 --- a/docs/api/reactivity-utility.md +++ b/docs/api/reactivity-utility.md @@ -6,7 +6,7 @@ Runs a callback anytime a scope is reran or destroyed. - **Type** - ```lua + ```luau function cleanup(callback: () -> ()) function cleanup(obj: Destroyable) function cleanup(obj: Disconnectable) @@ -17,7 +17,7 @@ Runs a callback anytime a scope is reran or destroyed. - **Example** - ```lua + ```luau local data = source(1) effect(function() @@ -35,7 +35,7 @@ Runs a given function in a new stable scope. - **Type** - ```lua + ```luau function untrack(source: () -> T): T ``` @@ -46,7 +46,7 @@ Runs a given function in a new stable scope. - **Example** - ```lua + ```luau local a = source(0) local b = source(0) @@ -68,7 +68,7 @@ read can still be tracked inside a reactive scope. - **Type** - ```lua + ```luau function read(value: T | () -> T): T ``` @@ -79,7 +79,7 @@ trigger effects until after the function finishes running. - **Type** - ```lua + ```luau function batch(fn: () -> ()) ``` @@ -96,7 +96,7 @@ Creates a new context. - **Type** - ```lua + ```luau function context(default: T): Context type Context = @@ -113,7 +113,7 @@ Creates a new context. - **Example** - ```lua + ```luau local theme = context() local function Button() diff --git a/docs/api/strict-mode.md b/docs/api/strict-mode.md index 570108b..b3cae5b 100644 --- a/docs/api/strict-mode.md +++ b/docs/api/strict-mode.md @@ -2,7 +2,7 @@ Strict mode is library-wide and can get set by doing: -```lua +```luau vide.strict = true ``` diff --git a/docs/index.md b/docs/index.md index 6fe3a4a..97d2c33 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,24 +1,32 @@ --- # https://vitepress.dev/reference/default-theme-home-page layout: home +pageClass: home +next: + text: 'Introduction' + link: '/tut/crash-course/1-introduction' hero: - name: Vide - text: "" - tagline: A reactive UI library for Luau. + name: "Vide" + tagline: A reactive UI and state library for Luau. image: src: /logo.svg - alt: Vide actions: - theme: brand - text: Tutorials + text: What is Vide? link: /tut/crash-course/1-introduction + - theme: alt + text: Crash Course + link: /tut/crash-course/2-creation - theme: alt text: API Reference link: /api/reactivity-core features: - - title: In Development - details: Not recommended for production use. + - title: Reactive State Management + details: Built upon Solid and makes building reactive applications simple. + - title: Declarative and simple + details: Syntax designed to be minimal while also being easy to understand. + - title: Fully Luau typecheckable + details: Luau's typechecker catches type errors before you even begin testing. --- - diff --git a/docs/package.json b/docs/package.json index 5dce993..5d16f6b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,14 +1,13 @@ -{ - "type": "module", - - "scripts": { - "docs:dev": "vitepress dev", - "docs:build": "vitepress build", - "docs:preview": "vitepress preview" - }, - - "devDependencies": { - "vitepress": "1.0.0-rc.25", - "vitepress-plugin-mermaid": "2.0.14" - } -} +{ + "type": "module", + "scripts": { + "docs:dev": "vitepress dev", + "docs:build": "vitepress build", + "docs:preview": "vitepress preview" + }, + "devDependencies": { + "vitepress": "1.4.1", + "vitepress-plugin-mermaid": "2.0.17", + "vitepress-plugin-tabs": "^0.5.0" + } +} diff --git a/docs/public/full_logo.svg b/docs/public/full_logo.svg index 85488e0..1962800 100644 --- a/docs/public/full_logo.svg +++ b/docs/public/full_logo.svg @@ -1,4 +1,4 @@ - + diff --git a/docs/public/logo.svg b/docs/public/logo.svg index 92b06c1..22d840a 100644 --- a/docs/public/logo.svg +++ b/docs/public/logo.svg @@ -1,37 +1,31 @@ - - - - - + + + + + - + + - - - + + + - + - - - + + + - - - - - - - - + - + - + diff --git a/docs/tut/advanced/nested-scoping.md b/docs/tut/advanced/nested-scoping.md index c5e6b4b..0542ccc 100644 --- a/docs/tut/advanced/nested-scoping.md +++ b/docs/tut/advanced/nested-scoping.md @@ -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 using just sources and effects. -```lua +```luau local mount = vide.mount local source = vide.source 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()`: -```lua +```luau local mount = vide.mount local source = vide.source local effect = vide.effect @@ -126,7 +126,7 @@ may be rerun needlessly and recreate the counter. Alternatively, instead of using `root()`: -```lua +```luau local mount = vide.mount local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/10-cleanup.md b/docs/tut/crash-course/10-cleanup.md index f6ca5f3..e498c23 100644 --- a/docs/tut/crash-course/10-cleanup.md +++ b/docs/tut/crash-course/10-cleanup.md @@ -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 destroyed, or when a stable scope is destroyed. -```lua +```luau local root = vide.root local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/11-control-flow.md b/docs/tut/crash-course/11-control-flow.md index b206915..298ce93 100644 --- a/docs/tut/crash-course/11-control-flow.md +++ b/docs/tut/crash-course/11-control-flow.md @@ -14,7 +14,7 @@ instance. update to display the current value at that index. Each table index is given a single corresponding UI element. -```lua +```luau local list = source { "finish the crash course", "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 update the source. -```lua +```luau local src = source { 1, 2 } local data = src() table.insert(data, 3) -- no effects will run diff --git a/docs/tut/crash-course/12-actions.md b/docs/tut/crash-course/12-actions.md index 176c12e..64d3fce 100644 --- a/docs/tut/crash-course/12-actions.md +++ b/docs/tut/crash-course/12-actions.md @@ -3,11 +3,11 @@ Actions in Vide are special callbacks that you can pass along with properties, to run some code on an instance receiving them. -```lua +```luau local action = vide.action ``` -```lua +```luau create "TextLabel" { Text = "test", @@ -22,7 +22,7 @@ create "TextLabel" { Actions can be wrapped with functions for reuse. Below is an example of an action used to listen for property changes: -```lua +```luau local action = vide.action local effect = vide.effect local cleanup = vide.cleanup diff --git a/docs/tut/crash-course/13-strict-mode.md b/docs/tut/crash-course/13-strict-mode.md index 6efa1c3..f2b30fe 100644 --- a/docs/tut/crash-course/13-strict-mode.md +++ b/docs/tut/crash-course/13-strict-mode.md @@ -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 cleanups made in derived sources or effects are done properly. -```lua +```luau local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/14-concepts.md b/docs/tut/crash-course/14-concepts.md index 24ca703..77e9e7f 100644 --- a/docs/tut/crash-course/14-concepts.md +++ b/docs/tut/crash-course/14-concepts.md @@ -73,7 +73,7 @@ relationships between effects and the sources they depend on. ### Code -```lua +```luau local count = source(0) root(function() diff --git a/docs/tut/crash-course/2-creation.md b/docs/tut/crash-course/2-creation.md index 5e76173..668a470 100644 --- a/docs/tut/crash-course/2-creation.md +++ b/docs/tut/crash-course/2-creation.md @@ -5,7 +5,7 @@ Instances are created using `create()`. Parentheses `()` can be omitted when calling functions with string or table literals for brevity. -```lua +```luau local create = vide.create return create "ScreenGui" { diff --git a/docs/tut/crash-course/3-components.md b/docs/tut/crash-course/3-components.md index 8e5890f..0b803ca 100644 --- a/docs/tut/crash-course/3-components.md +++ b/docs/tut/crash-course/3-components.md @@ -10,7 +10,7 @@ together. ::: code-group -```lua [Button.luau] +```luau [Button.luau] local create = vide.create local function Button(props: { @@ -34,7 +34,7 @@ end return Button ``` -```lua [Menu.luau] +```luau [Menu.luau] local create = vide.create local Button = require(Button) diff --git a/docs/tut/crash-course/4-source.md b/docs/tut/crash-course/4-source.md index 08da45c..d862156 100644 --- a/docs/tut/crash-course/4-source.md +++ b/docs/tut/crash-course/4-source.md @@ -5,7 +5,7 @@ Vide's reactivity. A source can be created using `source()`. -```lua +```luau local source = vide.source 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 by calling it with no arguments. -```lua +```luau count(count() + 1) -- increment count by 1 ``` Sources can be *derived* by wrapping them in functions. -```lua +```luau local count = source(0) local text = function() diff --git a/docs/tut/crash-course/5-effect.md b/docs/tut/crash-course/5-effect.md index 5e6043c..29e6358 100644 --- a/docs/tut/crash-course/5-effect.md +++ b/docs/tut/crash-course/5-effect.md @@ -5,7 +5,7 @@ A source and effect is analogous to a signal and connection. Effects are created using `effect()`. -```lua +```luau local source = vide.source local effect = vide.effect @@ -26,7 +26,7 @@ that source is updated. Derived sources are also tracked, it doesn't matter how deeply nested inside a function a source is. -```lua +```luau local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/6-scope.md b/docs/tut/crash-course/6-scope.md index 2853fff..6c12088 100644 --- a/docs/tut/crash-course/6-scope.md +++ b/docs/tut/crash-course/6-scope.md @@ -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 manually destroy. -```lua +```luau local root = vide.root local source = vide.source local effect = vide.effect @@ -45,7 +45,7 @@ count(1) -- prints "1" The scope created by `root()` can be destroyed. -```lua +```luau local function setup() local count = source(0) diff --git a/docs/tut/crash-course/7-stateful-component.md b/docs/tut/crash-course/7-stateful-component.md index 493f9bc..5126c73 100644 --- a/docs/tut/crash-course/7-stateful-component.md +++ b/docs/tut/crash-course/7-stateful-component.md @@ -5,7 +5,7 @@ store the data, and effects to display the data. ## Internal State -```lua +```luau local create = vide.create local source = vide.source 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. -```lua +```luau local function Counter(props: { count: () -> number }) local count = props.count diff --git a/docs/tut/crash-course/8-implicit-effect.md b/docs/tut/crash-course/8-implicit-effect.md index bbd92d4..cdb75fb 100644 --- a/docs/tut/crash-course/8-implicit-effect.md +++ b/docs/tut/crash-course/8-implicit-effect.md @@ -3,7 +3,7 @@ Explicitly creating effects to update properties is tedious. You can *implicitly* create an effect to update properties instead. -```lua +```luau local create = vide.create 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 parent new instances on source update. -```lua +```luau local items = source { create "TextLabel" { Text = "A" } } diff --git a/docs/tut/crash-course/9-derived-source.md b/docs/tut/crash-course/9-derived-source.md index 12a89b2..19a6a5d 100644 --- a/docs/tut/crash-course/9-derived-source.md +++ b/docs/tut/crash-course/9-derived-source.md @@ -2,7 +2,7 @@ We have seen the basic way to derive a source: -```lua +```luau local count = source(0) 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 count into a string for each effect using it. -```lua +```luau local source = vide.source 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. Reading this derived source multiple times will just return a cached result. -```lua +```luau local source = vide.source local effect = vide.effect local derive = vide.derive