HTML خود را با mizu.js شارژ کنید!

Summarize this content to 400 words in Persian Lang
به دنبال ساخت برنامه های وب تعاملی با انعطاف پذیری و سازگاری نهایی هستید؟

بررسی کنید 🌊 mizu.js 🐕‍🦺!

حدود 30 دستور العمل قدرتمند برای رندر کردن پویا HTML، گوش دادن به رویدادها، ایجاد عناصر سفارشی، پیوند و ویژگی‌های مدل، رسیدگی به درخواست‌های HTTP، رندر علامت‌گذاری و کد و بسیاری موارد دیگر ارائه می‌دهد.

و روی هر مرورگر مدرنی در سمت مشتری کار می کند…

… اما همچنین در زمان اجرا مورد علاقه شما در سمت سرور، چه Node، Deno، یا Bun! حتی می توانید از آن برای تولید سایت استاتیک استفاده کنید!

چرا یک کتابخانه قالب جاوا اسکریپت دیگر؟
من نگرانی شما را درک می کنم، اما به من گوش دهید!

در طول سال ها، من به طور فزاینده ای از نیاز به راه اندازی یک اکوسیستم کامل فقط برای ایجاد صفحات وب تعاملی ساده ناامید شده ام. شما اغلب به یک جعبه ابزار اختصاصی، تعداد زیادی وابستگی، مراحل انتقال و یادگیری یک مجموعه جدید از یک زبان نیاز دارید. حتی ممکن است در نهایت زمان بیشتری را برای تنظیم محیط خود صرف کنید تا اینکه واقعاً روی پروژه خود کار کنید!

به همین دلیل است که من به کتابخانه هایی مانند Alpine.js و htmx علاقه مند شدم که نیازی به نصب ندارند و استفاده از آنها آسان است. با این حال، من احساس کردم که اینها محدودیت هایی دارند. از آنجایی که آنها بیشتر برای استفاده در سمت کلاینت طراحی شده بودند، واقعاً امکان استفاده از آنها در زمینه های رندر سمت سرور (از جمله تولید استاتیک) وجود نداشت.

در همین حین، من شروع به نوشتن جاوا اسکریپت ایزومورف بیشتر و بیشتر کردم (یعنی هم در کلاینت و هم در سرور کار می کنم) و متوجه شدم Deno بهترین زمان اجرا برای آن است. Deno به جای اجرای استانداردهای خود مانند Node به استانداردهای وب متکی است. به همین دلیل، من با برخی مشکلات سازگاری مواجه شدم که نباید وجود داشته باشند، زیرا توسعه دهندگان باید آزاد باشند از هر چیزی که به بهترین وجه برای آنها مناسب است استفاده کنند، چه Node، Deno، Bun یا مرورگر.

با در نظر گرفتن تمام این نکات، کار بر روی « 水 » (ریشه هاکانجی برای آب به زبان ژاپنی)، یک کتابخانه جدید که سعی دارد به تمام مسائل ذکر شده در بالا بپردازد.

و امروز، من هیجان زده هستم که آن را به شما معرفی کنم!

mizu.js مستقیماً با HTML شما ادغام می شود و از عبارات جاوا اسکریپت وانیلی برای عبارات خود استفاده می کند. این بدان معناست که برای شروع استفاده از آن نیازی به یادگیری یک زبان یا پارادایم جدید ندارید.

در mizu.js، اولین کاراکتر یک دستورالعمل هدف آن را نشان می دهد:

* برای بخشنامه های عمومی

@ برای دستورالعمل های مبتنی بر رویداد

: برای دستورالعمل های الزام آور ویژگی

:: برای دستورالعمل های الزام آور دو طرفه (همچنین به عنوان مدل سازی شناخته می شود)

ممکن است متوجه شباهت‌هایی با نحو از چارچوب‌ها و کتابخانه‌های دیگر شوید که عمدی است.

mizu.js واکنشی است، هر زمان که داده های شما تغییر کند (در سمت کلاینت) DOM را به طور خودکار به روز می کند.

ارائه محتوای غنی

mizu.js همچنین دستورالعمل های دقیقی را برای ارائه آسان محتوای غنی مانند علامت گذاری یا برجسته کردن نحو کد ارائه می دهد.

*toc=”‘main section'”>

*markdown>**hello world!**

*code[ts]>const foo = “bar”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دستورالعمل های مبتنی بر HTTP

mizu.js مجموعه ای از دستورالعمل ها را با الهام از htmx ارائه می دهد.

این دستورالعمل‌ها به‌ویژه در زمینه‌های رندر سرور برای وارد کردن محتوا مفید هستند، اما می‌توانند در سمت مشتری برای انجام درخواست‌های HTTP نیز استفاده شوند.

%http=”https://example.com” %response.html>
%http=”https://example.com” %response.html=”$content.querySelector(‘h1’)”>

%http.post=”https://example/api”
%header[x-foo]=”‘my custom header'”
%body.json=”{ foo: ‘bar’ }”
%@click=”alert(await $response.text())”
>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کار با عناصر سفارشی HTML

در حالی که HTML به طور بومی از عناصر سفارشی پشتیبانی می کند، استفاده از آنها می تواند کمی خسته کننده باشد.

mizu.js این فرآیند را با یک نحو مختصر تر برای تعریف و استفاده از عناصر سفارشی در اسناد شما ساده می کند.

*custom-element=”my-element”>
*mustache>
There is {{ items.length }} items:

#items>foo
#items>bar

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پاداش: شما به راحتی می توانید با وارد کردن آنها با یک دستورالعمل مبتنی بر HTTP از عناصر سفارشی خود در پروژه های دیگر استفاده مجدد کنید!

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

متفرقه

من همه دستورالعمل های موجود را در اینجا پوشش نمی دهم، اما موارد بیشتری برای بررسی وجود دارد!در اینجا مجموعه کوچکی از موارد جالب آورده شده است:

*refresh=”1″ *mustache>{{ new Date() }}

*eval=”this.remove()”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از mizu.js به صورت برنامه ای

تا اینجا نحوه استفاده را نشان داده ام mizu.js به طور مستقیم در اسناد HTML خود، اما شما همچنین می توانید از آن به صورت برنامه نویسی برای موارد استفاده پیشرفته تر استفاده کنید.

چون mizu.js دستورالعمل ها فقط ویژگی های ساده 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” })

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شروع به استفاده کنید mizu.js امروز

می خواهید با آن آزمایش کنید mizu.js بدون نصب چیزی؟mizu.sh/زمین بازی را بررسی کنید!

🌊 mizu.js یک موتور قالب html سبک برای هر رندر جانبی است. بدون مراحل ساخت، بدون پیکربندی، بدون سردرد.

برای بررسی جامع از mizu.sh دیدن کنید!

پاداش: mizu.js کاملاً با matcha.css جفت می شود تا وب سایت شما فوق العاده به نظر برسد!

 *markdown>**hello world!**


 *code[ts]>const foo = "bar"

 %http="https://example.com" %response.html>
 %http="https://example.com" %response.html="$content.querySelector('h1')">


 
  %http.post="https://example/api"
  %header[x-foo]="'my custom header'"
  %body.json="{ foo: 'bar' }"
  %@click="alert(await $response.text())"
>

  
 #items>foo
  
 #items>bar

 *refresh="1" *mustache>{{ new Date() }}


 *eval="this.remove()">

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