Replies

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  July 2021

  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 Posts: 19Questions: 3Answers: 0

  January 2022

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2022

  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 Posts: 19Questions: 3Answers: 0

  January 2022

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2022

  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 Posts: 19Questions: 3Answers: 0

  January 2022

  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 Posts: 19Questions: 3Answers: 0

  January 2022

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2022

  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 Posts: 19Questions: 3Answers: 0

  January 2022

  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 Posts: 19Questions: 3Answers: 0

  January 2022

  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