JTSX Loader v0.1.4

Russian / English
* Документация в стадии разработки

JavaScript TypeScript Xml — загрузчик .jsx и .tsx файлов для Node.js

Позволяет писать JTSX код и компилировать в нативный HTML

Цель разработки данного загрузчика в том, чтобы решить проблему комфортного использования JSX как шаблонизатора, без привязки к React

Транспиляция JTSX файлов происходит с помощью esbuild - надежный и очень быстрый транспайлер

Всего одна зависимость — esbuild

Для конвертации используется jsxFactory функция, которая преобразует теги, аттрибуты и дочерние элементы в стандартный HTML

Загрузчик позволяет расширить преобразования JTSX файлов через конфигурации и самостоятельно написанные функции

Так же загрузчик позволяет предотвратить кеширование при импорте компонентов, что дает возможность комфортно использовать перезагрузку страницы при изменениях и не перезапускать сервер, которые рендерит компонент

Если вы нашли ошибку или хотите предложить улучшения для загрузчика, создайте issue на github

О документации

Данная документация это проект внутри модуля, который можно запустить локально для изучения его работы. Исходники расположены в папке example

Вы можете запустить ее локально с помощью npm i и npm run start или с помощью nodemon для разработки npm run dev

ВАЖНО: Данный загрузчик это НЕ замена React, Vue и их производных. Если вам нужна реактивность и толстые клиенты, то лучше использовать соответствующие инструменты

Github

Описание файла конфигурации

Установка, использование, требования

Установка

npm install jtsx-loader

Использование

Проекты необходимо запускать через команду --import

node --import jtsx-loader ./server.js

Как отрендерить файл

Напишем простой компонент страницы index.jsx:

export default async ({ title }) => <html lang="ru">
    <head>
        <title>{title}</title>
    </head>
    <body>
        <h1>{title}</h1>
        <p>
            Body content with array:
            {[0, 1, 2].map(n => <code>{n}</code>)}
        </p>
    </body>
</html>;

Импортировать компонент через import(), ?reload параметр опционален, используется для предотвращения кеширования

const JSXComp = (await import('./index.jsx?reload')).default;

Вызвать импортированный компонент как функцию передав объект данных и вывести результат в консоль

const rendered = await JSXComp({ data: renderCount });
console.log(rendered);

Подробный пример с сохранением результат в файл здесь

Требования

Минимальная версия Node.js - 20.16.0

Базовые примеры

Нативные HTML аттрибуты

Допускается использование только нативных HTML аттрибутов

React аттрибуты и инлайн функции в тегах не поддерживаются по дизайну и никогда не должны использоваться

В случае использования React аттрибутов, как например className,
в консоль будет выведено предупреждение, а аттрибут отрендерится как есть

Другие отличия от стандартного JSX:

  • Аттрибут __escape: используется для вывода любого экранированного контента
  • Аттрибут __raw: рендерит строку в содержимое тега как есть, например полезно для тегов script и style
  • В JTSX файл передается объект _jsxUtils, которая содержит в себе полезные утилиты. Вместо данного объекта можно передать свою любую функцию и использовать ее для расширения стандартного преобразования

Доступны все возможности JavaScript, которые используются в обычном JSX

ВАЖНО: весь код выполняется в среде Node.js, поэтому здесь нет браузерного DOM

Вычисления

{(1 + 1 + 2 * 2) / 3}

Результат: 2

Стандартная библиотека Node.js

{Math.pow(9, 2)}

Результат: 81

Тернарные выражения

1 > 2 ? <strong>Больше</strong> : 'Меньше'

Результат: Меньше

2 > 1 ? <strong>Больше</strong> : 'Меньше'

Результат: Больше

Манипуляции c массивами и рендеринг компонентов

Рендерит компоненты/теги с данными из массива

[0, 1, 2].map(num => <code>{num}</code>)

Результат: 0 1 2

__escape

Вывод любого экранированного контента

<code __escape={'<div>escaped</div>'}></code>

Результат: <div>escaped</div>

Запрос внутри компонента через fetch

const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);

Вызывается при каждом рендеринге

Если вызывается внутренний сервер, то он должен быть запущен до запуска рендеринга

Ответ: {
    "code": 200,
    "message": "Success"
}

Импортированный компонент

Импортированный на страницу Фрагмент components/Inner.tsx

Сколько раз был отрендерен компонент после рестарта сервера: 8

В этом блоке используется className, который преобразуется в class

Дочерние компоненты перереданные из родительского:

Дочерний компонент 0

Дочерний компонент 1

Пользовательские аттрибуты и их обработка

<input type="text" ac:custom="input" /> трансформируется в data-ac-custom="input"

Обработчик пишется в jtsx.config.js

Авторы

Дергачев Михаил

https://ancros.dev

Референсы

https://esbuild.github.io/api/#jsx-factory

https://lwebapp.com/en/post/custom-jsx

https://nakedjsx.org/