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

Author: BraunTom

demos/bibliographie/leoUIexample.js

@@ -1,248 +1,11 @@
-import ohm from "https://unpkg.com/[email protected]/dist/ohm.js";
-
-const exampleQueries = [
-  "Composite(AA.AuN='mike smith')",
-  "Ti='indexing by latent seman'",
-  "Ti=='indexing by latent semantic analysis'",
-  "Composite(AA.AuN=='susan t dumais')",
-  "Y=[2010, 2012)",
-  "Y=[2010, 2012]",
-  "Y<=2010",
-  "Y>=2005",
-  "Y<2010",
-  "D>'2010-02-03'",
-  "D=['2010-02-03','2010-02-05']",
-  "D='2010-02-03'",
-  "And(Y=1985, Ti='disordered electronic systems')",
-  "Or(Ti='disordered electronic systems', Ti='fault tolerance principles and practice')",
-  "And(Or(Y=1985,Y=2008), Ti='disordered electronic systems')",
-  "Composite(And(AA.AuN='mike smith',AA.AfN='harvard university'))",
-  "And(Composite(AA.AuN='mike smith'),Composite(AA.AfN='harvard university'))"
-]
-
-
-/*function createUILayer(object, key) {
-  var subDiv = <div id="innerDiv" style="margin: 5px; border: 1px solid gray;">{key}</div>;
-  var valueOrObject = object[key];
-  if (typeof(valueOrObject) == "object") {
-    Object.keys(valueOrObject).map(k => {
-      subDiv.appendChild(createUILayer(valueOrObject, k));
-    });
-  } else {
-    var input = <input value={valueOrObject}></input>;
-    subDiv.appendChild(input);
-  }
-  return subDiv;
-}*/
-
-function parseQuery(object) {
-  var subDiv = <div id="innerDiv" style="margin: 5px; border: 1px solid gray;"></div>;
-  
-  switch(object.type) {
-    case "simple":
-      [object.attribute, object.comparator, object.value].forEach(value => {
-        var input = <input value={value}></input>;
-        subDiv.appendChild(input)
-      });
-      break;
-    case "conjunction":
-      var input = <input value={object.conjunction}></input>;
-      var left = parseQuery(object.left);
-      var right = parseQuery(object.right);
-      [input, left, right].forEach(element => {
-        subDiv.appendChild(element);
-      });
-      break;
-    case "composite":
-      [object.attribute, object.comparator, object.value].forEach(value => {
-        var input = <input value={value}></input>;
-        subDiv.appendChild(input)
-      });
-  }
-  return subDiv;
-}
-
+import AcademicQuery from 'src/components/widgets/academic-query.js';
 
 export default class LeoUIExample{
   static async create () {
+    var queryWidget = await (<academic-query></academic-query>);
+    queryWidget.setQuery("And(Or(Y='1985', Y='2008'), Ti='disordered electronic systems')");
+    //queryWidget.setQuery("Y='1985'");
 
-//     var hello = <div id="helloDiv" draggable="true" click={() => lively.notify('hi')}>
-//         Hi
-//       </div>
-
-//     var world = <div id="worldDiv">
-//         World
-//       </div>
-
-//     let description = <p id="description"></p>
-
-//     hello.addEventListener('dragstart', dragStart);
-//     hello.addEventListener('dragend', dragEnd);
-
-//     world.addEventListener('drop', drop);
-
-    var g = ohm.grammar(
-      `Academic { 
-        Exp =
-          AcademicQuery
-
-        AcademicQuery = Attribute Comparator Value -- simple
-          | ("And" | "Or") "(" AcademicQuery "," AcademicQuery ")" -- complex
-          | "Composite(" CompositeQuery ")" -- composite
-        CompositeQuery = Attribute "." Attribute Comparator Value -- simple
-          | ("And" | "Or") "(" CompositeQuery "," CompositeQuery ")" -- complex
-
-        Comparator =
-          PartialComparator "="?
-        PartialComparator =
-          "=" | "<" | ">"
-
-        Attribute (an attribute) =
-          letter letter? letter?
-
-        Value (a value) =
-          "\'" alnum* "\'" -- string
-          | Number
-          | Date
-          | ( "[" | "(" ) Number "," Number ( "]" | ")" ) -- numberRange
-          | ( "[" | "(" ) Date "," Date ( "]" | ")" ) -- dateRange
-
-        Number =
-          digit+
-          Date =
-          "\'" Number "-" Number "-" Number "\'"
-      }`
-    );
-    
-    var s = g.createSemantics();
-    
-    s.addOperation(
-      'interpret', {
-        Exp: function(e) {
-          return e.interpret();
-        },
-        
-        AcademicQuery_simple: function(attribute, comparator, value) {
-          return {
-            "attribute" : attribute.interpret(),
-            "comparator" : comparator.interpret(),
-            "value" : value.interpret(),
-            "type" : "simple"
-          }
-        },
-        AcademicQuery_complex: function(conjunction, _1, left, _2, right, _3) {
-          return {
-            "conjunction" : conjunction.sourceString,
-            "left" : left.interpret(), 
-            "right" : right.interpret(),
-            "type" : "conjunction"
-           }
-        },
-        AcademicQuery_composite: function(_1, query, _2) {
-          return query.interpret();
-        },
-        
-        CompositeQuery_simple: function(mainAttribute, _, secondaryAttribute, comparator, value) {
-          // would it make sense to split main and secondary attribute?
-          var main = mainAttribute.interpret();
-          var secondary = secondaryAttribute.interpret();
-          return {
-            "attribute" : main + "." + secondary,
-            "comparator" : comparator.interpret(),
-            "value" : value.interpret(),
-            "type" : "composite"
-          }
-        },
-        CompositeQuery_complex: function(conjunction, _1, left, _2, right, _3) {
-          return {
-            "conjunction" : conjunction.sourceString,
-            "left" : left.interpret(), 
-            "right" : right.interpret(),
-            "type" : "conjunction"
-          }
-        },
-        
-        Comparator: function(main, secondary) {
-          return [main.interpret(), secondary.sourceString].join('');
-        },
-        PartialComparator: function(comparator) {
-          return comparator.sourceString;
-        },
-        
-        Attribute: function(a, b, c) {
-          return [a.interpret(), b.interpret(), c.interpret()].join('');
-        },
-
-        Value: function(value) {
-          return value.interpret();
-        },
-        Value_string: function(_1, string, _2) {
-          return string.sourceString;
-        },
-        Value_numberRange: function(leftBracket, nLeft, _, nRight, rightBracket) {
-          return "TODO";//arguments.map(a => {a.sourceString}).join('');
-        },
-        Value_dateRange: function(leftBracket, dLeft, _, dRight, rightBracket) {
-          return "TODO";//arguments.map(a => {a.sourceString}).join('');
-        },
-        
-        Number: function(n) {
-          return parseFloat(n.sourceString);
-        },
-        Date: function(_1, year, _2, month, _3, day, _4) {
-          return new Date(year.interpret(),
-                          month.interpret(),
-                          day.interpret())
-        },
-                
-        letter: function(a) {
-          return a.sourceString;
-        }
-      }
-    )
-    
-    // "Test"
-    exampleQueries.forEach(q => {
-      var m = g.match(q);
-      if (m.failed()) {
-        lively.notify("Failed query: ", q)
-      } else {
-        lively.notify(q, s(m).interpret());
-      }
-    })
-    
-
-//     function dragStart(event) {
-//       description.innerHTML = "dragging";
-//       event.dataTransfer.setData("element", event.target.id);
-//     }
-
-//     function dragEnd(event) {
-//       description.innerHTML = "";
-//     }
-
-//     function drop(event) {
-//       event.preventDefault();
-//       var data = event.dataTransfer.getData("element");
-//       console.log("Datatransfer Types" + event.dataTransfer.types);
-//       event.target.appendChild(lively.query(this, '#'+data))
-//     }
-    
-    var query = "And(Or(Y='1985', Y='2008'), Ti='disordered electronic systems')";
-    var match = g.match(query);
-    var queryObject = s(match).interpret();
-    
-    var input = <input id="queryInput" value={query} style="width: 100%"></input>
-    var div = <div id="outerDiv" style="padding-right : 20px">
-          {input}
-        </div>
-
-    /*Object.keys(queryObject).forEach(key => {
-      div.appendChild(createUILayer(queryObject, key));
-    });*/
-
-    div.appendChild(parseQuery(queryObject));
-    
-    return div;
+    return <div>{queryWidget}</div>;
   }
 }

