wip

manifest.json

@@ -1,7 +1,7 @@
 {
   "vendor": "vtex",
   "name": "render-runtime",
-  "version": "8.48.2",
+  "version": "8.49.0-beta.0",
   "title": "VTEX Render runtime",
   "description": "The VTEX Render framework runtime",
   "defaultLocale": "pt-BR",

react/components/RenderProvider.tsx

@@ -6,15 +6,17 @@ import debounce from 'debounce'
 import { canUseDOM } from 'exenv'
 import { History, UnregisterCallback } from 'history'
 import PropTypes from 'prop-types'
-import { merge, mergeWith } from 'ramda'
+import { merge, mergeDeepRight } from 'ramda'
 import React, { Component, Fragment, ReactElement } from 'react'
 import { ApolloProvider } from 'react-apollo'
 import { Helmet } from 'react-helmet'
 import { IntlProvider } from 'react-intl'
 
 import { fetchAssets, getImplementation, prefetchAssets } from '../utils/assets'
+import { generateExtensions } from '../utils/blocks'
 import PageCacheControl from '../utils/cacheControl'
 import { getClient } from '../utils/client'
+import { OperationContext } from '../utils/client/links/uriSwitchLink'
 import { traverseComponent } from '../utils/components'
 import {
   isSiteEditorIframe,
@@ -37,8 +39,6 @@ import ExtensionManager from './ExtensionManager'
 import ExtensionPoint from './ExtensionPoint'
 import { RenderContextProvider } from './RenderContext'
 import RenderPage from './RenderPage'
-import { generateExtensions } from '../utils/blocks'
-import { OperationContext } from '../utils/client/links/uriSwitchLink'
 
 interface Props {
   children: ReactElement<any> | null
@@ -492,19 +492,14 @@ class RenderProvider extends Component<Props, RenderProviderState> {
   }
 
   public onPageChanged = (location: RenderHistoryLocation) => {
-    const {
-      runtime: { renderMajor },
-    } = this.props
     const {
       blocks,
       blocksTree,
       contentMap,
-      culture: { locale },
       pages: pagesState,
-      production,
       defaultExtensions,
-      route,
       loadedPages,
+      route,
     } = this.state
     const { state } = location
 
@@ -513,26 +508,10 @@ class RenderProvider extends Component<Props, RenderProviderState> {
       return
     }
 
-    const { navigationRoute, fetchPage } = state
-    const { id: page, params } = navigationRoute
-    const transientRoute = { ...route, ...navigationRoute }
-    const {
-      [page]: { allowConditions, declarer },
-    } = pagesState
-    const shouldSkipFetchNavigationData =
-      (!allowConditions && loadedPages.has(page)) || !fetchPage
+    const { navigationRoute } = state
+    const { id: maybePage } = navigationRoute
     const query = queryStringToMap(location.search) as RenderRuntime['query']
-
-    if (shouldSkipFetchNavigationData) {
-      return this.setState(
-        {
-          page,
-          query,
-          route: transientRoute,
-        },
-        () => this.afterPageChanged(page, state.scrollOptions)
-      )
-    }
+    const page = maybePage || route.id
 
     let updatedExtensions: Extensions = {}
 
@@ -549,6 +528,14 @@ class RenderProvider extends Component<Props, RenderProviderState> {
       )
     }
 
+    // route: {
+    //   ...route,
+    //   ...navigationRoute,
+    //   params: {
+    //     ...route.params,
+    //     ...navigationRoute.params,
+    //   },
+    // },
     this.setState(
       {
         extensions: replaceExtensionsWithDefault(
@@ -559,57 +546,41 @@ class RenderProvider extends Component<Props, RenderProviderState> {
         page,
         preview: true,
         query,
-        route: transientRoute,
+        route: mergeDeepRight(route, navigationRoute),
       },
       () => {
         this.replaceRouteClass(page)
         this.scrollTo(state.scrollOptions)
       }
     )
 
-    const paramsJSON = JSON.stringify(params)
-    const apolloClient = this.apolloClient
-    const routeId = page
     // Retrieve the adequate assets for the new page. Naming will
     // probably change (query will return something like routes) as
     // well as the fields that need to be retrieved, but the logic
     // that the new state (extensions and assets) will be derived from
     // the results of this query will probably remain the same.
-    return fetchNavigationPage({
-      apolloClient,
-      declarer,
-      locale,
-      paramsJSON,
-      production,
-      query: JSON.stringify(query),
-      renderMajor,
-      routeId,
-      skipCache: false,
-    }).then(
+    return fetchNavigationPage({ path: navigationRoute.path }).then(
       ({
         appsEtag,
-        cacheHints,
         components,
         extensions,
         matchingPage,
         messages,
         pages,
         settings,
       }: ParsedPageQueryResponse) => {
-        const updatedRoute = { ...transientRoute, ...matchingPage }
         this.setState(
           {
             appsEtag,
-            cacheHints: mergeWith(merge, this.state.cacheHints, cacheHints),
             components: { ...this.state.components, ...components },
             extensions: { ...this.state.extensions, ...extensions },
-            loadedPages: loadedPages.add(page),
+            loadedPages: loadedPages.add(matchingPage.routeId),
             messages: { ...this.state.messages, ...messages },
-            page,
+            page: matchingPage.routeId,
             pages,
             preview: false,
             query,
-            route: updatedRoute,
+            route: matchingPage,
             settings,
           },
           () => this.sendInfoFromIframe()
@@ -734,21 +705,8 @@ class RenderProvider extends Component<Props, RenderProviderState> {
     }
   }
 
-  public updateRuntime = async (options?: PageContextOptions) => {
-    const {
-      runtime: { renderMajor },
-    } = this.props
-    const {
-      page,
-      pages: pagesState,
-      production,
-      culture: { locale },
-      route,
-    } = this.state
-    const declarer = pagesState[page] && pagesState[page].declarer
-    const { pathname } = window.location
-    const paramsJSON = JSON.stringify(route.params || {})
-
+  public updateRuntime = async () => {
+    const { page, route } = this.state
     const {
       appsEtag,
       cacheHints,
@@ -758,17 +716,7 @@ class RenderProvider extends Component<Props, RenderProviderState> {
       pages,
       settings,
     } = await fetchNavigationPage({
-      apolloClient: this.apolloClient,
-      declarer,
-      locale,
-      paramsJSON,
-      path: pathname,
-      production,
-      query: '',
-      renderMajor,
-      routeId: page,
-      skipCache: true,
-      ...options,
+      path: route.path,
     })
 
     await new Promise<void>(resolve => {

react/typings/global.d.ts

@@ -304,20 +304,24 @@ declare global {
     pageContext: PageDataContext
     title?: string
     routeId: string
+    params: Record<string, string>
+    id: string
+    path: string
+    domain: string
   }
 
   interface PageQueryResponse {
-    blocksJSON: string
-    blocksTreeJSON: string
-    contentMapJSON: string
-    componentsJSON: string
-    extensionsJSON: string
-    messages: KeyedString[]
-    pagesJSON: string
-    appsSettingsJSON: string
-    appsEtag: string
-    cacheHintsJSON: string
-    page: MatchingPage
+    appsEtag: RenderRuntime['appsEtag']
+    blocks: RenderRuntime['blocks']
+    blocksTree: RenderRuntime['blocksTree']
+    cacheHints: RenderRuntime['cacheHints']
+    contentMap: RenderRuntime['contentMap']
+    components: RenderRuntime['components']
+    extensions: RenderRuntime['extensions']
+    messages: RenderRuntime['messages']
+    pages: RenderRuntime['pages']
+    route: MatchingPage
+    settings: RenderRuntime['settings']
   }
 
   interface DefaultPagesQueryResponse {
@@ -331,17 +335,7 @@ declare global {
     message: string
   }
 
-  interface ParsedPageQueryResponse {
-    blocks: RenderRuntime['blocks']
-    blocksTree: RenderRuntime['blocksTree']
-    contentMap: RenderRuntime['contentMap']
-    components: RenderRuntime['components']
-    extensions: RenderRuntime['extensions']
-    messages: RenderRuntime['messages']
-    pages: RenderRuntime['pages']
-    appsEtag: RenderRuntime['appsEtag']
-    settings: RenderRuntime['settings']
-    cacheHints: RenderRuntime['cacheHints']
+  interface ParsedPageQueryResponse extends PageQueryResponse {
     matchingPage: MatchingPage
   }
 

react/utils/pages.ts

@@ -247,18 +247,19 @@ export function navigate(
   const realHash = is(String, hash) ? `#${hash}` : ''
   const query = inputQuery || realQuery
 
-  const navigationRoute = page
+  const internalRoute = page
     ? getRouteFromPageName(page, pages, params)
     : getRouteFromPath(to, pages, query, realHash)
-
-  if (!navigationRoute) {
-    console.warn(
-      `Unable to find route for ${
-        page ? `page '${page}' and the passed parameters` : `path '${to}'`
-      }`
-    )
-    return false
-  }
+  const navigationRoute = internalRoute || { path: to, params: {}, id: '' }
+
+  // if (!navigationRoute) {
+  //   console.warn(
+  //     `Unable to find route for ${
+  //       page ? `page '${page}' and the passed parameters` : `path '${to}'`
+  //     }`
+  //   )
+  //   return false
+  // }
 
   // Prefix any non-absolute paths (e.g. http:// or https://) with runtime.rootPath
   if (rootPath && !navigationRoute.path.startsWith('http')) {

react/utils/routes.ts

@@ -1,12 +1,36 @@
-import navigationPageQuery from '../queries/navigationPage.graphql'
+import { isEmpty } from 'ramda'
+
 import routePreviews from '../queries/routePreviews.graphql'
-import { parseMessages } from './messages'
+import navigationPageQuery from '../queries/navigationPage.graphql'
 import { generateExtensions } from './blocks'
-import { isEmpty } from 'ramda'
+import { parseMessages } from './messages'
 
 const parsePageQueryResponse = (
   page: PageQueryResponse
 ): ParsedPageQueryResponse => {
+  const {
+    blocksTree,
+    blocks,
+    contentMap,
+    extensions: pageExtensions,
+    pages,
+    route,
+    route: { routeId },
+  } = page
+
+  const extensions =
+    !isEmpty(blocksTree) && blocksTree && blocks && contentMap
+      ? generateExtensions(blocksTree, blocks, contentMap, pages[routeId])
+      : pageExtensions
+
+  return {
+    ...page,
+    extensions,
+    matchingPage: route,
+  } as any
+}
+
+const parsePageQueryResponseOld = (page: any): any => {
   const {
     appsEtag,
     appsSettingsJSON,
@@ -88,7 +112,28 @@ const parseDefaultPagesQueryResponse = (
   }
 }
 
-export const fetchNavigationPage = ({
+const runtimeFields = [
+  'appsEtag',
+  'blocks',
+  'blocksTree',
+  'components',
+  'contentMap',
+  'extensions',
+  'messages',
+  'page',
+  'pages',
+  'query',
+  'route',
+  'runtimeMeta',
+  'settings',
+].join(',')
+
+export const fetchNavigationPage = ({ path }: { path: string }) =>
+  fetch(`${path}?__pickRuntime=${runtimeFields}`)
+    .then(response => response.json())
+    .then(parsePageQueryResponse)
+
+export const fetchNavigationPageOld = ({
   apolloClient,
   routeId,
   declarer,
@@ -116,7 +161,7 @@ export const fetchNavigationPage = ({
         data: { navigationPage: pageData },
         errors,
       }: GraphQLResult<'navigationPage', PageQueryResponse>) =>
-        errors ? Promise.reject(errors) : parsePageQueryResponse(pageData)
+        errors ? Promise.reject(errors) : parsePageQueryResponseOld(pageData)
     )
 
 const getRoutesParam = (routeIds: string[], pages: Pages) => {