@medyll/idae-be 0.1.0

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/be.d.ts

@@ -0,0 +1,68 @@
+type IsWhat = 'element' | 'array' | 'qy';
+declare class DataHandler {
+    private element;
+    constructor(element: Be);
+    get(key: string): string | null;
+    set(keyOrObject: string | Record<string, string>, value?: string): Be;
+    get beElem(): Be;
+    valueOf(): DOMStringMap | null;
+}
+declare class PropHandler {
+    private element;
+    constructor(element: Be);
+    get(name: string): any;
+    set(nameOrObject: string | Record<string, any>, value?: any): Be;
+    valueOf(): Record<string, any> | null;
+}
+declare class DomHandler {
+    private element;
+    constructor(element: Be);
+    update(content: string): Be;
+    get text(): string | null;
+    textUpdate(content: string): Be;
+    valueOf(): string | null;
+}
+declare class AttrHandler {
+    private element;
+    constructor(element: Be);
+    get(name?: string): string | null;
+    set(nameOrObject: string | Record<string, string>, value?: string): Be;
+    valueOf(): Record<string, string> | null;
+}
+export declare class Be {
+    node: HTMLElement | HTMLElement[] | string;
+    isWhat: IsWhat;
+    attr: AttrHandler;
+    dom: DomHandler;
+    prop: PropHandler;
+    data: DataHandler;
+    private constructor();
+    static elem(node: HTMLElement | HTMLElement[] | string): Be;
+    classAdd(className: string): this;
+    classRemove(className: string): this;
+    classToggle(className: string): this;
+    find(qy: string): Element | (Element | null)[] | null;
+    findAll(qy: string): Element[];
+    get html(): string | null;
+    htmlSet(content: string): this;
+    get text(): string | null;
+    textSet(content: string): this;
+    up(qy?: string): Element | (Element | null)[] | null;
+    next(qy?: string): Element | (Element | null)[] | null;
+    previous(qy?: string): Element | (Element | null)[] | null;
+    styleSet(styles: Record<string, any>): this;
+    on(eventName: string, handler: EventListener): this;
+    off(eventName: string, handler: EventListener): this;
+    append(content: string | HTMLElement): this;
+    remove(): this;
+    fetch<T extends object>(options: {
+        url: string;
+        method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS' | 'HEAD' | 'CONNECT' | 'TRACE';
+        data?: T;
+        headers?: Record<string, string>;
+    }): Promise<any>;
+    each(callback: (el: HTMLElement) => void): void;
+    private findWhile;
+}
+export declare function be(selector: string | HTMLElement | HTMLElement[]): Be;
+export {};

package/dist/be.js

