isolet؛ هر کامپوننتی رو ویجت مستقل کن
خلاصهٔ کاملتر
تو مخزن isolet اومده که این پکیج برای بستهبندی هر کامپوننتی بهشکل یه ویجت ایزوله ساخته شده — فرقی نمیکنه ریاکت باشه، سالید، سوِلت یا جاوااسکریپت خام؛ هر چیزی که بتونه داخل یه المان DOM رندر بشه کار میکنه. خروجی رو هم میشه با تگ اسکریپت، ایمپورت ESM یا require بارگذاری کرد. البته همون اول هشدار داده شده که پروژه خیلی آزمایشیه و اِیپیآیش ممکنه بدون اطلاع قبلی عوض بشه.
کل اِیپیآی هسته یه تابعه: createIsolet. بهش یه اسم، یه تابع mount و اختیاری یه CSS میدی و در عوض mount، update و unmount میگیری:
import { createIsolet } from "isolet-js";
import { react } from "isolet-js/react";
const widget = createIsolet({
name: "hello",
mount: react(Hello),
css: "h1 { color: tomato; }",
});
widget.mount(document.body, { name: "World" });سه حالت ایزولاسیون داره: shadow-dom که پیشفرضه و جداسازی کامل CSS میده، scoped که فقط یه div دور کامپوننت میذاره و استایلها رو سراسری تزریق میکنه، و none که مستقیم داخل المان مقصد سوار میشه. آداپتورهای فریمورک هم لایههای نازکی هستن که فقط منطق mount شدن رو مدیریت میکنن و خود هسته به هیچ فریمورکی وابسته نیست.
یه CLI هم داره که با isolet-js init فایل کانفیگ میسازه و با isolet-js build ویجتها رو بیلد میکنه؛ حالت --watch و --minify هم داره. تو کانفیگ اسم، فایل ورودی، مسیر CSS و فرمت خروجی (iife، esm یا cjs) رو مشخص میکنی و میتونی بهجای یه شیء، آرایهای از چند ویجت بدی.
نکتهی جالب بیلد، مدیریت خودکار CSS و داراییهاست: فایلهای استایل خونده میشن، همهی ارجاعهای url() مثل فونت و تصویر بهشکل data URI داخل خروجی جاسازی میشن و نتیجه با نام ISOLET_CSS تو کد ورودی در دسترس قرار میگیره. ایمپورتهای .css هم به رشتهی جاوااسکریپتی تبدیل میشن که با shadow DOM سازگار باشه.
نکات کلیدی:
- بستهبندی هر کامپوننتی (ریاکت، سالید، سوِلت، جاوااسکریپت خام) بهشکل ویجت خودبسنده
- اِیپیآی هسته فقط createIsolet با متدهای mount، update و unmount
- سه حالت ایزولاسیون: shadow-dom (پیشفرض)، scoped و none
- CLI با دستورهای init و build و پشتیبانی از خروجی iife، esm و cjs
- جاسازی خودکار CSS و داراییها بهشکل data URI موقع بیلد
- پروژه هنوز آزمایشیه و اِیپیآیش ممکنه تغییر کنه




