feat(nuxt): support `deep: false` for data composables #23600

stafyniaksacha · 2023-10-10T11:12:51Z

resolves #12406

❓ 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

This adds new option to control output of useAsyncData and useFetch data in order to have ShallowRef instead of Ref

It also introduces a new experimental flag asyncDataShallow to change the default behavior to use shallow by default

📝 Checklist

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

bolt-new-by-stackblitz · 2023-10-10T11:12:54Z

Run & review this pull request in StackBlitz Codeflow.

nuxt-studio · 2023-10-10T11:12:54Z

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	`0f8ca26`

danielroe · 2023-10-10T11:25:10Z

What do you think about doing something like { default: shallowRef }?

stafyniaksacha · 2023-10-10T11:35:15Z

What do you think about doing something like { default: shallowRef }?

I think it's less clear about our intentions, default should be keep for default data, here it's more like ref(shallowRef(...))

danielroe · 2023-10-10T12:39:42Z

packages/nuxt/src/app/composables/asyncData.ts

-      data: ref(getCachedData() ?? options.default!()),
+      data: options.shallow
+        ? shallowRef(getCachedData() ?? options.default!())
+        : ref(getCachedData() ?? options.default!()),
      pending: ref(!hasCachedData()),
      error: toRef(nuxt.payload._errors, key),


I think we could probably always return error in a shallowRef

We need a toShallowRef here, but yes it worth it here

we could create a local util until/if it's available in core

…uxt into feat/async-data-shallow

packages/nuxt/src/core/nuxt.ts

Co-authored-by: Julien Huang <julien.h.dev@gmail.com>

docs/3.api/1.composables/use-state.md

Co-authored-by: Daniel Roe <daniel@roe.dev>

docs/3.api/1.composables/use-async-data.md

docs/3.api/1.composables/use-fetch.md

danielroe · 2023-10-12T21:38:40Z

packages/nuxt/src/app/plugins/async-data-shallow.ts

