Migrate to React 17

.eslintignore

@@ -1,2 +1,4 @@
-doc/*
-/**/*.d.ts
+/dist/*
+/doc/*
+/**/*.d.ts
+/example/example.js

.gitignore

@@ -1,3 +1,5 @@
+example/example*
+
 .DS_Store
 doc/
 

__tests__/ArrayLayer.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Plot } from 'sigplot';
 import { ArrayLayer } from '../src/index';
 

__tests__/HrefLayer.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Plot } from 'sigplot';
 import { HrefLayer } from '../src/index';
 

__tests__/PipeLayer.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Plot } from 'sigplot';
 import { PipeLayer } from '../src/index';
 

__tests__/SigPlot.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Plot } from 'sigplot';
 import { SigPlot, ArrayLayer, PipeLayer, HrefLayer } from '../src/index';
 

__tests__/WebsocketLayer.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Plot } from 'sigplot';
 import { WebsocketLayer } from '../src/index.js';
 

example/index.js

@@ -1,5 +1,4 @@
 import App from './app';
 import React from 'react';
 import ReactDOM from 'react-dom';
-require('file-loader?name=demo.html!./demo.html');
 ReactDOM.render(<App />, document.getElementById('app'));

package.json

@@ -22,24 +22,22 @@
     "src"
   ],
   "scripts": {
-    "build": "npm run clean && npm run lint && npx webpack --progress",
+    "build:debug": "npx esbuild src/index.js --bundle --loader:.js=jsx --outfile dist/react-sigplot.debug.js",
+    "build:example": "npx esbuild example/index.js --bundle --minify --sourcemap --loader:.js=jsx --outfile=example/example.js",
+    "build:release": "npx esbuild src/index.js --bundle --minify --sourcemap --loader:.js=jsx --outfile=dist/react-sigplot.js",
+    "build": "npm run clean && npm run lint && npm run build:release",
     "clean": "rm -rf ./dist",
     "eslint": "npx eslint . --fix --ignore-path .gitignore",
     "eslint:check": "npx eslint . --ignore-path .gitignore",
     "generate-docs": "rm -rf ./doc/; npx jsdoc --configure .jsdoc.json --verbose",
     "lint": "npm run prettier && npm run eslint",
     "prettier": "npx prettier --ignore-path .gitignore --write \"**/*{.js,.css,.json}\"",
     "prettier:check": "npx prettier --check --ignore-path .gitignore --write \"**/*{.js,.css,.json}\"",
-    "test": "jest --coverage"
+    "test": "jest --coverage --env=jsdom"
   },
   "dependencies": {
     "sigplot": "^2.0.0-rc20"
   },
-  "jest": {
-    "setupFiles": [
-      "jest-canvas-mock"
-    ]
-  },
   "babel": {
     "presets": [
       [
@@ -87,8 +85,19 @@
           "varsIgnorePattern": "^_"
         }
       ]
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
     }
   },
