create-vike - npm Package Compare versions

Comparing version 0.0.336 to 0.0.338

boilerplate-react-ts/package.json

@@ -33,3 +33,3 @@ {
     "typescript": "^5.3.3",
-    "vike": "^0.4.171",
+    "vike": "^0.4.173",
     "vite": "^5.0.10"
@@ -36,0 +36,0 @@ },

boilerplate-react/package.json

@@ -24,3 +24,3 @@ {
     "sirv": "^2.0.3",
-    "vike": "^0.4.171",
+    "vike": "^0.4.173",
     "vite": "^5.0.10"
@@ -27,0 +27,0 @@ },

boilerplate-react/renderer/+onRenderClient.jsx

@@ -5,3 +5,3 @@ // https://vike.dev/onRenderClient
 import ReactDOM from 'react-dom/client'
-import { PageShell } from './PageShell'
+import { PageLayout } from './PageLayout'
 import { getPageTitle } from './getPageTitle'
@@ -21,5 +21,5 @@
   const page = (
-    <PageShell pageContext={pageContext}>
+    <PageLayout pageContext={pageContext}>
       <Page />
-    </PageShell>
+    </PageLayout>
   )
@@ -26,0 +26,0 @@ if (pageContext.isHydration) {

boilerplate-react/renderer/+onRenderHtml.jsx

@@ -5,3 +5,3 @@ // https://vike.dev/onRenderHtml
 import ReactDOMServer from 'react-dom/server'
-import { PageShell } from './PageShell'
+import { PageLayout } from './PageLayout'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
@@ -20,5 +20,5 @@ import logoUrl from './logo.svg'
   const pageHtml = ReactDOMServer.renderToString(
-    <PageShell pageContext={pageContext}>
+    <PageLayout pageContext={pageContext}>
       <Page />
-    </PageShell>
+    </PageLayout>
   )
@@ -25,0 +25,0 @@

boilerplate-vue-ts/package.json

@@ -24,3 +24,3 @@ {
     "typescript": "^5.3.3",
-    "vike": "^0.4.171",
+    "vike": "^0.4.173",
     "vite": "^5.0.10",
@@ -27,0 +27,0 @@ "vue": "^3.3.10",

boilerplate-vue-ts/renderer/app.ts

 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'
 
@@ -12,13 +14,17 @@ function createApp(pageContext: 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)
@@ -29,8 +35,8 @@ 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)
 
@@ -40,8 +46,4 @@ 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')
 }

boilerplate-vue-ts/renderer/useData.ts

 // 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)
+}

boilerplate-vue-ts/renderer/usePageContext.ts

@@ -12,3 +12,3 @@ // https://vike.dev/usePageContext
 /** https://vike.dev/usePageContext */
-function usePageContext() {
+function usePageContext(): PageContext {
   const pageContext = inject(key)
@@ -19,4 +19,4 @@ if (!pageContext) throw new Error('setPageContext() not called in parent')
 
-function setPageContext(app: App, pageContext: PageContext) {
+function setPageContext(app: App, pageContext: PageContext): void {
   app.provide(key, pageContext)
 }

boilerplate-vue/package.json

@@ -18,3 +18,3 @@ {
     "sirv": "^2.0.3",
-    "vike": "^0.4.171",
+    "vike": "^0.4.173",
     "vite": "^5.0.10",
@@ -21,0 +21,0 @@ "vue": "^3.3.10"

boilerplate-vue/renderer/app.js

 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'
 
@@ -12,13 +14,16 @@ function createApp(pageContext) {
 
-  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)
@@ -29,10 +34,14 @@ 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')
+}

boilerplate-vue/renderer/useData.js

 // 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.json

 {
   "name": "create-vike",
-  "version": "0.0.336",
+  "version": "0.0.338",
   "license": "MIT",
@@ -5,0 +5,0 @@ "bin": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111699

increased by0.99%

Number of package files

156

increased by1.96%

Lines of code

2329

increased by1.53%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

12

increased byInfinity%

Published versions last week

1

increased byInfinity%

No dependency changes