Loading ES6 imports and Modules

Question

Hello, So i was follwoing the xample in the HTMLDialogDemos, and I tried to create an es6 module and import it. This worked, however, the imports that my module require are not being imported correctly. This is due to the fact that ES6 imports dont automatically ad the "ln=xpertivy-3-webContent" query param that its calling module got.

To be clear, i imported page.js via

<h:outputScript a:type="module" library="js/PureHtmlDialog"
    name="page.js">
</h:outputScript>

which gets the file at

http://localhost:8081/ivy/faces/javax.faces.resource/resources/js/PureHtmlDialog/page.js?ln=xpertivy-3-webContent&xv=124700577218

which attempts to import

import {Button,Column,Header} from "../component.js";

which in turn gets the URL

http://localhost:8081/ivy/faces/javax.faces.resource/resources/js/component.js

if I try to visit the URL

http://localhost:8081/ivy/faces/javax.faces.resource/resources/js/component.js?ln=xpertivy-3-webContent

then i can see the file correctly.

I also tried to, inside the folder of the HTML dialog itself, to put a javascript file and import it with a plain script tag. This didnt work, and actually crashed the page.

Is there a better way to do javascript file imports and es6 imports?

Answer 1

0	We ended up using browserify to minify multiple files and babel to transpile them into ES5. This fixed this issue, and also allowed us to use NPM libraries. link answered 17.03.2020 at 03:15 TareqK (suspended) accept rate: 25%

Answer 2

Hi

Sadly our platform is not really build to use modules. You can add this get parameter to the module import like:

import {Button,Column,Header} from "../component.js?ln=xpertivy-3-webContent";

But the problem is that this parameter is dynamic. Means the number is the Process Model Version which provides this webContent.

You could evaluate this over an other javascript function but then you have the problem that you have to load the module dynamically. And the Eclipse Javascript editor seems not to know this syntax.

function getParam() {
  var scripts = document.getElementsByTagName("script");
  for (let script of scripts) {
    let src = script.getAttribute("src");
    if(src && src.includes("ln=xpertivy-")) {
      return "?" + src.substring(src.indexOf("ln=xpertivy-"), src.indexOf("-webContent")) + "-webContent";
    }
  }
}

async function load() {
  let ext = await import("./extension.js" + getParam());
  ext.hello("test");
}

load();

Anyway you need to be aware that ES6 is not supported by every browser (e.g ie11 only supports es5).

Maybe its easier to simply import the js file the normal way...

Kind regards

Lukas

Loading ES6 imports and Modules

Follow this question

Related questions