Expose a inlineScript function

[GrandSchtroumpf]

What is it about?

Being able to add an inlined script from a hook

What's the motivation for this proposal?

Problems you are trying to solve:

I'm trying to build event listener around Browser API which are not window, document or Element. For example :

• matchMedia('(min-width: 600px)').addEventListener('change', cb) -> useMedia('(min-width: 600px)', $(cb))
• navigation.addEventListener('navigate') -> `useNavigation('navigate', $(cb))

Currently this only way to achieve that is with useVisibleTask$ or useOnDocument('DOMLoaded') which will both download core early.

Goals you are trying to achieve:

Start listening on event from the browser without having to download core until the event is triggered.

Any other context or information you want to share:

Some API require custom values (like matchMedia which needs the media query) so we cannot build a generic hook with sync$

---

Proposed Solution / Feature

What do you propose?

Export _qrlSync function publicly to be able to append an inline script from a hook.
We can name it inlineScript for example.

Code examples

It could look like that for example

// public
export const inlineScript = (cb) => _qrlSync(cb, cb.toString());

const useMedia = (mediaQuery: string, qrl: QRL<(e: CustomEvent) => any>) => {
  useOnDocument(`media${media_Query}`, qrl);
  useOnDocument('DOMContentLoaded', inlineScript(() => {
    const handler = (ev) => document.dispatchEvent(new CustomEvent('media_${mediaQuery}', {detail:ev}));
    const media = matchMedia("${mediaQuery}");
    media.addEventListener('change', handler);
    return () => media.removeEventListener('change', handler);
  }));
}

export default component$(() => {
  // Will only download core when the qrl is called
  useMedia('(min-width:600px)', $((event) => console.log(event)))
})

---

Links / References

No response

[wmertens]

• There is a workaround, but it requires adding a component to root or the root layout and having it emit a script tag. Not nice, especially since we already have sync QRLs.

• In a way, _qrlSync is supposed to be syncQrl but since it needs to be processed differently it is not named that.

• I'm also not sure about the name. So it creates a QRL (that's directly callable but unfortunately returns a Promise, you need to do qrl.resolved()). The difference with sync$ is that you can generate functions dynamically with embedded data.

• The use case is strictly as event handlers. Maybe name it dynamicSyncQrl or sync$WithArg?

• One way to use it is

  const makeMySyncQrl = (arg) => {
    const fn = (_ev, _el, param = arg) => {
      console.log('Hi', param);
    }
    const result = fn.toString().replace(/=[^)]+\)/m, `=${JSON.stringify(eventName)})`)
    return _qrlSync(fn, result)
  }

  This works in all environments that can do fn.toString() and it can handle minification. Maybe we should make this the exported API instead? The function and the string must always do the same thing.

• So maybe

  export const sync$WithArg = (fn: (ev: Event, el: Element, param: any) => void, arg: any) => {
    const fnStr = fn.toString()
    const result = fnStr.replace(/=[^)]+\)/m, `=${JSON.stringify(arg)})`)
    if (fn.length !== 2 || fnStr === result) {
      console.log(fnStr, result, fn.length)
      throw new Error('you must pass a function of the form `(ev, el, arg = "default") => {...}`')
    }
    return _qrlSync(fn, result) as any as QRL<EventHandler>
  }

Playground example

[mhevery]

So we already have a inlined script through sync$. I think the issue here is that you want to set up an event listener on things we don't support. We have useOn and useOnDocument and useOnWindow it sounds like we should also have useOnNavigate and useOnMadia. This way the mental model is consistent with the rest of the system.

<div onClick$={}>
<div window:onClick$={}>
<div navigate:onNavigate$={}>
<div media:on????$={}>

It is unclear how (min-width:600px) should be encoded into ???, but I feel this approach is more consistent. Perhaps something like this can work:

    <div media:media-tablet="(min-width:600px)" window:media-tablet={() => console.log('click!!')}/>

• Look for media query (min-width:600px) and convert it to media-tablet event on window
• Then just listen to the event as normal.

[GrandSchtroumpf]

@mhevery thanks for the feedback. I'm not sure if qwik should provide an API for every event of every browser EventTarget, I think it's going to be a never ending task.
This is why I suggested to expose low level tools to let dev start listening on something without downloading the framework too early.

The main issue with sync$ is that it doesn't accept variables. So we cannot pass the mediaQuery string for example. The unexposed _inlinedQrl allow that with some string manipulation. But it's not exposed and it's very low level, not super dev friendly.

Maybe qwik could update the sync$ function to support serialized params with some string manipulation like Wout suggested above. I was thinking on something like that:

// Bind "this" if there is an argument
export function sync$<T extends Object>(fn: (this: T, ...args: any[]) => void, arg?: T) {
  if (!arg) return _qrlSync(fn.bind(arg), fn.toString()) as any as QRL<EventHandler>
  const fnStr = `(${fn.toString()}).bind(${JSON.stringify(arg)})`;
  return _qrlSync(fn.bind(arg), fnStr) as any as QRL<EventHandler>
}

const useMedia = (mediaQuery: string, qrl: QRL<(e: CustomEvent) => any>) => {
  const customEvent = useId();
  useOnDocument(customEvent, qrl);
  useOnDocument('qvisible', sync$(function (e, el) {
    const handler = (ev) => document.dispatchEvent(new CustomEvent(this.customEvent, {detail:ev}));
    const media = matchMedia(this.mediaQuery);
    media.addEventListener('change', handler);
    // this event doesn't exist yet. See: https://github.com/QwikDev/qwik-evolution/issues/219
    el.addEventListener('qCleanup', () => media.removeEventListener('change', handler), { once: true });
  },
  // Params will be bound to this
  {
    customEvent,
    mediaQuery
  }));
}