index.js

import { compile } from '@riotjs/compiler'
import { Transformer } from '@parcel/plugin'
import sourceMap from '@parcel/source-map'
import { basename } from 'path'

const SourceMap = sourceMap.default
const CONFIG_FILES = ['.riotrc', '.riotrc.js', 'riot.config.js']
const PACKAGE_KEY = 'riot'

/**
 * Generate the hmr code depending on the tag generated by the compiler
 * @param   {string} path - path to the component file
 * @returns {string} the code needed to handle the riot hot reload
 */
function hotReload(path) {
  return `;(() => {
  if (module.hot) {
    const hotReload = require('@riotjs/hot-reload').default
    module.hot.accept()
    if (module.hot.data) {
      const component = require('./${path}').default;
      hotReload(component)
    }
  }
})()`
}

export default new Transformer({
  async loadConfig({ config }) {
    const riotConfig =
      (await config.getConfig(CONFIG_FILES, {
        packageKey: PACKAGE_KEY,
      })) || {}
    const shouldInvalidateOnStartup =
      (riotConfig?.filePath?.endsWith('.js')) ||
      riotConfig?.filePath?.endsWith(CONFIG_FILES[0])

    if (shouldInvalidateOnStartup) {
      config.invalidateOnStartup()
    }

    return riotConfig.contents || {}
  },
  async transform({ asset, config = {}, options }) {
    const source = await asset.getCode()
    const sourceMap = new SourceMap(options.projectRoot)

    const { code, map } = compile(source, {
      file: asset.filePath,
      ...config,
    })

    // the suffix will be added only for the HMR
    const suffix = config.hot ? hotReload(basename(asset.filePath)) : ''

    asset.type = 'js'
    asset.setCode(`${code}${suffix}`)
    asset.setMap(sourceMap.addVLQMap(map))

    return [asset]
  },
})