Support NodeNext packages (#126)

Author: techniq

.changeset/metal-cows-punch.md

@@ -0,0 +1,5 @@
+---
+"layerchart": minor
+---
+
+Support NodeNext packages

packages/layerchart/package.json

@@ -95,7 +95,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.108.3",
     "shapefile": "^0.6.6",
-    "svelte-ux": ">=0.60.6",
+    "svelte-ux": "^0.61.1",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {

packages/layerchart/src/lib/components/Arc.svelte

@@ -23,8 +23,8 @@
   import { arc as d3arc } from 'd3-shape';
   import { scaleLinear } from 'd3-scale';
   import { min, max } from 'd3-array';
-  import { motionStore } from '$lib/stores/motionStore';
-  import { degreesToRadians } from '$lib/utils/math';
+  import { motionStore } from '$lib/stores/motionStore.js';
+  import { degreesToRadians } from '$lib/utils/math.js';
 
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;

packages/layerchart/src/lib/components/Area.svelte

@@ -8,7 +8,7 @@
 
   import { cls } from 'svelte-ux';
 
-  import { motionStore } from '$lib/stores/motionStore';
+  import { motionStore } from '$lib/stores/motionStore.js';
 
   import Spline from './Spline.svelte';
 

packages/layerchart/src/lib/components/Axis.svelte

@@ -13,7 +13,7 @@
   import Circle from './Circle.svelte';
   import Line from './Line.svelte';
   import Text from './Text.svelte';
-  import { isScaleBand } from '$lib/utils/scales';
+  import { isScaleBand } from '$lib/utils/scales.js';
 
   const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
 

packages/layerchart/src/lib/components/Bar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext, type ComponentProps } from 'svelte';
 
-  import { createDimensionGetter } from '$lib/utils/rect';
+  import { createDimensionGetter } from '$lib/utils/rect.js';
   import Rect from './Rect.svelte';
 
   const { x: xContext, y: yContext } = getContext('LayerCake');

packages/layerchart/src/lib/components/Bounds.svelte

@@ -2,7 +2,7 @@
   import { getContext } from 'svelte';
   import { scaleLinear } from 'd3-scale';
 
-  import { motionScale } from '$lib/utils/scales';
+  import { motionScale } from '$lib/utils/scales.js';
 
   const { width, height } = getContext('LayerCake');
 
@@ -20,7 +20,7 @@
 
     return [
       resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
-      resolvedExtents?.[axis + '1'] ?? fallback // x1 or y1, fallback as $width or $height
+      resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
     ];
   }
 

packages/layerchart/src/lib/components/Chart.svelte

@@ -22,7 +22,7 @@
   import type { ComponentProps } from 'svelte';
   import { max, min } from 'd3-array';
   import { get } from 'lodash-es';
-  import { isScaleBand } from '$lib/utils/scales';
+  import { isScaleBand } from '$lib/utils/scales.js';
   import TooltipContext from './TooltipContext.svelte';
   import GeoContext from './GeoContext.svelte';
 

packages/layerchart/src/lib/components/Circle.svelte

@@ -3,7 +3,7 @@
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from 'svelte-ux';
 
-  import { motionStore } from '$lib/stores/motionStore';
+  import { motionStore } from '$lib/stores/motionStore.js';
 
   export let cx: number = 0;
   export let initialCx = cx;

packages/layerchart/src/lib/components/Group.svelte

@@ -2,7 +2,7 @@
   import { getContext, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 
-  import { motionStore } from '$lib/stores/motionStore';
+  import { motionStore } from '$lib/stores/motionStore.js';
 
   const { width, height } = getContext('LayerCake');