Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow Turbo to reload the page instead of morphing #40

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

codergeek121
Copy link
Contributor

Great idea/project!

I took a first stab at #24 to allow Turbo reloads instead of morphing.
Morphing is still the default, but setting config.hotwire.spark.html_reload_strategy to "turbo" will switch the reload strategy to Turbo reloading the current page.

I'm not sure if my custom promise for waiting until the turbo page reload is fully done is the best way to reload a page with Turbo, but I haven't found a better method for waiting until a visit is done.

Morphing is the default, but setting
config.hotwire.spark.html_reload_strategy to "turbo" will switch the
reload strategy to Turbo reloading the current page.
@jorgemanrubia
Copy link
Member

Thanks a lot for working on this one 🙏! I'm traveling tomorrow, so I'll probably review it on Monday.

Something I'd like to see is to keep the scroll when reloading the page with the Turbo visit. I've seen some discussions about how to achieve that with turbo. I think that listenting to turbo:render and doing Turbo.navigator.currentVisit.scrolled = true will keep the scroll, but you can see this and this. It's been a while since I had to do this and I don't really remember the details.

Copy link
Member

@jorgemanrubia jorgemanrubia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @codergeek121. This is a great feature. I added a first round of comments. Your approach is fine but I'd like to refine things a bit. Thanks 🙏

README.md Outdated
@@ -46,6 +46,7 @@ config.hotwire.spark.html_paths += %w[ lib ]
| `stimulus_paths` | Paths where file changes trigger a Stimulus controller refresh. By default: `app/javascript/controllers`. |
| `enabled` | Enable or disable live reloading. By default, it's only enabled in `development`. |
| `logging` | Show logs in the browser console when reloading happens. It's false by default. |
| `html_reload_strategy` | Reload html by morphing (`"morph"`) or with a Turbo page reload (`"turbo"`). By default `"morph"`. Use Turbo if your app is incompatible with morphing. |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rename this option html_reload_method and offer as options morph or replace (to make this symmetric to page refresh options in Turbo)

Also, notice that the table should be formatted by aligning the column separators.


export class HtmlReloader {
static async reload() {
return new HtmlReloader().reload()
}

async reload() {
const reloadedDocument = await this.#reloadHtml()
await this.#reloadStimulus(reloadedDocument)
if(HotwireSpark.config.htmlReloadStrategy == "morph") {
Copy link
Member

@jorgemanrubia jorgemanrubia Dec 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It think it would be good to place this call in the monitoring channel: to configure one reloader or the other depending on the config options. That way, we have separated reloaders for each option. They are quite different from each other, so I think it's better if each reload method has its own class:

  reloadHtml() {
    return this.#htmlReloader.reload()
  },

  get #htmlReloader() {
    if (HotwireSpark.config.htmlReloadMethod == "morph") {
      return MorphHtmlReloader
    } else {
      return ReplaceHtmlReloader
    }
  }

@@ -46,10 +46,15 @@ def inject_options(html)
html.sub("</head>", "#{logging_option}</head>")
else
html
end
end.sub("</head>", "#{html_reload_strategy_option}</head>")
Copy link
Member

@jorgemanrubia jorgemanrubia Dec 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we have more than one option I think it would be nicer if we separated:

  • The replacement action.
  • From the logic composing the list of options
    def inject_options(html)
      html.sub("</head>", "#{options}</head>")
    end

    def options
      [ logging_option, reload_method_option ].compact.join("\n")
    end

    def logging_option
      view_helpers.tag.meta(name: "hotwire-spark:logging", content: "true") if Hotwire::Spark.logging
    end

    def reload_method_option
      view_helpers.tag.meta(name: "hotwire-spark:html-reload-strategy", content: Hotwire::Spark.html_reload_method)
    end

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I applied your suggestion 👍

An alternative/different approach could be to inject only a single meta tag with the complete JSON configuration:

view_helpers.tag.meta(name: "hotwire-spark:configuration", content: { ... }.to_json)
document.addEventListener("DOMContentLoaded", function() {
  const metaConfig = document.querySelector(`meta[name="hotwire-spark:configuration"]`)
  HotwireSpark.config = JSON.parse(metaConfig.content)
})

test/html_reload_test.rb Outdated Show resolved Hide resolved
@codergeek121
Copy link
Contributor Author

codergeek121 commented Dec 22, 2024

@jorgemanrubia your review comments make sense to me! I'll address them in the coming days 👍Thank you for the review 🙇

@codergeek121
Copy link
Contributor Author

@jorgemanrubia I applied your first review suggestions. Let me know if you want me to adapt other parts as well 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants