Use ES6 modules by default on web

For Node.js this won't work, since Emscripten's EXPORT_ES6 setting relies on __dirname, which doesn't exist for modules.
kleisauke · Jun 18, 2021 · be993a1 · be993a1
1 parent 77385dd
commit be993a1
Show file tree

Hide file tree

Showing 28 changed files with 724 additions and 748 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ and because it doesn't need to keep entire images in memory, it's light.
 
 ## Browser support
 
-A browser that [supports the SharedArrayBuffer API](https://caniuse.com/#feat=sharedarraybuffer).
+A browser that [supports the SharedArrayBuffer API](https://caniuse.com/sharedarraybuffer).
 
 | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_24x24.png)<br/>Chrome | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_24x24.png)<br/>Firefox | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_24x24.png)<br/>Edge |
 | ----------- | ----------- | ----------- | 
@@ -34,11 +34,9 @@ Requires `vips.js`, `vips.wasm` and `vips.worker.js` to be served from
 the same directory.
 
 ```html
-<script src="vips.js"></script>
-<script>
-(async () => {
+<script type="module">
+    import Vips from './vips.js';
     const vips = await Vips();
-})();
 </script>
 ```
 

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "build:node": "docker build -t wasm-vips . && docker run --rm -v $(pwd):/src wasm-vips ./build.sh -e node --enable-simd",
     "build": "npm run build:node",
     "test:web": "serve -c test/unit/serve.json",
-    "test:node": "node --experimental-wasm-threads --experimental-wasm-simd --wasm-simd-post-mvp node_modules/mocha/bin/mocha -s 5000 -t 60000 test/unit/*.js -r test/unit/node-helper.js",
+    "test:node": "node --experimental-wasm-threads --experimental-wasm-simd --wasm-simd-post-mvp node_modules/mocha/bin/mocha -s 5000 -t 60000 test/unit/*.mjs -r test/unit/node-helper.js",
     "test": "npm run test:node",
     "bench:web": "serve -c test/bench/serve.json",
     "bench:node": "cd test/bench && npm run test",

diff --git a/playground/samples/filter/duotone/sample.js b/playground/samples/filter/duotone/sample.js
@@ -22,6 +22,7 @@ let im = vips.Image.newFromFile('owl.jpg');
 //let im = vips.Image.newFromFile('owl.tif');
 //let im = vips.Image.newFromFile('transparency_demo.png');
 //let im = vips.Image.newFromFile('banana.webp', {n: -1});
+//let im = vips.Image.newFromFile('banana.gif', {n: -1});
 
 // Or to load a formatted image from buffer
 // const buffer = await fetch('assets/images/owl.webp').then(resp => resp.arrayBuffer());

diff --git a/playground/src/images/INFO.md b/playground/src/images/INFO.md
@@ -24,3 +24,8 @@ https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstrati
 ```
 https://storage.googleapis.com/downloads.webmproject.org/webp/images/dancing_banana2.lossless.webp
 ```
+
+[`banana.gif`](banana.gif):
+```
+https://storage.googleapis.com/downloads.webmproject.org/webp/images/dancing-banana.gif
+```
diff --git a/playground/src/images/banana.gif b/playground/src/images/banana.gif
diff --git a/playground/src/index.js b/playground/src/index.js
@@ -319,11 +319,19 @@ function doRun(runContainer) {
         window.addEventListener('message', function (e) {
             if (e.source === runIframe.contentWindow) {
                 vipsInitialized = true;
-                runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
+                runIframe.contentWindow.postMessage({
+                    js: getLang('js'),
+                    html: getLang('html'),
+                    css: getLang('css')
+                });
             }
         });
     } else if (vipsInitialized) {
-        runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
+        runIframe.contentWindow.postMessage({
+            js: getLang('js'),
+            html: getLang('html'),
+            css: getLang('css')
+        });
     }
 }
 

diff --git a/playground/src/playground-runner.html b/playground/src/playground-runner.html
@@ -10,36 +10,39 @@
     </style>
 </head>
 <body style="height:100%">
