How to use the riot.tag function in riot

it('mixin', function () {
    riot.tag('test-tag', '<p>{ message }</p>');
  });
});

function registerTag(router) {
  riot.tag('route', '', '', '', function (opts) {
    this.calculateLevel = function (target) {
      var level = 0;
      if (target.parent) level += this.calculateLevel(target.parent);
      if (target.opts.__router_level) level += target.opts.__router_level;
      if (target.__router_tag) level += 1;
      return level;
    }.bind(this);

    this.normalizeTag = function (tag, api, options) {
      var result = tag(api, options);
      if (typeof result === 'string') {
        tag = result;
      } else {
        tag = result.tag || tag;
        api = result.api || api;
      }

import riot from 'riot'
import anime from 'animejs'
import { onMount, extend, getIndex, inheritFromParent, getProps } from './helpers'

export default riot.tag('animore', '', function() {
  let prevProps, index

  /**
   * Internal helpers
   */

  /**
   * Get the root element index from the parent node
   * @param { HTMLElement } root - tag root node
   */
  function updateIndex(root) {
    index = getIndex(root)
  }

  /**
   * Apply a flip animation comparing the root previous position with the current one

import riot from 'riot'

import html from './rf-input.html'

riot.tag('rf-input', html, function (opts) {
  this.mixin('rf-input-helpers', 'rf-base-input')
})

import riot from 'riot';

riot.tag('todo-app',

  `<h3>Todos</h3>
   
   
   <p>
     Want a second fully synchronized list? Just declare another list component:
     no code required, no events to wire up!
   </p>
   `,

  function(opts) {
    let dispatcher = this.opts.store.dispatcher;
    this.on('mount', () =&gt; dispatcher.trigger(dispatcher.INIT_TODOS));
  }

);

},{"../mixins/peoplelistObservable.js":2,"../tags/peoplecount.tag":4,"../tags/peoplelist.tag":5,"riot":1}],4:[function(require,module,exports){
var riot = require('riot');
module.exports = riot.tag('peoplecount', '<div><b>{{ title }}</b>: <span class="{ class }">{{ count }}</span></div>', function(opts) {var _this = this;

this.mixin('peoplelistObservable');

this.on('setCountStore', function (count) {
    _this.countArray = count;
    _this.update();
});
});

},{"riot":1}],5:[function(require,module,exports){
var riot = require('riot');

if ( thumbs[i].size.crop != true || thumbs[i].size.height == 0 || thumbs[i].size.width == 0 ) {
      return 0
    }
    let tmp_ar = thumbs[i].size.width / thumbs[i].size.height
    if (!ar)
      ar = tmp_ar
    else {
      if (ar - 0.01 > tmp_ar || ar + 0.01 < tmp_ar) {
        return 0
      }
    }
  }
  return ar
}

let tag = riot.tag('pte-editor', html, function (opts) {

  let mounted = false

  this.crop = (e) => {
    rc.trigger(events.CROP, jcrop.getSelection())
  }

  this.resize = () => {
    /*
     * Determine how big the image pane can be.
     * HEIGHT:
     * 40px (2 x 20px margin for editor)
     * - height of #actions
     * WIDTH:
     * should just be the width of #pte-editor-main
     */

<p>
     Want a second fully synchronized list? Just declare another list component:
     no code required, no events to wire up!
   </p>
   `,

  function(opts) {
    let dispatcher = this.opts.store.dispatcher;
    this.on('mount', () =&gt; dispatcher.trigger(dispatcher.INIT_TODOS));
  }

);


riot.tag('todo-form',

  `<form>
     <input placeholder="New Todo" type="text" name="input">
     <input value="Add Todo" type="submit">
   </form>
   <button>Clear Completed</button>`,

  function(opts) {
    let store = this.opts.store;
    let dispatcher = store.dispatcher;

    this.add = (e) =&gt; {
      if (this.input.value) {
        dispatcher.trigger(dispatcher.ADD_TODO, {title: this.input.value, done: false});
        this.input.value = ''
      }

var fs = require('fs')
var home = require('remote').require('app').getAppPath()
var path = require('path')

var readTemplate = function (name) {
  return fs.readFileSync(path.join(home, 'client/search/templates', name + '.html'), 'utf8')
}

var html = {
  search: readTemplate('search'),
  list: readTemplate('list'),
  view: readTemplate('view')
}

riot.tag('search', html.search, function (ctx) {
  var self = this
  this.shadowText = undefined

  client.on('hide', function () {
    self.previousValue = undefined
  })

  client.on('show', function () {
    self.search.select()
  })

  this.searchChanged = function (e) {
    self.shadowText = self.search.value.replace(/\ /g, '\u00a0')
    if (self.search.value) {
      var search = self.search.value.trim()
      if (self.previousValue && search === self.previousValue) return

{ size.label }
          { size.width }
          { size.height }
          { size.crop ? 'Yes' : 'No' }
        
      
    
  

`

let tag = riot.tag('pte-thumbnail-selector', html, function (opts) {
  this.printRGNames = (ratioGroup) => {
    return ratioGroup.map(t => {
      return t.size.label
    }).join(', ')
  }

  this.toggleAR =  (e) => {
    toggle(e.item.ratios)
    e.preventUpdate = true
  }

  this.toggleAll = (e) => {
    toggle(this.thumbnails)
    e.preventUpdate = true
  }