refactor: switch from .ts to .js with jsdoc (#655)

* refactor: move types to .d.ts files in preparation of ts-to-jsdoc

* wip: convert ts to jsdoc

* wip: ts to jsdoc

* wip: ts to jsdoc conversion

* wip: finished jsdoc conversion, renamed .d.ts files to avoid collisions, added .js ext to imports

* test: add small wait for inspector icon to become visible to avoid flakiness in tests

* wip: move internal types into src/types, improve index.d.ts

* wip: move unit tests out of src dir and update filters

* chore: switch to eslint-plugin-n to get rid of some errors

* refactor: update jsdoc syntax (#656)

---------

Co-authored-by: Bjorn Lu <[email protected]>

Author: dominikg

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
 	root: true,
 	extends: [
 		'eslint:recommended',
-		'plugin:node/recommended',
+		'plugin:n/recommended',
 		'plugin:@typescript-eslint/eslint-recommended',
 		'prettier'
 	],
@@ -24,42 +24,40 @@ module.exports = {
 	rules: {
 		'no-console': 'off',
 		'no-debugger': 'error',
-		'node/no-missing-import': [
+		'n/no-missing-import': [
 			'error',
 			{
-				allowModules: ['types', 'estree', 'testUtils', '@sveltejs/vite-plugin-svelte'],
-				tryExtensions: ['.ts', '.js', '.jsx', '.tsx']
+				allowModules: ['types', 'estree', 'testUtils', '@sveltejs/vite-plugin-svelte', 'svelte']
 			}
 		],
-		'node/no-missing-require': [
+		'n/no-missing-require': [
 			'error',
 			{
 				// for try-catching yarn pnp
-				allowModules: ['pnpapi'],
-				tryExtensions: ['.ts', '.js', '.jsx', '.tsx']
+				allowModules: ['pnpapi']
 			}
 		],
 
-		'node/no-extraneous-import': [
+		'n/no-extraneous-import': [
 			'error',
 			{
 				allowModules: ['vite']
 			}
 		],
-		'node/no-extraneous-require': [
+		'n/no-extraneous-require': [
 			'error',
 			{
 				allowModules: ['vite']
 			}
 		],
-		'node/no-deprecated-api': 'off',
+		'n/no-deprecated-api': 'off',
 		'no-restricted-properties': [
 			'error',
 			{ property: 'substr', message: 'Use .slice instead of .substr.' }
 		],
-		'node/no-unpublished-import': 'off',
-		'node/no-unpublished-require': 'off',
-		'node/no-unsupported-features/es-syntax': 'off',
+		'n/no-unpublished-import': 'off',
+		'n/no-unpublished-require': 'off',
+		'n/no-unsupported-features/es-syntax': 'off',
 		'no-process-exit': 'off'
 	},
 	overrides: [
@@ -84,8 +82,8 @@ module.exports = {
 		{
 			files: ['packages/e2e-tests/**', 'packages/playground/**'],
 			rules: {
-				'node/no-extraneous-import': 'off',
-				'node/no-extraneous-require': 'off',
+				'n/no-extraneous-import': 'off',
+				'n/no-extraneous-require': 'off',
 				'no-unused-vars': 'off'
 			},
 			env: {
@@ -96,7 +94,7 @@ module.exports = {
 			files: ['packages/e2e-tests/**/vite.config.js', 'packages/playground/**'],
 			rules: {
 				'no-unused-vars': 'off',
-				'node/no-missing-require': 'off'
+				'n/no-missing-require': 'off'
 			}
 		},
 		{
@@ -112,7 +110,7 @@ module.exports = {
 				'import/no-duplicates': 'off',
 				'import/no-mutable-exports': 'off',
 				'import/no-unresolved': 'off',
-				'node/no-missing-import': 'off' // doesn't work with typescript's "import from 'src/foo.js'" for src/foo.ts
+				'n/no-missing-import': 'off' // doesn't work with typescript's "import from 'src/foo.js'" for src/foo.ts
 			}
 		},
 		{
@@ -124,10 +122,10 @@ module.exports = {
 				'no-unused-labels': 'off',
 				'no-console': 'off',
 				'padded-blocks': 'off',
-				'node/no-missing-import': 'off',
-				'node/no-extraneous-require': 'off',
+				'n/no-missing-import': 'off',
+				'n/no-extraneous-require': 'off',
 				'import/no-unresolved': 'off',
-				'node/no-missing-require': 'off'
+				'n/no-missing-require': 'off'
 			}
 		},
 		{
@@ -138,10 +136,10 @@ module.exports = {
 				'no-unused-labels': 'off',
 				'no-console': 'off',
 				'padded-blocks': 'off',
-				'node/no-missing-import': 'off',
-				'node/no-extraneous-require': 'off',
+				'n/no-missing-import': 'off',
+				'n/no-extraneous-require': 'off',
 				'import/no-unresolved': 'off',
-				'node/no-missing-require': 'off'
+				'n/no-missing-require': 'off'
 			}
 		},
 		{
@@ -152,18 +150,24 @@ module.exports = {
 				browser: true
 			},
 			rules: {
-				'node/no-extraneous-import': 'off',
-				'node/no-missing-import': 'off',
-				'node/no-unused-import': 'off'
+				'n/no-extraneous-import': 'off',
+				'n/no-missing-import': 'off',
+				'n/no-unused-import': 'off'
 			}
 		},
 		{
 			files: ['packages/playground/kit-demo-app/src/**'],
 			rules: {
 				/* required because $app and $lib are not known */
-				'node/no-missing-import': 'off',
+				'n/no-missing-import': 'off',
 				/* required because URL wasn't in node8 */
-				'node/no-unsupported-features/node-builtins': 'off'
+				'n/no-unsupported-features/node-builtins': 'off'
+			}
+		},
+		{
+			files: ['**/*.d.ts'],
+			rules: {
+				'no-unused-vars': 'off'
 			}
 		}
 	]

package.json

@@ -31,7 +31,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-svelte3": "^4.0.0",
     "execa": "^7.1.1",

packages/e2e-tests/hmr/src/components/DynamicImport.svelte

@@ -1,5 +1,4 @@
 <script>
-	// eslint-disable-next-line node/no-missing-import
 	import asset from '/src/assets/dynamic.png';
 	const importedAsset = asset;
 	const label = 'dynamic-import';

packages/e2e-tests/hmr/src/components/StaticImport.svelte

@@ -1,5 +1,4 @@
 <script>
-	// eslint-disable-next-line node/no-missing-import
 	import asset from '/src/assets/static.png';
 	const importedAsset = asset;
 	const label = 'static-import';

packages/e2e-tests/inspector-kit/vite.config.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line node/no-missing-import
 import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */

packages/e2e-tests/kit-node/src/routes/+page.js

@@ -1,6 +1,5 @@
 /** @type {import('./$types').PageLoad} */
 export async function load() {
-	// eslint-disable-next-line node/no-unsupported-features/es-builtins
 	if (globalThis?.window) {
 		// delay load on client so we can test hydration with playwright
 		return new Promise((resolve) =>

packages/e2e-tests/kit-node/src/routes/+page.svelte

@@ -1,9 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { addMessages, init, _ } from 'svelte-i18n';
-	// eslint-disable-next-line node/no-missing-import
 	import Counter from '$lib/Counter.svelte';
-	// eslint-disable-next-line node/no-missing-import
 	import Child from '$lib/Child.svelte';
 	import { setSomeContext } from 'e2e-test-dep-svelte-api-only';
 	export let data = {};

packages/e2e-tests/kit-node/vite.config.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line node/no-missing-import
 import { sveltekit } from '@sveltejs/kit/vite';
 import { transformValidation } from 'e2e-test-dep-vite-plugins';
 

packages/e2e-tests/preprocess-with-vite/src/index.ts

@@ -1,5 +1,5 @@
 import App from './App.svelte';
-import { Hello } from './types';
+import { Hello } from './types.js';
 
 const hello: Hello = 'Hello';
 

packages/e2e-tests/svelte-preprocess/src/lib/multifile/MultiFile.ts

@@ -1,3 +1,2 @@
-// eslint-disable-next-line prefer-const
 import './someother.css';
 export const foo: string = 'green';

packages/e2e-tests/testUtils.ts

@@ -16,9 +16,9 @@ import {
 	browserLogs,
 	e2eServer,
 	waitForViteConnect
-} from './vitestSetup';
+} from './vitestSetup.js';
 
-export * from './vitestSetup';
+export * from './vitestSetup.js';
 
 export const hmrUpdateTimeout = 10000;
 

packages/e2e-tests/ts-type-import/src/index.ts

@@ -1,5 +1,5 @@
-import type { Test } from './lib';
-import { test } from './lib';
+import type { Test } from './lib.js';
+import { test } from './lib.js';
 import App from './App.svelte';
 
 main();

packages/e2e-tests/vite-ssr-esm/server.js

@@ -20,7 +20,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 
 	const manifest = isProd
 		? // @ts-ignore
-		  // eslint-disable-next-line node/no-missing-require
+
 		  JSON.parse(fs.readFileSync(resolve('dist/client/ssr-manifest.json'), 'utf-8'))
 		: {};
 
@@ -103,6 +103,7 @@ createServer().then(({ app }) => {
 				console.log('ssr server closed');
 			});
 		} finally {
+			// eslint-disable-next-line n/no-process-exit
 			process.exit(0);
 		}
 	};

packages/e2e-tests/vite-ssr-esm/src/App.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Foo from './components/Foo.svelte';
 	import logo from './assets/logo.png';
-	// eslint-disable-next-line node/no-missing-import
+
 	import { esm } from 'e2e-test-dep-esm-only';
 	export let world = 'world'; // edit world and save to see hmr update
 	export let foo = 'foo';

packages/e2e-tests/vite-ssr-esm/src/entry-client.js

@@ -1,5 +1,5 @@
 import App from './App.svelte';
-// eslint-disable-next-line node/no-missing-import
+
 import { esm } from 'e2e-test-dep-esm-only';
 console.log(esm());
 

packages/e2e-tests/vite-ssr-esm/src/entry-server.js

@@ -1,5 +1,5 @@
 import App from './App.svelte';
-// eslint-disable-next-line node/no-missing-import
+
 import { esm } from 'e2e-test-dep-esm-only';
 import decamelize from 'decamelize';
 

packages/e2e-tests/vite-ssr/server.js

@@ -17,7 +17,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 
 	const manifest = isProd
 		? // @ts-ignore
-		  // eslint-disable-next-line node/no-missing-require
+		  // eslint-disable-next-line n/no-missing-require
 		  require('./dist/client/ssr-manifest.json')
 		: {};
 
@@ -66,7 +66,7 @@ async function createServer(root = process.cwd(), isProd = process.env.NODE_ENV
 			} else {
 				template = indexProd;
 				// @ts-ignore
-				// eslint-disable-next-line node/no-missing-require
+				// eslint-disable-next-line n/no-missing-require
 				render = require('./dist/server/entry-server.js').render;
 			}
 			const rendered = await render(req.originalUrl, manifest);
@@ -101,6 +101,7 @@ createServer().then(({ app }) => {
 				console.log('ssr server closed');
 			});
 		} finally {
+			// eslint-disable-next-line n/no-process-exit
 			process.exit(0);
 		}
 	};

packages/e2e-tests/vite-ssr/src/App.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Foo from './components/Foo.svelte';
 	import logo from './assets/logo.png';
-	// eslint-disable-next-line node/no-missing-import
+
 	import { esm } from 'e2e-test-dep-esm-only';
 	export let world = 'world'; // edit world and save to see hmr update
 	export let foo = 'foo';

packages/e2e-tests/vite-ssr/src/entry-client.js

@@ -1,5 +1,5 @@
 import App from './App.svelte';
-// eslint-disable-next-line node/no-missing-import
+
 import { esm } from 'e2e-test-dep-esm-only';
 console.log(esm());
 

packages/e2e-tests/vite-ssr/src/entry-server.js

@@ -1,5 +1,5 @@
 import App from './App.svelte';
-// eslint-disable-next-line node/no-missing-import
+
 import { esm } from 'e2e-test-dep-esm-only';
 console.log(esm());
 

packages/e2e-tests/vite-ssr/vite.config.js

@@ -1,7 +1,6 @@
 const { defineConfig } = require('vite');
 
 module.exports = defineConfig(async ({ command, mode }) => {
-	//eslint-disable-next-line node/no-missing-import
 	const { svelte } = await import('@sveltejs/vite-plugin-svelte');
 	return {
 		plugins: [

packages/e2e-tests/vitestSetup.ts

@@ -222,7 +222,6 @@ export async function waitForViteConnect(page: Page, timeoutMS = 5000) {
 	let timerId;
 	let pageConsoleListener;
 	const timeoutPromise = new Promise(
-		// eslint-disable-next-line no-unused-vars
 		(_, reject) =>
 			(timerId = setTimeout(() => {
 				reject(`vite client not connected after ${timeoutMS}ms. url: ${page.url()}`);

packages/playground/big-component-library-kit/vite.config.js

@@ -1,4 +1,3 @@
-//eslint-disable-next-line node/no-missing-import
 import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */

packages/playground/big-component-library-vite-ssr/server.js

@@ -46,7 +46,7 @@ app.use('*', async (req, res) => {
 			render = (await vite.ssrLoadModule('/src/entry-server.js')).render;
 		} else {
 			template = templateHtml;
-			//eslint-disable-next-line node/no-missing-import
+			//eslint-disable-next-line n/no-missing-import
 			render = (await import('./dist/server/entry-server.js')).render;
 		}
 

packages/playground/kit-demo-app/vite.config.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line node/no-missing-import
 import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */

packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte

@@ -1,7 +1,7 @@
 <script>
 	// do not use TS here so that this component works in non-ts projects too
 	import { onMount } from 'svelte';
-	// eslint-disable-next-line node/no-missing-import
+
 	import options from 'virtual:svelte-inspector-options';
 	const toggle_combo = options.toggleKeyCombo?.toLowerCase().split('-');
 	const nav_keys = Object.values(options.navKeys).map((k) => k.toLowerCase());

packages/vite-plugin-svelte-inspector/src/runtime/load-inspector.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line node/no-missing-import
+// eslint-disable-next-line n/no-missing-import
 import Inspector from 'virtual:svelte-inspector-path:Inspector.svelte';
 
 function create_inspector_host() {

packages/vite-plugin-svelte/src/utils/__tests__/compile.spec.ts renamed to packages/vite-plugin-svelte/__tests__/compile.spec.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
-import { createCompileSvelte } from '../compile';
-import { ResolvedOptions } from '../options';
-const options: ResolvedOptions = {
+import { createCompileSvelte } from '../src/utils/compile.js';
+/** @type {import('../../types/options.d.ts').ResolvedOptions} */
+const options = {
 	compilerOptions: {
 		dev: false,
 		format: 'esm',
@@ -32,7 +32,7 @@ describe('createCompileSvelte', () => {
 			const output = await compileSvelte(
 				{
 					cssId: 'svelte-xxxxx',
-					query: undefined,
+					query: {},
 					raw: false,
 					ssr: false,
 					timestamp: Date.now(),