Nuxt•2w ago

How to apply esbuild jsxImportSource file overwrite?

Hi, i have a unusual setup i am porting from another vue framework to nuxt. custom jsx setup The setup involves having certain files using different JSX transform options. Certain files use a custom JSX runtime for performance reasons and this was previously solved using esbuild comment overwrites according to https://esbuild.github.io/api/#jsx assets/custom/foobar.tsx

// @jsxRuntime automatic
/* @jsxImportSource ~/assets/custom/customJsx */

function createPerformantNodesWithCustomJsxRuntime(){
  // This would after transformation add imports for ~/assets/custom/customJsx and its jsx() function
  return (<div></div>);
}

// @jsxRuntime automatic
/* @jsxImportSource ~/assets/custom/customJsx */

function createPerformantNodesWithCustomJsxRuntime(){
  // This would after transformation add imports for ~/assets/custom/customJsx and its jsx() function
  return (<div></div>);
}

And as additional fallback a .babelrc file in the assets/custom ensures the same ruleset incase babel is used: assets/custom/.babelrc

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false,
        "runtime": "automatic",
        "importSource": "~/assets/custom/customJsx"
      }
    ]
  ]
}

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false,
        "runtime": "automatic",
        "importSource": "~/assets/custom/customJsx"
      }
    ]
  ]
}

problem However inside a nuxt project these overwrites seem to be ignored and vue/createVNode() is used no matter what. Additionally i have tried: - Excluding the assets/custom directory via vite.vueJsx.exclude inside nuxt.config.ts - Adding a nested tsconfig inside assets/custom - Forcing babel transpilation using build.transpile However sadly to no avail. Is anyone aware of a method to apply these JSX runtime overwrites per file?

esbuild - API

9 Replies

kapa.ai•2w ago

Hi @🐾Pow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, I can provide some insights into JSX handling in Nuxt, though there isn't a complete solution for your specific use case in the provided documents. Nuxt supports JSX/TSX files by default, as indicated by the extensions configuration which includes .jsx and .tsx Nuxt Configuration Extensions. There have been several improvements to JSX support in Nuxt, including fixes for scanning JSX pages for metadata and using the TSX loader for JSX files as well. A relevant fix was implemented in Nuxt to pass the correct JSX configuration for esbuild-loader, which ported esbuild configuration from Vite to webpack:

This ports esbuild configuration to webpack from vite... Note that this does not enable support for auto-importing components used within JSX/TSX files in webpack; that is a separate issue. GitHub PR #27341

However, the knowledge sources don't specifically address how to apply per-file JSX runtime overwrites using jsxImportSource comments in Nuxt. You might be able to customize the JSX configuration through the Vite configuration in your nuxt.config.ts file. Nuxt uses Vite by default, and you can configure it through the vite key:

export default defineNuxtConfig({
  vite: {
    // Custom Vite configuration
    esbuild: {
      // JSX configuration
      jsx: 'automatic',
      jsxImportSource: '~/assets/custom/customJsx'
    }
  }
})

export default defineNuxtConfig({
  vite: {
    // Custom Vite configuration
    esbuild: {
      // JSX configuration
      jsx: 'automatic',
      jsxImportSource: '~/assets/custom/customJsx'
    }
  }
})

However, this would apply globally rather than per-file as you're looking for. The knowledge sources don't contain specific information about supporting per-file JSX runtime overwrites with comment directives in Nuxt. This might require a custom plugin or configuration that's not covered in the provided documentation. If you need to maintain this specific setup, you might need to: 1. Create a custom Vite plugin that handles the JSX transformation based on file comments 2. Explore using different file extensions for your custom JSX files and configure specific loaders for them 3. Consider reaching out to the Nuxt community or filing an issue on GitHub for more specific guidance Unfortunately, the knowledge sources don't provide a complete solution for your specific use case of per-file JSX runtime overwrites in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@300276460386648075> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

🐾PowOP•2w ago

@kapa.ai How could a minimal custom plugin to transpile files matching an include pattern with a custom jsx configuration?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I can help you create a minimal custom Vite plugin for Nuxt that would transpile specific files with a custom JSX configuration. This builds on our previous conversation about applying per-file JSX runtime overwrites. You can create a custom Vite plugin and add it to your Nuxt project using the addVitePlugin function from @nuxt/kit. Here's how you could implement it:

// plugins/custom-jsx-plugin.js
import { defineNuxtPlugin, addVitePlugin } from '@nuxt/kit'

