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.

Sign up for GitHub

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

Jump to bottom

Fix HMR in static build + @import HMR #2440

Merged
merged 5 commits into from
Jan 24, 2022
Merged

Fix HMR in static build + @import HMR #2440

merged 5 commits into from
Jan 24, 2022

Conversation

matthewp
Copy link
Contributor

Changes

  • Fixes HMR when using this pattern: 
    <style global>
 @import "../src/global.css";
<style>
  • Previously edits to the external CSS/etc files would not result in HMR. Actually they wouldn't result in changes even on a refresh.
  • This also fixes HMR in the static build generally, which was not adding the Vite client.
  • Upstream Vite fix required, PR in flight.

Testing

Untitled

Docs

N/A bug fix

@changeset-bot
Copy link

changeset-bot bot commented Jan 21, 2022 •
edited
Loading

🦋 Changeset detected

Latest commit: 2899856

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
astro Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jan 21, 2022
@matthewp
Copy link
Contributor Author

Closes #2317

@netlify
Copy link

netlify bot commented Jan 21, 2022 •
edited
Loading

✔️ Deploy Preview for astro-docs-2 ready!

🔨 Explore the source changes: 2899856

🔍 Inspect the deploy log: https://app.netlify.com/sites/astro-docs-2/deploys/61eed9348e238e00071ddc23

😎 Browse the preview: https://deploy-preview-2440--astro-docs-2.netlify.app/en/guides/markdown-content

@matthewp
Copy link
Contributor Author

Upstream PR: vitejs/vite#6589

jonathantneal
jonathantneal reviewed Jan 21, 2022
View reviewed changes
packages/astro/vendor/vite/dist/client/client.mjs
Comment on lines +202 to +206
function cleanUrl(pathname) {
let url = new URL(pathname, location);
url.searchParams.delete('direct');
return url.pathname + url.search;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Would you add /** comment */ above this to describe why it’s needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Remember that this is Vite built code and will change when/if we update. But yeah I can for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

adf3350

Copy link
Contributor

Choose a reason for hiding this comment

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

👍

jonathantneal
jonathantneal suggested changes Jan 21, 2022
View reviewed changes
Copy link
Contributor

@jonathantneal jonathantneal left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Looks good.

I’ve left one comment about documenting an addition. It might be covered under "Upstream Vite fix required, PR in flight."?

I wish I knew more about client.mjs in general. I actually did not know we pushed any JS to the browser. Is this only for HMR? Is this copied from the Vite bistro? Will this go away or need to move once we are using Vite proper?

@matthewp
Copy link
Contributor Author

I wish I knew more about client.mjs in general. I actually did not know we pushed any JS to the browser. Is this only for HMR? Is this copied from the Vite bistro? Will this go away or need to move once we are using Vite proper?

Yeah it's just for HMR. We are vendoring vite at the moment due to some upstream bugs. Once those are fixed we will have it as a dependency instead.

FredKSchott
FredKSchott approved these changes Jan 21, 2022
View reviewed changes
Copy link
Member

@FredKSchott FredKSchott left a comment

Choose a reason for hiding this comment

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

LGTM with 1 comment

packages/astro/src/vite-plugin-astro/index.ts Show resolved Hide resolved
jonathantneal
jonathantneal approved these changes Jan 24, 2022
View reviewed changes
Copy link
Contributor

@jonathantneal jonathantneal left a comment

Choose a reason for hiding this comment

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

Some nit comments, but ready otherwise. 🚀

packages/astro/src/core/ssr/index.ts
children: '',
});
scripts.add({
props: { type: 'module', src: new URL('../../runtime/client/hmr.js', import.meta.url).pathname },
Copy link
Contributor

Choose a reason for hiding this comment

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

I didn’t realize src is a file system path. TIL.

packages/astro/src/core/ssr/index.ts
@@ -249,7 +261,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
const tags: vite.HtmlTagDescriptor[] = [];

// dev only: inject Astro HMR client
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: Should this comment be amended?

packages/astro/src/vite-plugin-astro/compile.ts Outdated
Comment on lines 53 to 54
// When using this flag CSS because <link> and therefore goes through Vite's
// CSS pipeline. We don't need to transform here.
Copy link
Contributor

Choose a reason for hiding this comment

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

When using this flag CSS because and therefore...

I’m having trouble understanding this. Could it be written differently?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yeah, i'll amend it.

packages/astro/vendor/vite/dist/client/client.mjs
Comment on lines +202 to +206
function cleanUrl(pathname) {
let url = new URL(pathname, location);
url.searchParams.delete('direct');
return url.pathname + url.search;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

@matthewp matthewp merged commit 462e315 into main Jan 24, 2022
@matthewp matthewp deleted the css-import-cache branch January 24, 2022 17:58
@github-actions github-actions bot mentioned this pull request Jan 24, 2022
Merged
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
@matthewp
Fix HMR in static build + @import HMR (withastro#2440)
c45519f 
* Fix HMR in static build + @import HMR

* Changeset

* Add a comment on what cleanUrl is doing

* Running prettier

* Improve comments on how the static build compilation

works differently.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@FredKSchott FredKSchott FredKSchott approved these changes

@jonathantneal jonathantneal jonathantneal approved these changes

Assignees
No one assigned
Labels
pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@matthewp @jonathantneal @FredKSchott