Bump Svelte to v4 (#102)

* update svelte to v4 * add svelte eslint pre-commit dep * add svelte-eslint-parser
janosh · Jul 1, 2023 · 5521460 · 5521460
1 parent 8a2042d
commit 5521460
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 52 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -1,30 +1,23 @@
-root: true
 env:
   browser: true
-  es2020: true
-  node: true
-parser: '@typescript-eslint/parser'
-parserOptions:
-  sourceType: module
-  ecmaVersion: latest
-plugins: [svelte3, '@typescript-eslint']
 extends:
+  - plugin:svelte/recommended
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
 overrides:
   - files: ['*.svelte']
-    processor: svelte3/svelte3
-settings:
-  svelte3/typescript: true
+    parser: svelte-eslint-parser
+    parserOptions:
+      parser: '@typescript-eslint/parser'
 rules:
   indent: [error, 2, SwitchCase: 1]
   '@typescript-eslint/quotes': [error, backtick, avoidEscape: true]
   semi: [error, never]
   linebreak-style: [error, unix]
   no-console: [error, allow: [warn, error]]
   no-var: error
-  # allow triple slash for typescript file referencing https://git.io/JCeqO
-  spaced-comment: [error, always, { markers: [/] }]
-globals:
-  $$props: false # declare the Svelte $$props object as a non-writable global variable
-  google: false
+  '@typescript-eslint/no-inferrable-types': off
+  '@typescript-eslint/no-unused-vars': [error, { argsIgnorePattern: ^_ }]
+  svelte/no-at-html-tags: off
+  no-inner-declarations: off
+ignorePatterns: [build/]
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -41,11 +41,13 @@ repos:
     hooks:
       - id: eslint
         types: [file]
-        args: [--fix, --plugin, 'svelte3, @typescript-eslint']
+        args: [--fix]
         files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
+          - svelte
           - typescript
-          - eslint-plugin-svelte3
+          - eslint-plugin-svelte
+          - svelte-eslint-parser
           - '@typescript-eslint/eslint-plugin'
           - '@typescript-eslint/parser'
diff --git a/package.json b/package.json
@@ -32,32 +32,32 @@
     "@iconify/svelte": "^3.1.4",
     "@rollup/plugin-yaml": "^4.1.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.20.4",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@sveltejs/kit": "^1.21.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "devalue": "^4.3.2",
-    "eslint": "^8.43.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint": "^8.44.0",
+    "eslint-plugin-svelte": "^2.32.2",
     "hast-util-from-string": "^2.0.0",
     "hast-util-select": "^5.0.5",
     "hastscript": "^7.2.0",
     "js-yaml": "^4.1.0",
-    "katex": "^0.16.7",
-    "mdsvex": "^0.10.6",
+    "katex": "^0.16.8",
+    "mdsvex": "^0.11.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "svelte": "^3.59.2",
+    "svelte": "^4.0.1",
     "svelte-check": "^3.4.4",
     "svelte-multiselect": "^9.0.0",
     "svelte-preprocess": "^5.0.4",
-    "svelte-preprocess-import-assets": "^1.0.0",
+    "svelte-preprocess-import-assets": "^1.0.1",
     "svelte-zoo": "^0.4.8",
     "svelte2tsx": "^0.6.16",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.6",
     "vite": "^4.3.9"
   }
 }
diff --git a/src/lib/LiteYouTubeEmbed.svelte b/src/lib/LiteYouTubeEmbed.svelte
@@ -9,7 +9,13 @@
   $: video_id, (activated = false)
 </script>
 
