Creating a generic component map resolver for flexible applications

Question

Creating a generic component map resolver for flexible applications

Currently, I am engaged in a project where the backend allows for the modeling of dynamic content that is later displayed as Components on the frontend.

Everything seems to be functioning well, except when dealing with models where the dynamic content consists of an array of union types that need to be resolved to components.

In regular JavaScript, handling this is straightforward without any concerns. However, I aim to statically type the component mapper.

My objective is to develop a mapper that can work with this syntax and automatically deduce type names (from keys) and properties (from values), while ensuring only ComponentType values are accepted:

// PageComponentMapper.ts
import componentMapperFactory from './componentMapperFactory'

import Hero from './Hero'
import InstagramFeed from './InstagramFeed'
import FrameBuilder from './FrameBuilder'

export default componentMapperFactory({ 
  Hero, 
  InstagramFeed, 
  FrameBuilder 
})

Sample Usage:

import { ComponentProps } from 'react'
import PageComponentMapper from './PageComponentMapper'

type PageComponentMapperProps = ComponentProps<typeof PageComponentMapper>
type PageContentItem = 
  PageComponentMapperProps['props'] & 
  { key: string } & 
  { type: PageComponentMapperProps['type'] }

Resulting Types:

type PageComponentMapperProps = {
  props: HeroProps | InstagramFeedProps | FrameBuilderProps,
  type: "Hero" | "InstagramFeed" | "FrameBuilder"
}

Progress So Far: View here

This implementation of the component mapper:

import { createElement, ComponentType } from "react";

interface ComponentResolverProps<
  ResolvableComponentTypeNames,
  ResolvableComponentPropTypes extends {}
> {
  type: ResolvableComponentTypeNames;
  props: ResolvableComponentPropTypes;
}

// How to infer type names and prop types from map?
export default function componentMapperFactory<
  AvailableComponentTypeNames extends string,
  AvailableComponentPropTypes
>(
  map: {
    [K in AvailableComponentTypeNames]: ComponentType<
      AvailableComponentPropTypes
    >
  }
) {
  return function resolveComponentFromMap({
    type,
    props
  }: ComponentResolverProps<
    AvailableComponentTypeNames,
    AvailableComponentPropTypes
  >) {
    const component = map[type];

    if (!component) {
      return null;
    }

    return createElement(component, props);
  };
}

Priorly, I used the approach where type names were not provided and defaulted to strings, which proved ineffective in distinguishing between typenames.

I also experimented with:

export default function componentMapperFactory<
  C extends { [key: string]: ComponentType }
>(
  map: {
    [N in keyof C]: C[N] extends ComponentType<infer P>
      ? (P extends unknown ? ComponentType<{}> : C[N])
      : never
  }
) {
  return function resolveComponentFromMap({
    type,
    props
  }: {
    type: keyof C;
    props: ComponentProps<C["string"]>;
  }) {
    const component = map[type];

    if (!component) {
      return null;
    }

    return createElement(component, props);
  };
}

However, this method failed to retain prop types, and the complex syntax made it challenging to navigate.

Explore the CodeSandbox of this approach: Visit here

In summary: how can I modify the componentMapperFactory so that I no longer require explicit type arguments like:

export default componentMapperFactory({ 
  Hero, 
  InstagramFeed, 
  FrameBuilder 
})

And achieve these resulting types for

ComponentProps<typeof PageComponentMapper>

?

type PageComponentMapperProps = {
  props: HeroProps | InstagramFeedProps | FrameBuilderProps,
  type: "Hero" | "InstagramFeed" | "FrameBuilder"
}

reactjs typescript generics polymorphism

Answer 1

Answer №1

To successfully achieve your objective, you must define all component types and validate the props based on each component type. The key is to create a comprehensive map of all components and extract two crucial types:

The type of possible components: essentially the keys in the map
The type of component props for a specific component: this can be challenging because props valid for a 'Hero' component may not be suitable for an 'InstagramFeed' component. To address this issue, utilize a generic type tied to the component type that will determine the appropriate props type.

PageComponentMapper.ts


import Hero from "./Hero";
import FrameBuilder from "./FrameBuilder";
import InstagramFeed from "./InstagramFeed";
import componentMapperFactory from "./componentMapperFactory";

export default componentMapperFactory({
  Hero,
  FrameBuilder,
  InstagramFeed
});

