Ванильный JSX

Привет всем любителям покопаться в технологиях фронтенда! В этой статье я расскажу про то, как можно встроить JSX в проект на ванильном TypeScript со сборщиком Vite. Материал будет интересен, если вы:

• Работали с React, но не знаете, что у него под капотом.

• Интересуетесь всей теорией, связанной с фронтендом.

• Гик, создающий проекты на ванильном JS/TS.

Зачем? По большей части ради веселья! Вряд ли описанная идея может быть использована в реальных проектах без дополнительных переусложнений и создания нового фронтенд-фреймворка. Так что откройте в соседней вкладке GitHub-репозиторий с кодом проекта и устройтесь поудобнее. Впереди – глубокое погружение в JSX.

Что такое JSX?

JSX – это синтаксическая обертка над JS. Его нет в стандартах ECMAScript, так что инструменты вроде Babel и React занимаются его транспиляцией в обычный JavaScript код. Рассмотрим классический пример JSX:

const profile = (   <div>     <img src="avatar.png" className="profile" />     <h3>{[user.firstName, user.lastName].join(" ")}</h3>   </div> );

После прогона @babel/plugin-transform-react-jsx, код превратится в уже понятный браузерам JS:

const profile = React.createElement(   "div",   null,   React.createElement("img", { src: "avatar.png", className: "profile" }),   React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) );

Как можно заметить, Babel успешно превратил JSX в аккуратную функцию React.createElement, состоящую из тега-обертки, его свойств (в примере – null) и дочерних элементов, которые тоже, в свою очередь, создаются с помощью этой функции.

Фреймворки React, Vue, Solid умеют обрабатывать JSX, но делают это по-разному. Все потому что у них разные реализации функции createElement, которую по-другому называют JSX Pragma. Узнав об этом, я сразу захотел создать свою прагму.

Парсинг JSX

Прежде чем прыгать в создание прагмы, нужно научиться парсить JSX. Для небольшого и современного проекта, где не требуется поддержка старых браузеров, не хочется использовать Babel. Благо развернуть легкий и быстрый проект всегда можно с Vite и TypeScript. Ну, или с чем-то одним.

Vite – современный сборщик проектов. Его особенность заключается в том, что, в отличие от Webpack, он поставляет исходный код через ES модули. Чтобы развернуть проект на Vite и TypeScript, нужно лишь выполнить команду:

npm create vite@latest

По умолчанию и Vite, и TypeScript, увидев файлы .jsx или .tsx, будут парсить JSX внутри них и подставлять функцию React.createElement. Чтобы направить их на кастомную функцию, нужно поменять настройки в tsconfig.json.

{   "compilerOptions": {     "jsx": "preserve",     "jsxFactory": "h",     "jsxFragmentFactory": "Fragment"   } }

Или, если вы пишете проект без TypeScript, настройте vite.config.js.

import { defineConfig } from 'vite';  export default defineConfig({   esbuild: {     jsxFactory: 'h',     jsxFragment: 'Fragment'   } });

Эти свойства скажут парсеру, что при обработке JSX должна использоваться функция h (от слова hyperscript, hypertext + javascript), если в JSX только один родительский элемент, и Fragment, если их несколько.

JSX Pragma

Настроив парсер на обработку функции h, попробуем создать ее в src/pragma.ts.

// Тег может быть как строкой, так и функцией – если парсим  // функциональный компонент type Tag = string | ((props: any, children: any[]) => JSX.Element);  // Атрибуты элемента – объект либо null type Props = Record<string, string> | null;  // Дети элемента – возвращаемое значение функции h() type Children = (Node | string)[];  export const h = (tag: Tag, props: Props, ...children: Children) => {   // Если тег – компонент, вызываем его   if (typeof tag === 'function') {     return tag({ ... props }, children);   }    // Создаем html-элемент с переданными атрибутами   const el = document.createElement(tag);   if (props) {     Object.entries(props).forEach(([key, val]) => {       if (key === 'className') {         el.classList.add(...(val as string || '').trim().split(' '));         return;       }        el.setAttribute(key, val);     });   }    // Добавляем дочерние элементы к родительскому   children.forEach((child) => {     el.append(child);   });    return el; };

Функция h, как и createElement, принимает название тега (или функциональный компонент), атрибуты и результат выполнения функции h для дочерних элементов.

Все .jsx файлы должны импортировать функцию h, чтобы она была в зоне видимости кода после транспиляции. К примеру, создадим такой компонент:

import { h } from '../pragma'; import { LikeComponent } from './like';  export const App = (   <main className="hello">     <h1>       Hello JSX!     </h1>     <LikeComponent big />   </main> );

Осталось лишь отобразить наше приложение в HTML:

import { App } from './components/app';  const app = document.querySelector<HTMLDivElement>('#app')! app.append(App);

Готово! Теперь TypeScript парсит JSX, а прагма правильно формирует DOM для отображения простейшей верстки, разбитой по JSX-компонентам!

Практическое применение

Как было сказано в начале статьи, это приложение не предназначено для реальных проектов. Оно лишь показывает, как просто можно обрабатывать JSX без использования рантайм-библиотек, буквально работая в ванильном JS.

При этом данную концепцию довольно сложно будет масштабировать. Ведь, чтобы наделить функциональные компоненты логикой, в JSX прагме придется прописывать работу с переменными и обработчиками событий. Занимаясь подобным, вы скорее всего переизобретете реактивность.

Заключение

Как выяснилось, такой нестандартный концепт как JSX Pragma довольно легко можно собрать своими руками в домашних условиях. Я призываю вас экспериментировать со всеми технологиями, до которых доходят руки, углубляться в них.

Также предлагаю вам подписаться на мой телеграм-канал, где я стараюсь регулярно освещать новые технологии во фронтенде. Будет интересно даже искушенным читателям.

Спасибо @illright за редактуру и код-ревью.