src/client/boot.js

@@ -451,6 +451,7 @@ async function intializeLively() {
     groupedMessage('Load Standard Library');
       await System.import("lang");
       await System.import("lang-ext");
+      await System.import("lang-zone");
     groupedMessageEnd();
 
     groupedMessage('Initialize Document (in lively.js)' );

src/client/lang/lang-zone.js

@@ -0,0 +1,90 @@
+import 'lang';
+import Dexie from "src/external/dexie3.js";
+
+const { incrementExpectedAwaits, newPSD, decrementExpectedAwaits } = Dexie.Promise;
+
+const global = self;
+
+function exposeGlobal(key, value) {
+  Object.defineProperty(global, key, {
+    configurable: true,
+    enumerable: true,
+    
+    value,
+    writable: true,
+  });
+}
+
+/*MD
+## ZONES
+
+- a **minimal interface** to zones intended to be as compliant as possible to Dart's [Zone concept](https://dart.dev/articles/archive/zones)
+- intended to be exchangeable in case of future standard or library advancements
+- <span style='background: red'>!only modify if you know what you are doing and understand the **long-term consequences**!</span>
+- currently implemented as a lightweight wrapper around [Dexie.Promise](https://dexie.org/docs/Promise/Promise.PSD)
+  - Caution: we <span style='background: red'>monkey-patched Dexie</span> to access `incrementExpectedAwaits` and `decrementExpectedAwaits` to correctly detect native await on primitives
+
+MD*/
+
+// check if `incrementExpectedAwaits` and `decrementExpectedAwaits` are available
+if (![incrementExpectedAwaits, decrementExpectedAwaits].every(func => typeof func === 'function')) {
+  throw new Error('Dexie not monkey-patched to expose `incrementExpectedAwaits` and `decrementExpectedAwaits`');
+}
+
+const globalZone = (() => {
+  let zone = Dexie.Promise.PSD;
+  
+  while (!zone.global) {
+    if (zone.parent && zone.parent !== zone) {
+      zone = zone.parent;
+    } else {
+      throw new Error('could not initialize `zones`: no global zone found');
+    }
+  }
+
+  
+  return zone;
+})();
+
+
+
+const Zone = {
+
+  get root() { return globalZone; },
+
+  get current() { return Dexie.Promise.PSD; }
+
+};
+
+export function withZone(scopeFunc, zoneProps = {}) {
+  let returnValue;
+  try {
+    incrementExpectedAwaits();
+
+    newPSD(() => {
+      returnValue = scopeFunc.call();
+    }, zoneProps);
+    
+    return returnValue;
+  } finally {
+    if (returnValue && typeof returnValue.then === 'function') {
+      (async () => {
+        try {
+          await returnValue;
+        } catch(e) {
+        } finally {
+          decrementExpectedAwaits();
+        }
+      })();
+    } else {
+      decrementExpectedAwaits();
+    }
+  }
+}
+
+function runZoned(fn, { zoneValues } = {} ) {
+  return withZone(fn, zoneValues);
+}
+
+exposeGlobal('Zone', Zone);
+exposeGlobal('runZoned', runZoned);

src/client/pen-editor/components/abstract-ast-node.js

@@ -308,7 +308,7 @@ export default class AbstractAstNode extends Morph {
     });
     this.setAttribute('ast-node-scope', SCOPE_MAP.getOrCreate(path.scope, () => NEXT_SCOPE_ID++ % 20));
     this.setAttribute('ast-node-depth', depth);
-    this.style.setProperty("--my-border", `10px solid red`);
+    // this.style.setProperty("--my-border", `10px solid green`);
   }
 
   async setPath(path) {

src/client/pen-editor/components/ast-node-block-statement.html

@@ -8,8 +8,8 @@
   }
   #indention-container {
     display: grid;
-    border-left: solid 1px goldenrod;
-    border-right: solid 1px goldenrod;
+/*     border-left: solid 1px goldenrod; */
+/*     border-right: solid 1px goldenrod; */
   }
   #indention {
     align-self: center;

src/client/pen-editor/components/ast-node-function-declaration.html

@@ -10,8 +10,8 @@
 
 #body-container {
   width: min-content;
-  border: 1px solid goldenrod;
-  background-color: #eeeeee;
+/*   border: 1px solid goldenrod; */
+/*   background-color: #eeeeee; */
 }
   #header {
     display: flex;