refactor: complete Svelte 5 migration and address dev warnings

Removes the last legacy syntax from the codebase: createEventDispatcher
is converted to callback-prop style across Bit/Bits/Digit/Digits/Pixel/
NumberControls and their consumers, and IPv4.svelte migrates off Svelte 4
(export let, $:, named slot) with the slot replaced by an extraBits
snippet prop in CIDR.svelte.

Also addresses the development warnings that surfaced during the audit:
- astro.config: deprecated markdown.remarkPlugins/rehypePlugins move into
  the unified({...}) processor from @astrojs/markdown-remark
- LogRange: prop-derived values wrapped in $derived to silence
  state_referenced_locally
- IPv4: six <div /> self-closing tags expanded to <div></div>
- IPv4Input: aria-label added to the icon-only pencil button
- Bits/Digits: comment marks the fly import as used in template-only
  in:fly directives (Vite's static analysis can't see those)

Adds Pixel and IPv4 component tests to cover the callback-prop wiring
and the slot-to-snippet migration end-to-end.

Author: ryuheechul

astro.config.mjs

@@ -1,6 +1,7 @@
 // https://astro.build/config
 
 import { defineConfig } from 'astro/config';
+import { unified } from '@astrojs/markdown-remark';
 import svelte from '@astrojs/svelte';
 import UnoCSS from 'unocss/astro';
 import mdx from '@astrojs/mdx';
@@ -12,18 +13,20 @@ import partytown from '@astrojs/partytown';
 import AstroPWA from '@vite-pwa/astro';
 
 const markdown = {
-  remarkPlugins: [remarkMath],
-  rehypePlugins: [
-    // needed for rehypeAutolinkHeadings
-    rehypeSlug,
-    [
-      rehypeAutolinkHeadings,
-      {
-        behavior: 'append',
-      },
+  processor: unified({
+    remarkPlugins: [remarkMath],
+    rehypePlugins: [
+      // needed for rehypeAutolinkHeadings
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'append',
+        },
+      ],
+      rehypeMathjax,
     ],
-    rehypeMathjax,
-  ],
+  }),
 };
 
 // https://astro.build/config

package.json

@@ -20,6 +20,7 @@
     "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
+    "@astrojs/markdown-remark": "7.2.0",
     "@astrojs/mdx": "^6.0.3",
     "@astrojs/partytown": "^2.1.7",
     "@astrojs/svelte": "^8.1.2",

pnpm-lock.yaml

@@ -50,17 +50,17 @@ Visualize CIDR
 
 <div class="sm:mx--6">
   <IPv4 bind:address bind:prefix {renderedAddress}>
-    <!-- @migration-task: migrate this slot by hand, `extra-bits` is an invalid identifier -->
-    <IPv4Network
-      slot="extra-bits"
-      bind:address
-      bind:prefix
-      {length}
-      {mask}
-      {network}
-      {renderedMask}
-      {renderedNetwork}
-    />
+    {#snippet extraBits()}
+      <IPv4Network
+        bind:address
+        bind:prefix
+        {length}
+        {mask}
+        {network}
+        {renderedMask}
+        {renderedNetwork}
+      />
+    {/snippet}
   </IPv4>
 </div>
 

src/components/CIDR.svelte

@@ -40,7 +40,7 @@ Visualize True color
     cachePixel(selected);
   });
 
