4 ms·

Does this work for most people? I’d assume it was just my slightly out of date version of the weird browser Palemoon that makes it throw “SyntaxError: missing d

Does this work for most people? I’d assume it was just my slightly out of date version of the weird browser Palemoon that makes it throw “SyntaxError: missing declaration after 'import' keyword” and stay blank white (https://ibb.co/Bj2HHxH https://ibb.co/Bj2HHxH) for me, but a dead comment just claimed it’s broken on both macOS and iOS Safari, and Chrome.

stevenpetryk 6y ago
Works only in Chromium for me, not Safari or Firefox. But it's just a technical demo so, meh.
Birch-san 6y ago
Ah, if it's blank, then it blew up really early. It sounds like it's complaining about the use of ES modules. This script is loaded with `<script type="module">` and uses ES imports (`import App from './App.svelte'`). Yes, Safari is expected to go bang (doesn't support module Workers). I target Chromium's featureset — I developed on macOS Edge. macOS Chrome and Android's Chrome WebView work for me too. It needs a few modern features in order to work: - Web workers - WebAssembly - top-level await (on Web, and in Worker) - ES modules + imports (on Web, and in Worker) - requestAnimationFrame in Worker - WebGL2 - OffscreenCanvas Most of these were chosen for "ease of development". With bundling, it'd be possible to eliminate the ES modules / await usage. WebGL2 isn't strictly necessary either. WASM + workers are widely supported. So the primary blocker to Firefox support is support for OffscreenCanvas, and requestAnimationFrame in Worker. There's other options there: render on the main thread instead. Harder to develop (syncing timing + state between threads). Can probably be done performantly with SharedArrayBuffer. In truth, I did include error-handling to provide a compatibility explanation if the worker explodes. This displays in Firefox. But I hadn't expected the main thread to explode too. Here's a GIF of what it's supposed to look like! https://birchlabs.co.uk/box2d-wasm-liquidfun/liquidfun.gif https://birchlabs.co.uk/box2d-wasm-liquidfun/liquidfun.gif
- brundolf 6y ago
  I'm surprised it doesn't work on Firefox; it should have all of those features
- greggman3 6y ago
  Firefox does not fully support OffscreenCanvas, https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCa... nor does it support top level await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- ranguna 6y ago
  Very cool demo, works great on chrome mobile. But I'm not sure using top level await was a good idea at this time. Can't really open it in Firefox mobile either (due to import syntax).

stevenpetryk 6y ago

Works only in Chromium for me, not Safari or Firefox. But it's just a technical demo so, meh.

Birch-san 6y ago

Ah, if it's blank, then it blew up really early. It sounds like it's complaining about the use of ES modules. This script is loaded with `<script type="module">` and uses ES imports (`import App from './App.svelte'`). Yes, Safari is expected to go bang (doesn't support module Workers). I target Chromium's featureset — I developed on macOS Edge. macOS Chrome and Android's Chrome WebView work for me too. It needs a few modern features in order to work: - Web workers - WebAssembly - top-level await (on Web, and in Worker) - ES modules + imports (on Web, and in Worker) - requestAnimationFrame in Worker - WebGL2 - OffscreenCanvas Most of these were chosen for "ease of development". With bundling, it'd be possible to eliminate the ES modules / await usage. WebGL2 isn't strictly necessary either. WASM + workers are widely supported. So the primary blocker to Firefox support is support for OffscreenCanvas, and requestAnimationFrame in Worker. There's other options there: render on the main thread instead. Harder to develop (syncing timing + state between threads). Can probably be done performantly with SharedArrayBuffer. In truth, I did include error-handling to provide a compatibility explanation if the worker explodes. This displays in Firefox. But I hadn't expected the main thread to explode too. Here's a GIF of what it's supposed to look like! https://birchlabs.co.uk/box2d-wasm-liquidfun/liquidfun.gif https://birchlabs.co.uk/box2d-wasm-liquidfun/liquidfun.gif

brundolf 6y ago
I'm surprised it doesn't work on Firefox; it should have all of those features
greggman3 6y ago
Firefox does not fully support OffscreenCanvas, https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCa... nor does it support top level await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
ranguna 6y ago
Very cool demo, works great on chrome mobile. But I'm not sure using top level await was a good idea at this time. Can't really open it in Firefox mobile either (due to import syntax).