Миграция с react-helmet-async на нативные примитивы React 19

+-------------------------------------------------------------------------+
|      АРХИТЕКТУРА МИГРАЦИИ: С HELMETPROVIDER К НАНО-ПРИМИТИВАМ REACT 19  |
+-------------------------------------------------------------------------+

 [ СТАРАЯ МОДЕЛЬ: react-helmet-async ]
 +-----------------------------------------------------------------------+
 | <HelmetProvider context={helmetContext}>                              |
 |   <App>                                                               |
 |     <Helmet>                                                          |
 |       <title>My Page</title>  ---> Сайд-эффект в requestAnimationFrame|
 |     </Helmet>                      Мутация: document.head.appendChild |
 |   </App>                           Разметка: <title data-rh="true">   |
 +-----------------------------------------------------------------------+

                                  |
                                  v МИГРАЦИЯ НА REACT 19
 [ НОВАЯ МОДЕЛЬ: Native React 19 Hoisting ]
 +-----------------------------------------------------------------------+
 | <App>                                                                 |
 |   <title>My Page</title>      ---> Fiber Reconciliation Engine         |
 |   <meta name="desc" ... />         Встроенный HostResourceElement     |
 | </App>                             Прямой коммит в <head> документа   |
 |                                    Разметка: <title>My Page</title>   |
 +-----------------------------------------------------------------------+

import React from 'react';

export interface HelmetShimProps {
  children?: React.ReactNode;
  title?: string;
  defaultTitle?: string;
  titleTemplate?: string;
}

/**
 * Адаптер обратной совместимости для плавной миграции с react-helmet-async.
 * Разворачивает дочерние элементы в нативные теги React 19.
 */
export const Helmet: React.FC<HelmetShimProps> = ({
  children,
  title,
  defaultTitle,
  titleTemplate,
}) => {
  // Вычисляем заголовок с учетом шаблона, если он задан
  const resolvedTitle = React.useMemo(() => {
    const rawTitle = title || defaultTitle;
    if (!rawTitle) return null;
    if (titleTemplate && title) {
      return titleTemplate.replace('%s', title);
    }
    return rawTitle;
  }, [title, defaultTitle, titleTemplate]);

  return (
    <>
      {resolvedTitle && <title>{resolvedTitle}</title>}
      {children}
    </>
  );
};

export default Helmet;

/**
 * Удаляет из document.head остаточные DOM-узлы, созданные react-helmet(-async).
 * Вызывается один раз перед монтированием корневого дерева React 19.
 */
export function purgeLegacyHelmetAttributes(): void {
  if (typeof document === 'undefined') return;

  const legacyElements = document.head.querySelectorAll('[data-rh="true"], [data-react-helmet="true"]');
  
  legacyElements.forEach((node) => {
    // Безопасное удаление элемента из DOM
    node.parentNode?.removeChild(node);
  });

  if (process.env.NODE_ENV === 'development' && legacyElements.length > 0) {
    console.info(`[SEO Migration] Удалено ${legacyElements.length} устаревших DOM-элементов Helmet.`);
  }
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import { purgeLegacyHelmetAttributes } from './utils/cleanup-legacy-helmet';
import { App } from './App';

// Очищаем DOM от старых тегов до инициализации React 19
purgeLegacyHelmetAttributes();

const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Корневой DOM-элемент #root не найден');
}

// React 19 createRoot: HelmetProvider больше не требуется
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react';

interface ArticleData {
  id: string;
  slug: string;
  title: string;
  excerpt: string;
  publishedAt: string;
}

interface BlogPostPageProps {
  article: ArticleData;
}

export const BlogPostPage: React.FC<BlogPostPageProps> = ({ article }) => {
  const canonicalUrl = `https://agenticlab.dev/blog/${article.slug}`;

  return (
    <article className="prose mx-auto py-8">
      {/* 
        РЕЗУЛЬТАТ МИГРАЦИИ:
        Вместо <Helmet><title>...</title></Helmet>
        объявляем нативные теги напрямую в JSX.
        React 19 выполнит хойстинг в document.head автоматически.
      */}
      <title>{`${article.title} | Fullstack Agentic Lab`}</title>
      <meta name="description" content={article.excerpt} />
      <meta name="author" content="Fullstack Agentic Lab Team" />
      
      {/* OpenGraph спецификация */}
      <meta property="og:title" content={article.title} />
      <meta property="og:description" content={article.excerpt} />
      <meta property="og:type" content="article" />
      <meta property="og:url" content={canonicalUrl} />
      
      {/* Канонический URL */}
      <link rel="canonical" href={canonicalUrl} />

      <header>
        <h1 className="text-3xl font-bold">{article.title}</h1>
        <time dateTime={article.publishedAt}>{article.publishedAt}</time>
      </header>

      <div className="content mt-4">
        <p>{article.excerpt}</p>
      </div>
    </article>
  );
};