feat: use system runtime v6 (ES module)

Gruntfile.js → Gruntfile.cjs

@@ -89,6 +89,7 @@ module.exports = function (grunt) {
     'json_merge:cordova-systems',
     'copy:minify-json',
     'concat:app',
+    'concat:app-runtime',
     'clean:systems',
     'copy:web-livereload',
     'connect:watch',
@@ -122,6 +123,7 @@ module.exports = function (grunt) {
     'json_merge:electron-systems',
     'copy:minify-json',
     'concat:app',
+    'concat:app-runtime-electron',
     'clean:systems'
   ]);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-designer",
-  "version": "5.2.0",
+  "version": "6.0.0-beta.2",
   "description": "System Designer, a low-code development platform for creating systems",
   "homepage": "https://designfirst.io/systemdesigner/",
   "keywords": [
@@ -27,6 +27,7 @@
   "bugs": {
     "url": "https://github.com/design-first/system-designer/issues"
   },
+  "type": "module",
   "main": "dist/index.html",
   "scripts": {
     "test": "grunt test",
@@ -44,24 +45,24 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "ace-builds": "1.5.3",
+    "ace-builds": "1.12.3",
     "bootstrap": "3.4.1",
-    "codemirror": "5.65.5",
+    "codemirror": "5.65.9",
     "github-api": "3.4.0",
-    "jquery": "3.6.0",
+    "jquery": "3.6.1",
     "jsplumb": "2.15.6",
-    "prismjs": "1.28.0",
+    "prismjs": "1.29.0",
     "svg-pan-zoom": "3.6.1",
-    "system-runtime": "5.1.0",
+    "system-runtime": "6.0.0-beta.5",
     "viz.js": "2.1.2"
   },
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "11.4.0",
     "@cypress/webpack-preprocessor": "5.12.0",
     "coffeescript": "2.7.0",
-    "cypress": "10.3.0",
-    "cypress-localstorage-commands": "2.1.0",
-    "eslint": "8.19.0",
+    "cypress": "10.11.0",
+    "cypress-localstorage-commands": "2.2.1",
+    "eslint": "8.26.0",
     "eslint-plugin-cypress": "2.12.1",
     "grunt": "1.5.3",
     "grunt-bg-shell": "2.3.3",
@@ -73,8 +74,8 @@
     "grunt-contrib-uglify": "5.2.2",
     "grunt-contrib-watch": "1.1.0",
     "grunt-json-merge": "0.2.2",
-    "husky": "7.0.4",
-    "lint-staged": "12.4.2",
+    "husky": "8.0.1",
+    "lint-staged": "13.0.3",
     "load-grunt-tasks": "5.1.0",
     "prettier": "2.7.1"
   }

src/merges/cordova/app/index.html

@@ -62,10 +62,8 @@
   <!-- cordova -->
   <script type="text/javascript" src="../cordova.js"></script>
   <script type="text/javascript" src="../scripts/mobile.js"></script>
-  <!-- system runtime -->
-  <script type="text/javascript" level="warn" src="../lib/system-runtime/system-runtime.min.js"></script>
   <!-- designer runtime -->
-  <script type="text/javascript" src="../scripts/designer-runtime.js"></script>
+  <script type="module" src="../scripts/designer-runtime.js"></script>
 </body>
 
 </html>

src/merges/cordova/behavior.html

@@ -56,7 +56,7 @@
   <!-- lib -->
   <script src="lib/editor/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-behavior.js"></script>
+  <script type="module" src="scripts/editor-behavior.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/cordova/cache.js

