update: final update for production

Makefile

-HTTPSERVE	   	?= ./node_modules/.bin/http-server
-HTTPSERVE_PORT  ?= 8001
-
-.PHONY: help
-help:
-	@echo "Please use \`make <target>' where <target> is one of the following:"
-	@echo ""
-	@echo " clean         Remove all NPM packages"
-	@echo " dev           Set up the development environment. To force a fresh start, run 'make clean' first."
-	@echo " serve         Serve this directory via a webserver on port $(HTTPSERVE_PORT). To change the port, use the HTTPSERVE_PORT env variable"
-
-stamp-npm: package.json package-lock.json
-	npm install -ddd --verbose
-	touch stamp-npm
-
-.PHONY: clean
-clean:
-	-rm -rf node_modules
-
-.PHONY: build
-build: stamp-npm
-	npm link converse.js
-	cd node_modules/converse.js && make dist
-	cp node_modules/converse.js/dist/converse.min.js 3rdparty
-	cp node_modules/converse.js/css/converse.min.css 3rdparty
-	cp node_modules/converse.js/css/fonts.js 3rdparty
-
-.PHONY: serve
-serve: stamp-npm
-	$(HTTPSERVE) -p $(HTTPSERVE_PORT) -c-1

README.md

-# Chatty - XMPP Chat Web Component
+# Sib Chat
 
