Sarguel Comments - Answer Overflow

Sarguel

•Created by sponge on 4/2/2024 in #support

Delegated custom events

for final reference:

// list of Element events that will be delegated
const DelegatedEvents = /*#__PURE__*/ new Set([
  "beforeinput",
  "click",
  "dblclick",
  "contextmenu",
  "focusin",
  "focusout",
  "input",
  "keydown",
  "keyup",
  "mousedown",
  "mousemove",
  "mouseout",
  "mouseover",
  "mouseup",
  "pointerdown",
  "pointermove",
  "pointerout",
  "pointerover",
  "pointerup",
  "touchend",
  "touchmove",
  "touchstart"
]);

// list of Element events that will be delegated
const DelegatedEvents = /*#__PURE__*/ new Set([
  "beforeinput",
  "click",
  "dblclick",
  "contextmenu",
  "focusin",
  "focusout",
  "input",
  "keydown",
  "keyup",
  "mousedown",
  "mousemove",
  "mouseout",
  "mouseover",
  "mouseup",
  "pointerdown",
  "pointermove",
  "pointerout",
  "pointerover",
  "pointerup",
  "touchend",
  "touchmove",
  "touchstart"
]);

7 replies

SSolidJS

•Created by sponge on 4/2/2024 in #support

Delegated custom events

const delegate = DelegatedEvents.has(name);

const delegate = DelegatedEvents.has(name);

so if the DelegatedEvents doesn't has your custom event it won't delegate but just fallback to the addEventListener on the node.

7 replies

SSolidJS

•Created by sponge on 4/2/2024 in #support

Delegated custom events

maybe relevant code from dom-expression:

  } else if (prop.slice(0, 3) === "on:") {
    const e = prop.slice(3);
    prev && node.removeEventListener(e, prev);
    value && node.addEventListener(e, value);
  } else if (prop.slice(0, 10) === "oncapture:") {
    const e = prop.slice(10);
    prev && node.removeEventListener(e, prev, true);
    value && node.addEventListener(e, value, true);
  } else if (prop.slice(0, 2) === "on") {
    const name = prop.slice(2).toLowerCase();
    const delegate = DelegatedEvents.has(name); // <------------
    if (!delegate && prev) {
      const h = Array.isArray(prev) ? prev[0] : prev;
      node.removeEventListener(name, h);
    }
    if (delegate || value) {
      addEventListener(node, name, value, delegate); // <-------------
      delegate && delegateEvents([name]);
    }

  } else if (prop.slice(0, 3) === "on:") {
    const e = prop.slice(3);
    prev && node.removeEventListener(e, prev);
    value && node.addEventListener(e, value);
  } else if (prop.slice(0, 10) === "oncapture:") {
    const e = prop.slice(10);
    prev && node.removeEventListener(e, prev, true);
    value && node.addEventListener(e, value, true);
  } else if (prop.slice(0, 2) === "on") {
    const name = prop.slice(2).toLowerCase();
    const delegate = DelegatedEvents.has(name); // <------------
    if (!delegate && prev) {
      const h = Array.isArray(prev) ? prev[0] : prev;
      node.removeEventListener(name, h);
    }
    if (delegate || value) {
      addEventListener(node, name, value, delegate); // <-------------
      delegate && delegateEvents([name]);
    }

and

export function addEventListener(node, name, handler, delegate) {
  if (delegate) { // <--------------------- false
    if (Array.isArray(handler)) {
      node[`$$${name}`] = handler[0];
      node[`$$${name}Data`] = handler[1];
    } else node[`$$${name}`] = handler;
  } else if (Array.isArray(handler)) {
    const handlerFn = handler[0];
    node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
  } else node.addEventListener(name, handler); // <----------------------
}

export function addEventListener(node, name, handler, delegate) {
  if (delegate) { // <--------------------- false
    if (Array.isArray(handler)) {
      node[`$$${name}`] = handler[0];
      node[`$$${name}Data`] = handler[1];
    } else node[`$$${name}`] = handler;
  } else if (Array.isArray(handler)) {
    const handlerFn = handler[0];
    node.addEventListener(name, (handler[0] = e => handlerFn.call(node, handler[1], e)));
  } else node.addEventListener(name, handler); // <----------------------
}

refs: - https://github.com/ryansolid/dom-expressions/blob/ae71a417aa13b33517082628aff09513629df8b2/packages/dom-expressions/src/client.js#L320-L338 - https://github.com/ryansolid/dom-expressions/blob/ae71a417aa13b33517082628aff09513629df8b2/packages/dom-expressions/src/client.js#L127-L137

7 replies

SSolidJS

•Created by sponge on 4/2/2024 in #support

Delegated custom events

Hello, you can see event delegation order illustrated with this example: https://playground.solidjs.com/anonymous/f57f8222-23e3-4472-8573-205f6e5c0a29 To answer your question the custom event foo in the example also work with the solid delegation form ( without : ) but if you go and see in the output tab you will see that solid compile it to a dom listener event instead of the solid delegated event primitive

_el$.addEventListener("foo", () => console.log("HELLO FOO from SOLID ??"));
#instead of 
_el$.$$foo = () => console.log("HELLO FOO from SOLID ??");

_el$.addEventListener("foo", () => console.log("HELLO FOO from SOLID ??"));
#instead of 
_el$.$$foo = () => console.log("HELLO FOO from SOLID ??");

I suspect that if the event doesn't get recognized it get transformed to a delegate event. I don't know if this is a documented behaviour or even if it is by design. We would need someone that know better. In the meantime I would advise you to use the on: form

7 replies

SSolidJS

•Created by Sarguel on 6/9/2023 in #support

Waiting for big component

here an example to illustrate: https://playground.solidjs.com/anonymous/5066b5ac-e30b-48a3-a811-3e4c92b8f30e

5 replies

SSolidJS

•Created by Sarguel on 6/9/2023 in #support

Waiting for big component

Hello, I did check lazy component prior to this post. If you mean:

const Greeting = lazy(() => import("./greeting"));

const Greeting = lazy(() => import("./greeting"));

It does what I want, but only once. As soon as the component is loaded once, it does not show the loading indicator for the next loading.

5 replies

SSolidJS

•Created by Sarguel on 1/18/2023 in #support

class string interpolation with tailwind

and relevant doc in tailwind https://tailwindcss.com/docs/content-configuration#dynamic-class-names I couldn't find anything on my first search sorry

12 replies

SSolidJS

•Created by Sarguel on 1/18/2023 in #support

class string interpolation with tailwind

So my only two options are to either import everthing or to fully declare the class name if I understand properly

12 replies

SSolidJS

•Created by Sarguel on 1/18/2023 in #support

class string interpolation with tailwind

ok found someone mentioning that aswell, https://stackoverflow.com/a/68020542

12 replies

SSolidJS

•Created by Sarguel on 1/18/2023 in #support

class string interpolation with tailwind

I understand that part the thing that I can't wrap my head around is that it "understand" that bg1 = "bg-blue-500" so it import it but it doesn't for "bg-"+ "green" +"-500". But if you inspect the dom you see the class. I don't understand where the cutoff is. Couldn't find documentation online on this subject.

12 replies

Gaming

Programming