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>