whole garnet
#builder-sdks
I am using the QWIK SDK and have successfully integrated custom components with Builder.IO.
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/guidance would be great.
Attempt 1
const myComponent: RegisteredComponent = { ...other fields inputs:[ { 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 error's 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 browser console (when in the builder.io editor)
main.63e804b1.chunk.js:542 Evaluation error: SyntaxError: Unexpected token 'function'
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:
VM81249:1 Uncaught (in promise) SyntaxError: "undefined" is not valid JSON
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? But I don't know how.
Thanks