-  function onUpdate({ detail: { position, rgba } }: CustomEvent<UpdatePixelEvent>) {
+  function onUpdate({ position, rgba }: UpdatePixelEvent) {
     pixels[position] = fromRGBA(rgba);
     pixels = pixels;
     cachePixel(position);
@@ -103,6 +103,6 @@ Visualize True color
 <!-- mx--n is to center even with some overflow (within the size of n) -->
 <div class="sm:mx--6">
   {#key selected}
-    <Pixel pixel={selectedPixel} position={selected} on:update={onUpdate} />
+    <Pixel pixel={selectedPixel} position={selected} {onUpdate} />
   {/key}
 </div>

src/components/Color.svelte

@@ -48,7 +48,7 @@ A demo that helps develop components
     cacheInteger(integer);
   });
 
-  function onControl(e: CustomEvent<NCClickEvent>) {
+  function onControl(e: NCClickEvent) {
     const fn = {
       [NCClickEvent.increment]: () => {
         integerInput = integerInput == max ? min : integerInput + 1;
@@ -62,7 +62,7 @@ A demo that helps develop components
       [NCClickEvent.setToMin]: () => {
         integerInput = min;
       },
-    }[e.detail];
+    }[e];
 
     fn();
   }
@@ -85,7 +85,7 @@ A demo that helps develop components
       <div class="grow"></div>
     </div>
     <div dir="ltr" class="text-right">
-      <NumberControls bind:integer={integerInput} {max} {min} on:click={onControl} />
+      <NumberControls bind:integer={integerInput} {max} {min} onClick={onControl} />
     </div>
   </div>
 </div>

src/components/Number.svelte

@@ -1,46 +1,56 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (extra-bits to extra_bits) making the component unusable -->
 <!-- @component
 Represent IPv4 address including prefix notation
 -->
-<script context="module" lang="ts">
+<script module lang="ts">
   import BitHex from './BitHex.svelte';
   import IPv4Prefix from './IPv4Prefix.svelte';
   import InputNumberLocaled from '../parts/InputNumberLocaled.svelte';
   import IPv4Input from '../parts/IPv4Input.svelte';
   import { assemble, disassemble, calcHosts } from '@lib/ipv4';
+  import type { Snippet } from 'svelte';
 
   const min = 0;
   const max = 255;
   const length = 32;
 </script>
 
 <script lang="ts">
-  export let address = 0xc0a80000;
-  export let renderedAddress = 'placeholder';
-  export let prefix = 16;
+  interface Props {
+    address?: number;
+    renderedAddress?: string;
+    prefix?: number;
+    extraBits?: Snippet;
+  }
 
-  // break down into 4 octets
-  $: octets = disassemble(address);
+  let {
+    address = $bindable(0xc0a80000),
+    renderedAddress = 'placeholder',
+    prefix = $bindable(16),
+    extraBits,
+  }: Props = $props();
+
+  let octets = $derived(disassemble(address));
 
   const onChange = (position: number, e: Event) => {
     const target = e.target as HTMLInputElement;
     const value = Math.min(max, Math.max(0, target.value ? Number(target.value) : min));
 
-    octets[position] = value;
-
-    address = assemble(octets);
+    // derived octets is read-only; copy, mutate, reassemble
+    const next = [...octets];
+    next[position] = value;
+    address = assemble(next);
   };
 
-  $: addresses = calcHosts(prefix) + 2;
+  let addresses = $derived(calcHosts(prefix) + 2);
 
-  let showingWholeInput = false;
+  let showingWholeInput = $state(false);
 </script>
 
 <IPv4Input bind:address bind:prefix {renderedAddress} bind:show={showingWholeInput} />
 
 <!-- for xs only -->
 <div class="sm:hidden items-end mb-2 flex" class:invisible={showingWholeInput}>
-  <div class="grow" />
+  <div class="grow"></div>
   <div class="flex text-2xl lt-sm:text-xl lt-xs:text-lg mr-2 items-center">
     <div>
       <div class="flex">
@@ -53,7 +63,7 @@ Represent IPv4 address including prefix notation
               strictRangeOnInput={true}
               class="text-center w-12 lt-sm:w-10 lt-xs:w-8 input-number-hide-arrows bg-gray-50 rounded font-mono"
               value={octet}
-              on:change={(e) => onChange(idx, e)}
+              onchange={(e) => onChange(idx, e)}
             />
           </div>
         {/each}
@@ -71,11 +81,11 @@ Represent IPv4 address including prefix notation
     </div>
   </div>
   <IPv4Prefix bind:integer={prefix} hideHeader={false} />
-  <div class="grow" />
+  <div class="grow"></div>
 </div>
 <!-- main -->
 <div class="flex lt-sm:overflow-x-auto px-2 mx--2 pb-2">
-  <div class="grow" />
+  <div class="grow"></div>
   <div>
     <div class="flex lt-sm:hidden" class:invisible={showingWholeInput}>
       {#each octets as octet, idx (idx)}
@@ -87,7 +97,7 @@ Represent IPv4 address including prefix notation
             strictRangeOnInput={true}
             class="text-center w-full max-w-[7.4rem] input-number-hide-arrows bg-gray-50 rounded mx-1 font-mono"
             value={octet}
-            on:change={(e) => onChange(idx, e)}
+            onchange={(e) => onChange(idx, e)}
           />
           <div class="absolute bottom-0 right-0 group-last:hidden translate-x-0.8 font-bold z-10">
             .
@@ -97,7 +107,7 @@ Represent IPv4 address including prefix notation
     </div>
     <div class="relative">
       <div class="absolute w-full h-full rounded-t overflow-clip z--10">
-        <div class="h-full bg-gray-200" style:width={`${(prefix / 32) * 100}%`} />
+        <div class="h-full bg-gray-200" style:width={`${(prefix / 32) * 100}%`}></div>
       </div>
       <div class="mix-blend-multiply">
         <div class="text-gray-600">
@@ -114,11 +124,11 @@ Represent IPv4 address including prefix notation
         </div>
       </div>
     </div>
-    <slot name="extra-bits" />
+    {@render extraBits?.()}
   </div>
   <div class="flex flex-col mx-2 text-2xl lt-sm:hidden" class:invisible={showingWholeInput}>
     <div class="lt-sm:text-base sm:translate-x--0.8 lt-sm:mb-1 lt-sm:font-bold">/</div>
-    <div class="grow" />
+    <div class="grow"></div>
   </div>
   <div class="flex flex-col lt-sm:hidden">
     <div class="lt-sm:hidden mb-2" class:invisible={showingWholeInput}>
@@ -146,5 +156,5 @@ Represent IPv4 address including prefix notation
       </div>
     </div>
   </div>
-  <div class="grow" />
+  <div class="grow"></div>
 </div>

src/components/blend/IPv4.svelte

@@ -28,7 +28,7 @@ to augment IPv4 with Network and Netmask visualization
     renderedMask = 'placeholder',
   }: Props = $props();
 
-  function onUpdateForNetwork({ detail: { integer } }: CustomEvent<BitsIntegerUpdateEvent>) {
+  function onUpdateForNetwork({ integer }: BitsIntegerUpdateEvent) {
     address = newAddressFrom(address, mask, integer);
   }
 
@@ -62,7 +62,7 @@ to augment IPv4 with Network and Netmask visualization
     return prefix;
   };
 
-  function onUpdateForMask({ detail: { integer } }: CustomEvent<BitsIntegerUpdateEvent>) {
+  function onUpdateForMask({ integer }: BitsIntegerUpdateEvent) {
     let p = minExponent(integer, mask, prefix);
     prefix = Math.max(0, Math.min(p, 31));
   }
@@ -100,7 +100,7 @@ to augment IPv4 with Network and Netmask visualization
       compact={true}
       octetBorder={true}
       overrideCellBg="#ffffff00"
-      on:update={onUpdateForMask}
+      onUpdate={onUpdateForMask}
       disabledBits={0b1}
     />
   </div>
@@ -122,6 +122,6 @@ to augment IPv4 with Network and Netmask visualization
   borderHex={true}
   compact={true}
   octetBorder={true}
-  on:update={onUpdateForNetwork}
+  onUpdate={onUpdateForNetwork}
   disabledBits={~mask >>> 0}
 />

src/components/blend/IPv4Network.svelte

@@ -2,7 +2,7 @@
 Pixel that contains sub pixels
 -->
 <script module lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { untrack } from 'svelte';
   import SubPixel from './SubPixel.svelte';
   import CopyToClipboard from '@components/parts/CopyToClipboard.svelte';
   import { toHex } from '@lib/convert';
@@ -15,25 +15,19 @@ Pixel that contains sub pixels
 </script>
 
 <script lang="ts">
-  const dispatch = createEventDispatcher<{ update: UpdatePixelEvent }>();
-
   interface Props {
     pixel?: { r: number; g: number; b: number };
     position: number;
+    onUpdate?: (e: UpdatePixelEvent) => void;
   }
 
-  let { pixel = { r: 254, g: 240, b: 138 }, position }: Props = $props();
-
-  export const updatePixel = (rgba: RGBA) => {
-    dispatch('update', {
-      rgba,
-      position,
-    });
-  };
+  let { pixel = { r: 254, g: 240, b: 138 }, position, onUpdate }: Props = $props();
 
-  let { r, g, b } = $state(pixel);
+  let r = $state(untrack(() => pixel.r));
+  let g = $state(untrack(() => pixel.g));
+  let b = $state(untrack(() => pixel.b));
   $effect(() => {
-    updatePixel({ r, g, b, a: 255 });
+    onUpdate?.({ rgba: { r, g, b, a: 255 }, position });
   });
 
   const toSubPixel = (i: number) => {

src/components/blend/Pixel.svelte

@@ -21,24 +21,18 @@ A bit flipper
 <script lang="ts">
   import { focusIt } from '@lib/dom';
 
-  import { createEventDispatcher } from 'svelte';
-
-  const dispatch = createEventDispatcher<{ flip: BitFlipEvent }>();
-
   interface Props {
     checked?: boolean;
     position?: number;
     disabled?: boolean;
+    onFlip?: (e: BitFlipEvent) => void;
   }
 
-  let { checked = $bindable(false), position = 0, disabled = false }: Props = $props();
+  let { checked = $bindable(false), position = 0, disabled = false, onFlip }: Props = $props();
 
-  // avoid `$: dispatch ...` as I want the dispatch to happen from user interaction only
+  // dispatch only from user interaction, not from prop changes
   const flip = () => {
-    dispatch('flip', {
-      checked,
-      position,
-    });
+    onFlip?.({ checked, position });
   };
 
   const focusNeighbour = (target: EventTarget | null, adjust: number) => {