How to use riot - 10 common examples

beforeAll( () => {
        expect(mockFn.mock.calls.length).toBe(0);
        riot.mixin('messageMixin', messageMixin);
        // create mounting point 
        const elem = document.createElement('div');
        elem.className = "main-body";
        document.body.appendChild(elem)
        riot.mount(elem, {}, pageone);
    });

var riot = require('riot/riot.js')
require('./async')

module.exports = riot.tag('mount', '<div></div>', function (opts) {
  // It's important that the child tag will contain a proper
  // `this.parent` or `this.opts.parent` property which will
  // reference to the current tag
  var _opts = { parent: this }

  riot.mount(this.target, 'mount-child', _opts)[0]
})

riot.tag('mount-child', '{value}', function (opts) {
  var self = this

  self.value = ''

  self.asyncStart()
  setTimeout(function () {
    self.value = 'ok'
    self.update()
    self.asyncEnd()
  }, 10)
})

var riot = require('riot/riot.js')
require('./async')

module.exports = riot.tag('mount', '<div></div>', function (opts) {
  // It's important that the child tag will contain a proper
  // `this.parent` or `this.opts.parent` property which will
  // reference to the current tag
  var _opts = { parent: this }

  riot.mount(this.target, 'mount-child', _opts)[0]
})

riot.tag('mount-child', '{value}', function (opts) {
  var self = this

  self.value = ''

  self.asyncStart()
  setTimeout(function () {
    self.value = 'ok'

//   This issue needs more study...
      .filter(function (key) {
        return !~_this._ownPropKeys.concat(ignoreProps).indexOf(key);
      }).forEach(function (key) {
        _this[key] = typeof _this.parent[key] != 'function' || _this.parent[key]._inherited ? _this.parent[key] : hook(_this.parent, key);
      });
      getAllPropertyNames(_this.parent.opts).filter(function (key) {
        return !~_this._ownOptsKeys.indexOf(key) && key != 'riotTag';
      }).forEach(function (key) {
        _this.opts[key] = typeof _this.parent.opts[key] != 'function' || _this.parent.opts[key]._inherited ? _this.parent.opts[key] : hook(_this.parent, key);
      });
    });
  }
};

riot.tag2('time-picker-popup', '<ul> <li> {hh % 2 ? \'·\' : hh + \':00\'} </li> </ul> <ol class="{roundLeft: roundLeft}"> <li>{hh}:{mm}</li> <li>·</li> <li>10</li> <li>·</li> <li>20</li> <li>·</li> <li>30</li> <li>·</li> <li>40</li> <li>·</li> <li>50</li> <li>·</li> </ol>', 'time-picker-popup ul,[riot-tag="time-picker-popup"] ul,[data-is="time-picker-popup"] ul{ position: absolute; z-index: 1000; float: left; padding: 10px 0; margin: 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } time-picker-popup ul &gt; li,[riot-tag="time-picker-popup"] ul &gt; li,[data-is="time-picker-popup"] ul &gt; li{ padding: 0 15px; line-height: 16px; color: #666; position: relative; text-align: center; } time-picker-popup ol,[riot-tag="time-picker-popup"] ol,[data-is="time-picker-popup"] ol{ position: absolute; white-space: nowrap; z-index: 1001; list-style: none; padding: 3px 13px; margin: 0; color: white; text-decoration: none; background-color: #3879d9; cursor: pointer; border-top-right-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, .175); transition: left .2s; } time-picker-popup ol.roundLeft,[riot-tag="time-picker-popup"] ol.roundLeft,[data-is="time-picker-popup"] ol.roundLeft{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; } time-picker-popup ol &gt; li,[riot-tag="time-picker-popup"] ol &gt; li,[data-is="time-picker-popup"] ol &gt; li{ display: inline-block; margin: 0; padding: 0 2px; min-width: 13px; text-align: center; line-height: 24px; border-radius: 4px; } time-picker-popup ol &gt; li + li,[riot-tag="time-picker-popup"] ol &gt; li + li,[data-is="time-picker-popup"] ol &gt; li + li{ margin-left: -4px; color: rgba(255,255,255,.65) } time-picker-popup ol &gt; li:hover,[riot-tag="time-picker-popup"] ol &gt; li:hover,[data-is="time-picker-popup"] ol &gt; li:hover{ background-color: #528ce1; color: white; }', '', function (opts) {
  var _this = this;

  var ITEM_HEIGHT = 16;
  var popupWidth, popupHeight;
  var minutesPositions = [];

  this.hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'].map(function (hh) {
    return { hh: hh, mm: '00' };
  });
  this.value = opts.value || '00:00';
  this.hh = this.value.split(':')[0];
  this.mm = this.value.split(':')[1];
  this.top = 0;
  this.left = 0;
  this.top2 = 0;
  this.left2 = 0;

