CDN конфигурация

MDX (Markdown + JSX) предоставляет возможность использовать JSX внутри Markdown-файлов, что позволяет создавать интерактивные и динамичные компоненты в документации или на веб-страницах. Для быстрой интеграции без сборки проекта можно использовать CDN-подключение.

Основные шаги подключения через CDN:

<!-- Подключение React и ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- Подключение MDX через CDN -->
<script src="https://unpkg.com/@mdx-js/mdx@2.4.0/dist/mdx.umd.js"></script>
  • react.development.js и react-dom.development.js обеспечивают базовую работу React-компонентов.
  • mdx.umd.js содержит библиотеку MDX в универсальном формате (UMD), подходящем для прямого использования в браузере без сборки.

Инициализация MDX

Для рендеринга MDX-контента необходимо использовать функцию MDX.compile или MDX.createElement. В CDN-версии доступна глобальная переменная MDX, которая предоставляет следующие методы:

  • MDX.compile(source: string): компилирует MDX-текст в функцию JavaScript.
  • MDX.createElement(type, props, ...children): создает React-элемент из JSX-кода внутри MDX.

Пример компиляции и рендеринга MDX:

<div id="root"></div>
<script>
  const mdxSource = `
# Заголовок уровня 1

Это текст с **жирным выделением** и JSX-компонентом:

<MyButton label="Нажми меня" />
`;

  // Определение простого React-компонента
  function MyButton({ label }) {
    return React.createElement('button', { onClick: () => alert('Клик!') }, label);
  }

  // Компиляция MDX в React-функцию
  const compiledMDX = MDX.compile(mdxSource);

  // Создание React-элемента из скомпилированного MDX
  const MDXContent = compiledMDX.default;
  ReactDOM.createRoot(document.getElementById('root')).render(
    React.createElement(MDXContent, { components: { MyButton } })
  );
</script>

Настройка компонентов в MDX

MDX позволяет переопределять стандартные HTML-элементы или добавлять свои React-компоненты через объект components. Этот объект передается как проп components при рендеринге.

const components = {
  h1: (props) => React.createElement('h1', { style: { color: 'blue' }, ...props }),
  MyButton: MyButton
};

ReactDOM.createRoot(document.getElementById('root')).render(
  React.createElement(MDXContent, { components })
);
  • Каждое имя ключа в объекте components соответствует элементу MDX.
  • Любые JSX-компоненты можно импортировать и передавать сюда для использования внутри MDX.

Динамическая загрузка MDX с CDN

MDX-контент можно хранить в виде внешних файлов .mdx и загружать их через fetch. После получения текста его можно компилировать и рендерить.

fetch('content.mdx')
  .then(res => res.text())
  .then(source => {
    const compiled = MDX.compile(source);
    const MDXContent = compiled.default;
    ReactDOM.createRoot(document.getElementById('root')).render(
      React.createElement(MDXContent, { components: { MyButton } })
    );
  });
  • Позволяет обновлять контент без пересборки приложения.
  • Удобно для документации и блогов с динамическим контентом.

Оптимизация и особенности CDN-подключения

  • CDN-подключение удобно для прототипирования и небольших проектов, но для производственных решений рекомендуется использовать сборщики (Vite, Webpack) для уменьшения размера пакета и оптимизации производительности.
  • Версии библиотек следует фиксировать, чтобы избежать несовместимости между React и MDX.
  • Важно подключать MDX после React и ReactDOM, иначе глобальная переменная MDX не сможет корректно создавать компоненты.

Использование MDXProvider через CDN

Для централизованного управления компонентами удобно использовать MDXProvider, который в CDN-версии доступен через MDX.MDXProvider.

const { MDXProvider } = MDX;

ReactDOM.createRoot(document.getElementById('root')).render(
  React.createElement(MDXProvider, { components }, React.createElement(MDXContent))
);
  • MDXProvider позволяет задавать компоненты один раз для всего дерева MDX, что упрощает стилизацию и управление элементами.

Вывод

CDN-конфигурация MDX обеспечивает быстрый старт без сборки, позволяет использовать динамический контент, подключать собственные компоненты и управлять рендерингом через MDX.createElement и MDXProvider. Такой подход особенно полезен для прототипов, образовательных проектов и веб-страниц с интерактивной документацией.

Оглавление