想写 JSX,又不想用编译器?HTM 可以帮你

简介: HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。

原文作者:HTM Team

译者:UC 国际研发 Jothy

写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。

image.png

HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。

你可直接使用 React/Preact 在浏览器中开发,然后将 HTM 编译为生产包。它使用标准 JavaScript 标签模板,适用于所有现代浏览器。
项目地址:https://github.com/developit/htm

HTM 的各项数据
直接在浏览器中使用时 < 700 bytes

️ 与 Preact 一起使用时 < 500 bytes(感谢 gzip )

使用 babel-plugin-htm 编译时 0 bytes

语法:类 JSX,但有所提升

  • 使用 HTM 编写的语法无限接近 JSX :
  • Spread props:
  • 自关闭标签:
  • 组件: <${Foo}> (其中 Foo 是组件引用)
  • 布尔属性:

对 JSX 的改进

实际上 HTM 更深度采用了 JSX 风格的语法!

以下是 JSX 中不具备的符合人体工程学的功能:

无需编译器

  • HTML 引号可选:
  • 组件结束标记: <${Footer}>footer content/>
  • 通过 lit-html VSCode 插件实现语法高亮和语言支持

HTM 2.0 发布啦!

我们使用全新的自定义 JSX 解析器,从头开始构建 HTM 的性能和大小。

这对你来说意味着什么?

  • HTM 速度提升了 20 倍
  • …体积缩小了 10%
  • …随处运行(原生 SSR!)
  • 语法无限接近 JSX
  • 缓存速度提高20%
  • 更优的输出

全新的 Babel 插件!

我们的 Babel 插件也进行了大幅修改! 它的速度提高了 1-2 个量级,不再需要 JSDOM,并且支持自定义输出。

此更新还修复了缓存、边缘情况和空白处理相关的多个问题。

还带来了新语法?

是的,但别慌。 现在写 HTM 基本上就是在写 JSX。你只需要记住两件事:

之类的组件写做 <${Foo}>

{a} 之类的字段写为 ${a}

其他一切与 JSX 相同。

目录
相关文章
|
JSON Serverless API
Agent平台快速体验
通过《智能体(Agent)平台介绍》您了解到Agent及其构建平台的价值,通过《在函数计算上部署专属的Agent平台》你获得了专属的Agent平台,本篇进入更加激动人心的使用阶段,一起探索Agent的魅力吧
1462 6
Agent平台快速体验
MacBook终端安装tree命令(保证好使)
MacBook终端安装tree命令(保证好使)
|
5月前
|
存储 关系型数据库 MySQL
NestJS 配置 TypeORM 进阶教程
本文介绍了在 NestJS 项目中配置 TypeORM 的三种方式:初级阶段直接在 AppModule 中配置;进阶阶段抽离出独立的 DatabaseModule;进一步使用自定义命名空间将数据库配置分离到单独文件,提升可维护性与模块化程度。
253 3
|
3月前
|
文字识别 自然语言处理 物联网
Qwen‑Image 如何实现 95 %+ 多语种文本渲染准确率
摘要:依托跨语种海量高质量数据、20 B 参数的双通道 MMDiT 架构,以及由浅入深的课程式多任务训练策略,Qwen‑Image 将开源扩散模型在文字渲染上的字符准确率提升到 95 %以上,并保持段落级排版一致性。下文将从数据、模型、训练、评测四个维度拆解这一结果的技术原理,并给出快速复现与未来展望。
277 0
|
数据管理 Nacos 开发者
"Nacos架构深度解析:一篇文章带你掌握业务层四大核心功能,服务注册、配置管理、元数据与健康检查一网打尽!"
【10月更文挑战第23天】Nacos 是一个用于服务注册发现和配置管理的平台,支持动态服务发现、配置管理、元数据管理和健康检查。其业务层包括服务注册与发现、配置管理、元数据管理和健康检查四大核心功能。通过示例代码展示了如何在业务层中使用Nacos,帮助开发者构建高可用、动态扩展的微服务生态系统。
398 0
|
Linux 开发者 iOS开发
Python中使用Colorama库输出彩色文本
Python中使用Colorama库输出彩色文本
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
7652 1
|
监控 JavaScript 网络安全
|
资源调度 前端开发 JavaScript
如何在Node.js环境中安装并使用Bower和LESS
【7月更文挑战第2天】在Node.js环境中,掌握Bower和LESS的使用对前端开发至关重要。安装Bower(全局`npm install -g bower`)用于管理前端资源,通过`bower init`和`bower install`管理依赖。LESS作为CSS预处理器,通过`npm install -g less`安装编译器,用`lessc`命令编译LESS到CSS。虽然Bower已进入维护模式,但理解其用法仍有价值。同时,学习使用Sass或Stylus等预处理器以适应现代前端趋势。
229 0