Comments (29)
Hello.
Can you please take a look at #110?
It's about this issue and #67
It's not polished and there are decisions to be made about:
- should the component be removed
- the name of the function (maybe
createClientOnlyComponent
) - where it is exposed
- the name of the fallback slot (maybe
ssr-content
) - I need some help with a typing error when resolving import (https://github.com/vikejs/vike-vue/pull/110/files#diff-e0ffd04a4eabd913ea52d413b3cb2221e6b1ff796c6981a2adecf58a067031b3R79)
But at least it works with props, events, and slots
from vike-vue.
- should the component be removed
Does <ClientOnly>
support any use case that clientOnly()
doesn't? If not then, yes, I think we should remove it and release a breaking change and bump the minor semver. We're still on 0.x.y
so I think it's ok.
- the name of the function (maybe
createClientOnlyComponent
)
I think clientOnly()
is both succint and clear?
- where it is exposed
So far, we export utils at vike-vue/utilName
. So vike-vue/clientOnly
.
Eventually merging exports to the root export vike-vue
is a consideration, but we need to double check whether Rollup's code-splitting works (it should in principle, but we should be sure about it as bloating the client-side is a no-go).
- the name of the fallback slot (maybe
ssr-content
)
How about <template #fallback>
?
- I need some help with a typing error when resolving import (https://github.com/vikejs/vike-vue/pull/110/files#diff-e0ffd04a4eabd913ea52d413b3cb2221e6b1ff796c6981a2adecf58a067031b3R79)
I'll have a look at it later today.
from vike-vue.
- I cannot think of anything that
<ClientOnly>
can do better that the function clientOnly
does not convey that it creates a component (defineComponent
,defineAsyncComponent
- maybedefineClientOnlyComponent
)<template #fallback>
- I was thinking about avoiding as much as possible to override a named slot of the wrapped component
from vike-vue.
clientOnly
does not convey that it creates a componen
Unless I'm missing some Vue convention, I think it's ok.
<template #fallback>
- I was thinking about avoiding as much as possible to override a named slot of the wrapped component
Good point. How about an option? For example:
function clientOnly(
componentLoader: () => Component,
{ fallbackSlotName = 'fallback' }: { fallbackSlotName?: string } = {}
) {
// ...
}
from vike-vue.
- I need some help with a typing error when resolving import (https://github.com/vikejs/vike-vue/pull/110/files#diff-e0ffd04a4eabd913ea52d413b3cb2221e6b1ff796c6981a2adecf58a067031b3R79)
The generic can be any type, maybe we should make it more restrictive?
For example, TS won't complain with the following:
clientOnly(
() => 12
)
Did you mean more something like T extends { new (): ComponentPublicInstance }
instead of T extends Component = { new (): ComponentPublicInstance }
?
from vike-vue.
Honestly I was just trying to find a way to pass the type of the imported component to the result of clientOnly.
from vike-vue.
- if we allow changing the fallback slot name with parameter we lose the autocomplete
- I tested with using a Symbol for slot name - it works but autocomplete is not available and one need to import the symbol, so not very nice to use
- I went the route of using a descriptive name of 'client-only-fallback'
About typing, I cannot make heads or tails of why it accepts something like () => 2
, so if someone can bring some sanity there while still keeping autocomplete on use please help.
from vike-vue.
@4350pChris WDYT? I'll have a look at it if Chris is busy.
from vike-vue.
I don't know much about Volar, but I presume using a generic to do the trick?
function clientOnly<Component, FallbackSlotName extends string = 'fallback'>(
componentLoader: () => Component,
{ fallbackSlotName }: { fallbackSlotName?: FallbackSlotName } = {}
) {
// ...
}
See for example the type of slotName1
and slotName2
in this playground.
from vike-vue.
I cannot make it work, sorry
from vike-vue.
- if we allow changing the fallback slot name with parameter we lose the autocomplete
I can't make autocomplete work at all on my setup. I'm trying with VSCode + Vue plugin, am I missing something?
When my cursor hovers #client-only-fall
VSCode isn't suggesting #client-only-fallback
:
from vike-vue.
For me the steps are:
pnpm reset
- reload VSCode so that TS is loaded with new
vike-vue
- it should work now
I'm almost sure there is some method to force reload TS, butDeveloper: Reload Window
works for sure
from vike-vue.
Ah, it works now! Thanks. Sorry I'm a VSCode newbie 😅
from vike-vue.
No problem - I feel the same with TS magic (especially when combined with Vue)
from vike-vue.
Indeed, there doesn't seem to be any Slot type that supports a extends string
generic.
Would it be possible to have clientOnly()
use #fallback
by default and if there is a conflict with the inner component then clientOnly()
uses #client-only-fallback
instead? Maybe it's a bit tricky to implement?
from vike-vue.
It would be the same problem with TS - we cannot make the slot name dynamic and still expose it in typescript (at least I don;t know how)
from vike-vue.
It isn't dynamic and instead we define two static slots fallback
and client-only-fallback
.
from vike-vue.
Maybe it's a bit tricky to implement?
If it's too tricky then I'd say let's go for only one slot client-only-fallback
. But maybe it's worth trying? I think the docs can be clear:
Use
#client-only-fallback
if the inner component uses#fallabck
.
from vike-vue.
Ah, you mean like that (define both slots) - it might work. Meanwhile if someone can understand why () => 1
satisfies T extends Component
it would help :D
from vike-vue.
Looking at it as we speak :)
Let me have a closer look.
from vike-vue.
Btw. I think you can remove = { new (): ComponentPublicInstance }
, since source
is a required parameter.
from vike-vue.
Which makes sense from a JSX perspective.
from vike-vue.
Btw. I think you can remove = { new (): ComponentPublicInstance }, since source is a required parameter.
For some reason if I remove that we lose autocomplete for props/events/slots for resulting component
Actually, () => 1 is a valid Component
Nice - you're right
from vike-vue.
For some reason if I remove that we lose autocomplete for props/events/slots for resulting component
Sounds like a Volar quirk.
from vike-vue.
Yep, editor quirk.
I updated the PR - it has 2 commits - the second one should be removed before merge
from vike-vue.
@pdanpdan Can I merge this? Looks good from my point of view.
from vike-vue.
Yes, all done from my point of view
from vike-vue.
BTW, do you have any idea about this?
#110 (comment)
from vike-vue.
BTW, do you have any idea about this?
#110 (comment)
Unfortunately no. I tried a bit and couldn't get it working either.
from vike-vue.
Related Issues (19)
- Wrong data in `useData` after client side navigation HOT 15
- Possible leftover properties in `pageContextReactive` after `pageChange` HOT 11
- How to use vue plugin HOT 6
- `<ClientOnly>` Component HOT 3
- Dependency Dashboard
- Action Required: Fix Renovate Configuration
- Updating `lang` on client-side navigation
- Register plugins that don't use `app.use` HOT 7
- I can't get working examples HOT 3
- Improve DX of ClientOnly component HOT 3
- (Re-)introduce fine-grained head settings HOT 24
- Client side routing with catch all page throwing error HOT 4
- Progressive Rendering HOT 11
- Nuxt Comparison HOT 4
- Support for `teleports` with Vue SSR HOT 29
- Improve hooks? HOT 20
- Export Vike configuration at `/config`
- Release `vike-vue-{pinia,query}@0.1.0`? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vike-vue.