JSX: بدون React یک engine قالب بسازید

در مقاله امروز می خواهیم دباره JSX که همه توسعه دهندگان React با آن آشنا هستند، و ممکنه بعضی از دوستان از آن لذت ببرند و بعضی از دوستان متنفر باشند.بسیاری از آن متنفرند، بسیاری آن را دوست دارند، اما آیا تا به حال فکر کرده اید که چگونه می توانید از قدرت JSX خارج از فریمورک معمول React نهایت استفاده را ببرید؟

بسیار عالی اکنون شما در بهترین نقطه هستید تا پنجره ی جدیدی را کشف کنید.

JSX در React

در دنیای گسترده توسعه وب، استفاده از JSX در ترکیب با React نحوه ایجاد رابط های کاربری پویا و پاسخگو را تغییر داده است. باید اعتراف کرد که تجربه توسعه دهنده (DX) ارائه شده توسط React بر سایر فریمورک ها غالب است و JSX یکی از عواملی است که به موفقیت این تلاش کمک کرده است.

با این حال، گاهی اوقات، ممکن است احساس کنید که نیاز دارید JSX را از این ارتباط تنگاتنگ با React آزاد کنید، بنابراین درها را به روی امکانات خلاقانه جدید باز کنید.

بیایید به پشت صحنه نگاه کنیم.
اینجاست که این سؤال مطرح می‌شود: چگونه می‌توانیم از JSX به طور مستقل و بدون React استفاده کنیم؟ این مقاله اینجاست تا شما را در ساخت یک موتور قالب راهنمایی کند که به شما این امکان را می دهد که این کار را انجام دهید.

تصور کنید که بتوانید از سینتکس قدرتمند JSX در سناریوهای خارج از چارچوب سنتی استفاده کنید و نحوه ارزیابی و ارائه عناصر JSX را سفارشی کنید (خیلی جالب، نه؟).

قبل از اینکه به ساخت موتور قالب خود بپردازیم، بیایید نگاهی گذرا به آنچه در پشت صحنه بین JSX و React وجود دارد بیندازیم.

JSX چیست؟

JSX که مخفف JavaScript XML است، نوعی زبان نشانه گذاری است که بسیار شبیه به HTML است. در واقعیت، پشت یک تگ JSX، تابع React.createElement وجود دارد که تبدیل کامپوننت ها را مدیریت می کند. بله، تگ های JSX در واقع توابع جاوا اسکریپت هستند.

در ابتدا، JSX برای استفاده انحصاری با React طراحی شد، اما با گذشت زمان، بیشتر و بیشتر تکامل یافته است تا به تنهایی یک پروژه در نظر گرفته شود.

بنابراین هدف ما ایجاد موتور قالبی است که با استفاده از JSX با نیازهای ما سازگار باشد. چه در حال ساخت یک برنامه سبک و سریع باشید و چه در حال بررسی سناریوهای غیرعادی باشید، این موتور الگو کلید باز کردن درهای جدیدی به روی خلاقیت ما خواهد بود.

طراحی موتور قالب

بیایید با این شروع کنیم:

من می‌خواهم DX React را حفظ کنم و هسته‌ای بنویسم که بتواند توابع جاوا اسکریپت غنی‌شده با JSX را به نمایشی از HTML خالص ترجمه کند.

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

اما چگونه به همه اینها دست یابیم؟

ساده، ما به یک باندلر نیاز داریم! به طور خاص، در این مقاله، من از Webpack استفاده خواهم کرد، اما شما می توانید همه چیز را با Vite، EsBuild و غیره بازسازی کنید.

سعی می کنم قدم به قدم شما را راهنمایی کنم.

بیایید پروژه را ایحاد کنیم.

یک پوشه جدید ایجاد کنید و دستور npm زیر تایپ کنید:

npm init -y

اکنون به طور خاص به دو چیز نیاز داریم:

اولین چیز این است که Webpack را نصب کنیم، و دوم استفاده از یک transpiler برای تبدیل JSX  به آبجکت های جاوا اسکریپت.

در مورد نکته دوم، از Babel استفاده می کنیم، اما فعلاً روی Webpack تمرکز می کنیم.

در زیر ما webpack را نصب می کنیم:

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

عالی! حالا بیایید Babel را نصب کنیم.

