Update ts: alternative to #5

scripts-base/package.json

@@ -15,7 +15,7 @@
   "author": "manGoweb <[email protected]> (https://mangoweb.cz)",
   "license": "MIT",
   "devDependencies": {
-    "typescript": "^3.1.6"
+    "typescript": "^3.5.1"
   },
   "prepare": "npm run build",
   "publishConfig": {

scripts-base/src/components/Component.ts

@@ -61,22 +61,27 @@ export class Component<D, E extends HTMLElement = HTMLElement> {
 				// EventListenerSpec
 				const [type, callback] = listenersSpec
 
-				this.el.addEventListener(type, callback.bind(this), false)
+				this.el.addEventListener<typeof type>(type, callback.bind(this) as EventListenerCallback<typeof type>, false)
 			} else {
 				// DelegateEventListenerSpec
 				const [type, delegateSelector, callback] = listenersSpec
 
 				this.el.addEventListener(
 					type,
-					(e: Event) => {
+					(e: HTMLElementEventMap[typeof type]) => {
 						let target = e.target
 
 						while (target && target instanceof HTMLElement && target !== this.el) {
 							if (matchesSelector(target, delegateSelector)) {
-								const delegateEvent: any = e
+								const delegateEvent: HTMLElementEventMap[typeof type] & {
+									delegateTarget?: HTMLElement
+								} = e
 								delegateEvent.delegateTarget = target
 
-								return callback.call(this, delegateEvent)
+								return (callback as DelegateEventListenerCallback<typeof type>).call(
+									this,
+									delegateEvent as DelegateEvent<typeof type>
+								)
 							}
 
 							target = target.parentElement

scripts-base/src/components/InView.ts

@@ -41,6 +41,9 @@ export class InView extends Component<InViewData> {
 			(entries) => {
 				//callback
 				entries.forEach((entry) => {
+					if (!entry.rootBounds) {
+						return
+					}
 					const target = entry.target
 					const intersectionRatio = entry.intersectionRatio
 					this._updateState(

scripts-base/src/types.d.ts

@@ -15,16 +15,17 @@ type DelegateEvent<E extends BubblingEventType> = HTMLElementEventMap[E] & {
 	delegateTarget: HTMLElement
 }
 
+type DelegateEventListenerCallback<E extends BubblingEventType> = (event: DelegateEvent<E>) => void
+
 type DelegateEventListenerSpec<E extends BubblingEventType> = [
 	E,
 	string,
-	(event: DelegateEvent<E>) => void
+	DelegateEventListenerCallback<E>
 ]
 
-type EventListenerSpec<E extends keyof HTMLElementEventMap> = [
-	E,
-	(event: HTMLElementEventMap[E]) => void
-]
+type EventListenerCallback<E extends keyof HTMLElementEventMap> = (event: HTMLElementEventMap[E]) => void
+
+type EventListenerSpec<E extends keyof HTMLElementEventMap> = [E, EventListenerCallback<E>]
 
 type EventListeners = Array<
 	| { [E in keyof HTMLElementEventMap]: EventListenerSpec<E> }[keyof HTMLElementEventMap]

scripts-base/src/utils/inject.ts

@@ -1,9 +1,7 @@
 const head = document.head
 const noop = () => {}
 
-type ScriptElementConfig = {
-	[P in Exclude<keyof HTMLScriptElement, keyof HTMLElement>]?: HTMLScriptElement[P]
-}
+type ScriptElementConfig = Partial<Omit<HTMLScriptElement, keyof HTMLElement>>
 type ScriptConfig = ScriptElementConfig & { content: string }
 
 export const inject = (
@@ -30,8 +28,8 @@ export const inject = (
 			} else {
 				const keyCast = key as keyof ScriptElementConfig
 
-				if (options[keyCast]) {
-					script[keyCast] = options[keyCast]!
+				if (options[keyCast] !== undefined) {
+					(script as any)[keyCast] = options[keyCast]
 				}
 			}
 		}