Added DomManager

Signed-off-by: Florian Bouillon <florian.bouillon@delta-wings.net>

packages/dom-manager/.babelrc

@@ -0,0 +1,5 @@
+{
+	"presets": [
+		"@babel/preset-env"
+	]
+}

packages/dom-manager/.gitignore

@@ -0,0 +1 @@
+/dist/

packages/dom-manager/.npmignore

@@ -0,0 +1,8 @@
+node_modules
+src
+.babelrc
+.gitignore
+.npmignore
+tsconfig.*
+webpack.config.js
+yarn-error.log

packages/dom-manager/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "@dzeio/dom-manager",
+	"version": "0.0.1",
+	"description": "JQuery but lighter",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/dzeiocom/libs.git",
+		"directory": "packages/dom-manager"
+	},
+	"author": "Aviortheking",
+	"license": "MIT",
+	"main": "./dist/index.js",
+	"browser": "./dist/browser.js",
+	"types": "./dist/index.d.ts",
+	"devDependencies": {
+		"@babel/core": "^7.11.4",
+		"@babel/preset-env": "^7.11.0",
+		"babel-loader": "^8.1.0",
+		"ts-loader": "^8.0.3",
+		"ts-node": "^9.0.0",
+		"typescript": "^4.0.2",
+		"webpack": "^4.44.1",
+		"webpack-cli": "^3.3.12"
+	},
+	"scripts": {
+		"prepublishOnly": "yarn build",
+		"build": "webpack --mode=\"production\" && tsc",
+		"test": "jest --coverage && codecov -f coverage/coverage-final.json"
+	}
+}

packages/dom-manager/src/DOMElement.ts

@@ -0,0 +1,164 @@
+type Tags = keyof HTMLElementTagNameMap
+
+export default class DOMElement<T extends HTMLElement = HTMLElement> {
+
+	public item: T
+
+	public static create<K extends Tags>(tagName: K, options?: ElementCreationOptions): DOMElement<HTMLElementTagNameMap[K]>;
+	public static create(tagName: string, options?: ElementCreationOptions): DOMElement<HTMLElement> {
+		return new DOMElement(tagName as Tags, options)
+	}
+
+	public constructor(tagName: Tags | T, options?: ElementCreationOptions) {
+		if (tagName instanceof HTMLElement) {
+			this.item = tagName
+			return
+		}
+		this.item = document.createElement(tagName, options) as any
+	}
+
+	public static get<T extends HTMLElement = HTMLElement>(query: string | T, source?: HTMLElement): DOMElement<T> | undefined {
+		if (!(query instanceof HTMLElement)) {
+			const tmp = (source || document).querySelector<T>(query)
+			if (!tmp) {
+				return undefined
+			}
+			return new DOMElement(tmp)
+		}
+		return new DOMElement(query)
+	}
+
+	public on<K extends keyof HTMLElementEventMap>(type: K, listener: (this: T, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): this
+	public on(type: string, listener: (this: T, ev: Event) => void, options?: boolean | AddEventListenerOptions): this
+	public on(type: string, listener: (this: T, ev: Event) => void, options?: boolean | AddEventListenerOptions) {
+		this.item.addEventListener(type, listener, options)
+		return this
+	}
+
+	public off<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void) {
+		this.item.removeEventListener(type, listener)
+		return this
+	}
+
+	public text(): string
+	public text(val: string): this
+	public text(val?: string) {
+		if (val) {
+			this.item.innerText = val
+			return this
+		}
+		return this.item.innerText
+	}
+
+	public html(): string
+	public html(val: string): this
+	public html(val?: string) {
+		if (val) {
+			this.item.innerHTML = val
+			return this
+		}
+		return this.item.innerText
+	}
+
+	public addClass(...classes: Array<string>) {
+		this.item.classList.add(...classes)
+		return this
+	}
+
+	public setClass(...classes: Array<string>) {
+		this.item.classList.forEach((cls) => {
+			if (!classes.includes(cls)) {
+				this.item.classList.remove(cls)
+			}
+		})
+		this.addClass(...classes)
+		return this
+	}
+
+	public classList(...classes: Array<string>): this
+	public classList(): Array<string>
+	public classList(...classes: Array<string>) {
+		if (!classes) {
+			const res: Array<string> = []
+			this.item.classList.forEach((el) => res.push(el))
+			return res
+		}
+		return this.setClass(...classes)
+	}
+
+	public toggleClass(...classes: Array<string>) {
+		for (const classe of classes) {
+			this.item.classList.toggle(classe)
+		}
+		return this
+	}
+
+	public removeClass(...classes: Array<string>) {
+		this.item.classList.remove(...classes)
+		return this
+	}
+
+	public placeBefore(item: DOMElement | HTMLElement) {
+		if (item instanceof DOMElement) {
+			item = item.item
+		}
+		const parent = item.parentElement
+		if (!parent) {
+			throw new Error('can\'t place DOMElement before item because it has no parent')
+		}
+		parent.insertBefore(this.item, item)
+		return this
+	}
+
+	public emit<E extends keyof HTMLElementEventMap>(event: E): this
+	public emit(event: string): this
+	public emit(event: string): this {
+		if (event in this.item) {
+			;(this.item as any)[event]()
+			return this
+		}
+		this.item.dispatchEvent(new Event(event))
+		return this
+	}
+
+	public attr(key: string): string | null
+	public attr(key: string, value: string): this
+	public attr(key: keyof T, value: boolean): this
+	public attr(key: string, value: null): this
+	public attr(key: string | keyof T, value?: string | boolean | null): this | string | null {
+		if (!value) {
+			return this.item.getAttribute(key as string)
+		}
+		if (value === null) {
+			this.item.removeAttribute(key as string)
+			return this
+		}
+		if (typeof value === 'boolean') {
+			this.item[key as 'draggable'] = value
+			return this
+		}
+		this.item.setAttribute(key as string, value)
+		return this
+	}
+
+
+	public data(key: string): string | null
+	public data(key: string, value: string): this
+	public data(key: string, value: null): this
+	public data(key: string, value?: string | null): this | string | null {
+		// @ts-ignore
+		return this.attr(`data-${key}`, value)
+	}
+
+	public style(key: string, value?: string | number) {
+		if (typeof value === 'undefined') {
+			return this.item.style[key as any]
+		}
+		this.item.style[key as any] = value as string
+		return this
+	}
+
+	public exist() {
+		return !!this.item
+	}
+}

