Working test to use web components!

web-app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rookeries",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8059,6 +8059,11 @@
         }
       }
     },
+    "preact-custom-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/preact-custom-element/-/preact-custom-element-3.0.0.tgz",
+      "integrity": "sha512-UeZRpl4T9o+OktIefqfovQ1YVE11uCtLeE/I+HWo0WjhU3G6OviPyJyq0M6YZsCNSnfkCM855j/TfM3GyEHVTg=="
+    },
     "preact-helmet": {
       "version": "4.0.0-alpha-3",
       "resolved": "https://registry.npmjs.org/preact-helmet/-/preact-helmet-4.0.0-alpha-3.tgz",

web-app/package.json

@@ -27,6 +27,7 @@
     "node-localstorage": "^1.3.1",
     "preact": "^8.3.1",
     "preact-compat": "^3.18.3",
+    "preact-custom-element": "^3.0.0",
     "preact-helmet": "^4.0.0-alpha-3",
     "preact-transition-group": "^1.1.1",
     "prop-types": "^15.6.2",

web-app/src/entry.js

@@ -15,6 +15,7 @@ import {BrowserRouter} from 'react-router-dom';
 import {appStatusStore, siteStore} from './stores';
 import {App} from './containers/App';
 import {enableLogging} from 'mobx-logger';
+import './test-custom';
 
 enableLogging();
 

web-app/src/test-custom.js

@@ -0,0 +1,8 @@
+import {h, Component} from 'preact';
+import registerCustomElement from 'preact-custom-element';
+
+const Greeting = ({ name = 'World' }) => {return (
+  <p>Hello, {name}!</p>
+)};
+
+registerCustomElement(Greeting, 'x-greeting', ['name']);