diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/HelloWorld.js
--- a/src/widgets/HelloWorld.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/HelloWorld.js	Wed Sep 04 17:32:50 2024 +0200
@@ -4,30 +4,37 @@
  * - Use of internationalization
  */
 
-IriSP.Widgets.HelloWorld = function(player, config) {
-    console.log("Calling IriSP.Widget's constructor from IriSP.HelloWorldWidget");
-    IriSP.Widgets.Widget.call(this, player, config);
-};
-
-IriSP.Widgets.HelloWorld.prototype = new IriSP.Widgets.Widget();
+import helloWorldStyles from "./HelloWorld.module.css";
 
-IriSP.Widgets.HelloWorld.prototype.defaults = {
-    text: "world"
-};
+const HelloWorld = function (ns) {
+   return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player,config);
+      console.log(
+        "Calling IriSP.Widget's constructor from IriSP.HelloWorldWidget"
+      );
+    }
 
-IriSP.Widgets.HelloWorld.prototype.template =
-    '<div class="Ldt-HelloWorld"><p>{{l10n.Hello}} {{text}}</p><p>Looks like we have {{source.contents.annotation.length}} annotations in this feed</p></div>';
+    static defaults = {
+      text: "world",
+    };
+
+    static template = `<div class="Ldt-HelloWorld"><p>{{l10n.Hello}} {{text}}</p><p>Looks like we have <span class="Ldt-HelloWorld-annotations">{{source.contents.annotation.length}} annotations</span> in this feed</p></div>`;
 
-IriSP.Widgets.HelloWorld.prototype.messages = {
-    "fr": {
-        "Hello" : "Bonjour,"
-    },
-    "en" : {
-        "Hello" : "Hello,"
-    }
-};
+    static messages =  {
+      fr: {
+        Hello: "Bonjour,",
+      },
+      en: {
+        Hello: "Hello,",
+      },
+    };
 
-IriSP.Widgets.HelloWorld.prototype.draw = function() {
-    this.renderTemplate();
-    console.log("HelloWorldWidget was drawn");
-};
\ No newline at end of file
+    draw = function () {
+      this.renderTemplate();
+      console.log("HelloWorldWidget was drawn");
+    };
+  };
+}
+
+export { HelloWorld, helloWorldStyles};