-Chatty is an [XMPP](https://xmpp.org/) client based on [Web Component](webcomponents.org) and the [ConverseJS](https://github.com/jcbrand/converse.js) library. 
+Sib Chat is an [XMPP](https://xmpp.org/) client based on [Web Component](webcomponents.org) and the [ConverseJS](https://github.com/jcbrand/converse.js) library. 
 
-The goal of Chatty, and its family of web components, is to allow you to deploy a chat on your application by adding a single `<hd-chatty>` tag to your HTML, let alone the configuration of the XMPP server. 
-
-
-## Installation (for developers)
-To install Chatty for local development, `cd` into the directory where you want to install it and issue the following command :
-
-	git clone https://git.happy-dev.fr/happy-dev/xmpp-chat-component
-
-    make dev
-    make serve
-
-    # open http://localhost:8001 in your browser
-
-To work with a checkout of converse.js:
-
-    # Somewhere outside of this repo:
-    git clone git@github.com:jcbrand/converse.js.git
-    cd converse.js
-    npm link
-    
-    # then cd into this repo
-    npm link converse.js
-
-## Getting the OIDC token
-
-You need to log in here first:
-http://test-paris.happy-dev.fr/admin/login/?next=/admin/
+The goal of Sib Chat, and its family of web components, is to allow you to deploy a chat on your application by adding a single `<sib-chat>` tag to your HTML, let alone the configuration of the XMPP server. 
\ No newline at end of file

converse-embed.css

-.modal-backdrop {
-  z-index: 1030;
-}
-.converse-embedded .chat-head,
-.converse-embedded .occupants,
-.converse-embedded .toggle-occupants {
-  display: none !important;
-}
-.converse-embedded .chatbox .box-flyout .chat-body {
-  height: 100% !important;
-}
-
-.converse-embedded .chat-area {
-  flex: 0 0 100% !important;
-  max-width: 100% !important;
-}

credentials.php

-<?php 
-$subdomain = array_shift((explode('.', getenv('HTTP_HOST'))));
-$domain    = substr(getenv('HTTP_HOST'), strlen($subdomain));
-
-header('Content-Type: application/json');
-
-echo json_encode([
-  'jid'       => $subdomain .'@chat'. $domain,
-  'password'  => 'happydev',
-]);

index.html

@@ -4,15 +4,7 @@
     <meta charset="UTF-8" />
     <script type="module" src="https://unpkg.com/@startinblox/oidc@0.7" ></script>
     <script type="module" src="sib-chat.js"></script>
-    <title>XMPP chat</title>
-
-    <!--
-    <script type="text/javascript">
-        setInterval(() => {
-            document.querySelector('body').appendChild(document.querySelector('.converse-container').cloneNode(true));
-        }, 5000);
-    </script>
-    -->
+    <title>SIB Chat</title>
 
     <style>
       body {

sib-chat.js

 import 'https://unpkg.com/converse.js@5.0/dist/converse.min.js';
-import {
-  SIBTemplateElement,
-  store,
-  Helpers
-} from 'https://unpkg.com/@startinblox/core@0.8';
+import 'https://unpkg.com/converse.js@5.0/dist/emojis.js';
+import { Helpers, store } from 'https://unpkg.com/@startinblox/core@0.8';
+import { Sib } from "https://unpkg.com/@startinblox/core@0.8/dist/libs/Sib.js";
+import { StoreMixin } from 'https://unpkg.com/@startinblox/core@0.8/dist/mixins/storeMixin.js';
 
-Helpers.importCSS('https://unpkg.com/converse.js@4.2/css/fonts.css')
+Helpers.importCSS('https://unpkg.com/converse.js@4.2/css/fonts.css');
 
 class Deferred {
   constructor() {
@@ -18,68 +17,77 @@ class Deferred {
   }
 }
 
-class SIBChat extends SIBTemplateElement {
-
-  constructor() {
-    super()
-    this.attachShadow({
-      mode: "open"
-    });
-    this.shadowRoot.append(...Helpers.importCSS(
-      'https://unpkg.com/@startinblox/component-chat/dist/converse.css',
-      'https://unpkg.com/@startinblox/component-chat/converse-embed.css',
-    ));
-    if (window.converse_sib === undefined) {
-      this.initializeConverse()
-    }
-    window.addEventListener('navigate',
-      async (event) => {
-        if (event.detail.resource.id == this.props.dataSrc) {
-          if (this.props.dataSrc) await store.get(this.props.dataSrc).then(async (resource) => {
-            if (resource.jabberRoom) {
-              this.jid = resource['foaf:jabberID']
-            } else {
-              this.jid = (await store.get(resource.chatProfile['@id']))['foaf:jabberID']
-            }
-            await converse_sib.connected_deferred
-            converse_sib.service.plugins.sibChat.changeChat(
-              this.jid,
-              resource.jabberRoom,
-              this.shadowRoot,
-            );
-            // For weird raisons event have id and no @id
-            event.detail.resource['@id'] = event.detail.resource.id
-            window.dispatchEvent(new CustomEvent('read', {
-              detail: {
-                resource: event.detail.resource
-              }
-            }));
-          })
-        }
+export const SibChat = {
+  name: 'sib-chat',
+  use: [ StoreMixin ],
+  attributes: {
+    authentication: {
+      type: String,
+      default: 'login',
+    },
+    autoLogin: {
+      type: Boolean,
+      default: true,
+    },
+    localesUrl: {
+      type: String,
+      default: 'en',
+    },
+    boshServiceUrl: {
+      type: String
+    },
+  },
+
+  async created() {
+    const check_identified = await document.querySelector('sib-auth').getUserIdToken();
+    if(check_identified) {
+      this.element.attachShadow({
+        mode: "open"
+      });
+      this.element.shadowRoot.append(...Helpers.importCSS(
+        'https://unpkg.com/@startinblox/component-chat/themes/converse-hd-extended.css',
+        'https://unpkg.com/@startinblox/component-chat/themes/converse-hd.css'
+      ));
+      if (window.converse_sib === undefined) {
+        this.initializeConverse();
       }
-    );
-
-  }
-
-  static get propsDefinition() {
-    return {
-      debug: 'debug',
-      authentication: 'authentication',
-      autoLogin: 'auto-login',
-      boshServiceUrl: 'bosh-service-url',
-      localesUrl: 'locales-url',
-      dataSrc: 'data-src'
-    }
-  }
+    } // Else, not logged in on page load (even if not on chat)
+  },
+
+  empty() {
+    this.element.innerHTML = '';
+  },
+
+  async populate() {
+    if(typeof converse_sib !== 'undefined') {
+      await converse_sib.loaded_deferred;
+      if (this.resource.jabberRoom) {
+        this.jid = this.resource['foaf:jabberID'];
+      } else {
+        this.jid = (await store.get(this.resource.chatProfile['@id']))['foaf:jabberID'];
+      }
+      await converse_sib.connected_deferred
+      converse_sib.service.plugins.sibChat.changeChat(
+        this.jid,
+        this.resource.jabberRoom,
+        this.element.shadowRoot,
+      );
+      window.dispatchEvent(new CustomEvent('read', {
+        detail: {
+          resource: this.resource
+        }
+      }));
+    } // Else, not logged in, on chat change
+  },
 
   async initializeConverse() {
-    window.converse_sib = {}
+    window.converse_sib = {};
 
     // Deferred resolved at the end of this function
-    converse_sib.loaded_deferred = new Deferred()
+    converse_sib.loaded_deferred = new Deferred();
 
     // Deferred resolved after converse.initialize
-    converse_sib.connected_deferred = new Deferred()
+    converse_sib.connected_deferred = new Deferred();
 
     // Registering window.converse_sib.service
     converse_sib.service = {
@@ -89,11 +97,11 @@ class SIBChat extends SIBTemplateElement {
       },
       'waitUntilConnected': converse_sib.connected_deferred.promise,
       'plugins': {}
-    }
+    };
 
     // Alias for sib-chat use # want to un-expose converse from window later
     // window.converse_sib.service.api === window.converse
-    converse_sib.service.api = converse
+    converse_sib.service.api = converse;
 
     // Change chat plugin
     converse_sib.service.plugins.sibChat = new(class {
@@ -112,10 +120,10 @@ class SIBChat extends SIBTemplateElement {
           root.appendChild(converse_el);
         }
         if (is_groupchat) {
-          this._converse.auto_join_rooms.push(jid)
+          this._converse.auto_join_rooms.push(jid);
           this._converse.api.rooms.open(jid);
         } else {
-          this._converse.auto_join_private_chats.push(jid)
+          this._converse.auto_join_private_chats.push(jid);
           this._converse.api.chats.open(jid);
         }
       }
@@ -126,55 +134,49 @@ class SIBChat extends SIBTemplateElement {
     // Initialize deferred resolution plugin
     converse.plugins.add('conversejs-sib', {
       initialize() {
-        this._converse.api.listen.on('connected', converse_sib.connected_deferred.resolve)
+        this._converse.api.listen.on('connected', converse_sib.connected_deferred.resolve);
       }
     })
 
     let user = await document.querySelector('sib-auth').getUser();
     user = await store.get(user);
 
-    const jabberID =
-      user.chatProfile['foaf:jabberID'] ||
-      (await store.get(user.chatProfile['@id']))['foaf:jabberID'];
+    const jabberID = (await store.get(user.chatProfile['@id']))['foaf:jabberID'];
 
-    if(this.props.dataSrc) await store.get(this.props.dataSrc).then(async (resource) => {
-      if (resource.jabberRoom) {
-        this.jid = resource['foaf:jabberID']
-      } else {
-        this.jid = (await store.get(resource.chatProfile['@id']))['foaf:jabberID']
-      }
-    })
-    else this.jid = jabberID
+    if (this.resource.jabberRoom) {
+      this.jid = this.resource['foaf:jabberID'];
+    } else {
+      this.jid = (await store.get(this.resource.chatProfile['@id']))['foaf:jabberID'];
+    }
 
     const idToken = await document.querySelector('sib-auth').getUserIdToken();
 
     converse.initialize({
-      'authentication': this.props.authentication,
+      'authentication': this.element.dataset.authentication,
       'password': idToken,
       'allow_chat_pending_contacts': true,
       'allow_dragresize': false,
       'allow_logout': false,
       'archived_messages_page_size': 30,
       'auto_list_rooms': true,
-      'auto_login': this.props.autoLogin === 'true',
+      'auto_login': this.element.dataset.autoLogin === 'true',
       'auto_reconnect': true,
       'auto_register_muc_nickname': true,
       // Quick fix : auto join yourself & target of current route
       'auto_join_private_chats': [this.jid],
       'auto_join_rooms': [this.jid],
-      'bosh_service_url': this.props.boshServiceUrl,
+      'bosh_service_url': this.element.dataset.boshServiceUrl,
       'clear_messages_on_reconnection': true,
-      'debug': this.props.debug === 'true',
       'i18n': 'en',
       'jid': jabberID,
-      'locales_url': this.props.localesUrl,
+      'locales_url': this.element.dataset.localesUrl,
       'message_archiving': 'never',
       'muc_disable_slash_commands': true,
       'muc_nickname_from_jid': true,
       'muc_show_join_leave': false,
       'muc_show_join_leave_status': false,
       'play_sounds': false,
-      'root': this.shadowRoot,
+      'root': this.element.shadowRoot,
       'show_client_info': false,
       'show_desktop_notifications': false,
       // 'use_system_emojis': false,
@@ -192,9 +194,8 @@ class SIBChat extends SIBTemplateElement {
       'whitelisted_plugins': ['conversejs-sib', 'conversejs-changechat'],
     });
 
-    converse_sib.loaded_deferred.resolve()
+    converse_sib.loaded_deferred.resolve();
   }
-}
+};
 
-customElements.define('sib-chat', SIBChat);
-export default SIBChat;
\ No newline at end of file
+Sib.register(SibChat);
\ No newline at end of file

themes/converse-hd.css

+.modal-backdrop {
+    z-index: 1030;
+  }
+  .converse-embedded .chat-head,
+  .converse-embedded .occupants,
+  .converse-embedded .toggle-occupants {
+    display: none !important;
+  }
+  .converse-embedded .chatbox .box-flyout .chat-body {
+    height: 100% !important;
+  }
+  
+  .converse-embedded .chat-area {
+    flex: 0 0 100% !important;
+    max-width: 100% !important;
+  }
+  
\ No newline at end of file