feat(element): element events types

Author: nolimits4web

scripts/build-types.js

@@ -12,8 +12,10 @@ export default async function buildTypes() {
   elapsed.start('types');
   let coreEventsReact = '';
   let coreEventsVue = '';
+  let coreEventsElement = '';
   let modulesEventsReact = '';
   let modulesEventsVue = '';
+  let modulesEventsElement = '';
 
   const replaceInstances = (content) => {
     return content
@@ -29,6 +31,14 @@ export default async function buildTypes() {
     coreEventsContent = coreEventsContent
       .split('// CORE_EVENTS_START')[1]
       .split('// CORE_EVENTS_END')[0];
+    coreEventsElement = replaceInstances(
+      coreEventsContent.replace(/ ([a-zA-Z_?]*): ([^;]*);/g, (string, name) => {
+        if (name.includes('_')) {
+          return '';
+        }
+        return ` ${name.toLowerCase()}: CustomEvent;`;
+      }),
+    );
     coreEventsReact = replaceInstances(
       coreEventsContent.replace(/ ([a-zA-Z]*): \(/g, (string, name) => {
         return ` on${name[0].toUpperCase()}${name.substr(1)}?: (`;
@@ -50,6 +60,11 @@ export default async function buildTypes() {
         let eventsContent = await fs.readFile(eventsFile, 'utf-8');
         eventsContent = eventsContent.split('Events {')[1].split('}')[0].trim();
         if (eventsContent.length) {
+          modulesEventsElement += replaceInstances(
+            eventsContent.replace(/ ([a-zA-Z]*): ([^;]*);/g, (string, name) => {
+              return ` ${name.toLowerCase()}: CustomEvent;`;
+            }),
+          );
           modulesEventsReact += replaceInstances(
             eventsContent.replace(/ ([a-zA-Z]*): \(/g, (string, name) => {
               return ` on${name[0].toUpperCase()}${name.substr(1)}?: (`;
@@ -86,7 +101,7 @@ export default async function buildTypes() {
         return fs.writeFile(destPath, content);
       };
       if (file.includes('swiper-element.d.ts')) {
-        return processTypingFile('', '');
+        return processTypingFile(coreEventsElement, modulesEventsElement);
       }
       if (file.includes('swiper-react.d.ts')) {
         return processTypingFile(coreEventsReact, modulesEventsReact);

src/element/swiper-element.d.ts

@@ -1,19 +1,21 @@
-import { SwiperOptions } from '../types/swiper-options';
-import Swiper from '../types/swiper-class';
+import { SwiperOptions, Swiper } from '../types/';
 
 declare const register: (injectStyles?: boolean) => void;
 
+// prettier-ignore
 interface SwiperContainerEventMap extends HTMLElementEventMap {
-  slidechange: Event;
+  // CORE_EVENTS
+
+  // MODULES_EVENTS
 }
 
 interface SwiperContainer extends HTMLElement {}
 interface SwiperContainer extends SwiperOptions {
-  swiper?: Swiper;
-  initialize?: () => void;
-  injectStyles?: string[];
-  injectStylesUrls?: string[];
-  eventsPrefix?: string;
+  swiper: Swiper;
+  initialize: () => void;
+  injectStyles: string[];
+  injectStylesUrls: string[];
+  eventsPrefix: string;
   addEventListener<K extends keyof SwiperContainerEventMap>(
     type: K,
     listener: (this: SwiperContainer, ev: SwiperContainerEventMap[K]) => any,