@datagrok/helm 2.1.15 → 2.1.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/helm",
   "friendlyName": "Helm",
-  "version": "2.1.15",
+  "version": "2.1.17",
   "author": {
     "name": "Oleksandra Serhiienko",
     "email": "oserhiienko@datagrok.ai"
@@ -15,8 +15,8 @@
     "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.33.2",
-    "@datagrok-libraries/utils": "^2.5.0",
+    "@datagrok-libraries/bio": "^5.38.0",
+    "@datagrok-libraries/utils": "^4.0.17",
     "cash-dom": "^8.1.1",
     "datagrok-api": "^1.10.2",
     "dayjs": "^1.10.6",

package/src/cell-renderer.ts

@@ -9,7 +9,6 @@ import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 import {findMonomers, parseHelm} from './utils';
 import {HelmMonomerPlacer} from './helm-monomer-placer';
-import {TAGS as helmTAGS} from './constants';
 
 const enum tempTAGS {
   helmSumMaxLengthWords = 'helm-sum-maxLengthWords',
@@ -45,7 +44,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       if (!tableCol) return;
 
       const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
-      const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex);
+      const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
 
       const maxIndex = Object.values(lengths).length - 1;
       const argsX = e.offsetX - gridCell.bounds.x;
@@ -61,11 +60,11 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
           if (argsX >= sumLengths[mid] && argsX <= sumLengths[mid + 1]) {
             left = mid;
             found = true;
-          } else if (argsX < sumLengths[mid]) {
+          } else if (argsX < sumLengths[mid])
             right = mid - 1;
-          } else if (argsX > sumLengths[mid + 1]) {
+          else if (argsX > sumLengths[mid + 1])
             left = mid + 1;
-          }
+
           if (left == right)
             found = true;
 
@@ -74,7 +73,9 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
       }
       left = (argsX >= sumLengths[left]) ? left : left - 1; // correct left to between sumLengths
 
-      const seq: string = gridCell.cell.value;
+      const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
+        .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
+        .replace('{*}', '{}');
       const monomerList = parseHelm(seq);
       const monomers = new Set<string>(monomerList);
       const missedMonomers = findMonomers(monomerList);