-<div class="lite-youtube" class:activated on:click={activate} on:keyup={activate}>
+<div
+  class="lite-youtube"
+  class:activated
+  on:click={activate}
+  on:keyup={activate}
+  role="presentation"
+>
   {#key video_id}
     <picture>
       <source

diff --git a/src/routes/cv/+page.svelte b/src/routes/cv/+page.svelte
@@ -1,17 +1,6 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
-  import {
-    awards,
-    education,
-    hobbies,
-    languages,
-    memberships,
-    nationality,
-    projects,
-    publications,
-    skills,
-    volunteer,
-  } from './cv-data.yml'
+  import cv from './cv-data.yml'
 
   const email = `janosh@lbl.gov`
   const links = { target: `_blank`, rel: `noreferrer` }
@@ -46,7 +35,7 @@
     <Icon inline icon="zondicons:education" />&nbsp; Education
   </h2>
   <ul>
-    {#each education as { title, thesis_title, date = '', href, uni }}
+    {#each cv.education as { title, thesis_title, date, href, uni }}
       <li>
         <h4>
           <a {href}>{title}</a>
@@ -61,7 +50,7 @@
     <Icon inline icon="iconoir:journal" />&nbsp; Publications
   </h2>
   <ul>
-    {#each publications as { title, authors, journal, date, url, arxiv }}
+    {#each cv.publications as { title, authors, journal, date, url, arxiv }}
       {@const year = new Date(date).getFullYear()}
       <li>
         <h4>{title}</h4>
@@ -78,7 +67,7 @@
     <!-- <small>only lead dev repos</small> -->
   </h2>
   <ul>
-    {#each projects as { url, img_style, github, name, description, stars, logo }}
+    {#each cv.projects as { url, img_style, github, name, description, stars, logo }}
       <li>
         <h4>
           <img src={logo ?? `${url}/favicon.svg`} alt="{name} Logo" style={img_style} />
@@ -101,7 +90,7 @@
     <Icon inline icon="mdi:trophy" />&nbsp; Awards
   </h2>
   <ul>
-    {#each awards as { name, description, date, href }}
+    {#each cv.awards as { name, description, date, href }}
       <li>
         <h4><a {href}>{name}</a></h4>
         <p>{description} <small>{date}</small></p>
@@ -113,7 +102,7 @@
     <Icon inline icon="material-symbols:volunteer-activism" />&nbsp; Volunteer Work
   </h2>
   <ul>
-    {#each volunteer as { name, description, href, logo, role }}
+    {#each cv.volunteer as { name, description, href, logo, role }}
       <li>
         <h4>
           <a {href}><img src={logo} alt={name} height="20" />{name}</a>
@@ -130,7 +119,7 @@
     <Icon inline icon="lucide:languages" />&nbsp; Languages
   </h3>
   <ul>
-    {#each languages as { name, level }}
+    {#each cv.languages as { name, level }}
       <li>
         {name}
         <Icon inline icon="carbon:skill-level-{level}" />
@@ -141,7 +130,7 @@
   <h3>
     <Icon inline icon="mdi:earth" />&nbsp; Nationality
     <ul>
-      {#each nationality as nat}
+      {#each cv.nationality as nat}
         <li>{nat}</li>
       {/each}
     </ul>
@@ -151,7 +140,7 @@
     <Icon inline icon="carbon:skill-level-advanced" />&nbsp; Skills
   </h3>
   <ul class="skills">
-    {#each skills as { name, icon, score, href }}
+    {#each cv.skills as { name, icon, score, href }}
       <!-- color based on score style="color: hsl({score * 20}, 100%, 40%)" -->
       <li style:font-weight={(score - 3) * 100}>
         <a {href}>
@@ -167,7 +156,7 @@
     <Icon inline icon="material-symbols:interests" />&nbsp; Hobbies
   </h3>
   <ul>
-    {#each hobbies as { name, icon, href }}
+    {#each cv.hobbies as { name, icon, href }}
       <li>
         <a {href}>
           <Icon inline {icon} />
@@ -182,7 +171,7 @@
     &nbsp; Memberships
   </h3>
   <ul>
-    {#each memberships as { name, date, href }}
+    {#each cv.memberships as { name, date, href }}
       <li>
         <a {href}>{name}</a>&ensp;<small>{date}</small>
       </li>

diff --git a/src/routes/posts/use-dark-mode/+page.md b/src/routes/posts/use-dark-mode/+page.md
@@ -460,7 +460,7 @@ function FallbackStyles({ cssColors = `` }) {
 
   const wrappedInSelector = `html { ${cssColors} }`
 
-  return <style>{wrappedInSelector}</style>
+  return <style>{wrappedInSelector}<\/style>
 }
 
 export const onRenderBody = ({ setPreBodyComponents, setHeadComponents }) => {