componentMapperFactory.ts

import { createElement } from "react";

interface MapType {
  // necessary for Parameters<T[K]> functionality
  [key: string]: (...args: any) => any;
}

export default function componentMapperFactory<T extends MapType>(
  contentTypeMap: T
) {
  // 1. K represents any key from the map
  return function<K extends keyof T>({
    type,
    props
  }: {
    type: K;
    // 2. Retrieve the component function with key 'K' and use the first parameter's type as props
    props: Parameters<T[K]>[0];
  }) {
    const Component = contentTypeMap[type];
    if (!Component) {
      return null;
    }
    return createElement(Component, props);
  };
}

For further information, refer to the TS documentation on generics and Parameters

Answer 2

To successfully achieve your objective, you must define all component types and validate the props based on each component type. The key is to create a comprehensive map of all components and extract two crucial types:

The type of possible components: essentially the keys in the map
The type of component props for a specific component: this can be challenging because props valid for a 'Hero' component may not be suitable for an 'InstagramFeed' component. To address this issue, utilize a generic type tied to the component type that will determine the appropriate props type.

PageComponentMapper.ts


import Hero from "./Hero";
import FrameBuilder from "./FrameBuilder";
import InstagramFeed from "./InstagramFeed";
import componentMapperFactory from "./componentMapperFactory";

export default componentMapperFactory({
  Hero,
  FrameBuilder,
  InstagramFeed
});

componentMapperFactory.ts

import { createElement } from "react";

interface MapType {
  // necessary for Parameters<T[K]> functionality
  [key: string]: (...args: any) => any;
}

export default function componentMapperFactory<T extends MapType>(
  contentTypeMap: T
) {
  // 1. K represents any key from the map
  return function<K extends keyof T>({
    type,
    props
  }: {
    type: K;
    // 2. Retrieve the component function with key 'K' and use the first parameter's type as props
    props: Parameters<T[K]>[0];
  }) {
    const Component = contentTypeMap[type];
    if (!Component) {
      return null;
    }
    return createElement(Component, props);
  };
}

For further information, refer to the TS documentation on generics and Parameters

Answer 3

Answer №2

Let me give it a shot, and please let me know if I'm off track with this.

A while back, I developed a Typescript type definitions generator specifically for Contentful. This generator creates an interface and implementation for each Contentful content-type based on a JSON file representing the space. You can check out the code here.

My approach involved creating a "TypeDirectory" interface to convert an Interface into an Implementation. By referencing various fields of the type directory using a common key, I was able to achieve this.

export interface TypeDirectory {
  'campus': C.ICampus;
  'codeButton': C.ICodeButton;
  'card': C.ICard;
  'campus-page': C.ICampusPage;
  'dropdownMenu': C.IDropdownMenu;
  'faq': C.IFaq;
  ...
}

export interface ClassDirectory {
  'campus': C.Campus;
  'codeButton': C.CodeButton;
  'card': C.Card;
  'campus-page': C.CampusPage;
  'dropdownMenu': C.DropdownMenu;
  'faq': C.Faq;
  ...
}

