How to use the aframe.registerSystem function in aframe

import * as AFRAME from 'aframe';
import * as SimplePeer from 'simple-peer';

AFRAME.registerSystem('peer', {
    schema: {
        connectionLostText: {type: 'selector', default: '#connection-lost'}
    },

    onAddStreamFunc: null,

    listeners: [],

    init: function() {
        this.data.connectionLostText.setAttribute('visible', 'false');
    },

    connect: function(sessionId) {
        const peer = new SimplePeer({ initiator: true, streams: [] });

        // peer._pc.onconnectionstatechange = () => {

import * as AFRAME from 'aframe';
import { AFrameEntityObserver } from './AFrameEntityObserver';
import { NetworkAdapter } from './NetworkAdapter';
import { SceneTree } from './SceneTree';

/**
 * The nsync system coordinates the network activity needed to keep all the
 * remote scenes synchronized. It stands for network synchronized.
 * TODO: Investigate takeRecords()
 */
export default AFRAME.registerSystem('nsync', {

  schema: {
    session: { default: 'room-101' },
    server: { default: 'localhost:9000' }
  },

  init() {
    this._uniqueId = 1;

    this._sceneTree = new SceneTree(this.el);
    this._network = new NetworkAdapter(this.data.session, this.data.server);
    this._network.onupdates = this._onupdates.bind(this);
    this._changes = [];
    this._collectChanges = this._collectChanges.bind(this);
    this._observer = new AFrameEntityObserver(this._collectChanges);

/*
    This component will allow the user to move and resize the screen
 */

import { THREE } from 'aframe';
import * as AFRAME from 'aframe';

window.console.log(AFRAME, THREE);

AFRAME.registerSystem('manipulate-source', {
    centerAllScreens: function() {
        const sources = document.querySelectorAll('[manipulate-source]');
        for(let i = 0; i

import AFRAME from 'aframe';
const THREE = AFRAME.THREE;

//keeps track of all pendulums, and colors them all when in sync
AFRAME.registerSystem('pendulum', {
  schema: {
  },
  init: function () {
    this.pendulums = [];
    this.totalDist = 10;
  },
  registerPendulum: function(pendulum) {
    this.pendulums.push(pendulum);
  },
  getSynchStatus: function() {
    return (this.totalDist < 1)? true : false;
  },
  tick: function (time, timeDelta) {
    if( Math.abs(this.pendulums[0].dampeningFactor) < 0.1 || Math.abs(this.pendulums[1].dampeningFactor) < 0.1 || Math.abs(this.pendulums[2].dampeningFactor) < 0.1 ){
      this.totalDist = 10;
      this.pendulums.forEach((p) => {

/*
    This component tracks the cursor position and updates the position of the entity accordingly
 */

import * as AFRAME from 'aframe';

AFRAME.registerSystem('cursor-position', {
    cursor: null,
    streamId: '',

    init: function() {
        setTimeout(() => {
            this.el.systems['peer'].on('cursor-position', (data) => {
                if (this.streamId !== data.streamId) {
                    this.streamId = data.streamId;

                    if (this.cursor) {
                        this.cursor.parentNode.removeChild(this.cursor);
                        this.cursor = null;
                    }

                    if (data.streamId === false) {
                        return;

import AFRAME from 'aframe';
const THREE = AFRAME.THREE;

import LaserFrag from '../shaders/LaserFrag.glsl';
import LaserVert from '../shaders/LaserVert.glsl';

import { setQuaternionFromDirection } from '../libs/Utils';

AFRAME.registerSystem('raycasterSystem', {
  schema: {
  },

  init: function () {
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();

    this.triggerDown = false;
    this.mouseDown = false;

    this.tmps = {
      v1: new THREE.Vector3(),
      v2: new THREE.Vector3()
    };

    const controller = document.querySelector('#controller');

/*
    This component displays a source. (a source being a screen)
 */

import * as AFRAME from 'aframe';

AFRAME.registerSystem('source', {
    assets: null,
    sources: null,

    id: 0,

    init: function() {
        window.setTimeout(() => {
            this.el.systems['peer'].onAddStreamFunc = this.onAddStream.bind(this);

            this.el.addEventListener('exit-vr', () => this.hideAll());

            this.el.addEventListener('peer-disconnected', () => this.hideAll());
        });
    },

    onAddStream: function(stream) {

register() {
        this.merge()
        registerSystem(this.name, this)
    }
}

import AFRAME from 'aframe';
const THREE = AFRAME.THREE;

AFRAME.registerSystem('sunSystem', {
  schema: {
    speed: {
      type: 'float'
    },
    skyRadius: {
      type: 'float'
    },
    timeOffset: {
      type: 'float',
      default: 0
    },
    fogColor: {
      type: 'color',
      default: '#ffffff'
    },
  },