Adding exports map in package.json about cytoscape.js HOT 11 CLOSED

@sidharthv96

All of the builds on unstable currently have no external dependencies, including CJS now. There is nothing listed under package.json > dependencies anymore, either. If linking to the unstable branch doesn't work with the testing steps, then I suspect that something is off with your build config -- or the npm link step.

You'll need to delete your patch file in Mermaid to test the steps.

from cytoscape.js.

@maxkfranz it's working perfectly now! Thank you!

Great

We also moved to using esbuild as well.

Also great

Now, one of our major concern is the size. I'll try to see if there are any low hanging fruits related to tree shaking available in cytoscape.

Cytoscape does a lot. It has a CSS parser, a renderer, several layouts, etc. There's a lot there.

This probably couldn't be changed that much in the current v3 line in the main builds. Possibly in v4. It would probably require some significant API changes re. extensions.

For your case, you're welcome to add a Rollup build config to the Cytoscape repo that's smaller, if you like. It could exclude things like the canvas renderer if you're just using it headlessly for the model and layouts. Something like 'cytoscape.headless.esm.js'.

Note you'd have to do the following in Mermaid, if you use a custom build:

import cytoscape from 'cytoscape/dist/cytoscape.headless.esm.js'

from cytoscape.js.

In the export map, using the ESM version (./dist/cytoscape.esm.js)also throws similar error.

from cytoscape.js.

Should be superseded by:

• #3221

from cytoscape.js.

See:

• #3217
• 9bd7a73

@sidharthv96, would you follow the steps in #3217 (comment) to confirm that the exports map works in your project?

from cytoscape.js.

@maxkfranz, sadly that didn't work.

"lodash/debounce" is imported by "lodash/debounce?commonjs-external", but could not be resolved – treating it as an external dependency.
"lodash/get" is imported by "lodash/get?commonjs-external", but could not be resolved – treating it as an external dependency.
"lodash/set" is imported by "lodash/set?commonjs-external", but could not be resolved – treating it as an external dependency.
"lodash/toPath" is imported by "lodash/toPath?commonjs-external", but could not be resolved – treating it as an external dependency.

This is what worked in mermaid.

diff --git a/package.json b/package.json
index f2f77fa79c99382b079f4051ed51eafe8d2379c8..0bfddf55394e86f3a386eb7ab681369d410bae07 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,15 @@
   "engines": {
     "node": ">=0.10"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/cytoscape.umd.js",
+      "default": "./dist/cytoscape.cjs.js"
+    },
+    "./*": "./*"
+  },
   "main": "dist/cytoscape.cjs.js",
+  "module": "dist/cytoscape.umd.js",
   "unpkg": "dist/cytoscape.min.js",
   "jsdelivr": "dist/cytoscape.min.js",
   "scripts": {

from cytoscape.js.

You need to make a build of Cytoscape. UMD really shouldn’t be used for import.

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.

@maxkfranz tried it. Didn't work. I forgot to update here then. Will rerun and add the logs.

from cytoscape.js.

@maxkfranz it's working perfectly now! Thank you!

We also moved to using esbuild as well.

Now, one of our major concern is the size. I'll try to see if there are any low hanging fruits related to tree shaking available in cytoscape.

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.