style: Import React in multiple components

app/components/common/Mermaid.tsx

@@ -1,41 +0,0 @@
-import MermaidRenderer from "react-mermaid2";
-
-type MermaidProps = {
-  path: string;
-};
-
-export function Mermaid(props: MermaidProps) {
-  return (
-    <MermaidRenderer
-      chart={`
-    sequenceDiagram
-    autonumber
-
-    box rgba(139,92,246,.1) Navigateur
-    actor Utilisateur
-    end
-
-    box rgba(139,92,246,.1) Serveur
-    participant Routeur
-    participant Contrôleur
-    participant Modèle
-    participant Vue
-    end
-
-    participant Base de données
-
-    Utilisateur->>Routeur: Je veux voir la page d'accueil
-    Routeur->>Contrôleur: Appelle la méthode \`home\`
-    alt Si des données sont nécessaires
-        Contrôleur->>Modèle: Demande les données
-        Modèle->>Base de données: Récupère les données
-        Base de données-->>Modèle: Retourne les données
-        Modèle-->>Contrôleur: Retourne les données
-    end
-    Contrôleur->>Vue: Demande le HTML
-    Vue-->>Contrôleur: Retourne le HTML généré
-    Contrôleur->>Utilisateur: Retourne le HTML généré
-  `}
-    />
-  );
-}

