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

… into gh-pages

.github/workflows/ci.yml

@@ -2,6 +2,7 @@ name: CI
 
 on: [push, pull_request]
 
+
 jobs:
   build:
     runs-on: ubuntu-22.04

README.md

@@ -1,6 +1,6 @@
 # An Explorative, Self-supporting, Web-based Development Environment
 
-[![Build Status Github](https://github.com/LivelyKernel/lively4-core/workflows/CI/badge.svg)](https://github.com/LivelyKernel/lively4-core/actions?query=workflow%3ACI)
+[![Build Status Github](https://github.com/LivelyKernel/lively4-core/actions/workflows/ci.yml/badge.svg)](https://github.com/LivelyKernel/lively4-core/actions?query=workflow%3ACI)
 
 ## Getting Started
 

demos/tree-sitter/edit-history.md

@@ -0,0 +1,53 @@
+# Edit History
+
+<script>
+  import {visit, Parser, JavaScript, match} from 'src/client/tree-sitter.js';
+  import { ChawatheScriptGenerator} from 'src/client/domain-code/chawathe-script-generator.js';
+
+
+  let editor1 = await (<lively-code-mirror style="display:inline-block; width: 400px; height: 200px; border: 1px solid gray"></lively-code-mirror>)
+  let editor2 = await (<lively-code-mirror style="display:inline-block; width: 400px; height: 200px; border: 1px solid gray"></lively-code-mirror>)
+
+
+  var parser = new Parser();
+  parser.setLanguage(JavaScript);
+  var list = <ul></ul>
+
+  // editor1.value =  `let a = 3 + 4`   
+  editor1.value =  `var a = 3`   
+  // editor2.value = `let a = 3 + 4\na++`      
+  editor2.value = `{var a = 3}`      
+
+  editor1.editor.on("change", (() => update()).debounce(500));
+  editor2.editor.on("change", (() => update()).debounce(500));
+
+
+  function update() {
+      let tree1 = parser.parse(editor1.value);
+      let tree2 = parser.parse(editor2.value );
+      let mappings = match(tree1.rootNode, tree2.rootNode, 0, 100)
+      var scriptGenerator = new ChawatheScriptGenerator()
+      scriptGenerator.initWith(tree1.rootNode, tree2.rootNode, mappings) 
+
+      scriptGenerator.generate()
+
+      list.innerHTML = ""
+
+      for(let action of scriptGenerator.actions) {
+        list.appendChild(<li>{action.type} {action.node && action.node.type} 
+            <button style="font-size:6pt" click={() => lively.openInspector(action)}>inspect</button>
+          </li>)
+      }
+
+  }
+
+  update()
+
+  let pane = <div>
+    {editor1}{editor2}
+    {list}
+  </div>
+
+
+  pane
+</script>

demos/tree-sitter/matches.md

@@ -0,0 +1,42 @@
+# Matches
+
+<script>
+
+  import {visit, Parser, JavaScript, match} from 'src/client/tree-sitter.js';
+
+  let editor1 = await (<lively-code-mirror style="display:inline-block; width: 400px; height: 200px; border: 1px solid gray"></lively-code-mirror>)
+  let editor2 = await (<lively-code-mirror style="display:inline-block; width: 400px; height: 200px; border: 1px solid gray"></lively-code-mirror>)
+
+
+  var parser = new Parser();
+  parser.setLanguage(JavaScript);
+  var vis = await (<treesitter-matches></treesitter-matches>)
+
+  // editor1.value =  `let a = 3 + 4`   
+  editor1.value =  `let a = 3`   
+  // editor2.value = `let a = 3 + 4\na++`      
+  editor2.value = `{let a = 2+4}`      
+
+  editor1.editor.on("change", (() => update()).debounce(500));
+  editor2.editor.on("change", (() => update()).debounce(500));
+
+  function update() {
+    vis.tree2 = parser.parse(editor2.value );
+    vis.tree1 = parser.parse(editor1.value);
+    vis.matches = match(vis.tree1.rootNode, vis.tree2.rootNode, 0, 100)
+
+    // lively.openInspector(vis.matches)
+
+    vis.update()
+  }
+
+  update()
+
+  let pane = <div>
+    {editor1}{editor2}
+    {vis}
+  </div>
+
+
+  pane
+</script>

demos/zhangShashaMapping.md

@@ -0,0 +1,124 @@
+# ZhangShasha Mapping
+
+<script>
+
+  import { visit, Parser, JavaScript, addMapping} from 'src/client/tree-sitter.js';
+  import { mapping as zhangShashaMapping } from "src/external/tree-edit-distance/zhang-shasha.js"
+  import { qGramsDifference } from "utils"
+
+  let editor1 = await (<lively-code-mirror style="display:inline-block; width: 400px; height: 200px; border: 1px solid gray"></lively-code-mirror>)
+  let editor2 = await (<lively-code-mirror style="display:inline-block; width: 400px; height: 200px; border: 1px solid gray"></lively-code-mirror>)
+
+
+  var parser = new Parser();
+  parser.setLanguage(JavaScript);
+  var vis = await (<treesitter-matches></treesitter-matches>)
+
+  // editor1.value =  `let a = 3 + 4`   
+  editor1.value =  `let a = 3`   
+  // editor2.value = `let a = 3 + 4\na++`      
+  editor2.value = `let a = 3 + 4}`      
+
+  editor1.editor.on("change", (() => update()).debounce(500));
+  editor2.editor.on("change", (() => update()).debounce(500));
+
+  let treedistMatrix  = []
+  let operationsMatrix = []
+  let table = <table></table>
+  let operationsList = <div></div>
+
+
+  function update() {
+    vis.tree2 = parser.parse(editor2.value );
+    vis.tree1 = parser.parse(editor1.value);
+
+
+    function label(node) {
+
+      if (node.children &&  node.children.length === 0) {
+        return node.text
+      }
+      return node.type
+    }
+
+    function updateVis(vis, zsMappings) {
+      var mappings = []
+
+      for (let candidate of zsMappings) {
+          if (candidate.t1 && candidate.t2) {
+            mappings.push({ node1: candidate.t1, node2: candidate.t2, type: candidate.type })
+          }
+      }
+      vis.matches = mappings
+      vis.update()
+    }
+
+
+
+    let zsMappings = zhangShashaMapping(vis.tree1.rootNode, vis.tree2.rootNode,
+      function children(node) { return node.children },
+      function insertCost() { return 1 },
+      function removeCost() { return 1 },
+      function updateCost(from, to) {
+
+
+        if (from.type === to.type) {
+          var cost = qGramsDifference(label(from), label(to), 2)
+          if (isNaN(cost)) {
+            throw new Error("qGramsDifference went wrong" )
+          }
+          return cost
+        } else {
+          return 1
+        }
+      }, function debugInfo(operations, treedist, LR_keyroots1, LR_keyroots2) {
+        debugger
+        operationsMatrix = operations
+        treedistMatrix =  treedist
+      });
+
+
+    updateVis(vis, zsMappings)
+
+    // lively.openInspector(vis.matches)
+
+    table.textContent = ""
+
+
+
+    for(let i in treedistMatrix) {
+      let row = treedistMatrix[i]
+      let tr = <tr></tr>
+
+      for(let j in row) {
+        let ea = row[j]
+        let operations = operationsMatrix[i][j]
+        tr.appendChild(<td click={ () => {
+          operationsList.textContent = ""
+          operations.forEach(ea => operationsList.appendChild(<span style="padding:2px" click={evt => {
+            lively.openInspector(operations)
+          }}>{ea.type}</span>))
+
+          updateVis(vis, operations)
+        }}>{ea}</td>)
+      }
+      table.appendChild(tr)
+    }
+
+  }
+
+
+
+
+  update()
+
+  let pane = <div>
+    {editor1}{editor2}
+    {operationsList}
+    {table}
+    {vis}
+  </div>
+
+
+  pane
+</script>