@@ -32,7 +32,7 @@ self.addEventListener('install', e => {
         'lib/designer/vendor.js',
         'lib/editor/vendor.js',
         'lib/prism/prism.css',
-        'lib/system-runtime/system-runtime.min.js',
+        'lib/system-runtime/system-runtime.js',
         'scripts/designer-runtime.js',
         'scripts/diagram.js',
         'scripts/editor-behavior.js',

src/merges/cordova/component.html

@@ -56,7 +56,7 @@
   <!-- lib -->
   <script src="lib/editor/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-component.js"></script>
+  <script type="module" src="scripts/editor-component.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/cordova/index.html

@@ -74,7 +74,7 @@
   <!-- lib -->
   <script src="lib/designer/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/system-designer.js"></script>
+  <script type="module" src="scripts/system-designer.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/cordova/model.html

@@ -56,7 +56,7 @@
   <!-- lib -->
   <script src="lib/editor/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-model.js"></script>
+  <script type="module" src="scripts/editor-model.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/cordova/schema.html

@@ -56,7 +56,7 @@
   <!-- lib -->
   <script src="lib/editor/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-schema.js"></script>
+  <script type="module" src="scripts/editor-schema.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/cordova/system.html

@@ -56,7 +56,7 @@
   <!-- lib -->
   <script src="lib/editor/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-system.js"></script>
+  <script type="module" src="scripts/editor-system.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/cordova/type.html

@@ -56,7 +56,7 @@
   <!-- lib -->
   <script src="lib/editor/vendor.js"></script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-type.js"></script>
+  <script type="module" src="scripts/editor-type.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>
 </body>

src/merges/electron/app/index.html

@@ -58,10 +58,8 @@
       color: #7f949d;
     }
   </style>
-  <!-- system runtime -->
-  <script type="text/javascript" level="warn" src="../lib/system-runtime/system-runtime.min.js"></script>
   <!-- designer runtime -->
-  <script type="text/javascript" src="../scripts/designer-runtime.js"></script>
+  <script type="module" src="../scripts/designer-runtime.js"></script>
 </body>
 
 </html>

src/merges/electron/behavior.html

@@ -52,7 +52,7 @@
   <script src="lib/editor/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-behavior.js"></script>
+  <script type="module" src="scripts/editor-behavior.js"></script>
 </body>
 
 </html>

src/merges/electron/component.html

@@ -52,7 +52,7 @@
   <script src="lib/editor/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-component.js"></script>
+  <script type="module" src="scripts/editor-component.js"></script>
 </body>
 
 </html>

src/merges/electron/diagram.html

@@ -49,7 +49,7 @@
   <script src="lib/diagram/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/diagram.js"></script>
+  <script type="module" src="scripts/diagram.js"></script>
 </body>
 
 </html>

src/merges/electron/index.html

@@ -70,7 +70,7 @@
 	<script src="lib/designer/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/system-designer.js"></script>
+  <script type="module" src="scripts/system-designer.js"></script>
 </body>
 
 </html>

src/merges/electron/model.html

@@ -52,7 +52,7 @@
   <script src="lib/editor/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-model.js"></script>
+  <script type="module" src="scripts/editor-model.js"></script>
 </body>
 
 </html>

src/merges/electron/schema.html

@@ -52,7 +52,7 @@
   <script src="lib/editor/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-schema.js"></script>
+  <script type="module" src="scripts/editor-schema.js"></script>
 </body>
 
 </html>

src/merges/electron/system.html

@@ -51,7 +51,7 @@
   <script src="lib/editor/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-system.js"></script>
+  <script type="module" src="scripts/editor-system.js"></script>
 </body>
 
 </html>

src/merges/electron/type.html

@@ -52,7 +52,7 @@
   <script src="lib/editor/vendor.js"></script>
   <script>if (window.module) module = window.module;</script>
   <!-- designer -->
-  <script type="text/javascript" src="scripts/editor-type.js"></script>
+  <script type="module" src="scripts/editor-type.js"></script>
 </body>
 
 </html>

src/merges/web/app/index.html

@@ -62,7 +62,12 @@
     }
   </style>
   <!-- system runtime -->
-  <script type="text/javascript" level="warn" src="../lib/system-runtime/system-runtime.min.js"></script>
+  <script type="module">
+    import runtime from '../lib/system-runtime/system-runtime.js'
+    runtime.require('logger').level('warn')
+
+    window.runtime = runtime
+  </script>
 </body>
 
 </html>

src/merges/web/behavior.html

@@ -51,6 +51,10 @@
   <script type="text/javascript" charset="utf-8" src="lib/ace/ace.js"></script>
   <script type="text/javascript" charset="utf-8" src="lib/ace/ext-language_tools.js"></script>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/editor/vendor.js"></script>
 </body>
 

src/merges/web/cache.js

