sandals 0.1.0

data/lib/sandals/html_renderer.rb

@@ -0,0 +1,686 @@
+# frozen_string_literal: true
+
+require "cgi"
+
+module Sandals
+  class HTMLRenderer
+    TURBO_URL = "/__sandals/assets/turbo.js"
+    TURBO_PATH = File.expand_path("assets/turbo.es2017-umd.js", __dir__)
+
+    DEFAULT_STYLES = <<~CSS
+      :root {
+        color-scheme: light;
+        font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+        background: #f7f7f5;
+        color: #20201e;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      main {
+        box-sizing: border-box;
+        width: min(100%, 48rem);
+        margin: 0 auto;
+        padding: 3rem 1.5rem;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: clamp(2rem, 7vw, 4rem);
+        letter-spacing: -0.04em;
+      }
+
+      p {
+        margin: 0;
+        line-height: 1.6;
+      }
+
+      .error,
+      .field-error {
+        color: #b42318;
+      }
+
+      .notice {
+        color: #067647;
+      }
+
+      .runtime-errors {
+        box-sizing: border-box;
+        width: min(100%, 48rem);
+        margin: 0 auto;
+        padding: 1rem 1.5rem 0;
+      }
+
+      .action-error {
+        display: grid;
+        gap: 0.375rem;
+        padding: 1rem;
+        border: 1px solid #fda29b;
+        border-radius: 0.375rem;
+        background: #fef3f2;
+        color: #b42318;
+      }
+
+      .action-error code {
+        overflow-wrap: anywhere;
+      }
+
+      .field-error {
+        font-size: 0.875rem;
+      }
+
+      img {
+        display: block;
+        max-width: 100%;
+        height: auto;
+      }
+
+      a {
+        color: #175cd3;
+        text-underline-offset: 0.15em;
+      }
+
+      .text-field,
+      .number-field,
+      .text-area,
+      .file-field,
+      .select {
+        display: grid;
+        gap: 0.375rem;
+      }
+
+      .text-field input,
+      .number-field input,
+      .text-area textarea,
+      .file-field input,
+      .select select {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0.625rem 0.75rem;
+        border: 1px solid #c8c8c3;
+        border-radius: 0.375rem;
+        background: white;
+        color: inherit;
+        font: inherit;
+      }
+
+      input[aria-invalid="true"],
+      textarea[aria-invalid="true"],
+      select[aria-invalid="true"] {
+        border-color: #b42318;
+      }
+
+      .text-area textarea {
+        min-height: 7rem;
+        resize: vertical;
+      }
+
+      .checkbox {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .checkbox input {
+        width: 1rem;
+        height: 1rem;
+        margin: 0;
+      }
+
+      .radio {
+        display: grid;
+        gap: 0.5rem;
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
+
+      .radio legend {
+        margin-bottom: 0.375rem;
+      }
+
+      .radio label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .radio input {
+        margin: 0;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        background: white;
+      }
+
+      th,
+      td {
+        padding: 0.625rem 0.75rem;
+        border: 1px solid #deded9;
+        text-align: left;
+        vertical-align: top;
+      }
+
+      th {
+        background: #f0f0ed;
+        font-weight: 600;
+      }
+
+      button {
+        padding: 0.625rem 1rem;
+        border: 0;
+        border-radius: 0.375rem;
+        background: #20201e;
+        color: white;
+        font: inherit;
+        cursor: pointer;
+      }
+
+      button[aria-busy="true"] {
+        cursor: wait;
+        opacity: 0.7;
+      }
+
+      .stack {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .flow {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    CSS
+
+    def render(application, view, revision:, development_reload: false)
+      document(
+        application.title,
+        render_children(view),
+        revision:,
+        refresh_interval: application.refresh_interval,
+        development_reload:
+      )
+    end
+
+    def render_fragment(view)
+      render_children(view)
+    end
+
+    def render_action_error(error)
+      original = error.original_error
+      <<~HTML
+        <turbo-stream action="update" target="sandals-errors">
+          <template><section class="action-error" role="alert"><strong>Action failed for “#{escape(error.action_name)}”</strong><p>#{escape(original.class)}: #{escape(original.message)}</p><code>#{escape(error.location)}</code></section></template>
+        </turbo-stream>
+      HTML
+    end
+
+    def clear_action_error
+      <<~HTML
+        <turbo-stream action="update" target="sandals-errors">
+          <template></template>
+        </turbo-stream>
+      HTML
+    end
+
+    private
+
+    def render_children(view)
+      view.children.map { |element| render_element(element) }.join
+    end
+
+    def render_element(element)
+      case element
+      when String
+        escape(element)
+      when Title
+        "<h1>#{escape(element.content)}</h1>"
+      when Subtitle
+        "<h2>#{escape(element.content)}</h2>"
+      when Para
+        "<p>#{element.parts.map { |part| render_element(part) }.join}</p>"
+      when Error
+        %(<p class="error" role="alert">#{escape(element.content)}</p>)
+      when Notice
+        %(<p class="notice" role="status">#{escape(element.content)}</p>)
+      when Image
+        %(<img src="#{escape(element.source)}" alt="#{escape(element.alt)}">)
+      when Link
+        %(<a href="#{escape(element.destination)}">#{escape(element.content)}</a>)
+      when Table
+        table(element)
+      when TextField
+        %(<label class="text-field"><span>#{escape(element.label)}</span><input type="text" value="#{escape(element.value)}" data-sandals-target="#{escape(element.id)}"#{validation_attributes(element)}>#{field_error(element)}</label>)
+      when NumberField
+        %(<label class="number-field"><span>#{escape(element.label)}</span><input type="number" value="#{escape(element.value)}" data-sandals-target="#{escape(element.id)}"#{validation_attributes(element)}>#{field_error(element)}</label>)
+      when TextArea
+        %(<label class="text-area"><span>#{escape(element.label)}</span><textarea data-sandals-target="#{escape(element.id)}"#{validation_attributes(element)}>#{escape(element.value)}</textarea>#{field_error(element)}</label>)
+      when FileField
+        %(<label class="file-field"><span>#{escape(element.label)}</span><input type="file" data-sandals-target="#{escape(element.id)}"#{validation_attributes(element)}>#{field_error(element)}</label>)
+      when Checkbox
+        checked = element.checked? ? " checked" : ""
+        %(<label class="checkbox"><input type="checkbox"#{checked} data-sandals-target="#{escape(element.id)}"#{validation_attributes(element)}><span>#{escape(element.label)}</span>#{field_error(element)}</label>)
+      when Radio
+        options = element.options.map do |option|
+          checked = element.selected?(option) ? " checked" : ""
+          %(<label><input type="radio" name="#{escape(element.id)}" value="#{escape(option.value)}"#{checked} data-sandals-target="#{escape(element.id)}"><span>#{escape(option.label)}</span></label>)
+        end.join
+        %(<fieldset class="radio"#{validation_attributes(element)}><legend>#{escape(element.label)}</legend>#{options}#{field_error(element)}</fieldset>)
+      when Select
+        options = element.options.map do |option|
+          selected = element.selected?(option) ? " selected" : ""
+          %(<option value="#{escape(option.value)}"#{selected}>#{escape(option.label)}</option>)
+        end.join
+        %(<label class="select"><span>#{escape(element.label)}</span><select data-sandals-target="#{escape(element.id)}"#{validation_attributes(element)}>#{options}</select>#{field_error(element)}</label>)
+      when Submit
+        %(<button type="submit" data-sandals-target="#{escape(element.id)}">#{escape(element.content)}</button>)
+      when Button
+        %(<button type="button" data-sandals-target="#{escape(element.id)}">#{escape(element.content)}</button>)
+      when Strong
+        "<strong>#{escape(element.content)}</strong>"
+      when Emphasis
+        "<em>#{escape(element.content)}</em>"
+      when Stack
+        container("stack", element)
+      when Flow
+        container("flow", element)
+      when Form
+        form(element)
+      else
+        raise ArgumentError, "cannot render #{element.class}"
+      end
+    end
+
+    def container(class_name, element)
+      content = element.children.map { |child| render_element(child) }.join
+      %(<div class="#{class_name}">#{content}</div>)
+    end
+
+    def form(element)
+      content = element.children.map { |child| render_element(child) }.join
+      %(<form class="form">#{content}</form>)
+    end
+
+    def table(element)
+      headers = element.headers.map do |header|
+        %(<th scope="col">#{escape(header)}</th>)
+      end.join
+      rows = element.rows.map do |row|
+        cells = row.map { |cell| "<td>#{render_element(cell)}</td>" }.join
+        "<tr>#{cells}</tr>"
+      end.join
+      "<table><thead><tr>#{headers}</tr></thead><tbody>#{rows}</tbody></table>"
+    end
+
+    def validation_attributes(element)
+      return "" unless element.invalid?
+
+      %( aria-invalid="true" aria-describedby="#{escape(element.error_id)}")
+    end
+
+    def field_error(element)
+      return "" unless element.invalid?
+
+      %(<span id="#{escape(element.error_id)}" class="field-error" role="alert">#{escape(element.error)}</span>)
+    end
+
+    def document(
+      title,
+      content,
+      revision:,
+      refresh_interval:,
+      development_reload:
+    )
+      refresh_attribute =
+        if refresh_interval
+          %( data-sandals-refresh-interval="#{refresh_interval}")
+        else
+          ""
+        end
+      reload_attribute =
+        development_reload ? %( data-sandals-development-reload="true") : ""
+      <<~HTML
+        <!doctype html>
+        <html lang="es">
+          <head>
+            <meta charset="utf-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <title>#{escape(title)}</title>
+            <style>#{DEFAULT_STYLES}</style>
+            <script src="#{TURBO_URL}"></script>
+            <script>#{client_script}</script>
+          </head>
+          <body>
+            <div id="sandals-errors" class="runtime-errors" aria-live="assertive"></div>
+            <main id="sandals-view" data-sandals-revision="#{revision}"#{refresh_attribute}#{reload_attribute}>#{content}</main>
+          </body>
+        </html>
+      HTML
+    end
+
+    def client_script
+      <<~JAVASCRIPT
+        document.addEventListener("DOMContentLoaded", () => {
+          let active = false
+          let revision = Number(
+            document.querySelector("#sandals-view").dataset.sandalsRevision
+          )
+          const refreshInterval = Number(
+            document.querySelector("#sandals-view").dataset.sandalsRefreshInterval || 0
+          )
+          const developmentReload =
+            document.querySelector("#sandals-view").dataset.sandalsDevelopmentReload === "true"
+          let codeVersion
+          let checkingCode = false
+          let refreshTimer
+          const pending = []
+          const pendingButtons = new Map()
+
+          function markButtonPending(button) {
+            const target = button.dataset.sandalsTarget
+
+            pendingButtons.set(target, button)
+            button.dataset.sandalsPending = "true"
+            button.disabled = true
+            button.setAttribute("aria-busy", "true")
+          }
+
+          function releasePendingButtons(events) {
+            for (const event of events) {
+              if (!["click", "submit"].includes(event.event)) continue
+
+              const button = pendingButtons.get(event.target)
+              if (!button) continue
+
+              button.disabled = false
+              button.removeAttribute("aria-busy")
+              delete button.dataset.sandalsPending
+              pendingButtons.delete(event.target)
+            }
+          }
+
+          function showCodeError(error) {
+            const region = document.querySelector("#sandals-errors")
+            const section = document.createElement("section")
+            const title = document.createElement("strong")
+            const message = document.createElement("p")
+            const location = document.createElement("code")
+
+            section.className = "action-error"
+            section.setAttribute("role", "alert")
+            title.textContent = "Could not reload application"
+            message.textContent = `${error.class}: ${error.message}`
+            location.textContent = error.location
+            section.append(title, message, location)
+            region.replaceChildren(section)
+          }
+
+          async function checkForCodeChanges() {
+            if (!developmentReload || document.hidden || checkingCode) return
+
+            checkingCode = true
+            try {
+              const response = await fetch("/__sandals/reload", {
+                headers: { "Accept": "application/json" }
+              })
+              if (!response.ok) return
+
+              const result = await response.json()
+              if (codeVersion === undefined) {
+                codeVersion = result.version
+              } else if (!result.error && result.version !== codeVersion) {
+                window.location.reload()
+                return
+              }
+
+              if (result.error) showCodeError(result.error)
+            } finally {
+              checkingCode = false
+            }
+          }
+
+          function enqueue(message) {
+            scheduleRefresh()
+            const last = pending.at(-1)
+
+            if (
+              message.event === "change" &&
+              last?.revision === revision &&
+              last?.event === "change" &&
+              last?.target === message.target
+            ) {
+              last.value = message.value
+            } else {
+              pending.push({ revision, ...message })
+            }
+
+            drain()
+          }
+
+          function scheduleRefresh() {
+            clearTimeout(refreshTimer)
+            if (!refreshInterval || document.hidden) return
+
+            refreshTimer = setTimeout(refreshView, refreshInterval * 1000)
+          }
+
+          async function refreshView() {
+            clearTimeout(refreshTimer)
+            if (!refreshInterval || document.hidden) return
+            if (active || pending.length > 0) {
+              scheduleRefresh()
+              return
+            }
+
+            active = true
+            const refreshRevision = revision
+
+            try {
+              const response = await fetch("/events", {
+                method: "POST",
+                headers: {
+                  "Accept": "text/vnd.turbo-stream.html",
+                  "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                  revision: refreshRevision,
+                  oldest_pending_revision: refreshRevision,
+                  events: []
+                })
+              })
+
+              const body = await response.text()
+              const contentType = response.headers.get("Content-Type") || ""
+
+              if (contentType.includes("text/vnd.turbo-stream.html")) {
+                document.body.insertAdjacentHTML("beforeend", body)
+                if (response.ok) {
+                  revision = Number(response.headers.get("X-Sandals-Revision"))
+                }
+              } else if (!response.ok) {
+                throw new Error(body)
+              }
+            } finally {
+              active = false
+              drain()
+              scheduleRefresh()
+            }
+          }
+
+          async function drain() {
+            if (active || pending.length === 0) return
+
+            active = true
+            const batchRevision = pending[0].revision
+            const events = []
+            let upload
+
+            if (pending[0].event === "upload") {
+              upload = pending.shift()
+            }
+
+            while (!upload && pending[0]?.revision === batchRevision) {
+              const { revision: _, ...event } = pending.shift()
+              events.push(event)
+              if (["click", "submit"].includes(event.event)) break
+            }
+
+            try {
+              let response
+
+              if (upload) {
+                const formData = new FormData()
+                formData.append("revision", batchRevision)
+                formData.append("oldest_pending_revision", batchRevision)
+                formData.append("target", upload.target)
+                formData.append("file", upload.file)
+                response = await fetch("/files", {
+                  method: "POST",
+                  headers: { "Accept": "text/vnd.turbo-stream.html" },
+                  body: formData
+                })
+              } else {
+                response = await fetch("/events", {
+                  method: "POST",
+                  headers: {
+                    "Accept": "text/vnd.turbo-stream.html",
+                    "Content-Type": "application/json"
+                  },
+                  body: JSON.stringify({
+                    revision: batchRevision,
+                    oldest_pending_revision: batchRevision,
+                    events
+                  })
+                })
+              }
+
+              const body = await response.text()
+              const contentType = response.headers.get("Content-Type") || ""
+
+              if (contentType.includes("text/vnd.turbo-stream.html")) {
+                document.body.insertAdjacentHTML("beforeend", body)
+                if (response.ok) {
+                  revision = Number(response.headers.get("X-Sandals-Revision"))
+                }
+              } else if (!response.ok) {
+                throw new Error(body)
+              }
+            } finally {
+              releasePendingButtons(events)
+              active = false
+              drain()
+              scheduleRefresh()
+            }
+          }
+
+          document.addEventListener("input", (event) => {
+            const field = event.target.closest(
+              "input[data-sandals-target], textarea[data-sandals-target], " +
+                "select[data-sandals-target]"
+            )
+            if (!field) return
+
+            if (field.type === "file") {
+              const file = field.files[0]
+              if (!file) return
+
+              enqueue({
+                target: field.dataset.sandalsTarget,
+                event: "upload",
+                file
+              })
+              return
+            }
+
+            enqueue({
+              target: field.dataset.sandalsTarget,
+              event: "change",
+              value: field.type === "checkbox" ? field.checked : field.value
+            })
+          })
+
+          document.addEventListener("click", (event) => {
+            const button = event.target.closest("button[data-sandals-target]")
+            if (!button) return
+            if (button.type === "submit") return
+            if (button.disabled || button.dataset.sandalsPending) return
+
+            markButtonPending(button)
+            enqueue({
+              target: button.dataset.sandalsTarget,
+              event: "click"
+            })
+          })
+
+          document.addEventListener("keydown", (event) => {
+            if (event.key !== "Enter") return
+            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return
+
+            const field = event.target.closest(
+              'form input:not([type="checkbox"]):not([type="radio"])'
+            )
+            if (!field) return
+
+            const form = field.closest("form")
+            const button =
+              form.querySelector('button[type="submit"][data-sandals-target]')
+            if (!button || button.disabled || button.dataset.sandalsPending) return
+
+            event.preventDefault()
+            form.requestSubmit(button)
+          })
+
+          document.addEventListener("submit", (event) => {
+            const form = event.target.closest("form")
+            if (!form) return
+
+            event.preventDefault()
+            const button =
+              event.submitter ||
+              form.querySelector('button[type="submit"][data-sandals-target]')
+            if (!button) return
+            if (button.disabled || button.dataset.sandalsPending) return
+
+            markButtonPending(button)
+            enqueue({
+              target: button.dataset.sandalsTarget,
+              event: "submit"
+            })
+          })
+
+          document.addEventListener("visibilitychange", () => {
+            clearTimeout(refreshTimer)
+            if (!document.hidden) {
+              refreshView()
+              checkForCodeChanges()
+            }
+          })
+
+          scheduleRefresh()
+          if (developmentReload) {
+            checkForCodeChanges()
+            setInterval(checkForCodeChanges, 1000)
+          }
+        })
+      JAVASCRIPT
+    end
+
+    def escape(value)
+      CGI.escapeHTML(value.to_s)
+    end
+
+  end
+end