Use components to handle RenderingTarget context

[JamieB-gu]

The concept of a RenderingTarget was introduced in #11239 to allow components to handle the different targets DCAR can render for. So far it has been used to represent two possible targets: "web" and "apps". Its value is, at present, made available through two different mechanisms:

1. Provided via context, as introduced in trial using context for renderingTarget #8704.
2. Passed as a prop; which is common, for example, when the props also need to vary by target.

The config approach in (1) results in code that often looks something like this:

const MyComponent = () => {
  const { renderingTarget } = useConfig();

  return (
    <>
      {renderingTarget === 'Web' && (
        <div>Some web UI</div>
      )}
      {renderingTarget === 'Apps' && (
        <div>Some apps UI</div>
      )}
    </>
  );
};

occasionally with:

const isWeb = renderingTarget === 'Web';
const isApps = renderingTarget === 'Apps';

included to prevent repetition in components where the condition needs to be checked several times.

Suggested Change

The above code could arguably be made a little easier to read and reason about, with less boilerplate, if we were to introduce a pair of components to abstract away the checks for the RenderingTarget:

const MyComponent = () => (
  <>
    <WebOnly>
      <div>Some web UI</div>
    </WebOnly>
    <AppsOnly>
      <div>Some apps UI</div>
    </AppsOnly>
  </>
);

With this approach, developers would have to think less about context, create fewer intermediate variables, and write fewer conditional checks. Note that we only envisage this replacing mechanism (1) above, in most or all cases; mechanism (2), passing RenderingTarget via props, would remain unaltered.

The purpose of this change would be to improve the developer experience, and therefore we would appreciate feedback from developers who work on DCAR. It's only worth doing if people will find it useful!

Alternatives

One alternative might be to use a single component and pass the renderingTarget as a prop:

const MyComponent = () => (
  <RenderingTarget target="web">
    <div>Some web UI</div>
  </RenderingTarget >
  <RenderingTarget target="apps">
    <div>Some apps UI</div>
  </RenderingTarget >
);

If anyone would prefer this approach, please comment! Likewise, if anyone would prefer different names for the components in either this or the proposal above, please suggest them.

[cemms1]

I really like the idea of simplifying things for developers working in this repo and believe that creating <WebOnly /> and <AppsOnly /> components achieves this goal 🙌

[frederickobrien]

This is fab, @JamieB-gu. The <WebOnly /> and <AppsOnly /> approach feels clear and intuitive. Assuming the value in config would be removed as part of the switch?

[JamieB-gu]

Thanks @frederickobrien !

These new components will need some way to know whether the current render is for dotcom or apps, so I would still expect them to retrieve that information via React context. At the moment the context we're using is config, although it could be broken out into a separate context if needed.

The implementation might look something like this:

type Props = {
    children: ReactNode;
};

const WebOnly = ({ children }: Props) => {
    const { renderingTarget } = useConfig();

    return renderingTarget === 'Web' ? <>{children}</> : null;
};