Cytoscape.js extension template using ESM

[maxkfranz]

Background

Cytoscape.js is a library used to visualise and analyse networks in the browser or in Node.js.

Problems to solve:

• A lot of JS projects now, and any recent projects, use ESM (either natively in the browser or with a bundler). The core Cytoscape.js library supports ESM. The extensions do not.
• Someone using ESM would have to do complicated configurations to make the extensions work with a bundler.
• Someone using ESM directly in the browser would have to use workarounds in their own code to make extensions work. This would not be straightforward, especially for novices.
• It’s difficult for someone to contribute an extension, unless they’re fairly well skilled technically.

Technical background:

• ESM is now the module standard for JS.
• The existing extensions largely use Webpack to build UMD (CJS, AMD, globals).
• The main library uses Rollup to build ESM and UMD.

Goal

• Build a template extension using a Github template repository.
• Use your template to update the main first-party extensions.
• Add the template extension to the documentation. A new app author should just click a button to get a new repo for their extension on GitHub. Then they can just focus on their extension itself.

Skills

Essential skills: JS, attention to detail, testing
Nice to have skills: Experience using Cytoscape.js

Public Repository

https://js.cytoscape.org/

Ref: nrnb/GoogleSummerOfCode#223