FIO-10593 | DataCloneError when using Vue and Static Form Definitions.

[francoisauclair911]

No description provided.

[brendanbond]

hey @francoisauclair911 thanks for your PR and your continuing collaboration on improving our vue wrapper. I think our support team sent you some feedback, but I thought I'd summarize it here: the structuredClone error you're seeing stems from the fact that you're wrapping the form definition into a ref, presumably because the previous versions of our vue wrapper didn't really treat referential props very well. Now that we've fixed that issue, though, I wouldn't feel great about adding lodash as a dependency just for the one cloning function when structuredClone would suffice. Let me know if you have any further questions or concerns, I'd be happy to discuss this further.

[francoisauclair911]

Thank you — though just to note, lodash would be tree-shaken by Vite during build, so the bundle impact would be minimal. Alternatively, we could use the per-function lodash.clonedeep package (until v5 deprecates it in favor of tree-shaking).

Also any thoughts on this approach

    // Handle form schema updates intelligently
    watch(
      () => props.form,
      (newForm, oldForm) => {
        if (instanceIsReady.value && formInstance.value && newForm && oldForm) {
          // Update the form schema without recreating the instance
          formInstance.value.form = newForm;
          // Trigger a rebuild to apply schema changes
          formInstance.value.build(formioRef.value);
        } else if (
          instanceIsReady.value &&
          formInstance.value &&
          newForm &&
          !oldForm
        ) {
          // Initial form load
          formInstance.value.form = newForm;
        }
      },
      { deep: true },
    );

[brendanbond]

Also any thoughts on this approach

In terms of accepting mutable ref objects as props to the <Form /> component? Or something else?

[francoisauclair911]

Yes, I do think there is a valid use case of somebody modifying the schema dynamically and having the form rerender just by watching the state change. Right now if I modify the ref() the forms rerenders but trashes all the entered values

[brendanbond]

I would review a PR here, although I don't think we could accept it because suddenly the :form prop would have to change from FormType (see here) to Ref<FormType>, which would break existing applications that pass actual static form definitions into the <Form /> component.