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