feat: switch to preact

astro.config.mjs

@@ -1,22 +1,27 @@
 import { defineConfig } from "astro/config";
-import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
+import preact from "@astrojs/preact";
 
 // https://astro.build/config
 export default defineConfig({
   markdown: {
     remarkPlugins: [
       "remark-gfm",
       "remark-smartypants",
-      ["remark-mermaid", { simple: true }],
+      [
+        "remark-mermaid",
+        {
+          simple: true,
+        },
+      ],
     ],
   },
   integrations: [
-    react(),
     tailwind({
       config: {
         applyBaseStyles: false,
       },
     }),
+    preact(),
   ],
 });

package.json

@@ -16,11 +16,13 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@astrojs/preact": "^1.0.1",
     "@astrojs/react": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
+    "@preact/preset-vite": "^2.3.0",
     "@tailwindcss/typography": "^0.5.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/preact": "^3.2.2",
     "@testing-library/user-event": "^14.2.1",
     "@types/node": "^17.0.18",
     "@types/react": "^18.0.15",
@@ -34,11 +36,10 @@
     "gh-pages": "^2.2.0",
     "jsdom": "^20.0.0",
     "postcss": "^8.4.5",
+    "preact": "^10.6.5",
     "prettier": "^2.7.1",
     "prettier-plugin-astro": "^0.2.0",
-    "react": "^18.2.0",
     "react-chartjs-2": "^3.3.0",
-    "react-dom": "^18.2.0",
     "remark-mermaid": "^0.2.0",
     "tailwind-merge": "^1.2.1",
     "tailwindcss": "^3.0.8",

src/components/app/AppLayout.test.tsx

@@ -1,4 +1,4 @@
-import { screen, render, within } from "@testing-library/react";
+import { screen, render, within } from "@testing-library/preact";
 import { test } from "vitest";
 import AppLayout from "./AppLayout";
 

src/components/app/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "preact/hooks";
 import Menu from "../icons/Menu";
 import Logo from "./Logo";
 