export default defineNuxtPlugin(() => {
  addVitePlugin({
    name: 'custom-jsx-transform',
    // This configures esbuild for specific files
    config(config) {
      // Make sure esbuild options exist
      if (!config.esbuild) config.esbuild = {}
      
      return config
    },
    // This hook allows you to configure how specific files are processed
    transform(code, id) {
      // Check if the file matches your pattern (e.g., files in assets/custom/)
      if (id.includes('assets/custom') && (id.endsWith('.jsx') || id.endsWith('.tsx'))) {
        // You can parse the file to check for the comment directives
        // This is a simplified example - you might need more robust parsing
        if (code.includes('@jsxImportSource ~/assets/custom/customJsx')) {
          // Return the code with custom transformation options
          return {
            code,
            map: null,
            // Tell Vite this file needs special JSX handling
            customTransformOptions: {
              jsx: 'automatic',
              jsxImportSource: '~/assets/custom/customJsx'
            }
          }
        }
      }
      
      // Return null to let other plugins or the default behavior handle the file
      return null
    }
  })
})

// plugins/custom-jsx-plugin.js
import { defineNuxtPlugin, addVitePlugin } from '@nuxt/kit'

export default defineNuxtPlugin(() => {
  addVitePlugin({
    name: 'custom-jsx-transform',
    // This configures esbuild for specific files
    config(config) {
      // Make sure esbuild options exist
      if (!config.esbuild) config.esbuild = {}
      
      return config
    },
    // This hook allows you to configure how specific files are processed
    transform(code, id) {
      // Check if the file matches your pattern (e.g., files in assets/custom/)
      if (id.includes('assets/custom') && (id.endsWith('.jsx') || id.endsWith('.tsx'))) {
        // You can parse the file to check for the comment directives
        // This is a simplified example - you might need more robust parsing
        if (code.includes('@jsxImportSource ~/assets/custom/customJsx')) {
          // Return the code with custom transformation options
          return {
            code,
            map: null,
            // Tell Vite this file needs special JSX handling
            customTransformOptions: {
              jsx: 'automatic',
              jsxImportSource: '~/assets/custom/customJsx'
            }
          }
        }
      }
      
      // Return null to let other plugins or the default behavior handle the file
      return null
    }
  })
})

Then, in your nuxt.config.ts file, you would register this plugin:

export default defineNuxtConfig({
  // Register your custom plugin
  plugins: [
    '~/plugins/custom-jsx-plugin'
  ],
  
  // You might also want to configure the global Vite JSX settings
  vite: {
    plugins: [
      // You can also add the plugin directly here if preferred
    ],
    // Default JSX configuration (for files not matching your custom pattern)
    vueJsx: {
      // Vue JSX options
    }
  }
})

export default defineNuxtConfig({
  // Register your custom plugin
  plugins: [
    '~/plugins/custom-jsx-plugin'
  ],
  
  // You might also want to configure the global Vite JSX settings
  vite: {
    plugins: [
      // You can also add the plugin directly here if preferred
    ],
    // Default JSX configuration (for files not matching your custom pattern)
    vueJsx: {
      // Vue JSX options
    }
  }
})

Alternatively, you can use the addVitePlugin function directly in a Nuxt module:

// modules/custom-jsx.ts
import { defineNuxtModule, addVitePlugin } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'custom-jsx-transform',
    configKey: 'customJsx'
  },
  defaults: {
    // Default options for your module
    include: 'assets/custom/**/*.{jsx,tsx}'
  },
  setup(options) {
    // Add your custom Vite plugin
    addVitePlugin({
      name: 'custom-jsx-transform',
      // Plugin implementation as shown above
      transform(code, id) {
        // Use the include pattern from options
        const { minimatch } = require('minimatch')
        if (minimatch(id, options.include) && 
            (code.includes('@jsxImportSource') || code.includes('@jsxRuntime'))) {
          // Custom transformation logic
        }
        return null
      }
    })
  }
})

// modules/custom-jsx.ts
import { defineNuxtModule, addVitePlugin } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'custom-jsx-transform',
    configKey: 'customJsx'
  },
  defaults: {
    // Default options for your module
    include: 'assets/custom/**/*.{jsx,tsx}'
  },
  setup(options) {
    // Add your custom Vite plugin
    addVitePlugin({
      name: 'custom-jsx-transform',
      // Plugin implementation as shown above
      transform(code, id) {
        // Use the include pattern from options
        const { minimatch } = require('minimatch')
        if (minimatch(id, options.include) && 
            (code.includes('@jsxImportSource') || code.includes('@jsxRuntime'))) {
          // Custom transformation logic
        }
        return null
      }
    })
  }
})

