Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow async loading of aframe library and interoperation with ES module libraries #5419

Closed
wants to merge 2 commits into from
Closed

Allow async loading of aframe library and interoperation with ES module libraries #5419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67c1c39
hack to fix async loading
chrisirhc Dec 20, 2023
fcdc59f
remove unnecessary change
chrisirhc Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/core/a-entity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ var MULTIPLE_COMPONENT_DELIMITER = '__';
var OBJECT3D_COMPONENTS = ['position', 'rotation', 'scale', 'visible'];
var ONCE = {once: true};

var _resolveReadyPromise;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can name just resolveReadyPromise. We don't use ampersand

var isReady = false;
var isReadyPromise = new Promise(function (resolve) {
_resolveReadyPromise = resolve;
});

function ready () {
isReady = true;
_resolveReadyPromise();
}
Comment on lines +14 to +23
Copy link
Contributor Author

@chrisirhc chrisirhc Dec 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at this again, it might make more sense for this "ready" logic to live in its own file/module that just governs whether the entire aframe library is ready. I can tidy this up.

This initial PR was only to gather and understand if there's interest/appetite for such a change.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sounds good. thanks. In an ideal world we would have a single build that can be loaded via modules (export, import) or script tag. As far as I know that's not possible, right?


/**
* Entity is a container object that components are plugged into to comprise everything in
* the scene. In A-Frame, they inherently have position, rotation, and scale.
Expand Down Expand Up @@ -67,6 +78,12 @@ class AEntity extends ANode {
return;
}

if (!isReady) {
isReadyPromise.then(
AEntity.prototype.doConnectedCallback.bind(this)
);
return;
}
AEntity.prototype.doConnectedCallback.call(this);
}

Expand Down Expand Up @@ -868,6 +885,7 @@ function getRotation (entityEl) {

AEntity.componentsUpdated = [];
AEntity.singlePropUpdate = {};
AEntity.ready = ready;

customElements.define('a-entity', AEntity);

Expand Down
11 changes: 9 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,6 @@ if (utils.device.isBrowserEnvironment) {
require('./style/rStats.css');
}

// Required before `AEntity` so that all components are registered.
var AScene = require('./core/scene/a-scene').AScene;
var components = require('./core/component').components;
var registerComponent = require('./core/component').registerComponent;
var registerGeometry = require('./core/geometry').registerGeometry;
Expand All @@ -81,8 +79,16 @@ require('./components/index'); // Register standard components.
require('./geometries/index'); // Register standard geometries.
require('./shaders/index'); // Register standard shaders.
require('./systems/index'); // Register standard systems.
// Required before `AEntity` so that all components are registered.
var AScene = require('./core/scene/a-scene').AScene;
var ANode = require('./core/a-node').ANode;
var AEntity = require('./core/a-entity').AEntity; // Depends on ANode and core components.
setTimeout(function () {
if (window.AFRAME_ASYNC) {
return;
}
AEntity.ready();
}, 0);

require('./core/a-assets');
require('./core/a-cubemap');
Expand All @@ -106,6 +112,7 @@ module.exports = window.AFRAME = {
components: components,
coreComponents: Object.keys(components),
geometries: require('./core/geometry').geometries,
ready: AEntity.ready.bind(AEntity),
registerComponent: registerComponent,
registerGeometry: registerGeometry,
registerPrimitive: registerPrimitive,
Expand Down
Loading