add mapping for jsx tag to solve tag conflict

[guoshencheng]

Add tag mapping to resolve react origin tag conflict

[guoshencheng]

Usage:

render(
  <App />
, screen, {
  jsxTagMapping: (type: string) => {
    switch(type) {
      case 'blessed-button':
        return 'button';
      case 'blessed-form':
        return 'form';
      default:
        return type;
    }
  }
});

[Yomguithereal]

Hello @guoshencheng. Thanks for the PR. Looking at it right now. Do you have an example of library where the same logic is applied so I can try to understand how it works?

[guoshencheng]

@Yomguithereal it's a Irregular solution, i'm sorry about that. i did not refer to any library. Here is a story Yesterday. i start to use react-blessed. it's good. but my project was written by typescript. when i use custom JSX tag for example box. typescript will report a compile bug like this

To resolve this problem i must add a type definition file

declare module 'react-blessed' {
  import { Widgets, screen } from 'blessed';
  import * as React from 'react';
  export function render(c: JSX.Element, s: Widgets.Screen): void;
}

declare namespace JSX {
  interface IntrinsicElements {
    'box': any
  }
}

oh yes! my code is running!

but not good for a long time. the next problem is appear, when i use a origin tag for example button. typescript will check the origin JSX tag PropType. error report like this

So a solution appeared in my mind. mapping the tag name

my code has been displayed and here place my usage

change interface in my react-blessed typescript definition file

declare module 'react-blessed' {
  import { Widgets, screen } from 'blessed';
  import * as React from 'react';
  export type JsxTagMapping = (origin: string) => string | undefined;
  export type renderOptions = {
    jsxTagMapping: JsxTagMapping,
  }
  export function render(c: JSX.Element, s: Widgets.Screen, options: renderOptions): void;
}

declare namespace JSX {
  interface IntrinsicElements {
    'box': any,
    'listtable': any,
    'blessed-button': any,
    'blessed-form': any
  }
}

And change code to render

import { render } from 'react-blessed';

render(
  <App />
, screen, {
  jsxTagMapping: (type: string) => {
    switch(type) {
      case 'blessed-button':
        return 'button';
      case 'blessed-form':
        return 'form';
      default:
        return type;
    }
  }
});

finally. use <blessed-button / > instead of <button / >

[guoshencheng]

It's a Irregular solution and i don't know if there is any solution by add a great type definition file

[guoshencheng]

Another better solution is to map all tag inner lib and provider a official type definition file. so that the developer will not add the definition by themselves.

[guoshencheng]

plan b

86

[mmmeff]

Types look good to me

[guoshencheng]

@mmmeff are you using typescript?