Boostez votre HTML avec mizu.js !

Vous cherchez à créer des applications Web interactives avec une flexibilité et une adaptabilité ultimes ?

Découvrez  ? mizu.js ?‍? !

Il propose une trentaine de directives puissantes pour restituer dynamiquement du HTML, écouter des événements, créer des éléments personnalisés, lier et modéliser des attributs, gérer des requêtes HTTP, restituer des démarques et du code, et bien plus encore !

Et cela fonctionne côté client sur n'importe quel navigateur moderne...

... mais aussi côté serveur sur votre runtime préféré, que ce soit Node, Deno ou Bun ! Vous pouvez même l'utiliser pour la génération de sites statiques !

Pourquoi encore une autre bibliothèque de modèles JavaScript ?

Je comprends votre inquiétude, mais écoutez-moi !

Au fil des années, je suis devenu de plus en plus frustré par la nécessité de mettre en place tout un écosystème juste pour créer de simples pages Web interactives. Vous avez souvent besoin d'une boîte à outils dédiée, de tonnes de dépendances, d'étapes de transpilation et d'apprendre un nouveau sur-ensemble de langage. Vous pourriez même finir par passer plus de temps à configurer votre environnement qu'à travailler réellement sur votre projet !

C'est pourquoi je me suis passionné pour les bibliothèques telles que Alpine.js et htmx, qui ne nécessitent aucune configuration et sont faciles à utiliser. Cependant, je sentais que ceux-ci avaient certaines limites. Puisqu'ils étaient principalement conçus pour une utilisation côté client, il n'était pas vraiment possible de les utiliser dans des contextes de rendu côté serveur (y compris la génération statique).

Entre-temps, j'ai commencé à écrire de plus en plus de JavaScript isomorphe (c'est-à-dire travaillant à la fois en client et en serveur) et j'ai trouvé que Deno était le runtime parfait pour cela. Deno s'appuie sur les standards du Web plutôt que d'implémenter les siens comme Node. De ce fait, j'ai rencontré des problèmes de compatibilité, qui ne devraient pas exister, car les développeurs devraient être libres d'utiliser ce qui leur convient le mieux, que ce soit Node, Deno, Bun ou le navigateur.

Avec tous ces points à l'esprit, j'ai commencé à travailler sur « 水 » (mizu, le kanji pour l'eau en japonais), une nouvelle bibliothèque qui tente de répondre à toutes les problématiques mentionnées ci-dessus.

Et aujourd'hui, j'ai hâte de vous le présenter !

mizu.js s'intègre directement à votre HTML et utilise des expressions JavaScript Vanilla pour ses expressions. Cela signifie que vous n'avez pas besoin d'apprendre une nouvelle langue ou un nouveau paradigme pour commencer à l'utiliser.

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

Dans mizu.js, le premier caractère d'une directive indique son objectif :

• *pour les directives générales
• @ pour les directives basées sur des événements
• : pour les directives de liaison d'attribut
  • :: pour les directives contraignantes bidirectionnelles (également appelées modélisation)

Vous remarquerez peut-être certaines similitudes avec la syntaxe d'autres frameworks et bibliothèques, ce qui est intentionnel.

mizu.js est réactif, mettant automatiquement à jour le DOM chaque fois que vos données changent (côté client).

Rendu de contenu riche

mizu.js propose également des directives intéressantes pour restituer facilement du contenu riche tel que le markdown ou la coloration syntaxique du code.

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

Directives basées sur HTTP

mizu.js propose un ensemble de directives inspirées du htmx.

Ces directives sont particulièrement utiles dans les contextes de rendu serveur pour importer du contenu, mais elles peuvent également être utilisées côté client pour effectuer des requêtes 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>

Travailler avec des éléments HTML personnalisés

Bien que HTML prenne en charge nativement les éléments personnalisés, ils peuvent être un peu fastidieux à utiliser.

mizu.js simplifie ce processus avec une syntaxe plus concise pour définir et utiliser des éléments personnalisés dans vos documents.

<!-- 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 : Vous pouvez facilement réutiliser vos éléments personnalisés dans d'autres projets en les important avec une directive basée sur 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>

Divers

Je ne couvrirai pas toutes les directives disponibles ici, mais il y en a bien d'autres à explorer !
Voici une petite sélection de quelques-uns intéressants :

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

Utiliser mizu.js par programmation

Jusqu'à présent, j'ai montré comment utiliser mizu.js directement dans vos documents HTML, mais vous pouvez également l'utiliser par programme pour des cas d'utilisation plus avancés.

Étant donné que les directives mizu.js ne sont que de simples attributs HTML, la syntaxe reste la même pour le rendu côté client et côté serveur. Cela signifie que vous pouvez facilement basculer entre les environnements de rendu sans jamais changer vos modèles !

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

Générer des sites statiques

Vous pouvez générer facilement des sites statiques

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

Commencez à utiliser mizu.js dès aujourd'hui !

Vous voulez expérimenter avec mizu.js sans rien installer ?
Consultez mizu.sh/playground !

plus léger / mizu

? mizu.js est un moteur de création de modèles HTML léger pour n'importe quel rendu secondaire. Aucune étape de construction, aucune configuration, pas de maux de tête.

Visitez mizu.sh pour un aperçu complet !

Bonus : mizu.js se marie parfaitement avec matcha.css pour donner à vos sites Web un look fantastique !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!