Add Prettier config + run on all files + add to pre-commit hook

.eslintrc.cjs

@@ -6,88 +6,91 @@
 
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
+    root: true,
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    env: {
+        browser: true,
+        commonjs: true,
+        es6: true,
     },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
 
-  globals: {
-    // tracker global on window
-    'counterscale': true
-  },
+    globals: {
+        // tracker global on window
+        counterscale: true,
+    },
 
-  // Base config
-  extends: ["eslint:recommended"],
+    // Base config
+    extends: ["eslint:recommended"],
 
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
+    overrides: [
+        // React
+        {
+            files: ["**/*.{js,jsx,ts,tsx}"],
+            plugins: ["react", "jsx-a11y"],
+            extends: [
+                "plugin:react/recommended",
+                "plugin:react/jsx-runtime",
+                "plugin:react-hooks/recommended",
+                "plugin:jsx-a11y/recommended",
+            ],
+            settings: {
+                react: {
+                    version: "detect",
+                },
+                formComponents: ["Form"],
+                linkComponents: [
+                    { name: "Link", linkAttribute: "to" },
+                    { name: "NavLink", linkAttribute: "to" },
+                ],
+            },
         },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-      },
-    },
 
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      rules: {
-        // we're cool with explicit any (for now)
-        "@typescript-eslint/no-explicit-any": 0,
+        // Typescript
+        {
+            files: ["**/*.{ts,tsx}"],
+            plugins: ["@typescript-eslint", "import"],
+            parser: "@typescript-eslint/parser",
+            settings: {
+                "import/internal-regex": "^~/",
+                "import/resolver": {
+                    node: {
+                        extensions: [".ts", ".tsx"],
+                    },
+                    typescript: {
+                        alwaysTryTypes: true,
+                    },
+                },
+            },
+            rules: {
+                // we're cool with explicit any (for now)
+                "@typescript-eslint/no-explicit-any": 0,
 
-        // https://stackoverflow.com/questions/68802881/get-rid-of-is-defined-but-never-used-in-function-parameter
-        "no-unused-vars": 0,
-        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
+                // https://stackoverflow.com/questions/68802881/get-rid-of-is-defined-but-never-used-in-function-parameter
+                "no-unused-vars": 0,
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    { argsIgnorePattern: "^_" },
+                ],
+            },
+            extends: [
+                "plugin:@typescript-eslint/recommended",
+                "plugin:import/recommended",
+                "plugin:import/typescript",
+            ],
+        },
 
-    // Node
-    {
-      files: [".eslintrc.js"],
-      env: {
-        node: true,
-      },
-    },
-  ],
+        // Node
+        {
+            files: [".eslintrc.js"],
+            env: {
+                node: true,
+            },
+        },
+    ],
 };

.github/workflows/ci.yaml

@@ -1,22 +1,22 @@
 name: ci
 on:
     push:
-        branches: [ main ]
+        branches: [main]
     pull_request:
-        branches: [ main ]
+        branches: [main]
 jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with: 
-          node-version-file: 'package.json'
-      - run: npm install
-      - run: npm run lint
-      - run: npm run build
-      - run: npm run test-ci
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
-        env:
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version-file: "package.json"
+            - run: npm install
+            - run: npm run lint
+            - run: npm run build
+            - run: npm run test-ci
+            - name: Upload coverage reports to Codecov
+              uses: codecov/codecov-action@v3
+              env:
+                  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.husky/pre-commit

@@ -1,5 +1,17 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+# Prettify all files that are about to be committed
+FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
+[ -z "$FILES" ] && exit 0
+
+# Prettify all selected files
+echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
 npm test
 npm run lint
+
+exit 0

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+public/build
+package-lock.json

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

.vscode/settings.json

@@ -1,5 +1,5 @@
 // Place your settings in this file to overwrite the default settings
 {
     "editor.insertSpaces": true,
-    "editor.tabSize": 4,
-}
+    "editor.tabSize": 4
+}

README.md

@@ -21,7 +21,7 @@ If you don't have one already, [create a Cloudflare account here](https://dash.c
 1. Run `npx wrangler secret put CF_BEARER_TOKEN` → when prompted, paste the API token you created
 1. Run `npx wrangler secret put CF_ACCOUNT_ID` → when prompted, paste your Cloudflare Account ID
 1. Run `npm run deploy` – this will do two things:
-    1. Create a new worker, `counterscale`, now visible under *Workers and Pages* in Cloudflare
+    1. Create a new worker, `counterscale`, now visible under _Workers and Pages_ in Cloudflare
     1. Create a new Analytics Engine dataset, called `metricsDataset`
 1. It should now be live. Visit `https://counterscale.{yoursubdomain}.workers.dev`.
 
@@ -31,7 +31,6 @@ If the website is not immediately available (e.g. "Secure Connection Failed"), i
 
 ### Custom Domains
 
-
 The deployment URL can always be changed to go behind a custom domain you own. [More here](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/).
 
 ## Installing the Tracker
@@ -46,16 +45,17 @@ To start tracking website traffic on your web property, copy/paste the following
 
 ```html
 <script>
-(function () {
-    window.counterscale = {
-        q: [
-            ["set", "siteId", "your-unique-site-id"],
-            ["trackPageview"],
-        ],
-    };
-})();
+    (function () {
+        window.counterscale = {
+            q: [["set", "siteId", "your-unique-site-id"], ["trackPageview"]],
+        };
+    })();
 </script>
-<script id="counterscale-script" src="https://counterscale.{yoursubdomain}.workers.dev/tracker.js" defer></script>
+<script
+    id="counterscale-script"
+    src="https://counterscale.{yoursubdomain}.workers.dev/tracker.js"
+    defer
+></script>
 ```
 
 Be sure to replace `your-unique-site-id` with a unique string/slug representing your web property. Use a unique site ID for each property you place the tracking script on.
@@ -72,8 +72,8 @@ Open `.dev.vars` and enter the same values for `CF_BEARER_TOKEN` and `CF_ACCOUNT
 
 Counterscale is built on Remix and Cloudflare Workers. In development, you'll run two servers:
 
-- The Remix development server
-- The Miniflare server (local environment for Cloudflare Workers)
+-   The Remix development server
+-   The Miniflare server (local environment for Cloudflare Workers)
 
 You run both using:
 
@@ -100,6 +100,5 @@ There is only one "database": the Cloudflare Analytics Engine dataset, which is
 
 Right now there is no local "test" database. This means in local development:
 
-* Writes will no-op (no hits will be recorded)
-* Reads will be read from the production Analaytics Engine dataset (local development shows production data)
-
+-   Writes will no-op (no hits will be recorded)
+-   Reads will be read from the production Analaytics Engine dataset (local development shows production data)