These are chat archives for ipython/ipython

2nd
Dec 2015
Jason Grout
@jasongrout
Dec 02 2015 00:32
@blink1073 - I found the answer as the first question in the browserify faq: https://www.npmjs.com/package/browserify-css#1-how-do-i-include-css-files-located-inside-the-node-modules-folder
basically, either I need to create a local css file which includes the codemirror one, or I need to run a global transform (-g) instead of a local one (-t)
S. Chris Colbert
@sccolbert
Dec 02 2015 01:11
@jasongrout all you need to do is specify a browserify transform in your package.json
the global transforms fail in the context of large builds
For example, this is how SplitPanel makes sure its gets a CSS tranform when run under browserify: https://github.com/phosphorjs/phosphor-splitpanel/blob/master/package.json#L63
then DockPanel (which consumes SplitPanel) only needs to run a local transform: https://github.com/phosphorjs/phosphor-dockpanel/blob/master/package.json#L45
alternative, you could use SystemJS to run your app unbundled
Jason Grout
@jasongrout
Dec 02 2015 02:31
Thanks, I'll try that.
oh wait. The problem here is that codemirror is a 3rd party package without that in the package.json
so I could submit a PR to codemirror
(i.e., the codemirror npm package)
S. Chris Colbert
@sccolbert
Dec 02 2015 02:33
why does codemirror need a browserify tranform?
Jason Grout
@jasongrout
Dec 02 2015 02:33
Having the codemirror css imported in my own css file works too.
the codemirror has the css that I'm including
S. Chris Colbert
@sccolbert
Dec 02 2015 02:33
I think I've always just added link tags
when using code mirror
i.e. use codemirror as an external global
not a require()
Jason Grout
@jasongrout
Dec 02 2015 02:34
so I instantiate a codemirror on the page, so I need the codemirror CSS loaded
S. Chris Colbert
@sccolbert
Dec 02 2015 02:35
right, but you can load code mirror as a global
just slap a script tag on the page
that's what we do for the website examples
whoops, that's the master branch
the real source is on the source branch
Jason Grout
@jasongrout
Dec 02 2015 02:50
So now whenever the input area widget is used in a page, somehow I need to tell the page to insert a script tag?
It seems much better to keep it all self contained, instead of people having to load codemirror and my package.
(looks like some of my comments were delayed when my internet went out, so it looks like I'm replying long after I actually wrote the sentence...)
S. Chris Colbert
@sccolbert
Dec 02 2015 02:56
yeah, I just now got it
well, we dont want to be loading separate bundles, because that will mean loading duplicate code
it's better to just import { CodeMirror } from 'codemirror' or whatever
and configure the system importer to find 'codemirror'
that way we don't duplicate code
and you should be able to map a system config to pickup codemirror from cdn
Jason Grout
@jasongrout
Dec 02 2015 03:03
right, good idea
Jason Grout
@jasongrout
Dec 02 2015 03:19
well, but presumably if you have an app that has this as a dependency
npm dedupe will dedupe the modules
and that way conflicting versions are also handled nicely
S. Chris Colbert
@sccolbert
Dec 02 2015 03:20
but you were talking about bundling
all bets are off when you bundle
basically
Jason Grout
@jasongrout
Dec 02 2015 03:20
there are two bundling things going on
S. Chris Colbert
@sccolbert
Dec 02 2015 03:20
unless you bundle the "entire" app
Jason Grout
@jasongrout
Dec 02 2015 03:21
well, maybe 3
the tests (where I'm at now)
  1. including on a random webpage
three. bundling in a larger app
three is npm dedupe
one doesn't matter - whatever works is great
S. Chris Colbert
@sccolbert
Dec 02 2015 03:22
npm dedupe is not related to bundling
at all
npm 3.x behaves like npm dedupe by default
all it does is de-duplicate the dependency tree, which a bundler will do automatically during the bundling process
Jason Grout
@jasongrout
Dec 02 2015 03:22
ah, okay
okay, so three is bundling deduper
two is the case I think you are really addressing
S. Chris Colbert
@sccolbert
Dec 02 2015 03:23
I think we'll be better off in the long run just using SystemJS
Jason Grout
@jasongrout
Dec 02 2015 03:24
so we can just tell the user that we will be importing codemirror, so you'd better have things configured so that works.
S. Chris Colbert
@sccolbert
Dec 02 2015 03:24
It also includes a bundling feature (should we ever want that), but also gives us better options for config
yep
Jason Grout
@jasongrout
Dec 02 2015 03:24
(and here's an example of how to configure to pull from cdn...)
S. Chris Colbert
@sccolbert
Dec 02 2015 03:24
exactly
that's what we're doing with the plugin examples
Jason Grout
@jasongrout
Dec 02 2015 03:24
so.....where to draw the line?
because there are 4-5 dependencies for everything
S. Chris Colbert
@sccolbert
Dec 02 2015 03:25
"We use System.import, so it better be configured, here's two examples of that" https://github.com/phosphorjs/phosphor-plugins/tree/master/examples
System caches stuff which has already been imported
so its only going to fetch a module once
Jason Grout
@jasongrout
Dec 02 2015 03:25
I'm thinking for configuration, not caching
S. Chris Colbert
@sccolbert
Dec 02 2015 03:25
Ah. The config is pretty flexible and supports globs
Jason Grout
@jasongrout
Dec 02 2015 03:26
it's terrible if a user has to configure 20 dependencies
S. Chris Colbert
@sccolbert
Dec 02 2015 03:26
so if your file hierarchy is regular, the config is simple
its only when you start mixing and matching stuff that is becomes tedious, in which case you just template it on the server
S. Chris Colbert
@sccolbert
Dec 02 2015 03:31
I imagine we'll be generating the config on the server-side as part of the index.html templating
Jason Grout
@jasongrout
Dec 02 2015 03:33
that makes sense
since the server is the one that knows where things are
S. Chris Colbert
@sccolbert
Dec 02 2015 03:34
exactly
Jason Grout
@jasongrout
Dec 02 2015 03:34
I'm also thinking of the case where you want to embed in a webpage
and you want to just include a single script tag
and you don't want people to have to do lots of configuration
that's doable too
S. Chris Colbert
@sccolbert
Dec 02 2015 03:43
It's doable, but will take more tooling
i'd say let's focus on immediate use cases first
then figure out the tooling for other pages later
i.e. if we just stick to ES6 imports, converting to another form is just transpiling and tooling
Andreas Klostermann
@akloster
Dec 02 2015 13:59
I remember some weeks ago that I saw a github repo where someone was building a "next generation" presentation mode (not RISE) for Jupyter... but try as I may, I can't find it anymore...
anyone has a hint?
Min RK
@minrk
Dec 02 2015 14:18
Do you mean nbpresent?
Aaron Watters
@AaronWatters
Dec 02 2015 18:16
Would it be possible to combine (say) 4 different (unconnected) matplotlib plots in a single composite widget using ipywidgets.HBox with buttons and sliders and other goodies? I haven't found any examples of how to do this. There is a lot of cool stuff built around matplotlib which would be nice to combine into widgets...
Jason Grout
@jasongrout
Dec 02 2015 18:53
that's not possible right now, since the notebook places widgets in one area and matplotlib plots in another area (the widget area and the output area, respectively)
however, you can have widgets above the matplotlib plots
you could use bqplot, which is based on widgets (https://github.com/bloomberg/bqplot)
Aaron Watters
@AaronWatters
Dec 02 2015 19:42
Thanks, just checking.
Jason Grout
@jasongrout
Dec 02 2015 21:03
I've wanted to mix widgets and output from the very start.
(like we have in Sage)