Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages

Author: Markus-Brand

demos/markdown/mle-workspaces.md

@@ -0,0 +1,4 @@
+# Workspace Example
+
+This is an Example of a workspace embedded in HTML/Markdown that will persist it's code in browser local storage.
+<lively-script><script>import focalStorage from 'src/external/focalStorage.js'; import {SocketSingleton} from 'src/components/mle/socket.js'; const idMap = new Map(); const enclosingDiv = <div />; var mle = {}; async function startUp(){ await SocketSingleton.get(); let i = 0; while(await focalStorage.getItem(`markdown_workspace_${i}`)){ await new Pane(i, await focalStorage.getItem(`markdown_workspace_${i}_kind`)).create(); i++; } } class Pane { constructor(id, kind){ if(id !== undefined){ this._id = id; this.kind = kind; } else { this._id = idMap.size; } idMap.set(this.textStorageId, this); } onDoIt() { this.saveText() this.workspace.tryBoundEval(this.workspace.value) } async onReset() { if(this.kind) this.socket = await SocketSingleton.reset(); this.logarea.value = "LOGS"; this.drawarea.innerHTML = ""; } get defaultText() { return "sql`SELECT * FROM students`" } get textStorageId() { return `markdown_workspace_${this._id}` } async loadText() { var loaded = await focalStorage.getItem(this.textStorageId); if (loaded) return loaded; return this.defaultText; } async saveText() { focalStorage.setItem(this.textStorageId, this.workspace.value); focalStorage.setItem(`${this.textStorageId}_kind`, this.kind); } log(s) { this.logarea.value += s + ""; } async create() { // #TODO #META style and pre tags are problematic in Markdown scripts this.kind = this.kind === undefined ? await lively.confirm("MLE Workspace? Ok for yes, Cancel for No.") : this.kind; var style = document.createElement("style"); style.textContent = ` lively-code-mirror { border: 1px solid gray; flex: 4; }`; var buttons = <div> <button click={() => {this.onDoIt()} }>DoIt</button> <button click={() => {this.onReset()} }>reset</button> </div>; this.workspace = await (<lively-code-mirror></lively-code-mirror>); this.workspace.value = await this.loadText(); this.workspace.doitContext = this; this.logarea = <textarea disabled style="flex: 2;"/>; this.logarea.value = "LOGS"; this.drawarea = <div></div>; if(this.kind){ this.workspace.boundEval = async function(s) { this.socket = this.socket || await SocketSingleton.get(); this.socket.emit("test", {id: this.textStorageId, func: "evaluate", parameters: [s]}); const value = await new Promise((res) => { this.socket.on("result", r => { if(!r) return; if(r.id !== this.textStorageId) return; console.log(r.data) res(JSON.parse(r.data)); }); }); this.outData = value; Object.defineProperty(window, `$${this._id}`, {configurable: true, value}); this.log(JSON.stringify(value)); this.saveText(); return {value}; } this.workspace.boundEval = this.workspace.boundEval.bind(this); } enclosingDiv.appendChild( <div style="padding: 10px; width:90%;"> {style} <h4>{this.kind ? "MLE" : "DOM"} Workspace ${this._id}</h4> {buttons} <div style="display: flex;"> {this.workspace} {this.logarea} </div> {this.drawarea} </div> ); } } startUp().then(t => <div> <button click={() => new Pane().create()}>New workspace</button> {enclosingDiv} </div>)</script> </lively-script>

src/babylonian-programming-editor/presentation/short.md

@@ -0,0 +1,231 @@
+<!-- markdown-config presentation=true -->
+
+<link rel="stylesheet" type="text/css" href="../../../src/client/presentation.css"  />
+<link rel="stylesheet" type="text/css" href="../../../src/client/lively.css"  />
+<link rel="stylesheet" type="text/css" href="../../../templates/livelystyle.css"  />
+
+<style>
+
+  .centered {
+    display: block; 
+    margin-left: auto; 
+    margin-right: auto;
+  }
+
+  .left {
+    position: absolute;
+    width: 40%;
+    left: 20px;
+    top: 150px;
+  }
+
+  .right {
+    position: absolute;
+    width: 50%;
+    right: 10px;
+    top: 100px;
+  }
+
+
+  .bottomLeft {
+    width: 50%;
+    position: absolute;
+    bottom: 40px; 
+    left: 20px;
+  }
+  
+  .bottomRight {
+    width: 50%;
+    position: absolute;
+    bottom: 40px; 
+    right: 20px;
+  }
+
+  h2 {
+    text-align: left;
+  }
+  
+  a:visited.plain, a:link.plain {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  h2.sub {
+    margin-top: -20px;
+  }
+
+
+
+
+
+
+
+</style>
+
+
+![](knuth_1972_page1.png){style="position:absolute; top:40px; left:40px; width:400px; border: 1px solid lightgray"}
+
+---
+
+![](knuth_1972_page1.png){style="position:absolute; top:40px; left:40px; width:400px; border: 1px solid lightgray"}
+
+![](knuth_1972_cistern.png){style="position:absolute; top:50px; left:450px; width:500px; border: 1px solid lightgray"}
+
+
+
+---
+
+![](knuth_1972_page1.png){style="position:absolute; top:40px; left:40px; width:400px; border: 1px solid lightgray"}
+
+![](knuth_1972_cistern.png){style="position:absolute; top:50px; left:450px; width:500px; border: 1px solid lightgray"}
+
+![](babylonian_smalltalk_motivation.png){style="position:absolute; top:290px; left:130px; width:800px; border: 1px solid lightgray"}
+
+
+---
+
+![](babylonian_lion.png){style="width: 200px; position: absolute; right: 20px;  bottom: 20px;"}
+
+<div class="title">
+<a class="plain" href="https://arxiv.org/pdf/1902.00549">
+Babylonian-style Programming 
+</a>
+</div>
+<div class="subtitle">
+Design and Implementation of a General-purpose Editor<br>Supporting the Integration of Live Examples into Source Code
+</div>
+
+<div class="authors">
+David Rauch, Patrick Rein, Stefan Ramson, Jens Lincke, and Robert Hirschfeld
+</div>
+
+
+<div class="credentials">
+  <br>
+  <a class="plain" href="https://www.hpi.uni-potsdam.de/hirschfeld/">Software Architecture Group<br>
+Hasso Plattner Institute, University of Potsdam, Germany</a>
+  <br>
+  <br>
+  <a class="plain" href="https://2019.programming-conference.org/"><b>‹Programming› 2019<br> Mon 1 - Thu 4 April 2019 Genoa, Italy</b></a>
+</div>
+
+
+
+---
+## Existing Example-based Systems
+
+![](example_based_systems.png){.centered}
+
+---
+# Design
+## Probes  {.sub}
+
+- Probe source code for values 
+- Attach to syntax elements 
+- See values for examples 
+- See changes during statement 
+- Chronological order 
+- Object inspector supported
+
+![](design_probes.png){.right style="width:58%"}
+
+--- 
+# Design
+## State over Time  {.sub}
+
+- Sliders 
+- Attach to flow control structures 
+- Scroll through iterations 
+- Probes filter values 
+- Easier correlation of values
+
+![](design_state_over_time.png){.right style="width:40%"}
+
+
+--- 
+# Design
+## Objects and Data Structures  {.sub}
+
+- Supported by probes 
+- Usable in examples 
+- (Custom) instance templates 
+- Links
+
+![](design_objects_and_data_structures_1.png){.bottomLeft}
+![](design_objects_and_data_structures_2.png){.right}
+
+<!-- #TODO source: @rhi, Fibonacci -> similar.... -->
+
+---
+# Design
+## Behavioral Highlighting  {.sub}
+
+- Examples indicate intent 
+- Fade out code that was not reached 
+- Quickly find relevant code 
+- Examine conditions without probes
+
+
+![](design_behavioural_highlighting.png){.right}
+
+<!-- Behavioral highlighting for a conditional -->
+
+---
+# Design
+## Persistent Examples  {.sub}
+
+- Serialized to JSON 
+- Saved as comments 
+- Before and after syntax elements
+- On load: parse and hide
+
+![](design_persistent_examples.png){.right}
+
+---
+# Design
+## Additional Features  {.sub}
+
+- Replacements 
+  - Replace source code 
+  - Only for example evaluation
+- Pre- and postscript 
+  - Run before and after example 
+  - Similar to setup and teardown
+
+![](design_additional_features.png){.right}
+
+
+---
+<!-- #TODO pull this up into presentation? -->
+<script>
+
+
+
+// poor men's slide master #Hack #TODO How to pull this better into lively-presentation?
+var ctx = this;
+(async () => {
+  await lively.sleep(500)
+  var presentation = lively.query(ctx, "lively-presentation")
+  if (presentation && presentation.slides) {
+    presentation.slides().forEach(ea => {
+      var img = document.createElement("img")
+      img.classList.add("logo")
+      img.src="https://lively-kernel.org/lively4/lively4-seminars/PX2018/media/hpi_logo.png" 
+      img.setAttribute("width", "50px")
+      ea.appendChild(img)
+      var div = document.createElement("div")
+      div.classList.add("page-number")
+      ea.appendChild(div)
+    });
+  } 
+
+// hot fix
+  await lively.sleep(500)
+  Array.from(lively.allElements(true))
+  .filter(ea => ea.textContent && ea.textContent.match(/^Like douc/)).forEach(ea => ea.textContent = "Like documentation")
+
+
+  
+  return ""
+})()
+</script>

src/client/lang/lang-ext.js

@@ -67,7 +67,7 @@ extend(Object.prototype, {
   traverseAsAST(visitor) {
     return babel.traverse(this, visitor);
   },
-  inspect() {
+  openInInspector() {
     lively.openInspector(this);
   }
 

src/client/reactive/babel-plugin-active-expression-rewriting/plugin-utils.js

@@ -0,0 +1,2 @@
+
+

src/client/reactive/babel-plugin-polymorphic-identifiers/playground.js

@@ -0,0 +1 @@
+here we go....

src/client/reactive/babel-plugin-polymorphic-identifiers/plugin-explorer.workspace

@@ -0,0 +1 @@
+{"source":"/src/client/reactive/babel-plugin-polymorphic-identifiers/playground.js","plugin":"https://lively-kernel.org/lively4/aexpr/src/client/reactive/babel-plugin-polymorphic-identifiers/polymorphic-identifiers.js","options":{"autoUpdateAST":true,"autoUpdateTransformation":false,"autoExecute":true,"systemJS":false,"autoRunTests":false,"autoSaveWorkspace":false},"pluginSelection":[{"url":"https://lively-kernel.org/lively4/aexpr/src/client/reactive/babel-plugin-polymorphic-identifiers/polymorphic-identifiers.js"}]}

src/client/reactive/babel-plugin-polymorphic-identifiers/polymorphic-identifiers.js

@@ -0,0 +1,75 @@
+
+const SHARED_FLAG_GENERATED_IMPORT_IDENTIFIER = 'SHARED_FLAG_GENERATED_IMPORT_IDENTIFIER';
+
+export default function ({ types: t, template }) {
+  return {
+    name: 'polymorphic-identifiers',
+    visitor: {
+      Program: {
+        enter(path, state) {
+          function addCustomTemplate(file, name) {
+            const declar = file.declarations[name];
+            if (declar) {
+              return declar;
+            }
+
+            const identifier = file.declarations[name] = file.addImport("polymorphic-identifiers", name, name);
+            identifier[SHARED_FLAG_GENERATED_IMPORT_IDENTIFIER] = true;
+            return identifier;
+          }
+
+          function hasDirective(path, name) {
+            let foundDirective = false;
+            path.traverse({
+              Directive(path) {
+                if (path.get("value").node.value === name) {
+                  foundDirective = true;
+                }
+              }
+            });
+            return foundDirective;
+          }
+
+          debugger
+          const shouldTransform = state.opts.executedIn === 'workspace' || hasDirective(path, "pi");
+          if (!shouldTransform) {
+            return;
+          }
+
+          path.traverse({
+            TaggedTemplateExpression(path) {
+              if (path.node.visitedByPI) {
+                return;
+              }
+              path.node.visitedByPI = true;
+
+              const tagTemplate = template(`MAKE_REF(TAG_NODE, {
+                thisReference: this,
+                evalFunction: str => eval(str)
+              })`);
+              const tagPath = path.get('tag');
+              tagPath.replaceWith(tagTemplate({
+                MAKE_REF: addCustomTemplate(state.file, 'makeRef'),
+                TAG_NODE: tagPath.node
+              }));
+              
+              path.replaceWith(t.memberExpression(path.node, t.identifier('access')));
+              
+              const parentPath = path.parentPath;
+              if (parentPath.isBinaryExpression() && path.parentKey === 'left' && parentPath.node.operator === "<<") {
+                parentPath.replaceWith(parentPath.node.right);
+                
+                // find something we can embed an assignment expression in
+                const preStatementAncestor = parentPath.find(p => {
+                  const parent = p.parentPath;
+                  return parent && (parent.isStatement() || (parent.isArrowFunctionExpression() && p.parentKey === "body"))
+                });
+                preStatementAncestor.replaceWith(t.assignmentExpression('=', path.node, preStatementAncestor.node));
+              }
+            }
+          });
+        }
+      }
+    }
+  };
+}

src/client/reactive/polymorphic-identifiers/index.md

@@ -0,0 +1,40 @@
+# Polymorphic-Identifiers
+
+```JavaScript
+import { PIReference } from 'polymorphic-identifiers';
+
+// example scheme
+class qa extends PIReference {
+  read() {
+    const { elements } = this.parse();
+    return elements;
+  }
+  write(v) {
+    const { elements, type, prop } = this.parse();
+
+    if (type === 'style') {
+      return elements.forEach(e => e.style[prop] = v)
+    }
+    elements.forEach(e => e.innerHTML = v)
+  }
+
+  // helper
+  parse() {
+    const [selector, type, prop] = this.strings.first.split('/');
+    const elements = this.query(selector);
+    return { selector, type, prop, elements };
+  }
+  query(selector) {
+    return Array.from(document.querySelectorAll(selector));
+  }
+}
+
+// usage
+// calls `read`
+qa`lively-window`.forEach(lw => lively.showElement(lw))
+
+// assignments with <<
+// calls `write`
+qa`#rect` << 'html'
+qa`#rect/style/border-color` << 'green'
+```