From af8a6ac5132f1ad787c60775bb64d1c6ef6e7215 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Sun, 26 Jan 2025 12:04:54 +0100 Subject: [PATCH 1/8] Configure webpack dev server to serve /dist/aframe-master.module.min.js --- webpack.config.cjs | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/webpack.config.cjs b/webpack.config.cjs index d2557dbeeb3..14bbe0d5e97 100644 --- a/webpack.config.cjs +++ b/webpack.config.cjs @@ -19,8 +19,14 @@ module.exports = { port: process.env.PORT || 9000, hot: false, liveReload: true, - static: { - directory: 'examples' - } + static: [ + { + directory: 'examples' + }, + { + directory: 'dist', + publicPath: '/dist' + } + ] } }; From f115d0284f1d2f2071125afe22b97846c075a91e Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Sun, 26 Jan 2025 12:24:20 +0100 Subject: [PATCH 2/8] Add Teapot example (use importmap and import from three/addons) --- examples/boilerplate/teapot/index.html | 83 ++++++++++++++++++++++++++ examples/index.html | 1 + 2 files changed, 84 insertions(+) create mode 100644 examples/boilerplate/teapot/index.html diff --git a/examples/boilerplate/teapot/index.html b/examples/boilerplate/teapot/index.html new file mode 100644 index 00000000000..2ed0584d000 --- /dev/null +++ b/examples/boilerplate/teapot/index.html @@ -0,0 +1,83 @@ + + + + + Teapot • A-Frame + + + + + + + + + + + + + + + + + + diff --git a/examples/index.html b/examples/index.html index 5d97677b821..7d87fd0b639 100644 --- a/examples/index.html +++ b/examples/index.html @@ -157,6 +157,7 @@

