Update live demo

apps/example/public/examples/example.mts

@@ -1,29 +1,39 @@
-// Example code
+// This is the live demo to the paper Virtual Domain Specific Languages via
+// Embedded Projectional Editing by Niklas Korz and Artur Andrzejak, published
+// at 22nd International Conference on Generative Programming:
+// Concepts & Experiences (GPCE 2023), in conjunction with ACM SPLASH 2023,
+// 22-27 October 2023, Cascais, Portugal.
 
-let test = "Hello" + "World";
+// On the left, you see the projectional editor and on the right, the
+// underlying textual source code. Both edit the same model and any changes
+// to one side are reflected directly on the other side.
 
+// 1. Simplest example:
+// A function call is replaced by a projection with a text field.
+console.log("Hello world!");
+
+// 2. Nested example:
+// The outer projection "change" provides context to projections within in.
+// This context is used by projections "trim" and "replace" to provide a list
+// of columns for the user to pick from.
+((table) => {
+  table["name"] = table["name"].trim("right");
+  table["lecturer"] = table["lecturer"].replace("Mister ", "Mr. ");
+})(db["lectures"]);
+
+// 3. Complex example:
+// Projections can be mixed into code in the host language.
 function x(input: number, name: string) {
   console.log("Hello world!");
-  if (true) {
-    while (2 < 1) {
+  if (name == "puredit") {
+    while (input < 42) {
       ((table) => {
         // A quick comment
         table["secondName"] = table["secondName"].replace("Mister ", "Mr. ");
+        input += 1;
         console.log("Mixing projections with code");
         table["firstName"] = table["firstName"].trim("both");
       })(db["students"]);
     }
   }
 }
-
-((table) => {
-  table["name"] = table["name"].trim("right");
-  table["lecturer"] = table["lecturer"].replace("Mister ", "Mr. ");
-})(db["lectures"]);
-
-let y = 42;
-y + 10;
-
-if (y > 42) {
-  let x = 3;
-}

apps/example/public/examples/example.py

@@ -1,15 +1,46 @@
+# This is the live demo to the paper Virtual Domain Specific Languages via
+# Embedded Projectional Editing by Niklas Korz and Artur Andrzejak, published
+# at 22nd International Conference on Generative Programming:
+# Concepts & Experiences (GPCE 2023), in conjunction with ACM SPLASH 2023,
+# 22-27 October 2023, Cascais, Portugal.
+
+# On the left, you see the projectional editor and on the right, the
+# underlying textual source code. Both edit the same model and any changes
+# to one side are reflected directly on the other side.
+
+# Module mathdsl defines an internal DSL, whose operations are then transformed
+# into visual equations by our projectional editor.
+# The code of the internal DSL can be found at
+# https://github.com/niklaskorz/puredit/blob/main/apps/example/public/examples/mathdsl.py
+# while the projections are defined in
+# https://github.com/niklaskorz/puredit/tree/main/apps/example/src/py/projections
+# The projections make use of the https://cortexjs.io/mathlive/ library (MIT license).
 import mathdsl
 
-# Math term transformed into function
+# Click on the blue keyboard icon to edit a mathematical expression.
+# You also type directly using your keyboard. Commonly used names such as "pi"
+# or "theta" are automatically replaced by their greek letters.
+# Click anywhere else inside the editor to close the mathematical keyword again.
+# You can run the Python code by pressing on the blue, bottom-right "Execute"
+# button.
+# Note that the first time pressing it will take some time to load as it
+# retrieves a WebAssembly Python environment to be able to execute the code
+# inside your web browser.
+
+# 1. Example: A math term transformed into function.
+# Click on the blue keyboard icon 
 f, args = mathdsl.compile("20\\pi^2+\\sin x")
 print("f(x):", f(x=90))
 
-# Math term with a matrix
+# 2. Example: A math term with a matrix.
 rotate, args = mathdsl.compile("\\begin{pmatrix}\\cos\\theta & -\\sin\\theta\\\\ \\sin\\theta & \\cos\\theta\\end{pmatrix}\\begin{pmatrix}x\\\\ y\\end{pmatrix}")
 print("rotate(x, y, theta):")
 print(rotate(x=1, y=2, theta=0.5))
 
-# Math term evaluated immediately, using variables from local scope
+# 3. Example:
+# A math term evaluated immediately, using variables from the local scope.
+# You can try to define new variables in the lines before the term
+# and then use them inside the equation editor.
 r = 5
 x = mathdsl.evaluate("r^r", locals())
 print("x:", x)

apps/example/src/App.svelte

@@ -2,7 +2,7 @@
   import TypescriptEditor from "./ts/Editor.svelte";
   import PythonEditor from "./py/Editor.svelte";
 
-  let activeTab: "ts" | "py" = "py";
+  let activeTab: "ts" | "py" = "ts";
 
   function selectTypescript() {
     activeTab = "ts";