[core] Restore development playground (#701)

.gitignore

@@ -14,7 +14,8 @@
 /coverage
 /docs/.env.local
 /docs/export
-/docs/pages/playground/
+/docs/app/playground/*
+!/docs/app/playground/\[slug\]
 /docs/public/feed/
 /examples/**/.cache
 /test/bundling/fixtures/*/yarn.lock

docs/app/not-found.tsx

@@ -1,5 +1,18 @@
 import * as React from 'react';
 
+import { AppBar } from 'docs-base/src/components/AppBar';
+import { Navigation } from 'docs-base/src/components/Navigation';
+import routes from 'docs-base/data/pages';
+import classes from './(content)/styles.module.css';
+
 export default function NotFound() {
-  return <h1>Page not found</h1>;
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      <main className={classes.content}>
+        <h1>Page not found</h1>
+      </main>
+    </React.Fragment>
+  );
 }

docs/app/playground/[slug]/page.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { type Dirent } from 'node:fs';
+import { basename, extname } from 'node:path';
+import { readdir } from 'node:fs/promises';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+const DUMMY_SLUG = '_';
+
+export default async function Page(props: Props) {
+  const {
+    params: { slug },
+  } = props;
+
+  if (slug === DUMMY_SLUG) {
+    notFound();
+  }
+
+  try {
+    const Playground = (await import(`../${slug}.tsx`)).default;
+    return <Playground />;
+  } catch (error) {
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const routes = (await readdir('app/playground', { withFileTypes: true }))
+    .filter(
+      (entry: Dirent) => entry.name.endsWith('.tsx') && entry.name !== 'page.tsx' && entry.isFile(),
+    )
+    .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
+
+  if (routes.length === 0) {
+    return [{ slug: DUMMY_SLUG }];
+  }
+
+  return routes;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `${slug} - Playground`,
+  };
+}

docs/src/blocks/GoogleAnalytics.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useMediaQuery } from '@base_ui/react/useMediaQuery';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 
 let boundDataGaListener = false;
 
@@ -19,6 +20,25 @@ const GoogleAnalytics = React.memo(function GoogleAnalytics(props: GoogleAnalyti
     userLanguage,
   } = props;
 
+  useEnhancedEffect(() => {
+    // @ts-expect-error
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag(...args: unknown[]) {
+      // @ts-expect-error
+      window.dataLayer.push(...args);
+    }
+
+    window.gtag = gtag;
+
+    gtag('js', new Date());
+
+    // eslint-disable-next-line no-template-curly-in-string
+    gtag('config', '${id}', {
+      send_page_view: false,
+    });
+  }, []);
+
   React.useEffect(() => {
     if (!boundDataGaListener) {
       boundDataGaListener = true;

docs/src/blocks/GoogleTagManager.tsx

@@ -8,29 +8,10 @@ interface GoogleTagManagerProps {
 export function GoogleTagManager(props: React.PropsWithChildren<GoogleTagManagerProps>) {
   const { id } = props;
   return (
-    <React.Fragment>
-      <script
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-window.gtag = gtag;
-gtag('js', new Date());
-gtag('config', '${id}', {
-  send_page_view: false,
-});
-`,
-        }}
-      />
-      {/**
-       * A better alternative to <script async>, to delay its execution
-       * https://developer.chrome.com/blog/script-component/
-       */}
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
-      />
-    </React.Fragment>
+    /**
+     * A better alternative to <script async>, to delay its execution
+     * https://developer.chrome.com/blog/script-component/
+     */
+    <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${id}`} />
   );
 }