fix: ES6 modules dependencies

src/dependencies.pug

@@ -1,6 +1,6 @@
 // Scripts
 //- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
-script(src="/lib/webcomponentsjs/webcomponents-loader.js")
+//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
 //- script(src="lib/html-imports.js")
 
 script(src="/lib/oidc-client.js")
@@ -15,7 +15,7 @@ script(
 )
 
 script(src="/scripts/index.js")
-script(src="/scripts/hd-widgets.js")
+script(type="module" src="/scripts/hd-widgets.js")
 
 // Stylesheets
 link(rel='stylesheet', href='/lib/normalize.css')
@@ -29,13 +29,13 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6
 // Web components
 
 //- local
-//<script type='module' src='/lib/sib-core/sib-display.js'></script>
-//<script type='module' src='/lib/sib-router/sib-router.js'></script>
-//<script type='module' src='/lib/sib-chat/sib-chat.js'></script>
-//<script type='module' src='/lib/sib-chat/sib-form.js'></script>
+//script(type="module" src="/lib/sib-core/sib-display.js")
+//script(type="module" src="/lib/sib-router/sib-router.js")
+//script(type="module" src="/lib/sib-core/sib-form.js")
+
+link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
-<script type='module' src='https://cdn.happy-dev.fr/sib-core/sib-display.js'></script>
-<script type='module' src='https://cdn.happy-dev.fr/sib-router/sib-router.js'></script>
-<script type='module' src='https://cdn.happy-dev.fr/sib-chat/sib-chat.js'></script>
-<script type='module' src='https://cdn.happy-dev.fr/sib-chat/sib-form.js'></script>
+script(type="module" src="https://cdn.happy-dev.fr/sib-core/sib-display.js")
+script(type="module" src="https://cdn.happy-dev.fr/sib-router/sib-router.js")
+script(type="module" src="https://cdn.happy-dev.fr/sib-core/sib-form.js")

src/scripts/hd-widgets.js

