Revert "Add node ci for sveltekit (#404)" (#413)

This reverts commit 54857fe.

kit/.prettierrc

@@ -3,5 +3,6 @@
 	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

kit/package.json

@@ -8,8 +8,8 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check --plugin prettier-plugin-svelte .",
-		"format": "prettier --write --plugin prettier-plugin-svelte ."
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
@@ -18,8 +18,6 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/forms": "^0.5.6",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/js-yaml": "^4.0.6",
-		"@types/node": "^20.6.5",
 		"@typescript-eslint/eslint-plugin": "^6.7.2",
 		"autoprefixer": "^10.4.14",
 		"cheerio": "^1.0.0-rc.12",

kit/preprocess.js

@@ -364,7 +364,7 @@ export const mdsvexPreprocess = {
 			// 	content = addCourseImports(content);
 			// }
 			content = markKatex(content, markedKatex);
-			content = escapeSvelteConditionals(content);
+			content = escapeSvelteConditionals(content)
 			const processed = await _mdsvexPreprocess.markup({ content, filename });
 			processed.code = renderKatex(processed.code, markedKatex);
 			processed.code = headingWithAnchorLink(processed.code);
@@ -461,53 +461,44 @@ let hfDocBodyEnd = false;
 function escapeSvelteSpecialChars() {
 	return transform;
 
-	function isWithinDocBody(node) {
-		if (node.value === "<!--HF DOCBUILD BODY START-->") {
-			hfDocBodyStart = true;
-			hfDocBodyEnd = false;
-		}
-		if (node.value === "<!--HF DOCBUILD BODY END-->") {
-			hfDocBodyEnd = true;
-		}
-		return hfDocBodyStart && !hfDocBodyEnd;
-	}
-
 	function transform(tree) {
 		visit(tree, "text", onText);
 		visit(tree, "html", onHtml);
 	}
 
 	function onText(node) {
-		if (!isWithinDocBody(node)) {
-			return;
-		}
 		node.value = node.value.replaceAll("{", "&#123;");
 		node.value = node.value.replaceAll("<", "&#60;");
 	}
 
 	function onHtml(node) {
-		if (!isWithinDocBody(node)) {
-			return;
+		if(node.value === "<!--HF DOCBUILD BODY START-->"){
+			hfDocBodyStart = true;
+			hfDocBodyEnd = false;
+		}
+		if(node.value === "<!--HF DOCBUILD BODY END-->"){
+			hfDocBodyEnd = true;
 		}
 		const RE_TAG_NAME = /<\/?(\w+)/;
 		const match = node.value.match(RE_TAG_NAME);
-		const REGEX_VALID_START_END_TAG = /^<(\w+)[^>]*>.*<\/\1>$/s;
 		if (match) {
 			const tagName = match[1];
 			if (!validTags.includes(tagName)) {
 				node.value = node.value.replaceAll("<", "&#60;");
-			} else if (htmlTags.includes(tagName) && REGEX_VALID_START_END_TAG.test(node.value.trim())) {
+			}else if(hfDocBodyStart && !hfDocBodyEnd && htmlTags.includes(tagName)){
+				const REGEX_VALID_START_END_TAG = /^<(\w+)[^>]*>.*<\/\1>$/s;
+				if(!REGEX_VALID_START_END_TAG.test(node.value.trim())){
+					return;
+				}
 				const $ = cheerio.load(node.value);
 				// Go through each text node in the HTML and replace "{" with "&#123;"
-				$("*")
-					.contents()
-					.each((index, element) => {
-						if (element.type === "text") {
-							element.data = element.data.replaceAll("{", "&#123;");
-						}
-					});
+				$('*').contents().each((index, element) => {
+					if (element.type === 'text') {
+						element.data = element.data.replaceAll("{", "&#123;");
+					}
+				});
 				// Update the remark HTML node with the modified HTML
-				node.value = $("body").html();
+				node.value = $('body').html();
 			}
 		}
 	}
@@ -614,12 +605,12 @@ function headingWithAnchorLink(code) {
 	});
 }
 
-function escapeSvelteConditionals(code) {
+function escapeSvelteConditionals(code){
 	const REGEX_SVELTE_IF_START = /(\{#if[^}]+\})/g;
 	const SVELTE_ELSE = "{:else}";
 	const SVELTE_IF_END = "{/if}";
-	code = code.replace(REGEX_SVELTE_IF_START, "\n\n$1\n\n");
+	code = code.replace(REGEX_SVELTE_IF_START, '\n\n$1\n\n');
 	code = code.replaceAll(SVELTE_ELSE, `\n\n${SVELTE_ELSE}\n\n`);
 	code = code.replaceAll(SVELTE_IF_END, `\n\n${SVELTE_IF_END}\n\n`);
 	return code;
-}
+}

kit/src/lib/CopyButton.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <button
-	class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none
+	class="inline-flex items-center relative text-sm focus:text-green-500  cursor-pointer focus:outline-none
 		{classNames}
 		{style === 'text' ? 'mx-0.5' : ''}
 		{style === 'button' ? 'btn' : ''}

kit/src/lib/CourseFloatingBanner.svelte

@@ -4,12 +4,12 @@
 	export let chapter: number;
 	export let notebooks: { label: string; value: string }[] = [];
 	export let classNames = "";
-	export let askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`;
+	export let askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`
 </script>
 
 <DocNotebookDropdown options={notebooks} {classNames}>
 	<svelte:fragment slot="alwaysVisible">
-		<a href={askForHelpUrl} target="_blank">
+		<a href="{askForHelpUrl}" target="_blank">
 			<img
 				alt="Ask a Question"
 				class="!m-0"

kit/src/lib/DocNotebookDropdown.svelte

@@ -25,10 +25,7 @@
 			// correct calculation of dropdownEl's width; othwrwise, the width can count in negative (empty) spaces
 			let dropdownWidth = 0;
 			for (let i = 0; i < dropdownEl.children.length; i++) {
-				const child = dropdownEl.children.item(i);
-				if (child) {
-					dropdownWidth += child.clientWidth;
-				}
+				dropdownWidth += dropdownEl.children.item(i).clientWidth;
 			}
 			const bufferMargin = 20;
 			if (h1Widht - spanWidth < dropdownWidth + bufferMargin) {
@@ -47,7 +44,7 @@
 <svelte:window on:resize={onResize} />
 
 <div class="flex space-x-1 {classNames}" bind:this={dropdownEl}>
-	<slot name="alwaysVisible" />
+	<slot name="alwaysVisible"/>
 	{#if googleColabOptions.length === 1}
 		<a href={googleColabOptions[0].value} target="_blank">
 			<img

kit/src/lib/Docstring.svelte

@@ -42,8 +42,9 @@
 	onMount(() => {
 		const { hash } = window.location;
 		hashlink = hash.substring(1);
-		const hashlinksEls = parametersElement.querySelectorAll<HTMLAnchorElement>('[href^="#"]');
-		const hashlinks = [...hashlinksEls].map((el) => el.id);
+		const hashlinksEls =
+			parametersElement.querySelectorAll<HTMLAnchorElement>('[href^="#"]');
+		const hashlinks = [...hashlinksEls].map(el => el.id);
 		const containsAnchor = hashlinks.includes(hashlink);
 		collapsed = !containsAnchor && parametersElement.clientHeight > 500;
 		onHashChange();
@@ -85,9 +86,8 @@
 			containerEl.classList.remove(...bgHighlightClass.split(" "));
 		}
 		if (hashlink === anchor) {
-			const _containerEl = document.getElementById(hashlink)?.closest(".docstring");
-			if (_containerEl) {
-				containerEl = _containerEl as HTMLElement;
+			containerEl = document.getElementById(hashlink)?.closest(".docstring");
+			if (containerEl) {
 				containerEl.classList.add(...bgHighlightClass.split(" "));
 			}
 		}

kit/src/lib/Dropdown.svelte

@@ -19,7 +19,11 @@
 	let isOpen = false;
 </script>
 
-<div class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}" bind:this={element}>
+<div
+	class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}"
+	bind:this={element}
+	selected-value={selectedValue || undefined}
+>
 	<!-- Button -->
 	<button
 		class="

kit/src/lib/DropdownEntry.svelte

@@ -18,7 +18,7 @@
 
 <li>
 	<a
-		class="flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer px-3 py-1.5 whitespace-nowrap
+		class="flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer px-3 py-1.5 whitespace-nowrap 
 			{classNames}
 			{underline ? 'hover:underline' : ''}
 			{useDeprecatedJS ? 'v2-dropdown-entry' : ''}"

kit/src/lib/DropdownMenu.svelte

@@ -18,9 +18,9 @@
 
 		if (!forceAlignement) {
 			const docWidth = document.documentElement.clientWidth;
-			const domRect = element?.getBoundingClientRect();
-			const left = domRect?.["left"] ?? 0;
-			const width = domRect?.["width"] ?? 0;
+			const domRect = element?.getBoundingClientRect() || {};
+			const left = domRect["left"] ?? 0;
+			const width = domRect["width"] ?? 0;
 			alignement = left + width > docWidth ? "right" : "left";
 		}
 

kit/src/lib/FrameworkContentBlock.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { SvelteComponent } from "svelte";
 	import type { Framework } from "./types";
 
 	import { onMount } from "svelte";
@@ -14,21 +15,19 @@
 	let containerEl: HTMLDivElement;
 	let hashLinks = new Set();
 
-	type SvelteComponent = typeof IconPytorch;
-
-	const FRAMEWORK_CONFIG: Record<Framework, { Icon: SvelteComponent; label: string }> = {
+	const FRAMEWORK_CONFIG: Record<Framework, { Icon: typeof SvelteComponent; label: string }> = {
 		pytorch: {
 			Icon: IconPytorch,
-			label: "Pytorch",
+			label: "Pytorch"
 		},
 		tensorflow: {
 			Icon: IconTensorflow,
-			label: "TensorFlow",
+			label: "TensorFlow"
 		},
 		jax: {
 			Icon: IconJax,
-			label: "JAX",
-		},
+			label: "JAX"
+		}
 	};
 	const { Icon, label } = FRAMEWORK_CONFIG[framework];
 	const localStorageKey = `hf_doc_framework_${framework}_is_hidden`;

kit/src/lib/FrameworkSwitch.svelte

@@ -14,27 +14,27 @@
 			classNames: "",
 			icon: IconPytorch,
 			name: "Pytorch",
-			group: "group1",
+			group: "group1"
 		},
 		{
 			id: "tf",
 			classNames: "",
 			icon: IconTensorflow,
 			name: "TensorFlow",
-			group: "group2",
+			group: "group2"
 		},
 		{
 			id: "stringapi",
 			classNames: "text-blue-600",
 			name: "String API",
-			group: "group1",
+			group: "group1"
 		},
 		{
 			id: "readinstruction",
 			classNames: "text-blue-600",
 			name: "ReadInstruction",
-			group: "group2",
-		},
+			group: "group2"
+		}
 	];
 
 	function changeGroup(_group: string) {

kit/src/lib/FrameworkSwitchCourse.svelte

@@ -11,14 +11,14 @@
 			id: "pt",
 			classNames: "bg-red-50 dark:bg-transparent text-red-600",
 			icon: IconPytorch,
-			name: "Pytorch",
+			name: "Pytorch"
 		},
 		{
 			id: "tf",
 			classNames: "bg-orange-50 dark:bg-transparent text-yellow-600",
 			icon: IconTensorflow,
-			name: "TensorFlow",
-		},
+			name: "TensorFlow"
+		}
 	] as const;
 </script>