Wrap a GWT widget in a web component

351 Views Asked by At

I am trying to use gwt with web component, I'd like to reuse some widgets by wrapping them (and use them in a microfrontend scenario but one step a time). I am using jsinterop in a dummy project but I can't use my widget in the javascript part. I use @JsType to share some classes (widgets and what they must render), here is a snippet of my simple web component:

import './gwtjs/gwtjs.nocache.js';
window.customElements.define('effort-component', class EffortComponent extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ 'mode': 'open' });
  }

  connectedCallback() {
    console.log('connected!');

    var actv1 = new edu.pezzati.gwtjs.client.provided.model.Activity;
    ...
    var model = [];
    model[0] = [actv1, actv2];
    model[1] = [eff1, eff2, eff3];

    var effortTable = edu.pezzati.gwtjs.client.provided.EffortTable();
    this._shadowRoot.appendChild(effortTable);
    effortTable.refresh(model);
  }
});

when component is connected I get:

gwtjs.component.js:11 Uncaught ReferenceError: edu is not defined
at HTMLElement.connectedCallback (gwtjs.component.js:11)
at gwtjs.component.js:2

I am using gwt 2.8.1, mojo's gwt-maven-plugin 2.8.1 with the <generateJsInteropExports>true</generateJsInteropExports> flag to use JsInterop. You can find the project here.

0

There are 0 best solutions below