Moqui 4.0 - Update Javascript Libraries in runtime

There are a bunch of javascript libraries in runtime: moqui-runtime/base-component/webroot/build.gradle at 84a234ac6f41a08105105884553feadcbf38f3d3 · moqui/moqui-runtime · GitHub we’ll need to upgrade and test them to ensure they’ll work.

This also includes any of the once off screens that use javascript from a cdn like Code search results · GitHub

This does not include vue 3 and quasar 2 changes. We will need these libraries to be backwards compatible with vue 2 and quasar 1 for the old qapps / vapps render modes. If there is a new version that REQUIRES vue 3 / quasar 2, then that should be added to the vue3quasar2 branch.

Notable things to figure out:

  • For our wysiwig html editor, we’re currently using CKEditor 4 which is end of life. I tried upgrading to 4.22.1, but it shows a red warning. The latest version 4.25.1-lts isn’t even open source anymore and is under a commercial license with a license key required!
    It’s gone completely commercial, and we’ll have to find another solution. I’d suggest: GitHub - fastmail/Squire: The rich text editor for arbitrary HTML. This update is probably worth pushing upstream ASAP. The files used are:
    • webrootvue.qvt.js line 1916
    • DefaultScreenMacros.html.ftl line 2224
    • DefaultScreenMacros.vuet.ftl line 1857
    • DefaultScreenMacros.qvt.ftl line 202
  • The calendar widget is showing it’s age. We should update fullcalendar to a later version for html and vuet, but I suggest we use the quasar calendar to replace it for qapps and qapps2.
  • The file picker widget Elfinder is also showing it’s age. I looked for a bit to find a better alternative, but couldn’t find one. We should for sure update this, but an alternative would be ideal.

If @f.karim @shahbaz or @zhangwei would like to volunteer for this, that would be great!

1 Like

The block-style editor Editor.js https://editorjs.io/ looks better, what do you think?

Excuse me people, I am only a noob, but… taking the opportunity of release 4, could we refactor the Vue/JS stack and change it by Vanilla JS? Note: I am a fan of Vue…

1 Like

In Moqui there are a bunch of different render modes that actually send different javascript to the browser (see this).

The closest we have to a vanilla js, is the html render mode used in the /apps/* url that you can see here. That uses jquery with bootstrap widgets.

You can create your own render mode to use in your application so that you have total control over what javascript gets sent to the client. An simple example of that is done here, and a full production example of that is here with the /coapp and /cointernal pattern like the /apps and /qapps pattern in moqui.

1 Like