fix(repl): Minor fixes (#478)

* Update deps

* Update deps, rename capitalicase

* Add changeset

.changeset/fresh-countries-hear.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': patch
+---
+
+Minor fixes

packages/repl/package.json

@@ -1,16 +1,13 @@
 {
 	"name": "@sveltejs/repl",
 	"version": "0.5.0-next.2",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"watch": "svelte-package --watch",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
 	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
 	"exports": {
 		"./package.json": "./package.json",
 		".": {
@@ -29,50 +26,56 @@
 	"files": [
 		"dist"
 	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"watch": "svelte-package --watch",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+	},
 	"peerDependencies": {
 		"svelte": "^3.54.0"
 	},
 	"devDependencies": {
 		"@fontsource/fira-mono": "^4.5.10",
-		"@playwright/test": "^1.33.0",
 		"@sveltejs/adapter-auto": "^2.0.1",
-		"@sveltejs/kit": "^1.15.10",
+		"@sveltejs/kit": "^1.16.3",
 		"@sveltejs/package": "^2.0.2",
 		"@types/marked": "^4.3.0",
 		"publint": "^0.1.11",
-		"svelte": "^3.58.0",
-		"svelte-check": "^3.2.0",
+		"svelte": "^3.59.1",
+		"svelte-check": "^3.3.2",
 		"tslib": "^2.5.0",
 		"typescript": "^5.0.4",
-		"vite": "^4.3.4"
+		"vite": "^4.3.5"
 	},
 	"dependencies": {
-		"@codemirror/autocomplete": "^6.6.0",
-		"@codemirror/commands": "^6.2.3",
+		"@codemirror/autocomplete": "^6.7.0",
+		"@codemirror/commands": "^6.2.4",
 		"@codemirror/lang-css": "^6.2.0",
 		"@codemirror/lang-javascript": "^6.1.7",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-markdown": "^6.1.1",
 		"@codemirror/language": "^6.6.0",
 		"@codemirror/lint": "^6.2.1",
 		"@codemirror/state": "^6.2.0",
-		"@codemirror/view": "^6.10.1",
+		"@codemirror/view": "^6.11.1",
 		"@jridgewell/sourcemap-codec": "^1.4.15",
 		"@lezer/highlight": "^1.1.4",
 		"@neocodemirror/svelte": "0.0.8",
 		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@rich_harris/svelte-split-pane": "^1.1.0",
-		"@rollup/browser": "^3.21.3",
+		"@rollup/browser": "^3.21.6",
 		"@sveltejs/site-kit": "5.0.4",
 		"acorn": "^8.8.2",
 		"codemirror": "^6.0.1",
 		"esm-env": "^1.0.0",
 		"estree-walker": "^3.0.3",
-		"marked": "^5.0.0",
+		"marked": "^5.0.2",
 		"resolve.exports": "^2.0.2",
 		"svelte-json-tree": "^1.0.0"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
+	}
 }

packages/repl/src/lib/Input/ModuleEditor.svelte

@@ -30,7 +30,7 @@
 		}
 	}
 
-	$: diagnostics =
+	$: diagnostics = /** @type {import('@codemirror/lint').Diagnostics[]} */ (
 		$selected && error_file === get_full_filename($selected)
 			? [
 					...(error
@@ -50,7 +50,8 @@
 						message: warning.message
 					}))
 			  ]
-			: [];
+			: []
+	);
 </script>
 
 <div class="editor-wrapper">

packages/repl/src/lib/Repl.svelte

@@ -1,12 +1,12 @@
 <script>
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import { BROWSER } from 'esm-env';
-	import { createEventDispatcher, tick } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 	import Bundler from './Bundler';
+	import ComponentSelector from './Input/ComponentSelector.svelte';
+	import ModuleEditor from './Input/ModuleEditor.svelte';
 	import InputOutputToggle from './InputOutputToggle.svelte';
