mwouts/itables

Tables are not displayed in VS Code when using `connected=True` in itables==2.0.0rc0

mwouts opened this issue · 3 comments

mwouts commented

The offline mode works fine, but in the connected mode the library fails to load. The error can be reproduced by running this in an .ipynb notebook in VS Code:

from IPython.display import HTML, display

display(HTML("""<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.1/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">
<script type="module">
    // Import jquery and DataTable
    import 'https://code.jquery.com/jquery-3.7.1.min.js';
    import 'https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.1/b-3.0.0/b-html5-3.0.0/datatables.min.js';

    $(document).ready(function () {
        document.querySelectorAll("#table_id:not(.dataTable)").forEach(table => {
            // Define the table data
            const data = [];

            // Define the dt_args
            let dt_args = {};
            dt_args["data"] = data;

            // [pre-dt-code]
            new DataTable(table, dt_args);
        });
    });
</script>
"""))

in the console in webview developer tools, the error appears to be

jquery-3.7.1.min.js:2 Uncaught ReferenceError: DataTable is not defined
    at <anonymous>:16:13
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (<anonymous>:7:64)
    at e (jquery-3.7.1.min.js:2:27028)
    at t (jquery-3.7.1.min.js:2:27330)
mwouts commented

Following @AllanJard's suggestion in this comment I have tried to use

import 'https://cdn.datatables.net/2.0.1/js/dataTables.min.mjs'

(etc) instead, however that gives the following error:

Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".

which, if I understand properly, means that an import map is required. Fortunately we did get import maps to work to some extend. So the next thing I tried was to use an import map:

<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.1/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">
<script type="importmap">
{
  "imports": {
    "jquery": "https://esm.sh/jquery@3.7.1",
    "jszip": "https://esm.sh/jszip@3.10.1",
    "datatables.net": "https://cdn.datatables.net/2.0.1/js/dataTables.min.mjs",
    "datatables.net-buttons": "https://cdn.datatables.net/buttons/3.0.0/js/dataTables.buttons.min.mjs",
    "datatables.net-buttons-html5": "https://cdn.datatables.net/buttons/3.0.0/js/buttons.html5.min.mjs",
    "datatables.net-buttons-print": "https://cdn.datatables.net/buttons/3.0.0/js/buttons.print.min.mjs"
  }
}
</script>
<script type="module">
    import $ from 'jquery';
    import DataTable from 'datatables.net';
    import 'datatables.net-buttons';
    import 'datatables.net-buttons-html5';
    import 'datatables.net-buttons-print';

    $(document).ready(function () {
        document.querySelectorAll("#table_id:not(.dataTable)").forEach(table => {
            // Define the table data
            const data = [];

            // Define the dt_args
            let dt_args = {};
            dt_args["data"] = data;

            // [pre-dt-code]
            new DataTable(table, dt_args);
        });
    });
</script>

That version works in Firefox, however if I display it with display(HTML(""" .... """))) in a .ipynb file in VS Code, I get the following two errors:

index.js:11 An import map is added after module script load was triggered.
index.js:11 Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../".
    at nt (index.js:11:966)
    at Dt (index.js:11:1675)
    at async Object.renderOutputItem (index.js:92:185)
    at async re.renderOutputItem (notebookWebviewPreloads.js:3:21491)
    at async Object.h (notebookWebviewPreloads.js:3:26032)
    at async Object.render (notebookWebviewPreloads.js:3:25594)
    at async ge.render (notebookWebviewPreloads.js:3:36566)

which suggest that import maps might not be supported in VS Code.

mwouts commented

@fwouts, I have a quick question for you. Below is itables/html/datatables_template_connected.html in the v2.0-dev version. It works in some contexts (e.g. Firefox, or within Jupyter), but not in VS Code (which says: DataTable is not defined, see the issue description).

I am wondering to which extend this code is "incorrect", e.g. if after all VS Code is right, since in effect I did not explicitly import DataTable (note that I need to use import rather than plain scripts because I have no access to the document head).

Would the proper approach be to host the new bundle (the one packaged with itables==2.0.0-dev) on a cdn? How complicated would that be (could I use github artefacts maybe)? Would there be any relationship with publishing a npm package for the bundle?

<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.1/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">
<script type="module">
    // Import jquery and DataTable
    import 'https://code.jquery.com/jquery-3.7.1.min.js';
    import 'https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.1/b-3.0.0/b-html5-3.0.0/datatables.min.js';

    $(document).ready(function () {
        document.querySelectorAll("#table_id:not(.dataTable)").forEach(table => {
            // Define the table data
            const data = [];

            // Define the dt_args
            let dt_args = {};
            dt_args["data"] = data;

            // [pre-dt-code]
            new DataTable(table, dt_args);
        });
    });
</script>
mwouts commented

I just learnt of unpkg, so I have published dt_for_itables on npm, and I now I am seeing this work with
dt_url = "https://www.unpkg.com/dt_for_itables@2.0.1/dt_bundle.js"