@lahmjs/plugin-kdu

// lahm.config.js
import kdu from '@lahmjs/plugin-kdu'

export default {
  plugins: [kdu()],
}

Options

export interface Options {
  include?: string | RegExp | (string | RegExp)[]
  exclude?: string | RegExp | (string | RegExp)[]

  isProduction?: boolean

  // options to pass on to kdu/compiler-sfc
  script?: Partial<Pick<SFCScriptCompileOptions, 'babelParserPlugins'>>
  template?: Partial<
    Pick<
      SFCTemplateCompileOptions,
      | 'compiler'
      | 'compilerOptions'
      | 'preprocessOptions'
      | 'preprocessCustomRequire'
      | 'transformAssetUrls'
    >
  >
  style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>

  /**
   * Transform Kdu SFCs into custom elements.
   * - `true`: all `*.kdu` imports are converted into custom elements
   * - `string | RegExp`: matched files are converted into custom elements
   *
   * @default /\.ce\.kdu$/
   */
  customElement?: boolean | string | RegExp | (string | RegExp)[]

  /**
   * Enable Kdu reactivity transform (experimental).
   * https://kdu-js.web.app/guide/extras/reactivity-transform.html
   * - `true`: transform will be enabled for all kdu,js(x),ts(x) files except
   *           those inside node_modules
   * - `string | RegExp`: apply to kdu + only matched files (will include
   *                      node_modules, so specify directories if necessary)
   * - `false`: disable in all cases
   *
   * @default false
   */
  reactivityTransform?: boolean | string | RegExp | (string | RegExp)[]

  /**
   * Use custom compiler-sfc instance. Can be used to force a specific version.
   */
  compiler?: typeof _compiler
}

Asset URL handling

When @lahmjs/plugin-kdu compiles the <template> blocks in SFCs, it also converts any encountered asset URLs into ESM imports.

For example, the following template snippet:

<img src="../image.png" />

Is the same as:

<script setup>
import _imports_0 from '../image.png'
</script>

<img :src="_imports_0" />

By default the following tag/attribute combinations are transformed, and can be configured using the template.transformAssetUrls option.

{
  video: ['src', 'poster'],
  source: ['src'],
  img: ['src'],
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. import imgUrl from '../image.png'.

Example for passing options to kdu/compiler-sfc:

import kdu from '@lahmjs/plugin-kdu'

export default {
  plugins: [
    kdu({
      template: {
        compilerOptions: {
          // ...
        },
        transformAssetUrls: {
          // ...
        },
      },
    }),
  ],
}

Example for transforming custom blocks

import kdu from '@lahmjs/plugin-kdu'
import yaml from 'js-yaml'

const kduI18nPlugin = {
  name: 'kdu-i18n',
  transform(code, id) {
    if (!/kdu&type=i18n/.test(id)) {
      return
    }
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(yaml.load(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  },
}

export default {
  plugins: [kdu(), kduI18nPlugin],
}

License

MIT