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

fix(useScript): variable scope bug that stops scripts being unmounted #103

Merged
merged 7 commits into from
Jan 13, 2025

Conversation

webdevian
Copy link
Contributor

I ran into this bug when testing for scripts being removed from the DOM.

When the script element is first created (L32) it was not assigned to the script variable that the useEffect return function is using to remove the element (L57)

Copy link

changeset-bot bot commented Jan 10, 2025

🦋 Changeset detected

Latest commit: b7052a7

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

This PR includes changesets to release 1 package
Name Type
hoofd 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

@JoviDeCroock
Copy link
Member

Needs a changeset

@webdevian
Copy link
Contributor Author

I've never used changesets before and can't see any that exist in the repo but I clicked the link above and it seems to have created one

@JoviDeCroock
Copy link
Member

@webdevian can you rebase this against main?

@webdevian
Copy link
Contributor Author

@JoviDeCroock I think that is done now?

@JoviDeCroock
Copy link
Member

@webdevian you have failing tests

@webdevian
Copy link
Contributor Author

Ok, the 2 failing tests aren't working in main either. The existing tags aren't being reused, it is adding duplicate tags to the head

stdout | __tests__/useScript.test.tsx > useScript > should reuse an existing tag
<script type="application/javascript" crossorigin="anonymous" async="true" src="test.js"></script><script crossorigin="anonymous" src="test.js" async="true"></script>

stdout | __tests__/useScript.test.tsx > useScript > should reuse an existing tag to fill text
<script crossorigin="anonymous" src="test.js" async="true"></script><script type="application/ld+json" id="rich-text">{"key":"value"}</script><script type="application/ld+json" id="rich-text"></script>

I will make some changes to useScript and to the tests

@JoviDeCroock
Copy link
Member

@webdevian
Copy link
Contributor Author

They pass, but they are not actually testing that existing script tag is re-used, just that a new tag is present in the head.

See my updated tests for more explicit checks on number of script elements, and checking the attributes without a full string comparison. I've also had to change the hook to allow preExistingElements[0] to be modified

@webdevian
Copy link
Contributor Author

I've also added a couple of tests for the unmount

@JoviDeCroock JoviDeCroock merged commit 070924b into 0no-co:main Jan 13, 2025
2 checks passed
@github-actions github-actions bot mentioned this pull request Jan 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants