Switch to preact

tweedegolf · May 28, 2024 · da2a380 · da2a380
1 parent 599542f
commit da2a380
Show file tree

Hide file tree

Showing 17 changed files with 582 additions and 380 deletions.
diff --git a/index.html b/index.html
@@ -1,12 +1,18 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ervaringskompas</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/svg+xml" href="./src/icon.svg">
+  <meta name="description"
+    content="Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk (in een huisartsgeneekundige setting)?">
+  <title>Ervaringskompas</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
 </html>
diff --git a/package.json b/package.json
@@ -10,15 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "preact": "^10.22.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@preact/preset-vite": "^2.8.2",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,12 +3,13 @@ import Table from './Table';
 import usePersistence, { upload } from './usePersistence';
 import { copyLink, downloadFile, saveStateLocal } from './util';
 
-export default function App(): JSX.Element {
+export default function App() {
   const { state, select, mark, note, setState } = usePersistence();
 
   return (
     <>
       <h1>Ervaringskompas</h1>
+
       <p>
         Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk
         (in een huisartsgeneekundige setting)?
@@ -42,7 +43,7 @@ export default function App(): JSX.Element {
           <input
             type="file"
             id="upload"
-            onChange={(e) => upload(e.target, setState)}
+            onChange={(e) => upload(e.target as HTMLInputElement, setState)}
           />
         </label>
       </p>

diff --git a/src/CompetenceResult.tsx b/src/CompetenceResult.tsx
@@ -1,10 +1,6 @@
 import { MAX_LEVEL, State } from './usePersistence';
 
-export default function CompetenceResult({
-  state,
-}: {
-  state: State;
-}): JSX.Element {
+export default function CompetenceResult({ state }: { state: State }) {
   const results = state.competences.map((competence, index) => {
     const [score, max] = state.themes.reduce(
       (acc, theme) => {

diff --git a/src/ExperienceRow.tsx b/src/ExperienceRow.tsx
@@ -20,7 +20,7 @@ export default function ExperienceRow({
   selected,
   onMark,
   onSelect,
-}: ExperienceRowProps): JSX.Element {
+}: ExperienceRowProps) {
   return (
     <tr className={`selectable ${marked ? 'marked' : ''}`}>
       <th
@@ -68,7 +68,7 @@ export default function ExperienceRow({
             id={`check-${themeIndex}-${index}`}
             name={`check-${themeIndex}-${index}`}
             checked={marked}
-            onChange={(e) => onMark(e.target.checked)}
+            onChange={(e) => onMark((e.target as HTMLInputElement).checked)}
           />
         </label>
       </td>

diff --git a/src/Marked.tsx b/src/Marked.tsx
@@ -5,7 +5,7 @@ interface MarkedProps {
   mark: Mark;
 }
 
-export default function Marked({ state, mark }: MarkedProps): JSX.Element {
+export default function Marked({ state, mark }: MarkedProps) {
   const items = state.themes
     .map((theme, themeIndex) =>
       theme.experiences.map((experience, index) => {

diff --git a/src/Results.tsx b/src/Results.tsx
@@ -9,11 +9,7 @@ interface ResultProps {
   note: (content: string) => void;
 }
 
-export default function Results({
-  state,
-  mark,
-  note,
-}: ResultProps): JSX.Element {
+export default function Results({ state, mark, note }: ResultProps) {
   return (
     <>
       <h2>Ervaring</h2>
@@ -37,7 +33,7 @@ export default function Results({
       <h2>Notities</h2>
       <textarea
         value={state.notes}
-        onChange={(event) => note(event.target.value)}
+        onChange={(event) => note((event.target as HTMLTextAreaElement).value)}
       />
     </>
   );

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -7,11 +7,7 @@ interface TableProps {
   select: Select;
 }
 
-export default function Table({
-  state,
-  select,
-  mark,
-}: TableProps): JSX.Element {
+export default function Table({ state, select, mark }: TableProps) {
   return (
     <table className="form">
       <thead>

diff --git a/src/ThemeResult.tsx b/src/ThemeResult.tsx
@@ -1,6 +1,6 @@
 import { MAX_LEVEL, State } from './usePersistence';
 
-export default function ThemeResult({ state }: { state: State }): JSX.Element {
+export default function ThemeResult({ state }: { state: State }) {
   let totalScore = 0;
   let totalMax = 0;
 

diff --git a/src/ThemeSection.tsx b/src/ThemeSection.tsx
@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { Mark, Select, Theme } from './usePersistence';
 import ExperienceRow from './ExperienceRow';
 
@@ -16,9 +15,9 @@ export default function ThemeSection({
   levels,
   select,
   mark,
-}: ThemeProps): JSX.Element {
+}: ThemeProps) {
   return (
-    <Fragment>
+    <>
       <tr>
         <th
           style={{
@@ -47,6 +46,6 @@ export default function ThemeSection({
           onSelect={(level: number) => select(themeIndex, index, level)}
         />
       ))}
-    </Fragment>
+    </>
   );
 }
diff --git a/src/data.json b/src/data.json
@@ -280,7 +280,7 @@
     },
     {
       "name": "Palliatieve en terminale zorg",
-      "color": "#f36421",
+      "color": "#f89c1c",
       "experiences": [
         {
           "name": "Voert een gesprek over het naderend levenseinde.",

diff --git a/src/icon.svg b/src/icon.svg
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,12 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { render } from 'preact';
 import App from './App.tsx';
 import './index.css';
 
-const element = document.getElementById('root')!;
-
-ReactDOM.createRoot(element).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+render(<App />, document.getElementById('root')!);
diff --git a/src/usePersistence.ts b/src/usePersistence.ts
@@ -1,4 +1,4 @@
-import { Reducer, useReducer } from 'react';
+import { useReducer } from 'preact/hooks';
 import rawData from './data.json';
 import { decode } from './util';
 
@@ -121,10 +121,7 @@ function initialState(): State {
 }
 
 export default function usePersistence(): PersistenceState {
-  const [state, dispatch] = useReducer<Reducer<State, Action>>(
-    reducer,
-    initialState()
-  );
+  const [state, dispatch] = useReducer<State, Action>(reducer, initialState());
 
   return {
     state,

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "jsxImportSource": "preact",
 
     /* Linting */
     "strict": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [preact()],
+});