use only unpkg/preact + htm consistently for all components

webroot/index-standalone-chat.html

@@ -16,7 +16,9 @@
     <div id="messages-only"></div>
 
     <script type="module">
-      import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
+      import { render, h } from 'https://unpkg.com/preact?module';
+      import htm from 'https://unpkg.com/htm?module';
+      const html = htm.bind(h);
       import StandaloneChat from './js/app-standalone-chat.js';
 
       (function () {

webroot/index-video-only.html

@@ -20,7 +20,10 @@
     <div id="video-only"></div>
 
     <script type="module">
-      import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
+      import { h, render } from 'https://unpkg.com/preact?module';
+      import htm from 'https://unpkg.com/htm?module';
+      const html = htm.bind(h);
+
       import VideoOnly from './js/app-video-only.js';
 
       (function () {

webroot/index.html

@@ -48,7 +48,9 @@
   <div id="app"></div>
 
   <script type="module">
-    import { render, html } from "https://unpkg.com/htm/preact/index.mjs?module";
+    import { render, h } from 'https://unpkg.com/preact?module';
+    import htm from 'https://unpkg.com/htm?module';
+    const html = htm.bind(h);
     import App from './js/app.js';
 
     (function () {

webroot/js/app-standalone-chat.js

@@ -1,4 +1,4 @@
-import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 

webroot/js/components/chat/chat.js

@@ -1,6 +1,5 @@
 import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
-// Initialize htm with Preact
 const html = htm.bind(h);
 
 import Message from './message.js';

webroot/js/components/chat/content-editable.js

@@ -6,7 +6,7 @@ and here:
 https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103
 
 */
-import { Component, createRef, createElement } from 'https://unpkg.com/preact?module';
+import { Component, createRef, h } from 'https://unpkg.com/preact?module';
 
 function replaceCaret(el) {
   // Place the caret at the end of the element
@@ -109,7 +109,7 @@ export default class ContentEditable extends Component {
 
   render(props) {
     const { html, innerRef } = props;
-    return createElement(
+    return h(
       'div',
       {
         ...props,

webroot/js/components/chat/message.js

@@ -1,4 +1,6 @@
-import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
+import { h, Component } from 'https://unpkg.com/preact?module';
+import htm from 'https://unpkg.com/htm?module';
+const html = htm.bind(h);
 
 import { messageBubbleColorForString } from '../../utils/user-colors.js';
 import { formatMessageText } from '../../utils/chat.js';

webroot/js/components/chat/username.js

@@ -1,6 +1,5 @@
 import { h, Component, createRef } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
-// Initialize htm with Preact
 const html = htm.bind(h);
 
 import { generateAvatar, setLocalStorage } from '../../utils/helpers.js';

webroot/js/components/social.js

@@ -1,4 +1,6 @@
-import { html } from "https://unpkg.com/htm/preact/index.mjs?module";
+import { h } from 'https://unpkg.com/preact?module';
+import htm from 'https://unpkg.com/htm?module';
+const html = htm.bind(h);
 import { SOCIAL_PLATFORMS } from '../utils/social.js';
 import { classNames } from '../utils/helpers.js';
 

webroot/js/utils/chat.js

@@ -1,9 +1,5 @@
 import { addNewlines } from './helpers.js';
 import {
-  KEY_USERNAME,
-  KEY_AVATAR,
-  KEY_CHAT_DISPLAYED,
-  KEY_CHAT_FIRST_MESSAGE_SENT,
   CHAT_INITIAL_PLACEHOLDER_TEXT,
   CHAT_PLACEHOLDER_TEXT,
   CHAT_PLACEHOLDER_OFFLINE,