sinatra-kagero 1.0.2 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f7387c7811a71ac630427e87886f19c0c4600d2a6f94afc8bb356395cb5af53
-  data.tar.gz: 607a20b6823c5905d807d95c119951b9be974edf50f3ca089c726482e631872d
+  metadata.gz: 876d65a5bc64168ea992126323cd868e567950119c698a6ec4571591bb76076a
+  data.tar.gz: f99a79047fccbdf9c6c882642f078b2bda65284b4b115903f0fcc6e55fb34533
 SHA512:
-  metadata.gz: 5e905a9e0543d1f1b08e53a2d45eff24a48b367b45a0a57f3b342825470d5ef96677f4a20f3a8947bf956c1c8171f5ab8d0671edef4c2d919507682e943ce717
-  data.tar.gz: 6f48eb473d1d374ac5937b9da0ecd80abecde61469b1cac88f05d4ef6cccbacc947133908794230392addee7ef48ef3bd9c792ff982587f6c66971febaea59f0
+  metadata.gz: e0ba41fda2a59fd81d000f38705ede50c47b0ba515b0044d7ff4a9b73fbe497f5416a6caba8f813d779c9839abb628021ae6def7c7118926cf1a5418c270c771
+  data.tar.gz: 76d31deef039dba860f913ea43bff2d8fd55a5d77578228d3bc038a24268572fa365a8c0b23be2402dfb2386e1b4c5100f3fc694403fbf2314cd6453807a981f

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.1.0
+
+- Preserve Kagero HTML on partial reloads and synchronize title and history.
+- Send the CSRF header for same-origin unsafe visits and show visit failures.
+- Accept valid Inertia page JSON even when the response header is missing.
+- With CSRF protection enabled, ordinary form submissions without JavaScript
+  receive HTTP 403 because they cannot send the required header.
+- Partial reloads replace the full HTML while retaining omitted props.
+
 ## 1.0.2 — 2026-06-26
 
 - Submit regular Kagero forms as UTF-8 URL-encoded bodies, preserving

data/README.md

@@ -34,3 +34,15 @@ end
 Kagero intentionally keeps JavaScript out of the main application authoring
 surface. The client runtime exists, but route handlers, pages, props, forms,
 validation, and persistence remain Ruby.
+
+## CSRF protection and partial reloads
+
+With Inertia CSRF protection enabled, Kagero sends the `XSRF-TOKEN` cookie
+in the `X-XSRF-TOKEN` header for same-origin unsafe requests. A normal form
+submission without JavaScript cannot send this header and receives HTTP 403.
+
+Partial reloads select the props transferred; Kagero renders and replaces the
+whole HTML page. Props omitted from the partial response retain their old values.
+
+Direct `Kagero.visit` calls navigate to external origins only for GET; other
+methods show an error and do not send a request.

data/lib/sinatra/kagero/runtime.rb

@@ -3,8 +3,9 @@
 module Sinatra
   module Kagero
     module Runtime
-      SOURCE = <<~JS
+      SOURCE = <<~'JS'
         const root = document.querySelector("[data-kagero-root]");
+
         let currentPage = null;
         let currentScroll = { left: 0, top: 0 };
         let pendingVisits = 0;
@@ -96,13 +97,19 @@ module Sinatra
           }
         }
 
