tauri sample
This commit is contained in:
Adrian Osterwind
parent
d377de0999
commit
41f011ed58
38 changed files with 302 additions and 5139 deletions
13
src/app.html
Normal file
13
src/app.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Tauri + SvelteKit + Typescript App</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
310
src/main.rs
310
src/main.rs
|
|
@ -1,310 +0,0 @@
|
|||
use iced::highlighter;
|
||||
use iced::keyboard;
|
||||
use iced::widget::{
|
||||
self, button, column, container, horizontal_space, pick_list, row, text, text_editor, toggler,
|
||||
tooltip,
|
||||
};
|
||||
use iced::{Center, Element, Fill, Font, Task, Theme};
|
||||
|
||||
use std::ffi;
|
||||
use std::io;
|
||||
use std::path::{Path, PathBuf};
|
||||
use std::sync::Arc;
|
||||
|
||||
pub fn main() -> iced::Result {
|
||||
iced::application("Editor - Iced", Editor::update, Editor::view)
|
||||
.theme(Editor::theme)
|
||||
.font(include_bytes!("../fonts/icons.ttf").as_slice())
|
||||
.default_font(Font::MONOSPACE)
|
||||
.run_with(Editor::new)
|
||||
}
|
||||
|
||||
struct Editor {
|
||||
file: Option<PathBuf>,
|
||||
content: text_editor::Content,
|
||||
theme: highlighter::Theme,
|
||||
word_wrap: bool,
|
||||
is_loading: bool,
|
||||
is_dirty: bool,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
enum Message {
|
||||
ActionPerformed(text_editor::Action),
|
||||
ThemeSelected(highlighter::Theme),
|
||||
WordWrapToggled(bool),
|
||||
NewFile,
|
||||
OpenFile,
|
||||
FileOpened(Result<(PathBuf, Arc<String>), Error>),
|
||||
SaveFile,
|
||||
FileSaved(Result<PathBuf, Error>),
|
||||
}
|
||||
|
||||
impl Editor {
|
||||
fn new() -> (Self, Task<Message>) {
|
||||
(
|
||||
Self {
|
||||
file: None,
|
||||
content: text_editor::Content::new(),
|
||||
theme: highlighter::Theme::SolarizedDark,
|
||||
word_wrap: true,
|
||||
is_loading: true,
|
||||
is_dirty: false,
|
||||
},
|
||||
Task::batch([
|
||||
Task::perform(
|
||||
load_file(format!("{}/src/main.rs", env!("CARGO_MANIFEST_DIR"))),
|
||||
Message::FileOpened,
|
||||
),
|
||||
widget::focus_next(),
|
||||
]),
|
||||
)
|
||||
}
|
||||
|
||||
fn update(&mut self, message: Message) -> Task<Message> {
|
||||
match message {
|
||||
Message::ActionPerformed(action) => {
|
||||
self.is_dirty = self.is_dirty || action.is_edit();
|
||||
|
||||
self.content.perform(action);
|
||||
|
||||
Task::none()
|
||||
}
|
||||
Message::ThemeSelected(theme) => {
|
||||
self.theme = theme;
|
||||
|
||||
Task::none()
|
||||
}
|
||||
Message::WordWrapToggled(word_wrap) => {
|
||||
self.word_wrap = word_wrap;
|
||||
|
||||
Task::none()
|
||||
}
|
||||
Message::NewFile => {
|
||||
if !self.is_loading {
|
||||
self.file = None;
|
||||
self.content = text_editor::Content::new();
|
||||
}
|
||||
|
||||
Task::none()
|
||||
}
|
||||
Message::OpenFile => {
|
||||
if self.is_loading {
|
||||
Task::none()
|
||||
} else {
|
||||
self.is_loading = true;
|
||||
|
||||
Task::perform(open_file(), Message::FileOpened)
|
||||
}
|
||||
}
|
||||
Message::FileOpened(result) => {
|
||||
self.is_loading = false;
|
||||
self.is_dirty = false;
|
||||
|
||||
if let Ok((path, contents)) = result {
|
||||
self.file = Some(path);
|
||||
self.content = text_editor::Content::with_text(&contents);
|
||||
}
|
||||
|
||||
Task::none()
|
||||
}
|
||||
Message::SaveFile => {
|
||||
if self.is_loading {
|
||||
Task::none()
|
||||
} else {
|
||||
self.is_loading = true;
|
||||
|
||||
Task::perform(
|
||||
save_file(self.file.clone(), self.content.text()),
|
||||
Message::FileSaved,
|
||||
)
|
||||
}
|
||||
}
|
||||
Message::FileSaved(result) => {
|
||||
self.is_loading = false;
|
||||
|
||||
if let Ok(path) = result {
|
||||
self.file = Some(path);
|
||||
self.is_dirty = false;
|
||||
}
|
||||
|
||||
Task::none()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn view(&self) -> Element<Message> {
|
||||
let controls = row![
|
||||
action(new_icon(), "New file", Some(Message::NewFile)),
|
||||
action(
|
||||
open_icon(),
|
||||
"Open file",
|
||||
(!self.is_loading).then_some(Message::OpenFile)
|
||||
),
|
||||
action(
|
||||
save_icon(),
|
||||
"Save file",
|
||||
self.is_dirty.then_some(Message::SaveFile)
|
||||
),
|
||||
horizontal_space(),
|
||||
toggler(self.word_wrap)
|
||||
.label("Word Wrap")
|
||||
.on_toggle(Message::WordWrapToggled),
|
||||
pick_list(
|
||||
highlighter::Theme::ALL,
|
||||
Some(self.theme),
|
||||
Message::ThemeSelected
|
||||
)
|
||||
.text_size(14)
|
||||
.padding([5, 10])
|
||||
]
|
||||
.spacing(10)
|
||||
.align_y(Center);
|
||||
|
||||
let status = row![
|
||||
text(if let Some(path) = &self.file {
|
||||
let path = path.display().to_string();
|
||||
|
||||
if path.len() > 60 {
|
||||
format!("...{}", &path[path.len() - 40..])
|
||||
} else {
|
||||
path
|
||||
}
|
||||
} else {
|
||||
String::from("New file")
|
||||
}),
|
||||
horizontal_space(),
|
||||
text({
|
||||
let (line, column) = self.content.cursor_position();
|
||||
|
||||
format!("{}:{}", line + 1, column + 1)
|
||||
})
|
||||
]
|
||||
.spacing(10);
|
||||
|
||||
column![
|
||||
controls,
|
||||
text_editor(&self.content)
|
||||
.height(Fill)
|
||||
.on_action(Message::ActionPerformed)
|
||||
.wrapping(if self.word_wrap {
|
||||
text::Wrapping::Word
|
||||
} else {
|
||||
text::Wrapping::None
|
||||
})
|
||||
.highlight(
|
||||
self.file
|
||||
.as_deref()
|
||||
.and_then(Path::extension)
|
||||
.and_then(ffi::OsStr::to_str)
|
||||
.unwrap_or("rs"),
|
||||
self.theme,
|
||||
)
|
||||
.key_binding(|key_press| {
|
||||
match key_press.key.as_ref() {
|
||||
keyboard::Key::Character("s") if key_press.modifiers.command() => {
|
||||
Some(text_editor::Binding::Custom(Message::SaveFile))
|
||||
}
|
||||
_ => text_editor::Binding::from_key_press(key_press),
|
||||
}
|
||||
}),
|
||||
status,
|
||||
]
|
||||
.spacing(10)
|
||||
.padding(10)
|
||||
.into()
|
||||
}
|
||||
|
||||
fn theme(&self) -> Theme {
|
||||
if self.theme.is_dark() {
|
||||
Theme::Dark
|
||||
} else {
|
||||
Theme::Light
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone)]
|
||||
pub enum Error {
|
||||
DialogClosed,
|
||||
IoError(io::ErrorKind),
|
||||
}
|
||||
|
||||
async fn open_file() -> Result<(PathBuf, Arc<String>), Error> {
|
||||
let picked_file = rfd::AsyncFileDialog::new()
|
||||
.set_title("Open a text file...")
|
||||
.pick_file()
|
||||
.await
|
||||
.ok_or(Error::DialogClosed)?;
|
||||
|
||||
load_file(picked_file).await
|
||||
}
|
||||
|
||||
async fn load_file(path: impl Into<PathBuf>) -> Result<(PathBuf, Arc<String>), Error> {
|
||||
let path = path.into();
|
||||
|
||||
let contents = tokio::fs::read_to_string(&path)
|
||||
.await
|
||||
.map(Arc::new)
|
||||
.map_err(|error| Error::IoError(error.kind()))?;
|
||||
|
||||
Ok((path, contents))
|
||||
}
|
||||
|
||||
async fn save_file(path: Option<PathBuf>, contents: String) -> Result<PathBuf, Error> {
|
||||
let path = if let Some(path) = path {
|
||||
path
|
||||
} else {
|
||||
rfd::AsyncFileDialog::new()
|
||||
.save_file()
|
||||
.await
|
||||
.as_ref()
|
||||
.map(rfd::FileHandle::path)
|
||||
.map(Path::to_owned)
|
||||
.ok_or(Error::DialogClosed)?
|
||||
};
|
||||
|
||||
tokio::fs::write(&path, contents)
|
||||
.await
|
||||
.map_err(|error| Error::IoError(error.kind()))?;
|
||||
|
||||
Ok(path)
|
||||
}
|
||||
|
||||
fn action<'a, Message: Clone + 'a>(
|
||||
content: impl Into<Element<'a, Message>>,
|
||||
label: &'a str,
|
||||
on_press: Option<Message>,
|
||||
) -> Element<'a, Message> {
|
||||
let action = button(container(content).center_x(30));
|
||||
|
||||
if let Some(on_press) = on_press {
|
||||
tooltip(
|
||||
action.on_press(on_press),
|
||||
label,
|
||||
tooltip::Position::FollowCursor,
|
||||
)
|
||||
.style(container::rounded_box)
|
||||
.into()
|
||||
} else {
|
||||
action.style(button::secondary).into()
|
||||
}
|
||||
}
|
||||
|
||||
fn new_icon<'a, Message>() -> Element<'a, Message> {
|
||||
icon('\u{0e800}')
|
||||
}
|
||||
|
||||
fn save_icon<'a, Message>() -> Element<'a, Message> {
|
||||
icon('\u{0e801}')
|
||||
}
|
||||
|
||||
fn open_icon<'a, Message>() -> Element<'a, Message> {
|
||||
icon('\u{0f115}')
|
||||
}
|
||||
|
||||
fn icon<'a, Message>(codepoint: char) -> Element<'a, Message> {
|
||||
const ICON_FONT: Font = Font::with_name("editor-icons");
|
||||
|
||||
text(codepoint).font(ICON_FONT).into()
|
||||
}
|
||||
5
src/routes/+layout.ts
Normal file
5
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// Tauri doesn't have a Node.js server to do proper SSR
|
||||
// so we will use adapter-static to prerender the app (SSG)
|
||||
// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
|
||||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
156
src/routes/+page.svelte
Normal file
156
src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
let name = $state("");
|
||||
let greetMsg = $state("");
|
||||
|
||||
async function greet(event: Event) {
|
||||
event.preventDefault();
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
greetMsg = await invoke("greet", { name });
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container">
|
||||
<h1>Welcome to Tauri + Svelte</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
|
||||
</a>
|
||||
<a href="https://kit.svelte.dev" target="_blank">
|
||||
<img src="/svelte.svg" class="logo svelte-kit" alt="SvelteKit Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p>
|
||||
|
||||
<form class="row" onsubmit={greet}>
|
||||
<input id="greet-input" placeholder="Enter a name..." bind:value={name} />
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{greetMsg}</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.svelte-kit:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00);
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue