Swap from React to Preact

This reduces the size of the JS bundles.

Author: lukewarlow

site/astro.config.js

@@ -1,15 +1,15 @@
 import { defineConfig } from 'astro/config'
-import react from '@astrojs/react'
 import sitemap from '@astrojs/sitemap'
 import mdx from '@astrojs/mdx'
 import compress from 'astro-compress'
 import { rehypeHeadingIds } from '@astrojs/markdown-remark'
 import { autolinkHeadingsPlugin } from './src/plugins/rehypeHeadings'
 import rehypeResponsiveTables from './src/plugins/rehypeResponsiveTable'
 
+import preact from '@astrojs/preact';
+
 export default defineConfig({
   integrations: [
-    react(),
     sitemap({
       filter: (page) =>
         !page.endsWith("/component-spec-template/"),
@@ -18,6 +18,7 @@ export default defineConfig({
       rehypePlugins: [rehypeHeadingIds, autolinkHeadingsPlugin, rehypeResponsiveTables],
     }),
     compress(),
+    preact(),
   ],
   site: 'https://open-ui.org',
   prefetch: {
@@ -34,4 +35,4 @@ export default defineConfig({
       external: ['svgo'],
     },
   },
-})
+})

site/package.json

@@ -33,28 +33,22 @@
   },
   "devDependencies": {
     "@astrojs/mdx": "^4.0.8",
-    "@astrojs/react": "4.2.0",
     "@astrojs/sitemap": "3.2.1",
     "astro": "5.2.5",
     "astro-compress": "^2.3.6",
     "eslint": "^8.18.0",
-    "eslint-plugin-react": "^7.30.0",
     "hast-util-to-string": "^2.0.0",
     "hastscript": "^7.2.0",
     "husky": "^4.2.3",
     "lint-staged": "^11.1.2",
     "prettier": "^2.0.4",
     "prettier-plugin-astro": "^0.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "rehype-autolink-headings": "^6.1.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@nanostores/react": "^0.4.0",
-    "nanostores": "^0.7.1"
+    "@astrojs/preact": "^4.0.4",
+    "@preact/signals": "^2.0.1",
+    "invokers-polyfill": "^0.4.7",
+    "preact": "^10.25.4"
   }
 }

site/src/components/anatomy-components.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './anatomy-component.css'
 
 export const AnatomyWrapper = ({ children }) => (

site/src/components/anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './anatomy.css'
 
 import { anatomiesByComponent } from '../sources'

site/src/components/breadcrumb-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Slot, Part } from './anatomy-components'
 import './breadcrumb-anatomy.css'
 