-	import ComponentSelector from './input/ComponentSelector.svelte';
-	import ModuleEditor from './input/ModuleEditor.svelte';
-	import Output from './output/Output.svelte';
+	import Output from './Output/Output.svelte';
 	import {
 		EDITOR_STATE_MAP,
 		bundle,
@@ -106,7 +106,7 @@
 	const dispatch = createEventDispatcher();
 
 	$: if ($output && $selected) {
-		$output?.update($selected, $compile_options);
+		$output?.update?.($selected, $compile_options);
 	}
 
 	$: mobile = width < 540;
@@ -149,10 +149,6 @@
 		  })
 		: null;
 
-	$: if (output && $selected) {
-		$output?.update($selected, $compile_options);
-	}
-
 	/**
 	 * @param {BeforeUnloadEvent} event
 	 */

packages/repl/src/lib/types.d.ts

@@ -55,5 +55,5 @@ export type ReplState = {
 	cursor_pos: number;
 	toggleable: boolean;
 	module_editor: import('./CodeMirror.svelte').default | null;
-	output: import('./output/Output.svelte').default | null;
+	output: import('./Output/Output.svelte').default | null;
 };

packages/repl/src/lib/workers/bundler/plugins/commonjs.js

@@ -16,21 +16,24 @@ export default {
 		try {
 			const ast = parse(code, {
 				// for some reason this hangs for some code if you use 'latest'. change with caution
-				ecmaVersion: 'latest',
+				ecmaVersion: 'latest'
 			});
 
+			/** @type {string[]}  */
 			const requires = [];
 
+			// @ts-ignore
 			walk(ast, {
 				enter: (node) => {
+					// @ts-ignore
 					if (node.type === 'CallExpression' && node.callee.name === 'require') {
 						if (node.arguments.length !== 1) return;
 						const arg = node.arguments[0];
 						if (arg.type !== 'Literal' || typeof arg.value !== 'string') return;
 
 						requires.push(arg.value);
 					}
-				},
+				}
 			});
 
 			const imports = requires.map((id, i) => `import __repl_${i} from '${id}';`).join('\n');
@@ -44,15 +47,15 @@ export default {
 				require,
 				`const exports = {}; const module = { exports };`,
 				code,
-				`export default module.exports;`,
+				`export default module.exports;`
 			].join('\n\n');
 
 			return {
 				code: transformed,
-				map: null,
+				map: null
 			};
 		} catch (err) {
 			return null;
 		}
-	},
+	}
 };

packages/repl/src/lib/workers/bundler/plugins/glsl.js

@@ -6,7 +6,7 @@ export default {
 
 		return {
 			code: `export default ${JSON.stringify(code)};`,
-			map: null,
+			map: null
 		};
-	},
+	}
 };

packages/repl/src/lib/workers/bundler/plugins/json.js

@@ -6,7 +6,7 @@ export default {
 
 		return {
 			code: `export default ${code};`,
-			map: null,
+			map: null
 		};
-	},
+	}
 };

packages/repl/src/lib/workers/bundler/plugins/replace.js

@@ -1,7 +1,9 @@
+/** @param {string} str  */
 function escape(str) {
 	return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
 }
 
+/** @param {unknown} functionOrValue  */
 function ensureFunction(functionOrValue) {
 	if (typeof functionOrValue === 'function') {
 		return functionOrValue;
@@ -11,17 +13,29 @@ function ensureFunction(functionOrValue) {
 	};
 }
 
+/**
+ * @param {string} a
+ * @param {string} b
+ */
 function longest(a, b) {
 	return b.length - a.length;
 }
 
+/** @param {Record<string, unknown>} object */
 function mapToFunctions(object) {
-	return Object.keys(object).reduce(function (functions, key) {
-		functions[key] = ensureFunction(object[key]);
-		return functions;
-	}, {});
+	return Object.keys(object).reduce(
+		/** @param {Record<string, Function>} functions */ function (functions, key) {
+			functions[key] = ensureFunction(object[key]);
+			return functions;
+		},
+		{}
+	);
 }
 
+/**
+ * @param {Record<string, unknown>} options
+ * @returns {import('@rollup/browser').Plugin}
+ */
 function replace(options) {
 	const functionValues = mapToFunctions(options);
 	const keys = Object.keys(functionValues).sort(longest).map(escape);
@@ -49,9 +63,9 @@ function replace(options) {
 
 			return {
 				code,
-				map: null,
+				map: null
 			};
-		},
+		}
 	};
 }