metonym / svelte-time

Svelte component and action to format a timestamp using day.js
https://metonym.github.io/svelte-time
MIT License
137 stars 8 forks source link

Type errors when adding additional dayjs plugins #45

Open KieranP opened 2 months ago

KieranP commented 2 months ago
  import { svelteTime, dayjs } from 'svelte-time'

  import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
  dayjs.extend(localizedFormat)

  import timezone from 'dayjs/esm/plugin/timezone'
  dayjs.extend(timezone)

  <time
    use:svelteTime=({
      ...
    })
  />
/work/app/frontend/javascripts/components/date_time.svelte:6:16
Error: Argument of type 'PluginFunc' is not assignable to parameter of type 'PluginFunc<unknown>'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'typeof import("/work/node_modules/svelte-time/node_modules/dayjs/esm/index").Dayjs' is not assignable to type 'typeof import("/work/node_modules/dayjs/esm/index").Dayjs'.
      Types of construct signatures are incompatible.
        Type 'new (config?: string | number | Date | Dayjs | null | undefined) => Dayjs' is not assignable to type 'new (config?: string | number | Date | Dayjs | null | undefined) => Dayjs'.
          Types of parameters 'config' and 'config' are incompatible.
            Type 'string | number | Date | import("/work/node_modules/dayjs/esm/index").Dayjs | null | undefined' is not assignable to type 'string | number | Date | import("/work/node_modules/svelte-time/node_modules/dayjs/esm/index").Dayjs | null | undefined'.
              Type 'Dayjs' is not assignable to type 'string | number | Date | Dayjs | null | undefined'.
                Type 'Dayjs' is missing the following properties from type 'Dayjs': fromNow, from, toNow, to (ts)

/work/app/frontend/javascripts/components/date_time.svelte:9:16
Error: Argument of type 'PluginFunc' is not assignable to parameter of type 'PluginFunc<unknown>'. (ts)

Adding import dayjs from 'dayjs/esm' at the top fixes the type errors, but then the plugins won't be active and give the correct result.

Would be handy if I could construct and pass in dayjs:

  import dayjs from 'dayjs/esm'

  import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
  dayjs.extend(localizedFormat)

  import timezone from 'dayjs/esm/plugin/timezone'
  dayjs.extend(timezone)

  import { svelteTime } from 'svelte-time'

  <time
    use:svelteTime=({
      dayjs,
      ...
    })
  />