✨ Make Svelte component props reactive

Author: Frontendland

README.md

@@ -259,7 +259,7 @@ html body {
 Depending on your installed blocks, you can also use the following variables to override default block styles:
 
 ```scss
-:root {
+html body {
     // Error page
     --w-error-page-type-color: var(--w-color-info);
 }

src/blocks/Author/Author.svelte

@@ -17,10 +17,10 @@
         ...rest
     }: AuthorProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'flex sm column sm-row',
         bodyClassName
-    ])
+    ]))
 </script>
 
 <Card bodyClassName={classes} {...rest}>

src/blocks/AvatarWithRating/AvatarWithRating.svelte

@@ -13,11 +13,11 @@
         className
     }: AvatarWithRatingProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'flex sm items-center',
         styles.avatar,
         className
-    ])
+    ]))
 </script>
 
 <div class={classes}>

src/blocks/DeviceMockup/DeviceMockup.svelte

@@ -15,10 +15,10 @@
         children
     }: SvelteDeviceMockupProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.mockup,
         className
-    ])
+    ]))
 
     const getColor = (color: string | undefined) => color
         ? `background:${color};`

src/blocks/Empty/Empty.svelte

@@ -15,12 +15,12 @@
         className
     }: EmptyProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'flex column center xs',
         iconWithBackground && styles['icon-bg'],
         styles.empty,
         className
-    ])
+    ]))
 </script>
 
 <section class={classes}>

src/blocks/ErrorPage/ErrorPage.svelte

@@ -13,9 +13,10 @@
         ...rest
     }: ErrorPageProps = $props()
 
-    const typeStyle = typeColor
+    const typeStyle = $derived(typeColor
         ? `--w-error-page-type-color: ${typeColor};`
         : null
+    )
 </script>
 
 <section class={styles.error} {...rest}>

src/blocks/ExpandableTable/ExpandableTable.svelte

@@ -23,15 +23,15 @@
 
     let expanded = $state(false)
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.table,
         hover && styles.hover,
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
         maxHeight && styles.scroll,
         className
-    ])
+    ]))
 
     const toggle = () => expanded = !expanded
 </script>

src/blocks/FAQ/FAQ.svelte

@@ -15,10 +15,10 @@
         ...rest
     }: SvelteFAQProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.faq,
         className
-    ])
+    ]))
 </script>
 
 <svelte:element this={element} class={classes}>

src/blocks/Form/Form.svelte

@@ -20,11 +20,11 @@
         ...rest
     }: FormProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'flex column',
         gap || 'md',
         className
-    ])
+    ]))
 </script>
 
 {#snippet input(field: FormField)}

src/blocks/GridWithIcons/GridWithIcons.svelte

@@ -14,20 +14,20 @@
         className
     }: GridWithIconsProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         `grid sm-${columns || 3}`,
         styles.list,
         alignment && styles[alignment],
         iconWithBackground && styles['icon-bg'],
         secondary && styles.secondary,
         className
-    ])
+    ]))
 
-    const wrapperClasses = classNames([
+    const wrapperClasses = $derived(classNames([
         'flex sm items-center',
         alignment === 'center' && 'justify-center',
         alignment === 'right' && 'justify-end'
-    ])
+    ]))
 </script>
 
 <ul class={classes}>