Added emptyIfZero option to numberProxy and intProxy.

Author: ciscoheat

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - A boolean schema field didn't accept a boolean `false` value when posted, it was coerced as `true`.
 - A SuperDebug truncated string showed only the whole string length, not the truncated.
 
+### Added
+
+- Added `emptyIfZero` option to `numberProxy` and `intProxy`.
+
 ## [1.4.0] - 2023-07-20
 
 ### Fixed

src/lib/client/proxies.ts

@@ -30,41 +30,45 @@ type DefaultOptions = {
     | 'iso';
   delimiter?: '.' | ',';
   empty?: 'null' | 'undefined';
+  emptyIfZero?: boolean;
 };
 
 const defaultOptions: DefaultOptions = {
   trueStringValue: 'true',
-  dateFormat: 'iso'
+  dateFormat: 'iso',
+  emptyIfZero: true
 };
 
-export function intProxy<
+///// Proxy functions ///////////////////////////////////////////////
+
+export function booleanProxy<
   T extends Record<string, unknown>,
   Path extends FormPath<T>
 >(
   form: Writable<T>,
   path: Path,
-  options: Pick<DefaultOptions, 'empty'> = {}
+  options: Pick<DefaultOptions, 'trueStringValue'> = {
+    trueStringValue: 'true'
+  }
 ) {
-  return _stringProxy(form, path, 'int', {
+  return _stringProxy(form, path, 'boolean', {
     ...defaultOptions,
     ...options
-  }) as FormPathType<T, Path> extends number ? Writable<string> : never;
+  }) as FormPathType<T, Path> extends boolean ? Writable<string> : never;
 }
 
-export function booleanProxy<
+export function intProxy<
   T extends Record<string, unknown>,
   Path extends FormPath<T>
 >(
   form: Writable<T>,
   path: Path,
-  options: Pick<DefaultOptions, 'trueStringValue'> = {
-    trueStringValue: 'true'
-  }
+  options: Pick<DefaultOptions, 'empty' | 'emptyIfZero'> = {}
 ) {
-  return _stringProxy(form, path, 'boolean', {
+  return _stringProxy(form, path, 'int', {
     ...defaultOptions,
     ...options
-  }) as FormPathType<T, Path> extends boolean ? Writable<string> : never;
+  }) as FormPathType<T, Path> extends number ? Writable<string> : never;
 }
 
 export function numberProxy<
@@ -73,7 +77,7 @@ export function numberProxy<
 >(
   form: Writable<T>,
   path: Path,
-  options: Pick<DefaultOptions, 'empty' | 'delimiter'> = {}
+  options: Pick<DefaultOptions, 'empty' | 'emptyIfZero' | 'delimiter'> = {}
 ) {
   return _stringProxy(form, path, 'number', {
     ...defaultOptions,
@@ -117,6 +121,8 @@ export function stringProxy<
   }) as FormPathType<T, Path> extends string ? Writable<string> : never;
 }
 
+///// Implementation ////////////////////////////////////////////////
+
 /**
  * Creates a string store that will pass its value to a field in the form.
  * @param form The form
@@ -134,8 +140,13 @@ function _stringProxy<
   options: DefaultOptions
 ): Writable<string> {
   function toValue(value: unknown) {
-    if (!value && options.empty !== undefined)
+    if (
+      !value &&
+      options.empty !== undefined &&
+      (value !== 0 || options.emptyIfZero)
+    ) {
       return options.empty === 'null' ? null : undefined;
+    }
 
     if (typeof value === 'number') {
       value = value.toString();
@@ -157,8 +168,12 @@ function _stringProxy<
     if (type == 'number') num = parseFloat(numberToConvert);
     else num = parseInt(numberToConvert, 10);
 
-    if (options.empty !== undefined && (isNaN(num) || num == 0))
+    if (
+      options.empty !== undefined &&
+      ((num === 0 && options.emptyIfZero) || isNaN(num))
+    ) {
       return options.empty == 'null' ? null : undefined;
+    }
 
     return num;
   }

src/routes/Navigation.svelte

@@ -13,7 +13,8 @@
   <a href="/reset">Reset</a> |
   <a href="/url">URL</a> |
   <a href="/tainted">Tainted</a> |
-  <a href="/proxies">Proxies</a>
+  <a href="/proxies">Proxies</a> |
+  <a href="/tests/datetime-local">Proxies 2</a>
   <br />
   <a href="/properly-nested">Properly nested</a> |
   <a href="/files">Files</a> |

src/routes/tests/datetime-local/+page.svelte

@@ -31,30 +31,73 @@
     empty: 'undefined'
   });
 
-  const num = numberProxy(form, 'number', {
+  const emptyUndef = intProxy(form, 'emptyUndef', {
     empty: 'undefined'
   });
+
+  const emptyZero = numberProxy(form, 'emptyZero', {
+    empty: 'undefined',
+    emptyIfZero: false
+  });
 </script>
 
 <SuperDebug data={{ $form, $tainted }} />
 
 <form method="POST" use:enhance>
   <label>
-    Number: <input name="number" type="number" bind:value={$num} />
-    {#if $errors.number}<span class="invalid">{$errors.number}</span>{/if}
+    Empty if undefined and zero: <input
+      name="emptyUndef"
+      type="number"
+      bind:value={$emptyUndef}
+    />
+    <span class="value">
+      {$emptyUndef === '' ? 'undefined' : $emptyUndef}
+    </span>
+    {#if $errors.emptyUndef}
+      <span class="invalid">{$errors.emptyUndef}</span>
+    {/if}
   </label>
+
   <label>
-    Name: <input name="date" type="datetime-local" bind:value={$date} />
-    {#if $errors.date}<span class="invalid">{$errors.date}</span>{/if}
+    Empty if undefined and not zero: <input
+      name="emptyZero"
+      type="number"
+      bind:value={$emptyZero}
+    />
+    <span class="value">
+      {$emptyZero === '' ? 'undefined' : $emptyZero}
+    </span>
+    {#if $errors.emptyZero}
+      <span class="invalid">{$errors.emptyZero}</span>
+    {/if}
   </label>
+
   <label>
-    Number2: <input
+    Normal number: <input
       name="number2"
       type="number"
       bind:value={$form.number2}
     />
+    <span class="value">
+      {$form.number2}
+    </span>
     {#if $errors.number2}<span class="invalid">{$errors.number2}</span>{/if}
   </label>
+
+  <label>
+    Date between 2021-2023: <input
+      name="date"
+      type="datetime-local"
+      bind:value={$date}
+    />
+    <span class="value">
+      {$date === ''
+        ? 'invalid-date'
+        : new Date($date).toISOString().slice(0, 10)}
+    </span>
+    {#if $errors.date}<span class="invalid">{$errors.date}</span>{/if}
+  </label>
+
   <div>
     <button>Submit</button>
   </div>
@@ -71,5 +114,10 @@
     .invalid {
       color: crimson;
     }
+
+    .value {
+      font-weight: normal;
+      color: mediumseagreen;
+    }
   }
 </style>

src/routes/tests/datetime-local/schema.ts

@@ -1,8 +1,9 @@
 import { z } from 'zod';
 
 export const schema = z.object({
-  number: z.number().optional(),
-  number2: z.number().optional(),
+  emptyUndef: z.number().optional(),
+  number2: z.number().nullable(),
+  emptyZero: z.number().optional(),
   date: z
     .date()
     .min(new Date('2021-01-01'))