This approach leverages Nuxt's integration with Vite plugins as documented in Nuxt Kit Builder and follows the pattern shown in the Using Vite Plugins in Nuxt guide. Note that this is a simplified example and you might need to adjust it based on your specific requirements and the exact behavior of the JSX transformation you need. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@300276460386648075> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

🐾PowOP•2w ago

@kapa.ai How would adding programmatic jsx transpilation using either esbuild or babel to this plugin work?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources and our previous conversation, I can provide guidance on adding programmatic JSX transpilation to your custom Vite plugin using either esbuild or babel. However, the knowledge sources don't contain complete details about this specific implementation, so I'll provide a conceptual approach based on what's available. Adding Programmatic JSX Transpilation To extend your custom plugin with programmatic JSX transpilation, you would need to: Using esbuild for transpilation

// plugins/custom-jsx-plugin.js
import { defineNuxtPlugin, addVitePlugin } from '@nuxt/kit'
import * as esbuild from 'esbuild'
export default defineNuxtPlugin(() => {
  addVitePlugin({
    name: 'custom-jsx-transform',
    async transform(code, id) {
      // Check if the file matches your pattern
      if (id.includes('assets/custom') && (id.endsWith('.jsx') || id.endsWith('.tsx'))) {
        // Check for JSX comment directives
        const jsxImportSourceMatch = code.match(/@jsxImportSource\s+([^\s]+)/)
        const jsxRuntimeMatch = code.match(/@jsxRuntime\s+([^\s]+)/)
        
        if (jsxImportSourceMatch || jsxRuntimeMatch) {
          try {
            // Extract the custom JSX configuration from comments
            const jsxImportSource = jsxImportSourceMatch ? jsxImportSourceMatch[1] : undefined
            const jsxRuntime = jsxRuntimeMatch ? jsxRuntimeMatch[1] : undefined
            
            // Use esbuild to transform the code with custom JSX settings
            const result = await esbuild.transform(code, {
              loader: id.endsWith('.tsx') ? 'tsx' : 'jsx',
              jsx: jsxRuntime || 'automatic',
              jsxImportSource: jsxImportSource,
              format: 'esm',
              sourcefile: id,
              sourcemap: 'inline'
            })
            
            return {
              code: result.code,
              map: result.map
            }
          } catch (error) {
            console.error(`Error transforming JSX in ${id}:`, error)
            return null
          }
        }
      }
      return null
    }
  })
})

// plugins/custom-jsx-plugin.js
import { defineNuxtPlugin, addVitePlugin } from '@nuxt/kit'
import * as esbuild from 'esbuild'
export default defineNuxtPlugin(() => {
  addVitePlugin({
    name: 'custom-jsx-transform',
    async transform(code, id) {
      // Check if the file matches your pattern
      if (id.includes('assets/custom') && (id.endsWith('.jsx') || id.endsWith('.tsx'))) {
        // Check for JSX comment directives
        const jsxImportSourceMatch = code.match(/@jsxImportSource\s+([^\s]+)/)
        const jsxRuntimeMatch = code.match(/@jsxRuntime\s+([^\s]+)/)
        
        if (jsxImportSourceMatch || jsxRuntimeMatch) {
          try {
            // Extract the custom JSX configuration from comments
            const jsxImportSource = jsxImportSourceMatch ? jsxImportSourceMatch[1] : undefined
            const jsxRuntime = jsxRuntimeMatch ? jsxRuntimeMatch[1] : undefined
            
            // Use esbuild to transform the code with custom JSX settings
            const result = await esbuild.transform(code, {
              loader: id.endsWith('.tsx') ? 'tsx' : 'jsx',
              jsx: jsxRuntime || 'automatic',
              jsxImportSource: jsxImportSource,
              format: 'esm',
              sourcefile: id,
              sourcemap: 'inline'
            })
            
            return {
              code: result.code,
              map: result.map
            }
          } catch (error) {
            console.error(`Error transforming JSX in ${id}:`, error)
            return null
          }
        }
      }
      return null
    }
  })
})

Using babel for transpilation

