four-stroke 0.0.2

package/.github/actions/install/action.yml

@@ -0,0 +1,12 @@
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: "24"
+
+    - run: corepack enable
+      shell: bash
+
+    - run: pnpm install
+      shell: bash

package/.github/dependabot.yml

@@ -0,0 +1,14 @@
+# Autogenerated by https://github.com/change-engine/ecu/github
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+      time: "05:08"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+      time: "05:08"

package/.github/workflows/ci.yml

@@ -0,0 +1,20 @@
+name: CI
+
+on: [push]
+
+permissions:
+  contents: read
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: ./.github/actions/install
+
+      - run: pnpm eslint

package/.github/workflows/dependabot.yml

@@ -0,0 +1,32 @@
+# Autogenerated by https://github.com/change-engine/ecu/github
+
+name: Dependabot auto-approve
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-slim
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v3.1.0
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Approve a PR
+        if: ${{steps.metadata.outputs.update-type != 'version-update:semver-major'}}
+        run: gh pr review --approve "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+permissions:
+  id-token: write
+  contents: read
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: ./.github/actions/install
+
+      - run: pnpm publish --no-git-checks

package/README.md

@@ -0,0 +1,9 @@
+# four-stroke
+
+Simple Cloudflare Worker SSR SPA framework
+
+## Installation
+
+```bash
+npm install four-stroke
+```

package/bin/api-types.mjs

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import openapiTS from "openapi-typescript";
+import prettier from "prettier";
+import ts from "typescript";
+
+const services = process.argv[2].split(",");
+
+const UUID = ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("UUID"));
+const NULL = ts.factory.createLiteralTypeNode(ts.factory.createNull());
+
+await Promise.all(
+  services.map(async (service) => {
+    const output = await openapiTS(`${service}/doc`, {
+      transform(schemaObject) {
+        if ("format" in schemaObject && schemaObject.format === "uuid") {
+          return schemaObject.nullable ? ts.factory.createUnionTypeNode([UUID, NULL]) : UUID;
+        }
+      },
+    });
+    const printer = ts.createPrinter({});
+    const resultFile = ts.createSourceFile(
+      `src/__definitions__/${service.replace("https://", "")}-definitions.ts`,
+      "",
+      ts.ScriptTarget.Latest,
+    );
+    const result = printer.printNode(ts.EmitHint.Unspecified, output[0], resultFile);
+    fs.writeFileSync(
+      `src/__definitions__/${service.replace("https://", "")}-definitions.ts`,
+      await prettier.format(
+        `// Autogenerated by four-stroke
+
+${fs.readFileSync("src/__definitions__/type-definitions.ts", "utf-8")}
+
+${result}`,
+        { parser: "typescript", printWidth: 100 },
+      ),
+    );
+  }),
+);

package/bin/deploy.mjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+"use strict";
+import fs from "fs";
+import { cmd } from "../src/cmd.mjs";
+import { basename } from "path";
+
+const env = process.argv[2];
+const release = process.argv[3];
+
+fs.writeFileSync("src/release.ts", `export default "${release}";`);
+
+cmd(`wrangler secret bulk /dev/stdin --env ${env}`);
+
+cmd(
+  `sentry-cli releases --org change-engine --project ${basename(process.cwd())} new ${release} --finalize`,
+);
+
+cmd(
+  `sentry-cli releases --org change-engine --project ${basename(process.cwd())} set-commits ${release} --ignore-missing`,
+);
+
+cmd(`vite build`);
+cmd(`wrangler deploy --env ${env} --outdir dist`);
+
+cmd(
+  `sentry-cli sourcemaps --org change-engine --project ${basename(process.cwd())} upload --release="${release}" dist`,
+);

package/bin/dev.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+"use strict";
+import { cmd } from "../src/cmd.mjs";
+
+cmd("vite dev");

package/bin/format.mjs

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+"use strict";
+import { cmd } from "../src/cmd.mjs";
+
+cmd("eslint --cache --fix");
+cmd("prettier --cache --write .");

package/bin/lint.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+"use strict";
+import fs from "fs";
+import { cmd } from "../src/cmd.mjs";
+
+cmd("react-router typegen");
+if (fs.existsSync("wrangler.jsonc")) {
+  cmd("wrangler types --strict-vars false --check");
+}
+cmd("eslint --cache --max-warnings=0");
+cmd("prettier --cache --check .");

package/bin/test.mjs

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+"use strict";
+import { cmd } from "../src/cmd.mjs";
+
+cmd("vitest", [
+  ...(!process.argv.slice(2).includes("-w") && !process.argv.slice(2).includes("--watch")
+    ? ["--run"]
+    : []),
+  ...process.argv.slice(2),
+]);

package/bin/type-check.mjs

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+"use strict";
+import fs from "fs";
+import { cmd } from "../src/cmd.mjs";
+
+if (fs.existsSync("wrangler.jsonc")) {
+  const devVarsFiles = fs.globSync("**/.dev.vars");
+  const backed = [];
+
+  for (const file of devVarsFiles) {
+    const tmp = file + ".bak.bak";
+    fs.renameSync(file, tmp);
+    backed.push({ original: file, tmp });
+  }
+
+  try {
+    cmd("wrangler types --strict-vars false");
+  } finally {
+    for (const { original, tmp } of backed) {
+      fs.renameSync(tmp, original);
+    }
+  }
+}
+cmd("vite build");
+cmd("tsc --noEmit");

