How to create an input field at PixiJS Canvas (implicit: Import/export between PixiJS UI and typed-signals)

My target is to use PixiJS UI (version 2.1.2) to place an input field at a canvas that is drawn by PixiJS (version 8.2.0).

The part with just PixiJS works fine, but I don't get the import for @pixi/ui to run. The Firefox says this: "Uncaught SyntaxError: ambiguous indirect export: Signal" and the Chromium says this: SyntaxError: The requested module 'typed-signals' does not provide an export named 'Signal' (at pixi-ui.mjs:9:209) with this line highlighted: import {Signal as v} from "typed-signals";.

For the library "typed-signals" (version 2.5.0) there is only a file index.js and index.d.ts, but no index.mjs with explicit export statements.

As far as I understand the import/export topic in JavaScript, a workaround could be to write an index.mjs with re-export statements on my own. But I guess that it's not the intended way of getting this to work.

This is my JavaScript code:

import { Application as Application, Text as Text } from 'pixi.js';
import { Input as Input } from '@pixi/ui';

(async () => {
// Draw a green canvas
const app = new Application();
await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 })
document.body.appendChild(app.canvas);

// Create an input field
const input = new Input({/*some options*/});
// [...] Place the input and do some other stuff
})();

And this is my HTML code with the importmap:

<!doctype html>
<html>
<head>
<script type="importmap">
{"imports": {
    "pixi.js": "http://127.0.0.1:8080/public/node_modules/pixi.js/dist/pixi.mjs",
    "eventemitter3": "http://127.0.0.1:8080/public/node_modules/eventemitter3/dist/eventemitter3.esm.js",
    "earcut": "http://127.0.0.1:8080/public/node_modules/earcut/dist/earcut.min.js",
    "@pixi/colord": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/index.mjs",
    "@pixi/colord/plugins/names": "http://127.0.0.1:8080/public/node_modules/@pixi/colord/plugins/names.mjs",
    "@xmldom/xmldom": "http://127.0.0.1:8080/public/node_modules/@xmldom/xmldom/lib/index.js",
    "parse-svg-path": "http://127.0.0.1:8080/public/node_modules/parse-svg-path/index.js",
    "ismobilejs": "http://127.0.0.1:8080/public/node_modules/ismobilejs/esm/index.js",
    "tweedle.js": "http://127.0.0.1:8080/public/node_modules/tweedle.js/dist/tweedle.es.js",
    "typed-signals": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/node_modules/typed-signals/dist/index.js",
    "@pixi/ui": "http://127.0.0.1:8080/public/node_modules/@pixi/ui/dist/pixi-ui.mjs"
}}
</script>
</head>
<body>
<script src="myCanvasApp.js" type="module"></script>
</body>
</html>

The JavaScript libraries I got via npm install [library name]. It seems that @pixi/ui brings its own "typed-signals" (within a subfolder) so that "typed-signals" is not in the latest version 3.0.0 but in version 2.5.0. My importmap regards this.

Any idea how I can get the import/export between PixiJS UI and typed-signals set up (... and thereby PixiJS UI to run)?

Solution

One approach for an input field at the canvas without PixiJS UI, just with HTML, JavaScript and CSS is this:

Define an HTML container with relative position. Place an input element with absolute position in it: <div id="container" style="position:relative;border-style:solid;border-color:red;"><input id="myinput" style="position:absolute;left:100px;top:200px;z-index:1000;"></input></div>
Place the position of the input field by setting left and top with JavaScript. To demonstrate this, the following snippet changes the position every second: import { Application as Application } from 'pixi.js'; (async () => { const app = new Application(); await app.init({ width: 300, height: 300, backgroundColor: 0x00ff00 }); let canvas = app.canvas; document.getElementById('container').appendChild(canvas);setInterval(() => {let i1 = document.getElementById('myinput'); i1.style.left=Math.round(Math.random()*canvas.clientWidth)+"px"; i1.style.top=Math.round(Math.random()*canvas.clientHeight)+"px"; }, 1000); })();

As another approach (or more a workaround to get an input field at the canvas with PixiJS UI while not finding the import/export failure), I ...

copied Input.js to MyInput.js,
modified the following three head lines in MyInput.js:

import { Container as Container, Graphics as Graphics, isMobile as isMobile, Ticker as Ticker, Text as Text, Sprite as Sprite, Texture as Texture, NineSliceSprite as NineSliceSprite } from 'pixi.js'; // var typedSignals = require('typed-signals'); import { getView as getView } from 'view.mjs';
removed the previous variables that were defined in the head (pixi_js, typedSignals and view) from the whole MyInput.js file.
added this import in my application code: import { MyInput as MyInput } from './MyInput.js';