Parcel with TypeScript & TSX without babelrc?

Question

I'm just getting to know parceljs and find it very delightful, there is just one thing that seems a bit overkill:

I'm using parceljs to transpile infernojs' tsx files to javascript. The generated code, however, contains the original React.createElement function, which obviously can't work:

inferno_1.render(React.createElement("div", null, "woot"), document.getElementById("app"));

I've seen examples that use a .babelrc file with the plugin babel-plugin-inferno, which seems to work, but since that adds various babel dependencies I was just wondering isn't there a way to specify the transform function, without all the extra baggage. (since parcel seems to be about being simple and all)

Answer 1

Similarly to preact you just need to set "jsxFactory":"h" in your tsconfig, and import it from 'inferno-hyperscript' where you plan on using it.

tsconfig:

{
  "compilerOptions": {
    "target": "es5",    
    "jsx":"react",
    "jsxFactory":"h",
    "lib":["dom","ESNext"],
    "module": "commonjs",    
    "strict": true,    
    "moduleResolution":"Node",
    "esModuleInterop": true,    
    "forceConsistentCasingInFileNames": true 
  },  
  "include":["src"]
}

using in code:

import { h } from 'inferno-hyperscript';

function App() {
    return (
      <div className="App">
        Hello thar
      </div>
    );  
}

export default App;

You could potentially use inferno-create-element in a similar fashion, but I've only tried htags.

An example: https://github.com/jayy-lmao/inferno-parcel-ts