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

Introduce data-turbo-track="dynamic" #1140

Merged
merged 1 commit into from
Jan 25, 2024
Merged

Conversation

afcapel
Copy link
Collaborator

@afcapel afcapel commented Jan 25, 2024

To track stylesheets and styles that we can dynamically remove when navigating.

We introduced this behaviour in #1128 and thought it would be a good default to avoid full page reloads when styles change.

However, it seems it's quite common for libraries to add stylesheets and styles to the head that they want to keep around. For example, see

So let's make this behaviour opt-in by adding a data-turbo-track="dynamic" attribute to stylesheets and styles that we want to dynamically remove when they are no longer in a new page after a navigation.

This avoids any breaking changes for existing apps.

To track stylesheets and styles that we can dynamically remove when
navigating.

We introduced this behaviour in #1128
and thought it would be a good default to avoid full page reloads when
styles change.

However, it seems it's quite common for libraries to add stylesheets
and styles to the head that they want to keep around. For example, see

- #1133
- #1139

So let's make this behaviour opt-in by adding a `data-turbo-track="dynamic"`
attribute to stylesheets and styles that we want to dynamically remove when
they are no longer in a new page navigation.

This avoids any breaking changes for existing apps.
Copy link
Collaborator

@kevinmcconnell kevinmcconnell left a comment

Choose a reason for hiding this comment

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

Looks great, thanks for adding this. It does seem like making dynamic the default would lead to too much breakage.

@afcapel afcapel merged commit 814099c into main Jan 25, 2024
2 checks passed
@afcapel afcapel deleted the data-turbo-track-dynamic branch January 25, 2024 12:15
afcapel added a commit to pfeiffer/turbo that referenced this pull request Jan 29, 2024
* origin/main:
  Introduce `turbo:{before-,}morph-{element,attribute}` events
  Turbo 8.0.0-beta.4
  Introduce data-turbo-track="dynamic" (hotwired#1140)
  Ensure that the turbo-frame header is not sent when the turbo-frame has a target of _top (hotwired#1138)
  Turbo 8.0.0-beta.3
  Fix attribute name (hotwired#1134)
  Add InstantClick behavior (hotwired#1101)
  Revert hotwired#926. (hotwired#1126)
  Keep Trix dynamic styles in the head (hotwired#1133)
  Remove unused stylesheets when navigating (hotwired#1128)
  Upgrade idiomorph to 0.3.0 (hotwired#1122)
  Debounce page refreshes triggered via Turbo streams
  Update copyright year to 2024 (hotwired#1118)
  Turbo 8.0.0-beta.2
  Set aria-busy on the form element during a form submission (hotwired#1110)
  Dispatch `turbo:before-fetch-{request,response}` during preloading (hotwired#1034)
seanpdoyle added a commit to seanpdoyle/turbo-site that referenced this pull request Feb 15, 2024
Follow-up to [hotwired/turbo#1140][]

Removing Assets When They Change
---

As we saw above, Turbo Drive merges the contents of the `<head>`
elements. When a page depends on CSS or JavaScript that other pages do
not, it can be useful to remove them when navigating away from the page.

Rendering a `<script>`, `<link>`, or `<style>` element with
`data-turbo-track="reload"` instructs Turbo Drive to dynamically remove
the element when it is no absent from a navigation's response.

```html
<head>
  ...
  <link rel="stylesheet" href="/page-specific-styles-258e88d.css" data-turbo-track="dynamic">
  <script src="/page-specific-javascript-cbd3cd4.js" data-turbo-track="dynamic"></script>
</head>
```

[hotwired/turbo#1140]: hotwired/turbo#1140
@seanpdoyle
Copy link
Contributor

I've opened hotwired/turbo-site#168 to document this new attribute.

seanpdoyle added a commit to seanpdoyle/turbo-site that referenced this pull request Feb 20, 2024
Follow-up to [hotwired/turbo#1140][]

Removing Assets When They Change
---

As we saw above, Turbo Drive merges the contents of the `<head>`
elements. When a page depends on external assets like CSS stylesheets
that other pages do not, it can be useful to remove them when navigating
away from the page.

Rendering a `<link>` or `<style>` element with
`[data-turbo-track="dynamic"]` instructs Turbo Drive to dynamically
remove the element when it is absent from a navigation's response, and
can serve a complementary role to the `[data-turbo-track="reload"]`
attribute to avoid triggering a full page reload when deploying changes
that only affect styles.

```html
<head>
  <!-- … -->
  <link rel="stylesheet" href="/page-specific-styles-258e88d.css" data-turbo-track="dynamic">
  <style data-turbo-track="dynamic">
    .page-specific-styles { /* … */ }
  </style>
</head>
```

Note that rendering `<script>` elements with
`[data-turbo-track="dynamic"]` might unintended side-effects. When
`<script>` disconnected from the document, the JavaScript context
doesn't change, nor is the element's already evaluated JavaScript code
unloaded or changed in any way.

[hotwired/turbo#1140]: hotwired/turbo#1140
seanpdoyle added a commit to seanpdoyle/turbo-site that referenced this pull request Feb 20, 2024
Follow-up to [hotwired/turbo#1140][]

Removing Assets When They Change
---

As we saw above, Turbo Drive merges the contents of the `<head>`
elements. When a page depends on external assets like CSS stylesheets
that other pages do not, it can be useful to remove them when navigating
away from the page.

Rendering a `<link>` or `<style>` element with
`[data-turbo-track="dynamic"]` instructs Turbo Drive to dynamically
remove the element when it is absent from a navigation's response, and
can serve a complementary role to the `[data-turbo-track="reload"]`
attribute to avoid triggering a full page reload when deploying changes
that only affect styles.

```html
<head>
  <!-- … -->
  <link rel="stylesheet" href="/page-specific-styles-258e88d.css" data-turbo-track="dynamic">
  <style data-turbo-track="dynamic">
    .page-specific-styles { /* … */ }
  </style>
</head>
```

Note that rendering `<script>` elements with
`[data-turbo-track="dynamic"]` might unintended side-effects. When
`<script>` disconnected from the document, the JavaScript context
doesn't change, nor is the element's already evaluated JavaScript code
unloaded or changed in any way.

[hotwired/turbo#1140]: hotwired/turbo#1140
domchristie pushed a commit to domchristie/turbo that referenced this pull request Jul 20, 2024
To track stylesheets and styles that we can dynamically remove when
navigating.

We introduced this behaviour in hotwired#1128
and thought it would be a good default to avoid full page reloads when
styles change.

However, it seems it's quite common for libraries to add stylesheets
and styles to the head that they want to keep around. For example, see

- hotwired#1133
- hotwired#1139

So let's make this behaviour opt-in by adding a `data-turbo-track="dynamic"`
attribute to stylesheets and styles that we want to dynamically remove when
they are no longer in a new page navigation.

This avoids any breaking changes for existing apps.
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.

3 participants