Merged in feature/browser_export (pull request #20)

Introduce typescript

* Configure typescript support for jets

* Fix cycle dependency

* Configure typescript

* Migrate mindplot to typescript

* Merge branch 'develop' into feature/browser_export

packages/mindplot/babel.config.json

@@ -7,8 +7,12 @@
                 "targets": {
                     "esmodules": true
                 }
-            }
+            },
+            "@babel/preset-typescript"
         ]
     ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ],
     "sourceType": "module"
 }

packages/mindplot/jest.config.js

@@ -1,23 +1,11 @@
-// Sync object
-/** @type {import('@jest/types').Config.InitialOptions} */
 const config = {
   testEnvironment: 'jsdom',
   verbose: true,
-  moduleFileExtensions: ['js'],
+  preset: 'ts-jest',
+  moduleFileExtensions: ['js', 'ts'],
   transform: {
     '^.+\\.js?$': 'babel-jest',
   },
-  moduleNameMapper: {
-    '^@libraries(.*)$': '<rootDir>../../libraries$1',
-    '^@commands(.*)$': '<rootDir>/src/components/commands$1',
-    '^@layout(.*)$': '<rootDir>/src/components/layout$1',
-    '^@libs(.*)$': '<rootDir>/src/components/libraries$1',
-    '^@model(.*)$': '<rootDir>/src/components/model$1',
-    '^@persistence(.*)$': '<rootDir>/src/components/persistence$1',
-    '^@util(.*)$': '<rootDir>/src/components/util$1',
-    '^@widget(.*)$': '<rootDir>/src/components/widget$1',
-    '^@components(.*)$': '<rootDir>/src/components$1',
-  },
 };
 
 module.exports = config;

packages/mindplot/package.json

@@ -26,7 +26,7 @@
         "lint": "eslint src",
         "playground": "webpack serve --config webpack.playground.js",
         "cy:run": "cypress run",
-        "test:unit": "jest ./test/unit/*.js",
+        "test:unit": "jest ./test/unit/*.ts ./test/unit/*.js",
         "test:integration": "start-server-and-test playground http-get://localhost:8081 cy:run",
         "test": "yarn test:unit && yarn test:integration"
     },
