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>