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

[Theme] Fix Liquid asset hot reload #4669

Merged
merged 8 commits into from
Oct 18, 2024
Merged

Conversation

frandiox
Copy link
Contributor

WHY are these changes introduced?

Fixes #2614

WHAT is this pull request doing?

When a missing .liquid asset that is referenced in the app is created anew, the server will try to hot reload it and fail.
Pairing with @jamesmengo , we found out during the first rendering, SFR renders ?1234 for the file querystring, which returns a 404.

The problem is that even after creating the file and uploading it, SFR still renders the wrong ?1234 instead of ?v=timestamp. This makes the request fail again with 404 even though the file already exists. This might be related to caching at the SFR level, I'm not sure about it.

This PR makes 3 changes:

  1. Use HotReload for CSS instead of full page reload.
  2. During CSS HotReload, it replaces the wrong ?1234 with a new ?v= timestamp.
  3. The same approach doesn't work for JS assets because we only do a full refresh. Therefore, the fix here is to use our proxy to rewrite ?1234 queries to ?v= timestamp queries. This fix would probably also work for CSS assets, but I'm keeping the previous one since it's cleaner for CSS.

How to test your changes?

  1. Reference a missing .liquid.css file from your theme.
  2. Load the page, see it provokes a 404
  3. Create the new file (or move it from another folder). It should now hot reload accordingly.

Post-release steps

Measuring impact

How do we know this change was effective? Please choose one:

  • n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
  • Existing analytics will cater for this addition
  • PR includes analytics changes to measure impact

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've considered possible documentation changes

@frandiox frandiox requested review from karreiro, jamesmengo and a team October 17, 2024 09:01
Copy link
Contributor

github-actions bot commented Oct 17, 2024

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements
72.62% (+0.02% 🔼)
8370/11525
🟡 Branches
69.15% (+0.03% 🔼)
4115/5951
🟡 Functions 71.94% 2190/3044
🟡 Lines
72.93% (+0.02% 🔼)
7913/10850

Test suite run success

1904 tests passing in 865 suites.

Report generated by 🧪jest coverage report action from 1ceb3ee

Copy link
Contributor

@karreiro karreiro left a comment

Choose a reason for hiding this comment

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

Thank you for this PR, @frandiox! 🔥🔥🚀

// The `href` property prepends the host to the pathname. Use attributes instead.
// Note: when a .liquid asset is requested but not found in SFR, it will be rendered as
// `.../assets/file.css?1234` instead of `.../assets/file.css?v=1234`. Ensure we target both.
element.setAttribute('href', element.getAttribute('href')!.replace(/(\?|&)(?:v=)?\d+$/, `$1v=${Date.now()}`))
Copy link
Contributor

Choose a reason for hiding this comment

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

😵‍💫

Copy link
Contributor

@jamesmengo jamesmengo left a comment

Choose a reason for hiding this comment

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

🎩 and code LGTM!

@frandiox frandiox added the #gsd:40767 Fortify local development experience for Liquid themes label Oct 17, 2024
@frandiox frandiox requested a review from a team October 17, 2024 23:58
@frandiox frandiox requested a review from a team as a code owner October 18, 2024 05:55
@frandiox frandiox added this pull request to the merge queue Oct 18, 2024
Merged via the queue into main with commit 7098eff Oct 18, 2024
36 checks passed
@frandiox frandiox deleted the fd-fix-liquid-asset-reload branch October 18, 2024 07:56
@frandiox
Copy link
Contributor Author

/snapit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:40767 Fortify local development experience for Liquid themes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: assets/theme.css.liquid and assets/theme.js.liquid files not hot reloading
3 participants