Merge pull request #10 from classmodel/biome

Replace eslint/prettier with biome

.github/workflows/quality.yml

@@ -0,0 +1,45 @@
+name: Code quality
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+          cache-dependency-path: ./pnpm-lock.yaml
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Biome
+        run: pnpm exec biome ci --reporter github .
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+          cache-dependency-path: ./pnpm-lock.yaml
+      - name: Install dependencies
+        run: pnpm install
+      - name: Typecheck
+        run: pnpm typecheck

.gitignore

@@ -9,3 +9,5 @@ dist-ssr
 .cache
 server/dist
 public/dist
+apps/class-solid/.vinxi
+apps/class-solid/.output

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit"
+  }
 }

README.md

@@ -1,5 +1,8 @@
 # CLASS-web
 
+[![github repo badge](https://img.shields.io/badge/github-repo-000.svg?logo=github&labelColor=gray&color=blue)]([https://github.com//classmodel/class-web](https://github.com//classmodel/class-web))
+[![Code quality](https://github.com/classmodel/class-web/actions/workflows/quality.yml/badge.svg)](https://github.com/classmodel/class-web/actions/workflows/quality.yml)
+
 This is an implementation of  the **C**hemistry **L**and-surface **A**tmosphere **S**oil **S**lab (CLASS) model that runs entirely in the browser.
 
 The CLASS web application is available at https://classmodel.github.io/class-web.
@@ -22,8 +25,6 @@ Currently the repo is home to the following:
 
 - packages/
   - class: reimplementation of CLASS in typescript
-  - config-eslint: shared configuration for eslint
-  - config-typescript: shared configuration for typescript
 - apps/
   - class-solid: web application with a graphical user interface for CLASS
 
@@ -38,6 +39,22 @@ pnpm install
 pnpm dev
 ```
 
+## Linter & formatter
+
+We use [biome](https://biomejs.dev/) to lint and format the code. 
+The following commands are available
+
+```shell
+# To run linter and formatter use
+pnpm format-and-lint
+# To fix formatting and some lint errors run
+pnpm format-and-lint:fix
+# To run other biome comands use
+pnpm exec biome --help
+```
+
+To check types, you can run the `pnpm typecheck` command as other commands ignore types.
+
 ## Tech stack
 
 The CLASS package is written in typescript. It uses [zod](https://zod.dev/) for
@@ -64,9 +81,10 @@ To expose the model in a standard way we use the [Basic Model Interface (BMI)](h
 To prevent the user interface from getting blocked by running the model we use a [Web worker](https://developer.mozilla.org/en-US/docs/Web/API/Worker) to run the computation in a background task/thread.
 A Web worker uses messages passing to communicate, this does not fit with the Basic Model Interface so we use [comlink](https://github.com/GoogleChromeLabs/comlink) to wrap the Web Worker in a BMI class.
 
+To format and lint the code, we use [biome](https://biomejs.dev/) as it combines eslint, prettier in one package.
+
 **Further plans/ideas**
 
-- Use [biome](https://biomejs.dev/) for linting/formatting
 - Use [modular forms](https://modularforms.dev/) for form state management/validation
 - Use [auto](https://intuit.github.io/auto/index) for managing versions/releases
 - Use [d3.js](https://d3js.org/) for more low-level charting

apps/class-solid/package.json

@@ -6,11 +6,12 @@
   "scripts": {
     "dev": "vinxi dev",
     "build": "vinxi build",
+    "typecheck": "tsc --noEmit",
     "start": "serve --no-clipboard .output/public"
   },
   "dependencies": {
-    "@kobalte/core": "^0.13.3",
     "@classmodel/class": "workspace:*",
+    "@kobalte/core": "^0.13.3",
     "@solid-primitives/refs": "^1.0.8",
     "@solidjs/router": "^0.14.1",
     "@solidjs/start": "^1.0.4",
@@ -30,6 +31,7 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "typescript": "^5.3.3",
     "serve": "^14.2.3"
   }
 }

apps/class-solid/postcss.config.cjs

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

apps/class-solid/src/components/Analysis.tsx

@@ -1,15 +1,15 @@
-import { createUniqueId, For, Match, Switch } from "solid-js";
-import { setAnalyses, analyses, experiments } from "~/lib/store";
-import { MdiDownload, MdiCog, MdiContentCopy, MdiDelete } from "./icons";
+import { For, Match, Switch, createUniqueId } from "solid-js";
+import { analyses, experiments, setAnalyses } from "~/lib/store";
+import type { Experiment } from "./Experiment";
+import { MdiCog, MdiContentCopy, MdiDelete, MdiDownload } from "./icons";
+import { Button } from "./ui/button";
 import {
   Card,
-  CardHeader,
-  CardTitle,
   CardContent,
   CardFooter,
+  CardHeader,
+  CardTitle,
 } from "./ui/card";
-import { Button } from "./ui/button";
-import { Experiment } from "./Experiment";
 import { LineChart } from "./ui/charts";
 
 export interface Analysis {
@@ -44,13 +44,14 @@ function deleteAnalysis(analysis: Analysis) {
  */
 export function TimeSeriesPlot() {
   const chartData = {
-    labels: experiments[0].output?.t,
+    labels:
+      experiments[0].output === undefined ? undefined : experiments[0].output.t,
     datasets: experiments
       .filter((e) => e.output)
       .map((e) => {
         return {
           label: e.id,
-          data: e.output!.h,
+          data: e.output === undefined ? [null] : e.output.h,
           fill: false,
         };
       }),
@@ -64,10 +65,7 @@ function FinalHeights() {
   return (
     <For each={experiments}>
       {(experiment, i) => {
-        const h =
-          (experiment.output &&
-            experiment.output.h[experiment.output.h.length - 1]) ||
-          0;
+        const h = experiment.output?.h[experiment.output.h.length - 1] || 0;
         return (
           <div class="mb-2">
             <p>

apps/class-solid/src/components/Experiment.tsx

@@ -1,28 +1,27 @@
+import { type ClassConfig, classConfig } from "@classmodel/class/config";
+import { type ClassOutput, runClass } from "@classmodel/class/runner";
+import { createSignal, createUniqueId } from "solid-js";
 import { Button } from "~/components/ui/button";
-import { MdiDownload, MdiCog, MdiContentCopy, MdiDelete } from "./icons";
+import { experiments, setExperiments } from "~/lib/store";
+import { ExperimentConfigForm } from "./ExperimentConfigForm";
+import { MdiCog, MdiContentCopy, MdiDelete, MdiDownload } from "./icons";
 import {
   Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
   CardContent,
+  CardDescription,
   CardFooter,
+  CardHeader,
+  CardTitle,
 } from "./ui/card";
-import { ClassConfig, classConfig } from "@classmodel/class/config";
-import { type ClassOutput } from "@classmodel/class/runner";
-import { createUniqueId, createSignal } from "solid-js";
-import { ExperimentConfigForm } from "./ExperimentConfigForm";
 import {
   Dialog,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogTitle,
   DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 } from "./ui/dialog";
-import { experiments, setExperiments } from "~/lib/store";
-import { runClass } from "~/lib/runner";
 
 export interface Experiment {
   name: string;
@@ -102,9 +101,7 @@ export function ExperimentCard(experiment: Experiment) {
         <CardTitle>{experiment.name}</CardTitle>
         <CardDescription>{experiment.id}</CardDescription>
       </CardHeader>
-      <CardContent>
-        {experiment.description}
-      </CardContent>
+      <CardContent>{experiment.description}</CardContent>
       <CardFooter>
         {/* TODO: implement download functionality */}
         <Button variant="outline">

apps/class-solid/src/components/ExperimentConfigForm.tsx

@@ -1,22 +1,25 @@
+import {
+  type ClassConfig,
+  classConfig,
+  classDefaultConfigSchema,
+} from "@classmodel/class/config";
+import { For, Match, Switch } from "solid-js";
 import {
   TextField,
   TextFieldInput,
   TextFieldLabel,
 } from "~/components/ui/text-field";
-import { For, Switch, Match } from "solid-js";
-import {
-  classConfig,
-  ClassConfig,
-  classDefaultConfigSchema,
-} from "@classmodel/class/config";
 
-const ClassConfigJsonSchema = classDefaultConfigSchema.definitions!.classConfig;
+const ClassConfigJsonSchema = classDefaultConfigSchema.definitions?.classConfig;
 
 /**
  * Nest form rawData to shape of classConfig
  * "initialState.h_0" => { initialState: { h_0: ... } }
  */
+
+// biome-ignore lint/suspicious/noExplicitAny: json schema types are too complex
 function inflate(rawData: { [key: string]: any }) {
+  // biome-ignore lint/suspicious/noExplicitAny: json schema types are too complex
   const config: { [key: string]: any } = {};
 
   for (const key in rawData) {
@@ -67,6 +70,7 @@ export function ExperimentConfigForm({
   );
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: json schema types are too complex
 function ObjectField({ schema, name = "" }: { schema: any; name?: string }) {
   // name can be empty, but only for root, which should be treated differently
   const isRoot = name === "";
@@ -100,6 +104,7 @@ function ObjectField({ schema, name = "" }: { schema: any; name?: string }) {
   );
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: json schema types are too complex
 function PropField({ name, schema }: { name: string; schema: any }) {
   return (
     <Switch fallback={<p>Unknown type</p>}>
@@ -116,6 +121,7 @@ function PropField({ name, schema }: { name: string; schema: any }) {
   );
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: json schema types are too complex
 function MyTextField({ name, schema }: { name: string; schema: any }) {
   return (
     <TextField class="grid w-full max-w-sm items-center gap-1.5">

apps/class-solid/src/components/Nav.tsx

@@ -3,7 +3,9 @@ import { useLocation } from "@solidjs/router";
 export default function Nav() {
   const location = useLocation();
   const active = (path: string) =>
-    path == location.pathname ? "border-sky-600" : "border-transparent hover:border-sky-600";
+    path === location.pathname
+      ? "border-sky-600"
+      : "border-transparent hover:border-sky-600";
   return (
     <nav class="bg-sky-800">
       <ul class="container flex items-center p-3 text-gray-200">

apps/class-solid/src/components/icons.tsx

@@ -1,7 +1,8 @@
-import { JSX } from "solid-js";
+import type { JSX } from "solid-js";
 
 export function MdiDownload(props: JSX.IntrinsicElements["svg"]) {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: generated code
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"
@@ -16,6 +17,7 @@ export function MdiDownload(props: JSX.IntrinsicElements["svg"]) {
 
 export function MdiCog(props: JSX.IntrinsicElements["svg"]) {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: generated code
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"
@@ -33,6 +35,7 @@ export function MdiCog(props: JSX.IntrinsicElements["svg"]) {
 
 export function MdiContentCopy(props: JSX.IntrinsicElements["svg"]) {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: generated code
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"
@@ -50,6 +53,7 @@ export function MdiContentCopy(props: JSX.IntrinsicElements["svg"]) {
 
 export function MdiDelete(props: JSX.IntrinsicElements["svg"]) {
   return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: generated code
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="1em"