Improper ES6 export for browser: Missing '.js' suffix in index.js export statements ** about flatten-interval-tree

[AvWoN]

Srry about the title edit spam, running on insufficient sleep

[alexbol99]

Seems I need to learn this stuff dipper

[alexbol99]

Hi, David,

I have an example of consuming IntervalTree in plane ES6 HTML page in /examples section.
I slightly changed it to consume also Node and Interval classes, and it also works "as is" without any changes.
Look at the code, I think you just need to define attribute type="module" in script tag.

<script type="module">
    import IntervalTree from "https://unpkg.com/@flatten-js/interval-tree?module";
    import {Node, Interval} from "https://unpkg.com/@flatten-js/interval-tree?module";

    const composers = [
        {name: "Ludwig van Beethoven", period: [1770,1827]},
        {name: "Johann Sebastian Bach", period: [1685, 1750]},
        {name: "Wolfgang Amadeus Mozart", period: [1756, 1791]},
        {name: "Johannes Brahms", period: [1833, 1897]},
        {name: "Richard Wagner", period: [1813, 1883]},
        {name: "Claude Debussy", period: [1862, 1918]},
        {name: "Pyotr Ilyich Tchaikovsky", period: [1840, 1893]},
        {name: "Frédéric Chopin", period: [1810, 1849]},
        {name: "Joseph Haydn", period: [1732, 1809]},
        {name: "Antonio Vivaldi", period: [1678, 1741]}
    ];

    const compList = composers.reduce( (html,composer) => html + `<li>${composer.name} (${composer.period[0]} - ${composer.period[1]})</li>`, "" );
    document.getElementById("list").innerHTML = compList;

    // Composers who lived in 17th century
    const tree = new IntervalTree();
    for (let composer of composers)
        tree.insert(composer.period, composer.name);

    // const searchRes = tree.search( [1600,1700], (name, period) => {return {name : name, period: period.output()}} );
    if (tree.root instanceof Node) {
        const interval = new Interval(1600, 1700);
        const searchRes = tree.search(interval, (name, period) => {
            return {name: name, period: period.output()}
        });

        const resList = searchRes.reduce((html, composer) => html + `<li>${composer.name} (${composer.period[0]} - ${composer.period[1]})</li>`, "");
        document.getElementById("results").innerHTML = resList;
    }
</script>

Best,
Alex

[AvWoN]

I am sure it works fine through the entry point of /dist/main.esm.js with just JS which is what the CDN unpkg.org/<...>?module delivers, but I am entering through the npm package on the /index.js file which gets automatically associated with the index.d.ts typed declaration file right next to it for Typescript which is ideal for my use case. For example in my TS/JS file:

import {IObserver, IPlayable, IPlayerController, PlayerStatus, Time} from "../../types/types.js";
import {ISequencer} from "../../types/sequencer.js";
import {TimerElapsed} from "../../classes.js";
import IntervalTree from "./../../../../node_modules/@flatten-js/interval-tree/index.js";

Again, not using @flatten-js/interval-tree since I am not using a loader/packager who could resolve this with Typescript and the TS Compiler does not make these changes on its own, I need to explicitly go there with a relative path. If I don't insert the '.js' extension to the export statement in index.js the browsers will not be able to find the files:

Its not able to resolve these two paths in the export statements.

export {default as Node} from './src/classes/node';
export {default as Interval} from './src/classes/interval';
...

When I manually edit the package and insert the '.js' file extension as described in my original post the browser is able to resolve the paths in index.js.

Its fine if you do not wish to support this entry point with pure browser ES module system but I would certainly appreciate it. It shouldn't affect the package otherwise I am fairly sure. I could use the /dist/main.esm.js but I am having issues with my IDEA IDE mapping /dist/main.esm.js to /index.d.ts. Its even worse with the CDN Url when I use it in a .js file context. My IDE/tslint is fine with it only if I use it from the context of an .html file but not from the context of a .js file. It complains with:

• TS2792: Cannot find module 'https://unpkg.com/@flatten-js/interval-tree?module'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
  • when using "moduleResolution": "classic" which is what I am currently using and
• TS2307: Cannot find module 'https://unpkg.com/@flatten-js/interval-tree?module' or its corresponding type declarations.
  • when using the tsconfig.json option "moduleResolution": "node"

These two options (main.esm.js and unpkg.com) work fine when accessed by the browser but I would have to disable and lose tslinting and auto completion for these files/objects in my IDE. If I can just use index.js I can keep both functionalities, which is what I am currently doing by editing index.js but its not something I can push to my github with good conscience if I need to include special instructions to manually edit a npm module file after someone pulls it and performs npm install (I could technically attach a script that would do it but still).

Thank You!

• David

[alexbol99]

I got your point.
No problem, I will make a change soon
Alex

[alexbol99]

Hi, David,

I updated index.js in release v1.0.16

Thank you,
Alex

[AvWoN]

Much appreciated. Thank you for your work!
David