feat(repl): REPL overhaul (#470)

* Push

* Add changeset

* Fix bugs related to deleting

* Tweak theme

* Use neocodemirror

* Update stuff, use neocodemirror

* Remove console logs

.changeset/pre.json

@@ -0,0 +1,11 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@sveltejs/repl": "0.4.0",
+    "@sveltejs/site-kit": "2.1.4",
+    "hn.svelte.dev": "0.0.1",
+    "svelte.dev": "1.0.3"
+  },
+  "changesets": []
+}

.changeset/wise-vans-smoke.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/repl': minor
+---
+
+Overhaul

package.json

@@ -2,7 +2,7 @@
 	"name": "sites",
 	"version": "1.0.0",
 	"devDependencies": {
-		"@changesets/cli": "^2.26.0"
+		"@changesets/cli": "^2.26.1"
 	},
 	"scripts": {
 		"package": "pnpm -r package",

packages/repl/jsconfig.json

@@ -1,14 +1,14 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"],
-			"@sveltejs/repl": ["src/lib"],
-			"@sveltejs/site-kit": ["../../packages/site-kit/src/lib"],
-			"@sveltejs/site-kit/*": ["../../packages/site-kit/src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"noImplicitAny": true
+	}
 }

packages/repl/package.json

@@ -3,62 +3,69 @@
 	"version": "0.4.0",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
-		"package": "svelte-package",
-		"watch": "svelte-package --watch",
+		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+		"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"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^3.54.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.15.6",
+		"@fontsource/fira-mono": "^4.5.10",
+		"@playwright/test": "^1.33.0",
+		"@sveltejs/adapter-auto": "^2.0.1",
+		"@sveltejs/kit": "^1.15.9",
 		"@sveltejs/package": "^2.0.2",
-		"eslint": "^8.38.0",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.7",
-		"prettier-plugin-svelte": "^2.10.0",
+		"@types/marked": "^4.0.8",
+		"publint": "^0.1.11",
 		"svelte": "^3.58.0",
-		"svelte2tsx": "^0.6.11",
+		"svelte-check": "^3.2.0",
+		"tslib": "^2.5.0",
 		"typescript": "^5.0.4",
-		"vite": "^4.2.1"
-	},
-	"type": "module",
-	"peerDependencies": {
-		"svelte": "^3.50.0"
+		"vite": "^4.3.3"
 	},
 	"dependencies": {
-		"@rollup/browser": "^3.20.4",
-		"@sveltejs/site-kit": "5.0.1",
+		"@codemirror/autocomplete": "^6.6.0",
+		"@codemirror/commands": "^6.2.3",
+		"@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.0",
+		"@jridgewell/sourcemap-codec": "^1.4.15",
+		"@lezer/highlight": "^1.1.4",
+		"@neocodemirror/svelte": "0.0.5",
+		"@replit/codemirror-lang-svelte": "^6.0.0",
+		"@rich_harris/svelte-split-pane": "^1.1.0",
+		"@rollup/browser": "^3.21.1",
+		"@sveltejs/site-kit": "5.0.4",
 		"acorn": "^8.8.2",
-		"codemirror": "5.65.12",
+		"codemirror": "^6.0.1",
 		"esm-env": "^1.0.0",
 		"estree-walker": "^3.0.3",
+		"marked": "^4.3.0",
 		"resolve.exports": "^2.0.2",
-		"svelte-json-tree": "^1.0.0",
-		"yootils": "^0.3.1"
-	},
-	"license": "MIT",
-	"publishConfig": {
-		"access": "public"
-	},
-	"exports": {
-		"./package.json": "./package.json",
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		}
+		"svelte-json-tree": "^1.0.0"
 	},
-	"typesVersions": {
-		">4.0": {
-			"*": [
-				"./dist/index.d.ts"
-			]
-		}
-	},
-	"files": [
-		"dist"
-	]
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
 }

packages/repl/src/lib/Bundler.js

@@ -5,44 +5,61 @@ const workers = new Map();
 let uid = 1;
 
 export default class Bundler {
-	constructor({ packagesUrl, svelteUrl, onstatus }) {
-		const hash = `${packagesUrl}:${svelteUrl}`;
+	/** @type {Worker} */
+	worker;
+
+	/** @param {{ packages_url: string; svelte_url: string; onstatus: (val: string | null) => void}} param0 */
+	constructor({ packages_url, svelte_url, onstatus }) {
+		const hash = `${packages_url}:${svelte_url}`;
 
 		if (!workers.has(hash)) {
 			const worker = new Worker();
-			worker.postMessage({ type: 'init', packagesUrl, svelteUrl });
+			worker.postMessage({ type: 'init', packages_url, svelte_url });
 			workers.set(hash, worker);
 		}
 
 		this.worker = workers.get(hash);
 
 		this.handlers = new Map();
 
-		this.worker.addEventListener('message', (event) => {
-			const handler = this.handlers.get(event.data.uid);
+		this.worker.addEventListener(
+			'message',
+			/**
+			 *
+			 * @param {MessageEvent<import('./workers/workers').BundleMessageData>} event
+			 * @returns
+			 */
+			(event) => {
+				const handler = this.handlers.get(event.data.uid);
 
-			if (handler) {
-				// if no handler, was meant for a different REPL
-				if (event.data.type === 'status') {
-					onstatus(event.data.message);
-					return;
-				}
+				if (handler) {
+					// if no handler, was meant for a different REPL
+					if (event.data.type === 'status') {
+						onstatus(event.data.message);
+						return;
+					}
 
-				onstatus(null);
-				handler(event.data);
-				this.handlers.delete(event.data.uid);
+					onstatus(null);
+					handler(event.data);
+					this.handlers.delete(event.data.uid);
+				}
 			}
-		});
+		);
 	}
 
-	bundle(components) {
+	/**
+	 *
+	 * @param {import('./types').File[]} files
+	 * @returns
+	 */
+	bundle(files) {
 		return new Promise((fulfil) => {
 			this.handlers.set(uid, fulfil);
 
 			this.worker.postMessage({
 				uid,
 				type: 'bundle',
-				components
+				files,
 			});
 
 			uid += 1;

packages/repl/src/lib/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let checked;
+	export let checked = false;
 </script>
 
 <input type="checkbox" bind:checked />