Лучший способ конвертировать только JSX в TSX и поддерживать TS

Question

У меня есть несколько компонентов TSX, написанных на Inferno (аналогично React/Preact). Мне нужны только версии.ts с преобразованными аспектами JSX. Среда, в которой я его использую, поддерживает только TypeScript, а преобразователь Inferno JSX написан только для Babel. Я верю, что могу сделать это с Бабелем, но не уверен, какие флаги добавить.

Вот пример моего скрипта:

import { Component, linkEvent } from 'inferno';

import './index.scss';

interface HeaderProps {
  name: string,
  address: string
}

export default class Header extends Component {

  render(props:HeaderProps) {
    return (
      <header class="wrap">
        <img class="logo" src="logo.svg" />
        <h1>{ props.name }</h1>
        <img src="arrow.svg" />
      </header>
    );
  }
}

После того, как я скомпилирую этот скрипт, любой из TS, такой как интерфейс, должен остаться, однако JSX должен быть преобразован в createVNode() функции. Плагин Babel для этого: https://github.com/infernojs/babel-plugin-inferno

Вот мой текущий.babelrc:

{
  "compact": false,
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "targets": {
          "browsers": ["ie >= 11", "safari > 10"]
        }
      }
    ],
    [
      "@babel/typescript",
      { "isTSX": true, "allExtensions": true }
    ]
  ],
  "plugins": [
    ["babel-plugin-inferno",
    { "imports": true }],
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-class-properties",
      { "loose": true }
    ]
  ]
}

Я в том числе @babel/typescript в файле rc, потому что он должен уметь читать TS без жалоб на синтаксис. Тем не менее, выход должен быть сохранен.

Если это не лучший подход, можете ли вы предложить более эффективный способ преобразования этого? пс. Я не могу использовать трансформатор TS JSX, он не совместим с Inferno.

Вот мой tsconfig:

{
    "compilerOptions": {
        "pretty": true,
        "target": "es5",
        "module": "esnext",
        "allowSyntheticDefaultImports": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "lib": ["es2017", "dom"],
        "types": [
            "inferno"
        ],
        "jsx": "preserve",
        "noUnusedLocals": true,
        "baseUrl": "./src",
        "noEmit": true,
        "skipLibCheck": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
    },
    "include": [
        "src/**/*",
        "node_modules/inferno/dist/index.d.ts"
    ]
}

Answer 1

Это .babelrc тебе нужно:

{
  "plugins": [
    ["babel-plugin-inferno", { "imports": true }],
    ["@babel/plugin-syntax-typescript", { "isTSX": true }],
  ]
}

Обратите внимание, не используйте TSC, используйте только Babel.

Разверните, чтобы увидеть результат теста:

// ============== input ==============
const x: number  = 1;
enum Enum { one, two }
interface Foobar { key: string; }

const bar = () => <div>bar</div>
const zoo = () => <><span>yolo</span></>


// ============== output ==============
import { createVNode, createFragment } from "inferno";
const x: number = 1;
enum Enum {
  one,
  two,
}
interface Foobar {
  key: string;
}

const bar = () => createVNode(1, "div", null, "bar", 16);

const zoo = () => createFragment([createVNode(1, "span", null, "yolo", 16)], 4);