svelteplot · gka · Jun 18, 2025 · Jun 18, 2025 · Jun 18, 2025 · Jun 18, 2025
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
         "prepack": "npx svelte-package",
         "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
         "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
-        "screenshots": "node screenshot-examples.js"
+        "screenshots": "node screenshot-examples.js",
+        "check-js-extensions": "node scripts/check-js-extensions.js src"
     },
     "exports": {
         ".": {

diff --git a/scripts/check-js-extensions.js b/scripts/check-js-extensions.js
@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+/**
+ * This script checks for missing .js extensions in import statements.
+ * It helps identify issues with ESM imports where TypeScript requires .js extensions.
+ */
+
+import { readFile, readdir, stat } from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Convert file:// URLs to paths
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Regular expressions to match import statements without .js extensions
+const regexImportFrom =
+    /import\s+(?:type\s+)?(?:{[^}]*}|\*\s+as\s+[^;]*|[^;{]*)\s+from\s+['"]([^'"]*)['"]/g;
+const regexExportFrom =
+    /export\s+(?:type\s+)?(?:{[^}]*}|\*\s+as\s+[^;]*)\s+from\s+['"]([^'"]*)['"]/g;
+
+// Skip node_modules and build directories
+const excludedDirs = ['node_modules', 'build', '.svelte-kit', 'dist', '.git', 'examples', 'tests'];
+
+// Only check certain file types
+const includedExtensions = ['.ts', '.js', '.svelte'];
+
+// Paths that should have .js extensions (relative paths and alias paths)
+const shouldHaveJsExtension = (importPath) => {
+    // Skip Svelte imports
+    if (importPath.endsWith('.svelte')) return false;
+
+    // Skip npm package imports (those that don't start with . or /)
+    if (
+        !importPath.startsWith('.') &&
+        !importPath.startsWith('/') &&
+        !importPath.startsWith('$lib')
+    )
+        return false;
+
+    // Skip imports with extensions already
+    if (path.extname(importPath)) return false;
+
+    return true;
+};
+
+async function* walkDirectory(dir) {
+    const entries = await readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            if (!excludedDirs.includes(entry.name)) {
+                yield* walkDirectory(fullPath);
+            }
+        } else if (includedExtensions.includes(path.extname(entry.name))) {
+            yield fullPath;
+        }
+    }
+}
+
+async function checkFile(filePath) {
+    const content = await readFile(filePath, 'utf8');
+    const issues = [];
+
+    // Find all import statements
+    let match;
+
+    // Check import statements
+    regexImportFrom.lastIndex = 0;
+    while ((match = regexImportFrom.exec(content)) !== null) {
+        const importPath = match[1];
+        if (shouldHaveJsExtension(importPath)) {
+            issues.push({
+                line: content.substring(0, match.index).split('\n').length,
+                importPath,
+                statement: match[0]
+            });
+        }
+    }
+
+    // Check export from statements
+    regexExportFrom.lastIndex = 0;
+    while ((match = regexExportFrom.exec(content)) !== null) {
+        const importPath = match[1];
+        if (shouldHaveJsExtension(importPath)) {
+            issues.push({
+                line: content.substring(0, match.index).split('\n').length,
+                importPath,
+                statement: match[0]
+            });
+        }
+    }
+
+    return { filePath, issues };
+}
+
+async function main() {
+    const rootDir = process.argv[2] || process.cwd();
+    console.log(`Checking for missing .js extensions in ${rootDir}...\n`);
+
+    let totalIssues = 0;
+    let filesWithIssues = 0;
+
+    for await (const filePath of walkDirectory(rootDir)) {
+        const { issues } = await checkFile(filePath);
+
+        if (issues.length > 0) {
+            console.log(`\x1b[33m${filePath}\x1b[0m`);
+            filesWithIssues++;
+
+            for (const issue of issues) {
+                totalIssues++;
+                console.log(
+                    `  Line ${issue.line}: Missing .js extension in import: ${issue.importPath}`
+                );
+                console.log(`    ${issue.statement}`);
+            }
+            console.log('');
+        }
+    }
+
+    if (totalIssues === 0) {
+        console.log('\x1b[32mNo missing .js extensions found!\x1b[0m');
+    } else {
+        console.log(
+            `\x1b[31mFound ${totalIssues} missing .js extensions in ${filesWithIssues} files.\x1b[0m`
+        );
+        process.exit(1);
+    }
+}
+
+main().catch((err) => {
+    console.error('Error:', err);
+    process.exit(1);
+});
diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotDefaults, PlotOptions } from './types/index.js';
+    import type { PlotOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -1,4 +1,4 @@
-import type { ScaleName, ScaleType, ScaledChannelName } from './types.js';
+import type { ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
 
 export const SCALE_TYPES: Record<ScaleName, symbol> = {
     opacity: Symbol('opacity'),

diff --git a/src/lib/core/FacetAxes.svelte b/src/lib/core/FacetAxes.svelte
@@ -36,6 +36,7 @@
             scaleType="band"
             ticks={fxValues}
             tickFormat={(d) => d}
+            tickFontSize={11}
-            tickFontSize={11}
+            tickFontSize={tickFontSize}
-            tickFontSize={11}
+            tickFontSize={tickFontSize}
             tickSize={0}
             tickPadding={5}
             anchor={plot.options.fx.axis}
@@ -53,6 +54,7 @@
             scaleType="band"
             ticks={fyValues}
             tickFormat={(d) => d}
+            tickFontSize={11}
             tickSize={0}
             tickPadding={5}
             anchor={plot.options.fy.axis}

diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
@@ -32,7 +32,7 @@ import type {
     ScaleName,
     ScaleOptions,
     ScaleType
-} from '../types.js';
+} from '../types/index.js';
 import {
     categoricalSchemes,
     isCategoricalScheme,

diff --git a/src/lib/helpers/autoTicks.ts b/src/lib/helpers/autoTicks.ts
@@ -1,4 +1,4 @@
-import type { RawValue, ScaleType } from '$lib/types.js';
+import type { RawValue, ScaleType } from '$lib/types/index.js';
 import { maybeTimeInterval } from './time.js';
 import { extent, range as rangei } from 'd3-array';
 

diff --git a/src/lib/helpers/autoTimeFormat.ts b/src/lib/helpers/autoTimeFormat.ts
@@ -1,5 +1,5 @@
-import type { Scale } from '$lib/classes/Scale.svelte.js';
-import { isDate } from '$lib/helpers/typeChecks';
+import type { PlotScale } from '$lib/types/index.js';
+import { isDate } from '$lib/helpers/typeChecks.js';
 
 const DATE_TIME: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
@@ -32,9 +32,9 @@ const autoFormatMonthYear = (locale: string) => {
     return (date: Date) => format(date).replace(' ', '\n');
 };
 
-export default function autoTimeFormat(x: Scale, plotWidth: number, plotLocale: string) {
+export default function autoTimeFormat(x: PlotScale, plotWidth: number, plotLocale: string) {
     const daysPer100Px =
-        ((toNumber(x.domain[1]) - toNumber(x.domain[0])) / plotWidth / 864e5) * 100;
+        ((toNumber(x.domain[1] as Date) - toNumber(x.domain[0] as Date)) / plotWidth / 864e5) * 100;
     const format =
         daysPer100Px < 1
             ? autoFormatDateTime(plotLocale)

diff --git a/src/lib/helpers/callWithProps.ts b/src/lib/helpers/callWithProps.ts
@@ -1,4 +1,4 @@
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 
 type Setter = (v: any) => void;
 

diff --git a/src/lib/helpers/colors.ts b/src/lib/helpers/colors.ts
@@ -77,7 +77,7 @@ import {
 } from 'd3-scale-chromatic';
 
 import { quantize } from 'd3-interpolate';
-import type { ColorScheme } from '$lib/types.js';
+import type { ColorScheme } from '$lib/types/index.js';
 
 const schemeObservable10 = [
     '#4269d0',

diff --git a/src/lib/helpers/curves.ts b/src/lib/helpers/curves.ts
@@ -1,4 +1,4 @@
-import type { Curve } from '../types.js';
+import type { Curve } from '../types/index.js';
 import {
     curveBasis,
     curveBasisClosed,

diff --git a/src/lib/helpers/facets.ts b/src/lib/helpers/facets.ts
@@ -1,4 +1,4 @@
-import type { GenericMarkOptions, Mark, RawValue } from '$lib/types.js';
+import type { GenericMarkOptions, Mark, RawValue } from '$lib/types/index.js';
 import { resolveChannel } from './resolve.js';
 
 /**

diff --git a/src/lib/helpers/getBaseStyles.ts b/src/lib/helpers/getBaseStyles.ts
@@ -1,5 +1,5 @@
-import type { Channels } from '$lib/types.js';
-import type { MarkStyleProps, DataRow } from '$lib/types.js';
+import type { Channels } from '$lib/types/index.js';
+import type { MarkStyleProps, DataRow } from '$lib/types/index.js';
 import { resolveProp } from './resolve.js';
 
 /**

diff --git a/src/lib/helpers/group.test.ts b/src/lib/helpers/group.test.ts
@@ -1,4 +1,4 @@
-import { groupFacetsAndZ } from './group';
+import { groupFacetsAndZ } from './group.js';
 import { describe, it, expect } from 'vitest';
 
 describe('groupFacetsAndZ', () => {

diff --git a/src/lib/helpers/group.ts b/src/lib/helpers/group.ts
@@ -1,5 +1,5 @@
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { ChannelName, Channels, DataRecord } from '$lib/types.js';
+import type { ChannelName, Channels, DataRecord } from '$lib/types/index.js';
 import { groups as d3Groups } from 'd3-array';
 
 /**

diff --git a/src/lib/helpers/index.test.ts b/src/lib/helpers/index.test.ts
@@ -1,4 +1,4 @@
-import { coalesce, isObject, omit } from './index';
+import { coalesce, isObject, omit } from './index.js';
 import { describe, it, expect } from 'vitest';
 
 describe('coalesce', () => {

diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
@@ -1,4 +1,4 @@
-import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '$lib/types.js';
+import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '$lib/types/index.js';
 import type { Snippet } from 'svelte';
 import { resolveProp } from './resolve.js';
 import { isDate } from '$lib/helpers/typeChecks.js';

diff --git a/src/lib/helpers/isDataRecord.ts b/src/lib/helpers/isDataRecord.ts
@@ -1,4 +1,4 @@
-import type { DataRecord } from '../types.js';
+import type { DataRecord } from '../types/index.js';
 
 export default function (value: any): value is DataRecord {
     if (typeof value !== 'object' || value === null) return false;

diff --git a/src/lib/helpers/isRawValue.ts b/src/lib/helpers/isRawValue.ts
@@ -1,4 +1,4 @@
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 import { isDate } from '$lib/helpers/typeChecks.js';
 
 export default function (value: any): value is RawValue {

diff --git a/src/lib/helpers/reduce.test.ts b/src/lib/helpers/reduce.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { reduceOutputs, type ReducerName } from './reduce.js';
-import type { ChannelAccessor, ChannelName } from '$lib/types.js';
+import type { ChannelAccessor, ChannelName } from '$lib/types/index.js';
 
 describe('reduceOutputs', () => {
     it('should correctly reduce outputs', () => {

diff --git a/src/lib/helpers/reduce.ts b/src/lib/helpers/reduce.ts
@@ -1,4 +1,4 @@
-import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '$lib/types.js';
+import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '$lib/types/index.js';
 import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';

diff --git a/src/lib/helpers/regressionLoess.ts b/src/lib/helpers/regressionLoess.ts
@@ -1,4 +1,4 @@
-import type { DataRow } from '$lib/types.js';
+import type { DataRow } from '$lib/types/index.js';
 import Loess from 'loess';
 
 type AccessorFn = (d: any) => number;

diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
@@ -1,7 +1,7 @@
 import { CHANNEL_SCALE } from '$lib/constants.js';
 import isDataRecord from '$lib/helpers/isDataRecord.js';
 import isRawValue from '$lib/helpers/isRawValue.js';
-import type { MarkStyleProps, PlotState, ScaledDataRecord } from '$lib/types.js';
+import type { MarkStyleProps, PlotState, ScaledDataRecord } from '$lib/types/index.js';
 import { isValid } from './isValid.js';
 
 import type {
@@ -13,7 +13,7 @@ import type {
     RawValue,
     DataRecord,
     ConstantAccessor
-} from '../types.js';
+} from '../types/index.js';
 import { getBaseStylesObject } from './getBaseStyles.js';
 import { RAW_VALUE } from 'svelteplot/transforms/recordize.js';
 

diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
@@ -25,7 +25,7 @@ import type {
     ScaleType,
     ScaledChannelName,
     UsedScales
-} from '../types.js';
+} from '../types/index.js';
 import isDataRecord from './isDataRecord.js';
 
 import { createProjection } from './projection.js';

diff --git a/src/lib/helpers/typeChecks.ts b/src/lib/helpers/typeChecks.ts
@@ -1,4 +1,4 @@
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 import { isSymbol } from './symbols.js';
 import { color } from 'd3-color';
 import {

diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
@@ -37,9 +37,9 @@
         ChannelAccessor,
         ScaledDataRecord,
         LinkableMarkProps,
-        PlotDefaults
+        PlotDefaults,
+        RawValue
     } from '../types/index.js';
-    import type { RawValue } from 'svelteplot/types/index.js';
     import type { StackOptions } from '$lib/transforms/stack.js';
 
     let markProps: AreaMarkProps = $props();