// plugins/custom-jsx-plugin.js
import { defineNuxtPlugin, addVitePlugin } from '@nuxt/kit'
import * as babel from '@babel/core'
export default defineNuxtPlugin(() => {
  addVitePlugin({
    name: 'custom-jsx-transform',
    async transform(code, id) {
      // Check if the file matches your pattern
      if (id.includes('assets/custom') && (id.endsWith('.jsx') || id.endsWith('.tsx'))) {
        // Check for JSX comment directives
        const jsxImportSourceMatch = code.match(/@jsxImportSource\s+([^\s]+)/)
        const jsxRuntimeMatch = code.match(/@jsxRuntime\s+([^\s]+)/)
        
        if (jsxImportSourceMatch || jsxRuntimeMatch) {
          try {
            // Extract the custom JSX configuration from comments
            const jsxImportSource = jsxImportSourceMatch ? jsxImportSourceMatch[1] : undefined
            const jsxRuntime = jsxRuntimeMatch ? jsxRuntimeMatch[1] : 'automatic'
            
            // Configure babel options
            const babelOptions = {
              filename: id,
              sourceMaps: true,
              sourceFileName: id,
              plugins: [
                ['@babel/plugin-transform-react-jsx', {
                  runtime: jsxRuntime,
                  importSource: jsxImportSource,
                  throwIfNamespace: false
                }]
              ]
            }
            
            // Transform with babel
            const result = await babel.transformAsync(code, babelOptions)
            
            return {
              code: result.code,
              map: result.map
            }
          } catch (error) {
            console.error(`Error transforming JSX in ${id}:`, error)
            return null
          }
        }
      }
      return null
    }
  })
})

// plugins/custom-jsx-plugin.js
import { defineNuxtPlugin, addVitePlugin } from '@nuxt/kit'
import * as babel from '@babel/core'
export default defineNuxtPlugin(() => {
  addVitePlugin({
    name: 'custom-jsx-transform',
    async transform(code, id) {
      // Check if the file matches your pattern
      if (id.includes('assets/custom') && (id.endsWith('.jsx') || id.endsWith('.tsx'))) {
        // Check for JSX comment directives
        const jsxImportSourceMatch = code.match(/@jsxImportSource\s+([^\s]+)/)
        const jsxRuntimeMatch = code.match(/@jsxRuntime\s+([^\s]+)/)
        
        if (jsxImportSourceMatch || jsxRuntimeMatch) {
          try {
            // Extract the custom JSX configuration from comments
            const jsxImportSource = jsxImportSourceMatch ? jsxImportSourceMatch[1] : undefined
            const jsxRuntime = jsxRuntimeMatch ? jsxRuntimeMatch[1] : 'automatic'
            
            // Configure babel options
            const babelOptions = {
              filename: id,
              sourceMaps: true,
              sourceFileName: id,
              plugins: [
                ['@babel/plugin-transform-react-jsx', {
                  runtime: jsxRuntime,
                  importSource: jsxImportSource,
                  throwIfNamespace: false
                }]
              ]
            }
            
            // Transform with babel
            const result = await babel.transformAsync(code, babelOptions)
            
            return {
              code: result.code,
              map: result.map
            }
          } catch (error) {
            console.error(`Error transforming JSX in ${id}:`, error)
            return null
          }
        }
      }
      return null
    }
  })
})

Integration with Nuxt Configuration To properly integrate this with your Nuxt project, you would need to: 1. Install the necessary dependencies: - For esbuild: npm install esbuild - For babel: npm install @babel/core @babel/plugin-transform-react-jsx 2. Register your plugin in nuxt.config.ts:

export default defineNuxtConfig({
  plugins: [
    '~/plugins/custom-jsx-plugin'
  ],
  vite: {
    // Exclude these files from Vue's JSX processing
    vueJsx: {
      exclude: ['**/assets/custom/**']
    }
  }
})

export default defineNuxtConfig({
  plugins: [
    '~/plugins/custom-jsx-plugin'
  ],
  vite: {
    // Exclude these files from Vue's JSX processing
    vueJsx: {
      exclude: ['**/assets/custom/**']
    }
  }
})

This approach leverages Nuxt's integration with Vite plugins as documented in Nuxt Kit Builder and follows the pattern shown in the Using Vite Plugins in Nuxt guide. Note that this implementation is conceptual and might need adjustments based on your specific requirements and the exact behavior of the JSX transformation you need. The knowledge sources don't provide complete details about implementing custom JSX transpilation in Nuxt plugins. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@300276460386648075> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

🐾PowOP•2w ago

Update if anybody is reading this: Sadly for time reasons it was faster to convert all my jsx code by hand to manual function calls to my runtime

Gaming

Programming

How to apply esbuild jsxImportSource file overwrite?

Did you find this page helpful?