added examples

syarul · Oct 18, 2024 · fb2b748 · fb2b748
1 parent b1f7b0c
commit fb2b748
Show file tree

Hide file tree

Showing 5 changed files with 249 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,10 @@ return <ul class="filters" _="on load set $filter to me">
 See the test folder to see more usage cases.
 
 ## Sample Project
+
+Check example with `lua examples/web-component/server.lua`
+
+Also todoMCV example at,
 [https://github.com/syarul/todomvc-lua-luasocket-htmx-_hyperscript](https://github.com/syarul/todomvc-lua-luasocket-htmx-_hyperscript)
 
 ## VSCode Integration

diff --git a/examples/web-component/app/app.luax b/examples/web-component/app/app.luax
@@ -0,0 +1,64 @@
+return <!doctype html>
+    <html>
+        <head>
+            <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
+            <style>
+                counter-element::part(card) {
+                    padding: 22px;
+                    justify-items: center;
+                }
+            </style>
+        </head>
+        <body>
+            <counter-element></counter-element>
+            <script>
+                class CounterElement extends HTMLElement {
+                    constructor() {
+                        super();
+                        this.attachShadow({ mode: 'open' });
+                        this.count = 0;
+                        this.shadowRoot.innerHTML = `
+                            <fluent-card part="card">
+                                <p>Count: <span id="count">${this.count}</span></p>
+                                <fluent-button id="increment">Increment</fluent-button>
+                                <fluent-button id="decrement">Decrement</fluent-button>
+                            </fluent-card>
+                        `;
+                        const style = document.createElement('style');
+                        style.textContent = `
+                            :host {
+                                font-family: sans-serif;
+                                padding: 1em;
+                                --card-width: 350px;
+                                --card-height: 300px;
+                                display: flex;
+                                justify-content: center;
+                            }
+                        `;
+                        this.shadowRoot.appendChild(style);
+                    }
+
+                    connectedCallback() {
+                        this.shadowRoot.querySelector('#increment').addEventListener('click', () => this.increment());
+                        this.shadowRoot.querySelector('#decrement').addEventListener('click', () => this.decrement());
+                    }
+
+                    increment() {
+                        this.count++;
+                        this.updateCount();
+                    }
+
+                    decrement() {
+                        this.count--;
+                        this.updateCount();
+                    }
+
+                    updateCount() {
+                        this.shadowRoot.querySelector('#count').textContent = this.count;
+                    }
+                }
+
+                customElements.define('counter-element', CounterElement);
+            </script>
+        </body>
+    </html>
diff --git a/examples/web-component/app/test.luax b/examples/web-component/app/test.luax
@@ -0,0 +1,44 @@
+return <!DOCTYPE html>
+    <html>
+        <head>
+            <style>
+                button {
+                    background-color: red;
+                    display: block;
+                    margin-top: 8px;
+                }
+
+                example-component::part(native) {
+                    background-color: pink;
+                }
+            </style>
+        </head>
+        <body>
+            <example-component></example-component>
+            <button>Button in Light DOM</button>
+            <script>
+                // Use custom elements API v1 to register a new HTML tag and define its JS behavior
+                // using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
+                customElements.define('example-component', class extends HTMLElement {
+                constructor() {
+                    super(); // always call super() first in the constructor.
+
+                    // Attach a shadow root to <fancy-tabs>.
+                    const shadowRoot = this.attachShadow({mode: 'open'});
+                    shadowRoot.innerHTML = `
+                    <style>
+                        div {
+                            height: 150px;
+                            width: 150px;
+                            border: solid 2px;
+                        }
+                    </style>
+
+                    <div part="native"></div>  
+                    <button>Button in Shadow DOM</button>
+                    `;
+                }
+                });
+            </script>
+        </body>
+    </html>
diff --git a/examples/web-component/favicon.ico b/examples/web-component/favicon.ico
diff --git a/examples/web-component/server.lua b/examples/web-component/server.lua
@@ -0,0 +1,137 @@
+local socket = require("socket")
+local url = require("socket.url")
+local server = socket.tcp()
+
+local function get_dir()
+    local handle
+    local result
+    if os.getenv("OS") == "Windows_NT" then
+      handle = io.popen("cd")
+    else
+      handle = io.popen("pwd")
+    end
+    if handle then
+      result = handle:read("*a"):gsub("%s+", "")
+      handle:close()
+    else
+      result = "Failed to get directory"
+    end
+    return result
+end
+
+package.path = package.path .. ";" .. get_dir() .. "/?.lua"
+
+local h = require("luax")
+
+local function read_static_file(file_path)
+    local file, err = io.open(file_path, "rb") -- in binary mode
+    if not file then
+        return nil, "Error opening file: " .. err
+    end
+
+    local content = file:read("*all")
+    file:close()
+    return content
+end
+
+local mimes = {
+    json = 'application/json',
+    js = 'application/javascript'
+}
+
+local function get_mime_type(path)
+    return mimes[path:lower():match("[^.]*$")] or "application/octet-stream"
+end
+
+local function get_headers(client, headers)
+    while true do
+        local line, _ = client:receive()
+        if line == "" or line == nil then
+            break
+        else
+            local key, value = line:match("^(.-):%s*(.*)$")
+            if key and value then
+                if key:lower() == "cookie" then
+                    headers[key:lower()] = value
+                    break -- only read cookie
+                end
+            end
+        end
+    end
+end
+
+-- local function sanitize_text(str)
+--     return (str:gsub("[<>&]", {
+--         ["<"] = "&lt;",
+--         [">"] = "&gt;",
+--         ["&"] = "&amp;"
+--     }))
+-- end
+
+local function render(client, status_code, body, custom_headers)
+    local header_string = "HTTP/1.1 " .. status_code .. "\r\n"
+    local headers = {
+        ["Content-Type"] = "text/html"
+    }
+    if type(custom_headers) == "table" then
+        for k, v in pairs(custom_headers) do
+            headers[k] = v
+        end
+    end
+    for k, v in pairs(headers) do
+        header_string = header_string .. k .. ": " .. v .. "\r\n"
+    end
+    header_string = header_string .. "\r\n"
+    if type(body) == "table" then
+        body = h(body)
+    end
+    client:send(header_string .. (body or ""))
+end
+
+local app = require("examples.web-component.app.app")
+
+local function handler(client, request)
+    if request then
+        local method, path = request:match("^(%w+)%s([^%s]+)%sHTTP")
+
+        local parsed_url = url.parse(path)
+
+        if parsed_url.path == "/" then
+            local html = h(app)
+            render(client, "200 OK", html)
+        elseif mimes[parsed_url.path:lower():match("[^.]*$")] and method == "GET" then
+            local file = parsed_url.path
+            local content_type = get_mime_type(file)
+            local content, err = read_static_file(file)
+            if not err then
+                render(client, "200 OK", content, { ["Content-Type"] = content_type })
+            else
+                render(client, "404 Not Found", "Not Found", { ["Content-Type"] = "text/plain" })
+            end
+        else
+            -- 404
+            render(client, "404 Not Found", "Not Found", { ["Content-Type"] = "text/plain" })
+        end
+    end
+end
+
+server:bind("*", 8888)
+server:listen()
+server:settimeout(0)
+
+print('Lua Socket TCP Server running at http://127.0.0.1:8888/')
+
+while true do
+    -- Check for new connections
+    local client = server:accept()
+    if client then
+        client:settimeout(10)
+        local headers = {}
+        local request, err = client:receive()
+        if not err then
+            get_headers(client, headers)
+            handler(client, request)
+        end
+        client:close()
+    end
+end