refactor(ui-components): Convert RESM to NESM

packages/ui-components/package.json

@@ -2,6 +2,7 @@
   "name": "@agoric/ui-components",
   "version": "0.2.18",
   "description": "Reusable UI Components for Agoric Dapps, built with React and MaterialUI",
+  "type": "module",
   "main": "dist/index.js",
   "dependencies": {
     "@agoric/assert": "^0.3.7",
@@ -65,7 +66,6 @@
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "esm": "agoric-labs/esm#Agoric-built",
     "prettier": "^1.19.0",
     "react": "^16.14.0",
     "react-dom": "^16.8.0",
@@ -78,7 +78,6 @@
       "!test/components"
     ],
     "require": [
-      "esm",
       "./test/_setup-enzyme-adapter.js"
     ]
   },

packages/ui-components/src/components/NatAmountInput.jsx

@@ -1,5 +1,5 @@
-import { parseAsNat } from '../display/natValue/parseAsNat';
-import { stringifyNat } from '../display/natValue/stringifyNat';
+import { parseAsNat } from '../display/natValue/parseAsNat.js';
+import { stringifyNat } from '../display/natValue/stringifyNat.js';
 
 // https://material-ui.com/api/text-field/
 

packages/ui-components/src/components/NatPurseSelector.jsx

@@ -1,6 +1,6 @@
 import { AssetKind } from '@agoric/ertp';
 import clsx from 'clsx';
-import { stringifyValue } from '../display';
+import { stringifyValue } from '../display/index.js';
 
 /**
  * Return `purses` filtered to just the fungible ones, and optionally just the ones for a

packages/ui-components/src/display/display.js

@@ -1,12 +1,12 @@
 // @ts-check
 import { assert, details } from '@agoric/assert';
 import { AssetKind } from '@agoric/ertp';
-import '@agoric/ertp/exported';
+import '@agoric/ertp/exported.js';
 
-import { parseAsNat } from './natValue/parseAsNat';
-import { stringifyNat } from './natValue/stringifyNat';
-import { parseAsSet } from './setValue/parseAsSet';
-import { stringifySet } from './setValue/stringifySet';
+import { parseAsNat } from './natValue/parseAsNat.js';
+import { stringifyNat } from './natValue/stringifyNat.js';
+import { parseAsSet } from './setValue/parseAsSet.js';
+import { stringifySet } from './setValue/stringifySet.js';
 
 /**
  *

packages/ui-components/src/display/index.js

@@ -1,4 +1,4 @@
-export * from './display';
-export * from './natValue/stringifyRatioAsFraction';
-export * from './natValue/stringifyRatio';
-export * from './natValue/stringifyRatioAsPercent';
+export * from './display.js';
+export * from './natValue/stringifyRatioAsFraction.js';
+export * from './natValue/stringifyRatio.js';
+export * from './natValue/stringifyRatioAsPercent.js';

packages/ui-components/src/display/natValue/parseAsNat.js

@@ -1,10 +1,10 @@
 // @ts-check
 import { assert, details } from '@agoric/assert';
 import { Nat } from '@agoric/nat';
-import '@agoric/ertp/exported';
+import '@agoric/ertp/exported.js';
 
-import { captureNum } from './helpers/captureNum';
-import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces';
+import { captureNum } from './helpers/captureNum.js';
+import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces.js';
 
 /**
  * Parse a string as a Nat, using `decimalPlaces`, the number of

packages/ui-components/src/display/natValue/stringifyNat.js

@@ -1,5 +1,5 @@
 import { assert } from '@agoric/assert';
-import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces';
+import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces.js';
 
 const CONVENTIONAL_DECIMAL_PLACES = 2;
 

packages/ui-components/src/display/natValue/stringifyRatio.js

@@ -1,6 +1,6 @@
 import { assert, details } from '@agoric/assert';
-import { captureNum } from './helpers/captureNum';
-import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces';
+import { captureNum } from './helpers/captureNum.js';
+import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces.js';
 
 const PLACES_TO_SHOW = 2;
 

packages/ui-components/src/display/natValue/stringifyRatioAsFraction.js

@@ -4,9 +4,9 @@ import { assert } from '@agoric/assert';
 import { isNatValue } from '@agoric/ertp';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import '@agoric/zoe/exported';
+import '@agoric/zoe/exported.js';
 
-import { stringifyNat } from './stringifyNat';
+import { stringifyNat } from './stringifyNat.js';
 
 const PLACES_TO_SHOW = 2;
 

packages/ui-components/src/display/natValue/stringifyRatioAsPercent.js

@@ -1,10 +1,10 @@
 // @ts-check
 
 import { assert, details } from '@agoric/assert';
-import '@agoric/zoe/exported';
+import '@agoric/zoe/exported.js';
 
-import { captureNum } from './helpers/captureNum';
-import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces';
+import { captureNum } from './helpers/captureNum.js';
+import { roundToDecimalPlaces } from './helpers/roundToDecimalPlaces.js';
 
 const PERCENT_BASE = 100n;
 const PLACES_TO_SHOW = 0;

packages/ui-components/src/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-unresolved */
-export { default as makeNatAmountInput } from './components/NatAmountInput';
+export { default as makeNatAmountInput } from './components/NatAmountInput.js';
 // eslint-disable-next-line import/no-unresolved
 export {
   default as makeNatPurseSelector,
   filterPurses,
-} from './components/NatPurseSelector';
-export * from './display';
+} from './components/NatPurseSelector.js';
+export * from './display/index.js';

