rename contextProps to pageContext, and addContextProps to `add…

…PageContext` (fix #58) BREAKING CHANGE: Replace all occurences in your source code of `addContextProps` to `addPageContext`, and all occurences of `contextProps` to `pageContext`. There is no need for semantic replacing: you can simply replace text, for example with a linux terminal: - `git ls-files | xargs sed -i "s/addContextProps/addPageContext/g"` - `git ls-files | xargs sed -i "s/contextProps/pageContext/g"`
vikejs · May 25, 2021 · aedf9fc · aedf9fc
1 parent b6b0d45
commit aedf9fc
Show file tree

Hide file tree

Showing 74 changed files with 567 additions and 569 deletions.
diff --git a/README.md b/README.md
diff --git a/boilerplates/boilerplate-react-ts/pages/_default/_default.page.client.tsx b/boilerplates/boilerplate-react-ts/pages/_default/_default.page.client.tsx
@@ -6,11 +6,11 @@ import { PageLayout } from "./PageLayout";
 hydrate();
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage();
+  const { Page, pageContext } = await getPage();
 
   ReactDOM.hydrate(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>,
     document.getElementById("page-view")
   );

diff --git a/boilerplates/boilerplate-react-ts/pages/_default/_default.page.server.tsx b/boilerplates/boilerplate-react-ts/pages/_default/_default.page.server.tsx
@@ -2,7 +2,7 @@ import ReactDOMServer from "react-dom/server";
 import React from "react";
 import { PageLayout } from "./PageLayout";
 import { html } from "vite-plugin-ssr";
-import { ContextProps, ReactComponent } from "./types";
+import { PageContext, ReactComponent } from "./types";
 import logoUrl from "./logo.svg";
 
 export { render };
@@ -13,14 +13,14 @@ const passToClient = ["pageProps"];
 
 function render({
   Page,
-  contextProps,
+  pageContext,
 }: {
   Page: ReactComponent;
-  contextProps: ContextProps;
+  pageContext: PageContext;
 }) {
   const pageHtml = ReactDOMServer.renderToString(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>
   );
   const title = "Vite SSR app";

diff --git a/boilerplates/boilerplate-react-ts/pages/_default/types.ts b/boilerplates/boilerplate-react-ts/pages/_default/types.ts
@@ -1,5 +1,5 @@
 export type ReactComponent = (pageProps: PageProps) => JSX.Element;
 export type PageProps = {};
-export type ContextProps = {
+export type PageContext = {
   pageProps: PageProps;
 };
diff --git a/boilerplates/boilerplate-react-ts/server/index.ts b/boilerplates/boilerplate-react-ts/server/index.ts
@@ -24,8 +24,8 @@ async function startServer() {
   const renderPage = createPageRender({ viteDevServer, isProduction, root });
   app.get("*", async (req, res, next) => {
     const url = req.originalUrl;
-    const contextProps = {};
-    const result = await renderPage({ url, contextProps });
+    const pageContext = {};
+    const result = await renderPage({ url, pageContext });
     if (result.nothingRendered) return next();
     res.status(result.statusCode).send(result.renderResult);
   });

diff --git a/boilerplates/boilerplate-react/pages/_default/_default.page.client.jsx b/boilerplates/boilerplate-react/pages/_default/_default.page.client.jsx
@@ -6,11 +6,11 @@ import { PageLayout } from "./PageLayout";
 hydrate();
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage();
+  const { Page, pageContext } = await getPage();
 
   ReactDOM.hydrate(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>,
     document.getElementById("page-view")
   );

diff --git a/boilerplates/boilerplate-react/pages/_default/_default.page.server.jsx b/boilerplates/boilerplate-react/pages/_default/_default.page.server.jsx
@@ -10,10 +10,10 @@ export { passToClient };
 // See https://github.com/brillout/vite-plugin-ssr#data-fetching
 const passToClient = ["pageProps"];
 
-function render({ Page, contextProps }) {
+function render({ Page, pageContext }) {
   const pageHtml = ReactDOMServer.renderToString(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>
   );
   const title = "Vite SSR app";

diff --git a/boilerplates/boilerplate-react/server/index.js b/boilerplates/boilerplate-react/server/index.js
@@ -24,8 +24,8 @@ async function startServer() {
   const renderPage = createPageRender({ viteDevServer, isProduction, root });
   app.get("*", async (req, res, next) => {
     const url = req.originalUrl;
-    const contextProps = {};
-    const result = await renderPage({ url, contextProps });
+    const pageContext = {};
+    const result = await renderPage({ url, pageContext });
     if (result.nothingRendered) return next();
     res.status(result.statusCode).send(result.renderResult);
   });

diff --git a/boilerplates/boilerplate-vue-ts/pages/_default/_default.page.client.ts b/boilerplates/boilerplate-vue-ts/pages/_default/_default.page.client.ts
@@ -4,7 +4,7 @@ import { createApp } from './app'
 hydrate()
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage()
-  const app = createApp(Page, contextProps)
+  const { Page, pageContext } = await getPage()
+  const app = createApp(Page, pageContext)
   app.mount('#app')
 }
diff --git a/boilerplates/boilerplate-vue-ts/pages/_default/_default.page.server.ts b/boilerplates/boilerplate-vue-ts/pages/_default/_default.page.server.ts
@@ -1,7 +1,7 @@
 import { renderToString } from '@vue/server-renderer'
 import { html } from 'vite-plugin-ssr'
 import { createApp } from './app'
-import { ContextProps, VueComponent } from './types'
+import { PageContext, VueComponent } from './types'
 import logoUrl from './logo.svg'
 
 export { render }
@@ -10,8 +10,8 @@ export { passToClient }
 // See https://github.com/brillout/vite-plugin-ssr#data-fetching
 const passToClient = ['pageProps', 'routeParams']
 
-async function render({ Page, contextProps }: { Page: VueComponent; contextProps: ContextProps }) {
-  const app = createApp(Page, contextProps)
+async function render({ Page, pageContext }: { Page: VueComponent; pageContext: PageContext }) {
+  const app = createApp(Page, pageContext)
   const appHtml = await renderToString(app)
   const title = 'Vite SSR app'
   const description = 'An app using Vite and vite-plugin-ssr.'

diff --git a/boilerplates/boilerplate-vue-ts/pages/_default/app.ts b/boilerplates/boilerplate-vue-ts/pages/_default/app.ts
@@ -1,18 +1,18 @@
 import { createSSRApp, defineComponent, h } from 'vue'
 import PageLayout from './PageLayout.vue'
-import { ContextProps } from './types'
+import { PageContext } from './types'
 
 export { createApp }
 
-function createApp(Page: any, contextProps: ContextProps) {
+function createApp(Page: any, pageContext: PageContext) {
   const PageWithLayout = defineComponent({
     render() {
       return h(
         PageLayout,
         {},
         {
           default() {
-            return h(Page, contextProps.pageProps || {})
+            return h(Page, pageContext.pageProps || {})
           }
         }
       )
@@ -21,9 +21,9 @@ function createApp(Page: any, contextProps: ContextProps) {
 
   const app = createSSRApp(PageWithLayout)
 
-  // We make `contextProps.routeParams` available in all components as `$routeParams`
+  // We make `pageContext.routeParams` available in all components as `$routeParams`
   // (e.g. `$routeParams.movieId` for a Route String `/movie/:movieId`).
-  app.config.globalProperties.$routeParams = contextProps.routeParams
+  app.config.globalProperties.$routeParams = pageContext.routeParams
 
   return app
 }
diff --git a/boilerplates/boilerplate-vue-ts/pages/_default/types.ts b/boilerplates/boilerplate-vue-ts/pages/_default/types.ts
@@ -1,5 +1,5 @@
 export type PageProps = {}
-export type ContextProps = {
+export type PageContext = {
   pageProps?: PageProps
   routeParams: Record<string, string>
 }

diff --git a/boilerplates/boilerplate-vue-ts/server/index.ts b/boilerplates/boilerplate-vue-ts/server/index.ts
@@ -24,8 +24,8 @@ async function startServer() {
   const renderPage = createPageRender({ viteDevServer, isProduction, root })
   app.get('*', async (req, res, next) => {
     const url = req.originalUrl
-    const contextProps = {}
-    const result = await renderPage({ url, contextProps })
+    const pageContext = {}
+    const result = await renderPage({ url, pageContext })
     if (result.nothingRendered) return next()
     res.status(result.statusCode).send(result.renderResult)
   })

diff --git a/boilerplates/boilerplate-vue/pages/_default/_default.page.client.js b/boilerplates/boilerplate-vue/pages/_default/_default.page.client.js
@@ -4,7 +4,7 @@ import { createApp } from './app'
 hydrate()
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage()
-  const app = createApp(Page, contextProps)
+  const { Page, pageContext } = await getPage()
+  const app = createApp(Page, pageContext)
   app.mount('#app')
 }
diff --git a/boilerplates/boilerplate-vue/pages/_default/_default.page.server.js b/boilerplates/boilerplate-vue/pages/_default/_default.page.server.js
@@ -9,8 +9,8 @@ export { passToClient }
 // See https://github.com/brillout/vite-plugin-ssr#data-fetching
 const passToClient = ['pageProps', 'routeParams']
 
-async function render({ Page, contextProps }) {
-  const app = createApp(Page, contextProps)
+async function render({ Page, pageContext }) {
+  const app = createApp(Page, pageContext)
   const appHtml = await renderToString(app)
   const title = 'Vite SSR app'
   const description = 'An app using Vite and vite-plugin-ssr.'

diff --git a/boilerplates/boilerplate-vue/pages/_default/app.js b/boilerplates/boilerplate-vue/pages/_default/app.js
@@ -3,15 +3,15 @@ import PageLayout from './PageLayout.vue'
 
 export { createApp }
 
-function createApp(Page, contextProps) {
+function createApp(Page, pageContext) {
   const PageWithLayout = {
     render() {
       return h(
         PageLayout,
         {},
         {
           default() {
-            return h(Page, contextProps.pageProps || {})
+            return h(Page, pageContext.pageProps || {})
           }
         }
       )
@@ -20,9 +20,9 @@ function createApp(Page, contextProps) {
 
   const app = createSSRApp(PageWithLayout)
 
-  // We make `contextProps.routeParams` available in all components as `$routeParams`
+  // We make `pageContext.routeParams` available in all components as `$routeParams`
   // (e.g. `$routeParams.movieId` for a Route String `/movie/:movieId`).
-  app.config.globalProperties.$routeParams = contextProps.routeParams
+  app.config.globalProperties.$routeParams = pageContext.routeParams
 
   return app
 }
diff --git a/boilerplates/boilerplate-vue/server/index.js b/boilerplates/boilerplate-vue/server/index.js
@@ -24,8 +24,8 @@ async function startServer() {
   const renderPage = createPageRender({ viteDevServer, isProduction, root })
   app.get('*', async (req, res, next) => {
     const url = req.originalUrl
-    const contextProps = {}
-    const result = await renderPage({ url, contextProps })
+    const pageContext = {}
+    const result = await renderPage({ url, pageContext })
     if (result.nothingRendered) return next()
     res.status(result.statusCode).send(result.renderResult)
   })

diff --git a/examples/.testPages.ts b/examples/.testPages.ts
@@ -46,9 +46,9 @@ function testPages(viewFramework: 'vue' | 'react', cmd: 'npm run start' | 'npm r
     // The HTML is from the first page before client-side routing
     const html = await page.content()
     // `page.content()` doesn't return the original HTML (it dumps the DOM to HTML).
-    // Therefore only the serialized `contextProps` tell us the original HTML.
+    // Therefore only the serialized `pageContext` tell us the original HTML.
     expect(html).toContain(
-      `<script>window.__vite_plugin_ssr = {pageId: "\\u002Fpages\\u002Findex", contextProps: (function(a){return {pageProps:a,docTitle:a${
+      `<script>window.__vite_plugin_ssr = {pageId: "\\u002Fpages\\u002Findex", pageContext: (function(a){return {pageProps:a,docTitle:a${
         viewFramework === 'vue' ? ',routeParams:{}' : ''
       }}}(void 0))}</script>`
     )

diff --git a/examples/base-url/pages/_default/_default.page.client.jsx b/examples/base-url/pages/_default/_default.page.client.jsx
@@ -6,11 +6,11 @@ import { PageLayout } from "./PageLayout";
 hydrate();
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage();
+  const { Page, pageContext } = await getPage();
 
   ReactDOM.hydrate(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>,
     document.getElementById("page-view")
   );

diff --git a/examples/base-url/pages/_default/_default.page.server.jsx b/examples/base-url/pages/_default/_default.page.server.jsx
@@ -9,10 +9,10 @@ export { passToClient };
 
 const passToClient = ["pageProps"];
 
-function render({ Page, contextProps }) {
+function render({ Page, pageContext }) {
   const pageHtml = ReactDOMServer.renderToString(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>
   );
 

diff --git a/examples/base-url/server/index.js b/examples/base-url/server/index.js
@@ -31,8 +31,8 @@ async function startServer() {
   });
   app.get("*", async (req, res, next) => {
     const url = req.originalUrl;
-    const contextProps = {};
-    const result = await renderPage({ url, contextProps });
+    const pageContext = {};
+    const result = await renderPage({ url, pageContext });
     if (result.nothingRendered) return next();
     res.status(result.statusCode).send(result.renderResult);
   });

diff --git a/examples/cloudflare-workers/pages/_default/_default.page.client.jsx b/examples/cloudflare-workers/pages/_default/_default.page.client.jsx
@@ -6,11 +6,11 @@ import { PageLayout } from "./PageLayout";
 hydrate();
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage();
+  const { Page, pageContext } = await getPage();
 
   ReactDOM.hydrate(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>,
     document.getElementById("page-view")
   );

diff --git a/examples/cloudflare-workers/pages/_default/_default.page.server.jsx b/examples/cloudflare-workers/pages/_default/_default.page.server.jsx
@@ -9,10 +9,10 @@ export { passToClient };
 
 const passToClient = ["pageProps"];
 
-function render({ Page, contextProps }) {
+function render({ Page, pageContext }) {
   const pageHtml = ReactDOMServer.renderToString(
     <PageLayout>
-      <Page {...contextProps.pageProps} />
+      <Page {...pageContext.pageProps} />
     </PageLayout>
   );
 

diff --git a/examples/cloudflare-workers/server/index.js b/examples/cloudflare-workers/server/index.js
@@ -26,8 +26,8 @@ async function startServer() {
   const renderPage = createPageRender({ viteDevServer, isProduction, root });
   app.get("*", async (req, res, next) => {
     const url = req.originalUrl;
-    const contextProps = {};
-    const result = await renderPage({ url, contextProps });
+    const pageContext = {};
+    const result = await renderPage({ url, pageContext });
     if (result.nothingRendered) return next();
     res.status(result.statusCode).send(result.renderResult);
   });

diff --git a/examples/cloudflare-workers/worker/ssr.js b/examples/cloudflare-workers/worker/ssr.js
@@ -7,8 +7,8 @@ export { handleSsr };
 const renderPage = createPageRender({ isProduction: true });
 
 async function handleSsr(url) {
-  const contextProps = {};
-  const result = await renderPage({ url, contextProps });
+  const pageContext = {};
+  const result = await renderPage({ url, pageContext });
   if (result.nothingRendered) {
     return null;
   } else {

diff --git a/examples/graphql-apollo/.test.spec.ts b/examples/graphql-apollo/.test.spec.ts
@@ -9,7 +9,7 @@ test("page is rendered to HTML", async () => {
   );
   expect(html).toContain("<button>Counter <span>0</span></button>");
   expect(html).toMatch(
-    '<script>window.__vite_plugin_ssr = {pageId: "\\u002Fpages\\u002Findex", contextProps: (function(a){return {apolloIntialState:{ROOT_QUERY:'
+    '<script>window.__vite_plugin_ssr = {pageId: "\\u002Fpages\\u002Findex", pageContext: (function(a){return {apolloIntialState:{ROOT_QUERY:'
   );
 });
 

diff --git a/examples/graphql-apollo/pages/_default/_default.page.client.jsx b/examples/graphql-apollo/pages/_default/_default.page.client.jsx
@@ -7,8 +7,8 @@ import App from "../App";
 hydrate();
 
 async function hydrate() {
-  const { Page, contextProps } = await getPage();
-  const apolloClient = makeApolloClient(contextProps.apolloIntialState);
+  const { Page, pageContext } = await getPage();
+  const apolloClient = makeApolloClient(pageContext.apolloIntialState);
   ReactDOM.hydrate(
     <App apolloClient={apolloClient}>
       <Page />

diff --git a/examples/graphql-apollo/pages/_default/_default.page.server.jsx b/examples/graphql-apollo/pages/_default/_default.page.server.jsx
@@ -4,13 +4,13 @@ import { getDataFromTree } from "@apollo/client/react/ssr";
 import App from "../App";
 
 export { render };
-export { addContextProps };
+export { addPageContext };
 export { passToClient };
 
 const passToClient = ["apolloIntialState"];
 
-function render({ contextProps }) {
-  const { pageHtml } = contextProps;
+function render({ pageContext }) {
+  const { pageHtml } = pageContext;
   return html`<!DOCTYPE html>
     <html>
       <body>
@@ -19,8 +19,8 @@ function render({ contextProps }) {
     </html>`;
 }
 
-async function addContextProps({ Page, contextProps }) {
-  const { apolloClient } = contextProps;
+async function addPageContext({ Page, pageContext }) {
+  const { apolloClient } = pageContext;
   const tree = (
     <App apolloClient={apolloClient}>
       <Page />

diff --git a/examples/graphql-apollo/server/index.js b/examples/graphql-apollo/server/index.js
@@ -34,8 +34,8 @@ async function startServer() {
     // Otherwise, our response to a request might include sensitive cached query results
     // from a previous request. Source: https://www.apollographql.com/docs/react/performance/server-side-rendering/#example
     const apolloClient = makeApolloClient();
-    const contextProps = { apolloClient };
-    const result = await renderPage({ url, contextProps });
+    const pageContext = { apolloClient };
+    const result = await renderPage({ url, pageContext });
     if (result.nothingRendered) return next();
     res.status(result.statusCode).send(result.renderResult);
   });