[form] Fix icons rendering during SSR

Author: x0k

packages/form/src/form/context/context.ts

@@ -1,4 +1,4 @@
-import { getContext, setContext, type Snippet } from "svelte";
+import { getContext, setContext, type Component, type Snippet } from "svelte";
 
 import type { SchedulerYield } from "@/lib/scheduler.js";
 
@@ -14,7 +14,11 @@ import type { Errors } from "../errors.js";
 import type { FormValidator } from "../validator.js";
 import type { Icons } from "../icons.js";
 import { type IdSchema, toIdSchema2 } from "../id-schema.js";
-import type { FormMerger } from '../merger.js';
+import type { FormMerger } from "../merger.js";
+
+export type IconOrTranslationData = {
+  [L in Label]: [L, ...Labels[L]];
+}[Label]
 
 export interface FormContext {
   isSubmitted: boolean;
@@ -34,11 +38,9 @@ export interface FormContext {
   idSeparator: string;
   errors: Errors;
   schedulerYield: SchedulerYield;
-  iconOrTranslation: Snippet<
-    {
-      [L in Label]: [[L, ...Labels[L]]];
-    }[Label]
-  >;
+  /** @deprecated use `IconOrTranslation` instead */
+  iconOrTranslation: Snippet<[IconOrTranslationData]>;
+  IconOrTranslation: Component<{ data: IconOrTranslationData }>;
 }
 
 const FORM_CONTEXT = Symbol("form-context");

packages/form/src/form/fields/array/array-item-field.svelte

@@ -53,7 +53,7 @@
         arr[index - 1] = tmp
       }}
     >
-      {@render ctx.iconOrTranslation(["move-array-item-up"])}
+      <ctx.IconOrTranslation data={["move-array-item-up"]} />
     </Button>
     <Button
       {errors}
@@ -67,7 +67,7 @@
         arr[index + 1] = tmp
       }}
     >
-      {@render ctx.iconOrTranslation(["move-array-item-down"])}
+      <ctx.IconOrTranslation data={["move-array-item-down"]} />
     </Button>
   {/if}
   {#if canCopy}
@@ -81,7 +81,7 @@
         arr.splice(index, 0, $state.snapshot(value))
       }}
     >
-      {@render ctx.iconOrTranslation(["copy-array-item"])}
+      <ctx.IconOrTranslation data={["copy-array-item"]} />
     </Button>
   {/if}
   {#if canRemove}
@@ -95,7 +95,7 @@
         arr.splice(index, 1)
       }}
     >
-      {@render ctx.iconOrTranslation(["remove-array-item"])}
+      <ctx.IconOrTranslation data={["remove-array-item"]} />
     </Button>
   {/if}
 {/snippet}

packages/form/src/form/fields/array/fixed-array-field.svelte

@@ -66,7 +66,7 @@
       value.push(getDefaultFieldState(ctx, schemaAdditionalItems, undefined))
     }}
   >
-    {@render ctx.iconOrTranslation(["add-array-item"])}
+    <ctx.IconOrTranslation data={["add-array-item"]} />
   </Button>
 {/snippet}
 <Template

packages/form/src/form/fields/array/normal-array-field.svelte

@@ -52,7 +52,7 @@
       value?.push(getDefaultFieldState(ctx, schemaItems, undefined))
     }}
   >
-    {@render ctx.iconOrTranslation(["add-array-item"])}
+    <ctx.IconOrTranslation data={["add-array-item"]} />
   </Button>
 {/snippet}
 <Template

packages/form/src/form/fields/object/object-field.svelte

@@ -106,7 +106,7 @@
         ?? getDefaultValueForType(getSimpleSchemaType(schemaAdditionalProperties))
     }}
   >
-    {@render ctx.iconOrTranslation(["add-object-property"])}
+    <ctx.IconOrTranslation data={["add-object-property"]} />
   </Button>
 {/snippet}
 <Template

packages/form/src/form/fields/object/object-property-field.svelte

@@ -51,7 +51,7 @@
       delete obj[property]
     }}
   >
-    {@render ctx.iconOrTranslation(["remove-object-property"])}
+    <ctx.IconOrTranslation data={["remove-object-property"]} />
   </Button>
 {/snippet}
 <Template

