@datagrok/peptides 0.7.1 → 0.8.7

package/src/utils/split-aligned.ts

@@ -37,12 +37,12 @@ export function splitAlignedPeptides(peptideColumn: DG.Column, filter: boolean =
     currentSplitPeptide = splitPeptidesArray[i];
     nTerminal = currentSplitPeptide.pop()!; // it is guaranteed that there will be at least one element
     currentLength = currentSplitPeptide.length;
-    if (currentLength !== modeMonomerCount) {
+    if (currentLength !== modeMonomerCount)
       invalidIndexes.push(i);
-    }
-    for (let j = 0; j < modeMonomerCount; j++) {
+
+    for (let j = 0; j < modeMonomerCount; j++)
       splitColumns[j].push(j < currentLength ? currentSplitPeptide[j] : '-');
-    }
+
     splitColumns[modeMonomerCount].push(nTerminal);
   }
   modeMonomerCount--; // minus C-terminal
@@ -56,9 +56,9 @@ export function splitAlignedPeptides(peptideColumn: DG.Column, filter: boolean =
   if (filter) {
     splitColumns = splitColumns.filter((positionArray, index) => {
       const isRetained = new Set(positionArray).size > 1;
-      if (!isRetained) {
+      if (!isRetained)
         columnNames.splice(index, 1);
-      }
+
       return isRetained;
     });
   }

package/src/viewers/logo-viewer.ts

@@ -93,9 +93,9 @@ export class Logo extends DG.JsViewer {
    */
   onTableAttached() {
     if (typeof this.dataFrame !== 'undefined') {
-      if (!this.initialized) {
+      if (!this.initialized)
         this.init();
-      }
+
 
       this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50).subscribe((_: any) => this.render()));
       this.subs.push(DG.debounce(this.dataFrame.filter.onChanged, 50).subscribe((_: any) => this.render()));
@@ -141,14 +141,13 @@ export class Logo extends DG.JsViewer {
         .whereRowMask(this.dataFrame!.selection)
         .aggregate();
     }
-    if (selected) {
+    if (selected)
       [this.splitted] = splitAlignedPeptides(this.target!.columns.bySemType(this.colSemType));
-    } else [this.splitted] = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
+    else [this.splitted] = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
     $(this.root).empty();
 
-    if (typeof this.dataFrame !== 'undefined') {
+    if (typeof this.dataFrame !== 'undefined')
       this.findLogo();
-    }
   }
 
   /**
@@ -176,17 +175,16 @@ export class Logo extends DG.JsViewer {
       for (let i = 0; i < col.length; i++) {
         const c = col.get(i);
         if (c != '-') {
-          if (c[1] == '(') {
+          if (c[1] == '(')
             this.ppm[index][this.PROT_NUMS[c.substr(0, 1).toUpperCase()]] += 1 / size;
-          } else if (c.substr(0, 3) in ChemPalette.AAFullNames && (c.length == 3 || c.at(3) == '(')) {
+          else if (c.substr(0, 3) in ChemPalette.AAFullNames && (c.length == 3 || c.at(3) == '('))
             this.ppm[index][this.PROT_NUMS[ChemPalette.AAFullNames[c.substr(0, 3)]]] += 1 / size;
-          } else if (c.at(0)?.toLowerCase() == c.at(0) && c.substr(1, 3) in ChemPalette.AAFullNames &&
+          else if (c.at(0)?.toLowerCase() == c.at(0) && c.substr(1, 3) in ChemPalette.AAFullNames &&
             (c.length == 4 || c.at(4) == '(')
-          ) {
+          )
             this.ppm[index][this.PROT_NUMS[ChemPalette.AAFullNames[c.substr(1, 3)]]] += 1 / size;
-          } else {
+          else
             this.ppm[index][this.PROT_NUMS[c]] += 1 / size;
-          }
         }
       }
       index++;

package/src/viewers/sar-viewer.ts

@@ -3,6 +3,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
+import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
 
 import {model} from '../model';
 
@@ -28,7 +29,7 @@ export class SARViewer extends DG.JsViewer {
   protected viewerVGrid: DG.Grid | null;
   protected currentBitset: DG.BitSet | null;
   grouping: boolean;
-  groupMapping: {[key: string]: string} | null;
+  groupMapping: StringDictionary | null;
   // protected pValueThreshold: number;
   // protected amountOfBestAARs: number;
   // duplicatesHandingMethod: string;
@@ -139,9 +140,9 @@ export class SARViewer extends DG.JsViewer {
    * @memberof SARViewer
    */
   async render(computeData = true) {
-    if (!this.initialized) {
+    if (!this.initialized)
       return;
-    }
+
     //TODO: optimize. Don't calculate everything again if only view changes
     if (computeData) {
       if (typeof this.dataFrame !== 'undefined' && this.activityColumnName && this.sourceGrid) {
@@ -233,9 +234,9 @@ function syncGridsFunc(
   if (viewerGrid && viewerGrid.dataFrame && viewerVGrid && viewerVGrid.dataFrame) {
     if (sourceVertical) {
       const dfCell = viewerVGrid.dataFrame.currentCell;
-      if (dfCell.column === null || dfCell.column.name !== 'Mean difference') {
+      if (dfCell.column === null || dfCell.column.name !== 'Mean difference')
         return;
-      }
+
       const otherColName: string = viewerVGrid.dataFrame.get('Position', dfCell.rowIndex);
       const otherRowName: string = viewerVGrid.dataFrame.get(aminoAcidResidue, dfCell.rowIndex);
       let otherRowIndex = -1;
@@ -245,14 +246,13 @@ function syncGridsFunc(
           break;
         }
       }
-      if (otherRowIndex !== -1) {
+      if (otherRowIndex !== -1)
         viewerGrid.dataFrame.currentCell = viewerGrid.dataFrame.cell(otherRowIndex, otherColName);
-      }
     } else {
       const otherPos: string = viewerGrid.dataFrame.currentCol?.name;
-      if (typeof otherPos === 'undefined' && otherPos !== aminoAcidResidue) {
+      if (typeof otherPos === 'undefined' && otherPos !== aminoAcidResidue)
         return;
-      }
+
       const otherAAR: string =
         viewerGrid.dataFrame.get(aminoAcidResidue, viewerGrid.dataFrame.currentRowIdx);
       let otherRowIndex = -1;
@@ -265,9 +265,8 @@ function syncGridsFunc(
           break;
         }
       }
-      if (otherRowIndex !== -1) {
+      if (otherRowIndex !== -1)
         viewerVGrid.dataFrame.currentCell = viewerVGrid.dataFrame.cell(otherRowIndex, 'Mean difference');
-      }
     }
   }
 }
@@ -291,7 +290,7 @@ function applyBitset(
   dataFrame: DG.DataFrame,
   viewerGrid: DG.Grid,
   aminoAcidResidue: string,
-  groupMapping: {[key: string]: string},
+  groupMapping: StringDictionary,
   initialBitset: DG.BitSet,
   filterMode: boolean,
 ) {
@@ -310,9 +309,9 @@ function applyBitset(
     const aarLabel = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
 
     let splitCol = dataFrame.col(splitColName);
-    if (!splitCol) {
+    if (!splitCol)
       splitCol = dataFrame.columns.addNew(splitColName, 'string');
-    }
+
 
     const isChosen = (i: number) => groupMapping[dataFrame!.get(currentPosition, i)] === currentAAR;
     splitCol!.init((i) => isChosen(i) ? aarLabel : otherLabel);
@@ -363,9 +362,9 @@ function accordionFunc(
       const elements: (HTMLLabelElement | HTMLElement)[] = [currentLabel, otherLabel];
 
       const distPane = accordion.getPane('Distribution');
-      if (distPane) {
+      if (distPane)
         accordion.removePane(distPane);
-      }
+
       accordion.addPane('Distribution', () => {
         const hist = originalDf.clone(initialBitset).plot.histogram({
         // const hist = originalDf.plot.histogram({
@@ -380,7 +379,7 @@ function accordionFunc(
         hist.style.width = 'auto';
         elements.push(hist);
 
-        const tableMap: {[key: string]: string} = {'Statistics:': ''};
+        const tableMap: StringDictionary = {'Statistics:': ''};
         for (const colName of new Set(['Count', 'pValue', 'Mean difference'])) {
           const query = `${aminoAcidResidue} = ${currentAAR} and Position = ${currentPosition}`;
           const textNum = statsDf.groupBy([colName]).where(query).aggregate().get(colName, 0);

package/src/viewers/stacked-barchart-viewer.ts

@@ -13,9 +13,8 @@ export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
     rxjs.fromEvent(grid.overlay, 'mousemove').subscribe((mm:any) => {
       mm = mm as MouseEvent;
       const cell = grid.hitTest(mm.offsetX, mm.offsetY);
-      if (cell !== null && cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids') {
+      if (cell !== null && cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids')
         barchart.highlight(cell, mm.offsetX, mm.offsetY);
-      }
     });
 
     rxjs.fromEvent(grid.overlay, 'click').subscribe((mm:any) => {
@@ -118,9 +117,8 @@ export class StackedBarChart extends DG.JsViewer {
       let i = 0;
       for (const value of Object.values(groups)) {
         i++;
-        for (const obj of value) {
+        for (const obj of value)
           this.ord[obj] = i;
-        }
       }
       this.yScale = scaleLinear();
       this.xScale = scaleBand();
@@ -169,9 +167,9 @@ export class StackedBarChart extends DG.JsViewer {
       const buf2 = df.filter.getBuffer();
       const resbuf = new Int32Array(df.rowCount);
 
-      for (let i = 0; i < buf2.length; i++) {
+      for (let i = 0; i < buf2.length; i++)
         resbuf[i] = buf1[i] & buf2[i];
-      }
+
 
       //TODO: optimize it, why store so many tables?
       const mask = DG.BitSet.fromBytes(resbuf.buffer, df.rowCount);
@@ -187,9 +185,8 @@ export class StackedBarChart extends DG.JsViewer {
           const buf2 = df.filter.getBuffer();
           const resbuf = new Int32Array(df.rowCount);
 
-          for (let i = 0; i < buf2.length; i++) {
+          for (let i = 0; i < buf2.length; i++)
             resbuf[i] = buf1[i] & buf2[i];
-          }
 
 
           // @ts-ignore
@@ -225,9 +222,9 @@ export class StackedBarChart extends DG.JsViewer {
         for (let i = 0; i < df.rowCount; i++) {
           const amino = df.getCol(name).get(i);
           const aminoCount = df.getCol(`${name}_count`).get(i);
-          if ((!amino) || amino === this.dataEmptyAA) {
+          if ((!amino) || amino === this.dataEmptyAA)
             continue;
-          }
+
           const aminoObj = {'name': amino, 'count': aminoCount, 'selectedCount': 0};
           colObj['data'].push(aminoObj);
           for (let j = 0; j < this.aggregatedTablesUnselected[name].rowCount; j++) {
@@ -241,12 +238,12 @@ export class StackedBarChart extends DG.JsViewer {
           }
         }
         colObj['data'] = colObj['data'].sort((o1, o2) => {
-          if (this.ord[o1['name']] > this.ord[o2['name']]) {
+          if (this.ord[o1['name']] > this.ord[o2['name']])
             return -1;
-          }
-          if (this.ord[o1['name']] < this.ord[o2['name']]) {
+
+          if (this.ord[o1['name']] < this.ord[o2['name']])
             return 1;
-          }
+
 
           return 0;
         });
@@ -329,13 +326,12 @@ export class StackedBarChart extends DG.JsViewer {
 
     render(computeData = true) {
       const df = this.dataFrame!;
-      if (computeData) {
+      if (computeData)
         this.computeData(df);
-      }
+
       if (this.tableCanvas) {
-        for (const name of this.aminoColumnNames) {
+        for (const name of this.aminoColumnNames)
           this.renderBar(name);
-        }
       }
       return;
     }
@@ -350,16 +346,15 @@ export class StackedBarChart extends DG.JsViewer {
     }
 
     unregister(name: string) {
-      if (this.registered[name]) {
+      if (this.registered[name])
         delete this.registered[name];
-      }
     }
 
 
     renderBar(name: string) {
-      if (!(this.registered[name]) || !(this.tableCanvas)) {
+      if (!(this.registered[name]) || !(this.tableCanvas))
         return;
-      }
+
       const cell = this.registered[name];
       const rect = cell.bounds;
       this.renderBarToCanvas(this.tableCanvas.getContext('2d')!, cell, rect.x, rect.y, rect.width, rect.height);
@@ -367,9 +362,9 @@ export class StackedBarChart extends DG.JsViewer {
 
     highlight(cell: DG.GridCell, offsetX:number, offsetY:number) {
       const colName = cell.tableColumn?.name;
-      if (!colName) {
+      if (!colName)
         return;
-      }
+
       const margin = 0.2;
       const bound = cell.bounds;
       const x = bound.x + bound.width * margin;
@@ -403,9 +398,9 @@ export class StackedBarChart extends DG.JsViewer {
     }
 
     beginSelection(event:any) {
-      if (!this.highlighted || !this.dataFrame) {
+      if (!this.highlighted || !this.dataFrame)
         return;
-      }
+
       this.dataFrame!.selection.handleClick((i) => {
         // @ts-ignore
         return this.highlighted!['aaName'] === (this.dataFrame.getCol(this.highlighted!['colName']).get(i));

package/src/viewers/subst-viewer.ts

@@ -1,4 +1,4 @@
-// import * as grok from 'datagrok-api/grok';
+import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
@@ -6,6 +6,7 @@ import $ from 'cash-dom';
 
 // import {aarGroups} from '../describe';
 import {setAARRenderer} from '../utils/cell-renderer';
+import { SemanticValue } from 'datagrok-api/dg';
 
 export class SubstViewer extends DG.JsViewer {
   viewerGrid: DG.Grid | null;
@@ -35,7 +36,7 @@ export class SubstViewer extends DG.JsViewer {
     const df: DG.DataFrame = this.dataFrame!;
     const col: DG.Column = df.columns.bySemType('alignedSequence');
     // let values: number[] = df.columns.byName('IC50').toList();
-    const values = df.getCol(this.activityColumnName).toList().map((x) => -Math.log10(x));
+    const values = df.getCol(this.activityColumnName).toList();
     // values = values;
     const splitedMatrix = this.split(col);
 
@@ -123,6 +124,7 @@ export class SubstViewer extends DG.JsViewer {
     const tableValuesKeys = Object.keys(tableValues);
     const dfLength = tableValuesKeys.length;
     const cols = [...nColsArray.keys()].map((v) => DG.Column.int(v.toString(), dfLength));
+    cols.forEach((col: DG.Column) => col.semType = 'Substitution');
     const aarCol = DG.Column.string(aarColName, dfLength);
     cols.splice(0, 1, aarCol);
     const table = DG.DataFrame.fromColumns(cols);
@@ -160,9 +162,9 @@ export class SubstViewer extends DG.JsViewer {
       },
     );
 
-    for (const col of table.columns.names()) {
+    for (const col of table.columns.names())
       this.viewerGrid.col(col)!.width = this.viewerGrid.props.rowHeight;
-    }
+
 
     this.viewerGrid.onCellRender.subscribe((args) => {
       if (args.cell.isRowHeader && args.cell.gridColumn.visible) {
@@ -200,9 +202,12 @@ export class SubstViewer extends DG.JsViewer {
 
         this.casesGrid = tempDf.plot.grid();
         this.casesGrid.props.allowEdit = false;
+        grok.shell.o = SemanticValue.fromValueType(tempDf, 'Substitution');
       } else {
+        grok.shell.o = SemanticValue.fromValueType(null, 'Substitution');
         this.casesGrid = null;
       }
+
       this.render();
     });
 
@@ -211,9 +216,7 @@ export class SubstViewer extends DG.JsViewer {
 
   render() {
     $(this.root).empty();
-    this.root.appendChild(this.casesGrid === null ?
-      this.viewerGrid!.root : ui.splitH([this.viewerGrid!.root, this.casesGrid.root]),
-    );
+    this.root.appendChild(this.viewerGrid!.root);
   }
 
   split(peptideColumn: DG.Column, filter: boolean = true): string[][] {
@@ -245,12 +248,12 @@ export class SubstViewer extends DG.JsViewer {
       currentSplitPeptide = splitPeptidesArray[i];
       nTerminal = currentSplitPeptide.pop()!; // it is guaranteed that there will be at least one element
       currentLength = currentSplitPeptide.length;
-      if (currentLength !== modeMonomerCount) {
+      if (currentLength !== modeMonomerCount)
         invalidIndexes.push(i);
-      }
-      for (let j = 0; j < modeMonomerCount; j++) {
+
+      for (let j = 0; j < modeMonomerCount; j++)
         splitColumns[j].push(j < currentLength ? currentSplitPeptide[j] : '-');
-      }
+
       splitColumns[modeMonomerCount].push(nTerminal);
     }
     modeMonomerCount--; // minus C-terminal
@@ -264,9 +267,9 @@ export class SubstViewer extends DG.JsViewer {
     if (filter) {
       splitColumns = splitColumns.filter((positionArray, index) => {
         const isRetained = new Set(positionArray).size > 1;
-        if (!isRetained) {
+        if (!isRetained)
           columnNames.splice(index, 1);
-        }
+
         return isRetained;
       });
     }

package/src/widgets/analyze-peptides.ts

@@ -3,6 +3,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {Peptides} from '../peptides';
 import '../styles.css';
+import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
 
 /**
  * Peptide analysis widget.
@@ -18,9 +19,9 @@ export async function analyzePeptidesWidget(
   col: DG.Column, view: DG.TableView, tableGrid: DG.Grid, currentDf: DG.DataFrame,
 ): Promise<DG.Widget> {
   let tempCol = null;
-  for (const column of currentDf.columns.numerical) {
+  for (const column of currentDf.columns.numerical)
     tempCol = column.type === DG.TYPE.FLOAT ? column : null;
-  }
+
   const defaultColumn: DG.Column = currentDf.col('activity') || currentDf.col('IC50') || tempCol;
   const histogramHost = ui.div([], {id: 'pep-hist-host'});
 
@@ -77,18 +78,17 @@ export async function analyzePeptidesWidget(
   const startBtn = ui.button('Launch SAR', async () => {
     if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
       const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
-      const options: {[key: string]: string} = {
+      const options: StringDictionary = {
         'activityColumnName': activityColumnChoice.value.name,
         'scaling': activityScalingMethod.value,
       };
 
       const peptides = new Peptides();
-      await peptides.init(tableGrid, view, currentDf, options, col, activityColumnChoice.value.name);
+      await peptides.init(tableGrid, view, currentDf, options, col);
 
       progress.close();
-    } else {
+    } else
       grok.shell.error('The activity column must be of floating point number type!');
-    }
   });
   startBtn.style.alignSelf = 'center';
 

package/src/widgets/manual-alignment.ts

@@ -1,4 +1,5 @@
 import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
@@ -24,12 +25,13 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
 
     alignedSequenceCol.set(affectedRowIndex, newSequence);
     for (const part of splitSequence.columns) {
-      if (currentDf.col(part.name) !== null) {
+      if (currentDf.col(part.name) !== null)
         currentDf.set(part.name, affectedRowIndex, part.get(0));
-      }
     }
+    const temp = grok.shell.o;
+    grok.shell.o = null;
+    grok.shell.o = temp;
 
-    // await model.updateDefault();
     await Peptides.recalculate();
   });
 

package/src/widgets/peptide-molecule.ts

@@ -13,19 +13,11 @@ import {ChemPalette} from '../utils/chem-palette';
 export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
   const pi = DG.TaskBarProgressIndicator.create('Creating NGL view');
 
-  const split = pep.split('-');
-  const mols = [];
-  for (let i = 1; i < split.length - 1; i++) {
-    if (split[i] in ChemPalette.AASmiles) {
-      const aar = ChemPalette.AASmiles[split[i]];
-      mols[i] = aar.substr(0, aar.length - 1);
-    } else if (!split[i] || split[i] == '-') {
-      mols[i] = '';
-    } else {
-      return new DG.Widget(ui.divH([]));
-    }
-  }
-  const smiles = mols.join('') + 'O';
+  const smiles = getMolecule(pep);
+  if (smiles == '')
+    return new DG.Widget(ui.divH([]));
+
+
   let molfileStr = (await grok.functions.call('Peptides:SmiTo3D', {smiles}));
 
   molfileStr = molfileStr.replaceAll('\\n', '\n'); ;
@@ -47,3 +39,19 @@ export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
 
   return new DG.Widget(ui.div([panel, nglHost]));
 }
+
+export function getMolecule(pep: string): string {
+  const split = pep.split('-');
+  const mols = [];
+  for (let i = 1; i < split.length - 1; i++) {
+    if (split[i] in ChemPalette.AASmiles) {
+      const aar = ChemPalette.AASmiles[split[i]];
+      mols[i] = aar.substr(0, aar.length - 1);
+    } else if (!split[i] || split[i] == '-')
+      mols[i] = '';
+    else
+      return '';
+  }
+  const smiles = mols.join('') + 'O';
+  return smiles;
+}

package/src/workers/dimensionality-reducer.ts

@@ -1,4 +1,5 @@
 import {DimensionalityReducer, KnownMethods} from '@datagrok-libraries/ml/src/reduce-dimensionality';
+import { KnownMetrics } from '@datagrok-libraries/ml/src/typed-metrics';
 import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
 
 /**
@@ -10,7 +11,7 @@ import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
  * @param {number} cyclesCount Number of cycles to repeat.
  * @return {Coordinates} Embedding.
  */
-function onMessage(columnData: [], method: KnownMethods, measure: string, cyclesCount: number): Coordinates {
+function onMessage(columnData: any[], method: KnownMethods, measure: KnownMetrics, cyclesCount: number): Coordinates {
   const reducer = new DimensionalityReducer(
     columnData,
     method,

package/tsconfig.json

@@ -6,7 +6,7 @@
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es2018",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "lib": ["es2020", "dom"],      /* Specify library files to be included in the compilation. */
+    "lib": ["es2020", "dom", "ES2021.String"],      /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */

package/webpack.config.js

@@ -1,10 +1,20 @@
 const path = require('path');
+const packageName = path.parse(require('./package.json').name).name.toLowerCase().replace(/-/g, '');
 
 module.exports = {
   mode: 'development',
   entry: {
-    package: './src/package.ts',
+    package: ['./src/package.ts'],
+    test: {
+      filename: 'package-test.js',
+      library: {type: 'var', name: `${packageName}_test`},
+      import: './src/package-test.ts',
+    },
   },
+  devServer: {
+    contentBase: './dist',
+  },
+  target: 'web',
   module: {
     rules: [
       {
@@ -19,7 +29,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['.mjs', '.js', '.json', '.ts', '.tsx'],
   },
   devtool: 'inline-source-map',
   externals: {
@@ -36,4 +46,8 @@ module.exports = {
     libraryTarget: 'var',
     path: path.resolve(__dirname, 'dist'),
   },
+  experiments: {
+    asyncWebAssembly: true,
+    topLevelAwait: true,
+  },
 };