Mitosis JSX types are not properly mapped

Originally from https://github.com/BuilderIO/mitosis/issues/372#issuecomment-1150135164

For this input:

import { HTMLAttributes } from "react";

export const headingSizes = [1, 2, 3, 4, 5, 6];

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  size: typeof headingSizes[number];
}

export default function Heading(props: HeadingProps) {
  return <div />
}

the output does not preserve the import { HTMLAttributes } from "react"; import

[PatrickJS]

I saw @kylecordes use this. can we update the imports to remove the need for dist/src

import '@builder.io/mitosis/dist/src/jsx-types';

[samijaber]

Thanks @R-Bower, that’s informative. You’re right, we need a way to map the Mitosis JSX types to the correct framework types, or folks will run into many type-related issues.

There is definitely a way to transform the import to that of React’s JSX types, it will look something like this:

Step 1 - Identify every place where the JSX types are used

in the JSX parser, we will need to update the logic that parses import declarations here: https://github.com/BuilderIO/mitosis/blob/3717ef34ace920f725f0ceebb61b26c5e61b661a/packages/core/src/parsers/jsx/imports.ts#L7-L44

such that: if we see a JSX import coming from @builder.io/mitosis or @builder.io/mitosis/jsx-runtime, we want to store that import (currently we ignore all mitosis imports). Might be good to normalize all possible variations (regular import, type import, import from different paths) into 1 single variant: import type { JSX } from '@builder.io/mitosis/jsx-runtime';

We will also need to

Step 2 - transform imports

This might be the best place to make such a change: https://github.com/BuilderIO/mitosis/blob/3717ef34ace920f725f0ceebb61b26c5e61b661a/packages/cli/src/build/helpers/transpile.ts#L15-L30

This import transform code will run for both mitosis components (.lite.tsx) and plain JS/TS files. If will want to replace the normalized import type { JSX } from '@builder.io/mitosis/jsx-runtime'; import statement to whatever makes sense for each given framework. For React, It will be easiest to convert the import to:

type JSX  = React;

This will avoid the need to replace every JSX.* within the code with React.. This assumes that import React from 'react'; already exists somewhere in the code (which it does as we always add it to react generators). But if it somehow doesn’t, we could add a check and add it ourselves.

The solution will be different for each framework, but should roughly follow this same pattern of changes.