rsiot/components/cmp_leptos/mod.rs
1#![allow(rustdoc::bare_urls)]
2//! Компонент для интеграции веб-приложения на основе фреймворка Leptos
3//!
4//! # Подготовка среды разработки
5//!
6//! ## Таргеты
7//!
8//! - [wasm32-unknown-unknown](`crate::doc::dev_prepare::wasm32_unknown_unknown`)
9//! - [aarch64-linux-android](`crate::doc::dev_prepare::aarch64_linux_android`) (Tauri / Android)
10//! - [armv7-linux-androideabi](`crate::doc::dev_prepare::armv7_linux_androideabi`) (Tauri / Android)
11//! - [i686-linux-android](`crate::doc::dev_prepare::i686_linux_android`) (Tauri / Android)
12//! - [x86_64-linux-android](`crate::doc::dev_prepare::x8664_linux_android`) (Tauri / Android)
13//!
14//! ## `.cargo/config.toml`
15//!
16//! ```toml
17//! [target.wasm32-unknown-unknown]
18//! rustflags = [
19//! "--cfg",
20//! "erase_components",
21//! ]
22//! ```
23//!
24//! ## Tauri
25//!
26//! Если требуется разработка приложения Tauri (https://beta.tauri.app/guides/prerequisites/).
27//!
28//! ```bash
29//! (sudo apt install libwebkit2gtk-4.1-dev
30//! build-essential
31//! curl
32//! wget
33//! file
34//! libssl-dev
35//! libayatana-appindicator3-dev
36//! librsvg2-dev)
37//! ```
38//!
39//! ### Tauri CLI
40//!
41//! ```bash
42//! cargo install tauri-cli
43//! ```
44//!
45//! ### Create tauri apps
46//!
47//! ```bash
48//! cargo install create-tauri-app
49//! ```
50//!
51//! ### Android Studio
52//!
53//! ```bash
54//! sudo snap install android-studio --classic
55//! ```
56//! Запустить Android Studio, поставить пакеты по-умолчанию. Открыть SDK Manager и установить NDK (Side by side) и Android SDK CLI.
57//!
58//! ### Env variables
59//!
60//! `~/.config/nushell/config.nu`:
61//!
62//! ```toml
63//! $env.JAVA_HOME = "/snap/android-studio/current/jbr"
64//! $env.ANDROID_HOME = "/home/konstantin/Android/Sdk"
65//! $env.NDK_HOME = $"($env.ANDROID_HOME)/ndk/26.2.11394342"
66//! ```
67//!
68//! Проверить пути
69//!
70//! ## Rustiwind
71//!
72//! Для сортировки классов Tailwind можно поставить утилиту:
73//!
74//! ```bash
75//! cargo install rustywind
76//! ```
77//!
78//! Вызов:
79//!
80//! ```bash
81//! rustywind --write src/
82//! ```
83//!
84//! ## Leptosfmt
85//!
86//! Установка
87//!
88//! ```bash
89//! cargo install leptosfmt
90//! ```
91//!
92//! # Создание проекта
93//!
94//! ## `.zed/settings.json`
95//!
96//! ```json
97//! {
98//! "lsp": {
99//! "rust-analyzer": {
100//! "initialization_options": {
101//! "check": {
102//! "command": "clippy"
103//! },
104//! "cargo": {
105//! "target": "wasm32-unknown-unknown"
106//! }
107//! }
108//! }
109//! }
110//! }
111//! ```
112//!
113//! ## Tauri
114//!
115//! ```bash
116//! cargo create-tauri-app
117//!
118//! # добавить поддержку Android
119//! cargo tauri android init
120//! ```
121//!
122//! ## Tailwind
123//!
124//! Установить:
125//!
126//! ```bash
127//! npm install -D tailwindcss
128//! npm install -D @tailwindcss/forms
129//! npx tailwindcss init
130//! ```
131//!
132//! Создать файл `tailwind.config.js`:
133//!
134//! ```json
135//! /** @type {import('tailwindcss').Config} */
136//!
137//! module.exports = {
138//! content: {
139//! files: [
140//! "*.html",
141//! "./src/**/*.rs",
142//! "../../rsiot/src/components/cmp_leptos/components/**/*.rs"
143//! ],
144//! },
145//! plugins: [require('@tailwindcss/forms'),],
146//! }
147//! ```
148//!
149//! Создать файл `input.css` в корне проекта:
150//!
151//! ```css
152//! @tailwind base;
153//! @tailwind components;
154//! @tailwind utilities;
155//! ```
156//!
157//! Добавить в `index.html`:
158//!
159//! ```html
160//! <html>
161//! <head>
162//! <!-- Подключаем стили Tailwind -->
163//! <link data-trunk rel="tailwind-css" href="input.css" />
164//! <meta name="viewport" content="width=device-width, initial-scale=1.0" />
165//! </head>
166//! </html>
167//! ```
168//!
169//! ## Material Theme
170//!
171//! Создаем тему в [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).
172//!
173//! Скачиваем набор файлов css, распаковываем в папку `material-theme`. В начале файла `input.css` прописываем:
174//!
175//! ```css
176//! /* Material theme */
177//! @import "./material-theme/dark.css";
178//! @import "./material-theme/dark-hc.css";
179//! @import "./material-theme/dark-mc.css";
180//! @import "./material-theme/light.css";
181//! @import "./material-theme/light-hc.css";
182//! @import "./material-theme/light-mc.css";
183//! ```
184//!
185//! Прописать секцию `theme` в `tailwind.config.json`:
186//!
187//! ```json
188#![doc = include_str!("./doc/tailwind.config.json")]
189//! ```
190//! Для выбора темы применяем класс к элементу `html.body`:
191//!
192//! ```html
193//! <body class="dark"></body>
194//! ```
195//!
196//! Допустимые классы:
197//!
198//! - dark-high-contrast
199//! - dark-medium-contrast
200//! - dark
201//! - light-high-contrast
202//! - light-medium-contrast
203//! - light
204//!
205//!
206//! Добавить в файл `input.css`:
207//!
208//! ```css
209//! :root {
210//! --md-ref-typeface-brand: "Roboto";
211//! --md-ref-typeface-plain: system-ui;
212//! }
213//! ```
214//!
215//! Material theme builder почему-то не экспортирует настройки шрифтов. Когда пофиксят - пересмотреть.
216//!
217//! ## Iconify
218//!
219//! ```bash
220//! npm i -D @iconify/tailwind
221//! npm i -D @iconify/json
222//! ```
223//!
224//! Добавить в файл `tailwind.config.js`:
225//!
226//! ```json
227//! const { addIconSelectors } = require("@iconify/tailwind");
228//!
229//! module.exports = {
230//! plugins: [addIconSelectors(["mdi", "material-symbols"])],
231//! }
232//! ```
233//!
234//! Добавить в параметры `addIconSelectors` семейства иконок.
235//!
236//! Далее в проекте иконки можно вставлять:
237//!
238//! ```html
239//! <span class="iconify material-symbols--menu-rounded h-5 w-5"></span>
240//! ```
241#![warn(rustdoc::bare_urls)]
242
243mod component;
244pub mod components;
245pub mod create_signal_from_msg;
246mod error;
247mod global_state;
248pub mod utils;
249
250pub use component::{Cmp, Config, StoreBound};
251pub use error::Error;
252pub use global_state::GlobalState;
253
254type Result = std::result::Result<(), Error>;