How to use @riotjs/compiler - 10 common examples

import * as riot from 'riot';
import { registerPreprocessor } from '@riotjs/compiler';
import pageone from '../pageone/pageone.riot';

registerPreprocessor('css', 'sass', function (code, { options }) {
    const { file } = options

    console.log('Compile the sass code in', file)

    const { css } = sass.renderSync({
        data: code
    })

    return {
        code: css.toString(),
        map: null
    }
})

const mockFn = jest.fn();
// const messageMixin = {

function index(source) {
  // parse the user query
  const query = loaderUtils.getOptions(this) || {};

  // normalise the query object in case of question marks
  const opts = Object.keys(query).reduce(function(acc, key) {
    acc[key.replace('?', '')] = query[key];
    return acc
  }, {});

  // compile and generate sourcemaps
  const {code, map} = compiler.compile(
    source,
    {
      ...opts,
      file: this.resourcePath
    }
  );

  // generate the output code
  const output = `${code}${opts.hot ? hotReload(this.resourcePath) : ''}`;

  // cache this module
  if (this.cacheable) this.cacheable();

  // return code and sourcemap
  this.callback(null, output, map);
}

export default function(source) {
  // parse the user query
  const query = getOptions(this) || {}

  // normalise the query object in case of question marks
  const opts = Object.keys(query).reduce(function(acc, key) {
    acc[key.replace('?', '')] = query[key]
    return acc
  }, {})

  // compile and generate sourcemaps
  const {code, map} = compile(
    source,
    {
      ...opts,
      file: this.resourcePath
    }
  )

  // generate the output code
  // convert webpack's absolute path to a script-friendly string for hotReload
  const escapedPath = stringifyRequest(this, this.resourcePath)
  const output = `${code}${opts.hot ? hotReload(escapedPath) : ''}`

  // cache this module
  if (this.cacheable) this.cacheable()

  // return code and sourcemap

function index(source) {
  // parse the user query
  const query = getOptions(this) || {};

  // normalise the query object in case of question marks
  const opts = Object.keys(query).reduce(function(acc, key) {
    acc[key.replace('?', '')] = query[key];
    return acc
  }, {});

  // compile and generate sourcemaps
  const {code, map} = compile(
    source,
    {
      ...opts,
      file: this.resourcePath
    }
  );

  // generate the output code
  const output = `${code}${opts.hot ? hotReload(this.resourcePath) : ''}`;

  // cache this module
  if (this.cacheable) this.cacheable();

  // return code and sourcemap
  this.callback(null, output, map);
}

transform: async function(code, id) {
    if (!/\.riot/.test(id)) return null
    const result = await compiler.compile(code, {
      file: id
    })

    return {
      code: result.code,
      map: result.map
    }
  }
})

function() {
      try {
        const result = compile(content.join(''), {...opts, file})
        const { code } = transformSync(result.code, {
          inputSourceMap: result.map,
          sourceMaps: enableSourceMap ? 'inline' : false,
          babelrc: false,
          filename: file,
          plugins: [pluginCJS]
        })

        this.queue(code)
        this.emit('end')
      } catch (e) {
        this.emit('error', e)
      }
    }
  )

function(source, filename) {
    const {code} = compile(source, { file: filename })

    return transform(code, {
      presets: [
        [
          '@babel/preset-env',
          {
            modules: 'cjs',
            targets: {
              node: process.versions.node
            }
          }
        ]
      ]
    }).code
  },
  {

function(source, filename) {
    const {code} = compile(source, { file: filename });

    return transform(code, {
      presets: [
        [
          '@babel/preset-env',
          {
            modules: 'cjs',
            targets: {
              node: process.versions.node
            }
          }
        ]
      ]
    }).code
  },
  { exts: ['.riot'] }

function(source, filename) {
    let code = filename.endsWith('.riot') ? compile(source, { file: filename }).code : source;
    return transform(code, {
      presets: [
        [
          '@babel/preset-env',
          {
            modules: 'cjs',
            targets: {
              node: process.versions.node
            }
          }
        ]
      ]
    }).code
  },
  {

function compileFromString(string, options) {
  return compiler.compile(string, options)
}