feat: add custom events

reallygoodsoftware · Feb 26, 2024 · 3b9864b · 3b9864b
1 parent 49935d9
commit 3b9864b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 2 deletions.
diff --git a/demo/custom-event.html b/demo/custom-event.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mini Custom Events</title>
+    <script src="/dist/minijs.umd.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="p-40">
+    <script>
+      MiniJS.extendEvents({ ':htmx:afteronload': 'htmx:afterOnLoad' })
+    </script>
+
+    <button
+      :htmx:afteronload="console.log('custom event!', event)"
+      :click="const event = document.createEvent('CustomEvent');
+              event.initCustomEvent('htmx:afterOnLoad', true, true, { name: 'htmx:afterOnLoad' });
+              this.dispatchEvent(event)"
+    >
+      Click Me
+    </button>
+  </body>
+</html>
diff --git a/lib/entity/events-extensions.js b/lib/entity/events-extensions.js
@@ -0,0 +1,17 @@
+export class EventsExtensions {
+  static instance
+  static USER_CUSTOM_EVENTS = {}
+
+  constructor() {
+    if (EventsExtensions.instance) return EventsExtensions.instance
+
+    EventsExtensions.instance = this
+  }
+
+  extend(events) {
+    EventsExtensions.USER_CUSTOM_EVENTS = {
+      ...EventsExtensions.USER_CUSTOM_EVENTS,
+      ...events,
+    }
+  }
+}
diff --git a/lib/entity/events.js b/lib/entity/events.js
@@ -1,6 +1,7 @@
 import { Interpreter } from '../generators/interpreter'
 import { camelToKebabCase } from '../helpers/strings'
 import { State } from '../state'
+import { EventsExtensions } from './events-extensions'
 
 const ELEMENTS = [
   'div',
@@ -83,6 +84,8 @@ export class Events {
   static isValidEvent(event) {
     if (!event.startsWith(':')) return false
     if (event === ':keyevents') return false
+    if (event in EventsExtensions.USER_CUSTOM_EVENTS) return true
+
     return (
       Events.validEvents.includes(event) ||
       Events.CUSTOM_KEY_EVENTS.some((key) => event.startsWith(key + '.'))
@@ -399,7 +402,10 @@ export class Events {
     const expr = el.getAttribute(attr)
     if (!expr) return
 
-    const nativeEventName = attr.substring(1)
+    const nativeEventName =
+      attr in EventsExtensions.USER_CUSTOM_EVENTS
+        ? EventsExtensions.USER_CUSTOM_EVENTS[attr]
+        : attr.substring(1)
 
     this.listener[attr] = {
       el,
@@ -441,7 +447,7 @@ export class Events {
     const ids = {
       $: 'document-querySelector',
       el: `proxyWindow['${this.base.id}']`,
-      // this is set under the interpreter as bind context
+      // "this" is set under the interpreter as bind context
     }
 
     if (this.base.parent) ids.parent = `proxyWindow['${this.base.parent.id}']`

diff --git a/lib/main.js b/lib/main.js
@@ -3,13 +3,15 @@ import { Lexer } from './generators/lexer'
 import { Observer } from './generators/observer'
 import { State } from './state'
 import { Events } from './entity/events'
+import { EventsExtensions } from './entity/events-extensions'
 
 let nativeProps = Object.getOwnPropertyNames(window)
 
 const MiniJS = (() => {
   let _debug = false
   const state = new State()
   const observer = new Observer(state)
+  const eventExtensions = new EventsExtensions()
 
   async function init() {
     // Automatically initialize when the script is loaded
@@ -100,6 +102,9 @@ const MiniJS = (() => {
     get observer() {
       return observer
     },
+    extendEvents: (events) => {
+      eventExtensions.extend(events)
+    },
     tryFromLocal,
   }
 })()