feat!: migrate UI.form/UI.renderTwig to Twig module and convert AMD files to ESM

Requires visualizer >= 4.2.0: Twig.form and Twig.renderTwig have moved
from src/util/ui to src/util/twig.

Also fixes a long-standing bug in ExtSample.js where newData was used but
never declared, causing extra converted spectra to be silently dropped.

BREAKING CHANGE: visualizer >= 4.2.0 is now required. Views using
UI.form or UI.renderTwig must update to import from src/util/twig.

Author: lpatiny

eln/ExtSample.js

@@ -192,6 +192,7 @@ class Sample {
     // we store the data in the view
     let droppedDatas = API.getData(name);
     droppedDatas = droppedDatas.file || droppedDatas.str;
+    const newData = [];
     for (let droppedData of droppedDatas) {
       if (!droppedData.filename.includes('.')) droppedData.filename += '.txt';
 
@@ -235,6 +236,17 @@ class Sample {
         { keepContent: true },
       );
     }
+    for (let extra of newData) {
+      elnPlugin.process(
+        types[name],
+        this.sample.$content,
+        extra,
+        {},
+        {
+          keepContent: true,
+        },
+      );
+    }
     this.sample.triggerChange();
   }
 

eln/Sample.js

@@ -1,5 +1,6 @@
 import Datas from 'src/main/datas';
 import API from 'src/util/api';
+import Twig from 'src/util/twig';
 import UI from 'src/util/ui';
 
 import Roc from '../rest-on-couch/Roc';
@@ -577,7 +578,7 @@ Your local changes will be lost.</p>`;
               '',
             )}.jdx`;
             // we will ask for meta information
-            let meta = await UI.form(
+            let meta = await Twig.form(
               `
               <style>
                   #jcamp {

eln/__tests__/sampleMigrations.test.js

@@ -3,7 +3,9 @@ const { migrateIupac } = require('../sampleMigrations');
 const sample = require('./data/sample.json');
 
 test('kind: true is migrated to iupac', () => {
-  const s = { $content: { general: { name: [{ value: 'ethylbenzene', kind: true }] } } };
+  const s = {
+    $content: { general: { name: [{ value: 'ethylbenzene', kind: true }] } },
+  };
   migrateIupac(s);
   expect(s.$content.general.name[0].kind).toBe('iupac');
 });
@@ -15,15 +17,24 @@ test('kind: false is migrated to trivial', () => {
 });
 
 test('kind: undefined is migrated to iupac', () => {
-  const s = { $content: { general: { name: [{ value: 'ethylbenzene', kind: undefined }] } } };
+  const s = {
+    $content: {
+      general: { name: [{ value: 'ethylbenzene', kind: undefined }] },
+    },
+  };
   migrateIupac(s);
   expect(s.$content.general.name[0].kind).toBe('iupac');
 });
 
 test('already-migrated string kind is left unchanged', () => {
   const s = {
     $content: {
-      general: { name: [{ value: 'ethylbenzene', kind: 'iupac' }, { value: 'EB', kind: 'trivial' }] },
+      general: {
+        name: [
+          { value: 'ethylbenzene', kind: 'iupac' },
+          { value: 'EB', kind: 'trivial' },
+        ],
+      },
     },
   };
   migrateIupac(s);

eln/pubchem/ghs.js

@@ -1,44 +1,56 @@
 import OCL from 'openchemlib';
+import API from 'src/util/api';
+import Twig from 'src/util/twig';
+import UI from 'src/util/ui';
 
-// returns GHS information based on pubchem and a smiles
+/**
+ * @typedef {object} GhsOptions
+ * @property {boolean} [detailed=false] - Show full GHS data instead of summary
+ */
 
-define(['src/util/ui', 'src/util/api'], (UI, API) => {
-  async function fromIDCode(oclCode, options) {
-    const molecule = OCL.Molecule.fromIDCode(oclCode);
-    const smiles = molecule.toSmiles();
-    return fromSMILES(smiles, options);
-  }
+/**
+ * @param {string} oclCode
+ * @param {GhsOptions} [options]
+ */
+async function fromIDCode(oclCode, options) {
+  const molecule = OCL.Molecule.fromIDCode(oclCode);
+  const smiles = molecule.toSmiles();
+  return fromSMILES(smiles, options);
+}
 
-  async function fromSMILES(smiles, options = {}) {
-    const { detailed = false } = options;
+/**
+ * @param {string} smiles
+ * @param {GhsOptions} [options]
+ */
+async function fromSMILES(smiles, options = {}) {
+  const { detailed = false } = options;
 
-    const { Compound } = await API.require(
-      'https://www.lactame.com/lib/pubchem/0.2.0/pubchem.js',
-    );
-    const compound = await Compound.fromSmiles(String(smiles));
-    const compoundData = await compound.getData();
+  const { Compound } = await API.require(
+    'https://www.lactame.com/lib/pubchem/0.2.0/pubchem.js',
+  );
+  const compound = await Compound.fromSmiles(String(smiles));
+  const compoundData = await compound.getData();
 
-    const ghs = compoundData.ghs;
-    const ghsFull = compoundData.getGHS();
+  const ghs = compoundData.ghs;
+  const ghsFull = compoundData.getGHS();
 
-    const html = detailed
-      ? await UI.renderTwig(ghsFullTemplate, { ghsFull })
-      : await UI.renderTwig(ghsTemplate, { ghs });
+  const html = detailed
+    ? await Twig.renderTwig(ghsFullTemplate, { ghsFull })
+    : await Twig.renderTwig(ghsTemplate, { ghs });
 
-    UI.dialog(html, {
-      width: 1000,
-      height: 800,
-      title: 'GHS information',
-    });
-  }
+  UI.dialog(html, {
+    width: 1000,
+    height: 800,
+    title: 'GHS information',
+  });
+}
 
-  return { fromIDCode, fromSMILES };
-});
+export default { fromIDCode, fromSMILES };
 
 const ghsTemplate = `
 <style>
     #ghsSmmary {
-        
+
     }
     #ghsSummary table {
         border-collapse: collapse;
@@ -110,7 +122,7 @@ const ghsTemplate = `
 const ghsFullTemplate = `
 <style>
     #ghsFull {
-        
+
     }
     #ghsFull table {
         border-collapse: collapse;

eln/request/processAction.js

@@ -1,4 +1,5 @@
 import API from 'src/util/api';
+import Twig from 'src/util/twig';
 import UI from 'src/util/ui';
 
 import Status from './Status';
@@ -133,7 +134,7 @@ async function askNewStatus(request) {
     currentStatus++;
   }
 
-  let newStatusObject = await UI.form(
+  let newStatusObject = await Twig.form(
     `   <style>
             #status {
                 zoom: 1.5;

eln/stock/printer/printProcessors.js

@@ -1,11 +1,11 @@
 define([
   'src/main/datas',
-  'src/util/ui',
+  'src/util/twig',
   'browserified/twig/twig',
   'canvg',
   '../../libs/Image',
   'openchemlib',
-], (Datas, UI, twig, canvg, IJS, OCL) => {
+], (Datas, Twig, twig, canvg, IJS, OCL) => {
   IJS = IJS.default;
   const DataObject = Datas.DataObject;
   let chars =
@@ -239,7 +239,7 @@ define([
     }
     if (allDefined) return data;
 
-    return UI.form(
+    return Twig.form(
       `
             <div>
                 <form>