packages/ui-components/test/components/test-NatAmountInput.js

@@ -7,10 +7,12 @@ import { TextField } from '@material-ui/core';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import test from 'ava';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { shallow, render } from 'enzyme';
+import * as enzyme from 'enzyme';
 
 // @ts-ignore path is correct for compiled output
-import { makeNatAmountInput } from '../../../dist'; // eslint-disable-line import/no-unresolved
+import { makeNatAmountInput } from '../../../dist/index.js'; // eslint-disable-line import/no-unresolved
+
+const { shallow, render } = enzyme.default || enzyme;
 
 const NatAmountInput = makeNatAmountInput({ React, TextField });
 

packages/ui-components/test/display/natValue/test-captureNum.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { captureNum } from '../../../src/display/natValue/helpers/captureNum';
+import { captureNum } from '../../../src/display/natValue/helpers/captureNum.js';
 
 test('captureNum', t => {
   t.deepEqual(captureNum('200'), { left: '200', right: '' });

packages/ui-components/test/display/natValue/test-parseAsNat.js

@@ -1,9 +1,9 @@
 // @ts-check
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { parseAsNat } from '../../../src/display/natValue/parseAsNat';
+import { parseAsNat } from '../../../src/display/natValue/parseAsNat.js';
 
 test('parseAsNat dollars to cents', t => {
   // 1 dollar is 100 cents, or 2 decimal points to the right

packages/ui-components/test/display/natValue/test-roundToDecimalPlaces.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { roundToDecimalPlaces as round } from '../../../src/display/natValue/helpers/roundToDecimalPlaces';
+import { roundToDecimalPlaces as round } from '../../../src/display/natValue/helpers/roundToDecimalPlaces.js';
 
 test('roundToDecimalPlaces', t => {
   t.deepEqual(round('00', 0), '');

packages/ui-components/test/display/natValue/test-stringifyNat.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { stringifyNat } from '../../../src/display/natValue/stringifyNat';
+import { stringifyNat } from '../../../src/display/natValue/stringifyNat.js';
 
 test('stringifyNat cents to dollars', t => {
   // 1 dollar is 100 cents, or 2 decimal points to the right

packages/ui-components/test/display/natValue/test-stringifyRatio.js

@@ -1,14 +1,14 @@
 // @ts-check
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { makeRatio } from '@agoric/zoe/src/contractSupport';
+import { makeRatio } from '@agoric/zoe/src/contractSupport/index.js';
 import { makeIssuerKit, AssetKind } from '@agoric/ertp';
 
 import { assert, details as X } from '@agoric/assert';
-import { stringifyRatioAsFraction } from '../../../src/display/natValue/stringifyRatioAsFraction';
-import { stringifyRatio } from '../../../src/display/natValue/stringifyRatio';
-import { stringifyRatioAsPercent } from '../../../src/display/natValue/stringifyRatioAsPercent';
+import { stringifyRatioAsFraction } from '../../../src/display/natValue/stringifyRatioAsFraction.js';
+import { stringifyRatio } from '../../../src/display/natValue/stringifyRatio.js';
+import { stringifyRatioAsPercent } from '../../../src/display/natValue/stringifyRatioAsPercent.js';
 
 test('stringifyRatio dollars for one eth', t => {
   // 1 dollar is 100 cents, or 2 decimal points to the right

packages/ui-components/test/display/setValue/test-parseAsSet.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { parseAsSet } from '../../../src/display/setValue/parseAsSet';
+import { parseAsSet } from '../../../src/display/setValue/parseAsSet.js';
 
 test('parseSet', t => {
   t.throws(() => parseAsSet(), { message: 'parseAsSet not yet implemented' });

packages/ui-components/test/display/setValue/test-stringifySet.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import { test } from '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 
-import { stringifySet } from '../../../src/display/setValue/stringifySet';
+import { stringifySet } from '../../../src/display/setValue/stringifySet.js';
 
 test('stringifySet', t => {
   t.throws(() => stringifySet(), {

packages/ui-components/test/display/test-display.js

@@ -1,9 +1,9 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import '@agoric/swingset-vat/tools/prepare-test-env-ava';
+import '@agoric/swingset-vat/tools/prepare-test-env-ava.js';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import test from 'ava'; // TODO ses-ava doesn't yet have test.todo
 
-import { parseAsValue } from '../../src/display/display';
+import { parseAsValue } from '../../src/display/display.js';
 
 test('parseAsValue', t => {
   t.is(parseAsValue('30'), 30n);