forked from clan/clan-core
init webview: add webview ui and list machine as api example
This commit is contained in:
parent
97a1d8b52a
commit
fef16a84a9
@ -106,7 +106,7 @@ class MainApplication(Adw.Application):
|
|||||||
def on_activate(self, source: "MainApplication") -> None:
|
def on_activate(self, source: "MainApplication") -> None:
|
||||||
if not self.window:
|
if not self.window:
|
||||||
self.init_style()
|
self.init_style()
|
||||||
self.window = MainWindow(config=ClanConfig(initial_view="list"))
|
self.window = MainWindow(config=ClanConfig(initial_view="webview"))
|
||||||
self.window.set_application(self)
|
self.window.set_application(self)
|
||||||
|
|
||||||
self.window.show()
|
self.window.show()
|
||||||
|
51
pkgs/clan-vm-manager/clan_vm_manager/views/webview.py
Normal file
51
pkgs/clan-vm-manager/clan_vm_manager/views/webview.py
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import sys
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Any, List
|
||||||
|
from clan_cli import machines
|
||||||
|
import time
|
||||||
|
import gi
|
||||||
|
import json
|
||||||
|
|
||||||
|
gi.require_version("WebKit", "6.0")
|
||||||
|
|
||||||
|
from gi.repository import WebKit
|
||||||
|
|
||||||
|
site_index: Path = (Path(sys.argv[0]).absolute() / Path("../..") / Path("web/app/dist/index.html") ).resolve()
|
||||||
|
|
||||||
|
|
||||||
|
class WebView():
|
||||||
|
def __init__(self) -> None:
|
||||||
|
|
||||||
|
self.webview = WebKit.WebView()
|
||||||
|
|
||||||
|
self.manager = self.webview.get_user_content_manager()
|
||||||
|
# Can be called with: window.webkit.messageHandlers.gtk.postMessage("...")
|
||||||
|
# Important: it seems postMessage must be given some payload, otherwise it won't trigger the event
|
||||||
|
self.manager.register_script_message_handler("gtk")
|
||||||
|
self.manager.connect("script-message-received", self.on_message_received)
|
||||||
|
|
||||||
|
self.webview.load_uri(f"file://{site_index}")
|
||||||
|
|
||||||
|
def on_message_received(
|
||||||
|
self, user_content_manager: WebKit.UserContentManager, message: Any
|
||||||
|
) -> None:
|
||||||
|
# payload = json.loads(message.to_json(0))
|
||||||
|
# TODO:
|
||||||
|
# Dynamically call functions in the js context
|
||||||
|
# I.e. the result function should have the same name as the target method in the gtk context
|
||||||
|
# Example:
|
||||||
|
# request -> { method: "list_machines", data: None }
|
||||||
|
# internally call list_machines and serialize the result
|
||||||
|
# result -> window.clan.list_machines(`{serialized}`)
|
||||||
|
|
||||||
|
list_of_machines = machines.list.list_machines(".")
|
||||||
|
serialized = json.dumps(list_of_machines)
|
||||||
|
# Important: use ` backticks to avoid escaping issues with conflicting quotes in js and json
|
||||||
|
self.webview.evaluate_javascript(f"""
|
||||||
|
setTimeout(() => {{
|
||||||
|
window.clan.setMachines(`{serialized}`);
|
||||||
|
}},2000);
|
||||||
|
""", -1, None, None, None)
|
||||||
|
|
||||||
|
def get_webview(self) -> WebKit.WebView:
|
||||||
|
return self.webview
|
@ -11,6 +11,7 @@ from clan_vm_manager.singletons.use_vms import ClanStore
|
|||||||
from clan_vm_manager.views.details import Details
|
from clan_vm_manager.views.details import Details
|
||||||
from clan_vm_manager.views.list import ClanList
|
from clan_vm_manager.views.list import ClanList
|
||||||
from clan_vm_manager.views.logs import Logs
|
from clan_vm_manager.views.logs import Logs
|
||||||
|
from clan_vm_manager.views.webview import WebView
|
||||||
|
|
||||||
gi.require_version("Adw", "1")
|
gi.require_version("Adw", "1")
|
||||||
|
|
||||||
@ -58,6 +59,7 @@ class MainWindow(Adw.ApplicationWindow):
|
|||||||
stack_view.add_named(ClanList(config), "list")
|
stack_view.add_named(ClanList(config), "list")
|
||||||
stack_view.add_named(Details(), "details")
|
stack_view.add_named(Details(), "details")
|
||||||
stack_view.add_named(Logs(), "logs")
|
stack_view.add_named(Logs(), "logs")
|
||||||
|
stack_view.add_named(WebView().get_webview(), "webview")
|
||||||
|
|
||||||
stack_view.set_visible_child_name(config.initial_view)
|
stack_view.set_visible_child_name(config.initial_view)
|
||||||
|
|
||||||
|
@ -12,6 +12,7 @@
|
|||||||
clan-cli,
|
clan-cli,
|
||||||
makeDesktopItem,
|
makeDesktopItem,
|
||||||
libadwaita,
|
libadwaita,
|
||||||
|
webkitgtk_6_0,
|
||||||
pytest, # Testing framework
|
pytest, # Testing framework
|
||||||
pytest-cov, # Generate coverage reports
|
pytest-cov, # Generate coverage reports
|
||||||
pytest-subprocess, # fake the real subprocess behavior to make your tests more independent.
|
pytest-subprocess, # fake the real subprocess behavior to make your tests more independent.
|
||||||
@ -35,6 +36,7 @@ let
|
|||||||
pygobject-stubs
|
pygobject-stubs
|
||||||
gtk4
|
gtk4
|
||||||
libadwaita
|
libadwaita
|
||||||
|
webkitgtk_6_0
|
||||||
gnome.adwaita-icon-theme
|
gnome.adwaita-icon-theme
|
||||||
];
|
];
|
||||||
|
|
||||||
|
7
pkgs/clan-vm-manager/notes.md
Normal file
7
pkgs/clan-vm-manager/notes.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# Webkit GTK doesn't interop flawless with Solid.js build result
|
||||||
|
|
||||||
|
1. Webkit expects script tag to be in `body` only solid.js puts the in the head.
|
||||||
|
2. script and css files are loaded with type="module" and crossorigin tags beeing set. WebKit silently fails to load then.
|
||||||
|
3. Paths to resiources are not allowed to start with "/" because webkit interprets them relative to the system and not the base url.
|
||||||
|
4. webkit doesn't support native features such as directly handling external urls (i.e opening them in the default browser)
|
||||||
|
6. Other problems to be found?
|
@ -10,6 +10,7 @@
|
|||||||
python3,
|
python3,
|
||||||
gtk4,
|
gtk4,
|
||||||
libadwaita,
|
libadwaita,
|
||||||
|
nodejs_latest
|
||||||
}:
|
}:
|
||||||
|
|
||||||
let
|
let
|
||||||
@ -28,6 +29,7 @@ mkShell {
|
|||||||
inherit (clan-vm-manager) nativeBuildInputs;
|
inherit (clan-vm-manager) nativeBuildInputs;
|
||||||
buildInputs =
|
buildInputs =
|
||||||
[
|
[
|
||||||
|
nodejs_latest
|
||||||
ruff
|
ruff
|
||||||
gtk4.dev # has the demo called 'gtk4-widget-factory'
|
gtk4.dev # has the demo called 'gtk4-widget-factory'
|
||||||
libadwaita.devdoc # has the demo called 'adwaita-1-demo'
|
libadwaita.devdoc # has the demo called 'adwaita-1-demo'
|
||||||
|
2
pkgs/clan-vm-manager/web/app/.gitignore
vendored
Normal file
2
pkgs/clan-vm-manager/web/app/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
34
pkgs/clan-vm-manager/web/app/README.md
Normal file
34
pkgs/clan-vm-manager/web/app/README.md
Normal 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
14
pkgs/clan-vm-manager/web/app/index.html
Normal 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
3320
pkgs/clan-vm-manager/web/app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
pkgs/clan-vm-manager/web/app/package.json
Normal file
25
pkgs/clan-vm-manager/web/app/package.json
Normal 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
6
pkgs/clan-vm-manager/web/app/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
38
pkgs/clan-vm-manager/web/app/src/App.tsx
Normal file
38
pkgs/clan-vm-manager/web/app/src/App.tsx
Normal 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
58
pkgs/clan-vm-manager/web/app/src/Config.tsx
Normal 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
3
pkgs/clan-vm-manager/web/app/src/index.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
18
pkgs/clan-vm-manager/web/app/src/index.tsx
Normal file
18
pkgs/clan-vm-manager/web/app/src/index.tsx
Normal 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
29
pkgs/clan-vm-manager/web/app/src/nested.tsx
Normal 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
9
pkgs/clan-vm-manager/web/app/tailwind.config.js
Normal 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
15
pkgs/clan-vm-manager/web/app/tsconfig.json
Normal 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
22
pkgs/clan-vm-manager/web/app/vite.config.ts
Normal 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,
|
||||||
|
},
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user