Skip to content

ipywidgets

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

ipywidgets

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.vscode
.vscode
 
 
scripts
scripts
 
 
src
src
 
 
types
types
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
webpack.config.js
webpack.config.js
 
 

README.md

This folder is based off the the sample web3 from https://github.com/jupyter-widgets/ipywidgets/blob/master/examples/web3

  • We have built a custom solution based on web3 sample to host ipywidgets outside of Jupyter Notebook.

Warning

  • Most of the code has been copied as is from https://github.com/jupyter-widgets/ipywidgets/blob/master/examples/web3 & https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/html-manager/webpack.config.js.
    • Please try to minimize changes to original code to facilitate easier updatess.

Solution for IPywidgets

  • IPywidgets traditionally use requirejs.
    • traditionally as there seems to be some ongoing work to use commonjs2, though unsure how this will work with 3rd party widgets.
  • Using 3rd party widgets require:
    • requirejs to be available in the current browser context (i.e. window)
    • Base IPywidgets to be defined using define in requirejs.
  • Rather than bundling using amd or umd its easier to just import everything using commonjs2, then export for requirejs using define by hand.
    • define('xyz', () => 'a') is a simple way of declaring a named xyz module with the value a (using requirejs).
    • This is generally done using tools, however we'll hand craft this as it works better and easier.
    • amd is not what we want, as out react ui doesn't use amd.
    • umd is does not work as we have multiple entry points in webpack.
    • Heres' the solution define('@jupyter-widgets/controls', () => widgets);
  • We bundling the widget controls into our JS and exposing them for AMD using define
    • We could instead include https://unpkg.com/browse/@jupyter-widgets/html-manager@0.18.3/dist/embed-amd.js
    • However this is a 3.2MB file.
    • Then our Widget manager also needs the widget controls. That would mean widget controls get included twice, once in our bundle and the other in the above mentioned embed-amd.js file.
    • Solution is to include everything thats in embed-amd.js into our bundle.
  • We need types for requirejs, but installing this into node_modules, for extension causes conflicts as we use require in standard node (extension and UI).
    • Solution is to just copy the @types/requirejs/index.d.ts into the types folder.