First push

Author: DeLuxe-1337

flat/component.lua

@@ -0,0 +1,14 @@
+local module = {}
+local js = require "js"
+
+module.components = {}
+
+function module.new(name, inside)
+    module.components[name] = inside
+end
+
+function module.create(name)
+    return module.components[name]()
+end
+
+return module

flat/element.lua

@@ -0,0 +1,95 @@
+local module = {}
+local js = require "js"
+
+module.page = nil
+
+function get_element(id)
+    return js.global.document:getElementById(id)
+end
+
+function get_id(number)
+    return "flat_" .. number
+end
+
+function module.create(kinda, innera, props)
+    local page = module.page
+    local result = {
+        properties = {
+            flat_kind = kinda,
+            innerHTML = innera
+        },
+        render = function(self)
+            if not self.render_index then
+                self.render_index = page.render(self)
+            end
+
+            self:postrender(self.render_index)
+        end,
+        postrender = function(self, id)
+            local elm = get_element(get_id(id))
+            if elm then
+                for i, v in pairs(self.properties) do
+                    if elm[i] then
+                        elm[i] = v
+                    else
+                        elm:setAttribute(i, v)
+                    end
+                end
+            end
+
+            page.current_page_html[self.render_index] = elm.outerHTML
+        end,
+        render_child = function(self, child)
+            child = get_element(child.id)
+            local elm = get_element(get_id(self.render_index))
+            elm:appendChild(child)
+        end,
+        remove = function(self)
+            local elm = get_element(get_id(self.render_index))
+            elm:remove()
+
+            table.remove(page.current_page_html, self.render_index)
+        end,
+        event = function(self, ev, fn)
+            local elm = get_element(get_id(self.render_index))
+
+            elm:addEventListener(ev, fn)
+            
+            return {
+                kill = function()
+                    elm:removeEventListener(ev, fn)
+                end
+            }
+        end
+    }
+
+    if props then
+        for i, v in pairs(props) do
+            result.properties[i] = v
+        end
+    end
+
+    return setmetatable(result, {
+        __newindex = function(table, index, value)
+            if index ~= "render_index" then
+                rawset(table.properties, index, value)
+
+                if table.render_index then
+                    table:render()
+                end
+            else
+                rawset(table, index, value)
+            end
+        end,
+        __index = function(table, index)
+            if not t and index ~= "render_index" then
+                local elm = get_element(get_id(rawget(table, "render_index")))
+                return elm[index] or elm:getAttribute(index)
+            end
+
+            return table.properties[index]
+        end
+    })
+end
+
+return module

flat/http.lua

@@ -0,0 +1,11 @@
+local http = {}
+
+function http.get(url)
+    local xmlhttp = js.new(js.global.window.XMLHttpRequest)
+    xmlhttp:open("GET", url, false)
+    xmlhttp:send(nil)
+
+    return xmlhttp.responseText
+end
+
+return http

flat/page.lua

@@ -0,0 +1,33 @@
+local js = require "js"
+local http = require "flat.http"
+
+local module = {}
+module.current_page_html = {}
+module.dom = nil
+
+function module.render(element)
+    if element then
+        local node = js.global.document:createElement(element.properties.flat_kind)
+        module.dom:appendChild(node)
+
+        table.insert(module.current_page_html, element)
+
+        node.id = "flat_" .. #module.current_page_html
+    end
+
+    return #module.current_page_html
+end
+
+function module.load_dom(dom)
+    _G.flat.init()
+    _G.flat.element.page = module
+
+    local index = http.get("scripts/render/index.html")
+
+    js.global.document:write(index)
+    js.global.document:close()
+
+    module.dom = js.global.document:getElementById(dom)
+end
+
+return module

flat/require.lua

@@ -0,0 +1,25 @@
+local js = require "js"
+local window = js.global
+
+local flat = {
+    element = require"flat.element",
+    page = require"flat.page",
+    router = require"flat.router",
+    styler = require"flat.styler",
+    component = require"flat.component",
+    init = function()
+        function wait(delay)
+            local co = assert(coroutine.running(), "Should be run in a coroutine")
+        
+            window:setTimeout(function()
+                assert(coroutine.resume(co))
+            end, delay*1000)
+        
+            coroutine.yield()
+        end
+    end
+}
+
+_G.flat = flat
+
+return flat

flat/router.lua

@@ -0,0 +1,13 @@
+--not functional, yet.
+
+local module = {}
+
+local js = require "js"
+local window = js.global
+
+function module.set_route(name)
+    print(window.history.pushState)
+    window.history:pushState(nil, "", name)
+end
+
+return module

flat/styler.lua

@@ -0,0 +1,21 @@
+local module = {}
+
+module.styles = {}
+module.applied = {}
+
+function module.new(name, params, theme)
+    module.styles[name] = params
+end
+
+function module.use(name, element)
+    local style = module.styles[name]
+    if style then
+        for i,v in pairs(style) do
+            element.style[i:gsub("_", "-")] = v
+        end
+    end
+
+    module.applied[element] = name
+end
+
+return module

index.html

@@ -0,0 +1,23 @@
+<title>flat.lua framework</title>
+
+<div style="margin-left: 50%;">
+    <h1>
+        flat.lua is loading...
+    </h1>
+</div>
+
+<script src="lua51.js" type="text/javascript"></script>
+
+<script>
+    function executeScript(source) {
+        console.log(fengari.load(source, "web")())
+    }
+
+    function executeFile(path) {
+        fetch("scripts/lua/" + path)
+        .then(Response => Response.text())
+        .then(text => executeScript(text))
+    }
+
+    executeFile("main.lua")
+</script>

lua51.js

@@ -0,0 +1,37 @@
+local flat = require "lua.flat.require"
+flat.page.load_dom("flat-dom") -- loads the custom dom from render/index.html
+
+flat.component.new("alert", function()
+    local div = flat.element.create("div", "This is my alert!")
+
+    flat.styler.new("alert", {
+        border = "0.375rem",
+        position = "relative",
+        padding = "1rem 1rem",
+        margin_bottom = "10px",
+        margin_top = "10px",
+        color = "#842029",
+        margin_left = "10px",
+        background_color = "#f8d7da",
+        border_radius = "0.375rem",
+        border_left_width = "10px",
+        border_left_style = "solid",
+        width = "fit-content"
+    })
+
+    div:render()
+
+    flat.styler.use("alert", div)
+
+    return {
+        text = function(update)
+            div.innerHTML = update
+        end
+    }
+end)
+
+local alert1 = flat.component.create("alert")
+alert1.text("You've been warned!")
+
+local alert2 = flat.component.create("alert")
+alert2.text("This is my second warning to you.")