/** Wraps a raw JSON object representing a Contentful entry with the appropriate Class implementation for that type. */
export function wrap<CT extends keyof TypeDirectory>(entry: TypeDirectory[CT]): ClassDirectory[CT] {
  const id = entry.sys.contentType.sys.id
  switch (id) {
    case 'campus':
      return new C.Campus(entry)
    case 'codeButton':
      return new C.CodeButton(entry)
    case 'card':
      return new C.Card(entry)
    ...
    default:
      throw new Error('Unknown content type:' + id)
}

I've applied a similar strategy in other scenarios where properties need to be extracted from a union type. You could implement a Directory type like this:

interface TypeDirectory {
    "Hero": { props: HeroProps, impl: Hero },
    "InstagramFeed": { props: InstagramFeedProps, impl: InstagramFeed }
}

function componentMapperFactory<K extends keyof TypeDirectory>(key: K): (props: TypeDirectory[K]['props']) => TypeDirectory[K]['impl'] {
    return function (props: any) {
        // React.createElement...
    } as any
}

const heroFactory = componentMapperFactory('Hero')
const feedFactory = componentMapperFactory('InstagramFeed')

type AnyTypeKey = keyof TypeDirectory
const whateverKey: AnyTypeKey = '...' as any // get from API
const whateverProps: TypeDirectory[AnyTypeKey]['props'] = JSON.parse('' /* get from API */)
const whateverFactory = componentMapperFactory<AnyTypeKey>(whateverKey)
const whateverType: TypeDirectory[AnyTypeKey]['impl'] = whateverFactory(whateverProps)

https://i.stack.imgur.com/7wP1J.png https://i.stack.imgur.com/peqx5.png

Playground Link

Answer 4

Let me give it a shot, and please let me know if I'm off track with this.

A while back, I developed a Typescript type definitions generator specifically for Contentful. This generator creates an interface and implementation for each Contentful content-type based on a JSON file representing the space. You can check out the code here.

My approach involved creating a "TypeDirectory" interface to convert an Interface into an Implementation. By referencing various fields of the type directory using a common key, I was able to achieve this.

export interface TypeDirectory {
  'campus': C.ICampus;
  'codeButton': C.ICodeButton;
  'card': C.ICard;
  'campus-page': C.ICampusPage;
  'dropdownMenu': C.IDropdownMenu;
  'faq': C.IFaq;
  ...
}

export interface ClassDirectory {
  'campus': C.Campus;
  'codeButton': C.CodeButton;
  'card': C.Card;
  'campus-page': C.CampusPage;
  'dropdownMenu': C.DropdownMenu;
  'faq': C.Faq;
  ...
}

/** Wraps a raw JSON object representing a Contentful entry with the appropriate Class implementation for that type. */
export function wrap<CT extends keyof TypeDirectory>(entry: TypeDirectory[CT]): ClassDirectory[CT] {
  const id = entry.sys.contentType.sys.id
  switch (id) {
    case 'campus':
      return new C.Campus(entry)
    case 'codeButton':
      return new C.CodeButton(entry)
    case 'card':
      return new C.Card(entry)
    ...
    default:
      throw new Error('Unknown content type:' + id)
}

I've applied a similar strategy in other scenarios where properties need to be extracted from a union type. You could implement a Directory type like this:

interface TypeDirectory {
    "Hero": { props: HeroProps, impl: Hero },
    "InstagramFeed": { props: InstagramFeedProps, impl: InstagramFeed }
}

function componentMapperFactory<K extends keyof TypeDirectory>(key: K): (props: TypeDirectory[K]['props']) => TypeDirectory[K]['impl'] {
    return function (props: any) {
        // React.createElement...
    } as any
}

const heroFactory = componentMapperFactory('Hero')
const feedFactory = componentMapperFactory('InstagramFeed')

type AnyTypeKey = keyof TypeDirectory
const whateverKey: AnyTypeKey = '...' as any // get from API
const whateverProps: TypeDirectory[AnyTypeKey]['props'] = JSON.parse('' /* get from API */)
const whateverFactory = componentMapperFactory<AnyTypeKey>(whateverKey)
const whateverType: TypeDirectory[AnyTypeKey]['impl'] = whateverFactory(whateverProps)

https://i.stack.imgur.com/7wP1J.png https://i.stack.imgur.com/peqx5.png

Playground Link

Creating a generic component map resolver for flexible applications

Answer №1

Answer №2

Similar questions

What is the method to alter the color of an SVG source within an image tag?

Adjust padding for smaller devices in React using Material UI

Angular 2 approach to retrieving items from an Observable<Xyz[]>

Update nested child object in React without changing the original state

Only function components can utilize hooks within their body. The useState functionality is currently not functioning as expected

Converting JSON objects into TypeScript classes: A step-by-step guide

Combining Different Types of Errors

Utilize setState to showcase data fetched from AJAX request

Looking to retrieve selections when the inputValue changes in react-select?

Invalid anchorEl prop given for MUI component

TypeError thrown by Mapbox markers

How to hide the border on the left and right sides of a phone number input in Tail

Creating a dynamic return statement in typescript: A step-by-step guide

The component `style` requires a callback function as a getter for its configuration, but `undefined` was received instead. Remember to always capitalize component names at the beginning

Issue encountered when importing a font in TypeScript due to an error in the link tag's crossorigin

React's setState function is overriding the current state

I am looking to replicate a DOM element using Angular 4

How can I extract just the initial 2 letters of a country name using AmCharts maps?

Enforce directory organization and file naming conventions within a git repository by leveraging eslint

Which is the best choice for a large-scale production app: caret, tilde, or a fixed package.json