@@ -58,7 +58,7 @@ self.addEventListener('install', e => {
         'lib/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
         'lib/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2',
         'lib/prism/prism.css',
-        'lib/system-runtime/system-runtime.min.js',
+        'lib/system-runtime/system-runtime.js',
         'lib/designer/vendor.js',
         'lib/editor/vendor.js',
         'lib/diagram/vendor.js',

src/merges/web/component.html

@@ -52,6 +52,10 @@
   <script type="text/javascript" charset="utf-8" src="lib/ace/ace.js"></script>
   <script type="text/javascript" charset="utf-8" src="lib/ace/ext-language_tools.js"></script>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/editor/vendor.js"></script>
 </body>
 

src/merges/web/diagram.html

@@ -48,6 +48,10 @@
     <div id="designer-diagram"></div>
   </div>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/diagram/vendor.js"></script>
 </body>
 

src/merges/web/index.html

@@ -71,6 +71,10 @@
     </div>
   </div>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/designer/vendor.js"></script>
 
   <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("./cache.js");</script>

src/merges/web/model.html

@@ -51,6 +51,10 @@
   <script type="text/javascript" charset="utf-8" src="lib/ace/ace.js"></script>
   <script type="text/javascript" charset="utf-8" src="lib/ace/ext-language_tools.js"></script>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/editor/vendor.js"></script>
 </body>
 

src/merges/web/schema.html

@@ -51,6 +51,10 @@
   <script type="text/javascript" charset="utf-8" src="lib/ace/ace.js"></script>
   <script type="text/javascript" charset="utf-8" src="lib/ace/ext-language_tools.js"></script>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/editor/vendor.js"></script>
 </body>
 

src/merges/web/system.html

@@ -50,6 +50,10 @@
   <!-- ace -->
   <script type="text/javascript" charset="utf-8" src="lib/ace/ace.js"></script>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/editor/vendor.js"></script>
 </body>
 

src/merges/web/type.html

@@ -51,6 +51,10 @@
   <script type="text/javascript" charset="utf-8" src="lib/ace/ace.js"></script>
   <script type="text/javascript" charset="utf-8" src="lib/ace/ext-language_tools.js"></script>
   <!-- lib -->
+  <script type="module">
+    import runtime from './lib/system-runtime/system-runtime.js'
+    window.runtime = runtime
+  </script>
   <script src="lib/editor/vendor.js"></script>
 </body>
 

src/systems/classes/HTML-class.json

@@ -186,11 +186,11 @@
       },
       "export-app-github.html": {
         "_id": "export-app-github.html",
-        "source": "<!DOCTYPE html>\n<html>\n\n<head>\n  <title>{{name}}</title>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- system -->\n  <link rel=\"system\" type=\"application/json\" href=\"{{name}}.json\">\n</head>\n\n<body>\n  <!-- system runtime  -->\n  <script log=\"{{logLevel}}\" src=\"https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.min.js\"></script>\n</body>\n\n</html>"
+        "source": "<!DOCTYPE html>\n<html>\n\n<head>\n  <title>{{name}}</title>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <!-- system -->\n  <link rel=\"system\" type=\"application/json\" href=\"{{name}}.json\">\n</head>\n\n<body>\n  <!-- system runtime  -->\n  <script log=\"{{logLevel}}\" src=\"https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.js\"></script>\n</body>\n\n</html>"
       },
       "export-app.html": {
         "_id": "export-app.html",
-        "source": "<!DOCTYPE html>\n<html>\n\n<head>\n    <title>{{name}}</title>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n</head>\n\n<body>\n  <!-- system runtime  -->\n  <script log=\"{{logLevel}}\" src=\"https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.min.js\"></script>\n  <!-- system -->\n  <script>\n    runtime.on('ready', function ready() {\n        // install and start the system\n        this.install({{system}});\n    }, false, true);\n  </script>\n</body>\n\n</html>"
+        "source": "<!DOCTYPE html>\n<html>\n\n<head>\n    <title>{{name}}</title>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n</head>\n\n<body>\n  <!-- system runtime  -->\n  <script log=\"{{logLevel}}\" src=\"https://cdn.jsdelivr.net/npm/system-runtime/dist/system-runtime.js\"></script>\n  <!-- system -->\n  <script>\n    runtime.on('ready', function ready() {\n        // install and start the system\n        this.install({{system}});\n    }, false, true);\n  </script>\n</body>\n\n</html>"
       },
       "help-behaviors.html": {
         "_id": "help-behaviors.html",

src/systems/core/designer-runtime.json

@@ -264,7 +264,7 @@
       "_id": "f1c9d810bdf16d0f",
       "component": "16d0e138c8170b2",
       "state": "start",
-      "action": "function start() {\n  var bundle = '';\n  var id = '';\n  var system = '';\n  var logger = this.require('logger');\n  var helper = this.require('runtimeHelper');\n  var storeConfig = this.require('storage').get('system-designer-config');\n\n  // check platform\n  helper.checkElectron();\n  helper.checkCordova();\n  \n  // get the bundle\n  bundle = helper.getBundle();\n  \n  logger.level('debug');\n\n  // import the bundle\n  logger.debug('analyzing ' + bundle.name +' system...');\n  id = $db.importSystem(bundle);\n\n  // update title\n  document.title = bundle.name;\n\n  // start the bundle\n  system = this.require(id);\n\n  if (system && system.start) {\n    setTimeout(function() { \n      logger.debug('starting ' + bundle.name + ' system...');\n      system.start();\n    }, 100);\n  } else {\n    logger.debug('starting ' + bundle.name + ' system...');\n  }\n  \n  setTimeout(function() {\n    let domDebug = document.querySelectorAll('[src*=livereload]').length;\n    let domNb = 3 + domDebug;\n    \n    if (typeof cordova !== 'undefined') { domNb = 7 + domDebug } //\n    if (navigator.userAgent.toLowerCase().indexOf('electron') !== -1) { domNb = 4 }\n    \n    if (document.body.children.length === domNb) {\n      var message = document.getElementById('message');\n      if (message) message.style.display = 'flex'; \n    }}, 100);\n}",
+      "action": "function start() {\n  var bundle = '';\n  var id = '';\n  var system = '';\n  var logger = this.require('logger');\n  var helper = this.require('runtimeHelper');\n  var storeConfig = this.require('storage').get('system-designer-config');\n\n  // check platform\n  helper.checkElectron();\n  helper.checkCordova();\n  \n  // get the bundle\n  bundle = helper.getBundle();\n  \n  logger.level('debug');\n\n  // import the bundle\n  logger.debug('analyzing ' + bundle.name +' system...');\n  id = $db.importSystem(bundle);\n\n  // update title\n  document.title = bundle.name;\n\n  // start the bundle\n  system = this.require(id);\n\n  if (system && system.start) {\n    setTimeout(function() { \n      logger.debug('starting ' + bundle.name + ' system...');\n      system.start();\n    }, 100);\n  } else {\n    logger.debug('starting ' + bundle.name + ' system...');\n  }\n  \n  setTimeout(function() {\n    let domDebug = document.querySelectorAll('[src*=livereload]').length;\n    let domNb = 3 + domDebug;\n    \n    if (typeof cordova !== 'undefined') { domNb = 6 + domDebug } //\n    if (navigator.userAgent.toLowerCase().indexOf('electron') !== -1) { domNb = 3 }\n    \n    if (document.body.children.length === domNb) {\n      var message = document.getElementById('message');\n      if (message) message.style.display = 'flex'; \n    }}, 100);\n}",
       "useCoreAPI": true,
       "core": true
     },
@@ -296,7 +296,7 @@
       "_id": "b1e5041617417d5d",
       "component": "_RuntimeHelper",
       "state": "getBundle",
-      "action": "function getBundle() { \n  var storage = this.require('storage');\n  var sysId = '';\n  var bundle = '';\n  \n  sysId = document.location.href.split('#')[1].split('?')[0].split('/')[0];\n  bundle = storage.get(sysId);\n\n  // listen to messages from System Designer\n  storage.on('changed', function (obj) {\n    if (typeof obj['system-designer-message'] !== 'undefined') {\n      $db._Message.insert(obj['system-designer-message'].newValue);\n    }\n  }, true, true);\n  \n  return bundle;\n}",
+      "action": "function getBundle() { \n  var storage = this.require('storage');\n  var sysId = '';\n  var bundle = '';\n  \n  sysId = document.location.href.split('#')[1].split('?')[0].split('/')[0];\n  bundle = storage.get(sysId);\n\n  // listen to messages from System Designer\n  storage.on('changed', function (obj) {\n    if (typeof obj['system-designer-message'] !== 'undefined') {\n      $db.collections._Message.insert(obj['system-designer-message'].newValue);\n    }\n  }, true, true);\n  \n  return bundle;\n}",
       "useCoreAPI": true,
       "core": true
     }