Hi,
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
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 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?