Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.
/frameworkPublic archive

feat(nuxt): automatically generate unique keys for keyed composables - #4955

Merged
pi0 merged 28 commits into
mainfrom
feat/magic-keys
Jul 7, 2022
Merged

feat(nuxt): automatically generate unique keys for keyed composables#4955
pi0 merged 28 commits into
mainfrom
feat/magic-keys

Conversation

@danielroe

@danielroedanielroe commented May 12, 2022

Copy link
Copy Markdown
Member

🔗 Linked issue

resolvesnuxt/nuxt#13963, resolvesnuxt/nuxt#13951, resolvesnuxt/nuxt#13583

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 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)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR automatically generates fallback keys for useState, useAsyncData, useFetch, useLazyAsyncData and useLazyFetch. If no key is provided by the user, or one can't be used (if, for example, functions are passed in the options to useFetch or useLazyFetch) then the fallback key is used instead.

Fallback keys are unique to the file & line number of the call to one of the keyed composables above. (So if a user uses one of them in their own composable, the fallback key will be shared across all possible calls to this composable, rather than being unique to each call.)

I've also updated the types in the documentation for useAsyncData and useFetch where there were some typos.

Further note: It would be nice to have native support in unplugin for parsing using acorn-compatible AST: unjs/unplugin#90. When that's possible, we can refactor this slightly into a native unplugin rather than just using it as a utility within the webpack builder...

📝 Checklist

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

@danielroedanielroe added enhancement New feature or request dx 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing labels May 12, 2022
@danielroe
danielroe requested a review from pi0May 12, 2022 13:30
@danielroedanielroe self-assigned this May 12, 2022
@netlify

netlifyBot commented May 12, 2022

Copy link
Copy Markdown

Deploy Preview for nuxt3-docs canceled.

NameLink
🔨 Latest commit4c42bc6
🔍 Latest deploy loghttps://app.netlify.com/sites/nuxt3-docs/deploys/62c7073cf895cf0008394b42

Comment thread.eslintrc
Comment threaddocs/content/3.api/1.composables/use-async-data.md Outdated
Comment threaddocs/content/3.api/1.composables/use-async-data.md Outdated
Comment threadpackages/vite/src/plugins/magic-keys.ts Outdated
Comment threadpackages/vite/src/plugins/magic-keys.ts Outdated
Comment threadpackages/vite/src/plugins/magic-keys.ts Outdated
Comment threadpackages/vite/src/plugins/magic-keys.ts
Comment threadpackages/vite/src/plugins/magic-keys.ts Outdated
fallback?: string
): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true> {
// eslint-disable-next-line prefer-const
let [key, handler, options] = (typeof _key === 'string' ? [_key, _handler, _options] : typeof _options === 'string' ? [_options, _key, {}] : [fallback, _key, _options]) as [string, (ctx?: NuxtApp) => Promise<DataT>, AsyncDataOptions<DataT, Transform, PickKeys>]

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Perf: We don't need array creation and shift on normal (string, fn, obj?) usage.

We can use a variable swap for (fn, obj?) (is this even valid and handled when magic-keys pluign is not working ?!)

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Yes, this works even if the plugin isn't working, as long as the user provides a key. If they don't, they will get an error message: 'asyncData key must be a string'.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

And you're right, we could swap variables around, but we would lose internal typing for those variables by doing it that way.

@danielroe
danielroe requested a review from pi0May 17, 2022 08:02
@danielroe

Copy link
Copy Markdown
MemberAuthor

@pi0 Let me know when you plan to review this and I will resolve conflicts.

@pi0

pi0 commented Jun 17, 2022

Copy link
Copy Markdown
Member

You can resolve :)

@danielroe

danielroe commented Jul 6, 2022

Copy link
Copy Markdown
MemberAuthor

Redoing merge as we can drop #5710 in this PR. There is no need for a warning as a key is automatically provided in this case.

Comment threadpackages/nuxt/src/app/composables/asyncData.ts Outdated
pi0
pi0 approved these changes Jul 7, 2022
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

3.xdxenhancementNew feature or request🍰 p2-nice-to-havePriority 2: nothing is broken but it's worth addressing

Projects

None yet

2 participants

@danielroe@pi0