Use import/export instead of require()/module.exports

Author: mrxz

.eslintrc.json

@@ -4,6 +4,9 @@
     "ecmaVersion": 12
   },
   "rules": {
+    /* To work towards no-build. */
+    "import/extensions": ["warn", "always", { "js": "always" }],
+
     /* These rules are incompatible with ES5. */
     "no-var": "off",
     "object-shorthand": "off",
@@ -36,8 +39,14 @@
         The exception is that ES6 classes are used sparingly - see exceptions below. */
       "files": ["./src/**/*.js"],
       "parserOptions": {
-        "sourceType": "script",
-        "ecmaVersion": 5
+        "sourceType": "module",
+        "ecmaVersion": 6
+      }
+    },
+    {
+      "files": ["./src/utils/index.js"],
+      "parserOptions": {
+        "ecmaVersion": 11
       }
     },
     {

src/components/anchored.js

@@ -1,6 +1,6 @@
 /* global THREE, XRRigidTransform, localStorage */
-var registerComponent = require('../core/component').registerComponent;
-var utils = require('../utils/');
+import { registerComponent } from '../core/component.js';
+import * as utils from '../utils/index.js';
 var warn = utils.debug('components:anchored:warn');
 
 /**
@@ -9,7 +9,7 @@ var warn = utils.debug('components:anchored:warn');
  * Once anchored the entity remains to a fixed position in real-world space.
  * If the anchor is persistent, the anchor positioned remains across sessions or until the browser data is cleared.
  */
-module.exports.Component = registerComponent('anchored', {
+export var Component = registerComponent('anchored', {
   schema: {
     persistent: {default: false}
   },

src/components/animation.js

@@ -1,8 +1,7 @@
-var anime = require('super-animejs').default;
-var components = require('../core/component').components;
-var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../lib/three');
-var utils = require('../utils');
+import THREE from '../lib/three.js';
+import anime from 'super-animejs';
+import { registerComponent, components } from '../core/component.js';
+import * as utils from '../utils/index.js';
 
 var colorHelperFrom = new THREE.Color();
 var colorHelperTo = new THREE.Color();
@@ -39,7 +38,7 @@ var STRING_OBJECT3D = 'object3D';
  * @member {object} animation - anime.js instance.
  * @member {boolean} animationIsPlaying - Control if animation is playing.
  */
-module.exports.Component = registerComponent('animation', {
+export var Component = registerComponent('animation', {
   schema: {
     autoplay: {default: true},
     delay: {default: 0},

src/components/camera.js

@@ -1,11 +1,11 @@
-var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../lib/three');
+import THREE from '../lib/three.js';
+import { registerComponent } from '../core/component.js';
 
 /**
  * Camera component.
  * Pairs along with camera system to handle tracking the active camera.
  */
-module.exports.Component = registerComponent('camera', {
+export var Component = registerComponent('camera', {
   schema: {
     active: {default: true},
     far: {default: 10000},

src/components/cursor.js

@@ -1,6 +1,6 @@
 /* global THREE, MouseEvent, TouchEvent */
-var registerComponent = require('../core/component').registerComponent;
-var utils = require('../utils/');
+import { registerComponent } from '../core/component.js';
+import * as utils from '../utils/index.js';
 
 var EVENTS = {
   CLICK: 'click',
@@ -41,7 +41,7 @@ var CANVAS_HOVER_CLASS = 'a-mouse-cursor-hover';
  * @member {Element} intersectedEl - Currently-intersected entity. Used to keep track to
  *         emit events when unintersecting.
  */
-module.exports.Component = registerComponent('cursor', {
+export var Component = registerComponent('cursor', {
   dependencies: ['raycaster'],
 
   schema: {

src/components/generic-tracked-controller-controls.js

@@ -1,9 +1,5 @@
-var registerComponent = require('../core/component').registerComponent;
-
-var trackedControlsUtils = require('../utils/tracked-controls');
-var checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;
-var emitIfAxesChanged = trackedControlsUtils.emitIfAxesChanged;
-var onButtonEvent = trackedControlsUtils.onButtonEvent;
+import { registerComponent } from '../core/component.js';
+import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';
 
 var GAMEPAD_ID_PREFIX = 'generic';
 
@@ -33,7 +29,7 @@ var INPUT_MAPPING = {
  * controller buttons: trackpad, trigger
  * Load a controller model and highlight the pressed buttons.
  */
-module.exports.Component = registerComponent('generic-tracked-controller-controls', {
+export var Component = registerComponent('generic-tracked-controller-controls', {
   schema: {
     hand: {default: ''},  // This informs the degenerate arm model.
     defaultModel: {default: true},

src/components/geometry.js

@@ -1,15 +1,14 @@
-var geometries = require('../core/geometry').geometries;
-var geometryNames = require('../core/geometry').geometryNames;
-var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../lib/three');
+import THREE from '../lib/three.js';
+import { geometries, geometryNames } from '../core/geometry.js';
+import { registerComponent } from '../core/component.js';
 
 var dummyGeometry = new THREE.BufferGeometry();
 
 /**
  * Geometry component. Combined with material component to make a mesh in 3D object.
  * Extended with registered geometries.
  */
-module.exports.Component = registerComponent('geometry', {
+export var Component = registerComponent('geometry', {
   schema: {
     buffer: {default: true},
     primitive: {default: 'box', oneOf: geometryNames, schemaChange: true},

src/components/gltf-model.js

@@ -1,12 +1,12 @@
-var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../lib/three');
-var utils = require('../utils/');
+import THREE from '../lib/three.js';
+import { registerComponent } from '../core/component.js';
+import * as utils from '../utils/index.js';
 var warn = utils.debug('components:gltf-model:warn');
 
 /**
  * glTF model loader.
  */
-module.exports.Component = registerComponent('gltf-model', {
+export var Component = registerComponent('gltf-model', {
   schema: {type: 'model'},
 
   init: function () {

src/components/grabbable.js

@@ -1,4 +1,4 @@
-var registerComponent = require('../core/component').registerComponent;
+import { registerComponent } from '../core/component.js';
 
 registerComponent('grabbable', {
   init: function () {

src/components/hand-controls.js

@@ -1,7 +1,7 @@
 /* global THREE */
-var registerComponent = require('../core/component').registerComponent;
+import { registerComponent } from '../core/component.js';
+import { AFRAME_CDN_ROOT } from '../constants/index.js';
 
-var AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;
 // Found at https://github.com/aframevr/assets.
 var MODEL_URLS = {
   toonLeft: AFRAME_CDN_ROOT + 'controllers/hands/leftHand.glb',
@@ -48,7 +48,7 @@ EVENTS[ANIMATIONS.point] = 'pointing';
  *
  * @property {string} Hand mapping (`left`, `right`).
  */
-module.exports.Component = registerComponent('hand-controls', {
+export var Component = registerComponent('hand-controls', {
   schema: {
     color: {default: 'white', type: 'color'},
     hand: { default: 'left' },