fix: add workaround for missing use calls

Creates a function that hte user of the library can call to
register with their cytoscape.

Ignores errors in registration, incase has multiple calls.

Not an idea fix for #41 but good enough for now to work
around the issue.

Also exports the CytoscapeGraphLayoutAdapter as a backup.

see #41

Author: stuarthendren

example/index.tsx

@@ -18,9 +18,13 @@ import {
   Graph,
   GraphModel,
   GraphToolbar,
+  initializeCytoscape,
   ModelNode,
   NodeViewer,
 } from '../dist/committed-components-graph.cjs.js'
+import { use } from 'cytoscape'
+
+initializeCytoscape(use)
 
 const App: React.FC = () => {
   const [model, setModel] = React.useState(

src/graph/renderer/CytoscapeRenderer.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useTheme } from '@committed/components'
 import {
   Css,
@@ -45,6 +48,26 @@ import {
 } from './CytoscapeGraphLayoutAdapter'
 import { useCyListener } from './useCyListener'
 
+/**
+ * Call to initialize the additional modules.
+ */
+/*
+ * This is a work-around - the modules do not seem to be registered when using as a library so must be called by the lib user.
+ * Should be able to remove but may be a bundling issue.
+ */
+export function initializeCytoscape(
+  cyuse: (module: cytoscape.Ext) => void
+): void {
+  try {
+    cyuse(CytoscapeGraphLayoutAdapter.register)
+    cyuse(ccola)
+  } catch {
+    // Ignore multiple attempts to initialize
+  }
+}
+
+initializeCytoscape(use)
+
 export interface CyGraphRendererOptions extends GraphRendererOptions {
   renderOptions: Pick<
     React.ComponentProps<typeof CytoscapeComponent>,
@@ -61,9 +84,6 @@ export interface CyGraphRendererOptions extends GraphRendererOptions {
   >
 }
 
-use(CytoscapeGraphLayoutAdapter.register)
-use(ccola)
-
 const dblClick = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let clicked: any | null = null

src/graph/renderer/index.ts

@@ -1 +1,2 @@
 export * from './CytoscapeRenderer'
+export * from './CytoscapeGraphLayoutAdapter'

src/introduction.stories.mdx

@@ -81,9 +81,14 @@ import {
   GraphModel,
   GraphToolbar,
   cytoscapeRenderer,
+  initializeCytoscape,
 } from '@committed/components-graph'
 import { Row, ThemeProvider } from '@committed/components'
 
+// If using the cytoscape renderer, just once in your application add
+import { use } from 'cytoscape'
+initializeCytoscape(use)
+
 const App: React.FC = () => {
   const [model, setModel] = React.useState(
     addRandomEdge(addRandomNode(GraphModel.createEmpty(), 20), 15)