Is registering Vue components supported?

Developer Support
1

Hey team, just wanted to check if code components are only available in React or am I able to register Vue components?

2

React only - you can make Vue components only if you’re willing to wrap them in React code component adapters

3

Thanks @yang

I have one more question:

Is it possible to pass functions for the editor UI to interact with?

I have a LocalStorageItem component I’d like the designers to be able to use with say a TextInput or a Switch etc where they can use the value as a dynamic value and then be able to change it (use case are filters/toggles that are used on multiple pages that need to share a value).

This provides the value but the function comes through as a string:

export default function LocalStorageItem<T>(props: LocalStorageItemProps) {

    const [value, setValue] = useLocalStorage<T>(itemKey);

    return (
        <>
            <DataProvider name={props.itemKey} data={{value, updateValue}}>
                {props.children}
            </DataProvider>
        </>
    )
}
4

Data provider is a normal react context so it’s actually able to work with functions and such without issue

I believe the problem in this case is actually the use of local storage, which needs to be able to serialize whatever you give it. Functions are not serializable.

5

Hey @yang

So I’ve played around with it a bit more - if I try add an onChange interaction to a Switch contained within the LocalStorageItem set to a custom function; I can choose my setValue function as a function from the dynamic values options as in the first image, but it won’t save.

If I try switch to code then it sees that function as a string as in the 2nd image.

Is there a way for me to call that function with the current IsChecked value from the Switch?

image.png
image.png1297×588 34.6 KB

6

image.png
image.png1311×613 37.3 KB

7

Is there a way to register the setValue function as an event handler that could appear here:

image.png
image.png293×530 18.6 KB

8

hmmm in the Custom function, you should be able to write the function body like ctx.switch.setValue(...) as you did.

I know you’re seeing a red squiggly, and there’s likely a bug with how we are typing the environment there, but otherwise it should work…?

9

We’re working on better ways for code components to expose actions that you can invoke via the UI :slightly_smiling_face:

10

Thanks @chungwu - it would be awesome to be able to register event handlers like for those page state variables. I’ll give this another try with the function body even with the red squiggly