add catch code

[maronghai]

1. add catch code

import { reduceConfigs } from 'reduce-configs'
import { compile, compileClient } from 'pug'
export const PLUGIN_PUG_NAME = 'rsbuild:pug'

export const pluginPug = (options) => ({
  name: PLUGIN_PUG_NAME,

  async setup(api) {
    const VUE_SFC_REGEXP = /\.vue$/

    const pugOptions = reduceConfigs({
      initial: {
        doctype: 'html',
        compileDebug: false
      },
      config: options.pugOptions
    })

    api.transform({ test: /\.pug$/ }, ({ code, resourcePath, addDependency }) => {
      const options = {
        filename: resourcePath,
        ...pugOptions
      }

      if (VUE_SFC_REGEXP.test(resourcePath)) {
        let template
        try {
          template = compile(code, options)
          const { dependencies } = template
          if (dependencies) dependencies.forEach(addDependency)
          return template()
        } catch (e) { // ! important Add Catch Code
          addDependency(e.filename)
          return '<pre>' + e.message + '</pre>'
        }
      }

      const templateCode = compileClient(code, options)
      return `${templateCode}; export default template;`
    })
  }
})

[chenjiahan]

Can you elaborate on this?

[maronghai]

1. Robust Error Handling:

   • Safely handles Pug template compilation failures
   • Prevents build process crashes due to template errors

2. Developer-Friendly Error Display:

   try {
     const template = compile(code, options)
     template?.dependencies?.forEach(addDependency)
     return template()
   } catch (e) {
     console.error(e)
     addDependency(e.filename)
     return '<pre>' + e.message + '</pre>'
   }

   When compilation fails:

   • Logs the error for debugging
   • Adds the problematic file as a dependency (so it can trigger rebuilds)
   • Returns the error message in a <pre> tag, which:
     • Preserves formatting of the error message
     • Makes it visible in the browser during development
     • Helps developers quickly identify what went wrong

3. Dependency Tracking Maintenance:

   • Maintains file dependencies even during compilation failures
   • Ensures proper rebuild triggers when errors are fixed

This error handling approach is particularly valuable during development, providing a better developer experience without server crashes due to template errors.