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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove defer from inline scripts #119

Closed
Siilwyn opened this issue Feb 15, 2021 · 3 comments 路 Fixed by #94
Closed

Remove defer from inline scripts #119

Siilwyn opened this issue Feb 15, 2021 · 3 comments 路 Fixed by #94
Milestone
v1.1.0

Comments

@Siilwyn
Copy link

Siilwyn commented Feb 15, 2021

馃憢 hi it's me again, sorry!

I found my website build with microsite contains some HTML5 validation errors, quickly discovered the same errors are present on the hello-world example site.

For the full errors, check out the online W3C validation results.
@natemoo-re
Copy link
Owner

Hey thanks for opening an issue! I can definitely remove the defer attribute from script tags.

The XML processing instructions, while not technically valid HTML5, do have well-defined, spec-compliant behavior. These are what enable partial hydration to support top-level fragments. I wrote a detailed explanation in #72, but the gist of it is that we need a non-rendering node to mark the beginning and end of the hydration points. If we were to wrap hydration points in a div or use any element (even hidden ones) to mark these points, it would interrupt document flow and break assumptions like being able to style .my-component + .my-component. Comments would be a valid HTML5 approach to this, but many minifiers and even some CDNs strip them by default, making them unsafe to rely on for critical behavior.

@Siilwyn
Copy link
Author

Siilwyn commented Feb 15, 2021

Ah I see, thanks for the insightful reply! It does feel a bit hacky but I can see the benefits too. Shall I close this or rename it to removing the defer attributes?

