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
  }));
}

[mhevery]

The main issue with sync$ is that it doesn't accept variables. So we cannot pass the mediaQuery string for example.

Correct. But it can't pass the variables without the framework deserialization being present. You suggest string concatenation, which feels very dirty, and I am not sure how that would work with SSR.

The workaround is for you to put your variables into DOM attributes and than the sync$ can read the attributes to get paramaters passed into it. This is how you can solve your media query 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.

Yes not sure we should allow such low level hacks.

---

My current inclination is to close this request as wont do since the sync$ already can be used to achieve what you want. Does that sound OK to you?

[GrandSchtroumpf]

The workaround is for you to put your variables into DOM attributes

Can we modify the attribute of the element from a use method ? If yes, then if would definitely solve the issue :

const useMedia = (query: string, qrl: QRL<(e: CustomEvent) => any>) => {
  useOnDocument(`q:media:${query}`, qrl);
  useOnDocument('qvisible', sync$(function (e, el) {
    const query = el.getAttribute('q:media');
    const handler = (ev) => document.dispatchEvent(new CustomEvent(`q:media:${query}`, {detail:ev}));
    const media = matchMedia(this.mediaQuery);
    media.addEventListener('change', handler);
  })):
  // TODO: how to set the `q:media` attribute on the element in the server ?
}

My other workaround would be to use an inline script tag, which would in the end be string concatenation:

const MediaQuery = component$(({ query, callback$ }) => {
  const id = useId();
  // Trigger the callback when media changes
  useOnDocument(`q:media:${query}`, callback$);
  // Cleanup 
  useTask$(({ cleanup }) => {
    cleanup(() => {
      if (isServer) return;
      globalThis[${id}]();
    })
  });
  // Start listening in a minimal way
  const content = `
    const handler = (ev) => document.dispatchEvent(new CustomEvent(`q:media:${query}`, {detail:ev}));
    const media = matchMedia(${mediaQuery});
    media.addEventListener('change', globalThis[${id}]);
    globalThis[${id}] = () => media.removeEventListener('change', handler);
  `;
  return (
    <script dangerousInnerHTML={content}></script>
  )
})

[shairez]

@mhevery can you take a look please ☝️

thanks!

[wmertens]

@GrandSchtroumpf You might be interested in q:args which would add extra arguments to event handlers #312 (but of course only once the framework woke up)

[GrandSchtroumpf]

Ideally we could add argument when rendering on the server :

// Set the 'q:media' attribute on the root element of the component on the server
useArgs('q:media', '(min-width: 300px)');

Like that we would be able to get the value from the DOM :

const useMedia = (query: string, qrl: QRL<(e: CustomEvent) => any>) => {
  // Set attribute on the element at render time
  useArgs('q:media', query);
  
  // Trigger the qrl when event it triggered
  useOnDocument(`q:media:${query}`, qrl);
  
  // When component is visible start listening on media event
  useOnDocument('qvisible', sync$(function (e, el) {
    const query = el.getAttribute('q:media'); // We can get this value thanks for useArgs
    const handler = (ev) => document.dispatchEvent(new CustomEvent(`q:media:${query}`, {detail:ev}));
    const media = matchMedia(this.mediaQuery);
    el.cleanup = () => media.removeEventListener('change', handler);
    media.addEventListener('change', handler);
  })):
  
  // Cleanup
  useTask$(({ cleanup }) => {
    cleanup(() => {
      document.querySelector(`[q:media="${query}"]`).cleanup();
    })
  })
}