Open nmearl opened 5 years ago
Dear Nicolas,
a very interesting widget (cc @astrofrog ). In case you are interested, together with @mariobuikhuizen and @oscar6echo we are building ipyvuetify (which wraps nearly all vuetify widgets), and we will most likely extract ipyvue from that with the best practices on how to build a Vue based widget. We'll open source that in a few weeks I expect, but that doesn't solve your problem though. Indeed, Jupyterlab doesn't know what to do with the vue, so I think you should find some way to compile .vue to .js, and it should end up in the lib folder I guess.
cheers,
Maarten
The lab extension is compiled into ES modules with tsc first and then processed by webpack (but not by the one whose webpack.config
you see in your repo.) If I understand things correctly, the problem is that during that webpack step, there is no vue loader which would understand the .vue
files. The TypeScript compiler does not care about this initially because it sees your vue shim.
I guess the reason for using tsc
for the lab extension is that the output has to be an ES module. For everything else, e.g., the classic nbextension, webpack is used. However, it appears that webpack can not compile to ES modules.
Is there anyway to avoid having jupyter even care about the transpiled files? Building the app results in a dist/index.js file with all the compiled .ts and .vue code inside -- is it necessary to have the tsc output files in the staging directory of the extension installation?
This index.js
contains everything but it cannot be used because it's not an ES module. I have not tried yet, but maybe you could actually have success trying to convert it back to ES with something like https://github.com/rollup/rollup-plugin-commonjs; that might not work for the externals
though. I guess it's easier to do what @maartenbreddels suggests (if I understand correctly) namely to build your Vue bits into a separate .js
package in the lib/
folder that typescript is happy to import and webpack can load.
I am facing the same problem, I'll let you know if I manage to get this to work in a nice way.
I managed to use an App.vue
in the classic notebook and Jupyter Lab. You can have a look at https://github.com/flatsurf/flatsurf-widgets. I am not perfectly happy with it yet but it seems to work alright.
I also tried to get Hot Module Reloading to work for the widget but somehow the outer webpack appears to be interfering with the URLs generated by webpack-dev-server
.
https://github.com/flatsurf/flatsurf-widgets/tree/webpack-hmr adds hot reloading for the classical notebook but it's quite a hack. If someone managed to get hot reloading to work properly, I would be curious for any hints in the jupyter context.
I didn't manage to get hot reloading in Jupyter Lab but at least in the classical notebook it now seems to work fine and without any too evil hacks. The changes are on https://github.com/flatsurf/flatsurf-widgets.
Hello,
I'm trying to mount a Vuejs app in the render method of the custom
DOMWigetView
. This Vuejs app relies on.vue
single file component files. While everything builds fine locally withyarn run build
ornpm run build:lib && npm run build:nbextension
, when I tried to install the jupyter extension withjupyter labextension install .
, I get the following errorFrom what I understand, the
.vue
files are ignored by the typescript compiler, and so the output in thelib
directory are just the transpiled.js
files, but they still contain references to the.vue
files from the original.ts
files.Is there anyway to avoid having jupyter even care about the transpiled files? Building the app results in a
dist/index.js
file with all the compiled.ts
and.vue
code inside -- is it necessary to have thetsc
output files in thestaging
directory of the extension installation?For reference, the efforts I've described can be seen here.
Thanks for any guidance.