tsx 配置

April 29, 2024

本篇说明 Typescript 环境下编译 JSX 的配置

对于 jsx 工厂函数：

在 React 17 及之后，React 提供一个 jsx-runtime 子模块，导出 jsx 函数

jsx
```
import { Fragment, jsx } from "react/jsx-runtime";
jsx(Fragment, { children: "Hello world" });
```
对应于 tsconfig.json 的 compilerOptions.jsx 设置为 react-jsx
在 React 17 之前，使用的是 createElement 函数，此函数现已标记为废弃

jsx
```
import { createElement, Fragment } from "react";
createElement(Fragment, null, "Hello world");
```
对应于 tsconfig.json 的 compilerOptions.jsx 设置为 react

tsconfig.json

{
    "compilerOptions": {
        /**
         * @docs https://www.typescriptlang.org/tsconfig/#jsx
         * @default "react"
         * 此选项控制 jsx 工厂函数的导入方式
         *
         * react: React<17 transform，对于第三方库需指定 jsxFactory
         * 要求 jsxFactory 指定一个函数名称（细节参见下面具体选项）
         * import { jsxFactory } from "jsxFactoryModule"
         * export const HelloWorld = () => jsxFactory("h1", null, "Hello world")
         *
         * react-jsx: React>=17 transform，对于第三方库需指定 jsxImportSource
         * 要求 jsxImportSource 提供 jsx-runtime 子模块并导出 jsx 函数
         * import { jsx as _jsx, Fragment as _Fragment } from "jsxImportSource/jsx-runtime"
         * export const HelloWorld = () => _jsx(_Fragment, { children: "Hello world" })
         */
        "jsx": "react-jsx",

        /**
         * @docs https://www.typescriptlang.org/tsconfig/#jsxFactory
         * @default React.createElement
         * 此选项指定一个函数名称 或 模块.函数名称，例如 h 或 preact.h
         * 支持 Babel 的 [Customizing the Classic Runtime Import](https://babeljs.io/docs/babel-plugin-transform-react-jsx#customizing-the-classic-runtime-import)
         *
         * 附：The factory chosen will also affect where the JSX namespace is looked up (for type checking information) before falling back to the global one.
         * If the factory is defined as React.createElement (the default), the compiler will check for React.JSX before checking for a global JSX. If the factory is defined as h, it will check for h.JSX before a global JSX.
         */
        "jsxFactory": "h",
        /**
         * @docs https://www.typescriptlang.org/tsconfig/#jsxFactory
         * 同理 jsxFactory，从略
         */
        "jsxFragmentFactory": "Fragment",

        /**
         * @docs https://www.typescriptlang.org/tsconfig/#jsxImportSource
         * @default React
         * 此选项指定 jsx 和 Fragment 函数从哪个模块的 jsx-runtime 子模块中导入
         * 支持 Babel 的 [Customizing the Automatic Runtime Import](https://babeljs.io/docs/babel-plugin-transform-react-jsx#customizing-the-automatic-runtime-import)
         */
        "jsxImportSource": "React",
    },
}

第三方库示例

下面的示例配置使用 compilerOptions.jsx = "react-jsx"
我们将手动实现一个 JSX runtime 并实现将 jsx 转换为 HTML 字符串

.
├── src
│   ├── RayAct
│   │   └── jsx-runtime.ts // 需要导出 jsx 函数，和可选的 Fragment 符号
│   │   ├── index.ts       // 不做要求
│   └── demo.tsx
└── tsconfig.json

jsxImportSource 使用我们自定义的 RayAct 模块

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "./RayAct",

        "module": "ESNext",
        "outDir": "dist"
    },
    "include": ["src/**/*"]
}

src/demo.tsx

import { render } from "./RayAct";

const jsx = (
    <h1 foo="bar">
        Hello, <>world</>!
    </h1>
);

console.log(jsx);
console.log(render(jsx)); // => <h1 foo="bar">Hello, world!</h1>

src/RayAct/jsx-runtime.ts

import { createElement, type RayActNode } from "./index";

export namespace JSX {
    export interface IntrinsicElements {
        [elemName: string]: any;
    }
}
export { Fragment } from "./index";

export function jsx(type: string, { children, ...props }: { children?: RayActNode[]; [prop: string]: any }) {
    return createElement(type, props, children);
}

下面的实现兼容 compilerOptions.jsx = "react"

src/RayAct/index.ts

export type RayActNode = RayActElement | Array<RayActNode> | string | number | boolean | null | undefined;

export interface RayActElement<P = any, T extends string = string> {
    type: T | Function;
    props: P & { children?: Array<RayActElement | RayActElement[]> };
}

export function createElement(
    type: string,
    props?: Record<string, any> | null,
    ...children: RayActNode[]
): RayActElement {
    function nodeToElement(node: RayActNode): RayActElement | RayActElement[] {
        if (node === null) return createNullElement();
        if (Array.isArray(node)) return node.map(nodeToElement) as RayActElement[];
        if (typeof node === "object") return node;
        if (typeof node === "string") return createTextElement(node);
        if (typeof node === "number") return createTextElement(String(node));
        if (Boolean(node) === false) return createNullElement();
        return createTextElement(String(node));
    }
    return {
        type,
        props: {
            ...props,
            children: children.map(nodeToElement),
        },
    };
}

function createTextElement(text: string): RayActElement {
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: [],
        },
    };
}

function createNullElement(): RayActElement {
    return {
        type: "NULL_ELEMENT",
        props: {
            children: [],
        },
    };
}

export function Fragment(props: { children?: RayActNode[] }): RayActNode {
    return {
        type: "FRAGMENT_ELEMENT",
        props: {
            children: props.children,
        },
    };
}

export function render(element: RayActElement): string {
    if (element.type === "NULL_ELEMENT") return "";
    if (element.type === "TEXT_ELEMENT") return element.props.nodeValue as string;
    if (element.type === "FRAGMENT_ELEMENT") {
        return element.props.children?.map(render).join("") || "";
    }
    if (typeof element.type === "function") {
        return render(element.type(element.props));
    }

    let sb = `<${element.type}`;

    Object.keys(element.props)
        .filter((key) => key !== "children")
        .forEach((name) => {
            const value = element.props[name];
            if (!value) return;
            sb += ` ${name}="${value}"`;
        });

    sb += ">";

    element.props.children.forEach((child: RayActElement) => {
        sb += render(child);
    });

    sb += `</${element.type}>`;

    return sb;
}