Minze Discussions

[sergejcodes]

Hello there👋,

if you have any suggestions, questions or want to share your thoughts feel free to start a new discussion.

[rokyed]

Hi, I would like to know what do you think about this:

main...rokyed:minze:rokyed-dev

Just a simple callback with listener, 1 to 1.

TLDR;
The context of this is, I needed some callbacks as I use minze in production. The easiest way to get simple callbacks between child and parents (kinda like reactjs) was this way, I do find dispatch a bit cumbersome as there can be multiple listeners and also the listeners might not be explicitly specified.
TLDR end;

Thanks for reading this.

[sergejcodes]

I think you don't need to extend Minze to get the functionality you described. It can be done natively with a broadcast channel.

The dollar sign is arbitrarily chosen, and can be called anything else e.g. bc.

Here's a quick example:

import { MinzeElement } from 'minze'

/**
 * types
 */
type Data = { id: number; text: string }

type Callback = { 
   id: number
   fn: (event: MessageEvent<Data>) => any
}

/**
 * Callbacks
 */
const callbacks: Callback[] = [
   { id: 1, fn: (event) => console.log(event.data.text) }
]

/**
 * Broadcastchannel
 */
const $ = new BroadcastChannel('$')

$.addEventListener('message', (event: MessageEvent<Data>) => {
   callbacks.filter(cb => cb.id === event.data.id)?.[0].fn(event)
})

/**
 * Custom element
 */
class MyElement extends MinzeElement {
   run = () => $.postMessage({ id: 1, text: 'Hello Minze!' })
   html = () => `<button on:click="run">Click me</button>`
}

[rokyed]

I see what you are saying, but I think you're missing the point on my implementation.

I did see in your code that there is such a thing, but it's not documented and I'm wondering what's your vision on that, are you going to maintain it or would you like someone else to maintain it, or are you going to deprecate it?

TLDR;

My solution was more to fulfill the gap that currently Minze cannot fulfill where you can attach custom events on elements, that are supposed to trigger their custom event. My implementation is naive but effective, by using a singleton.

I needed a way like React to just pass callbacks on custom events triggered by child custom elements.
My implementation covers the one to one relationship of the callback. Making it a singleton was a decision that makes it usable and avoids declarations at window level. I don't do that as there is a high chance of it colliding with other libraries/web components.

TLDR end;

[sergejcodes]

Not entirely sure what undocumented part of code you refer to, the on:event notation? If so, it's actually in the docs and is maintained.

... attach custom events on elements, that are supposed to trigger their custom event

Doesn't that refer to something like this, which is already possible?:

class MyElement extends MinzeElement {
   run = () => this.dispatch(/*  code */)
   html = () => `<button on:custom-event="run">Click me</button>`
}

[rokyed]

@sergejcodes nice catch!! I just realized I didn't handle all the cases for shorthand events 🥇