Request: Include typescript definitions

[AgarwalPragy]

Error: Could not find a declaration file for module 'svelte-confetti'.
 '/node_modules/.pnpm/svelte-confetti@1.2.2/node_modules/svelte-confetti/src/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/svelte-confetti` if it exists or add a new declaration (.d.ts) file containing `declare module 'svelte-confetti';` (ts)
  import { Confetti } from 'svelte-confetti'

@types/svelte-confetti is not in the npm registry

[LeoDog896]

I'll be interested in getting this done. @Mitcheljager will you be fine with it?

[Mitcheljager]

@LeoDog896 Absolutely! I don't tend to use Typescript myself, but I know a lot of others do.

[LeoDog896]

@Mitcheljager would it be a wiser idea to make a standard SvelteKit skeleton library instead, that way the main demo page could benefit from SSR (as mentioned in the README)? I can make two separate PRs - one that moves the project to TS/SvelteKit (but leaves the core in JavaScript), then a second one with smaller diffs but more relevant code changes to move to TypeScript.

[Mitcheljager]

I don't think the demo page should be using Sveltekit, I want it to stay easy to manage via github pages. The project is meant for Svelte, with it working in SSR simply being a nice bonus.

[LeoDog896]

Alright, thanks for the clarification!

[hallowatcher]

For anyone reading this, I simply created a new file called ambient.d.ts in the src folder of my SvelteKit app (as per the SvelteKit recommendation found here) with the following contents:

declare module 'svelte-confetti' {
  import { SvelteComponentTyped } from 'svelte';

  declare const __propDef: {
    props: {
      /**
       * The max size in pixels of the individual confetti pieces.
       * @default 10
       */
      size?: number;
      /**
       * The max horizontal range of the confetti pieces. Negative is left, positive is right. [-1, 1] would mean maximum of 200px left and 200px right.
       * @default [-0.5, 0.5]
       */
      x?: [number, number];
      /**
       * The max vertical range of the confetti pieces. Negative is down, positive is up. [-1, 1] would mean maximum of 200px down and 200px up.
       * @default [0.25, 1]
       */
      y?: [number, number];
      /**
       * Duration of the animation for each individual piece.
       * @default 2000
       */
      duration?: number;
      /**
       * If set to true the animation will play indefinitely.
       * @default false
       */
      infinite?: boolean;
      /**
       * Used to set a random delay for each piece. A large difference between each number will mean a longer spray time.
       * @default [0, 50]
       */
      delay?: [number, number];
      /**
       * Color range on the HSL color wheel. 0 to 360 is full RGB. 75 To 150 would be only green colors.
       * @default [0, 360]
       */
      colorRange?: [number, number];
      /**
       * Can be used to pick a random color from this array. Set just one array elements to have a single color. Accepts any viable css background property, including gradients and images.
       * @default []
       */
      colorArray?: number[];
      /**
       * Amount of particles spawned. The larger your spray the more pieces you might want. Be careful with too many as it might impact performance.
       * @default 50
       */
      amount?: number;
      /**
       * How many times the animation will play before stopping. Is overwritten by the "infinite" property.
       * @default 1
       */
      iterationCount?: number;
      /**
       * How far each piece falls. Accepts any css property, px, rem, vh, etc, but not 0.
       * @default "100px"
       */
      fallDistance?: string;
      /**
       * Set to true to make each confetti piece rounded.
       * @default false
       */
      rounded?: boolean;
      /**
       * Set to true to make the explosion appear in a cone like shape which might feel more realistic when dealing with a larger amount.
       * @default false
       */
      cone?: boolean;
      /**
       * Set to true to make the particles accelerate at a constant speed without "falling" down. Give it a more explosion like effect.
       * @default false
       */
      noGravity?: boolean;
      /**
       * A number from 0 to 1 that determines how far the particles spread horizontally. A low number will mean the x near the peak and the x near the end are similar.
       * @default 0.15
       */
      xSpread?: number;
      /**
       * By default the elements are removed when the animation is complete. Set to false to prevent this behaviour.
       * @default true
       */
      destroyOnComplete?: boolean;
    };
    events: {};
    slots: {};
  };

  type ConfettiProps = typeof __propDef.props;
  type ConfettiEvents = typeof __propDef.events;
  type ConfettiSlots = typeof __propDef.slots;
  export class Confetti extends SvelteComponentTyped<ConfettiProps, ConfettiEvents, ConfettiSlots> {}
}

@LeoDog896 feel free to use this inside the typings whenever you get the chance.

[Mitcheljager]

My opinion has changed a bit since the last time I commented on this issue. With f5d265e1c5d85708e778264e912739721292a71a this entire repo has moved to Svelte 4, and with that the full svelte-package flow, SvelteKit and all. The types are auto generated by svelte-package and are all included now.

[LeoDog896]

Thank you so much!