Setup linting and formatting with Biome

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome", "usernamehw.errorlens"]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "[javascript][typescript][json][jsonc][javascriptreact][typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "always"
+  },
+
+  // Prevent conflicts between tools.
+  "eslint.enable": false,
+  "prettier.enable": false
+}

apps/astro-demo/astro.config.mjs

@@ -1,16 +1,15 @@
 import { defineConfig } from "astro/config";
-import qwik from "@qwikdev/astro";
+
 import node from "@astrojs/node";
 import react from "@astrojs/react";
+import qwik from "@qwikdev/astro";
 
 // https://astro.build/config
 export default defineConfig({
   output: "server",
   adapter: node({
-    mode: "standalone",
+    mode: "standalone"
   }),
-  integrations: [
-    qwik({ include: "**/qwik/*" }),
-    react({ include: "**/react/*" }),
-  ],
+
+  integrations: [qwik({ include: "**/qwik/*" }), react({ include: "**/react/*" })]
 });

apps/astro-demo/src/components/qwik/counter.tsx

@@ -5,7 +5,9 @@ export const Counter = component$<{ initial: number }>((props) => {
 
   return (
     <>
-      <button onClick$={() => counter.value++}>{counter.value}</button>
+      <button type="button" onClick$={() => counter.value++}>
+        {counter.value}
+      </button>
     </>
   );
 });

apps/astro-demo/src/components/qwik/say-hi.tsx

@@ -3,6 +3,7 @@ import { component$, sync$ } from "@builder.io/qwik";
 export const SayHi = component$(() => {
   return (
     <button
+      type="button"
       onKeyDown$={sync$((e: KeyboardEvent): void => {
         if (e.key === "ArrowDown") {
           e.preventDefault();

apps/astro-demo/src/components/react/react-counter.tsx

@@ -4,5 +4,9 @@ import { useState } from "react";
 export const ReactCounter = () => {
   const [count, setCount] = useState(0);
 
-  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+  return (
+    <button type="button" onClick={() => setCount(count + 1)}>
+      {count}
+    </button>
+  );
 };

biome.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
+  "files": {
+    "ignore": [".git", "build", "dist", "node_modules"]
+  },
+
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "lineEnding": "lf",
+    "lineWidth": 90
+  },
+
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "bracketSpacing": true,
+      "enabled": true,
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "preserve",
+      "quoteStyle": "double",
+      "semicolons": "always",
+      "trailingComma": "none"
+    }
+  },
+
+  "json": {
+    "formatter": {
+      "enabled": true
+    }
+  },
+
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "a11y": {
+        "recommended": true
+      },
+      "complexity": {
+        "recommended": true,
+        "useSimplifiedLogicExpression": "warn"
+      },
+      "correctness": {
+        "noUndeclaredVariables": "error",
+        "recommended": true
+      },
+      "performance": {
+        "recommended": true
+      },
+      "recommended": true,
+      "style": {
+        "recommended": true,
+        "useBlockStatements": "error",
+        "useCollapsedElseIf": "warn",
+        "useNamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": false
+          }
+        },
+        "useShorthandArrayType": "error",
+        "useShorthandAssign": "error",
+        "useSingleCaseStatement": "error"
+      },
+      "suspicious": {
+        "noApproximativeNumericConstant": "error",
+        "noMisrefactoredShorthandAssign": "warn",
+        "recommended": true
+      }
+    }
+  },
+
+  "organizeImports": {
+    "enabled": true
+  },
+
+  "overrides": [
+    {
+      "include": [".vscode/**"],
+      "json": {
+        "parser": {
+          "allowComments": true
+        }
+      }
+    }
+  ],
+
+  "vcs": {
+    "clientKind": "git",
+    "enabled": true
+  }
+}

contributing.md

@@ -6,13 +6,15 @@ Hey, Welcome to the contributing guide for `@qwikdev/astro`! We really appreciat
 
 You can quickly get up and running with the playground by doing the following:
 
