Tajamkan HTML anda dengan mizu.js!

Ingin membina apl web interaktif dengan fleksibiliti dan kebolehsuaian muktamad?

Lihat ? mizu.js ?‍?!

Ia menawarkan kira-kira tiga puluh arahan berkuasa untuk memaparkan HTML secara dinamik, mendengar acara, mencipta elemen tersuai, mengikat dan memodelkan atribut, mengendalikan permintaan HTTP, membuat penurunan harga dan kod, dan banyak lagi!

Dan ia berfungsi sebelah pelanggan pada mana-mana penyemak imbas moden...

...tetapi juga bahagian pelayan pada masa jalan kegemaran anda, sama ada Node, Deno atau Bun! Anda juga boleh menggunakannya untuk penjanaan tapak statik!

Mengapa pustaka templat JavaScript lagi?

Saya mendapat kebimbangan anda, tetapi dengar saya!

Selama bertahun-tahun, saya menjadi semakin kecewa dengan keperluan untuk menyediakan keseluruhan ekosistem hanya untuk mencipta halaman web interaktif yang mudah. Anda selalunya memerlukan kotak alat khusus, banyak kebergantungan, langkah pemindahan dan untuk mempelajari superset baharu bahasa. Anda mungkin akan menghabiskan lebih banyak masa untuk menyediakan persekitaran anda daripada mengerjakan projek anda!

Itulah sebabnya saya semakin menyukai perpustakaan seperti Alpine.js dan htmx, yang tidak memerlukan persediaan dan mudah digunakan. Walau bagaimanapun, saya merasakan ini mempunyai beberapa batasan. Memandangkan ia kebanyakannya direka untuk kegunaan pihak pelanggan, ia tidak benar-benar mungkin untuk menggunakannya dalam konteks pemaparan sebelah pelayan (termasuk penjanaan statik).

Sementara itu, saya mula menulis lebih banyak JavaScript isomorfik (iaitu, bekerja dalam kedua-dua klien dan pelayan) dan mendapati Deno adalah masa jalan yang sesuai untuknya. Deno bergantung pada piawaian web dan bukannya melaksanakan sendiri seperti Node. Oleh sebab itu, saya menghadapi beberapa isu keserasian, yang tidak sepatutnya wujud, kerana pembangun harus bebas menggunakan apa sahaja yang paling sesuai untuk mereka, sama ada Node, Deno, Bun atau penyemak imbas.

Dengan mengingati semua perkara ini, saya mula mengusahakan « 水 » (mizu, kanji untuk air dalam bahasa Jepun), sebuah perpustakaan baharu yang cuba menangani semua isu yang dinyatakan di atas.

Dan hari ini, saya teruja untuk memperkenalkannya kepada anda!

mizu.js menyepadukan terus dengan HTML anda dan menggunakan ungkapan JavaScript vanila untuk ekspresinya. Ini bermakna anda tidak perlu mempelajari bahasa atau paradigma baharu untuk mula menggunakannya.

<!-- 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>

Dalam mizu.js, aksara pertama arahan menunjukkan tujuannya:

• * untuk arahan am
• @ untuk arahan berasaskan acara
• : untuk arahan mengikat atribut
  • :: untuk arahan mengikat dua hala (juga dikenali sebagai pemodelan)

Anda mungkin melihat beberapa persamaan dengan sintaks daripada rangka kerja dan perpustakaan lain, yang disengajakan.

mizu.js adalah reaktif, mengemas kini DOM secara automatik setiap kali data anda berubah (pada bahagian klien).

Memaparkan kandungan yang kaya

mizu.js juga menawarkan beberapa arahan yang kemas untuk memaparkan kandungan kaya dengan mudah seperti tanda turun atau penyerlahan sintaks kod.

<!-- 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>

Arahan berasaskan HTTP

mizu.js menawarkan satu set arahan yang diilhamkan oleh htmx.

Arahan ini amat berguna dalam konteks pemaparan pelayan untuk mengimport kandungan, tetapi ia juga boleh digunakan pada bahagian klien untuk melaksanakan permintaan 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>

Bekerja dengan elemen tersuai HTML

Walaupun HTML secara asli menyokong elemen tersuai, ia boleh menjadi agak membosankan untuk digunakan.

mizu.js memudahkan proses ini dengan sintaks yang lebih ringkas untuk mentakrif dan menggunakan elemen tersuai dalam dokumen anda.

<!-- 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>

Bonus: Anda boleh menggunakan semula elemen tersuai anda dengan mudah dalam projek lain dengan mengimportnya dengan arahan berasaskan 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>

Pelbagai

Saya tidak akan merangkumi setiap arahan yang tersedia di sini, tetapi terdapat banyak lagi untuk diterokai!
Berikut ialah beberapa pilihan yang menarik:

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

Menggunakan mizu.js secara pemrograman

Setakat ini, saya telah menunjukkan cara menggunakan mizu.js terus dalam dokumen HTML anda, tetapi anda juga boleh menggunakannya secara pemrograman untuk kes penggunaan yang lebih lanjut.

Oleh kerana arahan mizu.js hanyalah atribut HTML biasa, sintaks tetap sama untuk pemaparan sisi klien dan pelayan. Ini bermakna anda boleh bertukar dengan mudah antara persekitaran pemaparan tanpa menukar templat anda!

<!-- 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>

Menjana tapak statik

Anda boleh menjana tapak statik dengan mudah

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 })
  },
}

Mula menggunakan mizu.js hari ini!

Mahu mencuba mizu.js tanpa memasang apa-apa?
Lihat mizu.sh/taman permainan!

pencerah rendah / mizu

? mizu.js ialah enjin templat html yang ringan untuk sebarang pemaparan sisi. Tiada langkah binaan, tiada konfigurasi, tiada sakit kepala.

Lawati mizu.sh untuk mendapatkan gambaran menyeluruh!

Bonus: mizu.js berpasangan sempurna dengan matcha.css untuk menjadikan tapak web anda kelihatan hebat!

Atas ialah kandungan terperinci Tajamkan HTML anda dengan mizu.js!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!