chore: allow any string as jsxFramework to enable extracting JSX comp… (

#2226)

chore: allow any string as jsxFramework to enable extracting JSX components

.changeset/new-bugs-allow.md

@@ -0,0 +1,16 @@
+---
+'@pandacss/generator': patch
+'@pandacss/types': patch
+---
+
+This change allows the user to set `jsxFramework` to any string to enable extracting JSX components.
+
+---
+
+Context: In a previous version, Panda's extractor used to always extract JSX style props even when not specifying a
+`jsxFramework`. This was considered a bug and has been fixed, which reduced the amount of work panda does and artifacts
+generated if the user doesn't need jsx.
+
+Now, in some cases like when using Svelte or Astro, the user might still to use & extract JSX style props, but the
+`jsxFramework` didn't have a way to specify that. This change allows the user to set `jsxFramework` to any string to
+enable extracting JSX components without generating any artifacts.

packages/generator/src/artifacts/jsx.ts

@@ -1,5 +1,5 @@
 import type { Context } from '@pandacss/core'
-import type { ArtifactFilters } from '@pandacss/types'
+import type { ArtifactFilters, JsxFramework } from '@pandacss/types'
 import { generatePreactJsxFactory, generatePreactJsxPattern, generatePreactJsxTypes } from './preact-jsx'
 import { generatePreactJsxStringLiteralFactory } from './preact-jsx/jsx.string-literal'
 import { generatePreactJsxStringLiteralTypes } from './preact-jsx/types.string-literal'
@@ -38,8 +38,11 @@ const typesStringLiteralMap = {
   vue: generateVueJsxStringLiteralTypes,
 }
 
+const isKnownFramework = (framework: string): framework is JsxFramework => Boolean((typesMap as any)[framework])
+
 export function generateJsxTypes(ctx: Context) {
   if (!ctx.jsx.framework) return
+  if (!isKnownFramework(ctx.jsx.framework)) return
   const type = ctx.isTemplateLiteralSyntax ? typesStringLiteralMap[ctx.jsx.framework] : typesMap[ctx.jsx.framework]
   return type?.(ctx)
 }
@@ -66,6 +69,7 @@ const factoryStringLiteralMap = {
 
 export function generateJsxFactory(ctx: Context) {
   if (!ctx.jsx.framework) return
+  if (!isKnownFramework(ctx.jsx.framework)) return
   const factory = ctx.isTemplateLiteralSyntax
     ? factoryStringLiteralMap[ctx.jsx.framework]
     : factoryMap[ctx.jsx.framework]
@@ -86,5 +90,6 @@ const patternMap = {
 
 export function generateJsxPatterns(ctx: Context, filters?: ArtifactFilters) {
   if (ctx.isTemplateLiteralSyntax || ctx.patterns.isEmpty() || !ctx.jsx.framework) return []
+  if (!isKnownFramework(ctx.jsx.framework)) return
   return patternMap[ctx.jsx.framework!](ctx, filters)
 }

packages/generator/src/artifacts/setup-artifacts.ts

@@ -48,7 +48,8 @@ export function setupDesignTokens(ctx: Context): Artifact | undefined {
 function setupJsxTypes(ctx: Context): Artifact | undefined {
   if (!ctx.jsx.framework) return
 
-  const jsx = generateJsxTypes(ctx)!
+  const jsx = generateJsxTypes(ctx)
+  if (!jsx) return
 
   return {
     id: 'types-jsx',
@@ -110,7 +111,7 @@ function setupGeneratedTypes(ctx: Context): Artifact {
 }
 
 function setupGeneratedSystemTypes(ctx: Context): Artifact {
-  const gen = getGeneratedSystemTypes(ctx)!
+  const gen = getGeneratedSystemTypes(ctx)
 
   return {
     id: 'types-gen-system',
@@ -176,7 +177,8 @@ function setupCx(ctx: Context): Artifact {
 function setupCreateRecipe(ctx: Context): Artifact | undefined {
   if (ctx.recipes.isEmpty()) return
 
-  const createRecipe = generateCreateRecipe(ctx)!
+  const createRecipe = generateCreateRecipe(ctx)
+  if (!createRecipe) return
 
   return {
     id: 'create-recipe',
@@ -276,8 +278,11 @@ function setupJsxIsValidProp(ctx: Context): Artifact | undefined {
 function setupJsxFactory(ctx: Context): Artifact | undefined {
   if (!ctx.jsx.framework) return
 
-  const types = generateJsxTypes(ctx)!
+  const types = generateJsxTypes(ctx)
+  if (!types) return
+
   const factory = generateJsxFactory(ctx)
+  if (!factory) return
 
   return {
     id: 'jsx-factory',
@@ -305,6 +310,7 @@ function setupJsxPatterns(ctx: Context, filters?: ArtifactFilters): Artifact | u
   if (!ctx.jsx.framework || ctx.isTemplateLiteralSyntax) return
 
   const patterns = generateJsxPatterns(ctx, filters)
+  if (!patterns) return
 
   return {
     id: 'jsx-patterns',

packages/types/src/config.ts

@@ -184,13 +184,13 @@ interface FileSystemOptions {
   logLevel?: 'debug' | 'info' | 'warn' | 'error' | 'silent'
 }
 
-type JsxFramework = 'react' | 'solid' | 'preact' | 'vue' | 'qwik'
+export type JsxFramework = 'react' | 'solid' | 'preact' | 'vue' | 'qwik'
 
 interface JsxOptions {
   /**
    * The framework to use for generating supercharged elements.
    */
-  jsxFramework?: JsxFramework
+  jsxFramework?: JsxFramework | (string & {})
   /**
    * The factory name of the element
    * @default 'styled'