packages/dom-manager/src/DOMFleetManager.ts

@@ -0,0 +1,41 @@
+import { DOMElement } from "."
+
+export default class DOMFleetManager<T extends HTMLElement = HTMLElement> {
+	public items: Array<DOMElement<T>> = []
+
+	public constructor(
+		private query: string,
+		private source?: HTMLElement
+	) {
+		this.refresh()
+	}
+
+	public each(fn: (item: DOMElement, index: number) => void) {
+		this.items.forEach((el, index) => fn(el, index))
+	}
+
+	public on<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) {
+		this.each((item) => item.on(type, listener, options))
+	}
+
+	public off<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void) {
+		this.each((item) => item.off(type, listener))
+	}
+
+	public refresh() {
+		this.items = []
+		;(this.source || document).querySelectorAll<T>(this.query).forEach((item) => {
+			const element = DOMElement.get<T>(item)
+			if (!element) {
+				return
+			}
+			this.items.push(
+				element
+			)
+		})
+	}
+
+	public [Symbol.iterator]() {
+		return this.items
+	}
+}

packages/dom-manager/src/browser.ts

@@ -0,0 +1,6 @@
+import { DOMFleetManager, DOMElement} from ".";
+
+// @ts-expect-error
+window.DOMElement = DOMElement
+// @ts-expect-error
+window.DOMFleetManager = DOMFleetManager

packages/dom-manager/src/index.ts

@@ -0,0 +1,7 @@
+import DOMElement from './DOMElement'
+import DOMFleetManager from './DOMFleetManager'
+
+export {
+	DOMElement,
+	DOMFleetManager
+}

packages/dom-manager/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"outDir": "dist"
+	},
+	"files": [
+		"src/DOMElement.ts",
+		"src/DOMFleetManager.ts",
+		"src/index.ts"
+	]
+}

packages/dom-manager/webpack.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+	entry: './src/index',
+	output: {
+		path: __dirname,
+		filename: './dist/browser.js',
+	},
+	resolve: {
+		extensions: ['.js', '.ts'],
+	},
+	module: {
+		rules: [
+			{
+				test: /\.ts$/, use: ['babel-loader', 'ts-loader'], exclude: /node_modules/
+			}
+		]
+	}
+}