import riot from 'riot';

// components
import '../tags/frost-login-form.tag';
import '../tags/frost-signup-form.tag';
import '../tags/frost-logout-button.tag';
import '../tags/frost-create-status-form.tag';
import '../tags/frost-post-status.tag';
import '../tags/frost-public-timeline.tag';
import '../tags/frost-applications.tag';
import '../tags/frost-create-application-form.tag';

const socket = io(); /* headのscriptタグからsocket.ioを読み込んで使用している(妥協) */
const obs = riot.observable();

const mountOption = {obs: obs, socket: socket};

let userId;
const elements = document.getElementsByName('frost-userId');
if(elements.length != 0) {
	userId = elements.item(0).content;
}

socket.once('ready', (readyData) => {
	if (userId != null) {
		mountOption.userId = userId;
		socket.emit('rest', {request: {
			method: 'get', endpoint: `/users/${userId}`,
			headers: {'x-api-version': 1.0},
		}});

async function render() {
        try {
            let view = riot.render(options.mainTag, options.tagOpts);
            let regex = new RegExp('<' + options.mainTag + '.*<\/' + options.mainTag + '>');
            // Loading HTML file
            let content = await Q.denodeify(FS.readFile)(filePath);
            let rendered = content.toString().replace(regex, view);
            return callback(null, rendered);
        }
        catch (e) {
            console.log("App engine error: ", e, " Filepath: ", filePath, " Callback: ", callback);
            console.log(e.stack);
            return;
        }
    }

route('users/*', (screenName) =>
		changePage('user', { screenName }));

	route('posts/*', (postId) =>
		changePage('post', { postId }));

	route('*', () =>
		changePage('error', { message: 'page not found' }));

	loadTags();

	await waitRecaptcha(mixin.siteKey);

	// mount riot tags
	riot.mixin(mixin);
	riot.mount('*');

	route.start(true);

	// NOTE: move to error page by content of error metaData only when initialization
	if (mixin.error != null) {
		changePage('error');
	}
	// NOTE: move to target page by content of page metadata only when initialization
	else if (mixin.page != null) {
		changePage(mixin.page);
	}

})().catch(err => {
	console.log('何かがおかしいよ');

initialize () {
        // mount bar
        this._bar = new bar ();

        // mount riot tag
        this._mount = riot.mount (document.querySelector ('body').children[0], window.edenState)[0];
    }

})

  // Capture drop event
  document.addEventListener('drop', function (evt) {
    evt.preventDefault()
  })

  // Disable Pinch Zoom
  document.addEventListener('mousewheel', function (evt) {
    if (evt.ctrlKey) {
      evt.preventDefault()
    }
  })

  tags.search = riot.mount('.search', 'search')
  riot.mount('.list', 'list')
  riot.mount('.view', 'view')
})

}]
}]

import providers from '../js/providers'

// push the options of all providers to the view model
providers.forEach((p) => {
  sections.push({
    title: p.config.title,
    icon: 'bookmark',
    options: p.options
  })
})

// mount the application
riot.mount('*', { sections: sections })