BuilderIO / mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
https://mitosis.builder.io
MIT License
12.58k stars 563 forks source link

Conditional compilation #1209

Closed 25juan closed 2 months ago

25juan commented 1 year ago

I am interested in helping provide a feature!

Yes

Which generators are impacted?

What problem does this feature solve?

The ability to customize code that needs to be compiled to different frameworks when components are compiled to different frameworks。This is just compile time

What does the proposed API look like?

Write our components like this eg:

export default function EdyButton() {

 //ifdef vue 
console.log("hello vue")
//endif

 //ifdef react
console.log("hello react")
//endif

  return <Button>Hello world!</Button>;
}

output: React Component

export default function EdyButton() {
  console.log("hello react")
  return <Button>Hello world!</Button>;
}

Vue Component

export default function EdyButton() {
  console.log("hello vue")
  return <Button>Hello world!</Button>;
}

Additional Information

No response

samijaber commented 1 year ago

This was recently introduced in #1206, and is being improved incrementally to cover more cases.

https://mitosis.builder.io/?outputTab=G4VwpkA%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKNroDQoYAqAhlAObrwC%2BcAZlBCHAEQACARssADYAm6KADpgEAPQhgOVMFQsA3AChF6AB6RYcAXRLIe8OsgB2AYxiijcALIBPAMJNIR9EZgAKMIzCoAlIkVwcCYQRqjwYSQw6HAAvIRYOFDobggBgXBGJCDJfqnp6cGh8Kqx8aQUVClp%2BYFJJGYAXHAA5HVmALSoWcDNeNU1AG7I6ABMTc1Do53dvf35kwDM44vTkrM16dq6%2BuNbejCrPXNw1D7KG0kwyFCWJQDULRwkAF7N%2FdTn6Wmnn5fXlm5%2BgAePjAAYAPmOQOARjAyBgx0CJlQqBiCDyGwKEB40CaLCSfBYfUxJw%2BJIGJB4wzRESiQky2TcPjJNTEkI2AAl0DwcQBCOAASSCJEsUGMcBhcAASuh6jACAA1YYETDY4B8AjQOAAGWAAEduHxecCxKCIWkfEpqEA%3D%3D%3D

Currently it only supports assignments, but in an upcoming PR it will handle many more cases.