Превью и hot reload

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

Настройка превью

Для превью MDX обычно используется сочетание React-компонентов и сборщиков типа Vite или Webpack. Основная идея состоит в том, чтобы каждый MDX-файл превращался в React-компонент, который можно отобразить в браузере:

import { MDXProvider } from '@mdx-js/react';
import MyComponent from './example.mdx';

function App() {
  return (
    
      
    
  );
}
  • MDXProvider предоставляет контекст для пользовательских компонентов, позволяя переопределять стандартные теги Markdown (h1, p, a) на свои React-компоненты.
  • Компонент MDX (MyComponent) рендерится напрямую, что обеспечивает моментальное отображение изменений при модификации MDX-файла.

Для динамического превью можно использовать React Suspense и lazy-loading:

import { Suspense, lazy } from 'react';

const Preview = lazy(() => import('./example.mdx'));

function App() {
  return (
    Загрузка...
}> ); }

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

Hot Reload

Hot Module Replacement (HMR) позволяет обновлять части приложения без полной перезагрузки. В контексте MDX HMR работает благодаря интеграции с React Fast Refresh и Vite/webpack:

  1. Настройка Vite:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mdx from '@mdx-js/rollup';

export default defineConfig({
  plugins: [
    react(),
    mdx()
  ]
});
  1. Настройка Webpack:
const path = require('path');
const { MDXWebpackPlugin } = require('@mdx-js/webpack-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            options: {
              remarkPlugins: [],
              rehypePlugins: []
            }
          }
        ]
      }
    ]
  }
};

HMR позволяет автоматически обновлять компонент после изменения MDX-файла. При этом состояние родительских компонентов React сохраняется, что делает разработку интерактивного контента более удобной.

Превью с пользовательскими компонентами

MDX позволяет вставлять в контент React-компоненты, создавая богатые превью. Например:

// Button.mdx
import CustomButton from './CustomButton';

# Пример кнопки

 alert('Нажали!')}>Нажми меня
  • Любые изменения в CustomButton будут моментально отображаться в MDX через HMR.
  • Можно использовать MDXProvider для глобального замещения стандартных элементов:
const components = {
  h1: (props) => 
,
  p: (props) => 

};

Hot Reload с динамическим импортом

При большом количестве страниц или документации динамический импорт совместно с HMR повышает производительность:

const docs = import.meta.glob('./docs/*.mdx');

Object.keys(docs).forEach((path) => {
  docs[path]().then((mod) => {
    // Отображение компонента в превью
  });
});
  • import.meta.glob используется в Vite для ленивой подгрузки всех MDX-файлов.
  • HMR автоматически отслеживает изменения в этих файлах и перерендеривает только изменённый компонент.

Поддержка state и live-редактирования

Для интерактивного превью можно сохранять состояние компонентов при изменении MDX:

import { useState } from 'react';
import Example from './example.mdx';

function PreviewWrapper() {
  const [count, setCount] = useState(0);

  return (
    <>
      
      
    
  );
}

HMR обновит Example, но состояние count останется неизменным, обеспечивая непрерывную разработку без потери данных.

Оглавление