Add Prettier config + run on pre-commit hook (#34)

.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)