Fix esm import (#86)

fcollonval · web-flow · commit d52bae7fca28 · 2024-01-09T11:28:09.000+01:00
* Fix ESM local import

* Add tool to auto fix import
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -33,7 +33,7 @@
     "deploy:docs": "yarn run build:docs && gh-pages -d storybook-static",
     "doc": "api-extractor run --local",
     "prettier:check": "prettier --config ../../.prettierrc --check \"src/**/*.ts\"",
-    "prettier": "prettier --config ../../.prettierrc --write \"src/**/*.ts\"",
+    "prettier": "tsc-esm-fix --src=\"src\" --ext=\".js\" && prettier --config ../../.prettierrc --write \"src/**/*.ts\"",
     "eslint:check": "eslint . --ext .ts",
     "eslint": "eslint . --ext .ts --fix",
     "prepublishOnly": "rimraf README.md && cp ../../README.md . && yarn run build",
@@ -91,6 +91,7 @@
     "storybook": "^7.5.3",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.3",
+    "tsc-esm-fix": "^2.20.21",
     "tslib": "^2.6.0",
     "typescript": "~5.2.2",
     "webpack": "^5.0.0"
diff --git a/packages/components/src/accordion-item/index.ts b/packages/components/src/accordion-item/index.ts
@@ -7,7 +7,7 @@ import {
   AccordionItemOptions,
   accordionItemTemplate as template
 } from '@microsoft/fast-foundation';
-import { accordionItemStyles as styles } from './accordion-item.styles';
+import { accordionItemStyles as styles } from './accordion-item.styles.js';
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#AccordionItem} registration for configuring the component with a DesignSystem.
diff --git a/packages/components/src/anchor/anchor.stories.ts b/packages/components/src/anchor/anchor.stories.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Anchor',
diff --git a/packages/components/src/breadcrumb-item/breadcrumb-item.stories.ts b/packages/components/src/breadcrumb-item/breadcrumb-item.stories.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Breadcrumb Item',
diff --git a/packages/components/src/breadcrumb/breadcrumb.stories.ts b/packages/components/src/breadcrumb/breadcrumb.stories.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Breadcrumb',
diff --git a/packages/components/src/button/button.stories.ts b/packages/components/src/button/button.stories.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Button',
diff --git a/packages/components/src/card/card.stories.ts b/packages/components/src/card/card.stories.ts
@@ -1,7 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { neutralForegroundRest, typeRampBaseFontSize } from '../design-tokens';
+import {
+  neutralForegroundRest,
+  typeRampBaseFontSize
+} from '../design-tokens.js';
 
 export default {
   title: 'Components/Card',
diff --git a/packages/components/src/checkbox/checkbox.stories.ts b/packages/components/src/checkbox/checkbox.stories.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 import type { Meta, StoryFn, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { Checkbox } from './index';
+import { Checkbox } from './index.js';
 
 export default {
   title: 'Components/Checkbox',
diff --git a/packages/components/src/combobox/combobox.stories.ts b/packages/components/src/combobox/combobox.stories.ts
@@ -3,8 +3,8 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
-import { Combobox } from './index';
+import { getFaIcon } from '../utilities/storybook/index.js';
+import { Combobox } from './index.js';
 
 export default {
   title: 'Components/Combobox',
diff --git a/packages/components/src/data-grid/data-grid.stories.ts b/packages/components/src/data-grid/data-grid.stories.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { DataGrid } from './index';
+import { DataGrid } from './index.js';
 
 export default {
   title: 'Components/Data Grid',
diff --git a/packages/components/src/date-field/date-field.spec.ts b/packages/components/src/date-field/date-field.spec.ts
@@ -8,7 +8,7 @@ test('temporary test', () => {
 
 /* TODO FIXME
     jupyter-ui-toolkit/node_modules/@microsoft/fast-element/dist/esm/index.js:1
-    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "./platform";
+    ({"Object.<anonymous>":function(module,exports,require,`${process.platform === 'win32' ? '' : '/'}${/file:\/{2,3}(.+)\/[^/]/.exec(import.meta.url)![1]}`,`${process.platform === 'win32' ? '' : '/'}${/file:\/{2,3}(.+)/.exec(import.meta.url)![1]}`,jest){export * from "./platform";
 
     SyntaxError: Unexpected token 'export'
 
diff --git a/packages/components/src/date-field/date-field.stories.ts b/packages/components/src/date-field/date-field.stories.ts
@@ -3,8 +3,8 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
-import { DateField } from './index';
+import { getFaIcon } from '../utilities/storybook/index.js';
+import { DateField } from './index.js';
 
 export default {
   title: 'Components/Date Field',
diff --git a/packages/components/src/date-field/date-field.ts b/packages/components/src/date-field/date-field.ts
@@ -15,8 +15,8 @@ import {
   DelegatesARIATextbox
 } from '@microsoft/fast-foundation';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { FormAssociatedDateField } from './date-field.form-associated';
-import { nullableDateConverter } from '../converters';
+import { FormAssociatedDateField } from './date-field.form-associated.js';
+import { nullableDateConverter } from '../converters.js';
 
 /**
  * Number field appearances
diff --git a/packages/components/src/menu-item/menu-item.stories.ts b/packages/components/src/menu-item/menu-item.stories.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Menu Item',
diff --git a/packages/components/src/menu/menu.stories.ts b/packages/components/src/menu/menu.stories.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Menu',
diff --git a/packages/components/src/number-field/number-field.stories.ts b/packages/components/src/number-field/number-field.stories.ts
@@ -3,8 +3,8 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
-import { NumberField } from './index';
+import { getFaIcon } from '../utilities/storybook/index.js';
+import { NumberField } from './index.js';
 
 export default {
   title: 'Components/Number Field',
diff --git a/packages/components/src/search/search.stories.ts b/packages/components/src/search/search.stories.ts
@@ -3,8 +3,8 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
-import { Search } from './index';
+import { getFaIcon } from '../utilities/storybook/index.js';
+import { Search } from './index.js';
 
 export default {
   title: 'Components/Search',
diff --git a/packages/components/src/select/select.stories.ts b/packages/components/src/select/select.stories.ts
@@ -3,7 +3,7 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Select',
diff --git a/packages/components/src/styles/size.ts b/packages/components/src/styles/size.ts
@@ -3,7 +3,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { cssPartial } from '@microsoft/fast-element';
-import { baseHeightMultiplier, density, designUnit } from '../design-tokens';
+import { baseHeightMultiplier, density, designUnit } from '../design-tokens.js';
 
 /**
  * A formula to retrieve the control height.
diff --git a/packages/components/src/switch/switch.stories.ts b/packages/components/src/switch/switch.stories.ts
@@ -3,7 +3,7 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { Switch } from './index';
+import { Switch } from './index.js';
 
 export default {
   title: 'Components/Switch',
diff --git a/packages/components/src/tab/index.ts b/packages/components/src/tab/index.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { Tab, tabTemplate as template } from '@microsoft/fast-foundation';
-import { tabStyles as styles } from './tab.styles';
+import { tabStyles as styles } from './tab.styles.js';
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Tab} registration for configuring the component with a DesignSystem.
diff --git a/packages/components/src/tabs/index.ts b/packages/components/src/tabs/index.ts
@@ -2,7 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
-import { tabsStyles as styles } from './tabs.styles';
+import { tabsStyles as styles } from './tabs.styles.js';
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#Tabs} registration for configuring the component with a DesignSystem.
diff --git a/packages/components/src/text-area/text-area.stories.ts b/packages/components/src/text-area/text-area.stories.ts
@@ -3,7 +3,7 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { TextArea } from './index';
+import { TextArea } from './index.js';
 
 export default {
   title: 'Components/Text Area',
diff --git a/packages/components/src/text-field/text-field.stories.ts b/packages/components/src/text-field/text-field.stories.ts
@@ -3,8 +3,8 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { getFaIcon } from '../utilities/storybook';
-import { TextField } from './index';
+import { getFaIcon } from '../utilities/storybook/index.js';
+import { TextField } from './index.js';
 
 export default {
   title: 'Components/Text Field',
diff --git a/packages/components/src/toolbar/toolbar.styles.ts b/packages/components/src/toolbar/toolbar.styles.ts
@@ -17,7 +17,7 @@ import {
   fillColor,
   focusStrokeWidth,
   strokeWidth
-} from '../design-tokens';
+} from '../design-tokens.js';
 
 /**
  * Styles for the Toolbar
diff --git a/packages/components/src/tree-item/tree-item.stories.ts b/packages/components/src/tree-item/tree-item.stories.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
-import { getFaIcon } from '../utilities/storybook';
+import { getFaIcon } from '../utilities/storybook/index.js';
 
 export default {
   title: 'Components/Tree Item',
diff --git a/packages/components/src/tree-view/tree-view.stories.ts b/packages/components/src/tree-view/tree-view.stories.ts
@@ -3,7 +3,7 @@
 
 import type { StoryFn, Meta, StoryObj } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
-import { TreeView } from './index';
+import { TreeView } from './index.js';
 
 export default {
   title: 'Components/Tree View',
diff --git a/packages/components/src/utilities/theme/applyTheme.ts b/packages/components/src/utilities/theme/applyTheme.ts
@@ -21,7 +21,7 @@ import {
   neutralColor,
   strokeWidth,
   typeRampBaseFontSize
-} from '../../design-tokens';
+} from '../../design-tokens.js';
 
 const THEME_NAME_BODY_ATTRIBUTE = 'data-jp-theme-name';
 const THEME_MODE_BODY_ATTRIBUTE = 'data-jp-theme-light';
diff --git a/yarn.lock b/yarn.lock
@@ -2463,6 +2463,7 @@ __metadata:
     storybook: ^7.5.3
     ts-jest: ^29.1.0
     ts-loader: ^9.4.3
+    tsc-esm-fix: ^2.20.21
     tslib: ^2.6.0
     typescript: ~5.2.2
     webpack: ^5.0.0
@@ -8465,6 +8466,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"depseek@npm:^0.2.1":
+  version: 0.2.2
+  resolution: "depseek@npm:0.2.2"
+  checksum: c8df9d748591b49276bbfa00caefe237de92cd3160af8f081d81d1cae1fe32d61c8a3d01bdcb5eae26739e7edf086792fe84812126248aec68148fe3ec9f3eef
+  languageName: node
+  linkType: hard
+
 "dequal@npm:^2.0.0, dequal@npm:^2.0.2":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
@@ -9941,6 +9949,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^11.2.0":
+  version: 11.2.0
+  resolution: "fs-extra@npm:11.2.0"
+  dependencies:
+    graceful-fs: ^4.2.0
+    jsonfile: ^6.0.1
+    universalify: ^2.0.0
+  checksum: b12e42fa40ba47104202f57b8480dd098aa931c2724565e5e70779ab87605665594e76ee5fb00545f772ab9ace167fe06d2ab009c416dc8c842c5ae6df7aa7e8
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:~7.0.1":
   version: 7.0.1
   resolution: "fs-extra@npm:7.0.1"
@@ -10407,6 +10426,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^13.2.2":
+  version: 13.2.2
+  resolution: "globby@npm:13.2.2"
+  dependencies:
+    dir-glob: ^3.0.1
+    fast-glob: ^3.3.0
+    ignore: ^5.2.4
+    merge2: ^1.4.1
+    slash: ^4.0.0
+  checksum: f3d84ced58a901b4fcc29c846983108c426631fe47e94872868b65565495f7bee7b3defd68923bd480582771fd4bbe819217803a164a618ad76f1d22f666f41e
+  languageName: node
+  linkType: hard
+
 "globby@npm:^6.1.0":
   version: 6.1.0
   resolution: "globby@npm:6.1.0"
@@ -13184,6 +13216,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"meow@npm:^12.1.1":
+  version: 12.1.1
+  resolution: "meow@npm:12.1.1"
+  checksum: a6f3be85fbe53430ef53ab933dd790c39216eb4dbaabdbef593aa59efb40ecaa417897000175476bc33eed09e4cbce01df7ba53ba91e9a4bd84ec07024cb8914
+  languageName: node
+  linkType: hard
+
 "meow@npm:^8.1.2":
   version: 8.1.2
   resolution: "meow@npm:8.1.2"
@@ -16727,6 +16766,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "slash@npm:4.0.0"
+  checksum: da8e4af73712253acd21b7853b7e0dbba776b786e82b010a5bfc8b5051a1db38ed8aba8e1e8f400dd2c9f373be91eb1c42b66e91abb407ff42b10feece5e1d2d
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^4.0.0":
   version: 4.0.0
   resolution: "slice-ansi@npm:4.0.0"
@@ -17784,6 +17830,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsc-esm-fix@npm:^2.20.21":
+  version: 2.20.21
+  resolution: "tsc-esm-fix@npm:2.20.21"
+  dependencies:
+    depseek: ^0.2.1
+    fs-extra: ^11.2.0
+    globby: ^13.2.2
+    json5: ^2.2.3
+    meow: ^12.1.1
+    tslib: ^2.6.2
+  bin:
+    tsc-esm-fix: target/es6/cli.mjs
+  checksum: c33c88cceff7a1c5aad4c1e1f029604bfd2fa9f83e273f4710fe9e12be18cd902937a88d35065d0e9cc8ef2b9f78e59494d092bd4a36d4ee47df604ed04201cd
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:^3.12.0":
   version: 3.12.0
   resolution: "tsconfig-paths@npm:3.12.0"
@@ -17828,7 +17890,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.0, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
