refactor: remove noflo related deps

.vscode/settings.json

@@ -9,14 +9,9 @@
     "gitee",
     "HTTPAPI",
     "IIFE",
-    "keiler",
-    "kieler",
-    "klay",
-    "klayjs",
     "Layouter",
     "maximizable",
     "minimizable",
-    "noflo",
     "osascript",
     "Rwkv",
     "submenu",

package.json

@@ -34,7 +34,7 @@
     "@llama-node/core": "^0.1.6",
     "@llama-node/llama-cpp": "^0.1.6",
     "@llama-node/rwkv-cpp": "^0.1.6",
-    "@tiddlygit/tiddlywiki": "^5.3.0-prerelease-2023-06-30",
+    "@tiddlygit/tiddlywiki": "^5.3.3-prerelease-2023-12-23-withdestroymethod",
     "@types/json-schema": "^7.0.12",
     "app-path": "^4.0.0",
     "best-effort-json-parser": "1.0.1",

patches/klayjs-noflo@0.3.1.patch

@@ -1,22 +0,0 @@
-diff --git a/klay-noflo.js b/klay-noflo.js
-index 80ec56bf689e9d35c7a4af4d8dd3d42392287228..58f438ce8eeb0106296e4554f0e2b938b29709ab 100644
---- a/klay-noflo.js
-+++ b/klay-noflo.js
-@@ -1,4 +1,4 @@
--var klayNoflo = (function () {
-+export const klayNoflo = (function () {
-   "use strict";
-   
-   var worker;
-diff --git a/package.json b/package.json
-index e78946c6141f2245e744976ba4a0bd3581057976..053d8a4b20e53a41871fd74ae26c778479eea762 100644
---- a/package.json
-+++ b/package.json
-@@ -5,6 +5,7 @@
-   "dependencies": {
-     "klayjs": "^0.2.1"
-   },
-+  "type": "module",
-   "devDependencies": {
-     "grunt": "~0.4.1",
-     "grunt-contrib-clean": "~0.5.0",

patches/noflo@1.4.3.patch

@@ -1,28 +0,0 @@
-diff --git a/lib/ComponentLoader.d.ts b/lib/ComponentLoader.d.ts
-index 8e7731dbdaa53005d58d55e6a834d20d032eff7e..faa04bafb5667a24ceabbf0432439e9b42856f4b 100644
---- a/lib/ComponentLoader.d.ts
-+++ b/lib/ComponentLoader.d.ts
-@@ -79,7 +79,7 @@ export class ComponentLoader {
-      * @param {import("fbp-graph/lib/Types").GraphNodeMetadata} metadata
-      * @returns {Promise<import("./Component").Component>}
-      */
--    protected createComponent(name: string, component: ComponentDefinitionWithoutGraph, metadata: import("fbp-graph/lib/Types").GraphNodeMetadata): Promise<import("./Component").Component>;
-+    createComponent(name: string, component: ComponentDefinitionWithoutGraph, metadata: import("fbp-graph/lib/Types").GraphNodeMetadata): Promise<import("./Component").Component>;
-     /**
-      * @param {import("fbp-graph").Graph|object|string} cPath
-      * @returns {boolean}
-diff --git a/src/lib/ComponentLoader.js b/src/lib/ComponentLoader.js
-index b3215074ff63d5be2f352a4dc94635f82212836c..98c7b653da5ec47072656afaef1c50b6c7ebd646 100644
---- a/src/lib/ComponentLoader.js
-+++ b/src/lib/ComponentLoader.js
-@@ -226,9 +226,8 @@ export class ComponentLoader {
-     return promise;
-   }
- 
--  // Creates an instance of a component.
-   /**
--   * @protected
-+   * Creates an instance of a component.
-    * @param {string} name
-    * @param {ComponentDefinitionWithoutGraph} component
-    * @param {import("fbp-graph/lib/Types").GraphNodeMetadata} metadata

patches/the-graph@0.13.1.patch

@@ -1,253 +0,0 @@
-diff --git a/the-graph/the-graph-app.js b/the-graph/the-graph-app.js
-index 08aa19642e811c336fdc5c1ea99b6b9906109d5b..c21d6f9470d4ebd609c6553688a7074bc4657391 100644
---- a/the-graph/the-graph-app.js
-+++ b/the-graph/the-graph-app.js
-@@ -167,6 +167,7 @@ module.exports.register = function (context) {
-         onPanScale: null,
-         onNodeSelection: null,
-         onEdgeSelection: null,
-+        getEditorRef: null,
-       };
-     },
-     getInitialState: function() {
-@@ -424,6 +425,10 @@ module.exports.register = function (context) {
-       this.hideContext();
-     },
-     componentDidMount: function () {
-+      // make sure user side parent context can access methods defined here
-+      if (this.props.getEditorRef !== undefined) {
-+        this.props.getEditorRef.current = this;
-+      }
-       var domNode = ReactDOM.findDOMNode(this.refs.svg);
- 
-       // Unselect edges and nodes
-diff --git a/the-graph/the-graph-edge.js b/the-graph/the-graph-edge.js
-index 9d658061b85ebb47eb5a8c3e16d765150ea17033..ece77b909a96e9f6c7db61535d81e5a00d5709c7 100644
---- a/the-graph/the-graph-edge.js
-+++ b/the-graph/the-graph-edge.js
-@@ -79,7 +79,7 @@ module.exports.register = function (context) {
-     mixins: [
-       TooltipMixin
-     ],
--    componentWillMount: function() {
-+    UNSAFE_componentWillMount: function() {
-     },
-     componentDidMount: function () {
-       var domNode = ReactDOM.findDOMNode(this);
-diff --git a/the-graph/the-graph-graph.js b/the-graph/the-graph-graph.js
-index 803b63b8cd42682f230172e015acfea2574b2919..bdf9bff23349781e36d8a1f0c61b182b035e6035 100644
---- a/the-graph/the-graph-graph.js
-+++ b/the-graph/the-graph-graph.js
-@@ -121,7 +121,7 @@ module.exports.register = function (context) {
-     componentWillUnmount: function () {
-         this.mounted = false;
-     },
--    componentWillReceiveProps: function(nextProps) {
-+    UNSAFE_componentWillReceiveProps: function(nextProps) {
-       this.subscribeGraph(this.props.graph, nextProps.graph);
-       this.markDirty();
-     },
-diff --git a/the-graph-nav/the-graph-nav.js b/the-graph-nav/the-graph-nav.js
-index 206975d0fc2b3efb89d18b2543830c1922cd740d..cdbcbd1b9e5f1fc60cafa0f105c32dd40b0d25f1 100644
---- a/the-graph-nav/the-graph-nav.js
-+++ b/the-graph-nav/the-graph-nav.js
-@@ -1,7 +1,9 @@
- 
- var React = require('react');
-+const ReactDOM = require('react-dom');
- var createReactClass = require('create-react-class');
--var Hammer = require('hammerjs');
-+const Hammer = require('hammerjs');
-+const hammerhacks = require('../the-graph/hammer.js');
- var thumb = require('../the-graph-thumb/the-graph-thumb.js');
- 
- function calculateStyleFromTheme(theme) {
-@@ -20,19 +22,19 @@ function calculateStyleFromTheme(theme) {
-   return style;
- }
- 
--function renderViewRectangle(context, viewrect, props) {
-+function renderViewRectangle(context, viewrect, style) {
- 
--  context.clearRect(0, 0, props.width, props.height);
--  context.fillStyle = props.outsideFill;
-+  context.clearRect(0, 0, style.width, style.height);
-+  context.fillStyle = style.outsideFill;
- 
-   // Scaled view rectangle
--  var x = Math.round( (props.viewrectangle[0]/props.scale - props.thumbrectangle[0]) * props.thumbscale );
--  var y = Math.round( (props.viewrectangle[1]/props.scale - props.thumbrectangle[1]) * props.thumbscale );
--  var w = Math.round( props.viewrectangle[2] * props.thumbscale / props.scale );
--  var h = Math.round( props.viewrectangle[3] * props.thumbscale / props.scale );
-+  var x = Math.round( (style.viewrectangle[0]/style.scale - style.thumbrectangle[0]) * style.thumbscale );
-+  var y = Math.round( (style.viewrectangle[1]/style.scale - style.thumbrectangle[1]) * style.thumbscale );
-+  var w = Math.round( style.viewrectangle[2] * style.thumbscale / style.scale );
-+  var h = Math.round( style.viewrectangle[3] * style.thumbscale / style.scale );
- 
-   var hide = false;
--  if (x<0 && y<0 && w>props.width-x && h>props.height-y) {
-+  if (x<0 && y<0 && w>style.width-x && h>style.height-y) {
-     // Hide map
-     hide = true;
-     return {
-@@ -48,35 +50,35 @@ function renderViewRectangle(context, viewrect, props) {
-   if (x < 0) { 
-     w += x; 
-     x = 0;
--    viewrect.style.borderLeftColor = props.viewBoxBorder2;
-+    viewrect.style.borderLeftColor = style.viewBoxBorder2;
-   } else {
--    viewrect.style.borderLeftColor = props.viewBoxBorder;
--    context.fillRect(0, 0, x, props.height);
-+    viewrect.style.borderLeftColor = style.viewBoxBorder;
-+    context.fillRect(0, 0, x, style.height);
-   }
-   // Top
-   if (y < 0) { 
-     h += y; 
-     y = 0;
--    viewrect.style.borderTopColor = props.viewBoxBorder2;
-+    viewrect.style.borderTopColor = style.viewBoxBorder2;
-   } else {
--    viewrect.style.borderTopColor = props.viewBoxBorder;
-+    viewrect.style.borderTopColor = style.viewBoxBorder;
-     context.fillRect(x, 0, w, y);
-   }
-   // Right
--  if (w > props.width-x) { 
--    w = props.width-x;
--    viewrect.style.borderRightColor = props.viewBoxBorder2;
-+  if (w > style.width-x) { 
-+    w = style.width-x;
-+    viewrect.style.borderRightColor = style.viewBoxBorder2;
-   } else {
--    viewrect.style.borderRightColor = props.viewBoxBorder;
--    context.fillRect(x+w, 0, props.width-(x+w), props.height);
-+    viewrect.style.borderRightColor = style.viewBoxBorder;
-+    context.fillRect(x+w, 0, style.width-(x+w), style.height);
-   }
-   // Bottom
--  if (h > props.height-y) { 
--    h = props.height-y;
--    viewrect.style.borderBottomColor = props.viewBoxBorder2;
-+  if (h > style.height-y) { 
-+    h = style.height-y;
-+    viewrect.style.borderBottomColor = style.viewBoxBorder2;
-   } else {
--    viewrect.style.borderBottomColor = props.viewBoxBorder;
--    context.fillRect(x, y+h, w, props.height-(y+h));
-+    viewrect.style.borderBottomColor = style.viewBoxBorder;
-+    context.fillRect(x, y+h, w, style.height-(y+h));
-   }
- 
-   // Size and translate rect
-@@ -139,8 +141,7 @@ var Component = createReactClass({
-   },
-   getInitialState: function() {
-     return {
--      thumbscale: 1.0,
--      currentPan: [0.0, 0.0],
-+      panStartPoint: [0.0, 0.0],
-     };
-   },
-   render: function() {
-@@ -193,19 +194,17 @@ var Component = createReactClass({
-     ]);
-   },
-   componentDidUpdate: function() {
--    this._updatePan();
-     this._renderElements();
-   },
-   componentDidMount: function() {
--    this._updatePan();
-     this._renderElements();
-     this._setupEvents();
-   },
-   _refThumbCanvas: function(canvas) {
--      this._thumbContext = canvas.getContext('2d');
-+      this._thumbContext = canvas?.getContext?.('2d');
-   },
-   _refViewboxCanvas: function(canvas) {
--      this._viewboxContext = canvas.getContext('2d');
-+      this._viewboxContext = canvas?.getContext?.('2d');
-   },
-   _refViewboxElement: function(el) {
-       this._viewboxElement = el;
-@@ -218,40 +217,49 @@ var Component = createReactClass({
-     //this.state.thumbscale = t.scale;
-     renderViewboxFromProps(this._viewboxContext, this._viewboxElement, t, this.props);
-   },
--  _updatePan: function() {
--    this.state.currentPan = [
--      -(this.props.viewrectangle[0]),
--      -(this.props.viewrectangle[1]),
--    ];
-+  onDragOrPan: function ({ deltaX, deltaY }) {
-+    if (this.props.onPanTo) {
-+      // Calculate where event pans to, in editor coordinates
-+      var x = this.state.panStartPoint[0];
-+      var y = this.state.panStartPoint[1];
-+      var panscale = 1 / this.props.viewscale;
-+      const speedupFactorX = this.props.viewrectangle[2] / this.props.width * 2;
-+      const speedupFactorY = this.props.viewrectangle[3] / this.props.height * 2;
-+      x -= deltaX / panscale * speedupFactorX;
-+      y -= deltaY / panscale * speedupFactorY;
-+      var panTo = { x: Math.round(x), y: Math.round(y) };
-+      this.props.onPanTo(panTo, event);
-+    }
-+  },
-+  onTrackStart(event) {
-+    this.state.panStartPoint[0] = -this.props.viewrectangle[0];
-+    this.state.panStartPoint[1] = -this.props.viewrectangle[1];
-+    this._topElement.addEventListener('panmove', this.onTrack);
-+    this._topElement.addEventListener('panend', this.onTrackEnd);
-+  },
-+  onTrack(event) {
-+    this.onDragOrPan({
-+      deltaX: event.gesture.deltaX,
-+      deltaY: event.gesture.deltaY,
-+    });
-+  },
-+  onTrackEnd(event) {
-+    // Don't click app (unselect)
-+    event.stopPropagation();
-+    this._topElement.removeEventListener('panmove', this.onTrack);
-+    this._topElement.removeEventListener('panend', this.onTrackEnd);
-   },
-   _setupEvents: function() {
-     this.hammer = new Hammer.Manager(this._topElement, {
-+      domEvents: true,
-+      inputClass: hammerhacks.Input,
-       recognizers: [
--        [ Hammer.Tap ],
--        [ Hammer.Pan, { direction: Hammer.DIRECTION_ALL } ],
-+        [Hammer.Tap],
-+        [Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 5 }],
-       ],
-     });
--    this.hammer.on('tap', (function(event) {
--      if (this.props.onTap) {
--        this.props.onTap(null, event);
--      }
--    }).bind(this));
--    this.hammer.on('panmove', (function(event) {
--      if (this.props.onPanTo) {
--        // Calculate where event pans to, in editor coordinates
--        var x = this.state.currentPan[0];
--        var y = this.state.currentPan[1];
--        var panscale = this.state.thumbscale / this.props.viewscale;
--        x -= event.deltaX / panscale;
--        y -= event.deltaY / panscale;
--        var panTo = { x: Math.round(x), y: Math.round(y) };
--        // keep track of the current pan, because prop/component update
--        // may be delayed, or never arrive.
--        this.state.currentPan[0] = panTo.x;
--        this.state.currentPan[1] = panTo.y;
--        this.props.onPanTo(panTo, event);
--      }
--    }).bind(this));
-+    this.hammer.on('tap', (event) => this.props.onTap(event));
-+    this._topElement.addEventListener('panstart', (event) => this.onTrackStart(event));
-   }
- });
- 

pnpm-lock.yaml

@@ -15,8 +15,8 @@ dependencies:
     specifier: ^0.1.6
     version: 0.1.6
   '@tiddlygit/tiddlywiki':
-    specifier: ^5.3.0-prerelease-2023-06-30
-    version: 5.3.0-prerelease-2023-06-30
+    specifier: ^5.3.3-prerelease-2023-12-23-withdestroymethod
+    version: 5.3.3-prerelease-2023-12-23-withdestroymethod
   '@types/json-schema':
     specifier: ^7.0.12
     version: 7.0.12
@@ -3748,8 +3748,8 @@ packages:
     engines: {node: '>=10.17'}
     dev: true
 
-  /@tiddlygit/tiddlywiki@5.3.0-prerelease-2023-06-30:
-    resolution: {integrity: sha512-3TexdExSS2geLdvtSc0EJawrgxG2NAC5KCbcO871aQwsVNvX4WvlknPFThQ42+YJMgvlozGtWNxBcLIZta/cEQ==}
+  /@tiddlygit/tiddlywiki@5.3.3-prerelease-2023-12-23-withdestroymethod:
+    resolution: {integrity: sha512-Q/sTVBjEjcix0sQlUgBfh9sCGyDXAe/nbk0UhIRrbO7jQOoJ/ZkK63q/fkVtQNniiysE8ggvsNIP+V3sPRsIfw==}
     engines: {node: '>=0.8.2'}
     hasBin: true
     dev: false
@@ -6448,8 +6448,8 @@ packages:
       fs-extra: 9.1.0
       get-folder-size: 2.0.1
       lodash: 4.17.21
-      yargs: 16.2.0
       word-wrap: 1.2.4
+      yargs: 16.2.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -13490,6 +13490,13 @@ packages:
   /word-wrap@1.2.4:
     resolution: {integrity: sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+    dev: false
 
   /wouter@2.11.0(react@18.2.0):
     resolution: {integrity: sha512-Y2CzNCwIN8kHjR2Q10D+UAgQND6TvBNmwXxgYw5ltXjjTlL7cLDUDpCip3a927Svxrmxr6vJMcPUysFxSvriCw==}

src/type.d.ts

@@ -16,348 +16,6 @@ declare module 'llama-node/dist/llm/rwkv-cpp.cjs' {
   export { RwkvCpp } from 'llama-node/dist/llm/rwkv-cpp';
 }
 
-declare module 'the-graph' {
-  import { Graph, GraphEdge, GraphNode } from 'fbp-graph';
-  import { MutableRefObject } from 'react';
-  import { Component as NoFloComponent } from 'noflo';
-  import { JSONSchema7Type } from 'json-schema';
-
-  export interface ITheGraphEditorContextMenuOptions {
-    element: ITheGraphEditor;
-    graph: Graph;
-    item: Graph | GraphNode | GraphEdge;
-    itemKey: 'graph' | 'node' | 'edge';
-    /**
-     * Keyof this.props.menus
-     * For example, `'main'`
-     */
-    type: string;
-    x?: number;
-    y?: number;
-  }
-  export interface ITheGraphProps {
-    contextMenu?: contextMenu;
-    getEditorRef?: MutableRefObject<ITheGraphEditor | undefined>;
-    getMenuDef?: (options: ITheGraphEditorContextMenuOptions) => any;
-    graph: Graph;
-    height: number | string;
-    library?: IFBPLibrary;
-    offsetX?: number;
-    onEdgeSelection: (edgeID: string, edge: any, toggle: boolean) => void;
-    onNodeSelection: (nodeID: string, node: any, toggle: boolean) => void;
-    onPanScale: (x: number, y: number, scale: number) => void;
-    readonly: boolean;
-    width: number | string;
-  }
-  export interface ITheGraphEditorState {
-    height: number;
-    maxZoom: number;
-    minZoom: number;
-    scale: number;
-    tooltip: string;
-    tooltipVisible: boolean;
-    tooltipX: number;
-    tooltipY: number;
-    trackStartX: number | null;
-    trackStartY: number | null;
-    width: number;
-    x: number;
-    y: number;
-  }
-  /**
-   * Things accessible in the-graph/the-graph-app.js
-   */
-  export interface ITheGraphEditor {
-    debounceLibraryRefesh: () => void;
-    dirty: boolean;
-    focusNode: (node: GraphNode) => void;
-    getComponent: (name: string) => void;
-    hideContext: () => void;
-    lastScale: number;
-    lastX: number;
-    lastY: number;
-    library: IFBPLibrary;
-    libraryDirty: boolean;
-    pinching: boolean;
-    refs: {
-      graph?: ITheGraphEditorGraph;
-    };
-    registerComponent: (definition: NoFloComponent, generated: boolean) => void;
-    /**
-     * This is undefined, because it is in the-graph/the-graph-graph.js
-     * Set the preview bounding rect by drag event
-     * In the-graph/the-graph-graph.js
-     * ```js
-     * appDomNode.addEventListener('mousemove', this.renderPreviewEdge);
-     * appDomNode.addEventListener('panmove', this.renderPreviewEdge);
-     * appDomNode.addEventListener('tap', this.cancelPreviewEdge);
-      ```
-     */
-    renderPreviewEdge?: (event: MouseEvent | TouchEvent) => void;
-    rerender: () => void;
-    setState: (state: Partial<ITheGraphEditorState>) => void;
-    showContext: (options: ITheGraphEditorContextMenuOptions) => void;
-    state: ITheGraphEditorState;
-    theme: 'dark' | 'light';
-    triggerAutolayout: () => void;
-    triggerFit: () => void;
-    unselectAll: () => void;
-    zoomFactor: number;
-    zoomX: number;
-    zoomY: number;
-  }
-  export interface ITheGraphEditorGraphState {
-    animatedEdges: GraphEdge[];
-    displaySelectionGroup: boolean;
-    edgePreview: GraphEdge | null;
-    edgePreviewX: number;
-    edgePreviewY: number;
-    errorNodes: GraphNode[];
-    forceSelection: boolean;
-    offsetX: number;
-    offsetY: number;
-    selectedEdges: GraphEdge[];
-    selectedNodes: GraphNode[];
-  }
-  export interface ITheGraphEditorGraphProps {
-    app: ITheGraphEditor | null;
-    graph: Graph;
-    library: IFBPLibrary;
-    // allows overriding icon of a node
-    nodeIcons: Record<string, string>;
-    offsetX: number;
-    offsetY: number;
-  }
-  export interface ITheGraphEditorGraph {
-    addEdge: Function;
-    cancelPreviewEdge: Function;
-    context: {};
-    dirty: false;
-    edgeStart: Function;
-    getComponentInfo: Function;
-    getGraphInport: Function;
-    getGraphOutport: Function;
-    getNodeInport: Function;
-    getNodeOutport: Function;
-    getPorts: Function;
-    markDirty: Function;
-    mounted: true;
-    moveGroup: Function;
-    /**
-     * ```json
-     * {"adapters/ObjectToString_emfdv":{"inports":{"in":{"label":"in","type":"object","x":0,"y":18},"assoc":{"label":"assoc","type":"string","x":0,"y":36,"route":0},"delim":{"label":"delim","type":"string","x":0,"y":54,"route":0}},"outports":{"out":{"label":"out","type":"string","x":72,"y":36,"route":0}}},"adapters/PacketsToObject_llf0k":{"inports":{"in":{"label":"in","type":"all","x":0,"y":36,"route":0}},"outports":{"out":{"label":"out","type":"object","x":72,"y":36}}}}
-     * ```
-     */
-    portInfo?: Record<string, { inports: INoFloProtocolComponentPort[]; outports: INoFloProtocolComponentPort[] }>;
-    props: ITheGraphEditorGraphProps;
-    refs: {};
-    renderPreviewEdge: Function;
-    resetPortRoute: Function;
-    setAnimatedEdges: Function;
-    setErrorNodes: Function;
-    setSelectedEdges: Function;
-    setSelectedNodes: Function;
-    state: ITheGraphEditorGraphState;
-    subscribeGraph: Function;
-    triggerRender: Function;
-    updateIcon: Function;
-  }
-  export function App(props: ITheGraphProps): JSX.Element;
-
-  export interface INoFloProtocolComponentPort {
-    addressable?: boolean;
-    /**
-     * @example default: 'default-value',
-     */
-    default?: JSONSchema7Type;
-    description: string;
-    id: string;
-    required?: boolean;
-    schema?: string;
-    type: 'all' | 'array' | 'boolean' | 'bang' | 'int' | 'number' | 'object' | 'string';
-    /**
-     * @example values: 'noflo is awesome'.split(' ')
-     */
-    values?: JSONSchema7Type[];
-  }
-  /**
-   * ```json
-   * {
-        "name": "adapters/ObjectToString",
-        "icon": "font",
-        "description": "stringifies a simple object with configurable associator and delimiter",
-        "subgraph": false,
-        "inports": [
-            {
-                "id": "in",
-                "type": "object",
-                "schema": null,
-                "required": false,
-                "description": "Object to convert",
-                "name": "in"
-            },
-            {
-                "id": "assoc",
-                "type": "string",
-                "schema": null,
-                "required": false,
-                "default": ":",
-                "description": "Associating string for key/value pairs",
-                "name": "assoc"
-            },
-            {
-                "id": "delim",
-                "type": "string",
-                "schema": null,
-                "required": false,
-                "default": ",",
-                "description": "Delimiter string between object properties",
-                "name": "delim"
-            }
-        ],
-        "outports": [
-            {
-                "id": "out",
-                "type": "string",
-                "schema": null,
-                "required": false,
-                "description": "string",
-                "name": "out"
-            }
-        ]
-    }
-    ```
-   */
-  export interface INoFloUIComponentPort extends Omit<INoFloProtocolComponentPort, 'id'> {
-    name: string;
-  }
-  function componentsFromGraph(graph: Graph): INoFloUIComponent[];
-  export interface INoFloUIComponent {
-    description: string;
-    icon: string;
-    inports?: INoFloUIComponentPort[];
-    name: string;
-    outports?: INoFloUIComponentPort[];
-    /**
-     * True means this is not a Elementary component
-     */
-    subgraph?: boolean;
-    unnamespaced?: boolean;
-  }
-  export interface INoFloProtocolComponent extends Omit<INoFloUIComponent, 'inports' | 'outports'> {
-    inPorts?: INoFloProtocolComponentPort[];
-    outPorts?: INoFloProtocolComponentPort[];
-  }
-  export type IFBPLibrary = Record<string, INoFloUIComponent>;
-  function libraryFromGraph(graph: Graph): IFBPLibrary;
-
-  export const library = {
-    componentsFromGraph,
-    libraryFromGraph,
-  };
-
-  function styleFromTheme(theme: 'dark' | 'light'): {
-    height: number;
-    lineWidth: number;
-    nodeSize: number;
-    width: number;
-  };
-  function renderThumbnail(contextcontext: CanvasRenderingContext2D | null, graph: Graph, properties: ReturnType<typeof styleFromTheme>): {
-    rectangle: number[];
-    scale: number;
-  };
-  export const thumb = {
-    styleFromTheme,
-    render: renderThumbnail,
-  };
-
-  export interface ITheGraphNavProps {
-    graph: Graph;
-    height: number;
-    onPanTo?: (panTo: {
-      x: number;
-      y: number;
-    }, event: MouseEvent) => void;
-    onTap?: () => void;
-    viewrectangle?: number[];
-    viewscale: number;
-    width: number;
-  }
-  function NavComponent(props: ITheGraphNavProps): JSX.Element;
-  export const nav = {
-    Component: NavComponent,
-  };
-
-  /**
-   * @url https://github.com/flowhub/the-graph/blob/7e9457ece2923dd86b1078019d50fc18e7052770/the-graph/font-awesome-unicode-map.js
-   * ```js
-   * // This file is generated via `npm run fontawesome`
-      module.exports = {
-        '500px': '',
-        'address-book': '',
-        'address-book-o': '',
-    ```
-   */
-  export const FONT_AWESOME: Record<string, string>;
-
-  /**
-   *
-   * @param keilerGraph assign by
-   * ```js
-   * autolayouter = klayNoflo.init({
-      onSuccess: this.applyAutolayout.bind(this),
-      workerScript: 'vendor/klayjs/klay.js',
-    })
-    ```
-   * @param props `{ snap: 36 }` in noflo-ui example.
-   */
-  function applyAutolayout(graph: Graph, keilerGraph, props: { snap: number }): void;
-  export const autolayout = {
-    applyToGraph: applyAutolayout,
-  };
-}
-declare module 'the-graph/the-graph-nav/the-graph-nav' {
-  import { nav } from 'the-graph';
-  export const Component = nav.Component;
-}
-
-declare module 'the-graph/the-graph/the-graph-autolayout' {
-  import { autolayout } from 'the-graph';
-  // eslint-disable-next-line unicorn/prefer-export-from
-  export default autolayout;
-}
-
-declare module 'klayjs-noflo/klay-noflo' {
-  import { Graph } from 'fbp-graph';
-  export interface IKlayLayoutOptions {
-    direction: string;
-    graph: Graph;
-    options: {
-      algorithm: string;
-      borderSpacing: number;
-      crossMin: string;
-      direction: string;
-      edgeRouting: string;
-      edgeSpacingFactor: number;
-      inLayerSpacingFactor: number;
-      intCoordinates: boolean;
-      layoutHierarchy: boolean;
-      nodeLayering: string;
-      nodePlace: string;
-      spacing: number;
-    };
-    portInfo:
-      | Record<string, {
-        inports: INoFloProtocolComponentPort[];
-        outports: INoFloProtocolComponentPort[];
-      }>
-      | undefined;
-  }
-  export const klayNoflo: {
-    init(options: { onSuccess: (keilerGraph: unknown) => void; workerScript: string }): typeof klayNoflo;
-    layout(options: IKlayLayoutOptions): void;
-  };
-}
 
 declare module 'espree' {
   // https://github.com/eslint/espree#options

webpack.plugins.js

@@ -85,13 +85,14 @@ exports.renderer = _.compact([
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     ? new BundleAnalyzerPlugin({ generateStatsFile: true, analyzerMode: 'disabled', statsFilename: '../../out/webpack-stats-renderer.json' })
     : undefined,
-  new CopyPlugin({
-    patterns: [
-      // similar to noflo-ui's webpack.config.js
-      {
-        from: 'node_modules/klayjs/klay.js',
-        to: 'webWorkers/klayjs/klay.js',
-      },
-    ],
-  }),
+  // Example: copy files for webWorker to use
+  // new CopyPlugin({
+  //   patterns: [
+  //     // similar to noflo-ui's webpack.config.js
+  //     {
+  //       from: 'node_modules/klayjs/klay.js',
+  //       to: 'webWorkers/klayjs/klay.js',
+  //     },
+  //   ],
+  // }),
 ]);