JSX Pragmatic：灵活多变的JSX渲染库

2024-09-03 17:43:39作者：曹令琨Iris

项目介绍

JSX Pragmatic 是一个开源的JavaScript库，旨在提供一个灵活的JSX模板渲染解决方案。不同于传统的JSX只能在React框架中使用，JSX Pragmatic允许开发者在运行时决定如何渲染JSX模板，无论是HTML、DOM还是其他任何自定义格式。这使得JSX Pragmatic成为跨平台和多环境渲染需求的理想选择。

项目技术分析

JSX Pragmatic的核心优势在于其高度可定制的渲染机制。通过提供一系列内置的渲染器（如HTML、DOM、React、Preact等），以及支持自定义渲染器的功能，JSX Pragmatic能够适应各种不同的渲染需求。此外，项目还支持Fragments和自定义Babel pragma，进一步增强了其灵活性和可扩展性。

项目及技术应用场景

JSX Pragmatic适用于多种应用场景，包括但不限于：

服务器端渲染：将JSX模板渲染为HTML字符串，用于服务器端渲染。
客户端渲染：直接将JSX模板渲染为DOM元素，适用于浏览器环境。
跨框架使用：在React、Preact等不同框架中复用相同的JSX组件。
自定义渲染：根据特定需求编写自定义渲染器，实现高度定制化的渲染逻辑。

项目特点

灵活性：支持在运行时动态选择渲染方式，适应多变的渲染需求。
可扩展性：提供自定义渲染器功能，允许开发者根据具体需求扩展渲染逻辑。
兼容性：支持多种主流框架（如React、Preact），确保跨框架的兼容性和复用性。
易用性：简洁的API设计和丰富的文档支持，使得上手和使用都非常方便。

快速开始

安装

npm install --save jsx-pragmatic

基本使用

以下是一个简单的示例，展示了如何在服务器端将JSX模板渲染为HTML：

/* @jsx node */

import { node, html } from "jsx-pragmatic";

function Login({ prefilledEmail }) {
  return (
    <section>
      <input type="text" placeholder="email" value={prefilledEmail} />
      <input type="password" placeholder="password" />
      <button>Log In</button>
    </section>
  );
}

function render() {
  return (<Login prefilledEmail="foo@bar.com" />).render(html());
}

自定义渲染器

以下是一个自定义渲染器的示例，展示了如何将JSX模板渲染为DOM元素：

/* @jsx node */

import { node, NODE_TYPE } from "jsx-pragmatic";

function customDom({ removeScriptTags } = { removeScriptTags: false }) {
  let domRenderer = (node) => {
    if (node.type === NODE_TYPE.COMPONENT) {
      return node.renderComponent(domRenderer);
    }

    if (node.type === NODE_TYPE.TEXT) {
      return document.createTextNode(node.text);
    }

    if (node.type === NODE_TYPE.ELEMENT) {
      if (removeScriptTags && node.name === "script") {
        return;
      }

      let el = document.createElement(node.name);

      for (let [key, val] of Object.entries(node.props)) {
        el.setAttribute(key, val);
      }

      for (let child of node.children) {
        el.appendChild(child.render(domRenderer));
      }

      return el;
    }
  };

  return domRenderer;
}

function render() {
  return (<Login prefilledEmail="foo@bar.com" />).render(
    customDom({ removeScriptTags: true })
  );
}