-        function applyPage(page, { replace = false, preserveScroll = false } = {}) {
+        function renderPage(page) {
           if (!root) return;
           const html = pageHtml(page);
           if (typeof html === "string") root.innerHTML = html;
           root.setAttribute("data-page", JSON.stringify(page));
           currentPage = page;
+          if (page.props.kagero && typeof page.props.kagero.title === "string") {
+            document.title = page.props.kagero.title;
+          }
+        }
 
+        function applyPage(page, { replace = false, preserveScroll = false } = {}) {
+          renderPage(page);
           const state = { kagero: true, page, scroll: preserveScroll ? currentScroll : { left: 0, top: 0 } };
           if (replace) history.replaceState(state, "", page.url);
           else history.pushState(state, "", page.url);
@@ -110,8 +117,25 @@ module Sinatra
           if (!preserveScroll) window.scrollTo(0, 0);
         }
 
+        function showFailure() {
+          let notice = document.getElementById("kagero-visit-error");
+          if (!notice) {
+            notice = document.createElement("div");
+            notice.id = "kagero-visit-error";
+            notice.setAttribute("role", "alert");
+            document.body.prepend(notice);
+          }
+          notice.textContent = "操作に失敗しました。もう一度お試しください。";
+        }
+
         async function visit(url, options = {}) {
-          rememberScroll();
+          const method = (options.method || "GET").toUpperCase();
+          const targetUrl = new URL(url, location.href);
+          if (targetUrl.origin !== location.origin) {
+            if (method === "GET") location.href = targetUrl.href;
+            else showFailure();
+            return;
+          }
           startLoading();
           const headers = new Headers(options.headers || {});
           headers.set("X-Inertia", "true");
@@ -119,27 +143,61 @@ module Sinatra
           headers.set("X-Requested-With", "XMLHttpRequest");
           headers.set("Accept", "application/json, text/html;q=0.9");
 
+          if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+            const cookie = document.cookie.split("; ").find((entry) => entry.startsWith("XSRF-TOKEN="));
+            if (cookie) headers.set("X-XSRF-TOKEN", decodeURIComponent(cookie.slice("XSRF-TOKEN=".length)));
+          }
+
           try {
             const response = await fetch(url, {
-              method: options.method || "GET",
+              method,
               body: options.body,
               headers,
               credentials: "same-origin",
+              mode: "same-origin",
               redirect: "follow"
             });
 
+            if (new URL(response.url).origin !== location.origin) throw new Error("Cross-origin response");
+
             if (response.status === 409 && response.headers.get("X-Inertia-Location")) {
-              location.href = response.headers.get("X-Inertia-Location");
+              const destination = new URL(response.headers.get("X-Inertia-Location"), location.href);
+              const current = new URL(location.href);
+              destination.hash = "";
+              current.hash = "";
+              if (destination.href === current.href) location.reload();
+              else location.href = response.headers.get("X-Inertia-Location");
               return;
             }
 
             if (!response.ok) throw new Error(`Kagero visit failed: ${response.status}`);
 
-            const page = await response.json();
+            let page = await response.json();
+            if (!page || typeof page.component !== "string" || typeof page.url !== "string" ||
+                typeof page.version !== "string" || !page.props || typeof page.props !== "object" ||
+                Array.isArray(page.props) || !page.props.kagero ||
+                typeof page.props.kagero.html !== "string" || typeof page.props.kagero.title !== "string") {
+              throw new Error("Invalid page");
+            }
+            const pageUrl = new URL(page.url, location.href);
+            if (!["http:", "https:"].includes(pageUrl.protocol) || pageUrl.origin !== location.origin) {
+              throw new Error("Invalid page URL");
+            }
+            const partialComponent = headers.get("X-Inertia-Partial-Component");
+            if (partialComponent) {
+              if (!currentPage || partialComponent !== currentPage.component) return;
+              if (partialComponent === page.component) {
+                page = { ...page, props: { ...currentPage.props, ...page.props } };
+              }
+            }
+            rememberScroll();
+            document.getElementById("kagero-visit-error")?.remove();
             applyPage(page, {
               replace: options.replace === true,
               preserveScroll: options.preserveScroll === true
             });
+          } catch (error) {
+            showFailure();
           } finally {
             finishLoading();
           }
@@ -176,6 +234,7 @@ module Sinatra
 
           const link = target.closest("a[data-kagero]");
           if (link) {
+            if (new URL(link.href, location.href).origin !== location.origin) return;
             event.preventDefault();
             visit(link.href, {
               replace: link.dataset.kageroReplace === "true",
@@ -202,6 +261,7 @@ module Sinatra
           if (!target || !target.closest) return;
           const form = target.closest("form[data-kagero]");
           if (!form) return;
+          if (new URL(form.action, location.href).origin !== location.origin) return;
 
           event.preventDefault();
           visit(formUrl(form), {
@@ -213,9 +273,7 @@ module Sinatra
 
         window.addEventListener("popstate", (event) => {
           if (event.state && event.state.kagero && event.state.page) {
-            currentPage = event.state.page;
-            const html = pageHtml(currentPage);
-            if (typeof html === "string") root.innerHTML = html;
+            renderPage(event.state.page);
             const scroll = event.state.scroll || { left: 0, top: 0 };
             window.scrollTo(scroll.left, scroll.top);
           } else {

data/lib/sinatra/kagero/version.rb

@@ -2,6 +2,6 @@
 
 module Sinatra
   module Kagero
-    VERSION = "1.0.2"
+    VERSION = "1.1.0"
   end
 end

data/lib/sinatra/kagero.rb

@@ -43,11 +43,13 @@ module Sinatra
         body_html = page_instance.call
 
         response_props = page_props.merge(
-          kagero: {
-            component: component,
-            html: body_html,
-            title: page_instance.kagero_title
-          }
+          kagero: Sinatra::Inertia.always(
+            {
+              component: component,
+              html: body_html,
+              title: page_instance.kagero_title
+            }
+          )
         )
 
         if inertia_request?
@@ -72,11 +74,11 @@ module Sinatra
             <head>
               <meta charset="utf-8">
               <meta name="viewport" content="width=device-width,initial-scale=1">
-              <title>#{::Rack::Utils.escape_html(props.dig(:kagero, :title).to_s)}</title>
+              <title>#{::Rack::Utils.escape_html(page_hash.dig(:props, :kagero, :title).to_s)}</title>
               <script type="module">#{Sinatra::Kagero::Runtime::SOURCE}</script>
             </head>
             <body>
-              <main id="#{::Rack::Utils.escape_html(settings.kagero_root_id)}" data-kagero-root data-page="#{page_json}">#{props.dig(:kagero, :html)}</main>
+              <main id="#{::Rack::Utils.escape_html(settings.kagero_root_id)}" data-kagero-root data-page="#{page_json}">#{page_hash.dig(:props, :kagero, :html)}</main>
             </body>
           </html>
         HTML

data/runtime/kagero.js

@@ -91,13 +91,19 @@ function rememberScroll() {
   }
 }
 
-function applyPage(page, { replace = false, preserveScroll = false } = {}) {
+function renderPage(page) {
   if (!root) return;
   const html = pageHtml(page);
   if (typeof html === "string") root.innerHTML = html;
   root.setAttribute("data-page", JSON.stringify(page));
   currentPage = page;
+  if (page.props.kagero && typeof page.props.kagero.title === "string") {
+    document.title = page.props.kagero.title;
+  }
+}
 
+function applyPage(page, { replace = false, preserveScroll = false } = {}) {
+  renderPage(page);
   const state = { kagero: true, page, scroll: preserveScroll ? currentScroll : { left: 0, top: 0 } };
   if (replace) history.replaceState(state, "", page.url);
   else history.pushState(state, "", page.url);
@@ -105,8 +111,25 @@ function applyPage(page, { replace = false, preserveScroll = false } = {}) {
   if (!preserveScroll) window.scrollTo(0, 0);
 }
 
+function showFailure() {
+  let notice = document.getElementById("kagero-visit-error");
+  if (!notice) {
+    notice = document.createElement("div");
+    notice.id = "kagero-visit-error";
+    notice.setAttribute("role", "alert");
+    document.body.prepend(notice);
+  }
+  notice.textContent = "操作に失敗しました。もう一度お試しください。";
+}
+
 async function visit(url, options = {}) {
-  rememberScroll();
+  const method = (options.method || "GET").toUpperCase();
+  const targetUrl = new URL(url, location.href);
+  if (targetUrl.origin !== location.origin) {
+    if (method === "GET") location.href = targetUrl.href;
+    else showFailure();
+    return;
+  }
   startLoading();
   const headers = new Headers(options.headers || {});
   headers.set("X-Inertia", "true");
@@ -114,27 +137,61 @@ async function visit(url, options = {}) {
   headers.set("X-Requested-With", "XMLHttpRequest");
   headers.set("Accept", "application/json, text/html;q=0.9");
 
+  if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+    const cookie = document.cookie.split("; ").find((entry) => entry.startsWith("XSRF-TOKEN="));
+    if (cookie) headers.set("X-XSRF-TOKEN", decodeURIComponent(cookie.slice("XSRF-TOKEN=".length)));
+  }
+
   try {
     const response = await fetch(url, {
-      method: options.method || "GET",
+      method,
       body: options.body,
       headers,
       credentials: "same-origin",
+      mode: "same-origin",
       redirect: "follow"
     });
 
+    if (new URL(response.url).origin !== location.origin) throw new Error("Cross-origin response");
+
     if (response.status === 409 && response.headers.get("X-Inertia-Location")) {
-      location.href = response.headers.get("X-Inertia-Location");
+      const destination = new URL(response.headers.get("X-Inertia-Location"), location.href);
+      const current = new URL(location.href);
+      destination.hash = "";
+      current.hash = "";
+      if (destination.href === current.href) location.reload();
+      else location.href = response.headers.get("X-Inertia-Location");
       return;
     }
 
     if (!response.ok) throw new Error(`Kagero visit failed: ${response.status}`);
 
-    const page = await response.json();
+    let page = await response.json();
+    if (!page || typeof page.component !== "string" || typeof page.url !== "string" ||
+        typeof page.version !== "string" || !page.props || typeof page.props !== "object" ||
+        Array.isArray(page.props) || !page.props.kagero ||
+        typeof page.props.kagero.html !== "string" || typeof page.props.kagero.title !== "string") {
+      throw new Error("Invalid page");
+    }
+    const pageUrl = new URL(page.url, location.href);
+    if (!["http:", "https:"].includes(pageUrl.protocol) || pageUrl.origin !== location.origin) {
+      throw new Error("Invalid page URL");
+    }
+    const partialComponent = headers.get("X-Inertia-Partial-Component");
+    if (partialComponent) {
+      if (!currentPage || partialComponent !== currentPage.component) return;
+      if (partialComponent === page.component) {
+        page = { ...page, props: { ...currentPage.props, ...page.props } };
+      }
+    }
+    rememberScroll();
+    document.getElementById("kagero-visit-error")?.remove();
     applyPage(page, {
       replace: options.replace === true,
       preserveScroll: options.preserveScroll === true
     });
+  } catch (error) {
+    showFailure();
   } finally {
     finishLoading();
   }
@@ -171,6 +228,7 @@ document.addEventListener("click", (event) => {
 
   const link = target.closest("a[data-kagero]");
   if (link) {
+    if (new URL(link.href, location.href).origin !== location.origin) return;
     event.preventDefault();
     visit(link.href, {
       replace: link.dataset.kageroReplace === "true",
@@ -197,6 +255,7 @@ document.addEventListener("submit", (event) => {
   if (!target || !target.closest) return;
   const form = target.closest("form[data-kagero]");
   if (!form) return;
+  if (new URL(form.action, location.href).origin !== location.origin) return;
 
   event.preventDefault();
   visit(formUrl(form), {
@@ -208,9 +267,7 @@ document.addEventListener("submit", (event) => {
 
 window.addEventListener("popstate", (event) => {
   if (event.state && event.state.kagero && event.state.page) {
-    currentPage = event.state.page;
-    const html = pageHtml(currentPage);
-    if (typeof html === "string") root.innerHTML = html;
+    renderPage(event.state.page);
     const scroll = event.state.scroll || { left: 0, top: 0 };
     window.scrollTo(scroll.left, scroll.top);
   } else {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sinatra-kagero
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.1.0
 platform: ruby
 authors:
 - Kazuhiro Homma