‏driver.js؛ تور محصول و راهنمای گام‌به‌گام برای وب

به گفتهٔ سازنده‌ش، driver.js یه کتابخونهٔ سبک جاوااسکریپته برای ساختن تور محصول، هایلایت‌کردن بخش‌ها و راهنمای درون‌بافتار (contextual help). هیچ وابستگی‌ای نداره، با TypeScript نوشته شده و زیر مجوز MIT رایگانه.

راه‌اندازیش خیلی ساده‌ست: driver رو با فایل CSSش import می‌کنی، مرحله‌ها رو توصیف می‌کنی و drive() رو صدا می‌زنی. همین کل کاره:

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: "#search", popover: { title: "Search", description: "Find anything in seconds." } },
    { element: "#profile", popover: { title: "Your account", description: "Manage settings and billing." } },
  ],
});

driverObj.drive();

اگه به‌جای یه تور کامل فقط بخوای یه بخش رو نشون بدی، متد highlight() رو با یه element و popover صدا می‌زنی تا مثلاً یه قابلیت جدید رو برجسته کنه. هر مرحله می‌تونه به یه انتخابگر CSS وصل شه و یه پاپ‌اور با عنوان و توضیح نشون بده.

به گفتهٔ مستندات، driver.js برای طیف وسیعی از کاربردها به‌درد می‌خوره: آنبوردینگ کاربر، آموزش‌های تعاملی گام‌به‌گام، معرفی قابلیت‌های جدید، راهنمای درون‌بافتار، هدایت فیلد‌به‌فیلد فرم‌ها و حتی کم‌کردن حواس‌پرتی با برجسته‌کردن چیزی که مهمه.

از نظر محبوبیت، ماهی بیش از ۴ میلیون بار دانلود می‌شه، بیش از ۲۵ هزار ستارهٔ گیت‌هاب داره و ماهی حدود ۲۸۶ میلیون بار از CDN فراخوانی می‌شه. با هر فریم‌ورک یا کتابخونه‌ای — React، Vue، Angular، Svelte، Solid، Next.js — یا حتی جاوااسکریپت خالص کار می‌کنه و کل حجمش حدود ۵ کیلوبایته.

نکات کلیدی:

• driver.js یه کتابخونهٔ سبک (~۵ کیلوبایت) و بدون وابستگی برای تور محصول و راهنمای درون‌متنیه
• فقط driver رو import می‌کنی، مرحله‌ها رو تعریف می‌کنی و drive() رو صدا می‌زنی
• متد highlight() برای برجسته‌کردن یه بخش خاص هست
• کاربردهاش: آنبوردینگ، آموزش تعاملی، معرفی قابلیت، راهنمای فرم
• با هر فریم‌ورکی یا جاوااسکریپت خالص کار می‌کنه و مجوزش MIT رایگانه