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

feat(nuxt): sync useCookie state (including between tabs) #20970

Merged
merged 13 commits into from Jun 6, 2023

Conversation

xanderbarkhatov
Copy link
Contributor

@xanderbarkhatov xanderbarkhatov commented May 20, 2023

πŸ”— Linked issue

resolves #13020

❓ Type of change

  • πŸ“– Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

Use BroadcastChannel API to sync state across useCookie invocations

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@nuxt-studio
Copy link

nuxt-studio bot commented May 20, 2023

βœ… Live Preview ready!

Name Edit Preview Latest Commit
Nuxt Docs Edit on Studio β†—οΈŽ View Live Preview 8732fad

@xanderbarkhatov
Copy link
Contributor Author

Updated it to use BroadcastChannel API. Now it is synced across tabs and we don't need new Nuxt events.

@c-schwan
Copy link
Contributor

c-schwan commented Jun 5, 2023

@danielroe can you please take a look and review, thx

@c-schwan
Copy link
Contributor

c-schwan commented Jun 6, 2023

@xanderbarkhatov thx well done... @danielroe can you please review?

@danielroe
Copy link
Member

@c-schwan You do not need to ping me to review.

Copy link
Member

@pi0 pi0 left a comment

Choose a reason for hiding this comment

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

❀️

@@ -34,9 +34,28 @@ export function useCookie<T = string | null | undefined> (name: string, _opts?:
const cookie = ref<T | undefined>(cookies[name] as any ?? opts.default?.())

if (process.client) {
const callback = () => { writeClientCookie(name, cookie.value, opts as CookieSerializeOptions) }
const channel = new BroadcastChannel(`nuxt:cookies:${name}`)
Copy link
Member

Choose a reason for hiding this comment

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

However, there is small percentage of browsers not supporting this API, i would add a check guard if feature is not available.

@danielroe danielroe changed the title fix(nuxt): sync useCookie state feat(nuxt): sync useCookie state between tabs Jun 6, 2023
@danielroe danielroe merged commit a31899a into nuxt:main Jun 6, 2023
23 checks passed
@github-actions github-actions bot mentioned this pull request Jun 6, 2023
@cawa-93
Copy link
Contributor

cawa-93 commented Jun 7, 2023

Um, and how it resolved issues when two components in same tab use useCookie and got unsynchronized state?

@danielroe
Copy link
Member

They are synced even within the same tab.

antfu pushed a commit that referenced this pull request Jun 7, 2023
@xanderbarkhatov
Copy link
Contributor Author

I guess your title is a little bit confusing)

@danielroe danielroe changed the title feat(nuxt): sync useCookie state between tabs feat(nuxt): sync useCookie state (including between tabs) Jun 7, 2023
@xanderbarkhatov xanderbarkhatov deleted the fix/shared-cookie-state branch June 7, 2023 11:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useCookie state is stored independently
5 participants