forked from clan/clan-core
Merge pull request 'Webview: improve linting & typechecks' (#1445) from hsjobeki-main into main
This commit is contained in:
commit
76622557c4
5
pkgs/webview-ui/.vscode/settings.json
vendored
Normal file
5
pkgs/webview-ui/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"typescript.tsdk": "node_modules/typescript/lib",
|
||||||
|
"tailwindCSS.experimental.classRegex": [["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]],
|
||||||
|
"editor.wordWrap": "on"
|
||||||
|
}
|
26
pkgs/webview-ui/app/eslint.config.mjs
Normal file
26
pkgs/webview-ui/app/eslint.config.mjs
Normal file
@ -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"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
1686
pkgs/webview-ui/app/package-lock.json
generated
1686
pkgs/webview-ui/app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,22 +8,29 @@
|
|||||||
"build": "npm run check && vite build && npm run convert-html",
|
"build": "npm run check && vite build && npm run convert-html",
|
||||||
"convert-html": "node gtk.webview.js",
|
"convert-html": "node gtk.webview.js",
|
||||||
"serve": "vite preview",
|
"serve": "vite preview",
|
||||||
"check": "tsc --noEmit --skipLibCheck"
|
"check": "tsc --noEmit --skipLibCheck && eslint ./src"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.3.0",
|
||||||
|
"@types/node": "^20.12.12",
|
||||||
|
"@typescript-eslint/parser": "^7.10.0",
|
||||||
"autoprefixer": "^10.4.19",
|
"autoprefixer": "^10.4.19",
|
||||||
|
"classnames": "^2.5.1",
|
||||||
"daisyui": "^4.11.1",
|
"daisyui": "^4.11.1",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"json-schema-to-ts": "^3.1.0",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
|
"prettier": "^3.2.5",
|
||||||
"solid-devtools": "^0.29.2",
|
"solid-devtools": "^0.29.2",
|
||||||
"tailwindcss": "^3.4.3",
|
"tailwindcss": "^3.4.3",
|
||||||
"typescript": "^5.3.3",
|
"typescript": "^5.4.5",
|
||||||
|
"typescript-eslint": "^7.10.0",
|
||||||
"vite": "^5.0.11",
|
"vite": "^5.0.11",
|
||||||
"vite-plugin-solid": "^2.8.2"
|
"vite-plugin-solid": "^2.8.2",
|
||||||
|
"eslint-plugin-tailwindcss": "^3.17.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/node": "^20.12.12",
|
|
||||||
"json-schema-to-ts": "^3.1.0",
|
|
||||||
"solid-js": "^1.8.11"
|
"solid-js": "^1.8.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,34 +1,60 @@
|
|||||||
import { Match, Switch, createSignal, type Component } from "solid-js";
|
import { Match, Switch, createSignal, type Component } from "solid-js";
|
||||||
import { CountProvider } from "./Config";
|
import { CountProvider } from "./Config";
|
||||||
|
// import { Nested } from "./nested";
|
||||||
|
import { Layout } from "./layout/layout";
|
||||||
|
import cx from "classnames";
|
||||||
import { Nested } from "./nested";
|
import { Nested } from "./nested";
|
||||||
|
|
||||||
type Route = "home" | "graph";
|
type Route = "home" | "machines";
|
||||||
|
|
||||||
const App: Component = () => {
|
const App: Component = () => {
|
||||||
const [route, setRoute] = createSignal<Route>("home");
|
const [route, setRoute] = createSignal<Route>("home");
|
||||||
return (
|
return (
|
||||||
<CountProvider>
|
<CountProvider>
|
||||||
<div class="w-full flex items-center flex-col gap-2 my-2">
|
<Layout>
|
||||||
<div>Clan</div>
|
<div class="col-span-1">
|
||||||
<p>Current route: {route()}</p>
|
<div class={cx("text-zinc-500")}>Navigation</div>
|
||||||
|
<ul>
|
||||||
<div class="flex items-center">
|
<li>
|
||||||
<button
|
<button
|
||||||
onClick={() => setRoute((o) => (o === "graph" ? "home" : "graph"))}
|
onClick={() => setRoute("home")}
|
||||||
class="btn btn-link"
|
classList={{ "bg-blue-500": route() === "home" }}
|
||||||
>
|
>
|
||||||
Navigate to {route() === "home" ? "graph" : "home"}
|
Home
|
||||||
</button>
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
{" "}
|
||||||
|
<button
|
||||||
|
onClick={() => setRoute("machines")}
|
||||||
|
classList={{ "bg-blue-500": route() === "machines" }}
|
||||||
|
>
|
||||||
|
Machines
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<Switch fallback={<p>{route()} not found</p>}>
|
|
||||||
<Match when={route() == "home"}>
|
<div class="col-span-7">
|
||||||
<Nested />
|
<div>{route()}</div>
|
||||||
</Match>
|
<Switch fallback={<p>{route()} not found</p>}>
|
||||||
<Match when={route() == "graph"}>
|
<Match when={route() == "home"}>
|
||||||
<p></p>
|
<Nested />
|
||||||
</Match>
|
</Match>
|
||||||
</Switch>
|
<Match when={route() == "machines"}>
|
||||||
</div>
|
<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>
|
</CountProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -39,9 +39,12 @@ type CountContextType = ReturnType<typeof makeCountContext>;
|
|||||||
export const CountContext = createContext<CountContextType>([
|
export const CountContext = createContext<CountContextType>([
|
||||||
{
|
{
|
||||||
loading: () => false,
|
loading: () => false,
|
||||||
|
|
||||||
|
// eslint-disable-next-line
|
||||||
machines: () => ({}),
|
machines: () => ({}),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
// eslint-disable-next-line
|
||||||
getMachines: () => {},
|
getMachines: () => {},
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
@ -6,7 +6,6 @@ import App from "./App";
|
|||||||
|
|
||||||
const root = document.getElementById("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 || {};
|
window.clan = window.clan || {};
|
||||||
|
|
||||||
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
|
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!);
|
render(() => <App />, root!);
|
||||||
|
9
pkgs/webview-ui/app/src/layout/layout.tsx
Normal file
9
pkgs/webview-ui/app/src/layout/layout.tsx
Normal file
@ -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>;
|
||||||
|
};
|
@ -74,7 +74,7 @@ const deserialize =
|
|||||||
const pyApi: PyApi = {} as PyApi;
|
const pyApi: PyApi = {} as PyApi;
|
||||||
operationNames.forEach((opName) => {
|
operationNames.forEach((opName) => {
|
||||||
const name = opName as OperationNames;
|
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);
|
pyApi[name] = createFunctions(name);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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";
|
|
||||||
}
|
|
@ -9,10 +9,9 @@
|
|||||||
|
|
||||||
src = ./app;
|
src = ./app;
|
||||||
|
|
||||||
# npmDepsHash = "sha256-bRD2vzijhdOOvcEi6XaG/neSqhkVQMqIX/8bxvRQkTc=";
|
|
||||||
npmDeps = pkgs.fetchNpmDeps {
|
npmDeps = pkgs.fetchNpmDeps {
|
||||||
src = ./app;
|
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.
|
# The prepack script runs the build script, which we'd rather do in the build phase.
|
||||||
npmPackFlags = [ "--ignore-scripts" ];
|
npmPackFlags = [ "--ignore-scripts" ];
|
||||||
|
Loading…
Reference in New Issue
Block a user