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?

asked 28.02.2020 at 07:44

TareqK's gravatar image

TareqK
(suspended)
accept rate: 25%


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

link

answered 02.03.2020 at 07:36

SupportIvyTeam's gravatar image

SupportIvyTeam ♦♦
1.4k102118122
accept rate: 77%

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's gravatar image

TareqK
(suspended)
accept rate: 25%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×58
×16
×6

Asked: 28.02.2020 at 07:44

Seen: 1,848 times

Last updated: 17.03.2020 at 03:15