@@ -1,138 +1,141 @@
-document.addEventListener('WebComponentsReady', function(event) {
-  class HDAppUserInfo extends SIBDisplayLookupList {
-    get parentElement() {
-      return 'div';
-    }
-    getTemplate(value, index) {
-      var firstname, lastname, email;
+import {SIBDisplayLookupList} from 'https://cdn.happy-dev.fr/sib-core/widgets/sib-display-widgets.js';
+import {SIBWidget} from 'https://cdn.happy-dev.fr/sib-core/widgets/sib-base-widgets.js';
+import {store} from 'https://cdn.happy-dev.fr/sib-core/store.js';
 
-      if (typeof value == 'object')
-        if (Object.keys(value).length > 1) {
-          firstname = value.first_name;
-          lastname = value.last_name;
-          email = value.email;
-        } else {
-          store.get(value).then(resource => {
-            this.value.push(resource);
-            this.render();
-          });
-          if (Array.isArray(this.value))
-            this.value.splice(this.value.indexOf(value), 1);
-          else this.value = [];
-          return '';
-        }
-      return `<div>${firstname} ${lastname}</div>`;
-      // + `<div id="${email}">${email}</div>`;
-    }
+class HDAppUserInfo extends SIBDisplayLookupList {
+  get parentElement() {
+    return 'div';
   }
-  customElements.define('hdapp-userinfo', HDAppUserInfo);
+  getTemplate(value, index) {
+    var firstname, lastname, email;
 
-  class HDAppMail extends SIBWidget {
-    get template() {
-      return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
-    }
+    if (typeof value == 'object')
+      if (Object.keys(value).length > 1) {
+        firstname = value.first_name;
+        lastname = value.last_name;
+        email = value.email;
+      } else {
+        store.get(value).then(resource => {
+          this.value.push(resource);
+          this.render();
+        });
+        if (Array.isArray(this.value))
+          this.value.splice(this.value.indexOf(value), 1);
+        else this.value = [];
+        return '';
+      }
+    return `<div>${firstname} ${lastname}</div>`;
+    // + `<div id="${email}">${email}</div>`;
   }
-  customElements.define('hdapp-mail', HDAppMail);
+}
 
-  class HDAppMember extends SIBWidget {
-    get template() {
-      return `
+class HDAppMail extends SIBWidget {
+  get template() {
+    return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
+  }
+}
+
+class HDAppMember extends SIBWidget {
+  get template() {
+    return `
         <div name="${this.name}">
           <img src="${this.value.avatar}"/>
         </div>
       `;
-    }
-
-    render() {
-      store.get(this.value).then(value => {
-        this._value = value;
-        this.innerHTML = this.template;
-      });
-    }
   }
-  customElements.define('hdapp-member', HDAppMember);
 
-  class HDAppAuthor extends SIBDisplayLookupList {
-    get parentElement() {
-      return 'div';
-    }
-    getTemplate(value, index) {
-      var firstname, lastname;
-      if (typeof value == 'object')
-        if (Object.keys(value).length > 1) {
-          firstname = value.user.first_name;
-          lastname = value.user.last_name;
-        } else {
-          store.get(value).then(resource => {
-            this.value.push(resource);
-            this.render();
-          });
-          if (Array.isArray(this.value))
-            this.value.splice(this.value.indexOf(value), 1);
-          else this.value = [];
-          return '';
-        }
-      return `${firstname} ${lastname}`;
-    }
-  }
-  customElements.define('hdapp-author', HDAppAuthor);
-
-  class HDAppClosingDate extends SIBWidget {
-    get template() {
-      return this.value
-        ? `<strong>closed</strong> (${this.value})`
-        : '<strong>open</strong>';
-    }
-
-    render() {
+  render() {
+    store.get(this.value).then(value => {
+      this._value = value;
       this.innerHTML = this.template;
-    }
+    });
+  }
+}
+
+class HDAppAuthor extends SIBDisplayLookupList {
+  get parentElement() {
+    return 'div';
+  }
+  getTemplate(value, index) {
+    var firstname, lastname;
+    if (typeof value == 'object')
+      if (Object.keys(value).length > 1) {
+        firstname = value.user.first_name;
+        lastname = value.user.last_name;
+      } else {
+        store.get(value).then(resource => {
+          this.value.push(resource);
+          this.render();
+        });
+        if (Array.isArray(this.value))
+          this.value.splice(this.value.indexOf(value), 1);
+        else this.value = [];
+        return '';
+      }
+    return `${firstname} ${lastname}`;
+  }
+}
+
+class HDAppClosingDate extends SIBWidget {
+  get template() {
+    return this.value
+      ? `<strong>closed</strong> (${this.value})`
+      : '<strong>open</strong>';
   }
 
-  customElements.define('hdapp-closing-date', HDAppClosingDate);
+  render() {
+    this.innerHTML = this.template;
+  }
+}
 
-  class HDAppAvailable extends SIBWidget {
-    get template() {
-      return this.value
-        ? '<strong>Available</strong>'
-        : '<strong>Not available</strong>';
-    }
-
-    render() {
-      this.innerHTML = this.template;
-    }
+class HDAppAvailable extends SIBWidget {
+  get template() {
+    return this.value
+      ? '<strong>Available</strong>'
+      : '<strong>Not available</strong>';
   }
 
-  customElements.define('hdapp-available', HDAppAvailable);
+  render() {
+    this.innerHTML = this.template;
+  }
+}
 
-  class HDAppHyperlink extends SIBWidget {
-    get template() {
-      const escaped = this.value
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#039;');
-      return `<a href="${escaped}">${escaped}</a>`;
-    }
-
-    render() {
-      this.innerHTML = this.template;
-    }
+class HDAppHyperlink extends SIBWidget {
+  get template() {
+    const escaped = this.value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+    return `<a href="${escaped}">${escaped}</a>`;
   }
 
-  customElements.define('hdapp-hyperlink', HDAppHyperlink);
+  render() {
+    this.innerHTML = this.template;
+  }
+}
 
-  class HDAppLinkMore extends SIBWidget {
-    get template() {
-      const id = uniqID();
-      console.warn('HDAppLinkMore', this);
-      return `
+class HDAppLinkMore extends SIBWidget {
+  get template() {
+    const id = uniqID();
+    console.warn('HDAppLinkMore', this);
+    return `
       ${this.label}
       ${this.name}
       ${this.escapedValue}
       `;
-    }
   }
+}
+
+document.addEventListener('WebComponentsReady', function(event) {
+
+  customElements.define('hdapp-userinfo', HDAppUserInfo);
+  customElements.define('hdapp-mail', HDAppMail);
+  customElements.define('hdapp-member', HDAppMember);
+  customElements.define('hdapp-author', HDAppAuthor);
+  customElements.define('hdapp-closing-date', HDAppClosingDate);
+  customElements.define('hdapp-available', HDAppAvailable);
+  customElements.define('hdapp-hyperlink', HDAppHyperlink);
   customElements.define('hdapp-link-more', HDAppLinkMore);
 });