ESM/ES6 module support

cdalxndr

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
The package from npm doesn't support the modern es6 module standard... this should be added to adapt to modern changes.
This will allow import directly in browser without any third party module loader.

allan

Thanks for the message - yes, this is on our list of things to do . ESM isn't something I've actually used yet myself, which is partly why we haven't got this done yet.

Allan

mwouts

Hi @allan, I am also interested in this.

I maintain a Python package that allows Python users to display their dataframes interactively in Jupyter Notebooks thanks to datatables.net.

In some of the editors for Jupyter notebooks ("jupyter notebook" and "jupyter nbconvert"), the require.js library is available, but not in the mainstream editor ("jupyter lab"), so I am looking for a way to load datatables.net that would not involve require.js.

ESM seems to qualify for this. I did get some help at https://github.com/mwouts/itables/issues/40 and we tested this sample code:

<script type="module">
    import $ from "https://esm.sh/jquery@3.5.0";
    import initDataTables from "https://esm.sh/datatables.net@1.11.3?deps=jquery@3.5.0";

    initDataTables();

    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>

(obviously I'd prefer to load an ESM version that you would have provided and tested )

This works when require.js is not available (e.g. in Jupyter Lab). However, when require.js is loaded (Jupyter Notebook or Jupyter NBconvert) I get a strange error

Uncaught TypeError: ({}) is not a function
    <anonymous> http://localhost:8889/notebooks/Untitled.ipynb line 2 > injectedScript:5

in the call to initDataTables();. Do you have any idea on what happens here? Or are you aware of any way to load jquery and datatables locally without using require.js? Thanks!

allan

My guess is that our UMD isn't playing nicely when require.js isn't available. Possibly it might need another condition somewhere to force it to browser load.

On your Jupyter notebook, perhaps you could tell me the output of each of the following on your browser's console?

typeof define
typeof define.amd
typeof exports

Thanks,
Allan

mwouts

Thank you Allan.

In Jupyter Lab, i.e. where the ESM import works, both define and exports are undefined.

In Jupyter Notebook, where the ESM import is not functional, define is a function, define.amd an object, and exports is not defined.

I hope that helps - let me know if I can provide further information.

allan

Many thanks - I'll feed that into my thinking for the ESM support. I suspect ultimately it will just need to be a septate file and we'll need to account for that in our build scripts.

Allan

mwouts

Great! Also maybe I should comment on this:

My guess is that our UMD isn't playing nicely when require.js isn't available

In the example above I have been using https://esm.sh/datatables.net, that is, an ES Module translation of the datatables.net NPM package if I understood well (I don't know the exact impact of the translation on the code).

Also, note that the ES example above fails when require.js is loaded, not the opposite.

mwouts

Just to mention that we found a way to load datatables.net with require.js when available, and with import otherwise, that seems to work in all the desired situations:

if (typeof require === 'undefined') {
        // TODO: This should become the default (use a simple import)
        // when the ESM version works independently of whether
        // require.js is there or not, see
        // https://datatables.net/forums/discussion/69066/esm-es6-module-support?
        const { default: $ } = await import("https://esm.sh/jquery@3.5.0");
        const { default: initDataTables } = await import("https://esm.sh/datatables.net@1.11.3?deps=jquery@3.5.0");

        initDataTables();

        // Display the table
        $(document).ready(function () {
            $('#table_id').DataTable(dt_args);
        });
    } else {
        require(["jquery", "datatables"], ($, datatables) => {
                // Display the table
                $(document).ready(function () {
                    $('#table_id').DataTable(dt_args);
                });
            }
        )
    }

(The above is an extract from itables/datatables_template.html )

Thanks to François Wouts for his precious help on the subject!

And Allan, please let me know when I can help testing the next ESM release.

allan

That's superb - thank you.

I've added your details to my bug for ESM support and will be in touch when that is available.

I really must try Jupyter Notebooks sometime - keep hearing good things about them...

Allan

mwouts

You're welcome!

Well probably the simplest way to try Jupyter Notebooks is to use "Binder".

I have one ready for the itables project at https://mybinder.org/v2/gh/mwouts/itables/main?filepath=README.md . You just need to wait for about one minute for Python to be installed, and then when the notebook opens you can "run all cells" or run cells one by one with Ctrl+Enter.

Also this ESM approach allowed me to remove a big restriction on the itables project, which now works in every notebook editor, so I am going to announce this in a blog post at https://marc-wouts.medium.com/pandas-dataframes-as-interactive-html-datatables-9737c7266abf

mwouts

You're welcome!

Well probably the simplest way to try Jupyter Notebooks is to use "Binder".

I have one ready for the itables project at https://mybinder.org/v2/gh/mwouts/itables/main?filepath=README.md . You just need to wait for about one minute for it to start. When the notebook opens you can "run all cells" or run cells one by one with Ctrl+Enter.

Also this ESM approach allowed me to remove a big limitation on the itables project, which now works in every notebook editor, so I am going to announce this in a blog post at https://marc-wouts.medium.com/pandas-dataframes-as-interactive-html-datatables-9737c7266abf