mizu.js で HTML を強化しましょう!-jsチュートリアル-php.cn

究極の柔軟性と適応性を備えたインタラクティブな Web アプリを構築したいですか?

をチェックしてみませんか? mizu.js ?‍?!

HTML の動的レンダリング、イベントのリッスン、カスタム要素の作成、属性のバインドとモデル化、HTTP リクエストの処理、マークダウンとコードのレンダリングなどを行うための約 30 個の強力なディレクティブが提供されます。

最新のブラウザではクライアント側で動作します...

Supercharge your HTML with mizu.js!

...だけでなく、Node、Deno、Bun など、お気に入りのランタイムのサーバー側でも使用できます。静的サイトの生成にも使用できます!

Supercharge your HTML with mizu.js!

なぜさらに別の JavaScript テンプレートライブラリを使用するのですか?

心配はわかりますが、聞いてください。

ここ数年、私は単純なインタラクティブな Web ページを作成するためだけにエコシステム全体をセットアップする必要性にますます不満を感じるようになりました。多くの場合、専用のツールボックス、大量の依存関係、トランスパイル手順が必要になり、言語の新しいスーパーセットを学習する必要があります。実際にプロジェクトに取り組むよりも、環境のセットアップに多くの時間を費やしてしまう可能性さえあります!

だからこそ、セットアップ不要で使いやすい Alpine.js や htmx などのライブラリが大好きになりました。しかし、これらにはいくつかの限界があると感じました。これらは主にクライアント側で使用するように設計されているため、サーバー側のレンダリングコンテキスト (静的生成を含む) で使用することは実際には不可能でした。

その間、私はますます同型の JavaScript (つまり、クライアントとサーバーの両方で動作する) を書き始め、Deno がそれに最適なランタイムであることがわかりました。 Deno は、Node のような独自の実装ではなく、Web 標準に依存しています。このため、開発者は Node、Deno、Bun、ブラウザなど、自分に合ったものを自由に使用できるはずなので、存在するはずのない互換性の問題に遭遇しました。

これらすべての点を念頭に置いて、私は上記のすべての問題に対処しようとする新しいライブラリである«水» (水、日本語の水の漢字)の開発を開始しました。

そして今日は、それをご紹介できることに興奮しています!

mizu.js は HTML と直接統合され、その式には標準的な JavaScript 式が使用されます。これは、使用を開始するために新しい言語やパラダイムを学ぶ必要がないことを意味します。

<!-- Conditionally render elements -->
<a *if="Math.round(Math.random())">Heads!<a>
<b *else>Tails!</b>

<!-- Render list elements dynamically -->
<ul>
  <li *for="const value of ['foo', 'bar', 'baz']" *text="value"></li>
  <li *for="['qux', 'quux', 'corge']" *text="$value"></li>
</ul>

<!-- Bind attributes and handle events -->
<form @submit.prevent :class="{ 'user-form': true }" *set="{ input: '' }">
  <input type="text" ::value="input">
</form>

<!-- Template text content -->
<span *text="`Today is ${new Date()}`"></span>
<span *mustache>Today is {{ new Date() }}</span>

ログイン後にコピー

mizu.js では、ディレクティブの最初の文字はその目的を示します。

* 一般的なディレクティブの場合
@ イベントベースのディレクティブ
: 属性バインディングディレクティブ用
- :: 双方向バインディングディレクティブ (モデリングとも呼ばれる) 用

他のフレームワークやライブラリの構文との類似点に気づくかもしれませんが、これは意図的なものです。

mizu.js はリアクティブであり、(クライアント側で) データが変更されるたびに DOM を自動的に更新します。

リッチコンテンツのレンダリング

mizu.js は、マークダウンやコード構文の強調表示などのリッチコンテンツを簡単にレンダリングするためのいくつかの優れたディレクティブも提供します。

<!-- Conditionally render elements -->
<a *if="Math.round(Math.random())">Heads!<a>
<b *else>Tails!</b>

<!-- Render list elements dynamically -->
<ul>
  <li *for="const value of ['foo', 'bar', 'baz']" *text="value"></li>
  <li *for="['qux', 'quux', 'corge']" *text="$value"></li>
</ul>

<!-- Bind attributes and handle events -->
<form @submit.prevent :class="{ 'user-form': true }" *set="{ input: '' }">
  <input type="text" ::value="input">
</form>

<!-- Template text content -->
<span *text="`Today is ${new Date()}`"></span>
<span *mustache>Today is {{ new Date() }}</span>

ログイン後にコピー

HTTP ベースのディレクティブ

mizu.js は、htmx からインスピレーションを得た一連のディレクティブを提供します。

これらのディレクティブは、コンテンツをインポートするサーバーレンダリングコンテキストで特に役立ちますが、クライアント側で HTTP リクエストを実行するために使用することもできます。

<!-- Automatically generate a table of contents from h1-h6 tags within the selected element -->
<nav *toc="'main section'"></nav>

<!-- Render markdown content -->
<div *markdown>**hello world!**</div>

<!-- Highlight syntax using TypeScript flavor -->
<code *code[ts]>const foo = "bar"</code>

ログイン後にコピー

HTML カスタム要素の操作

HTML はカスタム要素をネイティブにサポートしていますが、使用するのが少し面倒な場合があります。

mizu.js は、ドキュメント内でカスタム要素を定義および使用するためのより簡潔な構文を使用して、このプロセスを簡素化します。

<!-- Fetch and display remote content -->
<div %http="https://example.com" %response.html></div>
<div %http="https://example.com" %response.html="$content.querySelector('h1')"></div>

<!-- Make an HTTP POST request on click and show the response -->
<button 
  %http.post="https://example/api"
  %header[x-foo]="'my custom header'"
  %body.json="{ foo: 'bar' }"
  %@click="alert(await $response.text())"
></button>

ログイン後にコピー

ボーナス: HTTP ベースのディレクティブを使用してカスタム要素をインポートすると、他のプロジェクトでカスタム要素を簡単に再利用できます!

<!-- Create a custom element -->
<template *custom-element="my-element">
  <div *mustache>
    There is {{ items.length }} items:
    <ul><slot name="items"></slot></ul>
  </div>
</template>

<!-- Use the custom element -->
<my-element>
  <li #items>foo</li>
  <li #items>bar</li>
</my-element>

ログイン後にコピー

その他

ここでは利用可能なディレクティブをすべて説明するつもりはありませんが、検討すべきディレクティブは他にもたくさんあります。
以下に興味深いものをいくつか紹介します:

<template 
  *custom-element="my-element" 
  %http="https://example.com/partial/my-element.html" 
  %response.html
></template>

ログイン後にコピー

mizu.js をプログラムで使用する

これまで、mizu.js を HTML ドキュメント内で直接使用する方法を説明してきましたが、より高度な使用例としてプログラムで使用することもできます。

mizu.js ディレクティブは単なるプレーンな HTML 属性であるため、構文はクライアント側とサーバー側の両方のレンダリングで同じままです。つまり、テンプレートを変更することなく、レンダリング環境を簡単に切り替えることができます!

<!-- Automatically update the time every second -->
<!-- Perfect for elements where reactivity can't be tracked -->
<time *refresh="1" *mustache>{{ new Date() }}</time>

<!-- Execute raw code for special cases -->
<div *eval="this.remove()"></div>

ログイン後にコピー

静的サイトの生成

静的サイトを簡単に生成できます

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(`<div *text="foo"></div>`, { context: { foo: "? Yaa, mizu!" } })
    return new Response(body, { headers })
  },
}

ログイン後にコピー