natemoo-re added a commit that referenced this issue Feb 15, 2021
@natemoo-re
fix(#119): remove defer from inline script
1a6fdc7
@natemoo-re natemoo-re linked a pull request Feb 15, 2021 that will close this issue
v1.1.0 #94
Merged
2 tasks
@natemoo-re
Copy link
Owner

Totally agree! I think the hacky solution is unfortunately the only workable one in this case.

Yep, feel free to rename! I already fixed that on the v1.1.0 branch, which is just waiting on a Snowpack patch release to launch.

@natemoo-re natemoo-re added this to the v1.1.0 milestone Feb 15, 2021
@Siilwyn Siilwyn changed the title HTML5 validation errors Remove defer from inline scripts Feb 16, 2021
natemoo-re added a commit that referenced this issue Feb 22, 2021
@natemoo-re
fix(#119): remove defer from inline script
4533b5d
natemoo-re added a commit that referenced this issue Feb 24, 2021
@natemoo-re
fix(#119): remove defer from inline script
4c16db0
natemoo-re added a commit that referenced this issue Mar 3, 2021
@natemoo-re
fix(#119): remove defer from inline script
8f59c74
natemoo-re added a commit that referenced this issue Mar 19, 2021
@natemoo-re
fix(#119): remove defer from inline script
5776e14
natemoo-re added a commit that referenced this issue Mar 19, 2021
@natemoo-re @eyelidlessness @sprabowo
v1.1.0 (#94)
0c9d426 
* wip: snowpack@3.0.0 changes

* fix: remove custom document logic from dev

* wip: remap snowpack@3.0.0 default output directories

* fix(#81): remove PostCSS from core dependencies

* fix(#81): remove prettier from core dependencies

* fix(83): exclude image/font MIME types from transform

* fix(dev): implements a few more snowpack@3.0.0 changes

* Ensure shared hydration chunks are included in build (#105)

Also include updated package-lock.json based on instructions in https://github.com/natemoo-re/microsite/blob/1853843192cb9e0baa8ff93f872cb595a64fbe7f/.github/CONTRIBUTING.md

* Ensure head is rendered for SSG

It seems the implementation was intended to achieve this sort of isolation the same way `docContext` is used. But the `useRef` version was basically just sending any children in `Head` into the memory hole on build.

* Add another page just to validate that each page gets a new head context as expected

* chore: changeset

* chore: release 1.1.0-next.4

* Fix an issue with binary public file corruption (#110)

* Ensure head is rendered for SSG

It seems the implementation was intended to achieve this sort of isolation the same way `docContext` is used. But the `useRef` version was basically just sending any children in `Head` into the memory hole on build.

* Add another page just to validate that each page gets a new head context as expected

* Fix an issue with binary public file corruption

The previous behavior was reading binary files as strings, which was corrupting them on output

* fix: missed rebase issue

* fix: properly resolve example script in CI

* fix: remove assumption that code lives in "node_modules"

* fix(examples): prefer readFile to fetch

* fix: pin preact to 10.5.10

* fix: pin snowpack to 3.0.x

* chore: changeset

* chore: v1.1.0-next.5

* chore: fixup package-locks

* chore: fixup package-lock files

* chore: ignore logfiles

* Fix requestIdleCallback logic (#112)

* fix(#111): hydration failure in safari

* chore: update package lock

* fix(#111): use requestIdleCallback shim

* chore: changeset

* fix: update createPersistentFragment for preact@10.5.11+

* chore: changeset

* chore: v1.1.0-next.6

* chore: bump package-lock

* chore: update example locks

* fix(#119): remove `defer` from inline script

* Omit base tag by default (#117)

* Omit base tag by default

* Ensure resources are prefixed with `/` when base tag is omitted

* Lol whoops I meant to remove this

* fix(#115): do not include vendor chunk in hydrateBindings

* chore: publish create-microsite@0.2.0

* chore: add changeset

* chore: v1.1.0-next.7

* chore(deps): snowpack@3.0.13

* fix(#125): prefer pinned Skypack URLs

* chore: remove debug

* chore: changeset

* chore: 1.1.0-next.8

* WIP: dev ssr (#113)

* fix(dev): implements a few more snowpack@3.0.0 changes

* Ensure shared hydration chunks are included in build (#105)

Also include updated package-lock.json based on instructions in https://github.com/natemoo-re/microsite/blob/1853843192cb9e0baa8ff93f872cb595a64fbe7f/.github/CONTRIBUTING.md

* chore: fixup package-locks

* chore: fixup package-lock files

* chore: update example locks

* WIP: dev ssr

* WIP: dev ssr getStaticProps/Paths

* feat: add proper error page handling in dev mode

* chore(examples): update deps

* feat: finalize dev SSR support

* chore(examples): add CSS-in-JS examples

* chore(examples): update goober example

* fix: cleanup deps

Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com>

* fix(#126): emit shared css modules (#127)

* chore: v1.1.0-next.9

* chore: remove package-locks?

* fix: shared CSS module logic

* chore: 1.1.0-next.10

* feat(hydration): add "fallback" prop to "withHydrate"

* fix: global chunk loading

* chore(examples): add custom ssr fallback example

* chore: v1.1.0-next.11

* Add benchmark action (#129)

* feat: add gzip/brotli to benchmark

* chore(action): add benchmark test action

* chore(action): test benchmark

* chore(action): test benchmark

* chore(action): update benchmark filter

* chore(action): update benchmark scripts

* chore: revert lockfile to v1

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark action

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): add context to benchmark message

* chore(action): update benchmark to 15 runs

* chore(action): require manual trigger for benchmark action

* chore(action): fixup benchmark script

* chore(action): add commit to benchmark action

* chore(action): fix workflow_dispatch

* docs: update benchmark

* chore: update benchmark table formatting

* chore(bench): restructure benchmarks

* chore(bench): add counter example

* chore(bench): add lighthouse scores to benchmark

* chore(bench): run benchmarks

* chore(bench): update size label

* Fix preact import regex matching other things (#135)

* docs: fix wrong variable, update css in js context (#131)

* doc: fix wrong variable name

* doc: fix file naming, since it doesn't render jsx

* doc: adding with-fela and with-goober example

* update without .md extension

* Update styling.md

* Fix preact import regex matching other things

Currently preact import regex matches other things (e.g @mdx-js/preact).

* Escape forward slashes

Co-authored-by: Sigit Prabowo <sgt@prbw.net>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Fix incorrect field used for aliases from snowpack user config (#136)

* docs: fix wrong variable, update css in js context (#131)

* doc: fix wrong variable name

* doc: fix file naming, since it doesn't render jsx

* doc: adding with-fela and with-goober example

* update without .md extension

* Update styling.md

* Fix aliases from userConfig not being loaded

Co-authored-by: Sigit Prabowo <sgt@prbw.net>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Ensure nested imports are hydrated, allow optional display name override for named exports (#140)

* final changes for v1.1.0

Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com>
Co-authored-by: eyelidlessness <gnosis@gmail.com>
Co-authored-by: Reeto Chatterjee <github@ree.to>
Co-authored-by: Sigit Prabowo <sgt@prbw.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v1.1.0
Development

Successfully merging a pull request may close this issue.

v1.1.0 natemoo-re/microsite
2 participants
@Siilwyn @natemoo-re