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

refactor(nuxt): don't wrap server placeholders/client fallbacks #21980

Merged
merged 8 commits into from Sep 13, 2023
Merged

refactor(nuxt): don't wrap server placeholders/client fallbacks #21980

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e2054ea
feat: add noClientOnlyTrasnform
Jul 6, 2023
4769e09
fix: set client side NuxtClientFallback as no client transform
Jul 6, 2023
2fd406f
docs: correct JSdoc and typo
Jul 6, 2023
c733a35
Merge branch 'main' into feat/noClientOnlyTransform
huang-julien Jul 12, 2023
bdd3b3a
Merge branch 'main' into feat/noClientOnlyTransform
danielroe Aug 3, 2023
197c932
refactor: mark field as internal
huang-julien Aug 25, 2023
a0281c4
Merge remote-tracking branch 'origin/main' into feat/noClientOnlyTran…
danielroe Sep 13, 2023
97c96e6
refactor: mark server placeholder + NuxtClientFallback as raw
danielroe Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/nuxt/src/components/loader.ts
View file
Open in desktop
Expand Up @@ -59,7 +59,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
return identifier
}

const isClientOnly = component.mode === 'client' && component.pascalName !== 'NuxtClientFallback'
const isClientOnly = component.mode === 'client' && !component.noClientOnlyTransform
if (isClientOnly) {
imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }]))
identifier += '_client'
Expand Down
3 changes: 2 additions & 1 deletion packages/nuxt/src/core/nuxt.ts
View file
Open in desktop
Expand Up @@ -251,7 +251,8 @@ async function initNuxt (nuxt: Nuxt) {
name: 'NuxtClientFallback',
priority: 10, // built-in that we do not expect the user to override
filePath: resolve(nuxt.options.appDir, 'components/client-fallback.client'),
mode: 'client'
mode: 'client',
noClientOnlyTransform: true
Copy link
Member Author

Choose a reason for hiding this comment

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

Is there a better naming for this ?

Copy link
Member

Choose a reason for hiding this comment

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

prewrapped? raw?

Copy link
Contributor

Choose a reason for hiding this comment

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

raw might be confusing since vue has markRaw which you might use on a component https://vuejs.org/api/reactivity-advanced.html#markraw

Copy link
Member Author

Choose a reason for hiding this comment

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

oh i'd prefer raw over prewrapped 😅

})

addComponent({
Expand Down
5 changes: 5 additions & 0 deletions packages/schema/src/types/components.ts
View file
Open in desktop
Expand Up @@ -16,6 +16,11 @@ export interface Component {
* components will be used instead of lower priority components.
*/
priority?: number
/**
* This prevent the component to be transformed with a `createClientOnly()` client-side if the mode is `client`
* An example is the `<NuxtClientFallback>` component which handles it's hydration client-side
*/
noClientOnlyTransform?: boolean
Copy link
Member

Choose a reason for hiding this comment

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

I would consider using this internally for NuxtClientFallback to test before making it a public property. Or do you think it's a common enough use-case that we need an API for it?

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not sure about that 🤔 I guess we'd need to know if some users need it. It's mainly a way to keep side-effects modules only on 1 side (server or client).

Copy link
Member

Choose a reason for hiding this comment

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

I'd be happy to merge an fix needing this with an internal property that we set and consume for <NuxtClientFallback>, rather than exposing this as a public property for components which can be enabled by users ...

Copy link
Member Author

Choose a reason for hiding this comment

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

let's mark it private for now 👍
i think @internal should be enough to hide it ? 🤔

}

export interface ScanDir {
Expand Down