Laden Sie Ihr HTML mit mizu.js auf!

Möchten Sie interaktive Web-Apps mit höchster Flexibilität und Anpassungsfähigkeit erstellen?

Anschauen ? mizu.js ?‍?!

Es bietet rund dreißig leistungsstarke Anweisungen zum dynamischen Rendern von HTML, zum Abhören von Ereignissen, zum Erstellen benutzerdefinierter Elemente, zum Binden und Modellieren von Attributen, zum Verarbeiten von HTTP-Anfragen, zum Rendern von Markdown und Code und vielem mehr!

Und es funktioniert clientseitig in jedem modernen Browser...

...aber auch serverseitig auf Ihrer Lieblingslaufzeit, egal ob Node, Deno oder Bun! Sie können es sogar zur Erstellung statischer Websites verwenden!

Warum noch eine weitere JavaScript-Vorlagenbibliothek?

Ich verstehe Ihre Sorge, aber hören Sie mir zu!

Im Laufe der Jahre wurde ich zunehmend frustriert darüber, dass ich ein ganzes Ökosystem aufbauen musste, nur um einfache interaktive Webseiten zu erstellen. Sie benötigen oft eine spezielle Toolbox, jede Menge Abhängigkeiten, Transpilierungsschritte und das Erlernen einer neuen Obermenge einer Sprache. Möglicherweise verbringen Sie am Ende sogar mehr Zeit damit, Ihre Umgebung einzurichten, als tatsächlich an Ihrem Projekt zu arbeiten!

Deshalb habe ich Bibliotheken wie Alpine.js und htmx liebgewonnen, die keine Einrichtung erfordern und einfach zu verwenden sind. Allerdings hatte ich das Gefühl, dass diese einige Einschränkungen hatten. Da sie hauptsächlich für die clientseitige Verwendung konzipiert waren, war es nicht wirklich möglich, sie in serverseitigen Rendering-Kontexten (einschließlich statischer Generierung) zu verwenden.

In der Zwischenzeit habe ich begonnen, immer mehr isomorphes JavaScript zu schreiben (d. h. sowohl im Client als auch im Server zu arbeiten) und habe festgestellt, dass Deno die perfekte Laufzeit dafür ist. Deno verlässt sich auf Webstandards, anstatt wie Node eigene zu implementieren. Aus diesem Grund bin ich auf einige Kompatibilitätsprobleme gestoßen, die nicht existieren sollten, da Entwickler die Freiheit haben sollten, alles zu verwenden, was ihnen am besten passt, sei es Node, Deno, Bun oder der Browser.

Mit all diesen Punkten im Hinterkopf begann ich mit der Arbeit an „水“ (mizu, das Kanji für Wasser auf Japanisch), einer neuen Bibliothek, die versucht, alle oben genannten Probleme anzugehen.

Und heute freue ich mich, es Ihnen vorzustellen!

mizu.js lässt sich direkt in Ihr HTML integrieren und verwendet für seine Ausdrücke Vanilla-JavaScript-Ausdrücke. Das bedeutet, dass Sie keine neue Sprache oder ein neues Paradigma lernen müssen, um damit zu beginnen.

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

In mizu.js gibt das erste Zeichen einer Direktive ihren Zweck an:

• * für allgemeine Richtlinien
• @ für ereignisbasierte Anweisungen
• : für Attributbindungsanweisungen
  • :: für bidirektionale Bindungsanweisungen (auch als Modellierung bezeichnet)

Möglicherweise bemerken Sie einige Ähnlichkeiten mit der Syntax anderer Frameworks und Bibliotheken, was beabsichtigt ist.

mizu.js ist reaktiv und aktualisiert das DOM automatisch, wenn sich Ihre Daten ändern (auf der Clientseite).

Rendern umfangreicher Inhalte

mizu.js bietet auch einige nette Anweisungen zum einfachen Rendern umfangreicher Inhalte wie Markdown oder Code-Syntax-Hervorhebung.

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

mizu.js bietet eine Reihe von Anweisungen, die von Htmx inspiriert sind.

Diese Anweisungen sind besonders nützlich in Server-Rendering-Kontexten zum Importieren von Inhalten, können aber auch auf der Clientseite verwendet werden, um HTTP-Anfragen auszuführen.

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

Arbeiten mit benutzerdefinierten HTML-Elementen

HTML unterstützt zwar nativ benutzerdefinierte Elemente, deren Verwendung kann jedoch etwas mühsam sein.

mizu.js vereinfacht diesen Prozess mit einer präziseren Syntax zum Definieren und Verwenden benutzerdefinierter Elemente in Ihren Dokumenten.

<!-- 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:Sie können Ihre benutzerdefinierten Elemente problemlos in anderen Projekten wiederverwenden, indem Sie sie mit einer HTTP-basierten Direktive importieren!

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

Verschiedenes

Ich werde hier nicht alle verfügbaren Anweisungen behandeln, aber es gibt noch viele weitere zu erkunden!
Hier eine kleine Auswahl einiger interessanter:

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

Programmgesteuerte Verwendung von mizu.js

Bisher habe ich gezeigt, wie Sie mizu.js direkt in Ihren HTML-Dokumenten verwenden, aber Sie können es auch programmgesteuert für fortgeschrittenere Anwendungsfälle verwenden.

Da es sich bei mizu.js-Anweisungen lediglich um einfache HTML-Attribute handelt, bleibt die Syntax sowohl für das clientseitige als auch für das serverseitige Rendering gleich. Das bedeutet, dass Sie problemlos zwischen Rendering-Umgebungen wechseln können, ohne jemals Ihre Vorlagen zu ändern!

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

Generieren statischer Websites

Sie können ganz einfach statische Websites erstellen

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

Beginnen Sie noch heute mit der Nutzung von mizu.js!

Möchten Sie mit mizu.js experimentieren, ohne etwas zu installieren?
Kasse mizu.sh/playground!

Lowlighter / mizu

? mizu.js ist eine leichtgewichtige HTML-Templating-Engine für jedes Seitenrendering. Keine Build-Schritte, keine Konfiguration, keine Kopfschmerzen.

Besuchen Sie mizu.sh für einen umfassenden Überblick!

Bonus: mizu.js passt perfekt zu matcha.css, damit Ihre Websites fantastisch aussehen!

Das obige ist der detaillierte Inhalt vonLaden Sie Ihr HTML mit mizu.js auf!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!