mirror of https://git.proxmox.com/git/ui/proxmox-yew-widget-toolkit.git synced 2025-12-06 02:02:28 +00:00

No description

Find a file

Thomas Lamprecht d6ed681171 bump version to 0.7.8 Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>		2025-12-01 23:25:47 +01:00
.cargo	add .cargo/config.toml to build from debian packages	2024-08-12 10:12:54 +02:00
debian	bump version to 0.7.8	2025-12-01 23:25:47 +01:00
pwt-macros	pwt: bump version to 0.7.2	2025-10-10 09:28:37 +02:00
src	form context: add method to check dirtiness of single fields	2025-12-01 23:23:27 +01:00
.gitignore	gitignore build and target	2023-02-19 11:51:53 +01:00
Cargo.toml	bump version to 0.7.8	2025-12-01 23:25:47 +01:00
js-helper-module.js	widget: dropdown: use popover instead of a dialog	2024-11-18 10:23:07 +01:00
LICENSE-APACHE	LICENSE change: MIT or APACHE2 (same as yew)	2023-01-10 18:30:37 +01:00
LICENSE-MIT	LICENSE change: MIT or APACHE2 (same as yew)	2023-01-10 18:30:37 +01:00
Makefile	bump version to 0.4.8	2025-01-27 14:53:25 +01:00
README.md	readme: fix example URL and provide git clone one	2025-08-02 21:22:06 +02:00
Whitepaper.md	whitepaper: fix some typos	2024-12-19 13:24:35 +01:00

README.md

Motivation

The motivation for writing this toolkit was:

Problems with the currently used JavaScript based framework
We want to reduce the number of programming languages

The company writes more and more code in rust, so 'yew' was a natural choice. Most code can be written in rust, but it is still possible to use JavaScript. This allows to use existing JavaScript libraries when necessary.

The Whitepaper contains more details on this.

Usage

We provide a separate repository with usage examples:

https://git.proxmox.com/?p=ui/proxmox-yew-widget-toolkit-examples.git;a=tree

git clone git://git.proxmox.com/git/ui/proxmox-yew-widget-toolkit-examples.git

Contributions

All contributions to this project must accept the Developer Certificate of Origin (DCO) https://developercertificate.org/

See our Developer Documentations for how to communicate with other developers and for how to sent patches https://pve.proxmox.com/wiki/Developer_Documentation

I18N

All translatable strings are marked using the "tr!" macro.

Extract gettext messages with the "xtr" binary, which is part of the "tr" crate.

See the demo in the examples crate on how to use this.

Notes

We try to use the builder pattern instead of the html macro.

Conventions:

The Yew Component is prefixed with "Pwt" (i.e. "PwtColumn")
Corresponding Component Properties without prefix (i.e. "Column")
Builder is implemented on the Component Properties.
Component Properties implements Into<Html>.

Focus traversal

Focus handling should be like:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets

Dialog

We use the new html <dialog> tag (mainly to simplify focus handling).

This should work in major browsers now (2022). Anyways, a polyfill is also available:

https://github.com/GoogleChrome/dialog-polyfill

You can enable it manually in older versions of firefox in "about:config" using the dom.dialog_element.enabled setting.

Debugging

The simplest way to debug is using 'printf' debugging using the standard log macros log::{info,warning,error} in the code itself.

Another way is to use the DWARF info from wasm in the browser (chrome/chromium only):

compile wasm file but keep debug info:
- trunk: <link data-trunk rel="rust" data-keep-debug data-no-demangle> in index.html
- others: --keep-debug in wasm-bindgen
install debugging extension in chrome:
- https://goo.gle/wasm-debugging-extension
- restart browser after (else it won't work)
open page with wasm with DWARF info
- there should be a message in the console like: [C/C++ DevTools Support (DWARF)] Loading debug symbols for ...
debugger should show a file:// entry for rust files on disk
- if the paths match with your local install, nothing else is to be done
- otherwise, use the extension options to map the source paths correctly