@@ -0,0 +1,299 @@
+class DataHandler {
+    element;
+    constructor(element) {
+        this.element = element;
+    }
+    get(key) {
+        if (this.element.isWhat !== 'element')
+            return null;
+        return this.element.node.dataset[key] || null;
+    }
+    set(keyOrObject, value) {
+        this.element.each((el) => {
+            if (typeof keyOrObject === 'string' && value !== undefined) {
+                el.dataset[keyOrObject] = value;
+            }
+            else if (typeof keyOrObject === 'object') {
+                Object.entries(keyOrObject).forEach(([key, val]) => {
+                    el.dataset[key] = val;
+                });
+            }
+        });
+        return this.element;
+    }
+    get beElem() {
+        return this.element;
+    }
+    valueOf() {
+        if (this.element.isWhat !== 'element')
+            return null;
+        return this.element.node.dataset;
+    }
+}
+class PropHandler {
+    element;
+    constructor(element) {
+        this.element = element;
+    }
+    get(name) {
+        if (this.element.isWhat !== 'element')
+            return null;
+        return this.element.node[name];
+    }
+    set(nameOrObject, value) {
+        this.element.each((el) => {
+            if (typeof nameOrObject === 'string' && value !== undefined) {
+                el[nameOrObject] = value;
+            }
+            else if (typeof nameOrObject === 'object') {
+                Object.entries(nameOrObject).forEach(([name, val]) => {
+                    el[name] = val;
+                });
+            }
+        });
+        return this.element;
+    }
+    valueOf() {
+        if (this.element.isWhat !== 'element')
+            return null;
+        const el = this.element.node;
+        const props = {};
+        for (let prop in el) {
+            if (el.hasOwnProperty(prop)) {
+                props[prop] = el[prop];
+            }
+        }
+        return props;
+    }
+}
+class DomHandler {
+    element;
+    constructor(element) {
+        this.element = element;
+    }
+    update(content) {
+        this.element.each((el) => {
+            el.innerHTML = content;
+        });
+        return this.element;
+    }
+    get text() {
+        if (this.element.isWhat !== 'element')
+            return null;
+        return this.element.node.textContent;
+    }
+    textUpdate(content) {
+        this.element.each((el) => {
+            el.textContent = content;
+        });
+        return this.element;
+    }
+    valueOf() {
+        if (this.element.isWhat !== 'element')
+            return null;
+        return this.element.node.innerHTML;
+    }
+}
+class AttrHandler {
+    element;
+    constructor(element) {
+        this.element = element;
+    }
+    get(name) {
+        if (this.element.isWhat !== 'element')
+            return null;
+        const el = this.element.node;
+        return name ? el.getAttribute(name) : null;
+    }
+    set(nameOrObject, value) {
+        this.element.each((el) => {
+            if (typeof nameOrObject === 'string' && value !== undefined) {
+                el.setAttribute(nameOrObject, value);
+            }
+            else if (typeof nameOrObject === 'object') {
+                Object.entries(nameOrObject).forEach(([name, val]) => {
+                    el.setAttribute(name, val);
+                });
+            }
+        });
+        return this.element;
+    }
+    valueOf() {
+        if (this.element.isWhat !== 'element')
+            return null;
+        const el = this.element.node;
+        const attrs = {};
+        for (let i = 0; i < el.attributes.length; i++) {
+            const attr = el.attributes[i];
+            attrs[attr.name] = attr.value;
+        }
+        return attrs;
+    }
+}
+export class Be {
+    node;
+    isWhat;
+    attr;
+    dom;
+    prop;
+    data;
+    constructor(node) {
+        this.node = node;
+        this.isWhat = typeof node === 'string' ? 'qy' : Array.isArray(node) ? 'array' : 'element';
+        this.attr = new AttrHandler(this);
+        this.dom = new DomHandler(this);
+        this.prop = new PropHandler(this);
+        this.data = new DataHandler(this);
+    }
+    static elem(node) {
+        return new Be(node);
+    }
+    classAdd(className) {
+        this.each((el) => el.classList.add(className));
+        return this;
+    }
+    classRemove(className) {
+        this.each((el) => el.classList.remove(className));
+        return this;
+    }
+    classToggle(className) {
+        this.each((el) => el.classList.toggle(className));
+        return this;
+    }
+    find(qy) {
+        switch (this.isWhat) {
+            case 'element':
+                return this.node.querySelector(qy);
+            case 'array':
+                return this.node
+                    .map((node) => node.querySelector(qy))
+                    .filter((el) => el !== null);
+            case 'qy': {
+                const foundElement = document.querySelector(this.node);
+                return foundElement ? foundElement.querySelector(qy) : null;
+            }
+            default:
+                return null;
+        }
+    }
+    findAll(qy) {
+        switch (this.isWhat) {
+            case 'element':
+                return Array.from(this.node.querySelectorAll(qy));
+            case 'array':
+                return this.node.flatMap((node) => Array.from(node.querySelectorAll(qy)));
+            case 'qy':
+                return Array.from(document.querySelectorAll(this.node)).flatMap((node) => Array.from(node.querySelectorAll(qy)));
+            default:
+                return [];
+        }
+    }
+    get html() {
+        return this.isWhat === 'element' ? this.node.innerHTML : null;
+    }
+    htmlSet(content) {
+        this.each((el) => (el.innerHTML = content));
+        return this;
+    }
+    get text() {
+        return this.isWhat === 'element' ? this.node.textContent : null;
+    }
+    textSet(content) {
+        this.each((el) => (el.textContent = content));
+        return this;
+    }
+    up(qy) {
+        switch (this.isWhat) {
+            case 'element':
+                return this.findWhile(this.node, 'parent', qy);
+            case 'array':
+                return this.node.map((node) => this.findWhile(node, 'parent', qy));
+            case 'qy':
+                return Array.from(document.querySelectorAll(this.node)).map((node) => this.findWhile(node, 'parent', qy));
+        }
+    }
+    next(qy) {
+        switch (this.isWhat) {
+            case 'element':
+                return this.findWhile(this.node, 'next', qy);
+            case 'array':
+                return this.node.map((node) => this.findWhile(node, 'next', qy));
+            case 'qy':
+                return Array.from(document.querySelectorAll(this.node)).map((node) => this.findWhile(node, 'next', qy));
+        }
+    }
+    previous(qy) {
+        switch (this.isWhat) {
+            case 'element':
+                return this.findWhile(this.node, 'previous', qy);
+            case 'array':
+                return this.node.map((node) => this.findWhile(node, 'previous', qy));
+            case 'qy':
+                return Array.from(document.querySelectorAll(this.node)).map((node) => this.findWhile(node, 'previous', qy));
+        }
+    }
+    styleSet(styles) {
+        this.each((el) => Object.assign(el.style, styles));
+        return this;
+    }
+    on(eventName, handler) {
+        this.each((el) => el.addEventListener(eventName, handler));
+        return this;
+    }
+    off(eventName, handler) {
+        this.each((el) => el.removeEventListener(eventName, handler));
+        return this;
+    }
+    append(content) {
+        this.each((el) => {
+            if (typeof content === 'string') {
+                el.insertAdjacentHTML('beforeend', content);
+            }
+            else {
+                el.appendChild(content);
+            }
+        });
+        return this;
+    }
+    remove() {
+        this.each((el) => el.remove());
+        return this;
+    }
+    fetch(options) {
+        return fetch(options.url, {
+            method: options.method || 'GET',
+            body: options.data ? JSON.stringify(options.data) : undefined,
+            headers: options.headers || {}
+        }).then((response) => response.json());
+    }
+    each(callback) {
+        switch (this.isWhat) {
+            case 'element':
+                callback(this.node);
+                break;
+            case 'array':
+                this.node.forEach(callback);
+                break;
+            case 'qy':
+                document.querySelectorAll(this.node).forEach((el) => callback(el));
+                break;
+        }
+    }
+    findWhile(element, direction, selector) {
+        if (direction === 'parent') {
+            return selector ? element.closest(selector) : element.parentElement;
+        }
+        const siblingProperty = direction === 'next' ? 'nextElementSibling' : 'previousElementSibling';
+        let sibling = element[siblingProperty];
+        while (sibling) {
+            if (!selector || sibling.matches(selector)) {
+                return sibling;
+            }
+            sibling = sibling[siblingProperty];
+        }
+        return null;
+    }
+}
+export function be(selector) {
+    return Be.elem(selector);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { be } from './be.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+// Reexport your entry components here
+export { be } from './be.js';

package/package.json

@@ -0,0 +1,60 @@
+{
+	"name": "@medyll/idae-be",
+	"scope": "@medyll",
+	"version": "0.1.0",
+	"private": false,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"prepare": ""
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.7",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.1.9",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0-alpha.20",
+		"vite": "^5.0.11",
+		"vitest": "^1.2.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}