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

Author: JensLincke

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/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'
+```

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

@@ -1,5 +1,4 @@
 
-
 export class PIReference {
   static get isPIReference() { return true; }
 
@@ -8,7 +7,8 @@ export class PIReference {
   }
 
   create(strings, ...expressions) {
-    // debugger
+    this.strings = strings;
+    this.expressions = expressions;
   }
 
   get access() {

src/client/reactive/test/polymorphic-identifiers/polymorphic-identifiers.spec.js

@@ -117,16 +117,19 @@ describe("PI", function() {
     })``.access).to.equal('bar')
   });
 
-//   it("inserts default constructors", () => {
-//     class A {
-//       constructor() {
-//         this.prop = 42;
-//       }
-//     }
-//     class B extends A {}
+});
+describe("AEs", function() {
+  
+  it("AExprs insert default constructors", () => {
+    class A {
+      constructor(prop) {
+        this.prop = prop;
+      }
+    }
+    class B extends A {}
 
-//     const b = new B();
-//     expect(b.prop).to.equal(42);
-//   });
+    const b = new B(42);
+    expect(b.prop).to.equal(42);
+  });
 
 });