@@ -13,7 +13,7 @@ type Props = {
 };
 
 const Header = ({ currentPathName }: Props) => {
-  const [isOpen, setisOpen] = React.useState(false);
+  const [isOpen, setisOpen] = useState(false);
   const handleSetIsOpen = () => setisOpen(!isOpen);
   const trigger = useScrollTrigger({
     disableHysteresis: true,

src/components/app/blog/BlogEntry.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import BlogEntry from "./BlogEntry";
 

src/components/app/blog/BlogSubHeader.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import BlogSubHeader from "./BlogSubHeader";
 

src/components/app/blog/Posts.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import Posts from "./Posts";
 

src/components/app/home/sections/Education.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import Education from "./Education";
 

src/components/app/home/sections/Education.tsx

@@ -1,5 +1,5 @@
 import { education as defaultEducation } from "@/constants";
-import { Fragment } from "react";
+import { Fragment } from "preact";
 
 export function Education({
   education = defaultEducation,

src/components/app/home/sections/Hero.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import Hero from "./Hero";
 

src/components/app/home/sections/Hero.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import useIntersectionObserver from "hooks/useIntersectionObserver";
-import { useRef } from "react";
+import { useRef } from "preact/hooks";
 import AppSocialMedia from "@/components/app/AppSocialMedia";
 import { twMerge } from "tailwind-merge";
 import { useTransitionEnd } from "hooks/useTransitionEnd";

src/components/app/home/sections/TechnicalSkills.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import TechnicalSkills from "./TechnicalSkills";
 

src/components/app/home/sections/ThreeSellPoints.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import ThreeSellPoints from "./ThreeSellPoints";
 

src/components/nav/NavDrawer.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { cloneElement } from "preact";
 import Drawer from "../layout/Drawer";
 import Logo from "@/components/app/Logo";
 
@@ -12,9 +12,7 @@ const NavDrawer = ({ isOpen = false, links, onLinkClicked }: Props) => {
   return (
     <Drawer isOpen={isOpen}>
       <Logo className="flex items-center pl-5 h-16 border-b-2 border-gray-700 mb-2" />
-      {links.map((link) =>
-        React.cloneElement(link, { onClick: onLinkClicked })
-      )}
+      {links.map((link) => cloneElement(link, { onClick: onLinkClicked }))}
     </Drawer>
   );
 };

src/components/nav/NavLink.test.tsx

@@ -1,5 +1,5 @@
 import { it, vi, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { NavLink } from "./NavLink";
 import userEvent from "@testing-library/user-event";
 

src/components/portfolio/PortfolioEntry.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/preact";
 import { test } from "vitest";
 import PortfolioEntry from "./PortfolioEntry";
 

src/components/portfolio/Slider.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { useState, useCallback, useEffect } from "preact/hooks";
+import { cloneElement, toChildArray } from "preact";
 import classnames from "classnames";
 
 interface Props extends React.HTMLProps<HTMLDivElement> {
@@ -12,11 +13,11 @@ export default function Slider({
   isAutoPlay: defaultIsAutoPlay = true,
   ...props
 }: Props) {
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const [isAutoPlay, setIsAutoPlay] = React.useState(defaultIsAutoPlay);
-  const images = React.Children.toArray(children);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAutoPlay, setIsAutoPlay] = useState(defaultIsAutoPlay);
+  const images = toChildArray(children);
 
-  const handleChangeImage = React.useCallback(
+  const handleChangeImage = useCallback(
     function (newIndex) {
       if (newIndex > images.length - 1) {
         newIndex = 0;
@@ -31,7 +32,7 @@ export default function Slider({
     [setCurrentIndex, images.length]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isAutoPlay) {
       return;
     }
@@ -49,8 +50,8 @@ export default function Slider({
   return (
     <div className={className} {...props}>
       <div className="container mx-auto flex items-center justify-center relative overflow-hidden h-56 lg:h-hero">
-        {React.Children.map(children, (child, i) => {
-          return React.cloneElement(child as React.ReactElement, {
+        {images.map((child, i) => {
+          return cloneElement(child, {
             className: classnames("absolute transition duration-500", {
               "opacity-100": currentIndex === i,
               "opacity-0": currentIndex !== i,

src/components/portfolio/TechnologiesUsed.tsx

@@ -1,6 +1,4 @@
-import React from "react";
 import { PortfolioTechnology } from "types/frontmatter";
-import { Pie } from "react-chartjs-2";
 
 interface Props {
   data?: PortfolioTechnology[];
@@ -36,7 +34,7 @@ const TechnologiesUsed = ({ className, ...props }: Props) => {
       <h3 className="font-semibold text-2xl md:text-4xl text-gray-700 dark:text-gray-200 mb-6">
         Technologies Used
       </h3>
-      <Pie data={data} />
+      TODO
     </div>
   );
 };

src/hooks/useIntersectionObserver.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useState } from "react";
+import { RefObject, useEffect, useState } from "preact/hooks";
 
 interface Args extends IntersectionObserverInit {
   freezeOnceVisible?: boolean;

src/hooks/useScrollTrigger.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useRef, useState, useEffect } from "preact/hooks";
 
 function defaultTrigger(store, options) {
   const { disableHysteresis = false, threshold = 100, target } = options;
@@ -36,10 +36,10 @@ export default function useScrollTrigger(
     target = defaultTarget,
     ...other
   } = options;
-  const store = React.useRef();
-  const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
+  const store = useRef();
+  const [trigger, setTrigger] = useState(() => getTrigger(store, other));
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleScroll = () => {
       setTrigger(getTrigger(store, { target, ...other }));
     };

src/hooks/useTransitionEnd.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useState } from "react";
+import { RefObject, useEffect, useState } from "preact/hooks";
 
 export function useTransitionEnd(elementRef: RefObject<Element>) {
   const [transitionEnded, setTransitionEnded] = useState(false);

tsconfig.json

@@ -15,7 +15,8 @@
     "noEmit": true,
     "incremental": true,
     "esModuleInterop": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "baseUrl": "src",
     "paths": {
       "@/components/*": ["components/*"],

vitest.config.ts

@@ -1,12 +1,12 @@
 /// <reference types="vitest" />
 
-import { defineConfig } from "vitest/config"
-import react from "@vitejs/plugin-react"
-import tsconfigPaths from "vite-tsconfig-paths"
+import { defineConfig } from "vitest/config";
+import preact from "@preact/preset-vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [preact(), tsconfigPaths()],
   test: {
     environment: "jsdom",
     globals: true,
@@ -15,4 +15,4 @@ export default defineConfig({
       reporter: ["text", "text-summary", "html"],
     },
   },
-})
+});