feat: migrate components in layout grid to runes

Author: hperrin

README.md

@@ -184,7 +184,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
     - [x] Text Field Character Counter
     - [x] Text Field Helper Text
     - [x] Text Field Icon
-- [ ] Layout Grid
+- [x] Layout Grid
 - [x] List
 - [x] Menu Surface
 - [x] Menu

packages/layout-grid/src/Cell.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -16,42 +16,63 @@
       ]),
     ),
   })}
-  {...$$restProps}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import { classMap, useActions } from '@smui/common/internal';
 
   type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
     class?: string;
+    /**
+     * Where to align this cell, vertically.
+     */
     align?: 'top' | 'middle' | 'bottom' | undefined;
+    /**
+     * Change the order of this cell.
+     */
     order?: number | undefined;
+    /**
+     * How many columns this cell should span.
+     *
+     * This number is out of 12 on desktop, 8 on tablet, and 4 on mobile.
+     */
     span?: number | undefined;
+    /**
+     * How many columns this cell should span on different size screens.
+     *
+     * This number is out of 12 on desktop, 8 on tablet, and 4 on mobile.
+     */
     spanDevices?: {
       desktop?: number;
       tablet?: number;
       phone?: number;
     };
-  };
-  type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
 
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let align: 'top' | 'middle' | 'bottom' | undefined = undefined;
-  export let order: number | undefined = undefined;
-  export let span: number | undefined = undefined;
-  export let spanDevices: {
-    desktop?: number;
-    tablet?: number;
-    phone?: number;
-  } = {};
+    children?: Snippet;
+  };
+  let {
+    use = [],
+    class: className = '',
+    align = undefined,
+    order = undefined,
+    span = undefined,
+    spanDevices = {},
+    children,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
 
   let element: HTMLDivElement;
 

packages/layout-grid/src/InnerGrid.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -7,25 +7,35 @@
     [className]: true,
     'mdc-layout-grid__inner': true,
   })}
+  {...restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import { classMap, useActions } from '@smui/common/internal';
 
   type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
     class?: string;
-  };
-  type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
 
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
+    children?: Snippet;
+  };
+  let {
+    use = [],
+    class: className = '',
+    children,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
 
   let element: HTMLDivElement;
 

packages/layout-grid/src/LayoutGrid.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -9,15 +9,15 @@
     'mdc-layout-grid--fixed-column-width': fixedColumnWidth,
     ['mdc-layout-grid--align-' + align]: align != null,
   })}
-  {...exclude($$restProps, ['innerGrid$'])}
+  {...exclude(restProps, ['innerGrid$'])}
 >
-  <InnerGrid {...prefixFilter($$restProps, 'innerGrid$')}>
-    <slot />
+  <InnerGrid {...prefixFilter(restProps, 'innerGrid$')}>
+    {@render children?.()}
   </InnerGrid>
 </div>
 
 <script lang="ts">
-  import type { ComponentProps } from 'svelte';
+  import type { ComponentProps, Snippet } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import {
@@ -30,24 +30,38 @@
   import InnerGrid from './InnerGrid.svelte';
 
   type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
     class?: string;
+    /**
+     * Whether to use a fixed column width instead of variable.
+     */
     fixedColumnWidth?: boolean;
+    /**
+     * Where to align the cells horizontally, if not default.
+     */
     align?: 'left' | 'right' | undefined;
+
+    children?: Snippet;
   };
-  type $$Props = OwnProps &
+  let {
+    use = [],
+    class: className = '',
+    fixedColumnWidth = false,
+    align = undefined,
+    children,
+    ...restProps
+  }: OwnProps &
     SmuiAttrs<'div', keyof OwnProps> & {
       [k in keyof ComponentProps<
         typeof InnerGrid
       > as `innerGrid\$${k}`]?: ComponentProps<typeof InnerGrid>[k];
-    };
-
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let fixedColumnWidth = false;
-  export let align: 'left' | 'right' | undefined = undefined;
+    } = $props();
 
   let element: HTMLDivElement;
 

packages/site/src/routes/demo/layout-grid/_Align.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LayoutGrid
   align="right"
   style="border: 1px solid var(--mdc-theme-secondary, #333);"

packages/site/src/routes/demo/layout-grid/_FixedColumnWidth.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LayoutGrid fixedColumnWidth>
   {#each Array(9) as _unused, i}
     <Cell>

packages/site/src/routes/demo/layout-grid/_Nested.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LayoutGrid>
   {#each Array(9) as _unused, i}
     <Cell>

packages/site/src/routes/demo/layout-grid/_Order.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LayoutGrid>
   {#each Array(9) as _unused, i}
     <Cell order={10 - i}>

packages/site/src/routes/demo/layout-grid/_Simple.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LayoutGrid>
   {#each Array(9) as _unused, i}
     <Cell>

packages/site/src/routes/demo/layout-grid/_Span.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LayoutGrid>
   {#each Array(2) as _unused, _i}
     <Cell span={6}>