Initial commit

.gitattributes

@@ -0,0 +1 @@
+*.luau linguist-language=Lua

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: site-deploy
+
+on:
+  push:
+    branches: [main] # todo: remove later
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+defaults:
+  run:
+    working-directory: docs
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Install dependencies
+        run: npm install
+      - name: Build with VitePress
+        run: npm run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/unit-test.yml

@@ -0,0 +1,25 @@
+name: unit-test
+on:
+  push:
+  pull_request:
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Install Luau zip
+        uses: robinraju/[email protected]
+        with: 
+          repository: Roblox/luau
+          latest: true
+          fileName: luau-ubuntu.zip
+          out-file-path: bin
+
+      - name: Unzip Luau
+        run: unzip bin/luau-ubuntu.zip -d bin
+
+      - name: Run unit tests
+        run: bin/luau test/tests.luau

.gitignore

@@ -0,0 +1,8 @@
+.vscode
+_local
+
+aftman.toml
+sourcemap.json
+
+docs/.vitepress/dist
+docs/.vitepress/cache

.luaurc

@@ -0,0 +1,6 @@
+{
+    "languageMode": "strict",
+    "lint": { "BuiltinGlobalWrite": false, "UnknownGlobal": false },
+    "globals": [ "Instance" ]
+}
+

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## Unreleased
+
+---
+
+## [0.1.0] - 0000-00-00
+
+- Initial release

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 centau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,35 @@
+### ⚠️ This library is in early stages of development with breaking changes being made often.
+
+Vide is a reactive and declarative UI library.
+
+- Uses Luau typechecking
+- Declarative and concise syntax.
+- Minimal imports.
+- Reactive state driven.
+
+## Getting started
+
+Read the
+[crash course](https://centau.github.io/vide/tut/crash-course/1-introduction)
+for a quick introduction to the library.
+
+## Code sample
+
+```lua
+local vide = require(path_to_vide)
+local source = vide.source
+
+local function Counter()
+    local count = source(0)
+
+    return create "TextButton" {
+        Text = function()
+            return "count: " .. count()
+        end,
+
+        Activated = function()
+            count(count() + 1)
+        end
+    }
+end
+```

aftman.toml

@@ -0,0 +1,7 @@
+# This file lists tools managed by Aftman, a cross-platform toolchain manager.
+# For more information, see https://github.com/LPGhatguy/aftman
+
+# To add a new tool, add an entry to this table.
+[tools]
+rojo = "rojo-rbx/[email protected]"
+# rojo = "rojo-rbx/[email protected]"

default.project.json

@@ -0,0 +1,4 @@
+{
+    "name": "vide",
+    "tree": { "$path": "src" }
+}

docs/.vitepress/config.ts

@@ -0,0 +1,57 @@
+import { defineConfig } from "vitepress"
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "Vide",
+    description: "A declarative and reactive library for Luau.",
+    base: "/vide/",
+    themeConfig: {
+        // 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"},
+            { text: "GitHub", link: "https://github.com/centau/vide" }
+        ],
+
+        sidebar: {
+            "/api/": [
+                {
+                    text: "API",
+                    items: [
+                        { text: "Reactivity: Core", link: "/api/reactivity-core" },
+                        { text: "Reactivity: Utility", link: "/api/reactivity-utility" },
+                        { 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: "State", link: "/tut/crash-course/4-state" },
+                        { text: "Derived State", link: "/tut/crash-course/5-derived-state" },
+                        { text: "Table State", link: "/tut/crash-course/6-table-state" },
+                        { text: "Property Groups", link: "/tut/crash-course/7-property-groups" },
+                    ]
+                },
+                {
+                    text: "Tutorials",
+                    items: [
+                        { text: "Crash Course", link: "/tut/crash-course/index" },
+                    ]
+                }
+            ],
+        }
+
+        // socialLinks: [
+        //     { icon: "github", link: "https://github.com/centau/vide" }
+        // ]
+    }
+})

docs/.vitepress/theme/index.js

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

docs/.vitepress/theme/vars.css

@@ -0,0 +1,7 @@
+:root {
+    --vp-c-brand: #3086ff;
+
+    --vp-c-green-lighter: #02a5fd;
+    --vp-c-green-dark: #2b4efd;
+    --vp-c-green-darker: #5c2bfd;
+}

docs/api/animation.md

@@ -0,0 +1,37 @@
+# Animation API
+
+## spring()
+
+Returns a new state with a dynamically animated value of the source.
+
+- **Type**
+
+    ```lua
+    function spring<T>(
+        source: () -> T & Animatable,
+        period: number = 1,
+        damping_ratio: number = 1
+    ): () -> T
+
+    type Animatable = number | CFrame | Color3 | UDim | UDim2 | Vector2 | Vector3
+    ```
+
+- **Details**
+
+    The output state value is updated every frame based on the source state
+    value.
+
+    The change is physically simulated according to a
+    [spring](https://en.wikipedia.org/wiki/Simple_harmonic_motion).
+
+    `period` is the amount of time in seconds it takes for the spring to
+    complete one full oscillation.
+
+    `damping_ratio` is the amount of resistance applied to the spring.
+
+    - \>1 = Overdamped (not currently supported).
+    - 1 = Critically damped - reaches target without any overshoot.
+    - <1 = Underdamped - reaches target with some overshoot.
+    - 0 = Undamped - never stabilizes, oscillates forever.
+
+    Velocity is conserved between source state updates for smooth animation.

docs/api/creation.md

@@ -0,0 +1,79 @@
+# Element Creation API
+
+<br/>
+
+## create()
+
+Creates a new UI element, applying any given properties.
+
+- ### Type
+
+    ```lua
+    function create(class: string): (Properties) -> Instance
+    function create(instance: Instace): (Properties) -> Instance
+
+    type Properties = Map<string|number, any>
+    ```
+
+- ### Details
+
+    The function can take either a `string` or an `Instance` as its first argument.
+
+    - If given a `string`, a new instance with the same class name will be created.
+    - If given an `Instance`, a new instance that is a clone of the given instance
+    will be created.
+
+    This returns another function that is used to apply any properties to the new
+    instance.
+
+- ### Property setting rules
+
+    - If a table value is another table, that nested table is processed so that
+      any properties inside that table are also applied to the instance just
+      like the outer table.
+    - If a table index is a string:
+      - If its value is a function then it will either bind that property to
+        a state or connect it if the property type is a `RBXScriptSignal`.
+      - If the value is not a function then the property will be set to that
+        value.
+    - If a table index is a number:
+      - If its value is a function then it will parent any instances returned by
+        that function as children.
+      - If its value is an instance then it will be parented to the instance.
+
+- ### Example
+
+    Basic element creation.
+
+    ```lua
+    local frame = create "Frame" {
+        Name = "NewFrame",
+        Position = UDim2.fromScale(1, 0)
+    }
+    ```
+
+    A component using property nesting/grouping.
+
+    ```lua
+    type Layout = {
+        Layout = {
+            Position: UDim2?,
+            Size: UDim2?,
+            AnchorPoint: Vector2?
+        }
+    }
+
+    type Children = {
+        Children = Array<Instance>
+    }
+
+    function Background(props: Layout & Children & {
+        Color: Color3
+    })
+        return create "Frame" {
+            BackgroundColor3 = Color,
+            props.Layout,
+            props.Children
+        }
+    end
+    ```