How to use the riot.component function in riot

// Import Polyfill
import "fetch-polyfill"

// Import Framework
import { component } from "riot"

// Import application with riot
import application from "./Presentation/application.riot"

// Start Application
component(application)( document.getElementById("application") )

function createRenderer(
  renderer,
  tagName,
  componentAPI,
  props = {},
  JSDOMOptions = {}
) {
  const cleanup = typeof document === 'undefined' ? jsDOMGlobal(null, JSDOMOptions) : () => noop
  const root = document.createElement(tagName)
  const element = component(componentAPI)(root, {
    ...props,
    isServer: true
  })
  const dispose = () => {
    // unmount the component
    element.unmount()
    // cleanup the DOM
    cleanup()
    // remove the old stored css
    CSS_BY_NAME.clear()
  }

  //reflect input value prop to attribute
  setUserInputAttributes(element)

  return renderer({

function createRenderer(renderer, tagName, componentAPI, props = {}) {
  const cleanup = jsDOMGlobal();
  const root = document.createElement(tagName);
  const element = riot.component(componentAPI)(root, props);
  const result = renderer({
    // serialize the component outer html
    html: root.outerHTML,
    // serialize all the generated css
    css: [...CSS_BY_NAME.values()].join('\n')
  });
  const dispose = () => {
    // unmount the component
    element.unmount();
    // cleanup the DOM
    cleanup();
    // remove the old stored css
    CSS_BY_NAME.clear();
  };

  // free the memory removing the stuff created in runtime

constructor() {
      // call the super generic HTMLElement class
      super()
      // create the shadow DOM
      this.shadow = this.attachShadow({ mode: 'open' })
      this.componentFactory = component({
        exports: tagImplementation,
        template
      })

      // append the css if necessary
      if (css) this.shadow.appendChild(createStyleNode(css))
    }

export const render = (Component, {
  container = document.body,
  target = container.appendChild(document.createElement('div')),
  ...options
} : renderOptions = {}) => {
  const ui = tagComponent(Component);
  let component = ui(target, options);
  mountedContainers.set(target, {target, component});
  return {
    get component() {
      return component
    },
    debug: (el = container) => console.log(prettyDOM(el)),
    container,
    unmount: () => cleanupAtContainer({ target, component}),
    rerender: (options) => {
      if(component) {
        component.unmount(true);
      }
      const newComponent = ui(target, options);
      mountedContainers.set(target, { target, component: newComponent })
      component = newComponent

},
        onBeforeMount() {
          this.interval = setInterval(() => {
            this.state.count ++
          }, 100)
        },
        onUnmounted() {
          clearInterval(this.interval)
        }
      }
    }

    const div = document.createElement('div')
    document.body.appendChild(div)

    component(api)(div)

    setTimeout(function() {
      const el = hotReload(api)[0]

      expect(el.state.count).to.be.equal(2)
      el.unmount()
      done()
    }, 210)
  })

import { register, mount, component } from 'riot';
import myTodo from './my-todo.js';
import todoItem from './todo-item.js';
import todoInput from './todo-input.js';

register('todo-item', todoItem);
mount('todo-item');

register('todo-input', todoInput);
mount('todo-input');

component(myTodo)(document.querySelector('my-todo'));

import { register, mount, component } from 'riot';
import pascalTriangle from './pascal-triangle.js';
import triangleItem from './triangle-item.js';

register('triangle-item', triangleItem);
mount('triangle-item');

component(pascalTriangle)(document.querySelector('pascal-triangle'));