package/eslint.config.js

@@ -0,0 +1,3 @@
+import config from "eslint-config-two-stroke";
+
+export default config;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "bin": {
+    "api-types": "./bin/api-types.mjs",
+    "deploy": "./bin/deploy.mjs",
+    "dev": "./bin/dev.mjs",
+    "format": "./bin/format.mjs",
+    "lint": "./bin/lint.mjs",
+    "test": "./bin/test.mjs",
+    "type-check": "./bin/type-check.mjs"
+  },
+  "dependencies": {
+    "@cloudflare/vitest-pool-workers": "^0.16.13",
+    "@sentry/cli": "^3.5.0",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
+    "@vitest/runner": "^4.1.8",
+    "@vitest/snapshot": "^4.1.8",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-config-two-stroke": "^1.5.4",
+    "eslint-config-typescript": "^3.0.0",
+    "openapi-typescript": "^7.13.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "peerDependencies": {
+    "@sentry/cli": ">=2",
+    "eslint": ">=10",
+    "prettier": ">=3",
+    "typescript": ">=5",
+    "vitest": ">=4",
+    "wrangler": ">=3"
+  },
+  "description": "Simple Cloudflare Worker SSR SPA framework",
+  "engines": {
+    "node": "^24.9.0"
+  },
+  "license": "MIT",
+  "main": "src/index.ts",
+  "name": "four-stroke",
+  "prettier": {
+    "printWidth": 100
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/change-engine/four-stroke"
+  },
+  "type": "module",
+  "version": "0.0.2",
+  "devDependencies": {
+    "@types/eslint": "^9.6.1",
+    "eslint": "^10.4.1",
+    "prettier": "^3.8.3",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.8"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+minimumReleaseAge: 4320
+minimumReleaseAgeExclude:
+  - "jwk-subtle"
+  - "pbkdf-subtle"
+  - "eslint-config-two-stroke"
+trustPolicy: no-downgrade
+ignoreScripts: true
+blockExoticSubdeps: true

package/src/cmd.mjs

@@ -0,0 +1,14 @@
+import { spawnSync } from "child_process";
+
+export function cmd(program, args = []) {
+  const { error, status } = spawnSync(
+    program.split(" ")[0],
+    [...program.split(" ").slice(1), ...args],
+    {
+      stdio: "inherit",
+    },
+  );
+  // eslint-disable-next-line n/no-process-exit
+  if (status) process.exit(status);
+  if (error) throw error;
+}

package/src/components/viewer-menu.tsx

@@ -0,0 +1,39 @@
+import type { Viewer } from "../util/auth";
+
+type ViewerMenuProps = {
+  logoutUrl: string;
+  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}
+        >
+          Logout
+        </a>
+      </nav>
+    </details>
+  );
+}

package/src/fake.ts

@@ -0,0 +1 @@
+export default { fetch: () => {} };

package/src/util/auth.ts

@@ -0,0 +1,55 @@
+export type Viewer = {
+  name: string;
+  picture: string | null;
+};
+
+export const getCookieValue = (request: Request, name: string): string | null => {
+  const cookieHeader = request.headers.get("Cookie");
+
+  if (!cookieHeader) {
+    return null;
+  }
+
+  const prefix = `${name}=`;
+  const cookie = cookieHeader.split(";").find((part) => part.trim().startsWith(prefix));
+
+  return cookie ? decodeURIComponent(cookie.trim().slice(prefix.length)) : null;
+};
+
+const decodeBase64Url = (value: string): string => {
+  const base64 = value.replaceAll("-", "+").replaceAll("_", "/");
+  const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+  const bytes = Uint8Array.from(atob(padded), (character) => character.charCodeAt(0));
+
+  return new TextDecoder().decode(bytes);
+};
+
+export const parseViewerFromAccessToken = (accessToken: string): Viewer | null => {
+  const [, payload] = accessToken.split(".");
+
+  if (!payload) {
+    return null;
+  }
+
+  try {
+    const claims = JSON.parse(decodeBase64Url(payload)) as {
+      email?: unknown;
+      name?: unknown;
+      picture?: unknown;
+    };
+    const name =
+      typeof claims.name === "string" && claims.name.trim().length > 0
+        ? claims.name
+        : typeof claims.email === "string" && claims.email.trim().length > 0
+          ? claims.email
+          : "Signed in";
+    const picture =
+      typeof claims.picture === "string" && claims.picture.trim().length > 0
+        ? claims.picture
+        : null;
+
+    return { name, picture };
+  } catch {
+    return null;
+  }
+};

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "erasableSyntaxOnly": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "types": [
+      "./worker-configuration.d.ts",
+      "vitest/globals",
+      "@cloudflare/vitest-pool-workers/types"
+    ],
+    "verbatimModuleSyntax": true,
+    "jsx": "react-jsx"
+  },
+  "exclude": ["../../dist"]
+}