Neue Architektur

.gitignore

@@ -6,4 +6,6 @@ target/
 build
 test.java
 Test.java
-.vscode
+!**/services/Test.java
+.vscode
+sources.json

README.md

@@ -1,8 +1,8 @@
-# _Live View Programming_ mit Java
+# _Live View Programming_ mit jeder Programmiersprache
 
-Das _Live View Programming_ (LVP) bietet Ihnen für die Java-Programmierung _Views_ und _Skills_ an. Views sind dazu da, um mediale Inhalte im Web-Browser darzustellen, also Texte, Bilder, Grafiken, Videos, inteaktive Animationen etc. Skills stellen nützliche Fähigkeiten bereit, die man in Kombination mit Views (z.B. zur Dokumentation von Code) gebrauchen kann.
+Das _Live View Programming_ (LVP) bietet Ihnen für die Programmierung ein einfaches Textprotokoll an, um mediale Inhalte im Web-Browser darzustellen, also Texte, Bilder, Grafiken, Videos, inteaktive Animationen etc. Kommandos stellen auch nützliche Fähigkeiten bereit, die man z.B. zur Dokumentation von Code gebrauchen kann.
 
-All diese Views und Skills nutzt man programmierend mit Java. Mit jeder Code-Änderung wird die Ansicht im Browser _live_ aktualisiert. Es ist – ehrlich gesagt – ziemlich cool, wenn man die Veränderungen dann im Browser sieht. Probieren Sie die Demo aus!
+**Eine detaillierte Übersicht des Protokolls mit allen Kommandos folgt noch.**
 
 ## 🚀 Nutze das _Live View Programming_
 
@@ -31,45 +31,49 @@ Sie können die `.jar`-Datei auch selber generieren, wenn Sie zudem die Versions
 Passen Sie den Beispielaufruf an die aktuelle Version an:
 
 ```
-java -jar lvp-<Version>.jar --log --watch=demo.java
+java -jar lvp-<Version>.jar --log demo.java
 ```
 
-Wenn Sie die Version `lvp-0.5.0.jar` heruntergeladen haben, lautet der Aufruf:
+Wenn Sie die Version `lvp-1.0.0.jar` heruntergeladen haben, lautet der Aufruf:
 
 ```
-java -jar lvp-0.5.0.jar --log --watch=demo.java
+java -jar lvp-1.0.0.jar --log demo.java
 ```
 
 #### Übersicht der möglichen Kommandozeilenargumente
 
-| Argument         | Alias   | Bedeutung                                 | Beispiel                                      |
-|------------------|---------|-------------------------------------------|-----------------------------------------------|
-| --watch=DATEI    | -w      | Zu überwachende Datei oder Verzeichnis     | --watch=path/to/<br>--watch=demo.java                  |
-| --pattern=PATTERN| -p      | Dateinamensmuster (z.B. *.java)           | --pattern=*.java                              |
-| --log[=LEVEL]    | -l      | Log-Level (Error, Info, Debug)            | --log=Debug                                   |
-| PORT             |         | Portnummer für den Server                 | 50001                                         |
+| Argument                   | Alias | Bedeutung                                                                 | Beispiel                                 |
+|----------------------------|-------|---------------------------------------------------------------------------|------------------------------------------|
+| `--cmd=CMD`                |       | Startbefehl für die Ausführung (z. B. Java mit Optionen)                  | `--cmd="java --enable-preview"`          |
+| `--log[=LEVEL]`            | `-l`  | Log-Level (`Error`, `Info`, `Debug`)                                      | `--log=Debug`                            |
+| `--port`                   | `-p`  | Portnummer für den Server                                                 | `--port=50002`                           |
+| `--config`                 | `-c`  | Lädt Konfiguration aus `sources.json`                                     | `--config`                               |
+| `--source-only`            | `-s`  | Ignoriert alle Nicht-Source-Dateien                                       | `--source-only`                          |
+| `--watch-filter=PATTERN`   | `-w`  | Filter für Dateien, die ein Neuladen der Inhalte auslösen können          | `--watch-filter=./deps/*.java`           |
+| `SOURCES`                  |       | Quellen, die durch LVP ausgeführt werden                                  | `demo1.java demo2.java` <br> `sources/*.java` |
+
 
 > Mehrere Argumente können kombiniert werden, z.B.:  
