yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

init webview: add webview ui and list machine as api example

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-05-14 18:55:44 +02:00
committed by hsjobeki
parent 3dc070db92
commit 3b3426d219
20 changed files with 3658 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/clan-vm-manager/web/app/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
dist

34
pkgs/clan-vm-manager/web/app/README.md Normal file
View File

@@ -0,0 +1,34 @@
## Usage
Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
```bash
$ npm install # or pnpm install or yarn install
```
### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
## Available Scripts
In the project directory, you can run:
### `npm run dev` or `npm start`
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
### `npm run build`
Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
## Deployment
You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

14
pkgs/clan-vm-manager/web/app/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Solid App</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div id="app"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

3320
pkgs/clan-vm-manager/web/app/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
pkgs/clan-vm-manager/web/app/package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "vite-template-solid",
"version": "0.0.0",
"description": "",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"license": "MIT",
"devDependencies": {
"solid-devtools": "^0.29.2",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"vite-plugin-solid": "^2.8.2",
"autoprefixer": "^10.4.19",
"daisyui": "^4.11.1",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3"
},
"dependencies": {
"solid-js": "^1.8.11"
}
}

6
pkgs/clan-vm-manager/web/app/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

38
pkgs/clan-vm-manager/web/app/src/App.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { Match, Switch, createSignal, type Component } from "solid-js";
import { CountProvider } from "./Config";
import { Nested } from "./nested";
type Route = "home" | "graph";
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>
<div class="flex items-center">
<button
onClick={() => setRoute((o) => (o === "graph" ? "home" : "graph"))}
class="btn btn-link"
>
Navigate to {route() === "home" ? "graph" : "home"}
</button>
<Switch fallback={<p>{route()} not found</p>}>
<Match when={route() == "home"}>
<p>Current route: {route()}</p>
</Match>
<Match when={route() == "graph"}>
<p>Current route: {route()}</p>
</Match>
</Switch>
</div>
<div class="flex items-center">
<Nested />
</div>
</div>
</CountProvider>
);
};
export default App;

58
pkgs/clan-vm-manager/web/app/src/Config.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { createSignal, createContext, useContext, JSXElement } from "solid-js";
const initialValue = 0 as const;
export const makeCountContext = () => {
const [count, setCount] = createSignal(0);
const [machines, setMachines] = createSignal<string[]>([]);
const [loading, setLoading] = createSignal(false);
// Add this callback to global window so we can test it from gtk
// @ts-ignore
window.clan.setMachines = (data: str) => {
try {
setMachines(JSON.parse(data));
} catch (e) {
alert(`Error parsing JSON: ${e}`);
} finally {
setLoading(false);
}
};
return [
{ count, loading, machines },
{
setCount,
setLoading,
setMachines,
getMachines: () => {
// When the gtk function sends its data the loading state will be set to false
setLoading(true);
// Example of how to dispatch a gtk function
// @ts-ignore
window.webkit.messageHandlers.gtk.postMessage(1);
},
},
] as const;
// `as const` forces tuple type inference
};
type CountContextType = ReturnType<typeof makeCountContext>;
export const CountContext = createContext<CountContextType>([
{ count: () => initialValue, loading: () => false, machines: () => [] },
{
setCount: () => {},
setLoading: () => {},
setMachines: () => {},
getMachines: () => {},
},
]);
export const useCountContext = () => useContext(CountContext);
export function CountProvider(props: { children: JSXElement }) {
return (
<CountContext.Provider value={makeCountContext()}>
{props.children}
</CountContext.Provider>
);
}

3
pkgs/clan-vm-manager/web/app/src/index.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

18
pkgs/clan-vm-manager/web/app/src/index.tsx Normal file
View File

@@ -0,0 +1,18 @@
/* @refresh reload */
import { render } from "solid-js/web";
import "./index.css";
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)) {
throw new Error(
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
);
}
render(() => <App />, root!);

29
pkgs/clan-vm-manager/web/app/src/nested.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { For, Match, Switch, type Component } from "solid-js";
import { useCountContext } from "./Config";
export const Nested: Component = () => {
const [{ machines, loading }, { getMachines }] = useCountContext();
return (
<div>
<button onClick={() => getMachines()} class="btn btn-primary">
Get machines
</button>
<hr />
<Switch>
<Match when={loading()}>Loading...</Match>
<Match when={!loading() && machines().length === 0}>
No machines found
</Match>
<Match when={!loading() && machines().length}>
<For each={machines()}>
{(machine, i) => (
<li>
{i() + 1}: {machine}
</li>
)}
</For>
</Match>
</Switch>
</div>
);
};

9
pkgs/clan-vm-manager/web/app/tailwind.config.js Normal file
View File

@@ -0,0 +1,9 @@
const daisyui = require("daisyui");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [daisyui],
};

15
pkgs/clan-vm-manager/web/app/tsconfig.json Normal file
View File

@@ -0,0 +1,15 @@
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client"],
"noEmit": true,
"isolatedModules": true,
},
}

22
pkgs/clan-vm-manager/web/app/vite.config.ts Normal file
View File

@@ -0,0 +1,22 @@
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
// import devtools from "solid-devtools/vite";
export default defineConfig({
plugins: [
/*
Uncomment the following line to enable solid-devtools.
For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
*/
// devtools(),
solidPlugin(),
],
server: {
port: 3000,
},
build: {
target: "safari11",
// assetsDi
manifest: true,
},
});