Migrating from react-helmet-async to React 19 Native Primitives

+-------------------------------------------------------------------------+
|    MIGRATION ARCHITECTURE: FROM HELMETPROVIDER TO REACT 19 PRIMITIVES   |
+-------------------------------------------------------------------------+

 [ LEGACY MODEL: react-helmet-async ]
 +-----------------------------------------------------------------------+
 | <HelmetProvider context={helmetContext}>                              |
 |   <App>                                                               |
 |     <Helmet>                                                          |
 |       <title>My Page</title>  ---> Side-effect in requestAnimationFrame
 |     </Helmet>                      Mutation: document.head.appendChild |
 |   </App>                           Markup: <title data-rh="true">     |
 +-----------------------------------------------------------------------+

                                  |
                                  v MIGRATE TO REACT 19
 [ MODERN MODEL: Native React 19 Hoisting ]
 +-----------------------------------------------------------------------+
 | <App>                                                                 |
 |   <title>My Page</title>      ---> Fiber Reconciliation Engine         |
 |   <meta name="desc" ... />         Native HostResourceElement         |
 | </App>                             Direct commit to document <head>    |
 |                                    Markup: <title>My Page</title>     |
 +-----------------------------------------------------------------------+

import React from 'react';

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

/**
 * Backward-compatibility shim for gradual migration from react-helmet-async.
 * Converts children into native React 19 hoisted tags without runtime dependencies.
 */
export const Helmet: React.FC<HelmetShimProps> = ({
  children,
  title,
  defaultTitle,
  titleTemplate,
}) => {
  // Resolve formatted title if a template is provided
  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;

/**
 * Purges residual DOM nodes generated by react-helmet(-async) from document.head.
 * Executed once prior to mounting the React 19 root container.
 */
export function purgeLegacyHelmetAttributes(): void {
  if (typeof document === 'undefined') return;

  const legacyElements = document.head.querySelectorAll('[data-rh="true"], [data-react-helmet="true"]');
  
  legacyElements.forEach((node) => {
    node.parentNode?.removeChild(node);
  });

  if (process.env.NODE_ENV === 'development' && legacyElements.length > 0) {
    console.info(`[SEO Migration] Purged ${legacyElements.length} legacy Helmet DOM elements.`);
  }
}

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

// Purge legacy helmet tags before React 19 mounts
purgeLegacyHelmetAttributes();

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

if (!rootElement) {
  throw new Error('Root DOM element #root not found');
}

// React 19 createRoot: HelmetProvider is no longer needed
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">
      {/* 
        MIGRATION RESULT:
        Instead of wrapping tags in <Helmet>, declare native tags directly in JSX.
        React 19 automatically hoists them into document.head.
      */}
      <title>{`${article.title} | Fullstack Agentic Lab`}</title>
      <meta name="description" content={article.excerpt} />
      <meta name="author" content="Fullstack Agentic Lab Team" />
      
      {/* OpenGraph Protocol Specifications */}
      <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} />
      
      {/* Canonical Link */}
      <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>
  );
};