packages/form/src/form/form-base.svelte

@@ -91,11 +91,13 @@
     getUiOptions,
     retrieveSchema,
     makeIdSchema,
+    type IconOrTranslationData,
   } from './context/index.js';
   import { fields as defaultFields } from './fields/index.js';
   import { templates as defaultTemplates } from './templates/index.js';
   import { DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR } from './id-schema.js';
-  import { DefaultFormMerger } from './merger.js'
+  import { DefaultFormMerger } from './merger.js';
+  import IconOrTranslation from './icon-or-translation.svelte';
   import SubmitButton from './submit-button.svelte';
 
   let {
@@ -206,10 +208,9 @@
     },
     get schedulerYield() {
       return schedulerYield
-    },    
-    get iconOrTranslation() {
-      return iconOrTranslation
-    }
+    },
+    iconOrTranslation,
+    IconOrTranslation,
   }
   setFromContext(ctx)
 
@@ -256,15 +257,8 @@
   } : onsubmit)
 </script>
 
-{#snippet iconOrTranslation(params: {
-  [L in Label]: [L, ...Labels[L]]
-}[Label])}
-  {@const icon = icons[params[0]]}
-  {#if icon}
-    {@render icon(params as never)}
-  {:else}
-    {translation.apply(null, params)}
-  {/if}
+{#snippet iconOrTranslation(data: IconOrTranslationData)}
+  <IconOrTranslation {data} />
 {/snippet}
 
 <Form bind:form {attributes} onsubmit={submitHandler} {config} errors={NO_ERRORS} >

packages/form/src/form/icon-or-translation.svelte

@@ -1,16 +1,15 @@
-<script lang="ts" generics="L extends Label" >
-  import { getFormContext } from './context/context.js';
-  import type { Label, Labels } from './translation.js'
+<script lang="ts">
+  import { getFormContext, type IconOrTranslationData } from './context/context.js';
 
   const ctx = getFormContext()
 
-  const { data }: { data: [L, ...Labels[L]] } = $props();
+  const { data }: { data: IconOrTranslationData } = $props();
 
   const icon = $derived(ctx.icons[data[0]])
 </script>
 
 {#if icon}
-  {@render icon(data)}
+  {@render icon(data as never)}
 {:else}
-  {ctx.translation.apply(null, data as never)}
+  {ctx.translation.apply(null, data)}
 {/if}

packages/form/src/form/use-form.svelte.ts

@@ -15,7 +15,11 @@ import type { Templates } from "./templates/index.js";
 import type { Icons } from "./icons.js";
 import type { InputsValidationMode } from "./validation.js";
 import type { Errors } from "./errors.js";
-import { setFromContext, type FormContext } from "./context/index.js";
+import {
+  setFromContext,
+  type FormContext,
+  type IconOrTranslationData,
+} from "./context/index.js";
 import { DefaultFormMerger, type FormMerger } from "./merger.js";
 import { fields as defaultFields } from "./fields/index.js";
 import { templates as defaultTemplates } from "./templates/index.js";
@@ -227,22 +231,26 @@ export function createForm<T, E>(
       get schedulerYield() {
         return schedulerYield;
       },
-      iconOrTranslation: (<L extends Label>(
+      IconOrTranslation,
+      iconOrTranslation: ((
         internals: ComponentInternals,
-        data: () => [L, ...Labels[L]]
+        data: IconOrTranslationData | (() => IconOrTranslationData)
       ) => {
-        IconOrTranslation(internals, {
-          get data() {
-            return data();
-          },
-        });
-      }) as unknown as Snippet<
-        [
-          {
-            [L in Label]: [L, ...Labels[L]];
-          }[Label],
-        ]
-      >,
+        IconOrTranslation(
+          internals,
+          // Looks like during SSR the `data` is not a getter function
+          // TODO: Clarify how to detect SSR in Svelte (not SvelteKit)
+          typeof data === "function"
+            ? {
+                get data() {
+                  return data();
+                },
+              }
+            : {
+                data,
+              }
+        );
+      }) as unknown as Snippet<[IconOrTranslationData]>,
     },
     {
       get value() {