-> `java -jar lvp-<Version>.jar --watch=src --pattern=*.java --log=Debug 50001`
+> `java -jar lvp-<Version>.jar --watch-filter=src/lib/**/*.java --log=Debug --port=50001 --config src/*View.java`
 
 ### 3. So nutzt man das _Live View Programming_
 
 Die Datei `demo.java` dient als einfaches Beispiel für den Einstieg in das Live View Programming (LVP).  
 
 Damit LVP funktioniert, **muss der Server die Datei beobachten (watchen)** – sobald Änderungen erkannt werden, wird der Code automatisch neu ausgeführt und die Ausgabe aktualisiert.
 
-Innerhalb einer [`void main()`-Methode](https://openjdk.org/jeps/495) lassen sich interaktive Inhalte erzeugen, indem man Methoden des `Clerk`-Interfaces verwendet. Diese Inhalte werden anschließend im Browser angezeigt.
+Innerhalb einer [`void main()`-Methode](https://openjdk.org/jeps/495) lassen sich interaktive Inhalte erzeugen, indem man `println`-Ausgaben entsprechend dem Protokoll erzeugt. Diese Inhalte werden anschließend im Browser angezeigt.
 
 **Beispiel:**
 
 ```java
 import lvp.Clerk;
 
 void main() {
-    Clerk.markdown("# Hello World");
+    println("Markdown: # Hello World");
 }
 ```
-Dieser einfache Aufruf rendert eine Markdown-Überschrift direkt im Browser. Weitere Ausgaben, Grafiken oder Interaktionen können durch zusätzliche Clerk-Methoden, Views oder Skills ergänzt werden.
+Dieser einfache Aufruf rendert eine Markdown-Überschrift direkt im Browser. Weitere Ausgaben, Grafiken oder Interaktionen können durch zusätzliche Kommandos ergänzt werden.
 
 ### Troubleshooting
 
@@ -102,7 +106,7 @@ kill -9 11840
 ```
 Dabei ist 11840 durch die ermittelte PID zu ersetzen.
 
-## 💟 Motivation: Views bereichern das Programmieren
+## 💟 Motivation: Views bereichern das Programmieren (Outdated)
 
 Das _Live View Programming_ versteht sich als ein Angebot, in ein bestehendes Programm _Views_ einzubauen und zu verwenden, die im Web-Browser angezeigt werden. Es macht nicht nur Spaß, wenn man zum Beispiel Grafiken im Browser erzeugen kann -- man sieht auch die Programmierfehler, die einem unterlaufen. Wenn man etwa in der Turtle-View eine Schildkröte mit einem Stift über die Zeichenfläche schickt, zeigt sich unmittelbar, ob man Wiederholungen über Schleifen richtig aufgesetzt oder die Rekursion korrekt umgesetzt hat. Die visuelle Repräsentation gibt über das Auge eine direkte Rückmeldung. Feedback motiviert und hilft beim Verständnis.
 

demo.java

@@ -1,166 +1,57 @@
-import lvp.Clerk;
-import lvp.skills.Text;
-import lvp.skills.Interaction;
-import lvp.views.Dot;
-import lvp.views.Turtle;
-
-
+List<String> obst = List.of("Apfel", "Birne", "Banane");
 void main() {
-    Clerk.clear();
-    // Markdown 1
-    Clerk.markdown(Text.fillOut("""
-    # Interaktive LVP Demo
-
-    ## Markdown
-    Die Markdown-View erlaubt es, Markdown-Text direkt im Browser darzustellen. Der folgende Code zeigt ein einfaches Beispiel, wie Text im Markdown-Format 
-    an den Browser gesendet und dort automatisch als HTML gerendert wird:
-    ```java
-    ${0}
-    ```
-    Der Aufruf `Clerk.markdown(text)` elaubt den einfachen Zugriff auf die Markdown-View.
-    In diesem Beispiel werden zusätzlich zwei unterstützende Skills verwendet:
-    - `Text.fillOut(...)`: Zum Befüllen von String-Vorlagen mit dynamischen Inhalten, indem Platzhalter (z.B. ${2}) durch die Auswertung von übergebenen Ausdrücken ersetzt werden.
-    - `Text.codeBlock(...)`: Zum Einbinden von Codeabschnitten als interaktive Blöcke im Markdown-Text.
-
-    ## Turtle
-    Die Turtle-View ermöglicht das Zeichnen und Anzeigen von SVG-Grafiken im Browser. Diese können Schritt für Schritt aufgebaut werden:
-    ```java
-    ${1}
-    ```
-    """, Text.codeBlock("./demo.java", "// Markdown 1"), Text.codeBlock("./demo.java", "// Turtle 1"), "${0}"));
-    // Markdown 1
-
-    // Label Turtle 1
-    // Turtle 1
-    var turtle = new Turtle(0, 200, 0, 25, 50, 0, 0);
-    turtle.forward(25).right(60).backward(25).right(60).forward(25).write();
-    // Turtle 1
-    // Label Turtle 1
-
-    Clerk.markdown(Text.fillOut("""
-
-    ## Interaktionen
-    Die Live-View ist nicht nur ein Anzeigewerkzeug, sondern dient auch als interaktiver Editor. Änderungen an eingebetteten Code-Blöcken wirken sich direkt auf die zugrunde liegende 
-    Datei aus. Dadurch kann der dokumentierte Code live ausprobiert und bearbeitet werden.
-    Ein interaktiver Code-Block wird mithilfe von `Text.codeBlock(...)` definiert. Der entsprechende Code im Quelltext muss durch Kommentar-Labels (z.B. `// Turtle 1`) markiert werden:
-    ```java
-    ${0}
-    ```
-    Dieser markierte Block kann anschließend über `Text.codeBlock("./demo.java", "// Turtle 1")` eingebunden werden. Wird dieser Block in einen Markdown-Abschnitt eingefügt, erscheint 
-    er in der Live-View als editierbarer Code-Bereich.
-
-    Zusätzlich können JavaScript-Funktionen eingebunden werden, die gezielt Teile des Quelltexts verändern. Dafür wird `Interaction.eventFunction(...)` verwendet. Dieser Skill liefert 
-    eine Funktion, die anhand des Dateipfads, eines Labels und des neuen Codes eine markierte Zeile ersetzt.
-
-    Um solche Funktionen interaktiv nutzbar zu machen, kann `Interaction.button(...)` verwendet werden. Damit lässt sich ein Button erstellen, der bei Klick eine bestimmte Stelle im Code anpasst:
-    ```java 
-    ${1}
-    ```
-
-    ### Color Change
-    Im folgenden Beispiel wird eine Turtle-Grafik dargestellt:
-    ```java
-    ${2}
-    ```
-
-    """, Text.codeBlock("./demo.java", "// Label Turtle 1"), Text.codeBlock("./demo.java", "// Buttons"), Text.codeBlock("./demo.java", "// Turtle triangle")));
-
-    // Turtle 2
-    var turtle2 = new Turtle(0, 200, 0, 50, 100, 12, 0);
-    drawing(turtle2, 24);
-    turtle2.write();
-    // Turtle 2
-
-    Clerk.markdown("""
-            Darunter befinden sich drei Buttons, die jeweils die Farbe der Turtle ändern. Die zu ersetzende Stelle im Quellcode ist durch das Label `// turtle color` markiert. Beim Klick auf einen Button wird
-            dieser Teil des Codes automatisch angepasst.
+    println("""
+            Clear
+            Markdown: ## Einkaufsliste
+            Markdown:
             """);
+    println(buildObstListe());
+    println("~~~");
+    println("""
+            Text[template]:
+            ## Beispiel
+            Irgendein ${0} anzeigen.
+            ~~~
+            | Markdown
+
+            Text: Text
+            | Text[template] | Markdown
+
+            Text[t2]:
+            ## Syntax Überschrift
+            Das ist die Syntax
+            ${0}
+            Danach
+            ~~~
 
-    // Buttons
-    Clerk.write(Interaction.button("Red", 200, 50, Interaction.eventFunction("./demo.java", "// turtle color", "turtle.color(255, i * 256 / 37, i * 256 / 37, 1);")));
-    Clerk.write(Interaction.button("Green", 200, 50, Interaction.eventFunction("./demo.java", "// turtle color", "turtle.color(i * 256 / 37, 255, i * 256 / 37, 1);")));
-    Clerk.write(Interaction.button("Blue", 200, 50, Interaction.eventFunction("./demo.java", "// turtle color", "turtle.color(i * 256 / 37, i * 256 / 37, 255, 1);")));
-    // Buttons
+            Cutout: ./syntax.md
+            | Text[t2] | Markdown
 
-    Clerk.markdown(Text.fillOut("""
-            ### Turtle mit Timeline
-            Die Turtle-View unterstützt außerdem eine Timeline, über die sich die Zeichenreihenfolge der Grafik Schritt für Schritt nachvollziehen lässt:
+            Text[t3]:
             ```java
             ${0}
             ```
-            """, Text.codeBlock("./demo.java", "// Turtle 3")));
+            ~~~
 
-    // Turtle 3
-    var turtle3 = new Turtle(0, 200, 0, 50, 100, 12, 0);
-    drawing(turtle3, 24);
-    turtle3.write().timelineSlider();
-    // Turtle 3
+            Codeblock:./intro.java;// example
+            | Text[t3] | Markdown
 
-    Clerk.markdown(Text.fillOut("""
-    ### Input
-    Initialisierung von Variablen über ein Eingabefeld:
-    ```java
-    ${0}
-    ```
-    Der Skill `Interaction.input(...)` ermöglicht es, Eingabefelder zu erstellen, die genutzt werden können, um Werte in den Quelltext einzufügen.
-    Dazu wird Pfad und Label angegeben, um die Zeile zu makieren, in der der Wert eingefügt werden soll. Gleichzeitig wird das Label als Beschriftung des Eingabefelds verwendet.
-    Ein Template wird angegeben, das den Platzhalter `$` enthält, der durch den eingegebenen Wert ersetzt wird. Optional kann ein Platzhaltertext angegeben werden,
-    der im Eingabefeld angezeigt wird. Zusätzlich kann der Type des Eingabefelds angegeben werden (z.B. `text`, `number`, `email`).
-
-    """, Text.codeBlock("./demo.java", "// Input")));
-
-    // Input
-    int exampleValue = 0; // Input Example
-    Clerk.write(Interaction.input("./demo.java", "// Input Example", "int exampleValue = $;", "Geben Sie eine Zahl ein"));
-
-    String exampleString; // Input String Example
-    Clerk.write(Interaction.input("./demo.java", "// Input String Example", "String exampleString = \"$\";", "Geben Sie einen String ein"));
-    // Input
-
-    Clerk.markdown(Text.fillOut("""
-    #### Checkbox
-    Für Checkboxen kann `Interaction.checkbox(...)` verwendet werden. Diese triggern die Änderung des Quelltextes, wenn sie angeklickt werden.
-    ```java
-    ${0}
-    ```
-    """, Text.codeBlock("./demo.java", "// Checkbox")));
-
-    // Checkbox
-    boolean booleanValue = false; // Boolean Example
-    Clerk.write(Interaction.checkbox("./demo.java", "// Boolean Example", "boolean booleanValue = $;", booleanValue));
-    // Checkbox
-
-    Clerk.markdown(Text.fillOut("""
-    ## Dot View
-    Die Dot-View erlaubt das Anzeigen von Graphen, die im [DOT-Format](https://graphviz.org/doc/info/lang.html) beschrieben sind.
-    ```java
-    ${0}
-    ```
-    """, Text.codeBlock("./demo.java", "// Dot")));
+            Register[skipId]: Counter wc
+            Text:
+            Hello World
+            ~~~
+            | Counter | Html
 
-    // Dot
-    Dot dot = new Dot();
-    dot.draw("""
-    digraph G {
-        A -> B;
-        B -> C;
-    }
-    """);
-    // Dot
-}
-
-
-// Turtle triangle
-void triangle(Turtle turtle, double size) {
-    turtle.forward(size).right(60).backward(size).right(60).forward(size).right(60 + 180);
+            """);
+
 }
 
-void drawing(Turtle turtle, double size) {
-    for (int i = 1; i <= 18; i++) {
-        turtle.color(255, i * 256 / 37, i * 256 / 37, 1); // turtle color
-        turtle.width(1.0 - 1.0 / 36.0 * i);
-        triangle(turtle, size + 1 - 2 * i);
-        turtle.left(20).forward(5);
+// example
+String buildObstListe() {
+    String out = "";
+    for (String o : obst) {
+        out += "**" + o + "**\n";
     }
+    return out;
 }
-// Turtle triangle
+// example

demo_sources.json

@@ -0,0 +1,4 @@
+[
+    { "path": "demo/**/demo.java", "cmd": "java --enable-preview -Dsun.stdout.encoding=UTF-8" },
+    { "path": "demo/sub1/demo.bat", "cmd": "" }
+]