igniter 0.5.0 → 0.5.1

data/packages/igniter-frontend/lib/igniter/frontend/handler.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Igniter
+  module Frontend
+    class Handler
+      class << self
+        def call(params:, body:, headers:, env:, raw_body:, config:)
+          new(
+            params: params,
+            body: body,
+            headers: headers,
+            env: env,
+            raw_body: raw_body,
+            config: config
+          ).call
+        end
+      end
+
+      attr_reader :params, :body, :headers, :env, :raw_body, :config
+
+      def initialize(params:, body:, headers:, env:, raw_body:, config:)
+        @params = params
+        @body = body
+        @headers = headers
+        @env = env
+        @raw_body = raw_body
+        @config = config
+      end
+
+      def call
+        raise NotImplementedError, "#{self.class} must implement #call"
+      end
+
+      def request
+        @request ||= Request.new(
+          method: env.fetch("REQUEST_METHOD", "GET"),
+          path: env.fetch("PATH_INFO", "/"),
+          route_params: params,
+          body: body,
+          headers: headers,
+          env: env,
+          raw_body: raw_body
+        )
+      end
+
+      def response
+        @response ||= Response.new
+      end
+
+      def app_access
+        @app_access ||= AppAccess.new(request: request, config: config)
+      end
+
+      def build_context(context_class, **attributes)
+        context_class.build(
+          request: request,
+          app_access: app_access,
+          response: response,
+          handler: self,
+          **attributes
+        )
+      end
+
+      def render(page_class, context:, **options)
+        page_body =
+          if page_class.respond_to?(:render)
+            page_class.render(context: context, **options)
+          else
+            page_class.new(context: context, **options).render
+          end
+
+        response.html(page_body)
+      end
+
+      def html(body, status: 200, headers: {})
+        response.html(body, status: status, headers: headers)
+      end
+
+      def json(body, status: 200, headers: {})
+        response.json(body, status: status, headers: headers)
+      end
+
+      def text(body, status: 200, headers: {})
+        response.text(body, status: status, headers: headers)
+      end
+
+      def redirect_to(location, status: 303, headers: {})
+        response.redirect(location, status: status, headers: headers)
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/javascript.rb

