search

Birch-san / box2d-wasm

Box2D physics engine compiled to WebAssembly. Supports TypeScript and ES modules.
263 stars 21 forks source link

The jsDelivr ESM link doesn't work for Box2D-WASM #61

Open 8Observer8 opened 1 year ago

8Observer8 commented 1 year ago

Description

The main contributor for Plunker wrote in the next message that it can be an issue of jsDelivr or Box2D-WASM: https://github.com/plnkr/feedback/issues/597#issuecomment-1602657221 So I created the issue for jsDelivr too: https://github.com/jsdelivr/jsdelivr/issues/18510

I try to use the box2d-wasm@7.0.0 ESM link from here: https://www.jsdelivr.com/package/npm/box2d-wasm

It doesn't work on Plunker, and it doesn't work locally on my laptop (I have the same errors, see errors below):

But it works on PlayCode: https://playcode.io/1527756

I uploaded Box2D-WASM files on GitHub Pages:

image

So it works locally and on Plunker if I use the next link: https://8observer8.github.io/lib/box2d-wasm-7.0.0-box2d-2.4.1/box2d-wasm.min.js You can just replace the jsDelivr link with this one.

index.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>

<body>
    <!-- Since import maps are not yet supported by all browsers, its is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "box2d-wasm": "https://cdn.jsdelivr.net/npm/box2d-wasm@7.0.0/+esm",
                "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm"
            }
        }
    </script>

    <script type="module" src="./js/index.js"></script>
</body>

</html>

index.js

import { box2d, initBox2D } from "./init-box2d.js";

async function init() {
    await initBox2D();

    const {
        b2Vec2
    } = box2d;

    const vec = new b2Vec2(1, 2);
    console.log(`vec = (x: ${vec.x}, y: ${vec.y})`);
}

init();

init-box2d.js

import Box2DLib from "box2d-wasm";

export let box2d = null;

export function initBox2D() {
    return new Promise(resolve => {
        Box2DLib().then((re) => {
            box2d = re;
            resolve();
        });
    });
}

But I have these errors:

image

Affected jsDelivr links

https://cdn.jsdelivr.net/npm/box2d-wasm@7.0.0/+esm

8Observer8 commented 4 months ago

UNPKG version doesn't work. I replaced it - see a message below.

Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview

    <!-- Since import maps are not yet supported by all browsers, its is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/es-module-shims@1.8.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "box2d-wasm": "https://unpkg.com/box2d-wasm@7.0.0/dist/es/Box2D.js",
                "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm"
            }
        }
    </script>

    <script type="module">
        import { mat4, vec3 } from "gl-matrix";

        const v = vec3.fromValues(1, 2, 3);
        console.log(v);

        const m = mat4.create();
        console.log(m);
    </script>

    <!-- <script type="module" src="./js/index.js"></script> -->
8Observer8 commented 2 months ago

This link doesn't work: https://cdn.jsdelivr.net/npm/box2d-wasm@7.0.0/+esm and this link doesn't work: https://unpkg.com/box2d-wasm@7.0.0/dist/es/Box2D.js But this with link works: https://cdn.jsdelivr.net/npm/box2d-wasm@7.0.0/dist/es/entry.js

    <!-- Since import maps are not yet supported by all browsers, its is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://unpkg.com/es-module-shims@1.7.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "box2d-wasm": "https://cdn.jsdelivr.net/npm/box2d-wasm@7.0.0/dist/es/entry.js",
                "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm"
            }
        }
    </script>