@fluixi/jsx (英语)

JSX运行时间和类型 Fluixi 编译反对.

这是 jsxImportSource 用于 Fluixi : jsx编号 :jsxs编号 :Fragment 工厂,元素 帮助者,以及JSX类型定义,给出内在元素及其属性真实 类型.

这是一个小包,工作很狭窄. 大部分Fluixi代码从不导入它: 编译器 将JSX变成直接DOM的电话,所以工厂是任何它没有的倒置 编译. 部件、控制流动、渲染和活性在其他地方活;见 东西实际生活的地方。 。 。 .

安装

pnpm add @fluixi/jsx @fluixi/dom

设置

在此软件包中点出类型脚本, 让 Vite 插件编译 :

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@fluixi/jsx"
  }
}

// vite.config.ts
import { fluixi } from '@fluixi/vite-plugin';

export default { plugins: [fluixi()] };

npm create fluixi 电线都为你.

出口的东西

类型 : JSXElement, (中文(简体) ), JSXComponent, (中文(简体) ), JSXProps, (中文(简体) ), RefCallback, (中文(简体) ), RefObject,加上全球 JSX 带有内在元素的命名空间.

东西实际生活的地方

这个软件包是一个运行时间,而不是框架外观. 直接达到它通常是一个标志 您想要一个这样的:

键入元素

这个 JSX 名称空间类型 内在元素及其属性, 因此拼写错误的属性 或错误的事件处理器是一个错误,而不是一个沉默的不操作 :

const el = <input type="text" onInput={(e) => console.log(e.currentTarget.value)} />;
//                            ^ typed as InputEvent on HTMLInputElement

反应属性接受一个访问器和一个值,这是让编译器接受的 在不更改类型的情况下线起捆绑:

const count = $signal(0);
<div title={() => `count: ${count()}`} data-count={count()} />;

参考文献

import { createRef } from '@fluixi/jsx';

function Field() {
  const input = createRef<HTMLInputElement>();
  onMount(() => input.current?.focus());
  return <input ref={input} />;
}

召回裁判也行, ref={(el) => ...},两种形式都是双向的,所以 组件 HTMLElement 接受更具体的答复.

许可证

麻省理工学院

链接

• Fluixi 文档
• 无
• 仓库