Skip to content

Commit

Permalink
WIP - Morphing should display error page as well
Browse files Browse the repository at this point in the history
* There's still an error after fixing an error and stimulus controller
  load twice after fixing an error
  • Loading branch information
codergeek121 committed Dec 27, 2024
1 parent 689cb1e commit 883dc60
Show file tree
Hide file tree
Showing 9 changed files with 72 additions and 23 deletions.
37 changes: 28 additions & 9 deletions app/assets/javascripts/hotwire_spark.js
Original file line number Diff line number Diff line change
Expand Up @@ -533,6 +533,12 @@ var HotwireSpark = (function () {
reload: Date.now()
});
}
class ResponseError extends Error {
constructor(message, response) {
super(message);
this.response = response;
}
}
async function reloadHtmlDocument() {
let currentUrl = cacheBustedUrl(urlWithParams(window.location.href, {
hotwire_spark: "true"
Expand All @@ -542,12 +548,14 @@ var HotwireSpark = (function () {
"Accept": "text/html"
}
});
if (!response.ok) {
throw new Error(`${response.status} when fetching ${currentUrl}`);
}
const fetchedHTML = await response.text();
const parser = new DOMParser();
return parser.parseFromString(fetchedHTML, "text/html");
const parsedResult = parser.parseFromString(fetchedHTML, "text/html");
if (response.ok) {
return parsedResult;
} else {
throw new ResponseError(`${response.status} when fetching ${currentUrl}`, parsedResult);
}
}
function getConfigurationProperty(name) {
return document.querySelector(`meta[name="hotwire-spark:${name}"]`)?.content;
Expand Down Expand Up @@ -1490,12 +1498,23 @@ var HotwireSpark = (function () {
}
async #reloadHtml() {
log("Reload html with morph...");
const reloadedDocument = await reloadHtmlDocument();
this.#updateBody(reloadedDocument.body);
return reloadedDocument;
const {
documentElement
} = await this.#reloadHtmlDocument();
return this.#updateDocument(documentElement);
}
#updateDocument(newDocument) {
Idiomorph.morph(document.documentElement, newDocument);
return newDocument;
}
#updateBody(newBody) {
Idiomorph.morph(document.body, newBody);
async #reloadHtmlDocument() {
try {
return await reloadHtmlDocument();
} catch ({
response
}) {
return response;
}
}
async #reloadStimulus() {
await StimulusReloader.reloadAll();
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/hotwire_spark.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/assets/javascripts/hotwire_spark.min.js.map

Large diffs are not rendered by default.

18 changes: 14 additions & 4 deletions app/javascript/hotwire/spark/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,27 @@ export function cacheBustedUrl(urlString) {
return urlWithParams(urlString, { reload: Date.now() })
}

class ResponseError extends Error {
constructor(message, response) {
super(message)
this.response = response
}
}

export async function reloadHtmlDocument() {
let currentUrl = cacheBustedUrl(urlWithParams(window.location.href, { hotwire_spark: "true" }))
const response = await fetch(currentUrl, { headers: { "Accept": "text/html" }})

if (!response.ok) {
throw new Error(`${response.status} when fetching ${currentUrl}`)
}

const fetchedHTML = await response.text()
const parser = new DOMParser()
return parser.parseFromString(fetchedHTML, "text/html")
const parsedResult = parser.parseFromString(fetchedHTML, "text/html")

if (response.ok) {
return parsedResult
} else {
throw new ResponseError(`${response.status} when fetching ${currentUrl}`, parsedResult)
}
}

export function getConfigurationProperty(name) {
Expand Down
18 changes: 13 additions & 5 deletions app/javascript/hotwire/spark/reloaders/morph_html_reloader.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,21 @@ export class MorphHtmlReloader {
async #reloadHtml() {
log("Reload html with morph...")

const reloadedDocument = await reloadHtmlDocument()
this.#updateBody(reloadedDocument.body)
return reloadedDocument
const { documentElement } = await this.#reloadHtmlDocument()
return this.#updateDocument(documentElement)
}

#updateBody(newBody) {
Idiomorph.morph(document.body, newBody)
#updateDocument(newDocument) {
Idiomorph.morph(document.documentElement, newDocument)
return newDocument
}

async #reloadHtmlDocument() {
try {
return await reloadHtmlDocument()
} catch ({ response }) {
return response
}
}

async #reloadStimulus() {
Expand Down
2 changes: 1 addition & 1 deletion test/dummy/config/environments/test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
config.cache_store = :null_store

# Render exception templates for rescuable exceptions and raise for other exceptions.
config.action_dispatch.show_exceptions = :rescuable
config.action_dispatch.show_exceptions = true

# Disable request forgery protection in test environment.
config.action_controller.allow_forgery_protection = false
Expand Down
12 changes: 12 additions & 0 deletions test/html_reload_test.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
require "application_system_test_case"

class HtmlReloadTest < ApplicationSystemTestCase
test "error page is displayed" do
visit root_path
assert_no_text "ZeroDivisionError"

edit_file "app/views/home/show.html.erb", replace: "_REPLACE_", with: "<%= 1 / 0 %>"

assert_text "ZeroDivisionError"
end
end
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
require "application_system_test_case"

class MorphHtmlReloadTest < ApplicationSystemTestCase
class MorphHtmlReloadTest < HtmlReloadTest
setup do
Hotwire::Spark.html_reload_method = :morph
end
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
require "application_system_test_case"

class ReplaceHtmlReloadTest < ApplicationSystemTestCase
class ReplaceHtmlReloadTest < HtmlReloadTest
setup do
Hotwire::Spark.html_reload_method = :replace
end
Expand Down

0 comments on commit 883dc60

Please sign in to comment.