+  name: 'nuxt:async-data-shallow',
+  enforce: 'pre',
+  setup (nuxtApp) {
+    nuxtApp._asyncDataShallow = true


can we use nuxt.config.mjs instead?

nuxt/packages/nuxt/src/core/templates.ts

Lines 338 to 353 in a2fb823

export const nuxtConfigTemplate = {

filename: 'nuxt.config.mjs',

getContents: (ctx: TemplateContext) => {

return [

...Object.entries(ctx.nuxt.options.app).map(([k, v]) => `export const ${camelCase('app-' + k)} = ${JSON.stringify(v)}`),

`export const renderJsonPayloads = ${!!ctx.nuxt.options.experimental.renderJsonPayloads}`,

`export const componentIslands = ${!!ctx.nuxt.options.experimental.componentIslands}`,

`export const payloadExtraction = ${!!ctx.nuxt.options.experimental.payloadExtraction}`,

`export const appManifest = ${!!ctx.nuxt.options.experimental.appManifest}`,

`export const remoteComponentIslands = ${ctx.nuxt.options.experimental.componentIslands === 'local+remote'}`,

`export const devPagesDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.dir.pages) : 'null'}`,

`export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,

`export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`

].join('\n\n')

}

}

let's defer this to another PR

docs/3.api/1.composables/use-async-data.md

stafyniaksacha added 2 commits October 10, 2023 13:05

feat: add shallow option to useAsyncData and useFetch

7546a32

docs: add shallow option to useAsyncData and useFetch

0f8ca26

stafyniaksacha and others added 3 commits October 10, 2023 13:35

Merge branch 'main' into feat/async-data-shallow

9af34b3

[autofix.ci] apply automated fixes

bcc40f0

docs: add useState and shallowRef example

6a0e0f1

danielroe reviewed Oct 10, 2023

View reviewed changes

stafyniaksacha added 3 commits October 10, 2023 14:48

feat: add asyncDataShallow experimental flag

1df9658

Merge branch 'feat/async-data-shallow' of github.com:stafyniaksacha/n…

2ac5a4c

…uxt into feat/async-data-shallow

chore: load async-data-shallow when experimental is set

1c2568a

huang-julien reviewed Oct 10, 2023

View reviewed changes

packages/nuxt/src/core/nuxt.ts Outdated Show resolved Hide resolved

chore: update packages/nuxt/src/core/nuxt.ts

04eed6a

Co-authored-by: Julien Huang <julien.h.dev@gmail.com>

stafyniaksacha requested a review from danielroe October 10, 2023 13:07

danielroe reviewed Oct 10, 2023

View reviewed changes

docs/3.api/1.composables/use-state.md Outdated Show resolved Hide resolved

chore: update docs/3.api/1.composables/use-state.md

8a237b3

Co-authored-by: Daniel Roe <daniel@roe.dev>

danielroe added the enhancement label Oct 11, 2023

danielroe reviewed Oct 12, 2023

View reviewed changes

docs/3.api/1.composables/use-async-data.md Outdated Show resolved Hide resolved

danielroe reviewed Oct 12, 2023

View reviewed changes

docs/3.api/1.composables/use-fetch.md Outdated Show resolved Hide resolved

danielroe reviewed Oct 12, 2023

View reviewed changes

danielroe added 4 commits October 16, 2023 12:33

docs: update wording

8f008a5

refactor: remove ability to set default shallow value

f064e6b

Merge remote-tracking branch 'origin/main' into feat/async-data-shallow

8286aea

refactor: rename option to deep

f16d71c

danielroe changed the title ~~feat: add shallow option to useAsyncData and useFetch~~ feat(nuxt): support deep: false for data composables Oct 16, 2023

danielroe requested review from antfu and lihbr October 16, 2023 11:47

huang-julien reviewed Oct 16, 2023

View reviewed changes

docs/3.api/1.composables/use-async-data.md Show resolved Hide resolved

danielroe added this to the 3.8 milestone Oct 16, 2023

danielroe added the 3.x label Oct 16, 2023

danielroe merged commit 830f4f4 into nuxt:main Oct 16, 2023

github-actions bot mentioned this pull request Oct 16, 2023

v3.8.0 #23446

Merged

TheAlexLichter mentioned this pull request Nov 1, 2023

Using shallowRef for useState #24068

Closed

4 tasks

TheAlexLichter pushed a commit that referenced this pull request Dec 11, 2023

feat(nuxt): support deep: false for data composables (#23600)

8622825

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(nuxt): support `deep: false` for data composables #23600

feat(nuxt): support `deep: false` for data composables #23600

Uh oh!

stafyniaksacha commented Oct 10, 2023 •

edited

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Oct 10, 2023

Uh oh!

nuxt-studio bot commented Oct 10, 2023

Uh oh!

danielroe commented Oct 10, 2023

Uh oh!

stafyniaksacha commented Oct 10, 2023

Uh oh!

danielroe Oct 10, 2023

Uh oh!

stafyniaksacha Oct 10, 2023 •

edited

Loading

Uh oh!

danielroe Oct 12, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielroe Oct 12, 2023

Uh oh!

danielroe Oct 16, 2023

Uh oh!

Uh oh!

Uh oh!

	export const nuxtConfigTemplate = {
	filename: 'nuxt.config.mjs',
	getContents: (ctx: TemplateContext) => {
	return [
	...Object.entries(ctx.nuxt.options.app).map(([k, v]) => `export const ${camelCase('app-' + k)} = ${JSON.stringify(v)}`),
	`export const renderJsonPayloads = ${!!ctx.nuxt.options.experimental.renderJsonPayloads}`,
	`export const componentIslands = ${!!ctx.nuxt.options.experimental.componentIslands}`,
	`export const payloadExtraction = ${!!ctx.nuxt.options.experimental.payloadExtraction}`,
	`export const appManifest = ${!!ctx.nuxt.options.experimental.appManifest}`,
	`export const remoteComponentIslands = ${ctx.nuxt.options.experimental.componentIslands === 'local+remote'}`,
	`export const devPagesDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.dir.pages) : 'null'}`,
	`export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
	`export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`
	].join('\n\n')
	}
	}

Uh oh!

feat(nuxt): support deep: false for data composables #23600

feat(nuxt): support deep: false for data composables #23600

Uh oh!

Conversation

stafyniaksacha commented Oct 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

bolt-new-by-stackblitz bot commented Oct 10, 2023

Uh oh!

nuxt-studio bot commented Oct 10, 2023

✅ Live Preview ready!

Uh oh!

danielroe commented Oct 10, 2023

Uh oh!

stafyniaksacha commented Oct 10, 2023

Uh oh!

danielroe Oct 10, 2023

Choose a reason for hiding this comment

Uh oh!

stafyniaksacha Oct 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielroe Oct 12, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielroe Oct 12, 2023

Choose a reason for hiding this comment

Uh oh!

danielroe Oct 16, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

feat(nuxt): support `deep: false` for data composables #23600

feat(nuxt): support `deep: false` for data composables #23600

stafyniaksacha commented Oct 10, 2023 •

edited

Loading

stafyniaksacha Oct 10, 2023 •

edited

Loading