Support multiple JSX Frameworks at the same time

[JohnDeved]

Description

Supporting multiple JSX frameworks at the same time can be useful in cases like Astro.

Problem Statement/Justification

I have a component written in React and another in Solid, displayed on the same page using Astro.
I would still like to use Panda JSX components in both Frameworks.
Right now it's only easily possible to have the JSX components work for eighter react or solid, not both at the same time.

Proposed Solution or API

allow the jsxFramework config option to accept arrays aswell

export default defineConfig({
	// [...]
	jsxFramework: ["react", "solid"]
})

then generate folder structure like so:
styled-system/react-jsx
styled-system/solid-jsx

usage would then look like this:

// solid
import { Box } from "../styled-system/solid-jsx"

export default function Solid() {
  return <Box bg="green">Hello from Solid</Box>
}

// react
import { Box } from '../styled-system/react-jsx'

const React: React.FC = () => {
  return <Box bg="blue">Hello from React</Box>
}
export default React

Alternatives

No response

Additional Information

No response

[segunadebayo]

Hi @JohnDeved,

This is outside our scope for now, but it sounds interesting.

[JohnDeved]

this is my hacky workaround right now:

import { execSync } from 'child_process'
import fs from 'fs'

fs.rmSync('styled-system', { recursive: true, force: true })

genFiles('react')
genFiles('solid')

/** @param {string} framework */
function genFiles (framework) {
  console.log(`Generating ${framework} files`)

  // Generate files
  fs.writeFileSync('panda.config.json', JSON.stringify({ jsxFramework: framework }), 'utf-8')
  execSync('panda codegen', { stdio: 'inherit' })
  fs.renameSync('styled-system/jsx', `styled-system/${framework}`)
  fs.renameSync('styled-system/types/jsx.d.ts', `styled-system/types/${framework}-jsx.d.ts`)

  // Replace imports
  const files = fs.readdirSync(`styled-system/${framework}`)
  for (const file of files) {
    console.log(`Replacing imports in ${file}`)
    const content = fs.readFileSync(`styled-system/${framework}/${file}`, 'utf-8')
    const newContent = content.replace(/from '\.\.\/types\/jsx'/g, `from '../types/${framework}-jsx'`)
    fs.writeFileSync(`styled-system/${framework}/${file}`, newContent, 'utf-8')
  }
}