replace page.subscribe() + onMount() with new afterNavigate() lifecycle hook sveltejs/kit#3293

Author: janosh

.pre-commit-config.yaml

@@ -31,3 +31,18 @@ repos:
       - id: codespell
         stages: [commit, commit-msg]
         exclude: yarn.lock
+
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.6.0
+    hooks:
+      - id: eslint
+        types: [file]
+        files: \.(svelte|js)$
+        args: [--plugin, eslint-plugin-svelte3]
+        additional_dependencies:
+          - eslint
+          - svelte
+          - typescript
+          - eslint-plugin-svelte3
+          - '@typescript-eslint/eslint-plugin'
+          - '@typescript-eslint/parser'

package.json

@@ -18,25 +18,25 @@
     "check": "svelte-check --ignore package"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.23",
-    "@sveltejs/kit": "^1.0.0-next.206",
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
-    "eslint": "^8.5.0",
-    "eslint-plugin-svelte3": "^3.2.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.26",
+    "@sveltejs/kit": "^1.0.0-next.240",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "eslint": "^8.7.0",
+    "eslint-plugin-svelte3": "^3.4.0",
     "hastscript": "^7.0.2",
     "mdsvex": "^0.9.8",
     "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.1",
-    "rehype-autolink-headings": "^6.1.0",
-    "rehype-slug": "^5.0.0",
-    "svelte": "^3.44.3",
-    "svelte-check": "^2.2.11",
+    "prettier-plugin-svelte": "^2.6.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.0.1",
+    "svelte": "^3.46.2",
+    "svelte-check": "^2.3.0",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.1",
-    "svelte2tsx": "^0.4.12",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.10"
+    "svelte-preprocess": "^4.10.2",
+    "svelte2tsx": "^0.4.14",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13"
   },
   "keywords": [
     "svelte",

readme.md

@@ -98,17 +98,19 @@ The HTML structure of this component is
 - `var(--toc-hover-color, cornflowerblue)`: Text color of hovered headings.
 - `var(--toc-active-color, orange)`: Text color of the currently active heading. The active heading is the one closest to current scroll position.
 - `var(--toc-mobile-btn-color, black)`: Color of the menu icon used as ToC opener button on mobile screen sizes.
+- `var(--toc-li-scroll-margin, 20pt 0)`: scroll margin of ToC list items (determines distance from window edge when keeping active ToC item scrolled in view as page scrolls)
 - `var(--toc-mobile-btn-bg-color, rgba(255, 255, 255, 0.2))`: Background color of the padding area around the menu icon button.
 - `var(--toc-mobile-bg-color, white)`: Background color of the `nav` element hovering in the lower-left screen corner when the ToC was opened on mobile screens.
 - `var(--toc-desktop-bg-color)`: Background color of the `nav` element on desktop screens.
 - `var(--toc-desktop-sticky-top, 2em)`: How far below the screen's top edge the ToC starts being sticky.
-- `var(--toc-desktop-margin, 0)`: Margin of the outer-most `aside.toc` element.
+- `var(--toc-desktop-aside-margin, 0)`: Margin of the outer-most `aside.toc` element on desktops.
+- `var(--toc-desktop-nav-margin, 0 2ex 0 0)`: Margin of the `aside.toc > nav` element on desktops.
 
 Example:
 
 ```svelte
 <Toc
-  --toc-desktop-margin="10em 0 0 0"
+  --toc-desktop-aside-margin="10em 0 0 0"
   --toc-desktop-sticky-top="3em"
   --toc-desktop-width="15em"
 />

src/lib/Toc.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { page } from '$app/stores'
-  import { onMount } from 'svelte'
+  import { afterNavigate } from '$app/navigation'
   import { blur } from 'svelte/transition'
   import { onClickOutside } from './actions'
   import MenuIcon from './MenuIcon.svelte'
@@ -26,20 +25,13 @@
   $: levels = headings.map(getHeadingLevels)
   $: minLevel = Math.min(...levels)
 
-  function handleRouteChange() {
+  // (re-)query headings on mount and on route changes
+  afterNavigate(() => {
     headings = [...document.querySelectorAll(headingSelector)] as HTMLHeadingElement[]
 
     // set first heading as active if null on page load
     if (activeHeading === null) activeHeading = headings[0]
-  }
-
-  // (re-)compute list of HTML headings on mount and on route changes
-  if (typeof window !== `undefined`) {
-    page.subscribe(handleRouteChange)
-  }
 
-  onMount(() => {
-    handleRouteChange()
     const observer = new IntersectionObserver(
       (entries) => {
         // callback receives only observed nodes whose intersection changed
@@ -148,6 +140,7 @@
   :where(nav > ul > li) {
     margin-top: 5pt;
     cursor: pointer;
+    scroll-margin: var(--toc-li-scroll-margin, 20pt 0);
   }
   :where(nav > ul > li:hover) {
     color: var(--toc-hover-color, cornflowerblue);
@@ -192,12 +185,12 @@
   }
 
   :where(aside.toc.desktop) {
-    margin: var(--toc-desktop-margin, 0);
+    margin: var(--toc-desktop-aside-margin, 0);
   }
   :where(aside.toc.desktop > nav) {
     position: sticky;
     padding: 12pt 14pt 0;
-    margin: 0 2ex 0 0;
+    margin: var(--toc-desktop-nav-margin, 0 2ex 0 0);
     top: var(--toc-desktop-sticky-top, 2em);
     background-color: var(--toc-desktop-bg-color);
     border-radius: 5pt;

src/routes/index.svx

@@ -5,7 +5,7 @@
 
 <Toc
   headingSelector="main :where(h2, h3, h4)"
-  --toc-desktop-margin="14em 0 0 0;"
+  --toc-desktop-aside-margin="14em 0 0 0"
 />
 
 <main>

static/global.css

@@ -8,7 +8,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
   color: #eee;
-  line-height: 3ex;
   overflow-x: hidden;
 }
 * {

svelte.config.js

@@ -24,10 +24,12 @@ const rehypePlugins = [
 
 export default {
   extensions: [`.svelte`, `.svx`, `.md`],
+
   preprocess: [
     preprocess(),
     mdsvex({ rehypePlugins, extensions: [`.svx`, `.md`] }),
   ],
+
   kit: {
     adapter: adapter(),