Use idiomatic svelte syntax for setting attribute values

inokawa · Dec 3, 2024 · 49cf1aa · 49cf1aa
1 parent beae8b4
commit 49cf1aa
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -263,14 +263,14 @@ export const App = () => {
   const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4] );
 </script>
 
-<VList {data} style={`height: 100vh;`} getKey={(_, i) => i}>
+<VList {data} style="height: 100vh;" getKey={(_, i) => i}>
   {#snippet children(item, index)}
     <div
-      style={`
-        height: ${item}px;
+      style="
+        height: {item}px;
         background: white;
         border-bottom: solid 1px #ccc;
-      `}
+      "
     >
       {index}
     </div>

diff --git a/src/svelte/VList.svelte b/src/svelte/VList.svelte
@@ -64,7 +64,7 @@
   @component
   Virtualized list component. See {@link VListProps} and {@link VListHandle}.
 -->
-<div {...rest} style={`${viewportStyle} ${rest.style || ""}`}>
+<div {...rest} style="{viewportStyle} {rest.style || ''}">
   <Virtualizer
     bind:this={ref}
     {data}

diff --git a/src/svelte/WindowVirtualizer.svelte b/src/svelte/WindowVirtualizer.svelte
@@ -122,7 +122,7 @@
       {children}
       {item}
       {index}
-      as={"div"}
+      as="div"
       offset={rerender && store.$getItemOffset(index)}
       hide={rerender && store.$isUnmeasuredItem(index)}
       {horizontal}

diff --git a/stories/svelte/Controls.svelte b/stories/svelte/Controls.svelte
@@ -54,11 +54,11 @@
   >
     {#snippet children(item)}
       <div
-        style={`
-          height: ${item.size};
+        style="
+          height: {item.size};
           background: white;
           border-bottom: solid 1px #ccc;
-        `}
+        "
       >
         {item.id}
       </div>

diff --git a/stories/svelte/Default.svelte b/stories/svelte/Default.svelte
@@ -6,14 +6,14 @@
   const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]!);
 </script>
 
-<VList {data} style={`height: 100vh;`} getKey={(_, i) => i}>
+<VList {data} style="height: 100vh;" getKey={(_, i) => i}>
   {#snippet children(item, index)}
     <div
-      style={`
-        height: ${item}px;
+      style="
+        height: {item}px;
         background: white;
         border-bottom: solid 1px #ccc;
-      `}
+      "
     >
       {index}
     </div>

diff --git a/stories/svelte/HeaderAndFooter.svelte b/stories/svelte/HeaderAndFooter.svelte
@@ -17,21 +17,21 @@
   overflow-anchor: none;
 `}
 >
-  <div style={`background-color: burlywood; height: ${headerHeight}px;`}>
+  <div style="background-color: burlywood; height: {headerHeight}px;">
     header
   </div>
   <Virtualizer {data} getKey={(_, i) => i} startMargin={headerHeight}>
     {#snippet children(item, index)}
     <div
-      style={`
-        height: ${item}px;
+      style="
+        height: {item}px;
         background: white;
         border-bottom: solid 1px #ccc;
-      `}
+      "
     >
       {index}
     </div>
   {/snippet}
   </Virtualizer>
-  <div style={`background-color: steelblue; height: 600px;`}>footer</div>
+  <div style="background-color: steelblue; height: 600px;">footer</div>
 </div>
diff --git a/stories/svelte/Horizontal.svelte b/stories/svelte/Horizontal.svelte
@@ -10,17 +10,17 @@
 <div style="padding: 10px;">
   <VList
     {data}
-    style={`width: 100%; height: 200px;`}
+    style="width: 100%; height: 200px;"
     getKey={(d) => d.id}
     horizontal
   >
     {#snippet children(item)}
       <div
-        style={`
-          width: ${item.size};
+        style="
+          width: {item.size};
           background: white;
           border-right: solid 1px #ccc;
-        `}
+        "
       >
         {item.id}
       </div>

diff --git a/stories/svelte/Nested.svelte b/stories/svelte/Nested.svelte
@@ -20,8 +20,8 @@
   overflow-anchor: none;
 `}
 >
-  <div style={`background-color: burlywood; padding: ${outerPadding}px;`}>
-    <div style={`background-color: steelblue; padding: ${innerPadding}px;`}>
+  <div style="background-color: burlywood; padding: {outerPadding}px;">
+    <div style="background-color: steelblue; padding: {innerPadding}px;">
       <Virtualizer
         {data}
         getKey={(_, i) => i}
@@ -30,11 +30,11 @@
       >
         {#snippet children(item, index)}
           <div
-            style={`
-              height: ${item}px;
+            style="
+              height: {item}px;
               background: white;
               border-bottom: solid 1px #ccc;
-            `}
+            "
           >
             {index}
           </div>

diff --git a/stories/svelte/TableElement.svelte b/stories/svelte/TableElement.svelte
@@ -10,12 +10,12 @@
   let scrollRef: HTMLElement = $state();
 </script>
 
-<div bind:this={scrollRef} style={`height: 500px; overflow: auto;`}>
+<div bind:this={scrollRef} style="height: 500px; overflow: auto;">
   <table>
     <thead>
-      <tr style={`height: ${headerHeight}px`}>
+      <tr style="height: {headerHeight}px">
         {#each COLUMN_WIDTHS as width, index}
-          <th style={`width: ${width}px`}>Header{index}</th>
+          <th style="width: {width}px">Header{index}</th>
         {/each}
       </tr>
     </thead>
@@ -29,7 +29,7 @@
     >
       {#snippet children(item)}
         {#each COLUMN_WIDTHS as width, index}
-          <th style={`width: ${width}px`}>{item} {index}</th>
+          <th style="width: {width}px">{item} {index}</th>
         {/each}
       {/snippet}
     </Virtualizer>

diff --git a/stories/svelte/WindowVirtualizer.svelte b/stories/svelte/WindowVirtualizer.svelte
@@ -11,11 +11,11 @@
     <WindowVirtualizer {data} getKey={(_, i) => i}>
       {#snippet children(item, index)}
         <div
-          style={`
-            height: ${item}px;
+          style="
+            height: {item}px;
             background: white;
             border-bottom: solid 1px #ccc;
-          `}
+          "
         >
           {index}
         </div>