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

.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,15 @@
         The exception is that ES6 classes are used sparingly - see exceptions below. */
       "files": ["./src/**/*.js"],
       "parserOptions": {
-        "sourceType": "script",
-        "ecmaVersion": 5
+        "sourceType": "module",
+        "ecmaVersion": 6
+      }
+    },
+    {
+      /* This acts as a barrel file and uses 'export as', which is an ES11 feature */
+      "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' },

src/components/hand-tracking-controls.js

@@ -1,12 +1,9 @@
 /* global THREE, XRHand */
-var registerComponent = require('../core/component').registerComponent;
+import { registerComponent } from '../core/component.js';
+import { AEntity } from '../core/a-entity.js';
+import { checkControllerPresentAndSetup } from '../utils/tracked-controls.js';
+import { AFRAME_CDN_ROOT } from '../constants/index.js';
 
-var AEntity = require('../core/a-entity').AEntity;
-
-var trackedControlsUtils = require('../utils/tracked-controls');
-var checkControllerPresentAndSetup = trackedControlsUtils.checkControllerPresentAndSetup;
-
-var AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;
 var LEFT_HAND_MODEL_URL = AFRAME_CDN_ROOT + 'controllers/oculus-hands/v4/left.glb';
 var RIGHT_HAND_MODEL_URL = AFRAME_CDN_ROOT + 'controllers/oculus-hands/v4/right.glb';
 
@@ -48,7 +45,7 @@ var PINCH_END_DISTANCE = 0.02;
 /**
  * Controls for hand tracking
  */
-module.exports.Component = registerComponent('hand-tracking-controls', {
+export var Component = registerComponent('hand-tracking-controls', {
   schema: {
     hand: {default: 'right', oneOf: ['left', 'right']},
     modelStyle: {default: 'mesh', oneOf: ['dots', 'mesh']},

src/components/hand-tracking-grab-controls.js

@@ -1,5 +1,5 @@
-var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../lib/three');
+import { registerComponent } from '../core/component.js';
+import THREE from '../lib/three.js';
 
 registerComponent('hand-tracking-grab-controls', {
   schema: {

src/components/hide-on-enter-ar.js

@@ -1,6 +1,6 @@
-var register = require('../core/component').registerComponent;
+import { registerComponent as register } from '../core/component.js';
 
-module.exports.Component = register('hide-on-enter-ar', {
+export var Component = register('hide-on-enter-ar', {
   init: function () {
     var self = this;
     this.el.sceneEl.addEventListener('enter-vr', function () {

src/components/hide-on-enter-vr.js

@@ -1,6 +1,6 @@
-var register = require('../core/component').registerComponent;
+import { registerComponent as register } from '../core/component.js';
 
-module.exports.Component = register('hide-on-enter-vr', {
+export var Component = register('hide-on-enter-vr', {
   init: function () {
     var self = this;
     this.el.sceneEl.addEventListener('enter-vr', function () {

src/components/hp-mixed-reality-controls.js

@@ -1,16 +1,12 @@
-var registerComponent = require('../core/component').registerComponent;
-var THREE = require('../lib/three');
-
-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 THREE from '../lib/three.js';
+import { AFRAME_CDN_ROOT } from '../constants/index.js';
+import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';
 
 // See Profiles Registry:
 // https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry
 // TODO: Add a more robust system for deriving gamepad name.
 var GAMEPAD_ID = 'hp-mixed-reality';
-var AFRAME_CDN_ROOT = require('../constants').AFRAME_CDN_ROOT;
 var HP_MIXED_REALITY_MODEL_GLB_BASE_URL = AFRAME_CDN_ROOT + 'controllers/hp/mixed-reality/';
 
 var HP_MIXED_REALITY_POSITION_OFFSET = {x: 0, y: 0, z: 0.06};
@@ -41,7 +37,7 @@ var INPUT_MAPPING_WEBXR = {
 /**
  * HP Mixed Reality Controls
  */
-module.exports.Component = registerComponent('hp-mixed-reality-controls', {
+export var Component = registerComponent('hp-mixed-reality-controls', {
   schema: {
     hand: {default: 'none'},
     model: {default: true}

src/components/index.js

@@ -1,57 +1,57 @@
-require('./animation');
-require('./anchored');
-require('./camera');
-require('./cursor');
-require('./geometry');
-require('./generic-tracked-controller-controls');
-require('./gltf-model');
-require('./grabbable');
-require('./hand-tracking-controls');
-require('./hand-tracking-grab-controls');
-require('./hand-controls');
-require('./hide-on-enter-ar');
-require('./hide-on-enter-vr');
-require('./hp-mixed-reality-controls');
-require('./layer');
-require('./laser-controls');
-require('./light');
-require('./line');
-require('./link');
-require('./logitech-mx-ink-controls');
-require('./look-controls');
-require('./magicleap-controls');
-require('./material');
-require('./obb-collider');
-require('./obj-model');
-require('./oculus-go-controls');
-require('./meta-touch-controls');
-require('./pico-controls');
-require('./position');
-require('./raycaster');
-require('./rotation');
-require('./scale');
-require('./shadow');
-require('./sound');
-require('./text');
-require('./tracked-controls');
-require('./visible');
-require('./valve-index-controls');
-require('./vive-controls');
-require('./vive-focus-controls');
-require('./wasd-controls');
-require('./windows-motion-controls');
+import './animation.js';
+import './anchored.js';
+import './camera.js';
+import './cursor.js';
+import './geometry.js';
+import './generic-tracked-controller-controls.js';
+import './gltf-model.js';
+import './grabbable.js';
+import './hand-tracking-controls.js';
+import './hand-tracking-grab-controls.js';
+import './hand-controls.js';
+import './hide-on-enter-ar.js';
+import './hide-on-enter-vr.js';
+import './hp-mixed-reality-controls.js';
+import './layer.js';
+import './laser-controls.js';
+import './light.js';
+import './line.js';
+import './link.js';
+import './logitech-mx-ink-controls.js';
+import './look-controls.js';
+import './magicleap-controls.js';
+import './material.js';
+import './meta-touch-controls.js';
+import './obb-collider.js';
+import './obj-model.js';
+import './oculus-go-controls.js';
+import './pico-controls.js';
+import './position.js';
+import './raycaster.js';
+import './rotation.js';
+import './scale.js';
+import './shadow.js';
+import './sound.js';
+import './text.js';
+import './tracked-controls.js';
+import './visible.js';
+import './valve-index-controls.js';
+import './vive-controls.js';
+import './vive-focus-controls.js';
+import './wasd-controls.js';
+import './windows-motion-controls.js';
 
-require('./scene/ar-hit-test');
-require('./scene/background');
-require('./scene/debug');
-require('./scene/device-orientation-permission-ui');
-require('./scene/embedded');
-require('./scene/inspector');
-require('./scene/fog');
-require('./scene/keyboard-shortcuts');
-require('./scene/pool');
-require('./scene/real-world-meshing');
-require('./scene/reflection');
-require('./scene/screenshot');
-require('./scene/stats');
-require('./scene/xr-mode-ui');
+import './scene/ar-hit-test.js';
+import './scene/background.js';
+import './scene/debug.js';
+import './scene/device-orientation-permission-ui.js';
+import './scene/embedded.js';
+import './scene/inspector.js';
+import './scene/fog.js';
+import './scene/keyboard-shortcuts.js';
+import './scene/pool.js';
+import './scene/real-world-meshing.js';
+import './scene/reflection.js';
+import './scene/screenshot.js';
+import './scene/stats.js';
+import './scene/xr-mode-ui.js';

src/components/laser-controls.js

@@ -1,5 +1,5 @@
-var registerComponent = require('../core/component').registerComponent;
-var utils = require('../utils/');
+import { registerComponent } from '../core/component.js';
+import * as utils from '../utils/index.js';
 
 registerComponent('laser-controls', {
   schema: {