jsx-element - 通过 jsx 语法渲染及更新节点

安装

npm i -D jsx-element
# or
pnpm add -D jsx-element

示例

import { createRender, createElement } from "jsx-element";

const render = createRender(document.body);
const ref = {};

setInterval(() => {
  render(
    <div>
      <h1 ref={ref}>
        <center>hello world</center>
      </h1>
      <center>{new Date().toLocaleString()}</center>
    </div>
  );
  console.log(ref.current);
}, 1000);

类型声明

export declare function createRender(wrapEl: HTMLElement | Text): Render;

export declare function createElement(
  tag: string,
  props: Props,
  ...children: RenderableElement[]
): JsxElement;

export declare function Render(...jsxElements: RenderableElement[]): void;

export type RenderableElement = JsxElement | string | null;

export type JsxElement = {
  type: string;
  key?: Key;
  ref?: Ref;
  attrs?: Attrs;
  style?: Style;
  children?: JsxElement[];
};

export type Props = Attrs & {
  style: Style;
};
export type Attrs = {
  [key: string]: any;
};
export type Style = {
  [key: string]: string | number;
};
export type Ref = {
  current: any;
};
export type Key = string | number | null;