@@ -41,7 +41,9 @@
     "devDependencies": {
         "@babel/core": "^7.14.6",
         "@babel/preset-env": "^7.14.7",
+        "@babel/preset-typescript": "^7.16.5",
         "@babel/register": "^7.16.0",
+        "@types/jest": "^27.0.3",
         "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^4.0.0-alpha.0",
         "compression-webpack-plugin": "^9.2.0",
@@ -62,6 +64,8 @@
         "mocha": "^9.1.3",
         "nodemon": "^2.0.12",
         "start-server-and-test": "^1.14.0",
+        "ts-jest": "^27.1.2",
+        "ts-loader": "^9.2.6",
         "webpack": "^5.44.0",
         "webpack-bundle-analyzer": "^4.5.0",
         "webpack-cli": "^4.7.2",

packages/mindplot/src/components/Designer.js

@@ -37,7 +37,7 @@ import RelationshipPivot from './RelationshipPivot';
 import Relationship from './Relationship';
 
 import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
-import TopicFeature from './TopicFeature';
+import TopicFeatureFactory from './TopicFeature';
 
 import { create } from './NodeGraphUtils';
 
@@ -952,7 +952,7 @@ class Designer extends Events {
   addIconType(iconType) {
     const topicsIds = this.getModel().filterTopicsIds();
     if (topicsIds.length > 0) {
-      this._actionDispatcher.addFeatureToTopic(topicsIds[0], TopicFeature.Icon.id, {
+      this._actionDispatcher.addFeatureToTopic(topicsIds[0], TopicFeatureFactory.Icon.id, {
         id: iconType,
       });
     }

packages/mindplot/src/components/Topic.js

@@ -31,7 +31,7 @@ import {
 import NodeGraph from './NodeGraph';
 import TopicConfig from './TopicConfig';
 import TopicStyle from './TopicStyle';
-import TopicFeature from './TopicFeature';
+import TopicFeatureFactory from './TopicFeature';
 import ConnectionLine from './ConnectionLine';
 import IconGroup from './IconGroup';
 import FadeEffect from './util/FadeEffect';
@@ -311,8 +311,8 @@ class Topic extends NodeGraph {
     const model = this.getModel();
     const featuresModel = model.getFeatures();
     featuresModel.forEach((f) => {
-      const icon = TopicFeature.createIcon(this, f, this.isReadOnly());
-      result.addIcon(icon, f.getType() === TopicFeature.Icon.id && !this.isReadOnly());
+      const icon = TopicFeatureFactory.createIcon(this, f, this.isReadOnly());
+      result.addIcon(icon, f.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly());
     });
 
     return result;
@@ -331,10 +331,10 @@ class Topic extends NodeGraph {
     const model = this.getModel();
     model.addFeature(featureModel);
 
-    const result = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
+    const result = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly());
     iconGroup.addIcon(
       result,
-      featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
+      featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(),
     );
 
     this._adjustShapes();
@@ -764,7 +764,7 @@ class Topic extends NodeGraph {
     const model = this.getModel();
     const editorModel = {
       getValue() {
-        const notes = model.findFeatureByType(TopicFeature.Note.id);
+        const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
         let result;
         if (notes.length > 0) result = notes[0].getText();
 
@@ -773,7 +773,7 @@ class Topic extends NodeGraph {
 
       setValue(value) {
         const dispatcher = ActionDispatcher.getInstance();
-        const notes = model.findFeatureByType(TopicFeature.Note.id);
+        const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
         if (!$defined(value)) {
           const featureId = notes[0].getId();
           dispatcher.removeFeatureFromTopic(topicId, featureId);
@@ -782,7 +782,7 @@ class Topic extends NodeGraph {
             text: value,
           });
         } else {
-          dispatcher.addFeatureToTopic(topicId, TopicFeature.Note.id, {
+          dispatcher.addFeatureToTopic(topicId, TopicFeatureFactory.Note.id, {
             text: value,
           });
         }
@@ -800,7 +800,7 @@ class Topic extends NodeGraph {
     const editorModel = {
       getValue() {
         // @param {mindplot.model.LinkModel[]} links
-        const links = model.findFeatureByType(TopicFeature.Link.id);
+        const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
         let result;
         if (links.length > 0) result = links[0].getUrl();
 
@@ -809,7 +809,7 @@ class Topic extends NodeGraph {
 
       setValue(value) {
         const dispatcher = ActionDispatcher.getInstance();
-        const links = model.findFeatureByType(TopicFeature.Link.id);
+        const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
         if (!$defined(value)) {
           const featureId = links[0].getId();
           dispatcher.removeFeatureFromTopic(topicId, featureId);
@@ -818,7 +818,7 @@ class Topic extends NodeGraph {
             url: value,
           });
         } else {
-          dispatcher.addFeatureToTopic(topicId, TopicFeature.Link.id, {
+          dispatcher.addFeatureToTopic(topicId, TopicFeatureFactory.Link.id, {
             url: value,
           });
         }

packages/mindplot/src/components/TopicFeature.js

@@ -24,53 +24,25 @@ import LinkIcon from './LinkIcon';
 import NoteModel from './model/NoteModel';
 import NoteIcon from './NoteIcon';
 
-const TopicFeature = {
+const TopicFeatureFactory = {
   /** the icon object */
   Icon: {
     id: IconModel.FEATURE_TYPE,
-    model: IconModel,
     icon: ImageIcon,
   },
 
   /** the link object */
   Link: {
     id: LinkModel.FEATURE_TYPE,
-    model: LinkModel,
     icon: LinkIcon,
   },
 
   /** the note object */
   Note: {
     id: NoteModel.FEATURE_TYPE,
-    model: NoteModel,
     icon: NoteIcon,
   },
 
-  /**
-     * @param id the feature metadata id
-     * @return {Boolean} returns true if the given id is contained in the metadata array
-     */
-  isSupported(id) {
-    return TopicFeature._featuresMetadataById.some((elem) => elem.id === id);
-  },
-
-  /**
-     * @param type
-     * @param attributes
-     * @throws will throw an error if type is null or undefined
-     * @throws will throw an error if attributes is null or undefined
-     * @return {mindplot.model.FeatureModel} a new instance of the feature model subclass matching
-     * the topic feature
-     */
-  createModel(type, attributes) {
-    $assert(type, 'type can not be null');
-    $assert(attributes, 'attributes can not be null');
-
-    const { model: Model } = TopicFeature._featuresMetadataById
-      .filter((elem) => elem.id === type)[0];
-    return new Model(attributes);
-  },
-
   /**
      * @param {mindplot.Topic} topic
      * @param {mindplot.model.FeatureModel} model
@@ -83,12 +55,12 @@ const TopicFeature = {
     $assert(topic, 'topic can not be null');
     $assert(model, 'model can not be null');
 
-    const { icon: Icon } = TopicFeature._featuresMetadataById
+    const { icon: Icon } = TopicFeatureFactory._featuresMetadataById
       .filter((elem) => elem.id === model.getType())[0];
     return new Icon(topic, model, readOnly);
   },
 };
 
-TopicFeature._featuresMetadataById = [TopicFeature.Icon, TopicFeature.Link, TopicFeature.Note];
+TopicFeatureFactory._featuresMetadataById = [TopicFeatureFactory.Icon, TopicFeatureFactory.Link, TopicFeatureFactory.Note];
 
-export default TopicFeature;
+export default TopicFeatureFactory;

packages/mindplot/src/components/export/Exporter.ts

@@ -0,0 +1,7 @@
+import Mindmap from '../model/Mindmap';
+
+interface Exporter {
+    export(mindplot: Mindmap): string;
+}
+
+export default Exporter;

packages/mindplot/src/components/export/TxtExporter.ts

@@ -0,0 +1,10 @@
+import Exporter from "./Exporter";
+import Mindmap from "../model/Mindmap";
+
+
+class TextExporter implements Exporter {
+    export(mindplot: Mindmap): string {
+        return "some value";
+    }
+}
+export default TextExporter;

packages/mindplot/src/components/model/FeatureModelFactory.ts

@@ -0,0 +1,37 @@
+import { $assert } from '@wisemapping/core-js';
+import IconModel from './IconModel';
+import LinkModel from './LinkModel';
+import NoteModel from './NoteModel';
+import FeatureModel from './FeatureModel';
+
+class FeatureModelFactory {
+
+  private static modelById = [{
+    id: IconModel.FEATURE_TYPE,
+    model: IconModel,
+  }, {
+    id: LinkModel.FEATURE_TYPE,
+    model: LinkModel,
+  }, {
+    id: NoteModel.FEATURE_TYPE,
+    model: NoteModel,
+  }] as const;
+
+  static createModel(type: string, attributes): FeatureModel {
+    $assert(type, 'type can not be null');
+    $assert(attributes, 'attributes can not be null');
+
+    const { model: Model } = FeatureModelFactory.modelById
+      .filter((elem) => elem.id === type)[0];
+    return new Model(attributes);
+  }
+  /**
+     * @param id the feature metadata id
+     * @return {Boolean} returns true if the given id is contained in the metadata array
+     */
+  static isSupported(type: string): boolean {
+    return FeatureModelFactory.modelById.some((elem) => elem.id === type);
+  }
+};
+
+export default FeatureModelFactory;

packages/mindplot/src/components/model/IMindmap.ts

@@ -18,68 +18,35 @@
  *   limitations under the License.
  */
 import { $assert } from '@wisemapping/core-js';
+import NodeModel from './NodeModel';
+import RelationshipModel from './RelationshipModel';
 
-class IMindmap {
-  getCentralTopic() {
+abstract class IMindmap {
+  getCentralTopic(): NodeModel {
     return this.getBranches()[0];
   }
 
-  /** @abstract */
-  getDescription() {
-    throw new Error('Unsupported operation');
-  }
+  abstract getDescription(): string;
 
-  /** @abstract */
-  setDescription(value) {
-    throw new Error('Unsupported operation');
-  }
+  abstract setDescription(value: string);
 
-  /** @abstract */
-  getId() {
-    throw new Error('Unsupported operation');
-  }
+  abstract getId(): string
 
-  /** @abstract */
-  setId(id) {
-    throw new Error('Unsupported operation');
-  }
+  abstract setId(id: string);
 
-  /** @abstract */
-  getVersion() {
-    throw new Error('Unsupported operation');
-  }
+  abstract getVersion(): string;
 
-  /** @abstract */
-  setVersion(version) {
-    throw new Error('Unsupported operation');
-  }
+  abstract setVersion(version: string): void;
 
-  /** @abstract */
-  addBranch(nodeModel) {
-    throw new Error('Unsupported operation');
-  }
+  abstract addBranch(nodeModel: NodeModel): void;
 
-  /** @abstract */
-  getBranches() {
-    throw new Error('Unsupported operation');
-  }
+  abstract getBranches(): Array<NodeModel>;
 
-  /** @abstract */
-  removeBranch(node) {
-    throw new Error('Unsupported operation');
-  }
+  abstract removeBranch(node: NodeModel): void;
 
-  /** @abstract */
-  getRelationships() {
-    throw new Error('Unsupported operation');
-  }
+  abstract getRelationships(): Array<RelationshipModel>;
 
-  /**
-     * @param parent
-     * @param child
-     * @throws will throw an error if child already has a connection to a parent node
-     */
-  connect(parent, child) {
+  connect(parent: NodeModel, child: NodeModel): void {
     // Child already has a parent ?
     $assert(!child.getParent(), 'Child model seems to be already connected');
 
@@ -95,7 +62,7 @@ class IMindmap {
      * @throws will throw an error if child is null or undefined
      * @throws will throw an error if child's parent cannot be found
      */
-  disconnect(child) {
+  disconnect(child: NodeModel): void {
     const parent = child.getParent();
     $assert(child, 'Child can not be null.');
     $assert(parent, 'Child model seems to be already connected');
@@ -114,18 +81,11 @@ class IMindmap {
     throw new Error('Unsupported operation');
   }
 
-  /** @abstract */
-  createRelationship(fromNode, toNode) {
-    throw new Error('Unsupported operation');
-  }
+  abstract createRelationship(fromNode: NodeModel, toNode: NodeModel): void;
 
-  /** @abstract */
-  addRelationship(rel) {
-    throw new Error('Unsupported operation');
-  }
+  abstract addRelationship(rel: RelationshipModel): void;
 
-  /** @abstract */
-  deleteRelationship(relationship) {
+  deleteRelationship(relationship: RelationshipModel): void {
     throw new Error('Unsupported operation');
   }
 

packages/mindplot/src/components/model/Mindmap.ts

@@ -23,43 +23,51 @@ import RelationshipModel from './RelationshipModel';
 import ModelCodeName from '../persistence/ModelCodeName';
 
 class Mindmap extends IMindmap {
-  constructor(id, version) {
+  _description: string;
+  _version: string;
+  _id: string;
+  _branches: Array<NodeModel>;
+  _relationships: Array<RelationshipModel>;
+
+  constructor(id: string, version: string = ModelCodeName.TANGO) {
     super();
     $assert(id, 'Id can not be null');
+    $assert($defined(version), 'Version can not be null');
+
     this._branches = [];
     this._description = null;
     this._relationships = [];
-    this._version = $defined(version) ? version : ModelCodeName.TANGO;
+    this._version = version;
     this._id = id;
   }
 
   /** */
-  getDescription() {
+  getDescription(): string {
     return this._description;
   }
 
   /** */
-  setDescription(value) {
+  setDescription(value: string) {
     this._description = value;
   }
 
   /** */
-  getId() {
+  getId(): string {
     return this._id;
   }
 
   /** */
-  setId(id) {
+  setId(id: string) {
     this._id = id;
   }
 
   /** */
-  getVersion() {
+  getVersion(): string {
     return this._version;
   }
 
   /** */
-  setVersion(version) {
+  setVersion(version: string): void {
     this._version = version;
   }
 
@@ -68,7 +76,7 @@ class Mindmap extends IMindmap {
          * @throws will throw an error if nodeModel is null, undefined or not a node model object
          * @throws will throw an error if
          */
-  addBranch(nodeModel) {
+  addBranch(nodeModel: NodeModel): void {
     $assert(nodeModel && nodeModel.isNodeModel(), 'Add node must be invoked with model objects');
     const branches = this.getBranches();
     if (branches.length === 0) {
@@ -84,18 +92,16 @@ class Mindmap extends IMindmap {
   /**
          * @param nodeModel
          */
-  removeBranch(nodeModel) {
+  removeBranch(nodeModel: NodeModel): void {
     $assert(nodeModel && nodeModel.isNodeModel(), 'Remove node must be invoked with model objects');
     this._branches = this._branches.filter((b) => b !== nodeModel);
   }
 
-  /** */
   getBranches() {
     return this._branches;
   }
 
-  /** */
-  getRelationships() {
+  getRelationships(): Array<RelationshipModel> {
     return this._relationships;
   }
 
@@ -103,7 +109,7 @@ class Mindmap extends IMindmap {
          * @param node
          * @return {Boolean} true if node already exists
          */
-  hasAlreadyAdded(node) {
+  hasAlreadyAdded(node: any) {
     let result = false;
 
     // Check in not connected nodes.
@@ -121,7 +127,7 @@ class Mindmap extends IMindmap {
          * @param id
          * @return the node model created
          */
-  createNode(type = INodeModel.MAIN_TOPIC_TYPE, id) {
+  createNode(type = INodeModel.MAIN_TOPIC_TYPE, id: number) {
     return new NodeModel(type, this, id);
   }
 
@@ -132,7 +138,7 @@ class Mindmap extends IMindmap {
    * @throws will throw an error if target node is null or undefined
    * @return the relationship model created
    */
-  createRelationship(sourceNodeId, targetNodeId) {
+  createRelationship(sourceNodeId: any, targetNodeId: any) {
     $assert($defined(sourceNodeId), 'from node cannot be null');
     $assert($defined(targetNodeId), 'to node cannot be null');
 
@@ -142,18 +148,18 @@ class Mindmap extends IMindmap {
   /**
    * @param relationship
    */
-  addRelationship(relationship) {
+  addRelationship(relationship: RelationshipModel) {
     this._relationships.push(relationship);
   }
 
   /**
          * @param relationship
          */
-  deleteRelationship(relationship) {
+  deleteRelationship(relationship: RelationshipModel) {
     this._relationships = this._relationships.filter((r) => r !== relationship);
   }
 
-  findNodeById(id) {
+  findNodeById(id: any) {
     let result = null;
     for (let i = 0; i < this._branches.length; i++) {
       const branch = this._branches[i];
@@ -164,17 +170,13 @@ class Mindmap extends IMindmap {
     }
     return result;
   }
+
+  static buildEmpty = (mapId: string) => {
+    const result = new Mindmap(mapId);
+    const node = result.createNode(INodeModel.CENTRAL_TOPIC_TYPE, 0);
+    result.addBranch(node);
+    return result;
+  };
 }
 
-/**
- * @param mapId
- * @return an empty mindmap with central topic only
- */
-Mindmap.buildEmpty = (mapId) => {
-  const result = new Mindmap(mapId);
-  const node = result.createNode(INodeModel.CENTRAL_TOPIC_TYPE, 0);
-  result.addBranch(node);
-  return result;
-};
-
 export default Mindmap;

packages/mindplot/src/components/model/NodeModel.js

@@ -18,7 +18,7 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import cloneDeep from 'lodash/cloneDeep';
 import INodeModel from './INodeModel';
-import TopicFeature from '../TopicFeature';
+import FeatureModelFactory from './FeatureModelFactory';
 
 class NodeModel extends INodeModel {
   constructor(type, mindmap, id) {
@@ -40,7 +40,7 @@ class NodeModel extends INodeModel {
      * @return {mindplot.model.FeatureModel} the created feature model
      */
   createFeature(type, attributes) {
-    return TopicFeature.createModel(type, attributes);
+    return FeatureModelFactory.createModel(type, attributes);
   }
 
   /**

packages/mindplot/src/components/persistence/XMLSerializerBeta.js

@@ -20,7 +20,7 @@ import {
 import ModelCodeName from './ModelCodeName';
 import Mindmap from '../model/Mindmap';
 import INodeModel from '../model/INodeModel';
-import TopicFeature from '../TopicFeature';
+import FeatureModelFactory from '../model/FeatureModelFactory';
 
 class XMLSerializerBeta {
   toXML(mindmap) {
@@ -306,16 +306,16 @@ class XMLSerializerBeta {
   _deserializeIcon(domElem) {
     let icon = domElem.getAttribute('id');
     icon = icon.replace('images/', 'icons/legacy/');
-    return TopicFeature.createModel(TopicFeature.Icon.id, { id: icon });
+    return FeatureModelFactory.createModel(FeatureModelFactory.Icon.id, { id: icon });
   }
 
   _deserializeLink(domElem) {
-    return TopicFeature.createModel(TopicFeature.Link.id, { url: domElem.getAttribute('url') });
+    return FeatureModelFactory.createModel(FeatureModelFactory.Link.id, { url: domElem.getAttribute('url') });
   }
 
   _deserializeNote(domElem) {
     const text = domElem.getAttribute('text');
-    return TopicFeature.createModel(TopicFeature.Note.id, { text: text == null ? ' ' : text });
+    return FeatureModelFactory.createModel(FeatureModelFactory.Note.id, { text: text == null ? ' ' : text });
   }
 }
 

packages/mindplot/src/components/persistence/XMLSerializerPela.js

@@ -19,8 +19,8 @@ import { $assert, $defined, createDocument } from '@wisemapping/core-js';
 import { Point } from '@wisemapping/web2d';
 import Mindmap from '../model/Mindmap';
 import INodeModel, { TopicShape } from '../model/INodeModel';
-import TopicFeature from '../TopicFeature';
 import ConnectionLine from '../ConnectionLine';
+import FeatureModelFactory from '../model/FeatureModelFactory';
 
 class XMLSerializerPela {
   toXML(mindmap) {
@@ -371,7 +371,7 @@ class XMLSerializerPela {
         if (child.tagName === 'topic') {
           const childTopic = this._deserializeNode(child, mindmap);
           childTopic.connectTo(topic);
-        } else if (TopicFeature.isSupported(child.tagName)) {
+        } else if (FeatureModelFactory.isSupported(child.tagName)) {
           // Load attributes ...
           const namedNodeMap = child.attributes;
           const attributes = {};
@@ -388,7 +388,7 @@ class XMLSerializerPela {
 
           // Create a new element ....
           const featureType = child.tagName;
-          const feature = TopicFeature.createModel(featureType, attributes);
+          const feature = FeatureModelFactory.createModel(featureType, attributes);
           topic.addFeature(feature);
         } else if (child.tagName === 'text') {
           const nodeText = XMLSerializerPela._deserializeNodeText(child);

packages/mindplot/src/index.js

@@ -22,6 +22,7 @@ import Mindmap from './components/model/Mindmap';
 import PersistenceManager from './components/PersistenceManager';
 import Designer from './components/Designer';
 import LocalStorageManager from './components/LocalStorageManager';
+import TxtExporter from './components/export/TxtExporter';
 
 import Menu from './components/widget/Menu';
 
@@ -36,4 +37,5 @@ export {
   LocalStorageManager,
   Menu,
   DesignerBuilder,
-};
+  TxtExporter,
+};

packages/mindplot/test/unit/TxTExportTestSuite.test.ts

@@ -0,0 +1,9 @@
+import TxtExporter from '../../src/components/export/TxtExporter';
+import Mindmap from '../../src/components/model/Mindmap';
+
+test('adds 1 + 2 to equal 3', () => {
+  const m = new Mindmap("some map");
+ 
+  const exporter = new TxtExporter();
+  console.log(exporter.export(m));
+});

packages/mindplot/tsconfig.json

@@ -0,0 +1,13 @@
+  {
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "sourceMap": true,
+      "noImplicitAny": false,
+      "module": "es6",
+      "moduleResolution": "Node",
+      "target": "es6",
+      "allowJs": true,
+      "esModuleInterop": true
+    },
+    "exclude": ["node_modules"]
+  }

packages/mindplot/webpack.common.js

@@ -22,11 +22,17 @@ module.exports = {
   module: {
     rules: [
       {
-        use: ['babel-loader'],
         test: /.(js$)/,
+        use: ['babel-loader'],
         exclude: [
           /node_modules/,
         ],
+        enforce: 'pre',
+      },
+      {
+        test: /\.(ts)$/,
+        use: 'ts-loader',
+        exclude: '/node_modules/',
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
@@ -38,7 +44,7 @@ module.exports = {
     alias: {
       '@libraries': path.resolve(__dirname, '../../libraries/'),
     },
-    extensions: ['.js', '.json'],
+    extensions: ['.js', '.ts', '.json'],
   },
   plugins: [new CleanWebpackPlugin()],
 };

packages/mindplot/webpack.prod.js

@@ -8,7 +8,7 @@ const prodConfig = {
   },
   plugins: [
     new CompressionPlugin({
-      test: /\.js(\?.*)?$/i
+      test: /\.js(\?.*)?$/i,
     }),
   ],
 };