ESM/ES6 module support

ESM/ES6 module support

cdalxndrcdalxndr Posts: 1Questions: 0Answers: 0

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.

Replies

  • allanallan Posts: 56,421Questions: 1Answers: 8,955 Site admin

    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

  • mwoutsmwouts Posts: 7Questions: 1Answers: 0

    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!

  • allanallan Posts: 56,421Questions: 1Answers: 8,955 Site admin

    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

  • mwoutsmwouts Posts: 7Questions: 1Answers: 0

    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.

  • allanallan Posts: 56,421Questions: 1Answers: 8,955 Site admin

    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

  • mwoutsmwouts Posts: 7Questions: 1Answers: 0

    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.

  • mwoutsmwouts Posts: 7Questions: 1Answers: 0

    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.

  • allanallan Posts: 56,421Questions: 1Answers: 8,955 Site admin

    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

  • mwoutsmwouts Posts: 7Questions: 1Answers: 0

    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

  • mwoutsmwouts Posts: 7Questions: 1Answers: 0

    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

Sign In or Register to comment.