@@ -0,0 +1,353 @@
+# frozen_string_literal: true
+
+module Igniter
+  module Frontend
+    module JavaScript
+      module_function
+
+      def runtime_source
+        <<~JS
+          (() => {
+            if (window.IgniterFrontend) return;
+
+            const registry = new Map();
+            const instances = new WeakMap();
+            let started = false;
+
+            function dashize(value) {
+              return String(value)
+                .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+                .replace(/_/g, "-")
+                .toLowerCase();
+            }
+
+            function controllerNames(element) {
+              return String(element.getAttribute("data-ig-controller") || "")
+                .split(/\\s+/)
+                .filter(Boolean);
+            }
+
+            function controllerAttribute(identifier, suffix) {
+              return `data-ig-${identifier}-${suffix}`;
+            }
+
+            function coerceValue(raw) {
+              if (raw === "true") return true;
+              if (raw === "false") return false;
+              if (raw === "null") return null;
+              if (/^-?\\d+$/.test(raw)) return Number(raw);
+              if (/^-?\\d+\\.\\d+$/.test(raw)) return Number(raw);
+              if ((raw.startsWith("{") && raw.endsWith("}")) || (raw.startsWith("[") && raw.endsWith("]"))) {
+                try {
+                  return JSON.parse(raw);
+                } catch (_error) {
+                  return raw;
+                }
+              }
+
+              return raw;
+            }
+
+            function escapeHtml(value) {
+              return String(value).replace(/[&<>"']/g, (char) => (
+                { "&": "&amp;", "<": "&lt;", ">": "&gt;", '\"': "&quot;", "'": "&#39;" }[char]
+              ));
+            }
+
+            class Controller {
+              constructor(element, identifier) {
+                this.element = element;
+                this.identifier = identifier;
+              }
+
+              connect() {}
+
+              disconnect() {}
+
+              targets(name) {
+                const attr = controllerAttribute(this.identifier, "target");
+                const targetName = dashize(name);
+                return Array.from(this.element.querySelectorAll(`[${attr}~="${targetName}"]`));
+              }
+
+              target(name) {
+                return this.targets(name)[0] || null;
+              }
+
+              hasTarget(name) {
+                return this.target(name) !== null;
+              }
+
+              value(name, fallback = null) {
+                const attr = controllerAttribute(this.identifier, `${dashize(name)}-value`);
+                const raw = this.element.getAttribute(attr);
+                return raw === null ? fallback : coerceValue(raw);
+              }
+
+              hasValue(name) {
+                const attr = controllerAttribute(this.identifier, `${dashize(name)}-value`);
+                return this.element.hasAttribute(attr);
+              }
+
+              find(selector) {
+                return this.element.querySelector(selector);
+              }
+
+              findAll(selector) {
+                return Array.from(this.element.querySelectorAll(selector));
+              }
+
+              findById(id) {
+                return this.find(`#${id}`);
+              }
+
+              dispatch(name, detail = {}) {
+                this.element.dispatchEvent(new CustomEvent(`ig:${this.identifier}:${dashize(name)}`, {
+                  bubbles: true,
+                  detail
+                }));
+              }
+            }
+
+            class TabsController extends Controller {
+              connect() {
+                this.buttons = this.targets("button");
+                this.panes = this.targets("pane");
+                if (!this.buttons.length || !this.panes.length) return;
+
+                this.handleButtonClick = this.handleButtonClick.bind(this);
+                this.buttons.forEach((button) => {
+                  button.addEventListener("click", this.handleButtonClick);
+                });
+
+                const initial = this.buttons.find((button) => button.getAttribute("aria-selected") === "true") || this.buttons[0];
+                if (initial) this.activate(initial.getAttribute("data-ig-tabs-pane-id"));
+              }
+
+              disconnect() {
+                if (!this.buttons || !this.handleButtonClick) return;
+
+                this.buttons.forEach((button) => {
+                  button.removeEventListener("click", this.handleButtonClick);
+                });
+              }
+
+              handleButtonClick(event) {
+                const button = event.currentTarget;
+                this.activate(button.getAttribute("data-ig-tabs-pane-id"));
+              }
+
+              activate(targetId) {
+                this.buttons.forEach((button) => {
+                  const isActive = button.getAttribute("data-ig-tabs-pane-id") === targetId;
+                  button.classList.toggle("active", isActive);
+                  button.setAttribute("aria-selected", isActive ? "true" : "false");
+                  button.setAttribute("tabindex", isActive ? "0" : "-1");
+                });
+
+                this.panes.forEach((pane) => {
+                  pane.classList.toggle("active", pane.id === targetId);
+                });
+              }
+            }
+
+            class StreamController extends Controller {
+              connect() {
+                this.url = this.value("url");
+                if (!this.url || !window.EventSource) return;
+
+                this.hook = this.resolveHook();
+                this.listenerMap = new Map();
+                this.source = new window.EventSource(this.url);
+
+                if (this.hook && typeof this.hook.connect === "function") {
+                  this.hook.connect({ controller: this, source: this.source });
+                }
+
+                this.eventNames().forEach((eventName) => {
+                  const listener = (event) => this.handleEvent(eventName, event);
+                  this.listenerMap.set(eventName, listener);
+                  this.source.addEventListener(eventName, listener);
+                });
+              }
+
+              disconnect() {
+                if (this.hook && typeof this.hook.disconnect === "function") {
+                  this.hook.disconnect({ controller: this, source: this.source });
+                }
+
+                if (this.source) this.source.close();
+                this.listenerMap = null;
+              }
+
+              eventNames() {
+                const value = this.value("events", ["message"]);
+                if (Array.isArray(value)) return value.map((entry) => String(entry)).filter(Boolean);
+
+                return String(value)
+                  .split(/\\s+/)
+                  .map((entry) => entry.trim())
+                  .filter(Boolean);
+              }
+
+              handleEvent(eventName, event) {
+                const detail = {
+                  controller: this,
+                  event,
+                  eventName,
+                  payload: this.parsePayload(event.data),
+                  source: this.source
+                };
+
+                if (typeof this.hook === "function") {
+                  this.hook(detail);
+                } else if (this.hook && typeof this.hook[eventName] === "function") {
+                  this.hook[eventName](detail);
+                }
+
+                this.dispatch("message", detail);
+                this.dispatch(eventName, detail);
+              }
+
+              parsePayload(raw) {
+                if (this.value("parseJson", true) === false) return raw;
+
+                try {
+                  return JSON.parse(raw);
+                } catch (_error) {
+                  return raw;
+                }
+              }
+
+              resolveHook() {
+                const hookName = this.value("hook");
+                if (!hookName) return null;
+
+                return String(hookName)
+                  .split(".")
+                  .filter(Boolean)
+                  .reduce((memo, segment) => (memo ? memo[segment] : undefined), window);
+              }
+
+              setTextTarget(name, value) {
+                const element = this.target(name);
+                if (!element) return null;
+
+                element.textContent = value == null ? "" : String(value);
+                return element;
+              }
+
+              setHtmlTarget(name, html) {
+                const element = this.target(name);
+                if (!element) return null;
+
+                element.innerHTML = html == null ? "" : String(html);
+                return element;
+              }
+
+              setJsonTarget(name, payload, spacing = 2) {
+                const element = this.target(name);
+                if (!element) return null;
+
+                element.textContent = JSON.stringify(payload == null ? {} : payload, null, spacing);
+                return element;
+              }
+
+              prependHtmlTarget(name, html, options = {}) {
+                const element = this.target(name);
+                if (!element) return null;
+
+                const wrapper = document.createElement("div");
+                wrapper.innerHTML = String(html);
+                const child = wrapper.firstElementChild;
+                if (!child) return null;
+
+                element.prepend(child);
+
+                const limit = Number(options.limit || 0);
+                if (limit > 0) {
+                  while (element.children.length > limit) {
+                    element.removeChild(element.lastElementChild);
+                  }
+                }
+
+                return child;
+              }
+            }
+
+            function instanceStoreFor(element) {
+              let store = instances.get(element);
+              if (!store) {
+                store = new Map();
+                instances.set(element, store);
+              }
+              return store;
+            }
+
+            function connectElement(element) {
+              controllerNames(element).forEach((identifier) => {
+                const controllerClass = registry.get(identifier);
+                if (!controllerClass) return;
+
+                const store = instanceStoreFor(element);
+                if (store.has(identifier)) return;
+
+                const instance = new controllerClass(element, identifier);
+                store.set(identifier, instance);
+                if (typeof instance.connect === "function") instance.connect();
+              });
+            }
+
+            function connectTree(root = document) {
+              const elements = [];
+
+              if (root.nodeType === 1 && root.hasAttribute("data-ig-controller")) elements.push(root);
+              if (root.querySelectorAll) elements.push(...root.querySelectorAll("[data-ig-controller]"));
+
+              elements.forEach(connectElement);
+              started = true;
+            }
+
+            function connectIdentifierTree(root, identifier) {
+              const elements = [];
+
+              if (root.nodeType === 1 && controllerNames(root).includes(identifier)) elements.push(root);
+              if (root.querySelectorAll) {
+                root.querySelectorAll("[data-ig-controller]").forEach((element) => {
+                  if (controllerNames(element).includes(identifier)) elements.push(element);
+                });
+              }
+
+              elements.forEach(connectElement);
+            }
+
+            function register(identifier, controllerClass) {
+              registry.set(identifier, controllerClass);
+              if (started) connectIdentifierTree(document, identifier);
+              return controllerClass;
+            }
+
+            register("tabs", TabsController);
+            register("stream", StreamController);
+
+            const api = {
+              Controller,
+              connect: connectTree,
+              escapeHtml,
+              register,
+              start: connectTree
+            };
+
+            window.IgniterFrontend = api;
+
+            if (document.readyState === "loading") {
+              document.addEventListener("DOMContentLoaded", () => api.start(document), { once: true });
+            } else {
+              queueMicrotask(() => api.start(document));
+            }
+          })();
+        JS
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/page.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Igniter
+  module Frontend
+    class Page < Component
+      private
+
+      def render_document(view, title:, lang: "en", body_attrs: {}, &block)
+        view.doctype
+        view.tag(:html, lang: lang) do |html|
+          html.tag(:head) do |head|
+            head.tag(:meta, charset: "utf-8")
+            head.tag(:meta, name: "viewport", content: "width=device-width, initial-scale=1")
+            head.tag(:title, title)
+            yield_head(head) if respond_to?(:yield_head, true)
+          end
+          html.tag(:body, body_attrs) do |body|
+            block.call(body)
+          end
+        end
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/request.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+require "uri"
+
+module Igniter
+  module Frontend
+    class Request
+      attr_reader :method, :path, :route_params, :body, :headers, :env, :raw_body
+
+      def initialize(method:, path:, route_params:, body:, headers:, env:, raw_body:)
+        @method = method.to_s.upcase
+        @path = path.to_s
+        @route_params = stringify_keys(route_params)
+        @body = body
+        @headers = stringify_keys(headers)
+        @env = env.to_h
+        @raw_body = raw_body.to_s
+      end
+
+      def script_name
+        env.fetch("SCRIPT_NAME", "").to_s
+      end
+
+      def query_string
+        env.fetch("QUERY_STRING", "").to_s
+      end
+
+      def query_params
+        @query_params ||= URI.decode_www_form(query_string).each_with_object({}) do |(key, value), memo|
+          memo[key.to_s] = value
+        end
+      end
+
+      def body_params
+        body.is_a?(Hash) ? stringify_keys(body) : {}
+      end
+
+      def params
+        route_params.merge(query_params).merge(body_params)
+      end
+
+      def full_path
+        return path if query_string.empty?
+
+        "#{path}?#{query_string}"
+      end
+
+      def content_type
+        headers["Content-Type"].to_s
+      end
+
+      private
+
+      def stringify_keys(value)
+        value.to_h.each_with_object({}) do |(key, nested), memo|
+          memo[key.to_s] = nested
+        end
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/response.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Igniter
+  module Frontend
+    class Response
+      class << self
+        def html(body, status: 200, headers: {})
+          {
+            status: status,
+            body: body,
+            headers: { "Content-Type" => "text/html; charset=utf-8" }.merge(stringify_keys(headers))
+          }
+        end
+
+        def json(body, status: 200, headers: {})
+          {
+            status: status,
+            body: JSON.generate(body),
+            headers: { "Content-Type" => "application/json; charset=utf-8" }.merge(stringify_keys(headers))
+          }
+        end
+
+        def text(body, status: 200, headers: {})
+          {
+            status: status,
+            body: body.to_s,
+            headers: { "Content-Type" => "text/plain; charset=utf-8" }.merge(stringify_keys(headers))
+          }
+        end
+
+        def redirect(location, status: 303, headers: {})
+          {
+            status: status,
+            body: "",
+            headers: { "Location" => location.to_s }.merge(stringify_keys(headers))
+          }
+        end
+
+        private
+
+        def stringify_keys(headers)
+          headers.to_h.each_with_object({}) do |(key, value), memo|
+            memo[key.to_s] = value
+          end
+        end
+      end
+
+      def html(...)
+        self.class.html(...)
+      end
+
+      def json(...)
+        self.class.json(...)
+      end
+
+      def text(...)
+        self.class.text(...)
+      end
+
+      def redirect(...)
+        self.class.redirect(...)
+      end
+    end
+  end
+end