From e8f6919d6abb54e869a2088c5f13b4be6fd77d23 Mon Sep 17 00:00:00 2001 From: Andrew Pikul Date: Sun, 4 Feb 2024 14:49:33 -0500 Subject: [PATCH 1/3] Change roll.config to bundle deps in esm.js --- rollup.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index 41ce3284f4..2dcf90447e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -105,9 +105,9 @@ const configs = [ { input, output: { file: 'build/cytoscape.esm.js', format: 'es' }, - external: isExternal, plugins: [ nodeResolve(), + commonjs({ include: '**/node_modules/**' }), BABEL ? babel(getBabelOptions()) : {}, replace(envVariables), license(licenseHeaderOptions) From dc2412be3094001d8114028a21f82e4d2198cf06 Mon Sep 17 00:00:00 2001 From: Max Franz Date: Tue, 20 Feb 2024 16:43:47 -0500 Subject: [PATCH 2/3] Update docs table for ESM build re. deps Ref: - Improving ESM support and documentation, esp. for browsers #3217 - Change rollup.config to bundle deps in esm.js #3221 --- documentation/md/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/md/getting-started.md b/documentation/md/getting-started.md index eb76b960bc..e7a60b51fd 100644 --- a/documentation/md/getting-started.md +++ b/documentation/md/getting-started.md @@ -33,7 +33,7 @@ The available files are available under [`cytoscape/dist/`](https://github.com/c | `cytoscape.umd.js` | no | [UMD] | all | Useful for debugging on small pages, supplementary material for an academic paper for example. | | `cytoscape.esm.min.js` | yes | [ESM] (ECMAScript, uses `import` / `export`) | all | Serves the same purpose as the above, but it can be imported as an [ES6] module without the need for a bundler. | | `cytoscape.cjs.js` | no | [CJS] (CommonJS, used by [Node.js]) | none | Intended to be consumed automatically by [Node.js] or a bundler like [Webpack] via `require('cytoscape')`. | -| `cytoscape.esm.js` | no | [ESM] (`import` / `export`) | none | Intended to be consumed automatically by [Node.js] or a bundler like [Webpack] via `import cytoscape from 'cytoscape'`. | +| `cytoscape.esm.js` | no | [ESM] (`import` / `export`) | all | Intended to be consumed automatically by [Node.js] or a bundler like [Webpack] via `import cytoscape from 'cytoscape'`. | Note that Cytoscape.js uses the dimensions of your HTML DOM element container for layouts and rendering at initialisation. Thus, it is very important to place your CSS stylesheets in the `` before any Cytoscape.js-related code. Otherwise, dimensions may be sporadically reported incorrectly, resulting in undesired behaviour. From 9bd7a73d59b64d52f5511bed7cd46aeb5804c8fb Mon Sep 17 00:00:00 2001 From: Max Franz Date: Tue, 20 Feb 2024 16:44:17 -0500 Subject: [PATCH 3/3] Add exports key in package.json Ref: - Improving ESM support and documentation, esp. for browsers #3217 - Change rollup.config to bundle deps in esm.js #3221 --- package.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/package.json b/package.json index 4286163e9f..12b30019a9 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,13 @@ "node": ">=0.10" }, "main": "dist/cytoscape.cjs.js", + "module": "dist/cytoscape.esm.js", + "exports": { + ".": { + "import": "./dist/cytoscape.esm.js", + "require": "./dist/cytoscape.cjs.js" + } + }, "unpkg": "dist/cytoscape.min.js", "jsdelivr": "dist/cytoscape.min.js", "scripts": {