QWIK Custom component - Input onChange event


I am using the QWIK SDK and have successfully integrated custom components.

One particular component I wish to use the onChange event of a component’s input value when I register the component.

How is this achieved when using Qwik? It looks to me that Qwik’s trying to serialise the onChange function passed to builder but it shouldn’t be. PLease see below things I’ve tried and resulting errors. Any feedback/guidence would be great.

Attempt 1:

const myComponent: RegisteredComponent = {
...other fields
      name: "image",
      type: "file",
      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
      required: true,
      onChange: (options: Map<string, any> => {
        console.log("options", options);

When I implement the above, a Qwik error is raised:

Value cannot be serialized in _[11].inputs[0].onChange, because it's a function named "onChange". You might need to convert it to a QRL using $(fn):

Ok, so I follow the errors advice and implement it like so:

Attempt 2

 onChange: $((options: Map<string, any>) => {
          console.log("options", options);

But then receive the below error in the console!

main.63e804b1.chunk.js:542 Evaluation error: SyntaxError: Unexpected token 'function'
    at new Function (<anonymous>)
    at safeEvaluate (main.63e804b1.chunk.js:540:136)
    at Object.onChange (229.a5e87dee.chunk.js:5:6325)
    at AssetPicker_AssetPicker.triggerOnChange (229.a5e87dee.chunk.js:378:16672) in return (function async function (...args) {
        const fn = invokeFn.call(this, tryGetInvokeContext());
        const result = await fn(...args);
        return result;
    }).apply(this, arguments)

SO now I’m thinking this should be a plain function as it must be being parsed/serialised and then used on the builder client?

I then decide to instruct qwik not to serialise:

Attempt 3

  onChange: noSerialize((options: Map<string, any>) => {
          console.log("options", options);

Still no love with an additional error in the console:

VM81249:1 Uncaught (in promise) SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at fastClone (index.qwik.mjs:56:33)
    at serializeValue (index.qwik.mjs:2425:86)
    at index.qwik.mjs:2430:12
    at Array.reduce (<anonymous>)
    at index.qwik.mjs:2428:56
    at Proxy.map (<anonymous>)
    at prepareComponentInfoToSend (index.qwik.mjs:2428:19)
    at createRegisterComponentMessage (index.qwik.mjs:2423:9)
    at index.qwik.mjs:3219:27

I think I want qwik to do nothing here and just let this function be passed to Builder for it to do it’s magic?

Hello Simon,

Our Open source development team would love to assist.

To reach out to the Partytown and Qwik open source project teams, please head over to our Discord and join the discussion there. For the best results, we’d recommend you make a copy of your implementation of Partytown and place it in a Stackblitz project for review, then share it with the #general-partytown channel.

You are also welcome to reach out for Partytown help by creating a discussion topic or Issue in the Github repo: https://github.com/BuilderIO/partytown/

I hope you find the information above helpful and please don’t hesitate to reach out to us if you need any further assistance.

Thanks for the response. I’m a little confused. This is not a party town related query. It’s about integration custom components in builder when using Qwik.

If you’re saying this uses party town under the hood then fine but I have no custom implementation of it. Simply a qwik-qwick city app connecting to Builder.io.