BuilderIO/mitosis

How do I write a function call component with mitosis?

wabi-habi opened this issue · 7 comments

wabi-habi commented

I am interested in helping provide a feature!

Yes

Which generators are impacted?

  • All
  • Angular
  • HTML
  • Qwik
  • React
  • React-Native
  • Solid
  • Stencil
  • Svelte
  • Vue
  • Web components

What problem does this feature solve?

How do I write a function call component with mitosis?

Example:

import { Message } from 'xxxx'

Message.xxx()

What does the proposed API look like?

I'm hoping to help me answer this confusion and successfully write functional components!

Additional Information

No response

samijaber commented

I'm not sure what a "function call component" means here. Can you show an example in a web framework (like React, Vue, Svelte, Qwik)?

wabi-habi commented

I'm not sure what a "function call component" means here. Can you show an example in a web framework (like React, Vue, Svelte, Qwik)?

OK, let's take the most notable examples of react and vue.

react

https://ant.design/components/message

vue

https://arco.design/vue/en-US/component/message

samijaber commented

These docs are long, I'm not sure what I'm meant to be looking at.

For reference though:

  • in Mitosis, you can only have one default export in your .lite.tsx files. You cannot export anything else from the Mitosis component files themselves. If you want to export anything else, it should come from a plain .ts file.
  • in Mitosis, we have no support for any custom use* hooks at this moment.
wabi-habi commented

These docs are long, I'm not sure what I'm meant to be looking at.

For reference though:

  • in Mitosis, you can only have one default export in your .lite.tsx files. You cannot export anything else from the Mitosis component files themselves. If you want to export anything else, it should come from a plain .ts file.
  • in Mitosis, we have no support for any custom use* hooks at this moment.

I think you should look at the way functional components are used to understand! It can be not hooks, it can be static method's!

wabi-habi commented

@samijaber Can you help me figure out how to implement a component with functional calls?

samijaber commented

As I wrote in my last comment:

in Mitosis, you can only have one export in your .lite.tsx files: the default export (which will be your component). You cannot export anything else from the Mitosis component files. If you want to export a function, it should be written in a separate .ts file and exported that way.

wabi-habi commented

As I wrote in my last comment:

in Mitosis, you can only have one export in your .lite.tsx files: the default export (which will be your component). You cannot export anything else from the Mitosis component files. If you want to export a function, it should be written in a separate .ts file and exported that way.

Okay, I'll try it when I have time!