Merge pull request #965 from zeux/js-esm

js: Remove CJS modules and rename ESM modules to .js

Author: zeux

.github/workflows/build.yml

@@ -92,9 +92,8 @@ jobs:
       - name: check es5
         run: |
           npm install -g es-check@7.2.1
-          npx es-check es5 js/meshopt_decoder.js js/meshopt_encoder.js js/meshopt_simplifier.js js/meshopt_clusterizer.js
-          npx es-check --module es5 js/meshopt_decoder.module.js js/meshopt_encoder.module.js js/meshopt_simplifier.module.js js/meshopt_clusterizer.module.js
-          npx es-check es5 gltf/library.js
+          npx es-check --module es5 js/meshopt_decoder.js js/meshopt_encoder.js js/meshopt_simplifier.js js/meshopt_clusterizer.js
+          npx es-check --module es2020 gltf/library.js
 
   gltfpack:
     runs-on: ubuntu-latest

Makefile

@@ -137,7 +137,7 @@ format:
 formatjs:
 	prettier -w js/*.js gltf/*.js demo/*.html js/*.ts
 
-js: js/meshopt_decoder.js js/meshopt_decoder.module.js js/meshopt_encoder.js js/meshopt_encoder.module.js js/meshopt_simplifier.js js/meshopt_simplifier.module.js js/meshopt_clusterizer.js js/meshopt_clusterizer.module.js
+js: js/meshopt_decoder.js js/meshopt_encoder.js js/meshopt_simplifier.js js/meshopt_clusterizer.js
 
 symbols: $(BUILD)/amalgamated.so
 	nm $< -U -g
@@ -196,10 +196,12 @@ js/meshopt_encoder.js js/meshopt_simplifier.js js/meshopt_clusterizer.js:
 	sed -i "s#Built from meshoptimizer .*#Built from meshoptimizer $$(cat src/meshoptimizer.h | grep -Po '(?<=version )[0-9.]+')#" $@
 	python3 tools/wasmpack.py patch $@ wasm <$<
 
-js/%.module.js: js/%.js
-	sed '\#// export!#q' <$< >$@
-	sed -i "/use strict.;/d" $@
-	sed -i "s#// export! \(.*\)#export { \\1 };#" $@
+js/meshopt_decoder.cjs: js/meshopt_decoder.js
+	sed '/export {/d' <$< >$@
+	echo "if (typeof exports === 'object' && typeof module === 'object') module.exports = MeshoptDecoder;" >>$@
+	echo "else if (typeof define === 'function' && define['amd']) define([], function () { return MeshoptDecoder; });" >>$@
+	echo "else if (typeof exports === 'object') exports['MeshoptDecoder'] = MeshoptDecoder;" >>$@
+	echo "else (typeof self !== 'undefined' ? self : this).MeshoptDecoder = MeshoptDecoder;" >>$@
 
 $(DEMO): $(DEMO_OBJECTS) $(LIBRARY)
 	$(CXX) $^ $(LDFLAGS) -o $@

demo/index.html

@@ -49,7 +49,7 @@
 		<script type="module">
 			import * as THREE from 'three';
 			import { GLTFLoader } from 'three-examples/loaders/GLTFLoader.js';
-			import { MeshoptDecoder } from '../js/meshopt_decoder.module.js';
+			import { MeshoptDecoder } from '../js/meshopt_decoder.js';
 
 			var container;
 

demo/simplify.html

@@ -127,8 +127,8 @@
 			import { OBJLoader } from 'three-examples/loaders/OBJLoader.js';
 			import { OrbitControls } from 'three-examples/controls/OrbitControls.js';
 			import { mergeVertices } from 'three-examples/utils/BufferGeometryUtils.js';
-			import { MeshoptDecoder } from '../js/meshopt_decoder.module.js';
-			import { MeshoptSimplifier } from '../js/meshopt_simplifier.module.js';
+			import { MeshoptDecoder } from '../js/meshopt_decoder.js';
+			import { MeshoptSimplifier } from '../js/meshopt_simplifier.js';
 			import { GUI } from 'lil-gui';
 
 			var container, gridContainer;
@@ -817,7 +817,7 @@
 			}
 
 			function reload() {
-				var simp = import('/js/meshopt_simplifier.module.js?x=' + Date.now());
+				var simp = import('/js/meshopt_simplifier.js?x=' + Date.now());
 				MeshoptSimplifier.ready = simp.then(function (s) {
 					return s.MeshoptSimplifier.ready.then(function () {
 						for (var prop in s.MeshoptSimplifier) {
@@ -832,7 +832,7 @@
 			function autoReload() {
 				if (!settings.autoUpdate) return;
 
-				fetch('/js/meshopt_simplifier.module.js?x=' + Date.now(), { method: 'HEAD' })
+				fetch('/js/meshopt_simplifier.js?x=' + Date.now(), { method: 'HEAD' })
 					.then(function (r) {
 						var last = r.headers.get('Last-Modified');
 						if (last != moduleLastModified) {

gltf/README.md

@@ -28,10 +28,10 @@ When working with glTF files that contain point clouds, gltfpack automatically p
 
 ## Decompression
 
-When using compressed files, [js/meshopt_decoder.js](https://github.com/zeux/meshoptimizer/blob/master/js/meshopt_decoder.js) or `js/meshopt_decoder.module.js` needs to be loaded to provide the WebAssembly decoder module like this:
+When using compressed files, [js/meshopt_decoder.js](https://github.com/zeux/meshoptimizer/blob/master/js/meshopt_decoder.js) needs to be loaded to provide the WebAssembly decoder module like this:
 
 ```js
-import { MeshoptDecoder } from './meshopt_decoder.module.js';
+import { MeshoptDecoder } from './meshopt_decoder.js';
 
 ...
 

gltf/cli.js

@@ -1,12 +1,11 @@
 #!/usr/bin/env node
 // This file is part of gltfpack and is distributed under the terms of MIT License.
-var gltfpack = require('./library.js');
-
-var fs = require('fs');
+import { pack } from './library.js';
+import fs from 'fs';
 
 var args = process.argv.slice(2);
 
-var interface = {
+var iface = {
 	read: function (path) {
 		return fs.readFileSync(path);
 	},
@@ -15,8 +14,7 @@ var interface = {
 	},
 };
 
-gltfpack
-	.pack(args, interface)
+pack(args, iface)
 	.then(function (log) {
 		process.stdout.write(log);
 		process.exit(0);

gltf/library.js

@@ -345,28 +345,12 @@ function uploadArgv(argv) {
 }
 
 // Automatic initialization for node.js
-if (typeof window === 'undefined' && typeof process !== 'undefined' && process.release.name === 'node') {
-	var fs = require('fs');
-	var util = require('util');
-
-	// Node versions before v12 don't support TextEncoder/TextDecoder natively, but util. provides compatible replacements
-	if (typeof TextEncoder === 'undefined' && typeof TextDecoder === 'undefined') {
-		TextEncoder = util.TextEncoder;
-		TextDecoder = util.TextDecoder;
-	}
-
-	init(fs.readFileSync(__dirname + '/library.wasm'));
+if (typeof process !== 'undefined' && process.release && process.release.name === 'node') {
+	init(
+		import('node:fs').then(function (fs) {
+			return fs.readFileSync(new URL('./library.wasm', import.meta.url));
+		})
+	);
 }
 
-// UMD
-(function (root, factory) {
-	if (typeof define === 'function' && define.amd) {
-		define([], factory);
-	} else if (typeof module === 'object' && module.exports) {
-		module.exports = factory();
-	} else {
-		root.gltfpack = factory();
-	}
-})(typeof self !== 'undefined' ? self : this, function () {
-	return { init: init, pack: pack };
-});
+export { init, pack };

gltf/package.json

@@ -13,6 +13,7 @@
 		"type": "git",
 		"url": "https://github.com/zeux/meshoptimizer"
 	},
+	"type": "module",
 	"bin": "./cli.js",
 	"main": "./library.js",
 	"files": [

js/README.md

@@ -4,12 +4,7 @@ This folder contains JavaScript/WebAssembly modules that can be used to access p
 
 ## Structure
 
-Each component comes in two variants:
-
-- `meshopt_component.js` uses a UMD-style module declaration and can be used by a wide variety of JavaScript module loaders, including node.js require(), AMD, Common.JS, and can also be loaded into the web page directly via a `<script>` tag which exposes the module as a global variable
-- `meshopt_component.module.js` uses ES6 module exports and can be imported from another ES6 module
-
-In either case the export name is MeshoptComponent and is an object that has two fields:
+Each component comes in a separate file, `meshopt_component.js`, which uses ES6 module exports and can be imported from another ES6 module. The export name is MeshoptComponent and is an object that has two fields:
 
 - `supported` is a boolean that can be checked to see if the component is supported by the current execution environment; it will generally be `false` when WebAssembly is not supported or enabled. To use these components on browsers without WebAssembly a polyfill library is recommended.
 - `ready` is a Promise that is resolved when WebAssembly compilation and initialization finishes; any functions are unsafe to call before that happens.
@@ -20,6 +15,8 @@ In addition to that, each component exposes a set of specific functions document
 
 `MeshoptDecoder` (`meshopt_decoder.js`) implements high performance decompression of attribute and index buffers encoded using meshopt compression. This can be used to decompress glTF buffers encoded with `EXT_meshopt_compression` extension or for custom geometry compression pipelines. The module contains two implementations, scalar and SIMD, with the best performing implementation selected automatically. When SIMD is available, the decoders run at 1-3 GB/s on modern desktop computers.
 
+> Note: for maximum compatibility, MeshoptDecoder is also available as CommonJS module via `meshopt_decoder.cjs`; it can be used by a wide variety of JavaScript module loaders, including node.js require(), AMD, Common.JS, and can also be loaded into the web page directly via a `<script>` tag which exposes the module as a global variable `MeshoptDecoder`.
+
 To decode a buffer, one of the decoding functions should be called:
 
 ```ts

js/benchmark.js

@@ -1,6 +1,6 @@
-var encoder = require('./meshopt_encoder.js');
-var decoder = require('./meshopt_decoder.js');
-var { performance } = require('perf_hooks');
+import { MeshoptEncoder as encoder } from './meshopt_encoder.js';
+import { MeshoptDecoder as decoder } from './meshopt_decoder.js';
+import { performance } from 'perf_hooks';
 
 process.on('unhandledRejection', (error) => {
 	console.log('unhandledRejection', error);