app.tsx

export const App = () => {
  const title = "TSX Vanilla";

  return (
    <>
      <h1>{title}</h1>
    </>
  );
};

jsx.ts

export function factory(
  tagOrFn: string | (() => Element),
  attrs: object,
  ...children: Node[]
) {
  const isTag = typeof tagOrFn === "function";
  console.log(isTag);
  
  const element = isTag ? tagOrFn() : document.createElement(tagOrFn);
  element.append(...children);
  return Object.assign(element, attrs);
}

export function fragment() {
  console.log('fragment');
  
  const template = document.createElement("template");
  return template.content.cloneNode(true);
}

main.ts

import { App } from "./app";
import "./style.scss";

app.appendChild(App());

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "jsx": "preserve",
    "jsxFactory": "factory",
    "jsxFragmentFactory": "fragment"
  },
  "include": ["src"]
}

vite-env.d.ts

/// <reference types="vite/client" />

declare const app: HTMLDivElement;

declare namespace JSX {
  interface Element extends HTMLElement {}

  type IntrinsicElements = {
    [K in keyof HTMLElementTagNameMap]: Partial<HTMLElementTagNameMap[K]>;
  };
}

vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  esbuild: {
    jsxFactory: "factory",
    jsxFragment: "fragment",
    jsxInject: `import { factory, fragment } from '/src/jsx'`,
  },
});