i

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/template
cd C:\Users\Michael
npx degit sveltejs/template mein-svelte-projekt
cd mein-svelte-projekt
npm install
Falls man in TypeScript programmieren möchte, führt man zusätzlich folgende Befehle aus:
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
Nun wurde die Datei .vscode/launch.json erzeugt. In dieser Datei ändert man das Attribut "webRoot" zu: "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 dev startet 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

Mit npm 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 
----
An allen Stellen, an denen das interaktive Element erscheinen soll:
<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>

Sourcemaps

Bei den Befehlen npm run build oder npm run dev werden Souremaps gebaut. Die Sourcemaps werden zum Debuggen benötigt; nicht jedoch zur Einbindung in inf-schule. Daher sollte der Sourcemap-Eintrag in bundle.js entfernt werden. Dies kann man erreichen, indem man in mein-svelte-projekt/rollup.config.js im Objekt output das Attribut sourcemap auf false setzt. Um den Debugger nutzen zu können, muss man sourcemap aber wieder auf true setzen. Alternativ könnte man auch eine zweite rollup-Konfiguration anlegen (eine Konfiguration zum Testen und eine zum Bauen für inf-schule).

Suche

v
15.6.3.3.15
dev.inf-schule.de/infschule/dokumentation/kapitel-erstellen/interaktive-elemente/svelte
dev.inf-schule.de/15.6.3.3.15

Rückmeldung geben