Implement node ci for sveltekit

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

@@ -0,0 +1,30 @@
+name: SvelteKit Lint
+on:
+  pull_request:
+  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",
 		"domutils": "^2.8.0",

kit/src/lib/CodeBlock.svelte

@@ -18,6 +18,7 @@
 	on:focus={handleMouseOver}
 	on:mouseout={handleMouseOut}
 	on:blur={handleMouseOut}
+	role="button"
 >
 	<div class="absolute top-2.5 right-4">
 		<CopyButton

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>
 

kit/src/lib/InferenceApi.svelte

@@ -13,29 +13,29 @@
 		{
 			id: "python",
 			icon: IconPython,
-			label: "Python"
+			label: "Python",
 		},
 		{
 			id: "js",
 			icon: IconJs,
-			label: "JavaScript"
+			label: "JavaScript",
 		},
 		{
 			id: "curl",
 			icon: IconCurl,
-			label: "cURL"
-		}
+			label: "cURL",
+		},
 	];
 
 	export let python = false;
 	export let js = false;
 	export let curl = false;
 
-	const snippetExists = {python, js, curl};
+	const snippetExists = { python, js, curl };
 </script>
 
 <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0">
-	{#each LANGUAGES_CONFIG.filter(c => snippetExists[c.id]) as language}
+	{#each LANGUAGES_CONFIG.filter((c) => snippetExists[c.id]) as language}
 		<div
 			class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd
 			{$selectedInferenceLang === language.id

kit/src/lib/PipelineIcon.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { SvelteComponent } from "svelte";
 	import { PIPELINE_DATA } from "./pipeline";
 
 	import IconAudioClassification from "./PipelineIcons/IconAudioClassification.svelte";
@@ -36,7 +35,9 @@
 	export let classNames = "";
 	export let pipeline = "";
 
-	const ICON_COMPONENTS: Record<string, typeof SvelteComponent> = {
+	type SvelteComponent = typeof IconTextClassification;
+
+	const ICON_COMPONENTS: Record<string, SvelteComponent> = {
 		/// Keep same order as in huggingface_hub/Types.ts
 		/// for easy mapping.
 		"text-classification": IconTextClassification,
@@ -72,10 +73,7 @@
 	};
 
 	const PIPELINE_TAG_ICO_CLASS = Object.fromEntries(
-		Object.entries(PIPELINE_DATA).map(([tagType, data]) => [
-			tagType,
-			`tag-ico-${data.color}`,
-		])
+		Object.entries(PIPELINE_DATA).map(([tagType, data]) => [tagType, `tag-ico-${data.color}`])
 	);
 </script>
 

kit/src/lib/PipelineIcons/IconImageClassification.svelte

@@ -15,12 +15,8 @@
 	preserveAspectRatio="xMidYMid meet"
 	viewBox="0 0 32 32"
 >
-	<polygon
-		points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20"
-	/>
-	<path
-		d="M19,14a3,3,0,1,0-3-3A3,3,0,0,0,19,14Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,19,10Z"
-	/>
+	<polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20" />
+	<path d="M19,14a3,3,0,1,0-3-3A3,3,0,0,0,19,14Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,19,10Z" />
 	<path
 		d="M26,4H6A2,2,0,0,0,4,6V16H6V6H26V21.17l-3.59-3.59a2,2,0,0,0-2.82,0L18,19.17,11.8308,13l-1.4151,1.4155L14,18l2.59,2.59a2,2,0,0,0,2.82,0L21,19l5,5v2H16v2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4Z"
 	/>

kit/src/lib/PipelineIcons/IconSentenceSimilarity.svelte

@@ -23,7 +23,5 @@
 	<path
 		d="M28 12h-6a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h6a2.002 2.002 0 0 1 2 2v6a2.002 2.002 0 0 1-2 2zm-6-8v6h6.001L28 4z"
 	/>
-	<path
-		d="M7 12a5 5 0 1 1 5-5a5.006 5.006 0 0 1-5 5zm0-8a3 3 0 1 0 3 3a3.003 3.003 0 0 0-3-3z"
-	/>
+	<path d="M7 12a5 5 0 1 1 5-5a5.006 5.006 0 0 1-5 5zm0-8a3 3 0 1 0 3 3a3.003 3.003 0 0 0-3-3z" />
 </svg>

kit/src/lib/PipelineIcons/IconTextGeneration.svelte

@@ -18,9 +18,7 @@
 	<path
 		d="M16.2607 8.08202L14.468 6.28928C14.3063 6.12804 14.0873 6.03749 13.859 6.03749C13.6307 6.03749 13.4117 6.12804 13.25 6.28928L5.6375 13.904V16.9125H8.64607L16.2607 9.30002C16.422 9.13836 16.5125 8.91935 16.5125 8.69102C16.5125 8.4627 16.422 8.24369 16.2607 8.08202V8.08202ZM8.1953 15.825H6.725V14.3547L11.858 9.22118L13.3288 10.6915L8.1953 15.825ZM14.0982 9.92262L12.6279 8.45232L13.8606 7.21964L15.3309 8.68994L14.0982 9.92262Z"
 	/>
-	<path
-		d="M6.18125 9.84373H7.26875V6.03748H8.9V4.94998H4.55V6.03748H6.18125V9.84373Z"
-	/>
+	<path d="M6.18125 9.84373H7.26875V6.03748H8.9V4.94998H4.55V6.03748H6.18125V9.84373Z" />
 	<path
 		d="M4.55 11.475H2.375V2.775H11.075V4.95H12.1625V2.775C12.1625 2.48658 12.0479 2.20997 11.844 2.00602C11.64 1.80208 11.3634 1.6875 11.075 1.6875H2.375C2.08658 1.6875 1.80997 1.80208 1.60602 2.00602C1.40207 2.20997 1.2875 2.48658 1.2875 2.775V11.475C1.2875 11.7634 1.40207 12.04 1.60602 12.244C1.80997 12.4479 2.08658 12.5625 2.375 12.5625H4.55V11.475Z"
 	/>