想写 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的魅力吧
1607 6
Agent平台快速体验
|
JSON API 数据格式
实时获取小红书笔记详情的API使用与解析
小红书是一个以分享消费经验、生活方式为主的社交平台,拥有大量的用户和内容。为了更好地了解用户在小红书上的行为和内容,许多开发者选择使用小红书开放平台提供的API接口。本文将介绍如何通过小红书笔记详情API实现实时数据获取,并给出相应的代码示例。
|
缓存 JSON 前端开发
CORS 详解,终于不用担心跨域问题了
CORS 详解,终于不用担心跨域问题了
9091 1
CORS 详解,终于不用担心跨域问题了
|
8月前
|
存储 关系型数据库 MySQL
NestJS 配置 TypeORM 进阶教程
本文介绍了在 NestJS 项目中配置 TypeORM 的三种方式:初级阶段直接在 AppModule 中配置;进阶阶段抽离出独立的 DatabaseModule;进一步使用自定义命名空间将数据库配置分离到单独文件,提升可维护性与模块化程度。
410 3
|
6月前
|
文字识别 自然语言处理 物联网
Qwen‑Image 如何实现 95 %+ 多语种文本渲染准确率
摘要:依托跨语种海量高质量数据、20 B 参数的双通道 MMDiT 架构,以及由浅入深的课程式多任务训练策略,Qwen‑Image 将开源扩散模型在文字渲染上的字符准确率提升到 95 %以上,并保持段落级排版一致性。下文将从数据、模型、训练、评测四个维度拆解这一结果的技术原理,并给出快速复现与未来展望。
406 0
|
前端开发 JavaScript Android开发
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter和React Native是两大跨平台框架,各有优缺点。Flutter性能优越,UI灵活,使用Dart;React Native生态广泛,适合JavaScript开发。
3914 6
Flutter 与 React Native - 详细深入对比分析(2024 年)
什么年代了,你还在手动配置vite路径别名?
【8月更文挑战第3天】Vite路径别名配置,简化项目引入
2277 3
|
资源调度 前端开发 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等预处理器以适应现代前端趋势。
304 0
|
Rust Shell 索引
使用阿里云镜像加速Rust与Cargo安装及更新
使用阿里云镜像加速Rust与Cargo安装及更新
12690 2