Webview: improve linting & typechecks

pkgs/webview-ui/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "tailwindCSS.experimental.classRegex": [["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]],
+    "editor.wordWrap": "on"
+}

pkgs/webview-ui/app/eslint.config.mjs

@@ -0,0 +1,26 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import tailwind from "eslint-plugin-tailwindcss";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  ...tailwind.configs["flat/recommended"],
+  {
+    rules: {
+      "tailwindcss/no-contradicting-classname": [
+        "error",
+        {
+          callees: ["cx"],
+        },
+      ],
+      "tailwindcss/no-custom-classname": [
+        "error",
+        {
+          callees: ["cx"],
+        },
+      ],
+    },
+  }
+);

pkgs/webview-ui/app/package.json

@@ -8,22 +8,29 @@
     "build": "npm run check && vite build && npm run convert-html",
     "convert-html": "node gtk.webview.js",
     "serve": "vite preview",
-    "check": "tsc --noEmit --skipLibCheck"
+    "check": "tsc --noEmit --skipLibCheck && eslint ./src"
   },
   "license": "MIT",
   "devDependencies": {
+    "@eslint/js": "^9.3.0",
+    "@types/node": "^20.12.12",
+    "@typescript-eslint/parser": "^7.10.0",
     "autoprefixer": "^10.4.19",
+    "classnames": "^2.5.1",
     "daisyui": "^4.11.1",
+    "eslint": "^8.57.0",
+    "json-schema-to-ts": "^3.1.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
     "solid-devtools": "^0.29.2",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.10.0",
     "vite": "^5.0.11",
-    "vite-plugin-solid": "^2.8.2"
+    "vite-plugin-solid": "^2.8.2",
+    "eslint-plugin-tailwindcss": "^3.17.0"
   },
   "dependencies": {
-    "@types/node": "^20.12.12",
-    "json-schema-to-ts": "^3.1.0",
     "solid-js": "^1.8.11"
   }
 }

pkgs/webview-ui/app/src/App.tsx

@@ -1,34 +1,60 @@
 import { Match, Switch, createSignal, type Component } from "solid-js";
 import { CountProvider } from "./Config";
+// import { Nested } from "./nested";
+import { Layout } from "./layout/layout";
+import cx from "classnames";
 import { Nested } from "./nested";
 
-type Route = "home" | "graph";
+type Route = "home" | "machines";
 
 const App: Component = () => {
   const [route, setRoute] = createSignal<Route>("home");
   return (
     <CountProvider>
-      <div class="w-full flex items-center flex-col gap-2 my-2">
-        <div>Clan</div>
-        <p>Current route: {route()}</p>
-
-        <div class="flex items-center">
-          <button
-            onClick={() => setRoute((o) => (o === "graph" ? "home" : "graph"))}
-            class="btn btn-link"
-          >
-            Navigate to {route() === "home" ? "graph" : "home"}
-          </button>
+      <Layout>
+        <div class="col-span-1">
+          <div class={cx("text-zinc-500")}>Navigation</div>
+          <ul>
+            <li>
+              <button
+                onClick={() => setRoute("home")}
+                classList={{ "bg-blue-500": route() === "home" }}
+              >
+                Home
+              </button>
+            </li>
+            <li>
+              {" "}
+              <button
+                onClick={() => setRoute("machines")}
+                classList={{ "bg-blue-500": route() === "machines" }}
+              >
+                Machines
+              </button>
+            </li>
+          </ul>
         </div>
-        <Switch fallback={<p>{route()} not found</p>}>
-          <Match when={route() == "home"}>
-            <Nested />
-          </Match>
-          <Match when={route() == "graph"}>
-            <p></p>
-          </Match>
-        </Switch>
-      </div>
+
+        <div class="col-span-7">
+          <div>{route()}</div>
+          <Switch fallback={<p>{route()} not found</p>}>
+            <Match when={route() == "home"}>
+              <Nested />
+            </Match>
+            <Match when={route() == "machines"}>
+              <div class="grid grid-cols-3 gap-2">
+                <div class="h-10 w-20 bg-red-500">red</div>
+                <div class="h-10 w-20 bg-green-500">green</div>
+                <div class="h-10 w-20 bg-blue-500">blue</div>
+                <div class="h-10 w-20 bg-yellow-500">yellow</div>
+                <div class="h-10 w-20 bg-purple-500">purple</div>
+                <div class="h-10 w-20 bg-cyan-500">cyan</div>
+                <div class="h-10 w-20 bg-pink-500">pink</div>
+              </div>
+            </Match>
+          </Switch>
+        </div>
+      </Layout>
     </CountProvider>
   );
 };

