Module cmp_leptos

Expand description

Компонент для интеграции веб-приложения на основе фреймворка Leptos

§Подготовка среды разработки

§Таргеты

wasm32-unknown-unknown
aarch64-linux-android (Tauri / Android)
armv7-linux-androideabi (Tauri / Android)
i686-linux-android (Tauri / Android)
x86_64-linux-android (Tauri / Android)

§Tauri

Если требуется разработка приложения Tauri (https://beta.tauri.app/guides/prerequisites/).

(sudo apt install libwebkit2gtk-4.1-dev
  build-essential
  curl
  wget
  file
  libssl-dev
  libayatana-appindicator3-dev
  librsvg2-dev)

§Tauri CLI

cargo install tauri-cli --version "^2.0.0-beta"

§Create tauri apps

cargo install create-tauri-app

§Android Studio

sudo snap install android-studio --classic

Запустить Android Studio, поставить пакеты по-умолчанию. Открыть SDK Manager и установить NDK (Side by side) и Android SDK CLI.

§Env variables

~/.config/nushell/config.nu:

$env.JAVA_HOME = "/snap/android-studio/current/jbr"
$env.ANDROID_HOME = "/home/konstantin/Android/Sdk"
$env.NDK_HOME = $"($env.ANDROID_HOME)/ndk/26.2.11394342"

Проверить пути

§Rustiwind

Для сортировки классов Tailwind можно поставить утилиту:

cargo install rustywind

Вызов:

rustywind --write src/

§Leptosfmt

Установка

cargo install leptosfmt

§Создание проекта

§`.zed/settings.json`

{
  "lsp": {
    "rust-analyzer": {
      "initialization_options": {
        "check": {
          "command": "clippy"
        },
        "cargo": {
          "target": "wasm32-unknown-unknown"
        }
      }
    }
  }
}

§Tauri

cargo create-tauri-app --rc

# добавить поддержку Android
cargo tauri android init

§Tailwind

Установить:

npm install -D tailwindcss
npm install -D @tailwindcss/forms
npx tailwindcss init

Создать файл tailwind.config.js:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: {
    files:  [
      "*.html",
    "./src/**/*.rs",
    "../../rsiot/src/components/cmp_leptos/components/**/*.rs"
    ],
  },
  plugins: [require('@tailwindcss/forms'),],
}

Создать файл input.css в корне проекта:

@tailwind base;
@tailwind components;
@tailwind utilities;

Добавить в index.html:

<html>
  <head>
    <!-- Подключаем стили Tailwind -->
    <link data-trunk rel="tailwind-css" href="input.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
</html>

§Material Theme

Создаем тему в Material Theme Builder.

Скачиваем набор файлов css, распаковываем в папку material-theme. В начале файла input.css прописываем:

/* Material theme */
@import "./material-theme/dark.css";
@import "./material-theme/dark-hc.css";
@import "./material-theme/dark-mc.css";
@import "./material-theme/light.css";
@import "./material-theme/light-hc.css";
@import "./material-theme/light-mc.css";

Прописать секцию theme в tailwind.config.json:

