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

fix: use createSSRApp to enable more efficient hydration #177

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: use createSSRApp to enable more efficient hydration #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/hydration/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { h, createApp as createClientApp, createStaticVNode, createSSRApp } from 'vue'
import { h, createStaticVNode, createSSRApp as createVueApp } from 'vue'
import type { DefineComponent as Component, Component as App } from 'vue'
import type { Props, Slots } from './types'
import { onDispose } from './hydration'

const createVueApp = import.meta.env.SSR ? createSSRApp : createClientApp

// Internal: Creates a Vue app and mounts it on the specified island root.
export default function createVueIsland (component: Component, id: string, el: Element, props: Props, slots: Slots | undefined) {
const slotFns = slots && Object.fromEntries(Object.entries(slots).map(([slotName, content]) => {
Expand All @@ -17,7 +15,7 @@ export default function createVueIsland (component: Component, id: string, el: E
appDefinition.name = `Island: ${nameFromFile(component.__file)}`

const app = createVueApp(appDefinition)
app.mount(el!, Boolean(slots))
app.mount(el!, true)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not quite sure what the hydration setting has to do with slots. And as far as i could see Boolean(slots) was always true anyway. In my (few) tests, slots was either {} or {foo:'bar'} which both are truthy.

Copy link
Owner

Choose a reason for hiding this comment

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

Probably outdated code from one of the first versions.

I've removed the second parameter this in this branch since createSSRApp will override mount to always pass true.


if (import.meta.env.DISPOSE_ISLANDS)
onDispose(id, app.unmount)
Expand Down
4 changes: 1 addition & 3 deletions packages/iles/src/client/app/composables/vueRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import type { AppContext, Component, VNode, AsyncComponentLoader } from 'vue'
import { h, getCurrentInstance, createApp, createSSRApp, ssrContextKey, withCtx } from 'vue'

const newApp = import.meta.env.SSR ? createApp : createSSRApp
import { h, getCurrentInstance, createSSRApp as newApp, ssrContextKey, withCtx } from 'vue'

export type Nodes = undefined | VNode<any, any, any> | VNode<any, any, any>[]
export type VueRenderable = AsyncComponentLoader | Component | Nodes | ((props?: any) => Nodes | Promise<Nodes>)
Expand Down
4 changes: 1 addition & 3 deletions packages/iles/src/client/app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createApp as createClientApp, createSSRApp, ref } from 'vue'
import { createSSRApp as newApp, ref } from 'vue'
import { createMemoryHistory, createRouter as createVueRouter, createWebHistory } from 'vue-router'
import { createHead } from '@vueuse/head'

Expand All @@ -16,8 +16,6 @@ import { defaultHead } from './head'
import { resolveLayout } from './layout'
import { resolveProps } from './props'

const newApp = import.meta.env.SSR ? createSSRApp : createClientApp

function createRouter (base: string | undefined, routerOptions: Partial<RouterOptions>) {
if (base === '/') base = undefined

Expand Down
8 changes: 4 additions & 4 deletions packages/iles/src/node/build/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ export async function renderPage (
const { app, head } = await createApp({ routePath: route.path, ssrProps: route.ssrProps })
let content = await renderToString(app, { islandsByPath, renderers })

// Remove comments from Vue renderer to allow plain text, RSS, or JSON output.
content = content.replace(commentsRegex, '')

// Skip HTML shell to allow Vue to render plain text, RSS, or JSON output.
if (!route.outputFilename.endsWith('.html'))
if (!route.outputFilename.endsWith('.html')) {
// Remove comments from Vue renderer to allow plain text, RSS, or JSON output.
content = content.replace(commentsRegex, '')
return content
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

See: #159 (comment)


const { headTags, htmlAttrs, bodyAttrs } = renderHeadToString(head)

Expand Down