Add ProdDebug webcomponent

Author: hojberg

src/Lib/ProdDebug.elm

@@ -1,20 +1,27 @@
-{- This requires a port subscription by the host application.
+port module Lib.ProdDebug exposing (..)
 
-   Something like:
+import Html exposing (Html, node)
+import Html.Attributes exposing (attribute)
 
-   ```javascript
-   const app = Elm.HostApp.init({ flags });
 
-   if (app.ports) {
-     app.ports.debugLog?.subscribe((text) => {
-       console.debug(text);
-     });
-   }
-   ```
--}
+view : String -> List (Html msg) -> Html msg
+view debugMessage content =
+    node "prod-debug" [ attribute "message" debugMessage ] content
 
 
-port module Lib.ProdDebug exposing (..)
+{-| This requires a port subscription by the host application.
 
+Something like:
 
+```javascript
+const app = Elm.HostApp.init({ flags });
+
+if (app.ports) {
+  app.ports.debugLog?.subscribe((text) => {
+    console.debug(text);
+  });
+}
+```
+
+-}
 port debugLog : String -> Cmd msg

src/Lib/ProdDebug.js

@@ -0,0 +1,14 @@
+// <prod-debug message="debug message"></prod-debug>
+
+class ProdDebug extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  async connectedCallback() {
+    const message = this.getAttribute("message");
+    console.debug(message);
+  }
+}
+
+customElements.define("prod-debug", ProdDebug);