Desktopanwendungen erstellen: Tauri (JavaScript)

Nachdem wir im letzten Artikel einen Blick auf die Geschichte von JavaScript geworfen haben und uns für Tauri entschieden haben, wollen wir nun endlich mit der ersten Anwendung beginnen.

Für die Anwendung greife ich auf React zurück. Für das Styling verwende ich das Mantine und als Webpackager vite.
Um Tauri auszuführen, muss Rust und Nodejs auf dem System installiert sein. Auch gibt es weitere, plattformspezifische Anforderungen, die hier erläutert werden.

Also, lass uns starten:
Zum Erstellen der Anwendung geben wir yarn create tauri-app oder npx create-tauri-app in die Konsole ein. Wir geben unserem Projekt einen Namen und wählen vite und später nochmal React aus. Dann wechseln wir in den Ordner rein. Danach können wir mit yarn tauri dev oder npm run tauri dev schauen, ob alles funktioniert hat.
Wenn sich nach einiger Zeit ein Fenster öffnet, sollte alles funktioniert haben.
Als Nächstes installieren wir alle weiteren benötigten Pakete nach mit dem Befehl yarn add @mantine/core @mantine/hooks marked oder npm install @mantine/core @mantine/hooks marked.
Das Paket marked hilft uns dabei, den Markdown Syntax in HTML Syntax umzuwandeln.

Als Erstes wechseln wir in die App.jsx Datei rein, um den bestehenden Code durch folgenden Code zu ersetzen.

import React from   "react";
import { AppShell } from   "@mantine/core";
import TextEditor from   "./components/TextEditor";

export   default   function App() {
  return (
  <>
      <AppShell   
      padding="md"
      >
          <TextEditor/>
      </AppShell>
  </>
);
}

Wie man daraus lesen kann, wird sich der Kern der Applikation in der TextEditor Komponente wiederfinden. So erstellen wir diese Datei samt einer einfachen React Komponente, die die Demo zurückgibt.

Wenn wir jetzt in die Anwendung wechseln, sehen wir relativ wenig, denn wir haben noch nicht Mantine eingebunden. Hierfür wechseln wir in die main.jsx und fügen den MantineProvider um unsere App herum. Auch entfernen wir die index.css Datei. Im gleichen Zug fügen wir schon unsere RecoilRoot hinzu.

<RecoilRoot>
    <MantineProvider>
        <App   />
    </MantineProvider>
</RecoilRoot>

Als Erstes widmen wir uns unserem TextEditor. Dabei nutzen wir ein Grid, was aus 2 Spalten besteht. Auf der linken Seite kommt ein Textarea hinzu, auf der rechten Seite ein Paper mit einem ScrollArea und einem div.

<Grid>
    <Grid.Col span={6}>
        <Textarea
        minRows={32}
        />
    </Grid.Col>
    <Grid.Col span={6}>
        <Paper shadow={"xs"} p={"md"}>
            <ScrollArea style={{ height: 720 }}>
                <div></div>
            </ScrollArea>
        </Paper>
    </Grid.Col>
</Grid>

Als Erstes möchten wir erreichen, dass der gleiche Text auf beiden Seiten angezeigt wird. Hierfür nutzen wir einen useState Hook und eine handleChange Funktion.

const [text, Settext] = useState("");
function handleChange(e) {
    e.preventDefault();
    Settext(e.target.value);
}

Dann fügen wir nur noch onChange={handleChange} und value={text} in unserem TextArea hinzu und <div>{text}</div>.

Jetzt kommen wir zu unserem Herzstück der Anwendung: den Markdown Parser. Dies lösen wir über die einfache Funktion, die das Argument text annimmt und daraus HTML erstellt.

function renderText(text) {
    const __html = marked(text, {
        smartLists: true,
        smartypants: true,
        breaks: true,
    });
    return { __html };
}

Zu unserem div wird nun noch das Attribute dangerouslySetInnerHTML={renderText(text)} hinzugefügt und bei jedem Tastendruck im TextArea wird der Markdowntext automatisch in HTML umgewandelt. Yeah!!