jstree as a module (ESM) example

tacman commented 11 months ago

I see that jstree is on jsdelivr and has an ESM section:

https://www.jsdelivr.com/package/npm/jstree

I'm excited about using importmaps and modules, and was hoping to get this working.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic HTML Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/jstree@3.3.16/dist/themes/default/style.min.css" rel="stylesheet">

    <script type="module">
        import $ from 'https://cdn.jsdelivr.net/npm/jquery@3.7.1/+esm'
        import jstree from 'https://cdn.jsdelivr.net/npm/jstree@3.3.16/+esm'
        $('#html1').jstree();
    </script>
</head>
<body>

    <h1>#html1</h1>
    <ul id="html1">
        <li>Root node 1</li>
        <li>Root node 2</li>
        <li>Root node 3</li>
    </ul>
</body>
</html>

The jstree() call is made, but it ends up removing the nodes. Is it possible to get jstree to work this way? Thanks.

vakata commented 10 months ago

I believe this has nothing to do with ESM loading - try wrapping the UL in a DIV, and create the jstree instance on the DIV, not the UL.

tacman commented 10 months ago

yep, perfect, thanks! Working example at https://jsfiddle.net/tacman1123/3e8j7qkc/5/

vakata / jstree

jstree as a module (ESM) example #2749