npm i -D @babel/cli @babel/core @babel/preset-env babel-loader

آخرین پیکیج نیز ما به یک پلاگین Babel نیاز داریم که به ما امکان می دهد JSX را ترجمه کنیم. بعداً به کاربرد آن خواهیم پرداخت.

npm i -D @babel/plugin-transform-react-jsx

اکنون که تمام وابستگی های لازم را نصب کرده ایم، بیایید اسکریپت های زیر را به package.json خود اضافه کنیم.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open",
    "dev": "webpack-dev-server --open"
}

به بیان ساده، این اسکریپت ها برای اجرای پروژه ما و ساختن آن در صورت تمایل می باشند. اکنون، ما باید یک جادویی را ایجاد کنیم. به لطف پلاگین babel/plugin-transform-react-jsx، می‌توانیم به Babel بگوییم که یک runtime سفارشی برای ترجمه JSX مدیریت کند.

اساسا، ما اکنون نحوه ارزیابی عبارات JSX را Babel سفارشی می کنیم. بنابراین، در ریشه پروژه خود،فایل jsx-runtime.js را ایجاد کنیم.

const add = (parent, child) => {
  parent.appendChild(child?.nodeType ? child : document.createTextNode(child));
};

const appendChild = (parent, child) => {
  if (Array.isArray(child)) {
    child.forEach((nestedChild) => appendChild(parent, nestedChild));
  } else {
    add(parent, child);
  }
};

export const jsx = (tag, props) => {
  const { children, ...rest } = props;
  if (typeof tag === 'function') return tag(props, children);
  const element = document.createElement(tag);

  for (const p in rest) {
    if (p.startsWith('on') && p.toLowerCase() in window) {
      element.addEventListener(p.toLowerCase().substring(2), props[p]);
    }
  }

  appendChild(element, children);
  return element;
};

export const jsxs = jsx;

این runtime بسیار کم به ما اجازه می دهد تا "کامپوننت" خود را با پروپوزال ها به HTML خالص تبدیل کنیم و با Virtual DOM خداحافظی کنیم. در نظر بگیرید که می‌توانیم runtime را برای رسیدگی به کامپوننت های سفارشی، دستورالعمل‌ها یا هر چیز دیگری که به ذهنتان خطور می‌کند، افزایش دهیم. به طور خلاصه، آن را به عنوان پایه موتور قالب یا یک چارچوب آینده ببینید.

بیایید آخرین قطعه از پازل را اضافه کنیم: فایل پیکربندی webpack. دوباره در ریشه پروژه، فایل webpack.config.js را ایجاد می کنیم.

onst HtmlWebpackPlugin = require('html-webpack-plugin');

const path = require('path');
module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(?:js|jsx|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env']],
            plugins: [
              [
                '@babel/plugin-transform-react-jsx',
                {
                  runtime: 'automatic',
                  importSource: path.resolve(__dirname + '/./'),
                },
              ],
            ],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

اگر به ویژگی ماژول نگاه کنیم، پیکربندی Babel و افزونه plugin-transform-react-jsx را پیدا می کنیم که به ریشه پروژه برای یافتن فایل runtime سفارشی ما اشاره دارد.

چه چیزی کم است؟ یک سیستم واکنش پذیری اما این داستان دیگری است، و در مقالان بعدی به آن اشاره خواهیم کرد پس با آنوفل همراه باشید.

نتیجه

بنابراین، سفر ما به کشف یک موتور قالب مستقل مبتنی بر JSX به پایان می رسد. ما دلایل نیاز به آزاد کردن JSX از React را بررسی کرده‌ایم، به معماری موتور قالب پرداخته‌ایم، و با چالش پیاده‌سازی یک زبان قالب انعطاف‌پذیر و قدرتمند مقابله کرده‌ایم.

با این ابزاری که در اختیار دارید، اکنون به دیدگاه جدیدی در توسعه وب مجهز شده اید. به مزایایی که این آزادی می تواند برای گردش کار روزانه شما به همراه داشته باشد، نگاهی بیندازید.

بازخورد شما ارزشمند است. اگر موتور قالب پیشنهادی را آزمایش کرده اید، سؤال یا پیشنهادی در مورد چگونگی بهبود آن دارید، در نظرات به اشتراک بگذارید.