javascripttypescriptsvgwebpacksnap.svg

how to use Snap.svg plugins (Snap.svg.zpd) with typescript and webpack 4


Hello everyone.

Am starting a new project (web app) wish require me to use the Snap.svg library along with the zpd plugin (A zoom/pan/drag plugin for Snap.svg) from https://github.com/hueitan/snap.svg.zpd.
so am using Typescript as the mains coding language along with webpack 4 as bundling solution (am new to both of these) .
I managed including Snap.svg in this environment using modified version of Snap.svg :Snap.svg-cjs (duo to some problems encountered when using the official Snap.svg with webpack (see more here) ) along type definitions for Snap.svg (just renaming the folder under PathToNodeModules/@types/snapsvg to "snapsvg-cjs" seems to work just fine)

And now am having another problem including the zpd plugin into the project (Typescript)

The problem seems to be duo to the missing type definitions for that plugin, so can anyone please help me on how to write those typings or maybe provide a workaround to include snap.svg plugins in Typescript projects without writing the typings

import * as Snap from "snapsvg-cjs";
import  {Paper} from "snapsvg-cjs";
//TODO : include the zpd plugin

let p:Paper;
p= Snap("snap") 
p.circle(100,100,50)



Thank you all.


Solution

  • for anyone facing the same problem you just need to make your own "type definitions" for that plugins . here is how i did it :

    import * as Snap from 'snapsvg-cjs';
    //or  import * as Snap from 'snap.svg'; 
    //if you are using the official version of snap.svg
    
    declare module  'snapsvg-cjs' {
       interface  Paper{
    
           zpd (options?:any, callbackFunc?:(nan:null,zpdelement:any)=>void):void
           zoomTo(zoom:number, interval?:number, ease?:(num:number)=>number, callbackFunction?:(nan:null,zpdelement:any)=>void):void;
           panTo(x:string|number, y:string|number, interval?: number, ease?:(num:number)=>number, cb?:(nan:null,zpdelement:any)=>void):void;
           rotate(a:number,x?:number, y?:number, interval?: number, ease?:(num:number)=>number, cb?:(nan:null,zpdelement:any)=>void):void;
       }
    }