Interaktive Elemente mit Svelte programmieren
Was ist Svelte?
Svelte ist ein relativ neues Werkzeug zum Programmieren von Javascript-Anwendungen, die im Browser ausgeführt werden sollen. Obwohl Svelte ähnliche Aufgaben übernimmt wie React oder Vue.js, ist Svelte technisch gesehen eigentlich kein Framework sondern ein Compiler. Einen guten Einstieg in Svelte bieten der Vortrag Rethinking Reactivity von Rich Harris, dem Hauptentwickler von Svelte, und das Tutorial auf https://svelte.dev/.Voraussetzungen
Auf dem Entwicklungscomputer muss node.js installiert sein. Als Editor eignet sich Visual Studio Code (VS Code) mit der Erweiterung Svelte for VS Code.Ein neues Projekt beginnen
Folgende Befehlen erzeugen eine Vorlage für ein Svelte-Projekt im Ordner C:\Users\Michael\mein-svelte-projekt. Das Programm npx wurde zusammen mit node.js installiert. npx führt das node-Modul degit aus. Falls degit noch nicht auf dem Computer installiert ist, wird degit zunächst von npx installiert. Anschließend erzeugt degit den Ordner mein-svelte-projekt und kopiert in diesen Ordner den Inhalt von https://github.com/sveltejs/templatecd C:\Users\Michael
npx degit sveltejs/template mein-svelte-projekt
cd mein-svelte-projekt
npm install
node scripts/setupTypeScript.js
npm install
Debugger vorbereiten
Folgende Schritten sollten einmalig durchgeführt werden, damit VS Code zum Debuggen verwendet werden kann.In VS Code:
- Menüpunkt "Ausführuen" wählen
- Menüpunkt "Konfiguration hinzufügen ..." wählen
- "Chrome" wählen
"webRoot": "${workspaceFolder}/src"
Ausführen und Debuggen
- In einem Terminal (z.B. dem Terminal, das in VS Code eingebaut ist): Mit dem Befehl
npm run devstartet man einen http-server. Außerdem bewirkt dieser Befehl, dass das Projekt bei jeder Änderung automatisch neu gebaut wird. - In VS Code: Mit der Taste "F5" (oder: "Ausführen" -> "Debugging starten") startet man das Projekt. Nun sollte sich ein Browserfenster (Chrome) öffnen, in dem das Projekt ausgeführt wird. Chrome lädt das Projekt über den http-Server, den man im vorherigen Schritt gestartet hat.
- In VS Code kann man nun im Quelltext Breakpoints setzen, Variablen einsehen oder einzelne Programmschritte ausführen.
Einbindung in inf-schule
für die Einbindung vorbereiten
Als Einstiegspunkt in das Programm dient die Datei mein-svelte-projekt/src/main.js (oder src/main.ts, falls TypeScript verwendet wird). In dieser Datei sollte das Programm nach DOM-Elementen suchen, in die das interaktive Element eingehängt werden soll. Anschließend wird für jedes dieser DOM-Elemente eine Objekt der Klasse App erzeugt. Das folgende Beispiel zeigt die Datei src/main.js mit den beschriebenen Anpassungen:import App from './App.svelte';
// Alle DOM-Elemente suchen, die die Klasse mein-svelte-projekt besitzen
let elements = document.getElementsByClassName('mein-svelte-projekt ');
// Über die DOM-Elemente iterieren
for (let element of elements) {
// eine Instanz der App erstellen und in das DOM-Element einfügen
const app = new App({
target: element
});
}
Achtung: Sobald man die Datei mein-svelte-projekt/src/main.js wie hier beschrieben angepasst hat, muss man auch die Datei mein-svelte-projekt/public/index.html (im Svelte-Projekt) anpassen. In dieser Datei muss dann ein div mit der Klasse "mein-svelte-projekt" auftauchen (wie in der Inhaltsdaei; siehe unten)
als Feature registrieren
Mitnpm run build baut man das Svelte-Projekt. Anschließend findet man im Svelte-Projekt in public/build die Dateien bundle.js und bundle.css.
Diese beiden Dateien kopiert man in inf-schule in das inf-schule/assets/thirdparty/mein-svelte-projekt
In der Datei inf-schule/site/plugins/inf-schule/models/infschule.php ergänzt man in der Schleife foreach($featureList as $k => $feature) einen neuen elif-Block:
elseif ($feature == 'mein-svelte-projekt') {
$js .= js ('assets/thirdparty/mein-svelte-projekt/bundle.js');
$css .= css('assets/thirdparty/mein-svelte-projekt/bundle.css');
}
Einbinden in eine Inhaltsseite
Mit folgendem Quellcode bindet man das Interaktive Element in eine Inhaltsseite ein:Im Kopf der Inhaltsseite:
----
Features: mein-svelte-projekt,
----
<div class="mein-svelte-projekt"></div>
Einbindung mit Parametern
Inhaltsdatei:
<div class="mein-svelte-projekt" data-parameter1="42"></div>
mein-svelte-projekt/src/app.js
// Über die DOM-Elemente iterieren
for (let element of elements) {
// Parameter auslesen
let parameter1 = element.getAttribute('data-parameter1');
// eine Instanz der App erstellen und in das DOM-Element einfügen
const app = new App({
target: element,
parameter1: parameter1
});
}
mein-svelte-projekt/src/App.svelte
<script>
export let parameter1;
// schreibt 42 auf die Console
console.log(parameter1);
...
<script>