site/src/components/checkbox-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
 
 const CheckboxAnatomy = () => {

site/src/components/combobox-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
 
 const ComboboxAnatomy = () => {

site/src/components/community-links.jsx

@@ -1,26 +1,48 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDiscord, faGithub, faXTwitter } from '@fortawesome/free-brands-svg-icons'
 import './community-links.css'
 
-const iconStyle = {
-  width: '24px',
-  height: '24px',
-}
-
 export default function CommunityLinks({ className = '' }) {
   return (
     <div className={'community-links ' + className}>
       <a href="https://github.com/openui/open-ui" title="GitHub" rel="noreferrer noopener">
-        <FontAwesomeIcon style={iconStyle} icon={faGithub} />
+        <svg
+          aria-hidden="true"
+          style="width: 24px; height: 24px"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+        >
+          <path
+            fill="currentColor"
+            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+          />
+        </svg>
       </a>
 
       <a href="https://discord.gg/DEWjhSw" title="Discord" rel="noreferrer noopener">
-        <FontAwesomeIcon style={iconStyle} icon={faDiscord} />
+        <svg
+          aria-hidden="true"
+          style="width: 24px; height: 24px"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"
+        >
+          <path
+            fill="currentColor"
+            d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
+          />
+        </svg>
       </a>
 
       <a href="https://x.com/openuicg" title="X" rel="noreferrer noopener">
-        <FontAwesomeIcon style={iconStyle} icon={faXTwitter} />
+        <svg
+          aria-hidden="true"
+          style="width: 24px; height: 24px"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            fill="currentColor"
+            d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+          />
+        </svg>
       </a>
     </div>
   )

site/src/components/component-coverage.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { componentsByName, get, uniqBy, groupBy } from '../sources'
 import './component-coverage.css'
 

site/src/components/component-name-matrix.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'preact/hooks'
 import { componentOriginalNames, sources, sourcesCount } from '../sources'
 import './component-name-matrix.css'
 

site/src/components/concept-coverage.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { sourceNames, getSourcesWithComponentConcept } from '../sources'
 import './concept-coverage.css'
 

site/src/components/concept.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect, useState } from 'preact/hooks'
 import ConceptCoverage from './concept-coverage'
 import Specimens from './specimens'
 import './concept.css'
@@ -11,7 +11,7 @@ export default function Concept({
   showDescriptions,
   initExpand,
 }) {
-  const [open, toggleOpen] = React.useState(initExpand)
+  const [open, toggleOpen] = useState(initExpand)
 
   useEffect(() => {
     toggleOpen(initExpand)

site/src/components/concepts.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import { useState } from 'preact/hooks'
 import { openUIConceptsByComponent } from '../sources'
 import './concepts.css'
 
 import Concept from './concept'
 
 const Concepts = ({ component }) => {
-  const [showDescriptions, setShowDescriptions] = React.useState(false)
-  const [collapseAll, toggleCollapseAll] = React.useState(true)
+  const [showDescriptions, setShowDescriptions] = useState(false)
+  const [collapseAll, toggleCollapseAll] = useState(true)
 
   const conceptsForComponent = Object.entries(openUIConceptsByComponent[component] || []).sort(
     ([_a, conceptsA], [_b, conceptsB]) => conceptsA.length - conceptsB.length,

site/src/components/design-systems-list.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { sources } from '../sources'
 import './design-systems-list.css'
 

site/src/components/file-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
 
 const FileAnatomy = () => {

site/src/components/image.jsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export function Image({ alt = src, src, style }) {
   return <img alt={alt} srcSet={src + ' 2x'} style={style} />
 }

site/src/components/missing-images.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './missing-images.css'
 
 export function MissingImages(props) {

site/src/components/navigation/navigation-container.jsx

@@ -1,12 +1,31 @@
-import { useStore } from '@nanostores/react'
-import React from 'react'
-import { isMenuOpen } from '../../state/menuState'
+import { useSignal } from '@preact/signals'
+import { useEffect, useRef } from 'preact/hooks'
 
 function NavigationContainer(props) {
-  const $isMenuOpen = useStore(isMenuOpen)
+  const isMenuOpen = useSignal(false)
+  const navRef = useRef(null)
+
+  useEffect(() => {
+    function handleCommand(e) {
+      if (e.command === '--toggle-menu') {
+        isMenuOpen.value = !isMenuOpen.value
+        e.source.setAttribute('aria-expanded', isMenuOpen.value)
+      }
+    }
+
+    if (navRef.current) {
+      navRef.current.addEventListener('command', handleCommand)
+    }
+
+    return () => {
+      if (navRef.current) {
+        navRef.current.removeEventListener('command', handleCommand)
+      }
+    }
+  })
 
   return (
-    <nav id="site-nav" className={$isMenuOpen ? 'opened' : ''}>
+    <nav ref={navRef} id="site-nav" className={isMenuOpen.value ? 'opened' : ''}>
       {props.children}
     </nav>
   )

site/src/components/select-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
 
 const SelectAnatomy = () => {

site/src/components/specimens.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { getImagesForComponentConcept } from '../sources'
 import Image from './image.jsx'
 import { MissingImages } from './missing-images'

site/src/components/table-anatomy.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './table-anatomy.css'
 
 const TableAnatomy = () => {

site/src/components/toggle-menu-button.jsx

@@ -1,24 +1,29 @@
-import { useStore } from '@nanostores/react'
-import { isMenuOpen } from '../state/menuState'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
 import './toggle-menu-button.css'
+import 'invokers-polyfill'
 
 function ToggleMenuButton() {
-  const $isMenuOpen = useStore(isMenuOpen)
-  const onToggleMenu = () => isMenuOpen.set(!$isMenuOpen)
-
   return (
     <button
       type="button"
       className="header-menu-btn"
       aria-label="Toggle menu"
       title="Toggle menu"
-      onClick={onToggleMenu}
-      aria-expanded={$isMenuOpen ? 'true' : 'false'}
+      aria-expanded="false"
+      command="--toggle-menu"
+      commandfor="site-nav"
       aria-controls="site-nav"
     >
-      <FontAwesomeIcon icon={faBars} size="lg" />
+      <svg
+        aria-hidden="true"
+        style="height: 1em; font-size: 1.25em"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+      >
+        <path
+          fill="currentColor"
+          d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"
+        />
+      </svg>
     </button>
   )
 }

site/src/pages/components/popup.research.explainer.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect } from 'preact/hooks'
 
 /**
  *

site/src/pages/components/select.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect } from 'preact/hooks'
 
 function Page() {
   useEffect(() => {

site/src/pages/components/selectlist.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect } from 'preact/hooks'
 
 function Page() {
   useEffect(() => {

site/src/pages/components/selectmenu.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect } from 'preact/hooks'
 
 function Page() {
   useEffect(() => {

site/src/state/menuState.js

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}