four-stroke 0.1.4 → 0.2.0

package/oxlint.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from "oxlint";
 
 export default defineConfig({
-  plugins: ["eslint", "typescript", "unicorn", "oxc", "import", "promise", "vitest"],
+  plugins: ["eslint", "typescript", "unicorn", "oxc", "import", "promise", "vitest", "react"],
   options: {
     typeAware: true,
   },
@@ -64,6 +64,15 @@ export default defineConfig({
     "unicorn/number-literal-case": "off",
     "eslint/one-var": "off",
     "vitest/prefer-called-once": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-max-depth": "off",
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
   },
   overrides: [
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "four-stroke",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Simple Cloudflare Worker SSR SPA framework",
   "license": "MIT",
   "repository": {
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@cloudflare/vitest-pool-workers": "^0.22.0",
     "knip": "^6.32.2",
-    "oxfmt": "^0.64.0",
+    "oxfmt": "^0.66.0",
     "oxlint": "^1.79.0",
     "oxlint-tsgolint": "^7.0.2001",
     "typescript": "^7.0.2",

package/src/components/viewer-menu.tsx

@@ -5,35 +5,35 @@ interface ViewerMenuProps {
   viewer: Viewer;
 }
 
-export default function ViewerMenu({ logoutUrl, viewer }: ViewerMenuProps): React.ReactNode {
-  return (
-    <details className="group relative">
-      <summary className="flex cursor-pointer list-none items-center gap-3 rounded-md px-2 py-1.5 hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-emerald-900 focus:ring-offset-2 [&::-webkit-details-marker]:hidden">
-        {viewer.picture ? (
-          <img
-            alt=""
-            className="size-9 rounded-full object-cover"
-            referrerPolicy="no-referrer"
-            src={viewer.picture}
-          />
-        ) : (
-          <span
-            aria-hidden="true"
-            className="grid size-9 place-items-center rounded-full bg-emerald-950 text-sm font-semibold text-white"
-          >
-            {viewer.name.slice(0, 1).toUpperCase()}
-          </span>
-        )}
-        <span className="max-w-48 truncate text-sm font-medium">{viewer.name}</span>
-      </summary>
-      <nav className="absolute right-0 mt-2 w-40 rounded-md border border-stone-200 bg-white py-1 shadow-lg">
-        <a
-          className="block px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-stone-100 focus:bg-stone-100 focus:outline-none"
-          href={logoutUrl}
+const ViewerMenu = ({ logoutUrl, viewer }: ViewerMenuProps): React.ReactNode => (
+  <details className="group relative">
+    <summary className="flex cursor-pointer list-none items-center gap-3 rounded-md px-2 py-1.5 hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-emerald-900 focus:ring-offset-2 [&::-webkit-details-marker]:hidden">
+      {viewer.picture ? (
+        <img
+          alt=""
+          className="size-9 rounded-full object-cover"
+          referrerPolicy="no-referrer"
+          src={viewer.picture}
+        />
+      ) : (
+        <span
+          aria-hidden="true"
+          className="grid size-9 place-items-center rounded-full bg-emerald-950 text-sm font-semibold text-white"
         >
-          Logout
-        </a>
-      </nav>
-    </details>
-  );
-}
+          {viewer.name.slice(0, 1).toUpperCase()}
+        </span>
+      )}
+      <span className="max-w-48 truncate text-sm font-medium">{viewer.name}</span>
+    </summary>
+    <nav className="absolute right-0 mt-2 w-40 rounded-md border border-stone-200 bg-white py-1 shadow-lg">
+      <a
+        className="block px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-stone-100 focus:bg-stone-100 focus:outline-none"
+        href={logoutUrl}
+      >
+        Logout
+      </a>
+    </nav>
+  </details>
+);
+
+export default ViewerMenu;