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

Script tag is injected in the wrong place (in the middle of body's attribute list) #2008

Open
2 of 10 tasks
pmpinto opened this issue Jan 24, 2023 · 1 comment
Open
2 of 10 tasks

Script tag is injected in the wrong place (in the middle of body's attribute list) #2008

pmpinto opened this issue Jan 24, 2023 · 1 comment
Assignees
@shakyShane
Labels
bug

Comments

@pmpinto
Copy link

pmpinto commented Jan 24, 2023 •
edited
Loading

Issue details

So, I'm using 11ty, which comes bundled with browser-sync by default.
All good so far.
But I'm also using Stimulus, which relies on a specific syntax to set actions: https://stimulus.hotwired.dev/reference/actions

It looks to me like browser-sync is looking for the first > char, right after <body to inject the script tag — but I could be wrong. And as you can see, when using Stimilus and using the <body> element as a Stimulus controller, it can cause some issues.

Steps to reproduce/test case

  1. Set up a simple 11ty website
  2. Add an attribute to the body tag such as data-action="access:notify->notification#show" — I believe you can avoid setting up Stimulus altogether
  3. Witness the body tag get messed up as follows:
    Source: 
    <body class="home" data-controller="application" data-action="access:notify->notification#show">
    Result:
    Screenshot 2023-01-24 at 18 25 35

Please specify which version of Browsersync, node and npm you're running

  • Browsersync v2.27.11
  • Node v18.12.0
  • Npm v8.19.2

Affected platforms

  • linux
  • windows
  • OS X
  • freebsd
  • solaris
  • other (please specify which)

Browsersync use-case

  • API — I suppose, it's the default 11ty integration
  • Gulp
  • Grunt
  • CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

{Browsersync init code here}
@shakyShane
Copy link
Contributor

Thanks @pmpinto - I'll look into this, should be reproducible in the unit tests 🙏🏻

@shakyShane shakyShane self-assigned this Feb 24, 2023
@shakyShane shakyShane added the bug label Feb 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@shakyShane shakyShane

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shakyShane @pmpinto