Framework und Compiler für hocheffizienten Code

import App from './App.svelte';
 
const app = new App({
        target: document.body,
        props: {
                name: 'world'
        }
});
 
export default app;
 

…
<script>
// Beim Anlegen der Komponente führt Svelte diesen Code-Block aus 
// Variablen als prop der Komponente fuer andere zugaenglich machen
  export let name;
  export function get(name){}
…
/* Von der Komponente benoetigte Variablen anderer
   Komponenten ueber Import zugaenglich machen */
  import Counter from './lib/Counter.svelte'
/* Eine Kind- analog der Eltern-Komponente
   zugaenglich machen */
  import Kind from './Kind.svelte'
</script>
…
<main>
…
   /* Eine Kind-Komponente im HTML-Abschnitt verwenden */
   <Kind/>
…
</main>
 

// Eltern-Komponente
<script> 
    import Kind from './Kind.svelte'; 
</script> 
<Kind wochentag={'Mittwoch'}/>
 

// Kind-Komponente: Kind.svelte
<script> 
    export let wochentag; 
</script> 
<p>Heute ist {wochentag}</p>
 

// Kind-Komponente: Kind.svelte
<script>
  import 
  {createEventDispatcher} 
  from 'svelte';
  let dispatch = 
  createEventDispatcher();
  function handleClick() {
        dispatch('message', 
        {
          text: 'Hallo!'
        });
    }
</script>
<button on:click={handleClick}>
    Anklicken, um Hallo zu sagen!
</button>
 

// Eltern-Komponente
<script>
    import Kind from './Kind.svelte';
    function handleMessage(event) {
          alert(event.detail.text);
    }
</script>
<Kind on:message={handleMessage}/>
 

<script>
…
</script>
<!-- Kind-Komponente: Behaelter.svelte -->
<h3>
    <slot>
      <p>Dieser Text erscheint, 
          wenn keiner bereitgestellt wird.</p>
    </slot>
</h3>
    
<h4>
    <slot name="ueberschrift" />
    <slot name="beschreibung" />
</h4>
 
<slot name="schluessel" />
    {#if $$slots.schluessel}
        <h6> 
          Ein Slot-schluessel ist vorhanden!
        </h6>
    {/if}
 
<style>
…
</style>
 

<!-- Eltern-Komponente: Element.svelte -->
<script>
    import Behaelter from './Behaelter.svelte';
</script>
 
<Behaelter>
  <h3>
      Dieser Text erscheint innerhalb der K
      ind-Komponente.
  </h3>
  <p slot="ueberschrift">Dies ist die Überschrift</p>
  <p slot="beschreibung">Dies ist eine Beschreibung</p>
    <p slot="schluessel">Enthält Slot-schluessel</p>
</Behaelter>
 

<script>
// App.svelte
import Element from './Element.svelte'
</script>
 
<main>
  <h1>
    <p>Wurzel/Root-Komponente</p>      
  </h1>
  <h3>
    <Element />
  </h3>
</main>
 

// Sollte kein Pfad zur aktuelle URL passen, 
// so zeigt svelte-spa-router diese Svelte-Komponente an
 
<h2>Nicht gefunden!</h2>
 
<p>Die gewünschte URL existiert nicht!</p>
 

<script>
  import Router, { link } from "svelte-spa-router";
  import { routes } from "./routes.js";
</script>
 
<main>
    <h1> …
…
    <Router {routes}/>
</main>
 
<style>
   …
</style>
 

import { writable, derived } from 'svelte/store';
 
const steuer = 0.19
 
export const nettoPreis = writable(0);
 
export const bruttoPreis = 
derived(nettoPreis, $nettoPreis =>
                    $nettoPreis *(1+steuer));
 

<script>
    import { nettoPreis, bruttoPreis } 
    from './stores.js';
</script>
 
<main>
    <h3>
        <label> Nettopreis:
                <input type="number" 
                bind:value={$nettoPreis}>
        </label>
        Bruttopreis: {$bruttoPreis}
    </h3>
</main>
 

"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage",
 

import { defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'
export default defineConfig({
  plugins: [
    svelte({ hot: !process.env.VITEST }),
  ],
  test: {
    globals: true,
    environment: 'jsdom', },
})
 

// Counter.spec.ts
 
import { tick } from 'svelte';
import { describe, expect, it } from 'vitest';
import Counter from '../src/lib/Counter.svelte';
 
let host: HTMLElement
 
describe('Counter component', function () {
  it('Eine Instanz von Counter anlegen', function () {
    host = document.createElement('div');
    host.setAttribute('id', 'host');
    document.body.appendChild(host);
    const instance = new Counter({ target: host });
    // Prüfen, ob Counter-Instanz vorhanden
    expect(instance).toBeTruthy();
  });
 
  it('Erste Anzeige von Counter durchführen', function () {
    host = document.createElement('div');
    host.setAttribute('id', 'host')
    document.body.appendChild(host);
    new Counter({ target: host });
    // Testergebniss prüfen
    expect(host.innerHTML).toContain('count is 0');
  });
 
  it('Beim Anklicken der Schaltfläche count aktualisieren', async function () {
    const host = document.createElement('div');
    document.body.appendChild(host);
    new Counter({ target: host });
    expect(host.innerHTML).toContain('count is 0');
    const btn = host.getElementsByTagName('button')[0];
    btn.click();
    await tick();
    // Prüfen, ob der korrekte Text auf Schaltfläche erscheint
    expect(host.innerHTML).toContain('count is 1');
  });
});
 

FROM node AS build
# Arbeitsverzeichnis anlegen
RUN mkdir -p /app
WORKDIR /app
COPY . .
# Auch die package-lock.json kopieren
COPY package*.json ./
# Notwendige npm-Packages installieren
RUN npm ci
# Build für Svelte-App durchfühen
RUN npm run build
# Webserver nginx einrichten
FROM nginx
COPY --from=build /app/dist /usr/share/nginx/html