React Component for different Node Types

[KieranTH]

Is your feature request related to a problem? Please describe.

Currently in the React system we have <ReactAsset/> for mimicking the rendering/parsing of Player externally in a React component. One thing I discovered today is that this ReactAsset does not support switches. Which makes sense as Switches aren't assets, and are structured differently.

Describe the solution you'd like

Do we need to expand the component selection in React to allow for external use of Switches in a similar manner to Assets. I imagine this issue pertains to other Node Types too such as templates.

May also be worth investigating whether a global mimic of the parsing is needed. A component which can essentially render any Node Type the same way player renders Views.

I'm interested to see what other people think!

Additional context

An example of the current limitation:

# Component
type ContainerProps = {
children: Asset[]
}
const Container = ({children}: ContainerProps) => {
 return children.map((child) => {
  return <ReactAsset {...child}/>
})
}

# Player Usage

{
  views: [ 
     {
       id: "view",
       type: "container",
       children: [
          {
            asset: {
               id: "text",
               type: "text",
               value: "Blah text"
            }
          },
          # This doesn't work, as it's getting mapped by the Container Component
          {
            dynamicSwitch: [
               {
                  case: "....",
                  asset: {...}
               }
            ]
          }
       ]
     }
  ]
}

[KieranTH]

Additional Note:

Because Player's translation layer is pre-emptive, dynamically generated Assets are unable to use expressions or bindings.

To work around this currently, you'd have to do the {{}} syntax parsing yourself for these components.

Example:

# Bindings wont work in this Component
const AssetGenerator = () => {
      const asset = {
        ...,
        id: "test-asset",
        binding: "foo"
       }
       return <ReactAsset {...asset}/>
}

const content = {
...
data: {foo: "bar"},
views: [
 {
   id: "view",
   type: "...",
   values: [
     {
       id: ...,
       type: "dynamic-asset-generator"
     }
   ]
 }
]
}