pkgs/webview-ui/app/src/Config.tsx

@@ -39,9 +39,12 @@ type CountContextType = ReturnType<typeof makeCountContext>;
 export const CountContext = createContext<CountContextType>([
   {
     loading: () => false,
+
+    // eslint-disable-next-line
     machines: () => ({}),
   },
   {
+    // eslint-disable-next-line
     getMachines: () => {},
   },
 ]);

pkgs/webview-ui/app/src/index.tsx

@@ -6,7 +6,6 @@ import App from "./App";
 
 const root = document.getElementById("app");
 
-// @ts-ignore: add the clan scope to the window object so we can register callbacks for gtk
 window.clan = window.clan || {};
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
@@ -15,4 +14,5 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 render(() => <App />, root!);

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -0,0 +1,9 @@
+import { Component, JSXElement } from "solid-js";
+
+interface LayoutProps {
+  children: JSXElement;
+}
+
+export const Layout: Component<LayoutProps> = (props) => {
+  return <div class="grid grid-cols-8">{props.children}</div>;
+};

pkgs/webview-ui/app/src/message.ts

@@ -74,7 +74,7 @@ const deserialize =
 const pyApi: PyApi = {} as PyApi;
 operationNames.forEach((opName) => {
   const name = opName as OperationNames;
-  // @ts-ignore: TODO make typescript happy
+  // @ts-expect-error - TODO: Fix this. Typescript is not recognizing the receive function correctly
   pyApi[name] = createFunctions(name);
 });
 

pkgs/webview-ui/default.nix

@@ -1,32 +0,0 @@
-{
-  dream2nix,
-  config,
-  src,
-  ...
-}:
-{
-  imports = [ dream2nix.modules.dream2nix.WIP-nodejs-builder-v3 ];
-
-  mkDerivation = {
-    inherit src;
-  };
-
-  deps =
-    { nixpkgs, ... }:
-    {
-      inherit (nixpkgs) stdenv;
-    };
-
-  WIP-nodejs-builder-v3 = {
-    packageLockFile = "${config.mkDerivation.src}/package-lock.json";
-    # config.groups.all.packages.${config.name}.${config.version}.
-  };
-  public.out = {
-    checkPhase = ''
-      echo "Running tests"
-      echo "Tests passed"
-    '';
-  };
-  name = "@clan/webview-ui";
-  version = "0.0.1";
-}

pkgs/webview-ui/flake-module.nix

@@ -9,10 +9,9 @@
 
         src = ./app;
 
-        # npmDepsHash = "sha256-bRD2vzijhdOOvcEi6XaG/neSqhkVQMqIX/8bxvRQkTc=";
         npmDeps = pkgs.fetchNpmDeps {
           src = ./app;
-          hash = "sha256-bRD2vzijhdOOvcEi6XaG/neSqhkVQMqIX/8bxvRQkTc=";
+          hash = "sha256-E0++hupVKnDqmLk7ljoMcqcI4w+DIMlfRYRPbKUsT2c=";
         };
         # The prepack script runs the build script, which we'd rather do in the build phase.
         npmPackFlags = [ "--ignore-scripts" ];