module.exports = {
  content: {
    files:  [...],
  },
  plugins: [...],
  theme: {
    extend: {
      colors: {
        primary: "var(--md-sys-color-primary)",
        "surface-tint": "var(--md-sys-color-surface-tint)",
        "on-primary": "var(--md-sys-color-on-primary)",
        "primary-container": "var(--md-sys-color-primary-container)",
        "on-primary-container": "var(--md-sys-color-on-primary-container)",
        secondary: "var(--md-sys-color-secondary)",
        "on-secondary": "var(--md-sys-color-on-secondary)",
        "secondary-container": "var(--md-sys-color-secondary-container)",
        "on-secondary-container": "var(--md-sys-color-on-secondary-container)",
        tertiary: "var(--md-sys-color-tertiary)",
        "on-tertiary": "var(--md-sys-color-on-tertiary)",
        "tertiary-container": "var(--md-sys-color-tertiary-container)",
        "on-tertiary-container": "var(--md-sys-color-on-tertiary-container)",
        error: "var(--md-sys-color-error)",
        "on-error": "var(--md-sys-color-on-error)",
        "error-container": "var(--md-sys-color-error-container)",
        "on-error-container": "var(--md-sys-color-on-error-container)",
        background: "var(--md-sys-color-background)",
        "on-background": "var(--md-sys-color-on-background)",
        surface: "var(--md-sys-color-surface)",
        "on-surface": "var(--md-sys-color-on-surface)",
        "surface-variant": "var(--md-sys-color-surface-variant)",
        "on-surface-variant": "var(--md-sys-color-on-surface-variant)",
        outline: "var(--md-sys-color-outline)",
        "outline-variant": "var(--md-sys-color-outline-variant)",
        shadow: "var(--md-sys-color-shadow)",
        scrim: "var(--md-sys-color-scrim)",
        "inverse-surface": "var(--md-sys-color-inverse-surface)",
        "inverse-on-surface": "var(--md-sys-color-inverse-on-surface)",
        "inverse-primary": "var(--md-sys-color-inverse-primary)",
        "primary-fixed": "var(--md-sys-color-primary-fixed)",
        "on-primary-fixed": "var(--md-sys-color-on-primary-fixed)",
        "primary-fixed-dim": "var(--md-sys-color-primary-fixed-dim)",
        "on-primary-fixed-variant": "var(--md-sys-color-on-primary-fixed-variant)",
        "secondary-fixed": "var(--md-sys-color-secondary-fixed)",
        "on-secondary-fixed": "var(--md-sys-color-on-secondary-fixed)",
        "secondary-fixed-dim": "var(--md-sys-color-secondary-fixed-dim)",
        "on-secondary-fixed-variant": "var(--md-sys-color-on-secondary-fixed-variant)",
        "tertiary-fixed": "var(--md-sys-color-tertiary-fixed)",
        "on-tertiary-fixed": "var(--md-sys-color-on-tertiary-fixed)",
        "tertiary-fixed-dim": "var(--md-sys-color-tertiary-fixed-dim)",
        "on-tertiary-fixed-variant": "var(--md-sys-color-on-tertiary-fixed-variant)",
        "surface-dim": "var(--md-sys-color-surface-dim)",
        "surface-bright": "var(--md-sys-color-surface-bright)",
        "surface-container-lowest": "var(--md-sys-color-surface-container-lowest)",
        "surface-container-low": "var(--md-sys-color-surface-container-low)",
        "surface-container": "var(--md-sys-color-surface-container)",
        "surface-container-high": "var(--md-sys-color-surface-container-high)",
        "surface-container-highest": "var(--md-sys-color-surface-container-highest)",
        "green-color": "var(--md-extended-color-green-color)",
        "green-on-color": "var(--md-extended-color-green-on-color)",
        "green-color-container": "var(--md-extended-color-green-color-container)",
        "green-on-color-container": "var (--md-extended-color-green-on-color-container)",
        "yellow-color": "var(--md-extended-color-yellow-color)",
        "yellow-on-color": "var(--md-extended-color-yellow-on-color)",
        "yellow-color-container": "var(--md-extended-color-yellow-color-container)",
        "yellow-on-color-container": "var(--md-extended-color-yellow-on-color-container)",
      },
    },
  },
}

Для выбора темы применяем класс к элементу html.body:

<body class="dark"></body>

Допустимые классы:

dark-high-contrast
dark-medium-contrast
dark
light-high-contrast
light-medium-contrast
light

Добавить в файл input.css:

:root {
  --md-ref-typeface-brand: "Roboto";
  --md-ref-typeface-plain: system-ui;
}

Material theme builder почему-то не экспортирует настройки шрифтов. Когда пофиксят - пересмотреть.

§Iconify

npm i -D @iconify/tailwind
npm i -D @iconify/json

Добавить в файл tailwind.config.js:

const { addIconSelectors } = require("@iconify/tailwind");

module.exports = {
  plugins: [addIconSelectors(["mdi", "material-symbols"])],
}

Добавить в параметры addIconSelectors семейства иконок.

Далее в проекте иконки можно вставлять:

<span class="iconify material-symbols--menu-rounded h-5 w-5"></span>

Modules§

components
Компоненты для использования в проектах leptos
create_signal_from_msg
Создание сигнала на основе сообщения
utils
Вспомогательные функции

Macros§

create_signal_from_msg
Макрос для создания сигналов фреймворка leptos из сообщений.

Structs§

Config
Конфигурация компонента cmp_leptos
GlobalState
Структура глобального состояния

Enums§

Error
Ошибки компонента cmp_leptos

Traits§

StoreBound
Трейт, необходимо реализовать на структуре

Type Aliases§

Cmp
Компонент cmp_leptos

Module cmp_leptosCopy item path

§Подготовка среды разработки

§Таргеты

§Tauri

§Tauri CLI

§Create tauri apps

§Android Studio

§Env variables

§Rustiwind

§Leptosfmt

§Создание проекта

§.zed/settings.json

§Tauri

§Tailwind

§Material Theme

§Iconify

Modules§

Macros§

Structs§

Enums§

Traits§

Type Aliases§

Module cmp_leptos

§`.zed/settings.json`