@@ -110,27 +111,31 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
   render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
     gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
   ) {
-    /* Can not do anything without tableColumn containing temp */
-    let tableCol: DG.Column | null = null;
-    try { tableCol = gridCell.tableColumn; } catch { }
-    if (!tableCol) return;
-
     g.save();
     try {
+      /* Can not do anything without tableColumn containing temp */
+      let tableCol: DG.Column | null = null;
+      try { tableCol = gridCell.tableColumn; } catch { }
+      if (!tableCol) return;
+
       const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
       const missedColor = 'red';
       const monomerColor: string = '#404040';
       const frameColor: string = '#C0C0C0';
 
-      const seq = gridCell.cell.value;
-      const monomerList: string[] = parseHelm(seq);
+      const seq: string = !gridCell.cell.value ? '' : gridCell.cell.value
+        .replaceAll(helmGapStartRe, '{').replaceAll(helmGapIntRe, '.').replaceAll(helmGapEndRe, '}')
+        .replace('{*}', '{}');
+      const monomerList = parseHelm(seq);
       const monomers: Set<string> = new Set<string>(monomerList);
       const missedMonomers: Set<string> = findMonomers(monomerList);
+      const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
 
       if (missedMonomers.size == 0) {
+        helmPlacer.skipCell(gridCell.tableRowIndex!);
         const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
         host.setAttribute('dataformat', 'helm');
-        host.setAttribute('data', gridCell.cell.value);
+        host.setAttribute('data', seq /* gaps skipped */);
         gridCell.element = host;
         //@ts-ignore
         const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
@@ -153,8 +158,7 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
         g.transform(1, 0, 0, 1, x, y);
         g.font = '12px monospace';
         g.textBaseline = 'top';
-        const helmPlacer = HelmMonomerPlacer.getOrCreate(tableCol);
-        const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRow.idx);
+        const [allParts, lengths, sumLengths] = helmPlacer.getCellAllPartsLengths(gridCell.tableRowIndex!);
 
         for (let i = 0; i < allParts.length; ++i) {
           const part: string = allParts[i];
@@ -167,11 +171,6 @@ export class HelmCellRenderer extends DG.GridCellRenderer {
           printLeftOrCentered(sumLengths[i], 0, w, h, g, allParts[i], color, 0, true, 1.0);
         }
       }
-    } catch (err: any) {
-      const errMsg = err instanceof Error ? err.message : err.toString();
-      const errStack = err instanceof Error ? err.stack : undefined;
-      tableCol.setTag(helmTAGS.cellRendererRenderError, JSON.stringify({message: errMsg, stack: errStack}));
-      throw err;
     } finally {
       g.restore();
     }

package/src/constants.ts

@@ -1,27 +1,27 @@
 export const jsonSdfMonomerLibDict = {
-    "monomerType": null,
-    "smiles": null,
-    "name": "MonomerName",
-    "author": null,
-    "molfile": "molecule",
-    "naturalAnalog": "MonomerNaturalAnalogCode",
-    "rgroups": "MonomerCaps",
-    "createDate": null,
-    "id": null,
-    "polymerType": "MonomerType",
-    "symbol": "MonomerCode"
-}
+  'monomerType': null,
+  'smiles': null,
+  'name': 'MonomerName',
+  'author': null,
+  'molfile': 'molecule',
+  'naturalAnalog': 'MonomerNaturalAnalogCode',
+  'rgroups': 'MonomerCaps',
+  'createDate': null,
+  'id': null,
+  'polymerType': 'MonomerType',
+  'symbol': 'MonomerCode'
+};
 
 export type WebEditorMonomer = {
-    id: string,     //symbol
-    n: string,      //name
-    na: string,     //natural analog
-    type: string,   //polymer type
-    mt: string,     //monomer type
-    m: string,      //molfile
-    at: {[group: string]: string},   //substituents
-    rs: number      //number of substituents
-  };
+  /** symbol */ id: string,
+  /** name */ n: string,
+  /** natural analog */ na?: string,
+  /** polymer type */type: string,
+  /** monomer type */ mt: string,
+  /** molfile */ m: string,
+  /** substituents */ at: { [group: string]: string },
+  /** number of substituents */ rs: number
+};
 
 export const SMILES = 'smiles';
 export const RGROUPS = 'rgroups';

package/src/helm-monomer-placer.ts

