You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As discussed on #833 and following the investigation and api proposal of @bjufre, ive created a custom plugin for mitosis that does many things to solve event interoperability and prop drilling for vue outputs.
The plugin does 3 main things:
Using metadata decorators we can match function props to custom emits without affecting other outputs or the writing of the component as state on the proposal here (Point # 2)
Using the related v-model data obtained from metadata and the prop typings of the component we annotate the defineEmits automatically for the component, so we follow the vue guidelines as stated here
Using the props typings the plugin improves the type inference for props, using defineProps() like the guidelines of vue suggest instead of the default export props array property that misses the usage of the already bundled Props interface (can be any interface as mitosis handles it using json propsTypeRef property) (Also can work as standalone plugin to improve props of components without v-mode /emit concerns)
Limitations:
Only works for vue 3 + typescript +composition api output ATM
The props marked as v-model targets will be removed from the normal prop flow so may cause some disparity between frameworks (? but still its the preferred way on vue.
What does the proposed API look like?
I've used in the same project as stated on #1265 to bundle playground testing and the plugin itself so the code of the plugin can be found here.
The mitosis.config.js will look something like this:
solving almost entirely the event interoperability
Additional Information
The plugin is pretty basic and may not fulfill 100% of the desired interoperability but can help for the initial structure and maybe the vue improvement from mitosis compiler and the mos common v-model scenarios without destroying the mitosis philosophy of "write once and bundle many"
Any feedback or review is appreciated. This is my first big open source contribution, so I'm open to all suggestions
The text was updated successfully, but these errors were encountered:
D4RKAR117
changed the title
[FEAT] Plugin Support for vue V-Model integration and event interoperability
[FEAT Contribution] Plugin Support for vue V-Model integration and event interoperability
Oct 12, 2023
@D4RKAR117 , I think this is such an amazing initiative. I would love for you to publish this plugin and share it in the github issue. This will encourage people to try and use it. From there, we can gather feedback and see if it tackles all of Mitosis users' pain points!
I am interested in helping provide a feature!
Yes
Which generators are impacted?
What problem does this feature solve?
As discussed on #833 and following the investigation and api proposal of @bjufre, ive created a custom plugin for mitosis that does many things to solve event interoperability and prop drilling for vue outputs.
The plugin does 3 main things:
defineEmits
automatically for the component, so we follow the vue guidelines as stated heredefineProps()
like the guidelines of vue suggest instead of the default exportprops
array property that misses the usage of the already bundledProps
interface (can be any interface as mitosis handles it using jsonpropsTypeRef
property) (Also can work as standalone plugin to improve props of components without v-mode /emit concerns)Limitations:
What does the proposed API look like?
I've used in the same project as stated on #1265 to bundle playground testing and the plugin itself so the code of the plugin can be found here.
The
mitosis.config.js
will look something like this:The code of the component (I've used the example of the #833 SuperInput jsut for validation ease) can look like this:
and will generate an output like this:
solving almost entirely the event interoperability
Additional Information
The plugin is pretty basic and may not fulfill 100% of the desired interoperability but can help for the initial structure and maybe the vue improvement from mitosis compiler and the mos common v-model scenarios without destroying the mitosis philosophy of "write once and bundle many"
Any feedback or review is appreciated. This is my first big open source contribution, so I'm open to all suggestions
The text was updated successfully, but these errors were encountered: