custom rule

eslint-rules/enforce-extensions.js

@@ -0,0 +1,171 @@
+import fs from "fs";
+import path from "path";
+
+export default {
+	meta: {
+		type: "suggestion",
+		docs: {
+			description: "Enforce file extensions in import statements",
+		},
+		fixable: "code",
+		schema: [
+			{
+				type: "object",
+				properties: {
+					ignorePaths: {
+						type: "array",
+						items: { type: "string" },
+					},
+					includePaths: {
+						type: "array",
+						items: { type: "string" },
+						description: "Path patterns to include (e.g., '$lib/')",
+					},
+					tsToJs: {
+						type: "boolean",
+						description: "Convert .ts files to .js when importing",
+					},
+					aliases: {
+						type: "object",
+						description: "Map of path aliases to their actual paths (e.g., {'$lib': 'src/lib'})",
+					},
+				},
+				additionalProperties: false,
+			},
+		],
+		messages: {
+			missingExtension: "Import should include a file extension",
+			noFileFound: "Import is missing extension and no matching file was found",
+		},
+	},
+	create(context) {
+		const options = context.options[0] || {};
+		const ignorePaths = options.ignorePaths || [];
+		const includePaths = options.includePaths || [];
+		const tsToJs = options.tsToJs !== undefined ? options.tsToJs : true; // Default to true
+		const aliases = options.aliases || {};
+
+		// Get the project root directory
+		const projectRoot = process.cwd();
+
+		// Utility function to resolve file paths
+		function resolveImportPath(importPath, currentFilePath) {
+			// Handle relative paths
+			if (importPath.startsWith("./") || importPath.startsWith("../")) {
+				return path.resolve(path.dirname(currentFilePath), importPath);
+			}
+
+			// Handle aliased paths
+			for (const [alias, aliasPath] of Object.entries(aliases)) {
+				// Check if the import starts with this alias
+				if (importPath === alias || importPath.startsWith(`${alias}/`)) {
+					// Replace the alias with the actual path
+					const relativePath = importPath === alias ? "" : importPath.slice(alias.length + 1); // +1 for the slash
+
+					// Convert the aliasPath to an absolute path
+					let absoluteAliasPath = aliasPath;
+					if (!path.isAbsolute(absoluteAliasPath)) {
+						absoluteAliasPath = path.resolve(projectRoot, aliasPath);
+					}
+
+					return path.join(absoluteAliasPath, relativePath);
+				}
+			}
+
+			return null;
+		}
+
+		// Find the file extension by checking which file exists
+		function findActualFile(basePath) {
+			if (!basePath) return null;
+
+			try {
+				// Get the directory and base name
+				const dir = path.dirname(basePath);
+				const base = path.basename(basePath);
+
+				// If the directory doesn't exist, return early
+				if (!fs.existsSync(dir)) {
+					return null;
+				}
+
+				// Read all files in the directory
+				const files = fs.readdirSync(dir);
+
+				// Look for files that match our base name plus any extension
+				for (const file of files) {
+					const fileParts = path.parse(file);
+
+					// If we find a file that matches our base name
+					if (fileParts.name === base) {
+						// Handle TypeScript to JavaScript conversion
+						if (tsToJs && fileParts.ext === ".ts") {
+							return {
+								actualPath: path.join(dir, file),
+								importExt: ".js", // Import as .js even though it's a .ts file
+							};
+						}
+
+						// Otherwise use the actual extension
+						return {
+							actualPath: path.join(dir, file),
+							importExt: fileParts.ext,
+						};
+					}
+				}
+			} catch (error) {
+				// If there's an error checking file existence, return null
+				console.error("Error checking files:", error);
+			}
+
+			return null;
+		}
+
+		return {
+			ImportDeclaration(node) {
+				const source = node.source.value;
+
+				// Check if it's a relative import or matches a manually specified include path
+				const isRelativeImport = source.startsWith("./") || source.startsWith("../");
+				const isAliasedPath = Object.keys(aliases).some(alias => source === alias || source.startsWith(`${alias}/`));
+				const isIncludedPath = includePaths.some(pattern => source.startsWith(pattern));
+
+				// Skip if it's not a relative import, aliased path, or included path
+				if (!isRelativeImport && !isAliasedPath && !isIncludedPath) {
+					return;
+				}
+
+				// Skip ignored paths
+				if (ignorePaths.some(path => source.includes(path))) {
+					return;
+				}
+
+				// Check if the import already has an extension
+				const hasExtension = path.extname(source) !== "";
+				if (!hasExtension) {
+					// Get current file path to resolve the import
+					const currentFilePath = context.getFilename();
+
+					// Try to determine the correct file by checking what exists
+					const resolvedPath = resolveImportPath(source, currentFilePath);
+					const fileInfo = findActualFile(resolvedPath);
+
+					context.report({
+						node,
+						messageId: fileInfo ? "missingExtension" : "noFileFound",
+						fix(fixer) {
+							// Only provide a fix if we found a file
+							if (fileInfo) {
+								// Replace the string literal with one that includes the extension
+								return fixer.replaceText(node.source, `"${source}${fileInfo.importExt}"`);
+							}
+
+							// Otherwise, don't try to fix
+							return null;
+						},
+					});
+				}
+			},
+		};
+	},
+};

eslint.config.mjs

@@ -6,6 +6,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
+import enforceExt from "./eslint-rules/enforce-extensions.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -41,6 +42,11 @@ export default [
 	{
 		plugins: {
 			"@typescript-eslint": typescriptEslint,
+			"local": {
+				rules: {
+					"enforce-ext": enforceExt,
+				},
+			},
 		},
 
 		languageOptions: {
@@ -72,6 +78,15 @@ export default [
 
 			"object-shorthand": ["error", "always"],
 			"svelte/no-at-html-tags": "off",
+			"local/enforce-ext": [
+				"error",
+				{
+					includePaths: ["$lib/"],
+					aliases: {
+						$lib: "src/lib",
+					},
+				},
+			],
 		},
 	},
 	{

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import type { Conversation } from "$lib/types.js";
 
 	import { tick } from "svelte";
 

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { Conversation, ModelWithTokenizer } from "$lib/types";
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 
 	import { createEventDispatcher } from "svelte";
 
-	import { models } from "$lib/stores/models";
+	import { models } from "$lib/stores/models.js";
 	import Avatar from "../Avatar.svelte";
 	import IconCog from "~icons/carbon/settings";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import type { Conversation } from "$lib/types.js";
 
-	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generationConfigSettings";
-	import { customMaxTokens } from "./inferencePlaygroundUtils";
+	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generationConfigSettings.js";
+	import { customMaxTokens } from "./inferencePlaygroundUtils.js";
 
 	export let conversation: Conversation;
 	export let classNames = "";

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { clickOutside } from "$lib/actions/click-outside";
+	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
 	import IconCross from "~icons/carbon/close";

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import type { ConversationMessage } from "$lib/types";
+	import type { ConversationMessage } from "$lib/types.js";
 
 	export let message: ConversationMessage;
 	export let loading: boolean = false;

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { Conversation, ModelWithTokenizer } from "$lib/types";
+	import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 
-	import { models } from "$lib/stores/models";
+	import { models } from "$lib/stores/models.js";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import Avatar from "../Avatar.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
-	import { defaultSystemMessage } from "./inferencePlaygroundUtils";
+	import { defaultSystemMessage } from "./inferencePlaygroundUtils.js";
 
 	export let conversation: Conversation;
 

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import type { Conversation } from "$lib/types.js";
 
 	import { createEventDispatcher, onMount, tick } from "svelte";
 
-	import { models } from "$lib/stores/models";
-	import { getTrending } from "$lib/utils/model";
-	import fuzzysearch from "$lib/utils/search";
+	import { models } from "$lib/stores/models.js";
+	import { getTrending } from "$lib/utils/model.js";
+	import fuzzysearch from "$lib/utils/search.js";
 	import IconSearch from "~icons/carbon/search";
 	import IconStar from "~icons/carbon/star";
 

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/types";
+	import type { Conversation } from "$lib/types.js";
 
-	import { randomPick } from "$lib/utils/array";
-	import { cn } from "$lib/utils/cn";
+	import { randomPick } from "$lib/utils/array.js";
+	import { cn } from "$lib/utils/cn.js";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import IconProvider from "../Icons/IconProvider.svelte";

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -1,4 +1,4 @@
-import type { Conversation, ModelWithTokenizer } from "$lib/types";
+import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
 import type { InferenceSnippet } from "@huggingface/tasks";
 import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
 

src/lib/components/Prompts.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-	import { clickOutside } from "$lib/actions/click-outside";
+	import { clickOutside } from "$lib/actions/click-outside.js";
 	import { writable } from "svelte/store";
 	import IconCross from "~icons/carbon/close";
 

src/lib/types.ts

@@ -1,4 +1,4 @@
-import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
+import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings.js";
 import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 
 export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };

src/lib/utils/effect.ts

@@ -1,7 +1,7 @@
 import type { Stores, StoresValues } from "svelte/store";
 import { derived } from "svelte/store";
-import { safeOnDestroy } from "./lifecycle";
-import { noop } from "./noop";
+import { safeOnDestroy } from "./lifecycle.js";
+import { noop } from "./noop.js";
 
 type EffectOptions = {
 	/**

src/lib/utils/model.ts

@@ -1,4 +1,4 @@
-import type { ModelWithTokenizer } from "$lib/types";
+import type { ModelWithTokenizer } from "$lib/types.js";
 
 export function getTrending(models: ModelWithTokenizer[], limit = 5) {
 	return models.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, limit);

src/routes/+page.ts

@@ -1,5 +1,5 @@
-import type { ModelWithTokenizer } from "$lib/types";
-import type { PageLoad } from "./$types";
+import type { ModelWithTokenizer } from "$lib/types.js";
+import type { PageLoad } from "./$types.js";
 
 export const load: PageLoad = async ({ fetch }) => {
 	const res = await fetch("/api/models");

src/routes/api/models/+server.ts

@@ -1,6 +1,6 @@
-import type { Model, ModelWithTokenizer } from "$lib/types";
+import type { Model, ModelWithTokenizer } from "$lib/types.js";
 import { json } from "@sveltejs/kit";
-import type { RequestHandler } from "./$types";
+import type { RequestHandler } from "./$types.js";
 import { dev } from "$app/environment";
 
 let cache: ModelWithTokenizer[] | undefined;