@@ -14,8 +14,8 @@ export const enum Temps {
 }
 
 export class HelmMonomerPlacer {
-  private _allPartsList: string[][] = null;
-  private _lengthsList: number[][] = null;
+  private _allPartsList: (string[] | null)[] | null = null;
+  private _lengthsList: (number[] | null) [] | null = null;
 
   private monomerLib: IMonomerLib;
 
@@ -25,15 +25,25 @@ export class HelmMonomerPlacer {
   constructor(public readonly col: DG.Column<string>) {
     this.col.dataFrame.onDataChanged.subscribe();
     this.monomerLib = getMonomerLib();
+    this.monomerLib.onChanged.subscribe(this.monomerLibOnChanged.bind(this));
+  }
+
+  public skipCell(rowIdx: number): void {
+    if (this._allPartsList === null)
+      this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
+    if (this._lengthsList === null)
+      this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
+
+    this._allPartsList[rowIdx] = [];
+    this._lengthsList[rowIdx] = [];
   }
 
   /** @param rowIdx Row index of the table {@link DG.DataFrame}, HelmMonomerPlacer is {@link DG.Column} based */
   public getCellAllPartsLengths(rowIdx: number): [string[], number[], number[]] {
     if (this._allPartsList === null)
-      this._allPartsList = new Array<string[]>(this.col.length).fill(null);
-
+      this._allPartsList = new Array<string[] | null>(this.col.length).fill(null);
     if (this._lengthsList === null)
-      this._lengthsList = new Array<number[]>(this.col.length).fill(null);
+      this._lengthsList = new Array<number[] | null>(this.col.length).fill(null);
 
     const [allParts, lengths] = this.getCellMonomerLengthsForSeq(rowIdx);
 
@@ -45,12 +55,17 @@ export class HelmMonomerPlacer {
   }
 
   private getCellMonomerLengthsForSeq(rowIdx: number): [string[], number[]] {
-    const allParts: string[] = this._allPartsList[rowIdx] = this.getAllParts(rowIdx);
-    const lengths: number[] = this._lengthsList[rowIdx] = new Array<number>(allParts.length);
-
-    for (const [part, partI] of wu.enumerate(allParts)) {
-      const partWidth: number = part.length * this.monomerCharWidth;
-      lengths[partI] = partWidth;
+    let allParts: string[] | null = this._allPartsList![rowIdx];
+    if (allParts === null)
+      allParts = this._allPartsList![rowIdx] = this.getAllParts(rowIdx);
+
+    let lengths: number[] | null = this._lengthsList![rowIdx];
+    if (lengths === null) {
+      lengths = this._lengthsList![rowIdx] = new Array<number>(allParts.length);
+      for (const [part, partI] of wu.enumerate(allParts)) {
+        const partWidth: number = part.length * this.monomerCharWidth;
+        lengths[partI] = partWidth;
+      }
     }
 
     return [allParts, lengths];
@@ -58,17 +73,25 @@ export class HelmMonomerPlacer {
 
   getAllParts(rowIdx: number): string[] {
     const seq: string | null = this.col.get(rowIdx);
-    const subParts: string[] = parseHelm(seq);
-    return seq ? getParts(subParts, seq) : [];
+    const monomerList: string[] = seq ? parseHelm(seq) : [];
+    return seq ? getParts(monomerList, seq) : [];
   }
 
   getMonomer(monomerSymbol: any): Monomer | null {
-    let res: Monomer = null;
+    let res: Monomer | null = null;
     for (const polymerType of this.monomerLib.getPolymerTypes()) {
       res = this.monomerLib.getMonomer(polymerType, monomerSymbol);
       if (res) break;
     }
-    return res ?? null;
+    return res;
+  }
+
+  // -- Handle events --
+
+  private monomerLibOnChanged(_value: any): void {
+    this._lengthsList = null;
+    this._allPartsList = null;
+    // TODO: Invalidate all grids of this.col.dataFrame
   }
 
   public static getOrCreate(col: DG.Column<string>): HelmMonomerPlacer {

package/src/helm-web-editor.ts

@@ -7,6 +7,7 @@ export class HelmWebEditor {
   editor: any;
   w = 200;
   h = 100;
+
   constructor() {
     this.host = ui.div([], {style: {width: `${this.w}px`, height: `${this.h}px`}});
     this.editor = new JSDraw2.Editor(this.host, {width: this.w, height: this.h, viewonly: true});
@@ -18,7 +19,9 @@ export class HelmWebEditor {
 
   createWebEditor(value: string) {
     const editorView = ui.div();
+    // @ts-ignore
     org.helm.webeditor.MolViewer.molscale = 0.8;
+    // @ts-ignore
     const webEditor = new scil.helm.App(editorView, {
       showabout: false,
       mexfontsize: '90%',

package/src/package.ts

@@ -7,14 +7,15 @@ import {WebEditorMonomer, RGROUP_CAP_GROUP_NAME, RGROUP_LABEL, SMILES} from './c
 import {HelmWebEditor} from './helm-web-editor';
 import {HelmCellRenderer} from './cell-renderer';
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
-import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
-import {findMonomers} from './utils';
+import {GapSymbols, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {findMonomers, parseHelm} from './utils';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
-export const _package = new DG.Package();
 let monomerLib: IMonomerLib | null = null;
 
+export const _package = new DG.Package();
+
 //tags: init
 export async function initHelm(): Promise<void> {
   return Promise.all([
@@ -24,17 +25,17 @@ export async function initHelm(): Promise<void> {
     }),
     grok.functions.call('Bio:getBioLib'),
   ])
-    .then(([_, lib]: [void, IMonomerLib]) => {
+    .then(([_, lib]: [unknown, IMonomerLib]) => {
       monomerLib = lib;
       rewriteLibraries(); // initHelm()
       monomerLib.onChanged.subscribe((_) => {
         try {
           rewriteLibraries(); // initHelm()
 
-          const monTypeList: string[] = monomerLib.getPolymerTypes();
+          const monTypeList: string[] = monomerLib!.getPolymerTypes();
           const msgStr: string = 'Monomer lib updated:<br />' + (
             monTypeList.length == 0 ? 'empty' : monTypeList.map((monType) => {
-              return `${monType} ${monomerLib.getMonomerSymbolsByType(monType).length}`;
+              return `${monType} ${monomerLib!.getMonomerSymbolsByType(monType).length}`;
             }).join('<br />'));
 
           grok.shell.info(msgStr);
@@ -55,16 +56,17 @@ export async function initHelm(): Promise<void> {
 }
 
 export function getMonomerLib(): IMonomerLib {
-  return monomerLib;
+  return monomerLib!;
 }
 
 function rewriteLibraries() {
+  // @ts-ignore
   org.helm.webeditor.Monomers.clear();
-  monomerLib.getPolymerTypes().forEach((polymerType) => {
-    const monomerSymbols = monomerLib.getMonomerSymbolsByType(polymerType);
+  monomerLib!.getPolymerTypes().forEach((polymerType) => {
+    const monomerSymbols = monomerLib!.getMonomerSymbolsByType(polymerType);
     monomerSymbols.forEach((monomerSymbol) => {
       let isBroken = false;
-      const monomer: Monomer = monomerLib.getMonomer(polymerType, monomerSymbol);
+      const monomer: Monomer = monomerLib!.getMonomer(polymerType, monomerSymbol)!;
       const webEditorMonomer: WebEditorMonomer = {
         id: monomerSymbol,
         m: monomer.molfile,
@@ -78,7 +80,7 @@ function rewriteLibraries() {
 
       if (monomer.rgroups.length > 0) {
         webEditorMonomer.rs = monomer.rgroups.length;
-        const at = {};
+        const at: { [prop: string]: any } = {};
         monomer.rgroups.forEach((it) => {
           at[it[RGROUP_LABEL]] = it[RGROUP_CAP_GROUP_NAME];
         });
@@ -86,12 +88,13 @@ function rewriteLibraries() {
       } else if (monomer[SMILES] != null) {
         webEditorMonomer.rs = Object.keys(getRS(monomer[SMILES].toString())).length;
         webEditorMonomer.at = getRS(monomer[SMILES].toString());
-      } else {
+      } else
         isBroken = true;
-      }
 
-      if (!isBroken)
+      if (!isBroken) {
+        // @ts-ignore
         org.helm.webeditor.Monomers.addOneMonomer(webEditorMonomer);
+      }
     });
   });
 
@@ -110,10 +113,16 @@ export function helmCellRenderer(): HelmCellRenderer {
 }
 
 function checkMonomersAndOpenWebEditor(cell?: DG.Cell, value?: string, units?: string) {
-  const cellValue = typeof units === 'undefined' ? cell.value : value;
-  const monomers = findMonomers(cellValue);
-  if (monomers.size == 0) { webEditor(cell, value, units); } else {
-    grok.shell.warning(`Monomers ${Array.from(monomers).join(', ')} are absent! <br/>` +
+  const cellValue: string = !!cell && units === undefined ? cell.value : value;
+  const monomerList: string[] = parseHelm(cellValue);
+  const monomers = findMonomers(monomerList);
+  if (monomers.size === 0)
+    webEditor(cell, value, units);
+  else if (monomers.size === 1 && monomers.has(GapSymbols[NOTATION.HELM]))
+    grok.shell.warning(`WebEditor doesn't support Helm with gaps '${GapSymbols[NOTATION.HELM]}'.`);
+  else {
+    grok.shell.warning(
+      `Monomers ${Array.from(monomers).map((m) => `'${m}'`).join(', ')} are absent! <br/>` +
       `Please, upload the monomer library! <br/>` +
       `<a href="https://datagrok.ai/help/domains/bio/macromolecules" target="_blank">Learn more</a>`);
   }
@@ -133,13 +142,14 @@ export function editMoleculeCell(cell: DG.GridCell): void {
 //input: string mol { semType: Macromolecule }
 export function openEditor(mol: string): void {
   const df = grok.shell.tv.grid.dataFrame;
-  const col = df.columns.bySemType('Macromolecule');
+  const col = df.columns.bySemType('Macromolecule')!;
+  const colUh = UnitsHandler.getOrCreate(col);
   const colUnits = col.getTag(DG.TAGS.UNITS);
   if (colUnits === NOTATION.HELM)
     checkMonomersAndOpenWebEditor(df.currentCell, undefined, undefined);
-  const converter = new NotationConverter(col);
-  const resStr = converter.convertStringToHelm(mol, '/');
-  checkMonomersAndOpenWebEditor(df.currentCell, resStr, col.getTag(DG.TAGS.UNITS));
+  const convert = colUh.getConverter(NOTATION.HELM);
+  const helmMol = convert(mol);
+  checkMonomersAndOpenWebEditor(df.currentCell, helmMol, col.getTag(DG.TAGS.UNITS));
 }
 
 //name: Properties
@@ -148,7 +158,7 @@ export function openEditor(mol: string): void {
 //output: widget result
 export async function propertiesPanel(helmString: string) {
   const grid = grok.shell.tv.grid;
-  const parent = grid.root.parentElement;
+  const parent = grid.root.parentElement!;
   const host = ui.div([]);
   parent.appendChild(host);
   const editor = new JSDraw2.Editor(host, {viewonly: true});
@@ -158,7 +168,7 @@ export async function propertiesPanel(helmString: string) {
   const formula = editor.getFormula(true);
   const molWeight = Math.round(editor.getMolWeight() * 100) / 100;
   const coef = Math.round(editor.getExtinctionCoefficient(true) * 100) / 100;
-  parent.lastChild.remove();
+  parent.lastChild!.remove();
   return new DG.Widget(
     ui.tableFromMap({
       'formula': formula.replace(/<sub>/g, '').replace(/<\/sub>/g, ''),
@@ -171,8 +181,11 @@ export async function propertiesPanel(helmString: string) {
 function webEditor(cell?: DG.Cell, value?: string, units?: string) {
   const view = ui.div();
   const df = grok.shell.tv.grid.dataFrame;
-  const converter = new NotationConverter(df.columns.bySemType('Macromolecule'));
+  const col = df.columns.bySemType('Macromolecule')!;
+  const uh = UnitsHandler.getOrCreate(col);
+  // @ts-ignore
   org.helm.webeditor.MolViewer.molscale = 0.8;
+  // @ts-ignore
   const app = new scil.helm.App(view, {
     showabout: false,
     mexfontsize: '90%',
@@ -196,7 +209,7 @@ function webEditor(cell?: DG.Cell, value?: string, units?: string) {
   app.structureview.resize(sizes.rightwidth, sizes.bottomheight + app.toolbarheight);
   app.mex.resize(sizes.topheight - 80);
   setTimeout(() => {
-    if (typeof units === 'undefined')
+    if (!!cell && units === undefined)
       app.canvas.helm.setSequence(cell.value, 'HELM');
     else
       app.canvas.helm.setSequence(value, 'HELM');
@@ -207,31 +220,35 @@ function webEditor(cell?: DG.Cell, value?: string, units?: string) {
     .onOK(() => {
       const helmValue = app.canvas.getHelm(true).replace(/<\/span>/g, '')
         .replace(/<span style='background:#bbf;'>/g, '');
-      if (typeof units === 'undefined') {
-        cell.value = helmValue;
-      } else {
-        const convertedRes = converter.convertHelmToFastaSeparator(helmValue, units);
-        cell.value = convertedRes;
+      if (!!cell) {
+        if (units === undefined)
+          cell.value = helmValue;
+        else {
+          const convertedRes = uh.convertHelmToFastaSeparator(helmValue, units!);
+          cell.value = convertedRes;
+        }
       }
     }).show({modal: true, fullScreen: true});
 }
 
 function getRS(smiles: string) {
   const newS = smiles.match(/(?<=\[)[^\][]*(?=])/gm);
-  const res = {};
+  const res: { [name: string]: string } = {};
   let el = '';
   let digit;
-  for (let i = 0; i < newS.length; i++) {
-    if (newS[i] != null) {
-      if (/\d/.test(newS[i])) {
-        digit = newS[i][newS[i].length - 1];
-        newS[i] = newS[i].replace(/[0-9]/g, '');
-        for (let j = 0; j < newS[i].length; j++) {
-          if (newS[i][j] != ':')
-            el += newS[i][j];
+  if (!!newS) {
+    for (let i = 0; i < newS.length; i++) {
+      if (newS[i] != null) {
+        if (/\d/.test(newS[i])) {
+          digit = newS[i][newS[i].length - 1];
+          newS[i] = newS[i].replace(/[0-9]/g, '');
+          for (let j = 0; j < newS[i].length; j++) {
+            if (newS[i][j] != ':')
+              el += newS[i][j];
+          }
+          res['R' + digit] = el;
+          el = '';
         }
-        res['R' + digit] = el;
-        el = '';
       }
     }
   }
@@ -243,7 +260,7 @@ function getRS(smiles: string) {
 //output: column res
 export function getMolfiles(col: DG.Column): DG.Column {
   const grid = grok.shell.tv.grid;
-  const parent = grid.root.parentElement;
+  const parent = grid.root.parentElement!;
   const res = DG.Column.string('mols', col.length);
   const host = ui.div([]);
   parent.appendChild(host);
@@ -255,7 +272,7 @@ export function getMolfiles(col: DG.Column): DG.Column {
     const mol = editor.getMolfile();
     return mol;
   });
-  parent.lastChild.remove();
+  parent.lastChild!.remove();
   return res;
 }
 

package/src/utils.ts

@@ -24,7 +24,7 @@ export function getParts(subParts: string[], s: string): string[] {
   return allParts;
 }
 
-export function parseHelm(s: string) {
+export function parseHelm(s: string): string[] {
   const sections = split(s, '$');
   s = sections[0];
   const monomers = [];
@@ -181,8 +181,8 @@ function _detachAppendix(s: string, c: string) {
     }
   }
   if (tag != null)
-    tag = tag.replace(new RegExp('\\' + c, 'g'), c);
-  return {tag: unescape(tag), str: s};
+    tag = unescape(tag.replace(new RegExp('\\' + c, 'g'), c));
+  return {tag: tag, str: s};
 }
 
 function unescape(s: string) {

package/tsconfig.json

@@ -25,7 +25,7 @@
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": false,                                 /* Enable all strict type-checking options. */
+    "strict": true,                                 /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                    /* Enable strict null checks. */
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */

package/webpack.config.js

@@ -13,11 +13,11 @@ module.exports = {
   },
   resolve: {
     fallback: {'url': false},
-    extensions: ['.wasm', '.mjs', '.ts', '.js', '.json', '.tsx'],
+    extensions: ['.ts', '.tsx', '.js', '.wasm', '.mjs', '.json'],
   },
   module: {
     rules: [
-      {test: /\.js$/, enforce: 'pre', use: ['source-map-loader']},
+      {test: /\.js$/, enforce: 'pre', use: ['source-map-loader'], exclude: /node_modules/},
       {test: /\.ts(x?)$/, use: 'ts-loader', exclude: /node_modules/},
       {test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/},
     ],