Add node ci for sveltekit

.github/workflows/lint-svelte-kit.yml

@@ -0,0 +1,33 @@
+name: SvelteKit Lint
+on:
+  pull_request:
+    paths:
+      - "kit/**"
+      - ".github/workflows/lint-svelte-kit.yml"
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - name: Install dependencies
+        run: npm install ci
+        working-directory: kit
+
+      - name: Checking lint/format errors
+        run: npm run lint
+        working-directory: kit
+
+      - name: Checking type errors
+        run: npm run check
+        working-directory: kit

kit/.prettierrc

@@ -3,6 +3,5 @@
 	"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 --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"lint": "prettier --check --plugin prettier-plugin-svelte .",
+		"format": "prettier --write --plugin prettier-plugin-svelte ."
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
@@ -18,6 +18,8 @@
 		"@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,44 +461,53 @@ 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(node.value === "<!--HF DOCBUILD BODY START-->"){
-			hfDocBodyStart = true;
-			hfDocBodyEnd = false;
-		}
-		if(node.value === "<!--HF DOCBUILD BODY END-->"){
-			hfDocBodyEnd = true;
+		if (!isWithinDocBody(node)) {
+			return;
 		}
 		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(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;
-				}
+			} else if (htmlTags.includes(tagName) && REGEX_VALID_START_END_TAG.test(node.value.trim())) {
 				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();
 			}
 		}
 	}
@@ -605,12 +614,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,7 +25,10 @@
 			// 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++) {
-				dropdownWidth += dropdownEl.children.item(i).clientWidth;
+				const child = dropdownEl.children.item(i);
+				if (child) {
+					dropdownWidth += child.clientWidth;
+				}
 			}
 			const bufferMargin = 20;
 			if (h1Widht - spanWidth < dropdownWidth + bufferMargin) {
@@ -44,7 +47,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,9 +42,8 @@
 	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();
@@ -86,8 +85,9 @@
 			containerEl.classList.remove(...bgHighlightClass.split(" "));
 		}
 		if (hashlink === anchor) {
-			containerEl = document.getElementById(hashlink)?.closest(".docstring");
-			if (containerEl) {
+			const _containerEl = document.getElementById(hashlink)?.closest(".docstring");
+			if (_containerEl) {
+				containerEl = _containerEl as HTMLElement;
 				containerEl.classList.add(...bgHighlightClass.split(" "));
 			}
 		}

kit/src/lib/Dropdown.svelte

@@ -19,11 +19,7 @@
 	let isOpen = false;
 </script>
 
-<div
-	class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}"
-	bind:this={element}
-	selected-value={selectedValue || undefined}
->
+<div class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}" bind:this={element}>
 	<!-- 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,5 +1,4 @@
 <script lang="ts">
-	import type { SvelteComponent } from "svelte";
 	import type { Framework } from "./types";
 
 	import { onMount } from "svelte";
@@ -15,19 +14,21 @@
 	let containerEl: HTMLDivElement;
 	let hashLinks = new Set();
 
-	const FRAMEWORK_CONFIG: Record<Framework, { Icon: typeof SvelteComponent; label: string }> = {
+	type SvelteComponent = typeof IconPytorch;
+
+	const FRAMEWORK_CONFIG: Record<Framework, { Icon: 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>