Improving ESM support and documentation, esp. for browsers about cytoscape.js HOT 16 OPEN

I can do it before Monday

from cytoscape.js.

Good analysis.

What about absorbing all the dependencies?

They're small and it would simplify the bundles -- i.e. '.min.js' would be the same as '.js' w.r.t. dependencies. You also wouldn't need to specify a mapping.

PRs welcome.

from cytoscape.js.

from cytoscape.js.

The min builds include the dependencies within the one file.

from cytoscape.js.

Oh so even in ESM you bundle them 🤔. I'm not sure I would expect that behavior as an end-user.

Resolved by your suggestion though! I will see maybe if I get around to it. Thanks!

from cytoscape.js.

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

from cytoscape.js.

Tested package.json updates from 9bd7a73 in Enrichment Map:

https://github.com/cytoscape/enrichment-map-webapp

1. cd cytoscape
2. git checkout unstable && git pull
3. npm link
4. cd ../enrichment-map-webapp
5. npm link cytoscape
6. npm run watch
7. Go to http://localhost:3000 in the browser
8. Run the demo query

@mikekucera, @chrtannus -- this is an important but potentially disruptive change. Would you test the steps above and confirm that the EM build still works for you? I'd like to confirm that this is working on machines other than my Macbook.

from cytoscape.js.

@ayjayt, would you also confirm the steps in the previous comment -- replacing enrichment-map-webapp with your own project that uses Cytoscape with a build system, like Webpack or Rollup.

from cytoscape.js.

I've updated the dist files on the unstable branch: https://github.com/cytoscape/cytoscape.js/blob/4372a14065ed26aa781f3b563d5907b9fee80054/dist/cytoscape.esm.js

That should make your testing a bit simpler. You can verify that the ESM file linked above doesn't use any import statements whatsoever.

Steps:

1. git checkout [email protected]:cytoscape/cytoscape.js.git
2. cd cytoscape.js
3. git checkout unstable && git pull
4. npm link
5. cd ../my-app
6. npm link cytoscape
7. npm run watch or npm run dev or npm run build -- however you do it
8. Verify your app builds and works

from cytoscape.js.

I've updated the dist files on the unstable branch: https://github.com/cytoscape/cytoscape.js/blob/4372a14065ed26aa781f3b563d5907b9fee80054/dist/cytoscape.esm.js

That should make your testing a bit simpler. You can verify that the ESM file linked above doesn't use any import statements whatsoever.

Steps:

1. git checkout [email protected]:cytoscape/cytoscape.js.git
2. cd cytoscape.js
3. git checkout unstable && git pull
4. npm link
5. cd ../my-app
6. npm link cytoscape
7. npm run watch or npm run dev or npm run build -- however you do it
8. Verify your app builds and works

These steps only work if the cytoscape library is imported the proper way with ESM import. It should always look like this:

import cytoscape from 'cytoscape';

Note that only the default may be used. So this would also work:

import { default as cytoscape } from 'cytoscape'

Note: This will not work:

import * as cytoscape from 'cytoscape'

from cytoscape.js.

Documentation updates:

https://js.cytoscape.org/#getting-started/including-cytoscape.js

<script type="module">
import cytoscape from "./cytoscape.esm.min.js";
</script>

This example should be:

<script type="module" src="cytoscape.esm.min.js"></script>

To use Cytoscape.js in an ESM environment with npm (e.g. Webpack or Node.js with the esm package):

import cytoscape from 'cytoscape';

Around this text, there should be a note that import * as cytoscape from 'cytoscape' does not work.

from cytoscape.js.

I can do it before Monday

@ayjayt, how did it go with your build?

from cytoscape.js.

Hey sorry, had some good news over here that I had to act on, I'm free now to do it this weekend!

from cytoscape.js.

My app is 100% web so that buildflow doesn't work for me- but I did set up a test project to see if I could import and dump the contents of cytoscape into stdout. So no bundler, just node.

I get the "you must include type: "module"" error- as in the unstable branch of cytoscape needs to add that to package.json. That's been my experience whenever using esm. Also, I've use type: "module" in other hybrid cjs/esm repositories and have never had it interfere with cjs, so AFAIK it's safe to add even if you're serving several ways to import that are NOT modules.

Around this text, there should be a note that import * as cytoscape from 'cytoscape' does not work.

My least favorite thing about ESM. There are some strong opinions floating around about it. But yes, easiest is to recommend NOT to use import *.

Documentation updates:

https://js.cytoscape.org/#getting-started/including-cytoscape.js

<script type="module"> import cytoscape from "./cytoscape.esm.min.js"; </script>

This example should be:

<script type="module" src="cytoscape.esm.min.js"></script>

Is this true? AFAIK there is no automatic global scope when using type="module", so cytoscape the module is inaccessible when being accessed like that, it's always the application in <script> and the module under import.

In my app, I have to use the original syntax.

from cytoscape.js.

I will note that it doesn't work if I add type="module"

Also, I've never seen exports w/ a nested ".":{} dictionary. Obviously it works, maybe that's the default value? Usually I just
"exports": { "module": "...", "require": "..."}

Nitpicking here

from cytoscape.js.