create-vike 0.0.341 → 0.0.342

package/boilerplate-react/package.json

@@ -21,7 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sirv": "^2.0.3",
-    "vike": "^0.4.176",
+    "vike": "^0.4.177",
     "vite": "^5.0.10"
   },
   "type": "module"

package/boilerplate-react/renderer/+onRenderClient.jsx

@@ -2,7 +2,7 @@
 export { onRenderClient }
 
 import ReactDOM from 'react-dom/client'
-import { PageLayout } from './PageLayout'
+import { Layout } from './Layout'
 import { getPageTitle } from './getPageTitle'
 
 let root
@@ -17,9 +17,9 @@ function onRenderClient(pageContext) {
   if (!container) throw new Error('DOM element #react-root not found')
 
   const page = (
-    <PageLayout pageContext={pageContext}>
+    <Layout pageContext={pageContext}>
       <Page />
-    </PageLayout>
+    </Layout>
   )
   if (pageContext.isHydration) {
     root = ReactDOM.hydrateRoot(container, page)

package/boilerplate-react/renderer/+onRenderHtml.jsx

@@ -2,7 +2,7 @@
 export { onRenderHtml }
 
 import ReactDOMServer from 'react-dom/server'
-import { PageLayout } from './PageLayout'
+import { Layout } from './Layout'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import logoUrl from './logo.svg'
 import { getPageTitle } from './getPageTitle'
@@ -16,9 +16,9 @@ function onRenderHtml(pageContext) {
 
   // Alternativly, we can use an HTML stream, see https://vike.dev/streaming
   const pageHtml = ReactDOMServer.renderToString(
-    <PageLayout pageContext={pageContext}>
+    <Layout pageContext={pageContext}>
       <Page />
-    </PageLayout>
+    </Layout>
   )
 
   // See https://vike.dev/head

package/boilerplate-react/renderer/{PageLayout.jsx → Layout.jsx}

@@ -1,4 +1,4 @@
-export { PageLayout }
+export { Layout }
 
 import React from 'react'
 import PropTypes from 'prop-types'
@@ -7,17 +7,17 @@ import logoUrl from './logo.svg'
 import { PageContextProvider } from './usePageContext'
 import { Link } from './Link'
 import './css/index.css'
-import './PageLayout.css'
+import './Layout.css'
 
-PageLayout.propTypes = {
+Layout.propTypes = {
   pageContext: PropTypes.any,
   children: childrenPropType
 }
-function PageLayout({ pageContext, children }) {
+function Layout({ pageContext, children }) {
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>
-        <Layout>
+        <Frame>
           <Sidebar>
             <Logo />
             <Link href="/">Welcome</Link>
@@ -25,16 +25,16 @@ function PageLayout({ pageContext, children }) {
             <Link href="/star-wars">Data Fetching</Link>
           </Sidebar>
           <Content>{children}</Content>
-        </Layout>
+        </Frame>
       </PageContextProvider>
     </React.StrictMode>
   )
 }
 
-Layout.propTypes = {
+Frame.propTypes = {
   children: childrenPropType
 }
-function Layout({ children }) {
+function Frame({ children }) {
   return (
     <div
       style={{

package/boilerplate-react-ts/package.json

@@ -30,7 +30,7 @@
     "sirv": "^2.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",
-    "vike": "^0.4.176",
+    "vike": "^0.4.177",
     "vite": "^5.0.10"
   },
   "type": "module"

package/boilerplate-react-ts/renderer/+onRenderClient.tsx

@@ -2,7 +2,7 @@
 export { onRenderClient }
 
 import ReactDOM from 'react-dom/client'
-import { PageLayout } from './PageLayout'
+import { Layout } from './Layout'
 import { getPageTitle } from './getPageTitle'
 import type { OnRenderClientAsync } from 'vike/types'
 
@@ -18,9 +18,9 @@ const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRe
   if (!container) throw new Error('DOM element #react-root not found')
 
   const page = (
-    <PageLayout pageContext={pageContext}>
+    <Layout pageContext={pageContext}>
       <Page />
-    </PageLayout>
+    </Layout>
   )
   if (pageContext.isHydration) {
     root = ReactDOM.hydrateRoot(container, page)

package/boilerplate-react-ts/renderer/+onRenderHtml.tsx

@@ -2,7 +2,7 @@
 export { onRenderHtml }
 
 import ReactDOMServer from 'react-dom/server'
-import { PageLayout } from './PageLayout'
+import { Layout } from './Layout'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import logoUrl from './logo.svg'
 import type { OnRenderHtmlAsync } from 'vike/types'
@@ -17,9 +17,9 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
 
   // Alternativly, we can use an HTML stream, see https://vike.dev/streaming
   const pageHtml = ReactDOMServer.renderToString(
-    <PageLayout pageContext={pageContext}>
+    <Layout pageContext={pageContext}>
       <Page />
-    </PageLayout>
+    </Layout>
   )
 
   // See https://vike.dev/head

package/boilerplate-react-ts/renderer/{PageLayout.tsx → Layout.tsx}

@@ -1,4 +1,4 @@
-export { PageLayout }
+export { Layout }
 
 import React from 'react'
 import logoUrl from './logo.svg'
@@ -6,13 +6,13 @@ import { PageContextProvider } from './usePageContext'
 import { Link } from './Link'
 import type { PageContext } from 'vike/types'
 import './css/index.css'
-import './PageLayout.css'
+import './Layout.css'
 
-function PageLayout({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
+function Layout({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>
-        <Layout>
+        <Frame>
           <Sidebar>
             <Logo />
             <Link href="/">Welcome</Link>
@@ -20,13 +20,13 @@ function PageLayout({ children, pageContext }: { children: React.ReactNode; page
             <Link href="/star-wars">Data Fetching</Link>
           </Sidebar>
           <Content>{children}</Content>
-        </Layout>
+        </Frame>
       </PageContextProvider>
     </React.StrictMode>
   )
 }
 
-function Layout({ children }: { children: React.ReactNode }) {
+function Frame({ children }: { children: React.ReactNode }) {
   return (
     <div
       style={{

package/boilerplate-vue/package.json

@@ -15,7 +15,7 @@
     "express": "^4.18.2",
     "node-fetch": "^3.3.2",
     "sirv": "^2.0.3",
-    "vike": "^0.4.176",
+    "vike": "^0.4.177",
     "vite": "^5.0.10",
     "vue": "^3.3.10"
   },

package/boilerplate-vue/pages/_error/+Page.vue

@@ -8,7 +8,7 @@
 import { usePageContext } from '../../renderer/usePageContext'
 
 const pageContext = usePageContext()
-let { is404, abortReason } = pageContext
+let { is404, abortReason } = pageContext.value
 if (!abortReason) {
   abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
 }

package/boilerplate-vue/renderer/+onRenderClient.js

@@ -1,7 +1,7 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { getPageTitle } from './getPageTitle'
 
 let app
@@ -11,7 +11,7 @@ async function onRenderClient(pageContext) {
   if (!pageContext.Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined')
 
   if (!app) {
-    app = createApp(pageContext)
+    app = createVueApp(pageContext)
     app.mount('#app')
   } else {
     app.changePage(pageContext)

package/boilerplate-vue/renderer/+onRenderHtml.js

@@ -3,7 +3,7 @@ export { onRenderHtml }
 
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import logoUrl from './logo.svg'
 import { getPageTitle } from './getPageTitle'
 
@@ -12,7 +12,7 @@ async function onRenderHtml(pageContext) {
   // onRenderHtml() to support SPA
   if (!pageContext.Page) throw new Error('My render() hook expects pageContext.Page to be defined')
 
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
 
   const appHtml = await renderToString(app)
 

package/boilerplate-vue/renderer/Link.vue

@@ -19,7 +19,7 @@ import { usePageContext } from './usePageContext'
 const pageContext = usePageContext()
 const { href } = useAttrs()
 const isActive = computed(() => {
-  const { urlPathname } = pageContext
+  const { urlPathname } = pageContext.value
   return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
 })
 </script>

package/boilerplate-vue/renderer/createVueApp.js

@@ -0,0 +1,28 @@
+export { createVueApp }
+
+import { createSSRApp, h, shallowRef } from 'vue'
+import { setPageContext } from './usePageContext'
+import { setData } from './useData'
+import Layout from './Layout.vue'
+
+function createVueApp(pageContext) {
+  const pageContextRef = shallowRef(pageContext)
+  const dataRef = shallowRef(pageContext.data)
+  const pageRef = shallowRef(pageContext.Page)
+
+  const RootComponent = () => h(Layout, null, () => h(pageRef.value))
+  const app = createSSRApp(RootComponent)
+  setPageContext(app, pageContextRef)
+  setData(app, dataRef)
+
+  // app.changePage() is called upon navigation, see +onRenderClient.ts
+  Object.assign(app, {
+    changePage: (pageContext) => {
+      pageContextRef.value = pageContext
+      dataRef.value = pageContext.data
+      pageRef.value = pageContext.Page
+    }
+  })
+
+  return app
+}

package/boilerplate-vue-ts/package.json

@@ -21,7 +21,7 @@
     "sirv": "^2.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3",
-    "vike": "^0.4.176",
+    "vike": "^0.4.177",
     "vite": "^5.0.10",
     "vue": "^3.3.10",
     "vue-tsc": "^2.0.11"

package/boilerplate-vue-ts/pages/_error/+Page.vue

@@ -8,7 +8,7 @@
 import { usePageContext } from '../../renderer/usePageContext'
 
 const pageContext = usePageContext()
-let { is404, abortReason } = pageContext
+let { is404, abortReason } = pageContext.value
 if (!abortReason) {
   abortReason = is404 ? 'Page not found.' : 'Something went wrong.'
 }

package/boilerplate-vue-ts/renderer/+onRenderClient.ts

@@ -1,18 +1,18 @@
 // https://vike.dev/onRenderClient
 export { onRenderClient }
 
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import { getPageTitle } from './getPageTitle'
 import type { OnRenderClientAsync } from 'vike/types'
 
-let app: ReturnType<typeof createApp>
+let app: ReturnType<typeof createVueApp>
 const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRenderClientAsync> => {
   // This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
   // to support SPA
   if (!pageContext.Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined')
 
   if (!app) {
-    app = createApp(pageContext)
+    app = createVueApp(pageContext)
     app.mount('#app')
   } else {
     app.changePage(pageContext)

package/boilerplate-vue-ts/renderer/+onRenderHtml.ts

@@ -4,7 +4,7 @@ export { onRenderHtml }
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import type { App } from 'vue'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
-import { createApp } from './app'
+import { createVueApp } from './createVueApp'
 import logoUrl from './logo.svg'
 import type { OnRenderHtmlAsync } from 'vike/types'
 import { getPageTitle } from './getPageTitle'
@@ -14,7 +14,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
   // onRenderHtml() to support SPA
   if (!pageContext.Page) throw new Error('My render() hook expects pageContext.Page to be defined')
 
-  const app = createApp(pageContext)
+  const app = createVueApp(pageContext)
 
   const appHtml = await renderToString(app)
 

package/boilerplate-vue-ts/renderer/Link.vue

@@ -19,7 +19,7 @@ import { usePageContext } from './usePageContext'
 const pageContext = usePageContext()
 const { href } = useAttrs() as { href: string }
 const isActive = computed(() => {
-  const { urlPathname } = pageContext
+  const { urlPathname } = pageContext.value
   return href === '/' ? urlPathname === href : urlPathname.startsWith(href)
 })
 </script>

package/boilerplate-vue-ts/renderer/createVueApp.ts

@@ -0,0 +1,30 @@
+export { createVueApp }
+
+import { createSSRApp, h, shallowRef } from 'vue'
+import { setPageContext } from './usePageContext'
+import { setData } from './useData'
+import Layout from './Layout.vue'
+import type { PageContext } from 'vike/types'
+import { objectAssign } from './utils'
+
+function createVueApp(pageContext: PageContext) {
+  const pageContextRef = shallowRef(pageContext)
+  const dataRef = shallowRef(pageContext.data)
+  const pageRef = shallowRef(pageContext.Page)
+
+  const RootComponent = () => h(Layout, null, () => h(pageRef.value))
+  const app = createSSRApp(RootComponent)
+  setPageContext(app, pageContextRef)
+  setData(app, dataRef)
+
+  // app.changePage() is called upon navigation, see +onRenderClient.ts
+  objectAssign(app, {
+    changePage: (pageContext: PageContext) => {
+      pageContextRef.value = pageContext
+      dataRef.value = pageContext.data
+      pageRef.value = pageContext.Page
+    }
+  })
+
+  return app
+}

package/boilerplate-vue-ts/renderer/useData.ts

@@ -3,17 +3,17 @@ export { useData }
 export { setData }
 
 import { inject } from 'vue'
-import type { App } from 'vue'
+import type { App, InjectionKey, Ref } from 'vue'
 
-const key = Symbol()
+const key: InjectionKey<Ref<unknown>> = Symbol()
 
 /** https://vike.dev/useData */
-function useData<Data>(): Data {
+function useData<Data>(): Ref<Data> {
   const data = inject(key)
   if (!data) throw new Error('setData() not called')
-  return data as any
+  return data as Ref<Data>
 }
 
-function setData(app: App, data: unknown): void {
+function setData(app: App, data: Ref<unknown>): void {
   app.provide(key, data)
 }

package/boilerplate-vue-ts/renderer/usePageContext.ts

@@ -3,18 +3,18 @@ export { usePageContext }
 export { setPageContext }
 
 import { inject } from 'vue'
-import type { App, InjectionKey } from 'vue'
+import type { App, InjectionKey, Ref } from 'vue'
 import type { PageContext } from 'vike/types'
 
-const key: InjectionKey<PageContext> = Symbol()
+const key: InjectionKey<Ref<PageContext>> = Symbol()
 
 /** https://vike.dev/usePageContext */
-function usePageContext(): PageContext {
+function usePageContext(): Ref<PageContext> {
   const pageContext = inject(key)
   if (!pageContext) throw new Error('setPageContext() not called in parent')
   return pageContext
 }
 
-function setPageContext(app: App, pageContext: PageContext): void {
+function setPageContext(app: App, pageContext: Ref<PageContext>): void {
   app.provide(key, pageContext)
 }

package/boilerplate-vue-ts/renderer/utils.ts

@@ -5,7 +5,3 @@ export function objectAssign<Obj extends object, ObjAddendum>(
 ): asserts obj is Obj & ObjAddendum {
   Object.assign(obj, objAddendum)
 }
-
-export function isObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vike",
-  "version": "0.0.341",
+  "version": "0.0.342",
   "license": "MIT",
   "bin": {
     "create-vike": "index.js"

package/boilerplate-vue/renderer/app.js

@@ -1,45 +0,0 @@
-export { createApp }
-
-import { createSSRApp, h, markRaw, reactive, ref } from 'vue'
-import PageLayout from './PageLayout.vue'
-import { setPageContext } from './usePageContext'
-import { setData } from './useData'
-import { isObject } from './utils'
-
-function createApp(pageContext) {
-  const { Page } = pageContext
-
-  const pageRef = ref(markRaw(Page))
-
-  const PageWithLayout = {
-    render() {
-      return h(PageLayout, {}, { default: () => h(pageRef.value) })
-    }
-  }
-
-  const app = createSSRApp(PageWithLayout)
-
-  // app.changePage() is called upon navigation, see +onRenderClient.ts
-  Object.assign(app, {
-    changePage: (pageContext) => {
-      const data = pageContext.data ?? {}
-      assertDataIsObject(data)
-      Object.assign(dataReactive, data)
-      Object.assign(pageContextReactive, pageContext)
-      pageRef.value = markRaw(pageContext.Page)
-    }
-  })
-
-  const data = pageContext.data ?? {}
-  assertDataIsObject(data)
-  const dataReactive = reactive(data)
-  const pageContextReactive = reactive(pageContext)
-  setPageContext(app, pageContextReactive)
-  setData(app, dataReactive)
-
-  return app
-}
-
-function assertDataIsObject(data) {
-  if (!isObject(data)) throw new Error('Return value of data() hook should be an object, undefined, or null')
-}

package/boilerplate-vue/renderer/utils.js

@@ -1,3 +0,0 @@
-export function isObject(value) {
-  return typeof value === 'object' && value !== null
-}

package/boilerplate-vue-ts/renderer/app.ts

@@ -1,46 +0,0 @@
-export { createApp }
-
-import { createSSRApp, h, markRaw, reactive, ref } from 'vue'
-import PageLayout from './PageLayout.vue'
-import { setPageContext } from './usePageContext'
-import type { PageContext } from 'vike/types'
-import { setData } from './useData'
-import { isObject, objectAssign } from './utils'
-
-function createApp(pageContext: PageContext) {
-  const { Page } = pageContext
-
-  const pageRef = ref(markRaw(Page))
-
-  const PageWithLayout = {
-    render() {
-      return h(PageLayout, {}, { default: () => h(pageRef.value) })
-    }
-  }
-
-  const app = createSSRApp(PageWithLayout)
-
-  // app.changePage() is called upon navigation, see +onRenderClient.ts
-  objectAssign(app, {
-    changePage: (pageContext: PageContext) => {
-      const data = pageContext.data ?? {}
-      assertDataIsObject(data)
-      Object.assign(dataReactive, data)
-      Object.assign(pageContextReactive, pageContext)
-      pageRef.value = markRaw(pageContext.Page)
-    }
-  })
-
-  const data = pageContext.data ?? {}
-  assertDataIsObject(data)
-  const dataReactive = reactive(data)
-  const pageContextReactive = reactive(pageContext)
-  setPageContext(app, pageContextReactive)
-  setData(app, dataReactive)
-
-  return app
-}
-
-function assertDataIsObject(data: unknown): asserts data is Record<string, unknown> {
-  if (!isObject(data)) throw new Error('Return value of data() hook should be an object, undefined, or null')
-}