example of intercepting a custom element definition

ProjectEvergreen · Apr 23, 2022 · 5321284 · 5321284
1 parent 330f7d9
commit 5321284
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/lib/runtime.js b/lib/runtime.js
@@ -0,0 +1,26 @@
+// Proxy ?
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
+
+// A
+// function customDefine(tagName, BaseClass) {
+//   console.debug('intercepted customElement.define', { tagName, BaseClass });
+// }
+
+// new Proxy(customElements.__proto__.define, customDefine)
+
+// new Proxy(customElements.__proto__, {
+//   define: customDefine
+// });
+
+const backupDefine = customElements.define.bind(window.customElements);
+
+window.customElements.define = (tagName, BaseClass) => {
+  console.debug('intercepted customElement.define', { tagName, BaseClass });
+
+  if(BaseClass.__secret) {
+    console.debug('hmmmm... wonder what could we do here????');
+    BaseClass.__secret();
+  }
+
+  backupDefine(tagName, BaseClass);
+}
diff --git a/ssr.js b/ssr.js
@@ -49,6 +49,9 @@ app.get('/*', async (request, reply) => {
       <html>
         <head>
           <title>WCC - SSR</title>
+          
+          <script src="./lib/runtime.js"></script>
+
           ${
             eagerJs.map(script => {
               return `<script type="module" src="${script.moduleURL.pathname.replace(process.cwd(), '')}"></script>`

diff --git a/www/components/test.js b/www/components/test.js
@@ -0,0 +1,16 @@
+class TestComponent extends HTMLElement {
+  constructor() {
+    super()
+
+    // TODO have wcc skip over mode / attachShadow, innerHTML, connectedCallback, etc
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static __secret() {
+    console.debug('sssshhh!  this is a secret :)')
+  }
+}
+
+export { TestComponent }
+
+customElements.define('wcc-test', TestComponent)
diff --git a/www/pages/index.js b/www/pages/index.js
@@ -1,6 +1,7 @@
 import '../components/counter.js';
 import '../components/footer.js';
 import '../components/header.js';
+import '../components/test.js';
 
 export default class HomePage extends HTMLElement {
   constructor() {
@@ -29,6 +30,8 @@ export default class HomePage extends HTMLElement {
 
       <wcc-header></wcc-header>
 
+      <wcc-test></wcc-test>
+
       <h1>Home Page</h1>
       <wcc-counter></wcc-counter>
       <wcc-counter count="5"></wcc-counter>