+  "eslintIgnore": [
+    "dist/*",
+    "doc/*",
+    "example/example.js*",
+    "/**/*.d.ts"
+  ],
   "prettier": {
     "overrides": [
       {
@@ -106,18 +115,16 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.4.0",
-    "babel-loader": "^8.1.0",
-    "canvas": "^2.6.1",
+    "babel-jest": "^27.5.1",
+    "canvas": "^2.9.0",
     "chai": "^4.2.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
+    "esbuild": "^0.14.21",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-loader": "^4.0.2",
@@ -127,20 +134,17 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
     "file-loader": "^6.0.0",
-    "jest": "^25.4.0",
+    "jest": "^27.5.1",
     "jest-canvas-mock": "^2.2.0",
     "jsdoc": "^3.6.6",
     "merge": ">=1.2.1",
     "minami": "^1.2.3",
     "prettier": "^2.0.4",
-    "react-doc-generator": "^1.2.5",
-    "sinon": "^9.0.2",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "sinon": "^13.0.1"
   },
   "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }

src/arraylayer.js

@@ -29,29 +29,30 @@ class ArrayLayer extends Layer {
    *
    * A large portion of the time, especially for dynamic
    * systems, this will look like
-   * `this.plot.overlay_array([], undefined)` upon mount.
+   * `this.context.overlay_array([], undefined)` upon mount.
    */
   componentDidMount() {
     const { data, options, layerOptions } = this.props;
-    this.layer = this.plot.overlay_array(data, options, layerOptions);
+    this.layer = this.context.overlay_array(data, options, layerOptions);
   }
 
   /**
    * Handles new properties being passed into <ArrayLayer/>
    *
-   * This will be replaced by
+   * UNSAFE_componentWillReceiveProps() replaced with
+   * shouldComponentUpdate() as they have similar calling patterns.
+   * We are using this method for a side-effect, and therefore
+   * returning True. getDerivedStateFromProps() had an additional
+   * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+   * Thus the usage of shouldComponentUpdate().
    *
-   *     static getDerivedStateFromProps(nextProps, prevState)
-   *
-   * in React 17.
-   *
-   * This sits in the lifecycle right before `shouldComponentUpdate`,
-   * `componentWillUpdate`, and most importantly `render`, so this is
-   * where we will call the plot's `reload` and `headermod` methods.
+   * This sits in the lifecycle right before `componentWillUpdate`,
+   * and most importantly `render`, so this is where we will call
+   * the plot's `reload` and `headermod` methods.
    *
    * @param nextProps    the newly received properties
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const {
       data: currentData,
       options: currentOptions,
@@ -69,14 +70,14 @@ class ArrayLayer extends Layer {
     // otherwise, we only need to headermod
     // with the new options
     if (nextData !== currentData) {
-      this.plot.reload(this.layer, nextData, nextOptions);
+      this.context.reload(this.layer, nextData, nextOptions);
     } else if (nextOptions !== currentOptions) {
-      this.plot.headermod(this.layer, nextOptions);
+      this.context.headermod(this.layer, nextOptions);
     } else if (nextLayerOptions !== currentLayerOptions) {
-      this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
+      this.context.get_layer(this.layer).change_settings(nextLayerOptions);
     }
 
-    return false;
+    return true;
   }
 }
 

src/bluelayer.js

@@ -34,25 +34,26 @@ class BlueLayer extends Layer {
    */
   componentDidMount() {
     const { data, layerOptions } = this.props;
-    this.layer = this.plot.overlay_bluefile(data, layerOptions);
+    this.layer = this.context.overlay_bluefile(data, layerOptions);
   }
 
   /**
    * Handles new properties being passed into <BlueLayer/>
    *
-   * This will be replaced by
+   * UNSAFE_componentWillReceiveProps() replaced with
+   * shouldComponentUpdate() as they have similar calling patterns.
+   * We are using this method for a side-effect, and therefore
+   * returning True. getDerivedStateFromProps() had an additional
+   * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+   * Thus the usage of shouldComponentUpdate().
    *
-   *     static getDerivedStateFromProps(nextProps, prevState)
-   *
-   * in React 17.
-   *
-   * This sits in the lifecycle right before `shouldComponentUpdate`,
-   * `componentWillUpdate`, and most importantly `render`, so this is
-   * where we will call the plot's `reload` and `headermod` methods.
+   * This sits in the lifecycle right before `componentWillUpdate`,
+   * and most importantly `render`, so this is where we will call
+   * the plot's `reload` and `headermod` methods.
    *
    * @param nextProps    the newly received properties
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const {
       data: currentData,
       options: currentOptions,
@@ -70,14 +71,14 @@ class BlueLayer extends Layer {
     // otherwise, we only need to headermod
     // with the new options
     if (nextData !== currentData) {
-      this.plot.reload(this.layer, nextData, nextOptions);
+      this.context.reload(this.layer, nextData, nextOptions);
     } else if (nextOptions !== currentOptions) {
-      this.plot.headermod(this.layer, nextOptions);
+      this.context.headermod(this.layer, nextOptions);
     } else if (nextLayerOptions !== currentLayerOptions) {
-      this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
+      this.context.get_layer(this.layer).change_settings(nextLayerOptions);
     }
 
-    return false;
+    return true;
   }
 }
 

src/hreflayer.js

@@ -43,38 +43,39 @@ class HrefLayer extends Layer {
    */
   componentDidMount() {
     const { href, onload, options } = this.props;
-    this.layer = this.plot.overlay_href(href, onload, options);
+    this.layer = this.context.overlay_href(href, onload, options);
   }
 
   /**
    * Handles new properties being passed into <HrefLayer/>
    *
-   * This will be replaced by
+   * UNSAFE_componentWillReceiveProps() replaced with
+   * shouldComponentUpdate() as they have similar calling patterns.
+   * We are using this method for a side-effect, and therefore
+   * returning True. getDerivedStateFromProps() had an additional
+   * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+   * Thus the usage of shouldComponentUpdate().
    *
-   *     static getDerivedStateFromProps(nextProps, prevState)
-   *
-   * in React 17.
-   *
-   * This sits in the lifecycle right before `shouldComponentUpdate`,
-   * `componentWillUpdate`, and most importantly `render`, so this is
-   * where we will call the plot's `reload` and `headermod` methods.
+   * This sits in the lifecycle right before `componentWillUpdate`,
+   * and most importantly `render`, so this is where we will call
+   * the plot's `reload` and `headermod` methods.
    *
    * @param nextProps    the newly received properties
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const { href: oldHref, options: oldOptions } = this.props;
 
     const { href: newHref, onload: newOnload, options: newOptions } = nextProps;
 
     // we only care if `href` or `options` changes
     if (newHref !== oldHref) {
-      this.plot.deoverlay(this.layer);
-      this.layer = this.plot.overlay_href(newHref, newOnload, newOptions);
+      this.context.deoverlay(this.layer);
+      this.layer = this.context.overlay_href(newHref, newOnload, newOptions);
     } else if (this.layer !== undefined && newOptions !== oldOptions) {
-      this.plot.get_layer(this.layer).change_settings(newOptions);
+      this.context.get_layer(this.layer).change_settings(newOptions);
     }
 
-    return false;
+    return true;
   }
 }
 

src/layer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
-import { Plot } from 'sigplot';
+import { PlotContext } from './sigplot';
 
 /**
  * Abstract base class for all Layers
@@ -22,28 +22,14 @@ class Layer extends Component {
     layerOptions: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
   };
 
-  static contextTypes = {
-    plot: PropTypes.instanceOf(Plot),
-  };
+  static contextType = PlotContext;
 
   /**
    * On unmount, all we need to do is remove the layer
    * from the plot.
    */
   componentWillUnmount() {
-    this.plot.remove_layer(this.layer);
-  }
-
-  /**
-   * Getter for the sigplot.Plot object
-   *
-   * The `plot` is 'given' to  the layer-children
-   * from the <SigPlot> parent component, so we receive
-   * it from the context.
-   */
-  get plot() {
-    const { plot } = this.context;
-    return plot;
+    this.context.remove_layer(this.layer);
   }
 
   /**

src/pipelayer.js

@@ -26,33 +26,34 @@ class PipeLayer extends Layer {
     const { options, data, layerOptions } = this.props;
 
     // start by setting the header of the pipe
-    this.layer = this.plot.overlay_pipe(options, layerOptions);
+    this.layer = this.context.overlay_pipe(options, layerOptions);
 
     // if data is provided and non-empty, go ahead and
     // begin plotting data
     if (data !== undefined && data.length > 0) {
-      this.plot.push(this.layer, data);
+      this.context.push(this.layer, data);
     }
   }
 
   /**
    * Handles new properties being passed into <PipeLayer/>
    *
-   * This will be replaced by
+   * UNSAFE_componentWillReceiveProps() replaced with
+   * shouldComponentUpdate() as they have similar calling patterns.
+   * We are using this method for a side-effect, and therefore
+   * returning True. getDerivedStateFromProps() had an additional
+   * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+   * Thus the usage of shouldComponentUpdate().
    *
-   *     static getDerivedStateFromProps(nextProps, prevState)
-   *
-   * in React 17.
-   *
-   * This sits in the lifecycle right before `shouldComponentUpdate`,
-   * `componentWillUpdate`, and most importantly `render`, so this is
-   * where we will call the plot's `reload` and `headermod` methods.
+   * This sits in the lifecycle right before `componentWillUpdate`,
+   * and most importantly `render`, so this is where we will call
+   * the plot's `reload` and `headermod` methods.
    *
    * @param nextProps    the newly received properties
    *
    * @TODO Handle headermod updates
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const {
       data: currentData,
       options: currentOptions,
@@ -66,14 +67,14 @@ class PipeLayer extends Layer {
 
     // if new data has come in, plot that
     if (nextData && nextData !== currentData) {
-      this.plot.push(this.layer, nextData, nextOptions);
+      this.context.push(this.layer, nextData, nextOptions);
     } else if (nextOptions !== currentOptions) {
-      this.plot.headermod(this.layer, nextOptions);
+      this.context.headermod(this.layer, nextOptions);
     } else if (nextLayerOptions !== currentLayerOptions) {
-      this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
+      this.context.get_layer(this.layer).change_settings(nextLayerOptions);
     }
 
-    return false;
+    return true;
   }
 }
 

src/plugin.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
-import { Plot } from 'sigplot';
+import { PlotContext } from './sigplot';
 
 /**
  * Abstract base class for all Plugins
@@ -15,16 +15,14 @@ class Plugin extends Component {
     pluginOptions: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
   };
 
-  static contextTypes = {
-    plot: PropTypes.instanceOf(Plot),
-  };
+  static contextType = PlotContext;
 
   /**
    * On unmount, all we need to do is remove the plugin
    * from the plot.
    */
   componentWillUnmount() {
-    this.plot.remove_plugin(this.plugin);
+    this.context.remove_plugin(this.plugin);
   }
 
   /**

src/sigplot.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Plot } from 'sigplot';
 
+export const PlotContext = React.createContext(undefined);
+
 /**
  * SigPlot.js React wrapper class
  *
@@ -37,10 +39,6 @@ class SigPlot extends Component {
     options: PropTypes.object,
   };
 
-  static childContextTypes = {
-    plot: PropTypes.instanceOf(Plot),
-  };
-
   static defaultProps = {
     height: 300,
     width: 300,
@@ -58,12 +56,6 @@ class SigPlot extends Component {
     this.state = {};
   }
 
-  getChildContext() {
-    return {
-      plot: this.plot,
-    };
-  }
-
   componentDidMount() {
     const { options } = this.props;
     this.plot = new Plot(this.element, options);
@@ -74,7 +66,7 @@ class SigPlot extends Component {
     this.setState({ plot: this.plot });
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const { height, width, options } = this.props;
     const {
       height: newHeight,
@@ -94,6 +86,8 @@ class SigPlot extends Component {
     if (newOptions !== options) {
       this.plot.change_settings(newOptions);
     }
+
+    return true;
   }
 
   render() {
@@ -134,17 +128,19 @@ class SigPlot extends Component {
       : null;
 
     return (
-      <div
-        style={{
-          height,
-          width,
-          display, // this will be deprecated
-          ...styles,
-        }}
-        ref={(element) => (this.element = element)}
-      >
-        {children}
-      </div>
+      <PlotContext.Provider value={this.plot}>
+        <div
+          style={{
+            height,
+            width,
+            display, // this will be deprecated
+            ...styles,
+          }}
+          ref={(element) => (this.element = element)}
+        >
+          {children}
+        </div>
+      </PlotContext.Provider>
     );
   }
 }

src/websocketlayer.js

@@ -41,27 +41,28 @@ class WebsocketLayer extends Layer {
    */
   componentDidMount() {
     const { wsurl, overrides, options } = this.props;
-    this.layer = this.plot.overlay_websocket(wsurl, overrides, options);
+    this.layer = this.context.overlay_websocket(wsurl, overrides, options);
   }
 
   /**
    * Handles new properties being passed into <HrefLayer/>
    *
-   * This will be replaced by
+   * UNSAFE_componentWillReceiveProps() replaced with
+   * shouldComponentUpdate() as they have similar calling patterns.
+   * We are using this method for a side-effect, and therefore
+   * returning True. getDerivedStateFromProps() had an additional
+   * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+   * Thus the usage of shouldComponentUpdate().
    *
-   *     static getDerivedStateFromProps(nextProps, prevState)
-   *
-   * in React 17.
-   *
-   * This sits in the lifecycle right before `shouldComponentUpdate`,
-   * `componentWillUpdate`, and most importantly `render`, so this is
-   * where we will call the plot's `reload` and `headermod` methods.
+   * This sits in the lifecycle right before `componentWillUpdate`,
+   * and most importantly `render`, so this is where we will call
+   * the plot's `reload` and `headermod` methods.
    *
    * @param nextProps    the newly received properties
    *
    * @TODO Investigate whether deoverlay is necessary here
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const { wsurl: oldWsurl, options: oldOptions } = this.props;
 
     const {
@@ -72,17 +73,17 @@ class WebsocketLayer extends Layer {
 
     // we only care if `wsurl` or `options` changes;
     if (newWsurl !== oldWsurl) {
-      this.plot.deoverlay(this.layer);
-      this.layer = this.plot.overlay_websocket(
+      this.context.deoverlay(this.layer);
+      this.layer = this.context.overlay_websocket(
         newWsurl,
         newOverrides,
         newOptions
       );
     } else if (this.layer !== undefined && newOptions !== oldOptions) {
-      this.plot.get_layer(this.layer).change_settings(newOptions);
+      this.context.get_layer(this.layer).change_settings(newOptions);
     }
 
-    return false;
+    return true;
   }
 }
 

src/wpipelayer.js

@@ -36,30 +36,31 @@ class WPipeLayer extends Layer {
    *
    * A large portion of the time, especially for dynamic
    * systems, this will look like a single
-   * `this.plot.overlay_wpipe(wsurl, null, {"layerType": "1D", pipesize: ...)`
+   * `this.context.overlay_wpipe(wsurl, null, {"layerType": "1D", pipesize: ...)`
    * upon mount.
    */
   componentDidMount() {
     const { wsurl, options, layerOptions, fps } = this.props;
-    this.layer = this.plot.overlay_wpipe(wsurl, options, layerOptions, fps);
+    this.layer = this.context.overlay_wpipe(wsurl, options, layerOptions, fps);
   }
 
   /**
    * Handles new properties being passed into <WPipeLayer/>
    *
-   * This will be replaced by
+   * UNSAFE_componentWillReceiveProps() replaced with
+   * shouldComponentUpdate() as they have similar calling patterns.
+   * We are using this method for a side-effect, and therefore
+   * returning True. getDerivedStateFromProps() had an additional
+   * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+   * Thus the usage of shouldComponentUpdate().
    *
-   *     static getDerivedStateFromProps(nextProps, prevState)
-   *
-   * in React 17.
-   *
-   * This sits in the lifecycle right before `shouldComponentUpdate`,
-   * `componentWillUpdate`, and most importantly `render`, so this is
-   * where we will call the plot's `reload` and `headermod` methods.
+   * This sits in the lifecycle right before `componentWillUpdate`,
+   * and most importantly `render`, so this is where we will call
+   * the plot's `reload` and `headermod` methods.
    *
    * @param nextProps    the newly received properties
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps, _nextState) {
     const {
       wsurl: currentWsurl,
       options: currentOptions,
@@ -78,19 +79,19 @@ class WPipeLayer extends Layer {
     // otherwise, we only need to headermod
     // with the new options
     if (nextWsurl !== currentWsurl || currentFps !== nextFps) {
-      this.plot.delete_layer(this.layer);
-      this.layer = this.plot.overlay_wpipe(
+      this.context.delete_layer(this.layer);
+      this.layer = this.context.overlay_wpipe(
         nextWsurl,
         nextOptions,
         nextLayerOptions,
         nextFps
       );
     } else if (nextOptions !== currentOptions) {
-      this.plot.headermod(this.layer, nextOptions);
+      this.context.headermod(this.layer, nextOptions);
     } else if (nextLayerOptions !== currentLayerOptions) {
-      this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
+      this.context.get_layer(this.layer).change_settings(nextLayerOptions);
     }
-    return false;
+    return true;
   }
 }