make types more strict to correctly export value type

mskocik · Dec 12, 2024 · ffa115d · ffa115d
1 parent dbe5e55
commit ffa115d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 45 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -8,7 +8,8 @@
 		"sourceMap": true,
 		"allowJs": true,
 		"checkJs": true,
-		"module": "NodeNext",
-		"moduleResolution": "NodeNext"
+		"moduleResolution": "bundler",
+		"strictNullChecks": true,
+		"exactOptionalPropertyTypes": true
 	}
 }
diff --git a/src/lib/components/Calendar.svelte b/src/lib/components/Calendar.svelte
@@ -182,13 +182,13 @@
         const dateYear = date.getFullYear();
         const startYear = computedStartDate?.getFullYear();
         const endYear = endDate?.getFullYear();
-        if (computedStartDate) {
+        if (startYear && computedStartDate) {
           if (
             (startYear === dateYear && computedStartDate.getMonth() > date.getMonth())
             || (startYear > dateYear)
           ) return true;
         }
-        if (endDate) {
+        if (endYear && endDate) {
           if (
             (endYear === dateYear && endDate.getMonth() < date.getMonth())
             || endYear < dateYear

diff --git a/src/lib/components/SveltyPicker.svelte b/src/lib/components/SveltyPicker.svelte
@@ -19,16 +19,16 @@
    *  inputId?: string,
    *  name?: string,
    *  disabled?: boolean,
-   *  placeholder?: string|null|undefined,
+   *  placeholder?: string|null,
    *  required?: boolean,
-   *  value?: string|string[]|null|undefined,
+   *  value?: string|string[]|null,
    *  isRange?: boolean,
    *  startDate?: Date | string | null,
    *  endDate?: Date | string | null,
    *  pickerOnly?: boolean,
    *  startView?: number,
    *  mode?: 'auto'|'date'|'datetime'|'time',
-   *  disableDatesFn?: (currentDate: Date) => boolean,
+   *  disableDatesFn?: ((currentDate: Date) => boolean) | null,
    *  manualInput?: boolean, theme?: string,
    *  format?: string,
    *  formatType?: string,
@@ -48,19 +48,19 @@
    *  validatorAction?: Array<any>|null,
    *  ce_valueElement?: HTMLInputElement|null,
    *  ce_displayElement?: HTMLInputElement|null,
-   *  positionResolver?: Function|null,
-   *  onChange?: (value: string|string[]) => void,
+   *  positionResolver?: Function,
+   *  onChange?: (value: string|string[]|null) => void,
    *  onDateChange?: (prop: {
-   *    value: string|string[],
-   *    dateValue: Date|Date[],
+   *    value: string|string[]|null,
+   *    dateValue: Date|Date[]|null,
    *    displayValue: string,
    *    valueFormat: string,
-   *    displayFormat: string,
+   *    displayFormat: string | null,
    *    event: 'date'|'hour'|'minute'|'datetime'
    *  }) => void,
    *  onCancel?: () => void,
    *  onBlur?: () => void,
-   *  onInput?: (currentValue: string) => void,
+   *  onInput?: (currentValue: string|null) => void,
    *  actionRow?: import('svelte').Snippet<[
    *    autocloseSupported: boolean,
    *    todayBtnClasses: string,
@@ -69,7 +69,7 @@
    *    onConfirm: function,
    *    onClear: function,
    *    onToday: function,
-   *    isTodayDisabled: boolean,
+   *    isTodayDisabled: boolean|null,
    *    i18n: import('$lib/i18n/index.js').i18nType,
    *    currentMode: string
    *  ]>}
@@ -80,7 +80,7 @@
     disabled = false,
     placeholder = null,
     required = false,
-    value = $bindable(),
+    value = $bindable(null),
     isRange = false,
     startDate = null,
     endDate = null,
@@ -120,13 +120,13 @@
   if (isRange && Array.isArray(value) === false) console.warn('[svelty-picker] value property must be an array for range picker');
 
   const { iDates, iValues, iValueCombined} = initProps(value, format, i18n, formatType);
-  /** @type {string} concated by `join()` */
+  /** @type {string|null} concated by `join()` */
   let prev_value = iValueCombined;
   let value_array = $state(iValues);
   let innerDates = $state(iDates.map(date => new SvelteDate(date)));
   // svelte-ignore state_referenced_locally
   let undoHistory = $state(iValues);
-  /** @type {string} @computed */
+  /** @type {string|null} @computed */
   let value_form = $derived(value_array.length ? value_array.join(',') : null);
   let value_display = $state(computeDisplayValue());
   // svelte-ignore state_referenced_locally
@@ -146,6 +146,7 @@
   /**
    * @type {Array<{ ref: import('./Time.svelte').default }>}
    */
+  // @ts-ignore
   let widgetList = $state(
     isRange
       ? [{ref: null}, {ref: null}]
@@ -202,6 +203,7 @@
         innerDates[0].getDate() === date.getDate() &&
         resolvedMode === "date" && !required && clearToggle
       )
+        // @ts-ignore
         date = null;
     }
     // standard

diff --git a/src/lib/components/Time.svelte b/src/lib/components/Time.svelte
@@ -6,16 +6,15 @@
    * @type {{
    *  wid?: number
    *  date?: Date,
-   *  startDate?: Date,
-   *  endDate?: Date,
+   *  startDate?: Date|null,
+   *  endDate?: Date|null,
    *  hourOnly?: boolean,
    *  minuteIncrement?: number,
    *  showMeridian?: boolean,
    *  hasDateComponent?: boolean,
-   *  i18n?: import("$lib/i18n/index.js").i18nType,
-   *  ontime?: (date: Date) => void,
-   *  onupdate?: (updateProp: import('$lib/types/internal.js').UpdateProp) => void,
-   *  onswitch?: (date: string) => void,
+   *  i18n: import("$lib/i18n/index.js").i18nType,
+   *  onupdate: (updateProp: import('$lib/types/internal.js').UpdateProp) => void,
+   *  onswitch: (date: string) => void,
    * }}
    */
 
@@ -70,7 +69,11 @@
   let handleMoveMove = $state(false);
   let enableViewToggle = $state(true);
   /** @type {SvelteDate} */
-  let innerDate = $state(null);
+  let innerDate = $state(function() {
+    const date = new SvelteDate();
+    date.setHours(0,0);
+    return date;
+  }());
   watch_date(date);
 
   let selectedHour = $derived(innerDate?.getHours() || 0);
@@ -99,7 +102,9 @@
     } else if (!passedValue) {
       isMinuteView = false;
       if (!innerDate) {
-        innerDate = new SvelteDate();
+        const date = new SvelteDate();
+        date.setHours(0,0);
+        innerDate = date;
       } else {
         innerDate.setHours(0, 0);
       }

diff --git a/src/lib/utils/state.js b/src/lib/utils/state.js
@@ -3,7 +3,7 @@ import { formatDate, parseDate } from "./dateUtils.js";
 /**
  * @typedef {object} ValueInit
  * @property {string[]} iValues
- * @property {?string} iValueCombined
+ * @property {string|null} iValueCombined
  * @property {Date[]} iDates
  */
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -119,7 +119,7 @@
       <span class="hidden sm:inline">📅</span> Svelty Picker
     </a>
     <div class="header-buttons">
-      <a class="inline-flex" href="https://github.com/mskocik/svelty-picker" target="_blank" rel="noreferrer" title="GitHub repository">
+      <a class="inline-flex" href="https://github.com/mskocik/svelty-picker" target="_blank" rel="noreferrer" aria-label="GitHub repository">
         <svg width="36px" height="36px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-v-8ff9b2e6=""><path fill="currentColor" fill-rule="evenodd" d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2Z"/></svg>
       </a>
       <button class="inline-flex text-xl p-2 theme-toggle" onclick="{toggleTheme}" aria-label="Switch theme">
@@ -159,7 +159,7 @@
       </aside>
       <div class="w-100" style="display: flex;flex-wrap: none;">
         <div class="main-container vp-doc">
-          {@render children()}
+          {@render children?.()}
         </div>
         <div class="page-nav">
           {#if page_nav.length}
@@ -184,23 +184,6 @@
 </div>
 
 <style>
-  .docs-brand {
-    padding: 32px 0 ;
-    color: var(--vp-c-brand-1);
-    & b {
-      font-weight: 700;
-    }
-    & svg {
-      fill: var(--vp-c-text-1);
-    }
-  }
-  .header-link {
-    font-size: 26px;
-    padding: 0 12px;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
   .w-100 {
     width: 100%;
   }