create-vike 0.0.336 → 0.0.338

package/README.md

@@ -0,0 +1,11 @@
+Source code of [`create-vike`](https://npmjs.com/package/create-vike) which powers:
+
+```shell
+npm init vike
+```
+```shell
+pnpm create vike
+```
+```shell
+yarn create vike
+```

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.171",
+    "vike": "^0.4.173",
     "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 { PageShell } from './PageShell'
+import { PageLayout } from './PageLayout'
 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 = (
-    <PageShell pageContext={pageContext}>
+    <PageLayout pageContext={pageContext}>
       <Page />
-    </PageShell>
+    </PageLayout>
   )
   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 { PageShell } from './PageShell'
+import { PageLayout } from './PageLayout'
 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(
-    <PageShell pageContext={pageContext}>
+    <PageLayout pageContext={pageContext}>
       <Page />
-    </PageShell>
+    </PageLayout>
   )
 
   // See https://vike.dev/head

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

@@ -1,4 +1,4 @@
-export { PageShell }
+export { PageLayout }
 
 import React from 'react'
 import PropTypes from 'prop-types'
@@ -7,13 +7,13 @@ import logoUrl from './logo.svg'
 import { PageContextProvider } from './usePageContext'
 import { Link } from './Link'
 import './css/index.css'
-import './PageShell.css'
+import './PageLayout.css'
 
-PageShell.propTypes = {
+PageLayout.propTypes = {
   pageContext: PropTypes.any,
   children: childrenPropType
 }
-function PageShell({ pageContext, children }) {
+function PageLayout({ pageContext, children }) {
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>

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.171",
+    "vike": "^0.4.173",
     "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 { PageShell } from './PageShell'
+import { PageLayout } from './PageLayout'
 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 = (
-    <PageShell pageContext={pageContext}>
+    <PageLayout pageContext={pageContext}>
       <Page />
-    </PageShell>
+    </PageLayout>
   )
   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 { PageShell } from './PageShell'
+import { PageLayout } from './PageLayout'
 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(
-    <PageShell pageContext={pageContext}>
+    <PageLayout pageContext={pageContext}>
       <Page />
-    </PageShell>
+    </PageLayout>
   )
 
   // See https://vike.dev/head

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

@@ -1,4 +1,4 @@
-export { PageShell }
+export { PageLayout }
 
 import React from 'react'
 import logoUrl from './logo.svg'
@@ -6,9 +6,9 @@ import { PageContextProvider } from './usePageContext'
 import { Link } from './Link'
 import type { PageContext } from 'vike/types'
 import './css/index.css'
-import './PageShell.css'
+import './PageLayout.css'
 
-function PageShell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
+function PageLayout({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
   return (
     <React.StrictMode>
       <PageContextProvider pageContext={pageContext}>

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.171",
+    "vike": "^0.4.173",
     "vite": "^5.0.10",
     "vue": "^3.3.10"
   },

package/boilerplate-vue/renderer/app.js

@@ -1,36 +1,45 @@
 export { createApp }
 
-import { createSSRApp, defineComponent, h, markRaw, reactive, ref } from 'vue'
-import PageShell from './PageShell.vue'
+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 PageWithShell = defineComponent({
+  const PageWithLayout = {
     render() {
-      return h(PageShell, {}, { default: () => h(pageRef.value) })
+      return h(PageLayout, {}, { default: () => h(pageRef.value) })
     }
-  })
+  }
 
-  const app = createSSRApp(PageWithShell)
+  const app = createSSRApp(PageWithLayout)
 
-  // We use `app.changePage()` to do Client Routing, see `+onRenderClient.ts`
+  // 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)
     }
   })
 
-  // When doing Client Routing, we mutate pageContext (see usage of `app.changePage()` in `+onRenderClient.ts`).
-  // We therefore use a reactive pageContext.
+  const data = pageContext.data ?? {}
+  assertDataIsObject(data)
+  const dataReactive = reactive(data)
   const pageContextReactive = reactive(pageContext)
-
-  // Make pageContext available from any Vue component
   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/useData.js

@@ -1,11 +1,18 @@
 // https://vike.dev/useData
 export { useData }
+export { setData }
 
-import { computed } from 'vue'
-import { usePageContext } from './usePageContext'
+import { inject } from 'vue'
+
+const key = Symbol()
 
 /** https://vike.dev/useData */
 function useData() {
-  const data = computed(() => usePageContext().data)
+  const data = inject(key)
+  if (!data) throw new Error('setData() not called')
   return data
 }
+
+function setData(app, data) {
+  app.provide(key, data)
+}

package/boilerplate-vue/renderer/utils.js

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

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.171",
+    "vike": "^0.4.173",
     "vite": "^5.0.10",
     "vue": "^3.3.10",
     "vue-tsc": "^2.0.11"

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

@@ -1,44 +1,46 @@
 export { createApp }
 
-import { createSSRApp, defineComponent, h, markRaw, reactive, ref } from 'vue'
-import PageShell from './PageShell.vue'
+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 PageWithShell = defineComponent({
+
+  const PageWithLayout = {
     render() {
-      return h(PageShell, {}, { default: () => h(pageRef.value) })
+      return h(PageLayout, {}, { default: () => h(pageRef.value) })
     }
-  })
+  }
 
-  const app = createSSRApp(PageWithShell)
+  const app = createSSRApp(PageWithLayout)
 
-  // We use `app.changePage()` to do Client Routing, see `+onRenderClient.ts`
+  // 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)
     }
   })
 
-  // When doing Client Routing, we mutate pageContext (see usage of `app.changePage()` in `+onRenderClient.ts`).
-  // We therefore use a reactive pageContext.
+  const data = pageContext.data ?? {}
+  assertDataIsObject(data)
+  const dataReactive = reactive(data)
   const pageContextReactive = reactive(pageContext)
-
-  // Make pageContext available from any Vue component
   setPageContext(app, pageContextReactive)
+  setData(app, dataReactive)
 
   return app
 }
 
-// Same as `Object.assign()` but with type inference
-function objectAssign<Obj extends object, ObjAddendum>(
-  obj: Obj,
-  objAddendum: ObjAddendum
-): asserts obj is Obj & ObjAddendum {
-  Object.assign(obj, objAddendum)
+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')
 }

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

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

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

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

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

@@ -0,0 +1,11 @@
+// Same as Object.assign() but with type inference
+export function objectAssign<Obj extends object, ObjAddendum>(
+  obj: Obj,
+  objAddendum: 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.336",
+  "version": "0.0.338",
   "license": "MIT",
   "bin": {
     "create-vike": "index.js"