Examples

  • 3D Model (glTF)
  • Anchor (Mixed Reality)
  • Real World Meshing (Mixed Reality)
    • +
  • Teapot (use importmap and import from three/addons)

    • Examples from Documentation

    From 3da06dd93ffac50d4c2732476777179022e1a83d Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Mon, 27 Jan 2025 11:03:34 +0100 Subject: [PATCH 3/8] Create the aframe-v{nextVersion}.module.min.js / aframe.module.min.js bundle in prerelease script --- scripts/release.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/release.js b/scripts/release.js index ab2770a4737..f40ddd9b5a3 100644 --- a/scripts/release.js +++ b/scripts/release.js @@ -12,16 +12,20 @@ if (!prevVersion || !nextVersion) { process.exit(1); } +let distModule; let distMin; let distMax; if (process.env.FOR_RELEASE) { + distModule = `${pkg.scripts['dist:module']} --output-filename aframe.module.min.js`; distMin = `${pkg.scripts['dist:min']} --output-filename aframe.min.js`; distMax = `${pkg.scripts['dist:max']} --output-filename aframe.js`; } else { + distModule = `${pkg.scripts['dist:module']} --output-filename aframe-v${nextVersion}.module.min.js`; distMin = `${pkg.scripts['dist:min']} --output-filename aframe-v${nextVersion}.min.js`; distMax = `${pkg.scripts['dist:max']} --output-filename aframe-v${nextVersion}.js`; } +execSync(distModule, {stdio: 'inherit'}); execSync(distMin, {stdio: 'inherit'}); execSync(distMax, {stdio: 'inherit'}); From b8c90f22dc91f0ebf8e311b835370a12e201e797 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Mon, 27 Jan 2025 11:04:06 +0100 Subject: [PATCH 4/8] Update super-three version in examples and docs in prerelease script --- scripts/release.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/scripts/release.js b/scripts/release.js index f40ddd9b5a3..68dbb92de2b 100644 --- a/scripts/release.js +++ b/scripts/release.js @@ -36,6 +36,14 @@ glob.sync(`dist/aframe*v${prevVersion}*`).forEach(fs.unlinkSync); var versionRegex = new RegExp(`${prevVersion.replace(/\./g, '\\.')}`, 'g'); glob.sync('docs/**/*.md').forEach(updateDoc); glob.sync('README.md').forEach(updateDoc); + +// Replace super-three version in examples, docs and README +var threeVersion = pkg.dependencies.three.split('@')[1]; +var threeVersionRegex = new RegExp('super-three@.*?/', 'g'); +glob.sync('examples/**/*.html').forEach(updateThreeVersion); +glob.sync('docs/**/*.md').forEach(updateThreeVersion); +glob.sync('README.md').forEach(updateThreeVersion); + function updateDoc (docFilename) { var contents = fs.readFileSync(docFilename, 'utf-8'); if (versionRegex.exec(contents)) { @@ -43,3 +51,11 @@ function updateDoc (docFilename) { fs.writeFileSync(docFilename, contents); } } + +function updateThreeVersion (docFilename) { + var contents = fs.readFileSync(docFilename, 'utf-8'); + if (threeVersionRegex.exec(contents)) { + contents = contents.replaceAll(threeVersionRegex, `super-three@${threeVersion}/`); + fs.writeFileSync(docFilename, contents); + } +} From 6b02a87cd75173b762db86ec52cbd519c200ff28 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Mon, 27 Jan 2025 11:49:39 +0100 Subject: [PATCH 5/8] Add the new ES module bundle and importmap to the faq --- docs/introduction/faq.md | 42 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/docs/introduction/faq.md b/docs/introduction/faq.md index b05f0cf61b4..50e20d06cdb 100644 --- a/docs/introduction/faq.md +++ b/docs/introduction/faq.md @@ -374,6 +374,48 @@ await import('aframe'); window.AFRAME.ready(); ``` +Since A-Frame 1.7.0, we provide an ES module bundle without three dependency. +This allows you to import from three and three/addons without having the +"Multiple instances of Three.js being imported." warning. +To use it you need to explicitly add the super-three dependency in the importmap. +If you update A-Frame later, be sure to also update the super-three version that matches the A-Frame version, simply by reading again that documentation. + +Here is an example of the importmap to use: + +```HTML + + + + +``` + +The [teapot example](https://aframe.io/aframe/examples/boilerplate/teapot/index.html) uses the above code. + +## "Multiple instances of Three.js being imported." warning + +See `Can I load A-Frame as an ES module?` above. + +As a library author of aframe components, be sure to configure your bundler configuration to produce a build with the three dependency declared as external if you're using any `import ... from three` in your code or any addons you import like `import ... from three/addons/...js`. +You can look at the webpack configuration in the [aframe-extras repository](https://github.com/c-frame/aframe-extras) as an example. + ## What order does A-Frame render objects in? [sortTransparentObjects]: ../components/renderer.md#sorttransparentobjects From 570f93e7229c8146fbeb88ae394e96ef345d9ae7 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Tue, 28 Jan 2025 11:44:41 +0100 Subject: [PATCH 6/8] Use super-three from node_modules when running on master with webpack-dev-server --- examples/boilerplate/teapot/index.html | 4 ++-- scripts/preghpages.js | 5 ++++- webpack.config.cjs | 4 ++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/examples/boilerplate/teapot/index.html b/examples/boilerplate/teapot/index.html index 2ed0584d000..c76cf7c170e 100644 --- a/examples/boilerplate/teapot/index.html +++ b/examples/boilerplate/teapot/index.html @@ -8,8 +8,8 @@ { "imports": { "aframe": "../../../dist/aframe-master.module.min.js", - "three": "https://cdn.jsdelivr.net/npm/super-three@0.172.0/build/three.module.js", - "three/addons/": "https://cdn.jsdelivr.net/npm/super-three@0.172.0/examples/jsm/", + "three": "../../../super-three-package/build/three.module.js", + "three/addons/": "../../../super-three-package/examples/jsm/", "aframe-extras/controls": "https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.x/dist/aframe-extras.controls.min.js" } } diff --git a/scripts/preghpages.js b/scripts/preghpages.js index 8100fa1977c..a3acbcbde56 100755 --- a/scripts/preghpages.js +++ b/scripts/preghpages.js @@ -5,6 +5,9 @@ const path = require('path'); const shell = require('shelljs'); const replaceInFileSync = require('replace-in-file').replaceInFileSync; +const pkg = require('../package.json'); +const threeVersion = pkg.dependencies.three.split('@')[1]; + const rootDir = path.join(__dirname, '..'); shell.cd(rootDir); @@ -15,7 +18,6 @@ shell.cp('-r', [ '.nojekyll', 'dist', 'examples', - '*.html', '*.md' ], 'gh-pages'); @@ -28,3 +30,4 @@ function htmlReplace (before, after) { } htmlReplace('dist/aframe-master.js', 'dist/aframe-master.min.js'); +htmlReplace(/\.\.\/\.\.\/\.\.\/super-three-package/g, `https://cdn.jsdelivr.net/npm/super-three@${threeVersion}`); diff --git a/webpack.config.cjs b/webpack.config.cjs index 14bbe0d5e97..0916449c561 100644 --- a/webpack.config.cjs +++ b/webpack.config.cjs @@ -26,6 +26,10 @@ module.exports = { { directory: 'dist', publicPath: '/dist' + }, + { + directory: 'node_modules/three/', + publicPath: '/super-three-package' } ] } From 92617bcce91f3484c3a612847985815030b12d52 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Tue, 28 Jan 2025 11:51:27 +0100 Subject: [PATCH 7/8] Rename example to importmap --- docs/introduction/faq.md | 2 +- examples/boilerplate/{teapot => importmap}/index.html | 4 ++-- examples/index.html | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename examples/boilerplate/{teapot => importmap}/index.html (96%) diff --git a/docs/introduction/faq.md b/docs/introduction/faq.md index 50e20d06cdb..c54166541c0 100644 --- a/docs/introduction/faq.md +++ b/docs/introduction/faq.md @@ -407,7 +407,7 @@ Here is an example of the importmap to use: ``` -The [teapot example](https://aframe.io/aframe/examples/boilerplate/teapot/index.html) uses the above code. +The [importmap example](https://aframe.io/aframe/examples/boilerplate/importmap/index.html) uses the above code. ## "Multiple instances of Three.js being imported." warning diff --git a/examples/boilerplate/teapot/index.html b/examples/boilerplate/importmap/index.html similarity index 96% rename from examples/boilerplate/teapot/index.html rename to examples/boilerplate/importmap/index.html index c76cf7c170e..3fd82b938bd 100644 --- a/examples/boilerplate/teapot/index.html +++ b/examples/boilerplate/importmap/index.html @@ -2,8 +2,8 @@ - Teapot • A-Frame - + Importmap • A-Frame +