refactor(): fix ESM import paths so they are more portable

_test/fixtures/testcafe.js

@@ -1,8 +1,8 @@
 import Tonic from '@socketsupply/tonic'
-import { Components } from '../../'
-import { html } from '../util'
+import { Components } from '../../index.js'
+import { html } from '../util.js'
 
-import './test-form'
+import './test-form.js'
 
 window.promiseCounter = 0
 const OldPromise = window.Promise

_test/index.js

@@ -1,28 +1,28 @@
 // @ts-check
 'use strict'
 
-import '../accordion/test'
-import '../badge/test'
-import '../button/test'
-import '../chart/test'
-import '../checkbox/test'
-import '../dialog/test'
-import '../form/test'
-import '../icon/test'
-import '../input/test'
-import '../panel/test'
-import '../popover/test'
-import '../profile-image/test'
-import '../progress-bar/test'
-import '../range/test'
-import '../relative-time/test'
-import '../router/test'
-import '../select/test'
-import '../sprite/test'
-import '../tabs/test'
-import '../textarea/test'
-import '../toaster-inline/test'
-import '../toaster/test'
-import '../toggle/test'
-import '../tooltip/test'
-import '../windowed/test'
+import '../accordion/test.js'
+import '../badge/test.js'
+import '../button/test.js'
+import '../chart/test.js'
+import '../checkbox/test.js'
+import '../dialog/test.js'
+import '../form/test.js'
+import '../icon/test.js'
+import '../input/test.js'
+import '../panel/test.js'
+import '../popover/test.js'
+import '../profile-image/test.js'
+import '../progress-bar/test.js'
+import '../range/test.js'
+import '../relative-time/test.js'
+import '../router/test.js'
+import '../select/test.js'
+import '../sprite/test.js'
+import '../tabs/test.js'
+import '../textarea/test.js'
+import '../toaster-inline/test.js'
+import '../toaster/test.js'
+import '../toggle/test.js'
+import '../tooltip/test.js'
+import '../windowed/test.js'

button/index.js

@@ -213,8 +213,8 @@ export class TonicButton extends Tonic {
       button: {
         width,
         height,
-        borderRadius: radius,
-        borderWidth: borderWidth
+        borderWidth,
+        borderRadius: radius
       },
       wrapper: {
         width,

form/test.js

@@ -1,10 +1,10 @@
 import { test } from 'tapzero'
 import { qs } from 'qsa-min'
 
-import { html } from '../_test/util'
+import { html } from '../_test/util.js'
 import { Tonic } from '@socketsupply/tonic'
-import { TonicForm } from '.'
-import { Components } from '..'
+import { TonicForm } from './index.js'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

index.js

@@ -1,31 +1,31 @@
 import Tonic from '@socketsupply/tonic'
 
-import { TonicAccordion, TonicAccordionSection } from './accordion'
-import { TonicBadge } from './badge'
-import { TonicButton } from './button'
-import { TonicChart } from './chart'
-import { TonicCheckbox } from './checkbox'
-import { TonicDialog } from './dialog'
-import { TonicForm } from './form'
-import { TonicIcon } from './icon'
-import { TonicInput } from './input'
-import { TonicLoader } from './loader'
-import { TonicPanel } from './panel'
-import { TonicPopover } from './popover'
-import { TonicProfileImage } from './profile-image'
-import { TonicProgressBar } from './progress-bar'
-import { TonicRange } from './range'
-import { TonicRelativeTime } from './relative-time'
-import { TonicRouter } from './router'
-import { TonicSelect } from './select'
-import { TonicSprite } from './sprite'
-import { TonicSplit, TonicSplitLeft, TonicSplitRight, TonicSplitTop, TonicSplitBottom } from './split'
-import { TonicTabs, TonicTab, TonicTabPanel } from './tabs'
-import { TonicTextarea } from './textarea'
-import { TonicTooltip } from './tooltip'
-import { TonicToasterInline } from './toaster-inline'
-import { TonicToaster } from './toaster'
-import { TonicToggle } from './toggle'
+import { TonicAccordion, TonicAccordionSection } from './accordion/index.js'
+import { TonicBadge } from './badge/index.js'
+import { TonicButton } from './button/index.js'
+import { TonicChart } from './chart/index.js'
+import { TonicCheckbox } from './checkbox/index.js'
+import { TonicDialog } from './dialog/index.js'
+import { TonicForm } from './form/index.js'
+import { TonicIcon } from './icon/index.js'
+import { TonicInput } from './input/index.js'
+import { TonicLoader } from './loader/index.js'
+import { TonicPanel } from './panel/index.js'
+import { TonicPopover } from './popover/index.js'
+import { TonicProfileImage } from './profile-image/index.js'
+import { TonicProgressBar } from './progress-bar/index.js'
+import { TonicRange } from './range/index.js'
+import { TonicRelativeTime } from './relative-time/index.js'
+import { TonicRouter } from './router/index.js'
+import { TonicSelect } from './select/index.js'
+import { TonicSprite } from './sprite/index.js'
+import { TonicSplit, TonicSplitLeft, TonicSplitRight, TonicSplitTop, TonicSplitBottom } from './split/index.js'
+import { TonicTabs, TonicTab, TonicTabPanel } from './tabs/index.js'
+import { TonicTextarea } from './textarea/index.js'
+import { TonicTooltip } from './tooltip/index.js'
+import { TonicToasterInline } from './toaster-inline/index.js'
+import { TonicToaster } from './toaster/index.js'
+import { TonicToggle } from './toggle/index.js'
 
 const version = Tonic.version
 const major = version ? version.split('.')[0] : '0'

panel/index.js

@@ -1,4 +1,4 @@
-import { TonicDialog } from '../dialog'
+import { TonicDialog } from '../dialog/index.js'
 
 export class TonicPanel extends TonicDialog {
   constructor () {

profile-image/index.js

@@ -91,7 +91,7 @@ export class TonicProfileImage extends Tonic {
       wrapper: {
         width: size,
         height: size,
-        border: border,
+        border,
         borderRadius: radius
       }
     }

router/index.js

@@ -159,10 +159,10 @@ TonicRouter.matcher = (() => {
       tokens.push({
         name: name || key++,
         prefix: prev,
-        delimiter: delimiter,
-        optional: optional,
-        repeat: repeat,
-        partial: partial,
+        delimiter,
+        optional,
+        repeat,
+        partial,
         pattern: pattern ? escapeGroup(pattern) : '[^' + escapeString(delimiter) + ']+?'
       })
     }

textarea/index.js

@@ -142,8 +142,8 @@ export class TonicTextarea extends Tonic {
       textarea: {
         width,
         height,
-        borderRadius: radius,
-        resize: resize
+        resize,
+        borderRadius: radius
       }
     }
   }

windowed/index.js

@@ -273,7 +273,7 @@ export class Windowed extends Tonic {
     }
 
     outer.scrollTop = scrollTop
-    this.rePaint({ fromScroll: true, scrollTop: scrollTop })
+    this.rePaint({ fromScroll: true, scrollTop })
   }
 
   createNewPage () {
@@ -504,7 +504,7 @@ export class Windowed extends Tonic {
     if (outer) {
       outer.addEventListener('scroll', () => {
         const scrollTop = this.state.scrollTop = outer.scrollTop
-        this.rePaint({ fromScroll: true, scrollTop: scrollTop })
+        this.rePaint({ fromScroll: true, scrollTop })
       }, { passive: true })
       outer.__hasWindowedScrollListener = true
     }