-1. clone this package:
+1. Clone this package:
    https://github.com/QwikDev/astro
    and run the command `pnpm install` or `pnpm i`
 
 2. Once the dependencies are installed, you can build by running `pnpm build` in `apps/astro-demo`
 
-That's it!
+That's it! 
+
+Note that we only use pnpm. Please don't make any PR's that introduce lock files of other package managers.
 
 **dev:**
 
@@ -186,6 +188,19 @@ We only use the symbolMapper in dev mode. This is because we already get this in
 
 A full graph of all of the symbols and their corresponding chunks. It also knows the import graph, so if a symbol is prefetched, the service worker will also prefetch all other symbols which are needed as part of the import graph.
 
+
+### Code style
+
+This project uses [Biome](https://biomejs.dev/) to lint and format all the code. The tool is able to parse many different syntaxes including `ts`, `tsx`, `json` and `astro`, and many more, but these are the ones relevant to our codebase. At the time of writing, [support](https://biomejs.dev/internals/language-support/) for `astro` code is limited but working.
+
+If you use VSCode and install the recommended extensions present under `.vscode/extensions.json` (VSCode should prompt you to install them upon opening the project), you should be able to have a pretty good DX out of the box, with automatic formatting on save and linting errors on the editor.
+
+If for whatever reason you prefer to not install them, you can manually check the code style of your code by running `pnpm run check` (if you are not on the root directory add a `-w` flag to the command). Biome will then start analyzing the entire codebase and notify you if there's any inconsistency within your code (linting or formatting errors). To manually format the code **and** apply ***[safe](https://biomejs.dev/linter/rules/)*** changes you can run `pnpm run fix`.
+
+Whenever you try to commit some change to the repo, an automatic **[git hook](https://biomejs.dev/recipes/git-hooks/)** should trigger stopping it if it has either linting or formatting errors. You will have to fix them first, otherwise you are not going to be able to commit your changes. This is possible thanks to `lefthook` and the configuration in `lefthook.yaml`. Note that the check which this tool runs applies only to the ***staged files***. It could happen that the **hook** doesn't trigger if you haven't run `lefthook install` on your local repo before commiting. Although this command is automatically executed by your package manager after running `pnpm install`, if it hasn't been executed, you would be bypassing this restriction. 
+
+Please, ensure that Biome has analyzed the code before commiting anything.
+
 ## Roadmap
 
 That's about it! Some exciting features we would like to add to Qwik + Astro are:

lefthook.yaml

@@ -0,0 +1,5 @@
+pre-commit:
+  commands:
+    check:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,d.ts,jsx,tsx,json,jsonc}"
+      run: pnpm biome check --no-errors-on-unmatched --files-ignore-unknown=true {staged_files}

libs/qwikdev-astro/env.d.ts

@@ -1 +1,28 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />
+
+declare module "fs-move" {
+  type MoveOptions = {
+    overwrite?: boolean;
+    merge?: boolean;
+    purge?: boolean;
+    filter?: (src: string, dest: string) => boolean;
+  };
+
+  type MoveCallback = (err: unknown) => unknown;
+
+  declare function move(src: string, dest: string, callback: MoveCallback): Promise<void>;
+  declare function move(
+    src: string,
+    dest: string,
+    options: MoveOptions = {}
+  ): Promise<void>;
+
+  declare function move(
+    src: string,
+    dest: string,
+    options: MoveOptions,
+    callback: MoveCallback
+  ): Promise<void>;
+
+  export default move;
+}

libs/qwikdev-astro/package.json

@@ -27,12 +27,7 @@
     ".": "./src/index.ts",
     "./package.json": "./package.json"
   },
-  "files": [
-    "src",
-    "src/index.ts",
-    "server.ts",
-    "env.d.ts"
-  ],
+  "files": ["src", "src/index.ts", "server.ts", "env.d.ts"],
   "keywords": [
     "astro-integration",
     "astro-component",