Import app based on rest API response

MarcoM · June 7, 2023, 4:44pm

Hello guys,
We have the following scenario: we have a BE service returning an app name and some props to be shown to the customer.

The idea is exactly the same as is implemented in the checkoutv6, where the connector can return the appName and it will be used to render the app itself in a DIV.

The main issue we have is that we can’t fully understand how it’s done.
We are checking the render-runtime component, which seems to be the correct place to start, but we’re having issues understanding which of the exposed elements we should use and how the props should be passed.
The behaviour we find promising is here:

github.com

vtex-apps/render-runtime/blob/master/react/core/main.tsx

import 'apollo-cache-inmemory'
import 'apollo-client'
import 'apollo-link-http'
import 'apollo-link-persisted-queries'
import 'apollo-upload-client'
import 'apollo-utilities'
import 'classnames'
import 'graphql'
import EventEmitter from 'eventemitter3'
import { createBrowserHistory as createHistory } from 'history'
import queryString from 'query-string'
import React, { ReactElement } from 'react'
import { getDataFromTree } from 'react-apollo'
import {
  hydrate as hydrateDOM,
  render as renderDOM,
  unstable_createRoot,
} from 'react-dom'
import Helmet from '../components/Helmet'
import NoSSR, { useSSR } from '../components/NoSSR'

This file has been truncated. show original

renderExtension = (
extensionName: string,
destination: HTMLElement,
props = {}
)

Do you have any suggestion about how to proceed ?

Thanks
Marco