Exporting the Snap.set() function, added new tests

types/snapsvg/index.d.ts

@@ -1,6 +1,9 @@
 // Type definitions for Snap-SVG 0.4.1
 // Project: https://github.com/adobe-webplatform/Snap.svg
-// Definitions by: Lars Klein <https://github.com/lhk>, Mattanja Kern <https://github.com/mattanja>, Andrey Kurdyumov <https://github.com/kant2002>
+// Definitions by: Lars Klein <https://github.com/lhk>,
+//                 Mattanja Kern <https://github.com/mattanja>,
+//                 Andrey Kurdyumov <https://github.com/kant2002>,
+//                 Terry Mun <https://github.com/terrymun>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 /// <reference types="mina" />
 
@@ -31,6 +34,7 @@ declare namespace Snap {
     export function plugin(f:Function):void;
     export function select(query:string):Snap.Element;
     export function selectAll(query:string):any;
+    export function set(...args:Snap.Element[]): Snap.Set;
     export function snapTo(values:Array<number>|number,value:number,tolerance?:number):number;
 
     export function animate(from:number|number[],to:number|number[],updater:(n:number)=>void,duration:number,easing?:(num:number)=>number,callback?:()=>void):mina.MinaAnimation;

types/snapsvg/test/4.ts

@@ -0,0 +1,92 @@
+// Tests by Terry Mun
+// Checks that Snap.set() is properly typed
+
+const s = Snap(200, 500);
+s.attr({
+    viewBox: '0 0 200 500'
+});
+
+// Create multiple elements to be added to set
+const rect1 = s.rect(0,0,50,50);
+const rect2 = s.rect(0,100,50,50);
+const rect3 = s.rect(0,200,50,50);
+const rect4 = s.rect(0,300,50,50);
+let rect5 = null;
+
+// Create new set
+const rectSet = Snap.set(rect1, rect2);
+
+// Add missing rectangles to set
+rectSet.push(rect3, rect4);
+
+// Set all attributes
+rectSet.attr({ fill: 'steelblue' });
+
+// Animate all elements in set
+function animateTest() {
+    return new Promise(resolve => {
+    rectSet.animate({ x: 50 }, 500, mina.bounce, resolve);
+  });
+}
+
+// Animate elements individually
+function forEachTest() {
+    const colors = ['red', 'green', 'blue'];
+    return new Promise(resolve => {
+    rectSet.forEach((element, idx) => element.attr({ fill: colors[idx] || '#aaa' }));
+    resolve();
+  });
+}
+
+// Exclude rect4 from set
+function excludeTest() {
+    return new Promise(resolve => {
+    rectSet.exclude(rect4);
+    rectSet.animate({ x: 100 }, 500, mina.bounce, resolve);
+  });
+}
+
+// Remove rect2 from set (it has index of 1)
+// Add new rect5 to set
+async function spliceTest() {
+    rectSet.splice(1, 1);
+  rectSet.attr({ fill: '#000' });
+  
+  rect5 = s.rect(100, 400, 50, 50);
+  rectSet.splice(1, 0, rect5);
+    return;
+}
+
+// Clear set. Rectangles should not go back to x=0
+function clearTest() {
+    return new Promise(resolve => {
+    rectSet.clear();
+    
+    // SHOULD NOT WORK
+    rectSet.animate({ x: 0 }, 500, mina.bounce, resolve);
+    
+    // Re-add rects to set
+    rectSet.push(rect1, rect2, rect3, rect4, rect5);
+    resolve();
+  });
+}
+
+// Remove all elements from DOM that are present in set
+async function removeTest() {
+    rectSet.remove();
+  return;
+}
+
+// Start test
+async function startTest() {
+    await animateTest();
+  await forEachTest();
+  await excludeTest();
+  await spliceTest();
+  await clearTest();
+  await removeTest();
+  
+  return;
+}
+
+startTest();

types/snapsvg/tsconfig.json

@@ -21,6 +21,7 @@
         "index.d.ts",
         "test/1.ts",
         "test/2.ts",
-        "test/3.ts"
+        "test/3.ts",
+        "test/4.ts"
     ]
 }