RafidMuhymin / astro-spa

An Astro JS component that turns a website into an SPA and boost performance using various techniques
MIT License
391 stars 14 forks source link

Types missing for TS projects #4

Open lsimone opened 2 years ago

lsimone commented 2 years ago

Types missing for TS projects: is there any plan to support them?

Could not find a declaration file for module 'astro-spa'. '/media/DATA/proj/TESTS/my-astro-site/node_modules/.pnpm/astro-spa@1.3.9/node_modules/astro-spa/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/astro-spa` if it exists or add a new declaration (.d.ts) file containing `declare module 'astro-spa';`ts(7016)
almeidagds commented 2 years ago

Hello!

You can try to execute the suggested command line:

npm i --save-dev @types/astro-spa

This will install the needed typing files for your astro-spa module.

lsimone commented 2 years ago

Hello!

You can try to execute the suggested command line:

npm i --save-dev @types/astro-spa

This will install the needed typing files for your astro-spa module.

thanks @almeidagds .

I forgot to mention that I already tried to install types using pnpm command without success:

pnpm i --save-dev @types/astro-spa 
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@types%2Fastro-spa: Not Found - 404

@types/astro-spa is not in the npm registry, or you have no permission to fetch it.

No authorization header was set for the request.
Progress: resolved 5, reused 5, downloaded 0, added 0
johngerome commented 2 years ago

No @types for astro-spa at this moment., I think.

One way to fix this is to create a d.ts file at the root of your project and add the proper declaration reference.

For example: astro-spa.d.ts (you can check the types here Astro.spa)

declare module 'astro-spa' {
  export interface scrollIntoViewOptions {
    behavior?: 'smooth' | 'auto';
    block?: 'start' | 'center' | 'end' | 'nearest';
    inline?: 'start' | 'center' | 'end' | 'nearest';
  }
  export interface IntersectionObserverInit {
    root?: string;
    rootMargin?: string;
    threshold?: number | number[];
  }
  export interface progressBarOptions {
    height?: string;
    secondary?: boolean;
    colors?: {
      foreground?: string;
      background?: string;
    };
  }
  export interface analytics {
    trackingID: string;
    anonymizeIP?: boolean;
    colorDepth?: boolean;
    characterSet?: boolean;
    screenSize?: boolean;
    language?: boolean;
    fingerprinting?: boolean;
    trackingPeriod?: 'year' | 'month' | 'day';
  }
  export interface Props {
    analytics?: analytics;
    attributes?: Partial<HTMLScriptElement>;
    cache?: boolean;
    containerSelector?: string;
    defaultAnimation?: boolean;
    delay?: number;
    external?: boolean;
    forceRequestIdleCallback?: boolean;
    highPriorityPrefetch?: boolean;
    ignores?: string[];
    intersectionObserverOptions?: IntersectionObserverInit;
    limit?: number;
    localLinkDetector?: boolean;
    prefetch?: boolean;
    prefetchUpgradation?: boolean;
    progressBar?: boolean;
    progressBarOptions?: progressBarOptions;
    scanOnMount?: boolean;
    scrollIntoView?: boolean;
    scrollIntoViewOptions?: boolean | scrollIntoViewOptions;
    timeout?: number | false;
  }

  export function Spa(props: Props): void;
}

astro-spa

affaxltd commented 2 years ago

Thank you @johngerome ! Astro is clearly TS-centric and I wish this cool project shipped with types by default, but I appreciate the types you gave!

Graunephar commented 1 year ago

Any news or plans on getting types for this project?