From 1791c1b66b4b65da85f6dca83a1c49e6761dbd2e Mon Sep 17 00:00:00 2001
From: Vincent Fretin <vincent.fretin@gmail.com>
Date: Mon, 3 Feb 2025 18:14:41 +0100
Subject: [PATCH] Expose ES module, remove browserify mention and use import
 syntax in documentation (#5654)

* Expose ES module, remove browserify mention and use ES syntax in documentation

* simply use require('aframe') to require the cjs build

* add missing quote
---
 README.md                         | 2 +-
 docs/components/look-controls.md  | 4 ----
 docs/core/globals.md              | 5 ++---
 docs/introduction/installation.md | 6 +++---
 package.json                      | 9 ++++++++-
 tests/node/test.js                | 5 ++---
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index ac7957b61b5..6b27b677d42 100644
--- a/README.md
+++ b/README.md
@@ -171,7 +171,7 @@ npm install --save aframe
 ```
 
 ```js
-require('aframe')  // e.g., with Browserify or Webpack.
+import AFRAME from 'aframe';  // e.g., with Webpack or Vite.
 ```
 
 ## Local Development
diff --git a/docs/components/look-controls.md b/docs/components/look-controls.md
index 8ab6b30fcb5..1c65da1e937 100644
--- a/docs/components/look-controls.md
+++ b/docs/components/look-controls.md
@@ -51,10 +51,6 @@ controls how we want (e.g., limit the pitch on touch, reverse one axis). If we
 were to include every possible configuration into the core component, we would
 be left maintaining a wide array of flags.
 
-The component lives within a Browserify/Webpack context so you'll need to
-replace the `require` statements with A-Frame globals (e.g.,
-`AFRAME.registerComponent`, `window.THREE`), and get rid of the `module.exports`.
-
 ## Caveats
 
 If you want to create your own component for look controls, you will have to
diff --git a/docs/core/globals.md b/docs/core/globals.md
index 12f2630310e..ba826a78398 100644
--- a/docs/core/globals.md
+++ b/docs/core/globals.md
@@ -8,8 +8,7 @@ source_code: src/index.js
 ---
 
 A-Frame exposes its public interface through the `window.AFRAME` browser
-global. This same interface is also exposed if requiring with CommonJS
-(`require('aframe')`).
+global. This same interface is also exposed when you import aframe (`import AFRAME from 'aframe'`).
 
 ## `AFRAME` Properties
 
@@ -56,7 +55,7 @@ It is possible to run A-Frame in [Node.js](https://nodejs.org/en/about) to get a
 ```js
 const cleanup = require('jsdom-global')();
 global.customElements = { define: function () {} };
-var aframe = require('aframe/src');
+const aframe = require('aframe');
 console.log(aframe.version);
 cleanup();
 ```
diff --git a/docs/introduction/installation.md b/docs/introduction/installation.md
index 46d0e3c0d94..7c31d5a00cd 100644
--- a/docs/introduction/installation.md
+++ b/docs/introduction/installation.md
@@ -90,11 +90,11 @@ We can also install A-Frame through npm:
 $ npm install aframe
 ```
 
-Then we can bundle A-Frame into our application. For example, with Browserify
-or Webpack:
+Then we can bundle A-Frame into our application. For example, with Webpack or
+Vite:
 
 ```js
-require('aframe');
+import AFRAME from 'aframe';
 ```
 
 [angle]: https://www.npmjs.com/package/angle
diff --git a/package.json b/package.json
index 8f5a10962c0..19d74a8a00b 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,14 @@
   "version": "1.6.0",
   "description": "A web framework for building virtual reality experiences.",
   "homepage": "https://aframe.io/",
-  "main": "dist/aframe-master.js",
+  "main": "./dist/aframe-master.js",
+  "module": "./dist/aframe-master.module.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/aframe-master.module.min.js",
+      "require": "./dist/aframe-master.js"
+    }
+  },
   "scripts": {
     "dev": "cross-env INSPECTOR_VERSION=dev webpack serve --port 8080",
     "dist": "node scripts/updateVersionLog.js && npm run dist:min && npm run dist:max && npm run dist:module",
diff --git a/tests/node/test.js b/tests/node/test.js
index 37e5aabc94e..c99728b0603 100644
--- a/tests/node/test.js
+++ b/tests/node/test.js
@@ -1,7 +1,6 @@
 /* eslint-env mocha */
 'use strict';
 
-const path = require('path');
 const assert = require('assert');
 
 suite('node acceptance tests', function () {
@@ -16,7 +15,7 @@ suite('node acceptance tests', function () {
   });
 
   test('can run in node', function () {
-    const aframe = require(path.join(process.cwd(), 'src'));
+    const aframe = require('aframe');
 
     assert.ok(aframe.version);
   });
@@ -25,7 +24,7 @@ suite('node acceptance tests', function () {
     let aframe;
 
     setup(function () {
-      aframe = require(path.join(process.cwd(), 'src'));
+      aframe = require('aframe');
     });
 
     test('isNodeEnvironment is true for node', function () {