-<script src="../lib/vips.js?<%= __webpack_hash__ %>"></script>
-<script type="text/javascript">
+<script type="module">
     let loadedElements = [];
-    let vips;
-    let cleanup;
 
-    function load(js, html, css) {
+    import Vips from '../lib/vips.js?<%= __webpack_hash__ %>';
+
+    window.addEventListener('message', load);
+
+    function load(event) {
         loadedElements = loadedElements.filter(el => el.remove());
-        if (typeof cleanup === "function")
+        if (typeof cleanup === 'function')
             cleanup();
 
-        if (css) {
-            const style = document.createElement("style");
-            style.type = "text/css";
-            style.innerHTML = css;
+        const data = event.data;
+
+        if (data.css) {
+            const style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = data.css;
             document.head.appendChild(style);
             loadedElements.push(style);
         }
-        if (html) {
-            const content = document.createElement("div");
+        if (data.html) {
+            const content = document.createElement('div');
             content.style.height = '100%';
-            content.innerHTML = html;
+            content.innerHTML = data.html;
             document.body.insertBefore(content, document.body.firstChild);
             loadedElements.push(content);
         }
-        if (js) {
+        if (data.js) {
             try {
-                eval("(async () => {\n" + js + "\n})()");
+                eval("(async () => {\n" + data.js + "\n})()");
             } catch (err) {
-                const pre = document.createElement("pre");
+                const pre = document.createElement('pre');
                 pre.appendChild(document.createTextNode(err));
                 document.body.insertBefore(pre, document.body.firstChild);
                 loadedElements.push(pre)
@@ -51,13 +54,13 @@
         print: (stdout) => console.log(stdout.replace(/\033\[[0-9;]*m/g, "")),
         preRun: (module) => {
             module['EMBIND_AUTOMATIC_DELETELATER'] = true;
-            module.setDelayFunction(fn => cleanup = fn);
+            module.setDelayFunction(fn => globalThis.cleanup = fn);
 
             // Handy for debugging
             module.ENV.G_MESSAGES_DEBUG = 'VIPS';
 
-            for (const image of ['owl.jpg', 'owl.tif', 'owl.webp', 'banana.webp', 'transparency_demo.png'])
-                module.FS.createPreloadedFile('/', image, "assets/images/" + image, true, false);
+            for (const image of ['owl.jpg', 'owl.tif', 'owl.webp', 'banana.webp', 'banana.gif', 'transparency_demo.png'])
+                module.FS.createPreloadedFile('/', image, 'assets/images/' + image, true, false);
         },
         postRun: (module) => {
             const pad = 30;
@@ -90,10 +93,8 @@
         }
     };
 
-    Vips(options).then(instance => {
-        vips = instance;
-        window.parent.postMessage('vipsInitialized', '*');
-    });
+    globalThis.vips = await Vips(options);
+    window.parent.postMessage('vipsInitialized', '*');
 </script>
 </body>
 </html>
diff --git a/playground/src/samples.js b/playground/src/samples.js
@@ -2,6 +2,7 @@ import './images/owl.webp';
 import './images/owl.tif';
 import './images/owl.jpg';
 import './images/banana.webp';
+import './images/banana.gif';
 import './images/transparency_demo.png';
 
 export var PLAY_SAMPLES = [

diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
@@ -122,6 +122,6 @@ if("web" IN_LIST ENVIRONMENT)
     set_property(
             TARGET ${PROJECT_NAME}-web
             APPEND_STRING PROPERTY
-            LINK_FLAGS " -s ENVIRONMENT=web,worker -s DEFAULT_LIBRARY_FUNCS_TO_INCLUDE='[\"$Browser\"]'"
+            LINK_FLAGS " -s ENVIRONMENT=web,worker -s EXPORT_ES6 -s DEFAULT_LIBRARY_FUNCS_TO_INCLUDE='[\"$Browser\"]'"
             )
 endif()