使用 mizu.js 增强你的 HTML！

想要构建具有极高灵活性和适应性的交互式 Web 应用程序吗？

查看！

它提供了大约三十个强大的指令来动态呈现 HTML、监听事件、创建自定义元素、绑定和模型属性、处理 HTTP 请求、呈现 markdown 和代码等等！

并且它可以在任何现代浏览器的客户端上运行......

... 还可以在您最喜欢的运行时上使用服务器端，无论是 Node、Deno 还是 Bun！您甚至可以使用它来生成静态站点！

多年来，我越来越沮丧，因为仅仅为了创建简单的交互式网页就需要建立整个生态系统。你经常需要一个专用的工具箱、大量的依赖项、转换步骤，还要学习一种语言的新超集。你甚至可能最终花在设置环境上的时间比实际完成项目的时间还要多！

这就是为什么我喜欢和这样的库，它们不需要设置，而且易于使用。然而，我觉得这些库有一些局限性。由于它们主要是为客户端使用而设计的，因此在服务器端渲染环境中使用它们是不可能的（包括静态生成）。

与此同时，我开始编写越来越多的同构 JavaScript（即在客户端和服务器上都可以工作），并发现它是它的完美运行时。 Deno 依赖于 Web 标准，而不是像那样实现自己的标准。因此，我遇到了一些兼容性问题，但这些问题本不应该存在，因为开发人员应该可以自由使用最适合他们的东西，无论是 Node、Deno、Bun 还是浏览器。

考虑到所有这些要点，我开始研究“水”（日语中表示水的汉字），这是一个试图解决上述所有问题的新库。

今天，我很高兴向你们介绍它！

直接与您的 HTML 集成，并使用原生 JavaScript 表达式。这意味着您无需学习新语言或范式即可开始使用它。


Heads!
Tails!



  
  




  




Today is {{ new Date() }}

在中，指令的第一个字符表示其用途：

* 针对一般指令

@ 用于基于事件的指令

: 用于属性绑定指令 :: 用于双向绑定指令（也称为建模）

您可能会注意到与其他框架和库的语法有一些相似之处，这是有意为之。

是反应式的，每当您的数据发生变化时（在客户端），就会自动更新 DOM。

呈现丰富的内容

还提供了一些简洁的指令来轻松呈现丰富的内容，如 markdown 或代码语法高亮。





**hello world!**


const foo = "bar"

基于 HTTP 的指令

提供了一组受 htmx 启发的指令。

这些指令在服务器渲染上下文中导入内容时特别有用，但它们也可以在客户端用于执行 HTTP 请求。

使用 HTML 自定义元素

虽然 HTML 本身支持自定义元素，但使用起来可能有点繁琐。

使用更简洁的语法来定义和使用文档中的自定义元素，从而简化此过程。






  foo
  bar

**奖励：**您可以通过基于 HTTP 的指令导入自定义元素，轻松地在其他项目中重用它们！

杂项

我不会在这里介绍所有可用的指令，但还有更多指令可供探索！

以下选取了一些有趣的内容：



{{ new Date() }}

以编程方式使用 mizu.js

到目前为止，我已经展示了如何在 HTML 文档中直接使用它，但您也可以以编程方式使用它来实现更高级的用例。

由于指令只是普通的 HTML 属性，因此客户端和服务器端渲染的语法都相同。这意味着您可以轻松地在渲染环境之间切换，而无需更改模板！

import Mizu from "@mizu/render/server"

export default {
  async fetch() {
    const headers = new Headers({ "Content-Type": "text/html; charset=utf-8" })
    const body = await Mizu.render(``, { context: { foo: "🌊 Yaa, mizu!" } })
    return new Response(body, { headers })
  },
}

生成静态站点

您可以轻松生成静态站点

import Mizu from "@mizu/render/server"

await Mizu.generate([
  // Copy content from /source/static to /dist/static
  ["**/*", "static", { directory: "/source/static" }],
  // Copy and render content from /source/templates to /dist
  ["**/*", ".", { directory: "/source/templates", render: {} }],
  // Copy content from a URL to /dist/styles.css
  [new URL("https://matcha.mizu.sh/matcha.css"), "styles.css"],
  // Copy content from callback return
  [() => JSON.stringify(Date.now()), "timestamp.json"],
], { clean: true, output: "/dist" })

CLIS.CC

使用 mizu.js 增强你的 HTML！

呈现丰富的内容

基于 HTTP 的指令

使用 HTML 自定义元素

杂项

以编程方式使用 mizu.js

生成静态站点

今天就开始使用 mizu.js！

lowlighter/mizu 的

🌊 mizu.js 是一款轻量级 html 模板引擎，适用于任何侧面渲染。无需构建步骤，无需配置，无烦恼。