app/components/syntax/Prose.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 
 export function Prose<T extends React.ElementType = "div">({

app/components/syntax/QuickLinks.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@/components/common/Link";
 import { Icon } from "@syntax/Icon";
+import React from "react";
 
 export function QuickLinks({ children }: { children: React.ReactNode }) {
   return <div className="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">{children}</div>;

app/components/syntax/SSRSnippet.tsx

@@ -1,7 +1,7 @@
 import { Highlight, Prism } from "prism-react-renderer";
 import { prismThemes } from "@/data/themes/prism";
+import React, { Fragment, useMemo } from "react";
 import { useTheme } from "@/hooks/useTheme";
-import { Fragment, useMemo } from "react";
 import clsx from "clsx";
 
 export function SSRSnippet({

app/components/syntax/Search.tsx

@@ -1,4 +1,4 @@
-import { useId, useState, useEffect, createContext, useContext, Fragment } from "react";
+import React, { useId, useState, useEffect, createContext, useContext, Fragment } from "react";
 import { SearchResult } from "@/services/FlexSearchService";
 import { Dialog, DialogPanel } from "@headlessui/react";
 import { useDebounce } from "@/hooks/useDebounce";

app/components/syntax/Snippet.tsx

@@ -3,6 +3,7 @@ import type { Data } from "@/pages/docs/+data";
 import { clientOnly } from "vike-react/clientOnly";
 import { useData } from "vike-react/useData";
 import { SSRSnippet } from "./SSRSnippet";
+import React from "react";
 
 const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
 

app/components/syntax/TableOfContents.tsx

@@ -1,25 +1,23 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Link } from "@/components/common/Link";
 import clsx from "clsx";
 
 import { type Section, type Subsection } from "@/lib/sections";
 
 export function TableOfContents({ tableOfContents }: { tableOfContents: Array<Section> }) {
-  let [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
+  const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id);
 
-  let getHeadings = useCallback((tableOfContents: Array<Section>) => {
+  const getHeadings = useCallback((tableOfContents: Array<Section>) => {
     return tableOfContents
       .flatMap((node) => [node.id, ...node.children.map((child) => child.id)])
       .map((id) => {
-        let el = document.getElementById(id);
+        const el = document.getElementById(id);
         if (!el) return null;
 
-        let style = window.getComputedStyle(el);
-        let scrollMt = parseFloat(style.scrollMarginTop);
+        const style = window.getComputedStyle(el);
+        const scrollMt = parseFloat(style.scrollMarginTop);
 
-        let top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
+        const top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
         return { id, top };
       })
       .filter((x): x is { id: string; top: number } => x !== null);
@@ -35,11 +33,8 @@ export function TableOfContents({ tableOfContents }: { tableOfContents: Array<Se
       let current = headings[0]?.id;
 
       for (const heading of headings) {
-        if (top >= heading.top - 10) {
-          current = heading.id;
-        } else {
-          break;
-        }
+        if (top < heading.top - 10) break;
+        current = heading.id;
       }
       setCurrentSection(current);
     }
@@ -51,12 +46,9 @@ export function TableOfContents({ tableOfContents }: { tableOfContents: Array<Se
   }, [getHeadings, tableOfContents]);
 
   function isActive(section: Section | Subsection) {
-    if (section.id === currentSection) {
-      return true;
-    }
-    if (!section.children) {
-      return false;
-    }
+    if (section.id === currentSection) return true;
+    if (!section.children) return false;
+
     return section.children.findIndex(isActive) > -1;
   }
 

app/components/syntax/ThemeSelector.tsx

@@ -1,5 +1,5 @@
 import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTheme } from "@/hooks/useTheme";
 import clsx from "clsx";
 
@@ -33,8 +33,8 @@ function DarkIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 }
 
 export function ThemeSelector(props: React.ComponentPropsWithoutRef<typeof Listbox<"div">>) {
-  let [mounted, setMounted] = useState(false);
-  let { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
 
   useEffect(() => {
     setMounted(true);

app/components/syntax/icons/InstallationIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function InstallationIcon({
   id,

app/components/syntax/icons/LightbulbIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function LightbulbIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (

app/components/syntax/icons/PluginsIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function PluginsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (

app/components/syntax/icons/PresetsIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function PresetsIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (

app/components/syntax/icons/QuestionIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function QuestionIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (

app/components/syntax/icons/ThemingIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function ThemingIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (

app/components/syntax/icons/WarningIcon.tsx

@@ -1,4 +1,5 @@
 import { DarkMode, Gradient, LightMode } from "@syntax/Icon";
+import React from "react";
 
 export function WarningIcon({ id, color }: { id: string; color?: React.ComponentProps<typeof Gradient>["color"] }) {
   return (

app/eslint.config.js

@@ -1,10 +1,10 @@
 // @ts-nocheck
 
-import eslint from "@eslint/js";
-import prettier from "eslint-plugin-prettier/recommended";
 import react from "eslint-plugin-react/configs/recommended.js";
-import globals from "globals";
+import prettier from "eslint-plugin-prettier/recommended";
 import tseslint from "typescript-eslint";
+import eslint from "@eslint/js";
+import globals from "globals";
 
 export default tseslint.config(
   {
@@ -33,14 +33,10 @@ export default tseslint.config(
   },
   {
     rules: {
-      "@typescript-eslint/no-unused-vars": [
-        1,
-        {
-          argsIgnorePattern: "^_",
-        },
-      ],
+      "@typescript-eslint/no-unused-vars": [1, { argsIgnorePattern: "^_" }],
       "@typescript-eslint/no-namespace": 0,
-      "react/react-in-jsx-scope": false,
+      "react/react-in-jsx-scope": "warn",
+      "react/jsx-filename-extension": [1, { extensions: [".tsx"] }],
     },
   },
 

app/hooks/useAutoComplete.ts

@@ -1,37 +0,0 @@
-import type { SearchResult } from "@/lib/search";
-
-import { useDebounce } from "./useDebounce";
-import { useState, useEffect, use } from "react";
-
-export function useAutoComplete(onSearch: (query: string) => Promise<SearchResult[]>) {
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpened, setIsOpened] = useState(false);
-  const [query, setQuery] = useDebounce();
-
-  useEffect(() => {
-    // Attach the event listener to the window
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        setIsOpened(false);
-      } else if (event.key === "K" && (event.ctrlKey || event.metaKey)) {
-        event.preventDefault();
-        setIsOpened(true);
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
-  return {
-    results,
-    isLoading,
-    isOpened,
-    query,
-    setQuery,
-  };
-}

app/layouts/LayoutDefault.tsx

@@ -2,19 +2,21 @@ import { MobileNavigation } from "@syntax/MobileNavigation";
 import { usePageContext } from "vike-react/usePageContext";
 import { ThemeProvider } from "@/providers/ThemeProvider";
 import { ThemeSelector } from "@syntax/ThemeSelector";
+import { clientOnly } from "vike-react/clientOnly";
+import React, { useEffect, useState } from "react";
+import { ToastContainer } from "react-toastify";
 import { Navigation } from "@syntax/Navigation";
 import { Link } from "@/components/common/Link";
-import { useEffect, useState } from "react";
-import { Search } from "@syntax/Search";
 import { Hero } from "@syntax/Hero";
-import { Logo, LogoWithText } from "@syntax/Logo";
+import { Logo } from "@syntax/Logo";
 import clsx from "clsx";
 
 import "./style.css";
 import "./tailwind.css";
 import "./prism.css";
 import "unfonts.css";
-import { ToastContainer } from "react-toastify";
+
+const Search = clientOnly(() => import("@syntax/Search").then((module) => module.Search));
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
@@ -25,7 +27,7 @@ function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 }
 
 function Header() {
-  let [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     function onScroll() {
@@ -59,7 +61,7 @@ function Header() {
       </div>
 
       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-        <Search />
+        <Search fallback={<div className="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />} />
       </div>
 
       <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">

app/lib/navigation.ts

@@ -119,16 +119,17 @@ export const navigation: NavigationSection[] = [
   },
 ];
 
+export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean {
+  return link.subitems.some((subitem) => subitem.href === subitemHref);
+}
+
 export function findNavigationLink(namespace: string, href: string): NavigationLink | undefined {
   const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, "");
 
   const foundLink = navigation
     .flatMap((section) => section.links)
     .find((link) => {
-      link.href === currentUrl ||
-        link.subitems.some((subitem) => {
-          subitem.href === currentUrl;
-        });
+      return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl);
     });
 
   return foundLink;

app/lib/search.ts

@@ -5,6 +5,8 @@ import glob from "fast-glob";
 import * as path from "path";
 import * as fs from "fs";
 
+type SearchOptionValue = string | number | boolean | null | undefined | object | unknown;
+
 const slugify = slugifyWithCounter();
 
 interface Node {
@@ -32,28 +34,30 @@ export interface SearchResult {
 
 function toString(node: Node): string {
   let str = node.type === "text" && typeof node.attributes?.content === "string" ? node.attributes.content : "";
+
   if ("children" in node) {
-    for (let child of node.children!) {
+    for (const child of node.children!) {
       str += toString(child);
     }
   }
+
   return str;
 }
 
 function extractSections(node: Node, sections: Section[], isRoot: boolean = true): void {
-  if (isRoot) {
-    slugify.reset();
-  }
+  if (isRoot) slugify.reset();
+
   if (node.type === "heading" || node.type === "paragraph") {
-    let content = toString(node).trim();
-    if (node.type === "heading" && node.attributes?.level! <= 2) {
-      let hash = node.attributes?.id ?? slugify(content);
+    const content = toString(node).trim();
+
+    if (node.attributes?.level && node.type === "heading" && node.attributes.level <= 2) {
+      const hash = node.attributes?.id ?? slugify(content);
       sections.push({ content, hash, subsections: [] });
     } else {
       sections[sections.length - 1].subsections.push(content);
     }
   } else if ("children" in node) {
-    for (let child of node.children!) {
+    for (const child of node.children!) {
       extractSections(child, sections, false);
     }
   }
@@ -111,18 +115,18 @@ export function buildSearchIndex(pagesDir: string): FlexSearch.Document<SearchRe
 export function search(
   sectionIndex: FlexSearch.Document<SearchResult>,
   query: string,
-  options: Record<string, any> = {},
+  options: Record<string, SearchOptionValue> = {},
 ): SearchResult[] {
   const results = sectionIndex.search(query, {
     ...options,
     enrich: true,
   });
 
-  if (results.length === 0) {
-    return [];
-  }
+  if (results.length === 0) return [];
 
-  return results[0].result.map((item: any) => ({
+  const searchResults = results[0].result as unknown as { id: string; doc: { title: string; pageTitle: string } }[];
+
+  return searchResults.map((item) => ({
     url: item.id,
     title: item.doc.title,
     pageTitle: item.doc.pageTitle,

app/lib/sections.ts

@@ -41,7 +41,8 @@ function isH3Node(node: Node): node is H3Node {
 
 function getNodeText(node: Node) {
   let text = "";
-  for (let child of node.children ?? []) {
+
+  for (const child of node.children ?? []) {
     if (child.type === "text") {
       text += child.attributes.content;
     }

app/markdoc/Tag.ts

@@ -1,21 +1,17 @@
-// Workaround about undefined import only in production build
-
 import type { RenderableTreeNode } from "@markdoc/markdoc";
+import type { ReactNode } from "react";
 
-export class Tag<N extends string = string, A extends Record<string, any> = Record<string, any>> {
-  readonly $$mdtype = "Tag" as const;
+import { Tag as MarkdocTag } from "@markdoc/markdoc";
 
-  static isTag = (tag: any): tag is Tag => {
-    return !!(tag?.$$mdtype === "Tag");
-  };
+type TagAttributesValue = string | number | boolean | null | undefined | object | unknown;
 
-  name: N;
-  attributes: A;
-  children: RenderableTreeNode[];
-
-  constructor(name = "div" as N, attributes = {} as A, children: RenderableTreeNode[] = []) {
-    this.name = name;
-    this.attributes = attributes;
-    this.children = children;
+export class Tag extends MarkdocTag {
+  constructor(
+    name: string | ReactNode,
+    attributes: Record<string, TagAttributesValue>,
+    children: RenderableTreeNode[],
+  ) {
+    // Workaround for TypeScript's type system
+    super(name as unknown as string, attributes, children);
   }
 }

app/markdoc/nodes.tsx

@@ -1,15 +1,14 @@
 import type { Config, Node } from "@markdoc/markdoc";
 
 import { slugifyWithCounter } from "@sindresorhus/slugify";
+import { nodes as defaultNodes } from "@markdoc/markdoc";
 import { DocsLayout } from "@syntax/DocsLayout";
-import Markdoc from "@markdoc/markdoc";
-import { Fence } from "@syntax/Fence";
-import yaml from "js-yaml";
 import { Link } from "@/components/common/Link";
+import { Fence } from "@syntax/Fence";
+import { Tag } from "./Tag";
+import yaml from "js-yaml";
 
-const { nodes: defaultNodes, Tag } = Markdoc;
-
-let documentSlugifyMap = new Map();
+const documentSlugifyMap = new Map();
 
 const nodes = {
   document: {
@@ -19,7 +18,7 @@ const nodes = {
       documentSlugifyMap.set(config, slugifyWithCounter());
 
       return new Tag(
-        this.render,
+        this.render as unknown as string,
         {
           frontmatter: yaml.load(node.attributes.frontmatter),
           estimatedReadingTime: config?.variables?.estimatedReadingTime,

app/markdoc/tags.tsx

@@ -1,16 +1,9 @@
 import { QuickLink, QuickLinks } from "@syntax/QuickLinks";
 import { TabContent, Tabs } from "@/components/md/Tabs";
-// import { Fence2 } from "@/components/syntax/Fence2";
-import { Callout } from "@syntax/Callout";
-// import fs from "fs/promises";
-// import { Tag } from "./Tag";
-import React from "react";
 import { Snippet } from "@/components/syntax/Snippet";
 import { Iframe } from "@/components/common/Iframe";
-import { Mermaid } from "@/components/common/Mermaid";
-// import path from "path";
-
-// const __dirname = path.resolve();
+import { Callout } from "@syntax/Callout";
+import React from "react";
 
 const tags = {
   callout: {
@@ -43,10 +36,10 @@ const tags = {
       alt: { type: String },
       caption: { type: String },
     },
-    render: ({ src, alt = "", caption }: { src: string; alt: string; caption: string }) => (
+    render: (props: { src: string; alt: string; caption: string }) => (
       <figure>
-        <img src={src} alt={alt} loading="lazy" />
-        <figcaption>{caption}</figcaption>
+        <img src={props.src} alt={props.alt} loading="lazy" />
+        <figcaption>{props.caption}</figcaption>
       </figure>
     ),
   },
@@ -91,15 +84,9 @@ const tags = {
       },
     },
   },
-  mermaid: {
-    render: Mermaid,
-    attributes: {
-      path: { type: String },
-    },
-  },
   img: {
-    render: ({ src, alt = "", className = "" }: { src: string; alt: string; className: string }) => (
-      <img src={src} alt={alt} className={className} loading="lazy" />
+    render: (props: { src: string; alt: string; className: string }) => (
+      <img src={props.src} alt={props.alt} className={props.className} loading="lazy" />
     ),
     attributes: {
       src: { type: String },

app/pages/+Head.tsx

@@ -1,4 +1,5 @@
 import logoUrl from "@/assets/logo.svg";
+import React from "react";
 
 export default function HeadDefault() {
   return (

app/pages/_error/+Page.tsx

@@ -1,8 +1,10 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { Link } from "@/components/common/Link";
+import React from "react";
 
 export default function Page() {
   const { is404 } = usePageContext();
+
   if (is404) {
     return (
       <>
@@ -16,7 +18,7 @@ export default function Page() {
               Désolé, nous ne pouvons pas trouver la page que vous recherchez.
             </p>
             <Link href="/" className="mt-8 text-sm font-medium text-slate-900 dark:text-white">
-              Retour à l'accueil
+              Retour à l&apos;accueil
             </Link>
           </div>
         </div>

app/pages/index/+data.ts

@@ -9,7 +9,7 @@ import { render } from "vike/abort";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
-export async function data(pageContext: PageContext) {
+export async function data(_pageContext: PageContext) {
   const config = useConfig();
 
   const doc = await docsService.getDoc("docs", "index");

app/providers/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 type ThemeProviderProps = {
   children: React.ReactNode;

app/services/SnippetsService.ts

@@ -1,5 +1,3 @@
-import path from "path";
-
 type SnippetsCache = Map<string, string>;
 
 class SnippetsService {