Fix structure controls for atom_radius, same_size_atoms (#38)

* eslint-plugin-svelte3 to eslint-plugin-svelte migration (last Svelte 3 dep)

* fix eslint errors

* fix structure controls atom_radius, same_size_atoms

show input type=number next to each structure control input type=range

* move structure tips_modal to StructureLegend

* add structure controls to toggle show_atoms, show_bonds

* finish bond_radius slider

* add structure control auto_rotate slider

.eslintrc.yml

@@ -1,28 +1,25 @@
-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: [/] }]
   '@typescript-eslint/no-inferrable-types': off
+  '@typescript-eslint/no-unused-vars':
+    [error, { argsIgnorePattern: ^_, varsIgnorePattern: ^_ }]
+  svelte/no-at-html-tags: off
+  no-inner-declarations: off
+ignorePatterns: [build/, dist/]

.github/workflows/gh-pages.yml

@@ -10,5 +10,3 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-    with:
-      install-cmd: npm install --force

.github/workflows/test.yml

@@ -12,5 +12,3 @@ on:
 jobs:
   tests:
     uses: janosh/workflows/.github/workflows/npm-test-release.yml@main
-    with:
-      install-cmd: npm install --force

.pre-commit-config.yaml

@@ -30,18 +30,20 @@ repos:
         exclude: ^changelog.md|.*/structures/.*\.json$
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.41.0
+    rev: v8.43.0
     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
           - '@typescript-eslint/eslint-plugin'
           - '@typescript-eslint/parser'
+          - svelte-eslint-parser
 
   - repo: https://github.com/codespell-project/codespell
     rev: v2.2.4

package.json

@@ -55,7 +55,7 @@
     "@typescript-eslint/parser": "^5.60.1",
     "@vitest/coverage-c8": "^0.32.2",
     "eslint": "^8.43.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.32.2",
     "hastscript": "^7.2.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",

src/lib/BohrAtom.svelte

@@ -18,8 +18,6 @@
   // Bohr atom electron orbital period is given by
   // T = (n^3 h^3) / (4pi^2 m K e^4 Z^2) = 1.52 * 10^-16 * n^3 / Z^2 s
   // with n the shell number, Z the atomic number, m the mass of the electron
-  $: Z = shells.reduce((a, b) => a + b, 0)
-
   $: _nucleus_props = {
     r: 20,
     fill: `white`,

src/lib/InfoCard.svelte

@@ -24,14 +24,14 @@
       </slot>
     </h2>
   {/if}
-  {#each data as { title, value, unit = '', fmt = default_fmt }}
+  {#each data as { title, value, unit, fmt = default_fmt }}
     <div>
       <span class="title" {title}>
         {@html title}
       </span>
       <strong>
         {@html typeof value == `number` ? pretty_num(value, fmt) : value}
-        {unit}
+        {unit ?? ``}
       </strong>
     </div>
   {:else}

src/lib/element/ElementTile.svelte

@@ -21,6 +21,7 @@
   export let node: HTMLElement | null = null
   export let label: string | null = null
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type $$Events = PeriodicTableEvents // for type-safe event listening on this component
 
   $: category = element.category.replaceAll(` `, `-`)
@@ -36,7 +37,7 @@
 </script>
 
 <svelte:element
-  this={href ? 'a' : 'div'}
+  this={href ? `a` : `div`}
   bind:this={node}
   {href}
   data-sveltekit-noscroll

src/lib/periodic-table/PeriodicTable.svelte

@@ -53,6 +53,7 @@
   export let color_overrides: Record<ElementSymbol, string> = {}
   export let labels: Record<ElementSymbol, string> = {}
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type $$Events = PeriodicTableEvents // for type-safe event listening on this component
 
   let heat_values: number[] = []