araz - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

package.json

 {
   "name": "araz",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
@@ -26,7 +26,7 @@ "main": "index.ts",
   "dependencies": {
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "@types/lodash-es": "^4.17.8"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.8"
   }
 }

src/createElement.ts

@@ -1,96 +0,86 @@
-import { Element } from './types';
+import { EventHandler ,Children, ElementAttributes ,ElementCreator } from './types';
+import { forEach, isFunction, map, isString, isElement, includes, entries, camelCase, debounce, pickBy, isEmpty } from 'lodash-es';
 
-import { forEach, isArray, startsWith, toLower } from "lodash-es";
+export const onBeforeMount = (callback: () => void) => {
+    const debouncedCallback = debounce(callback, 300);
+    window.addEventListener("load", debouncedCallback);
+};
 
-
-
-const addEventAttribute = (
-  element: HTMLElement,
-  attributeName: string,
-  attributeValue: any
-) => {
-  const eventName = toLower(attributeName.substring(2));
-  element.addEventListener(eventName, attributeValue);
+export const onMounted = (callback: () => void) => {
+    const debouncedCallback = debounce(callback, 300);
+    window.addEventListener("DOMContentLoaded", debouncedCallback);
 };
 
-const addRegularAttribute = (
-  element: HTMLElement,
-  attributeName: string,
-  attributeValue: any
-) => {
-  element.setAttribute(attributeName, attributeValue);
+export const onUpdated = (callback: () => void) => {
+    const debouncedCallback = debounce(callback, 300);
+    document.addEventListener("DOMContentLoaded", debouncedCallback);
 };
 
-const addAttributes = <P extends { [key: string]: any }>(
-  element: HTMLElement,
-  props: P
-) => {
-  forEach(props, (value, prop) => {
-    if (startsWith(prop, "on")) {
-      addEventAttribute(element, prop, value);
-    } else {
-      addRegularAttribute(element, prop, value);
-    }
-  });
+export const onDestroy = (callback: () => void) => {
+    window.addEventListener("unload", callback);
 };
 
-const appendNode = (parent: HTMLElement, node: Node) => {
-  parent.appendChild(node);
+
+
+if (document.readyState == 'loading') {
+    console.log(document.readyState);
+}
+
+
+
+
+const applyStyles = (element: HTMLElement, styles: { [key: string]: string }): void => {
+    map(styles, (value, key) => {
+        element.style.setProperty(key, value);
+    });
 };
 
-const appendText = (parent: HTMLElement, text: string) => {
-  parent.appendChild(document.createTextNode(text));
+const addClasses = (element: HTMLElement, classList: string[]): void => {
+    forEach(classList, className => {
+        if (!includes(element.classList, className)) {
+            element.classList.add(className);
+        }
+    });
+}
+const addEventListeners = (element: HTMLElement, events: { [key: string]: EventHandler }): void => {
+    forEach(entries(events), ([eventName, eventHandler]) => {
+        const formattedEventName = camelCase(eventName.slice(2));
+        if (isFunction(eventHandler)) {
+            element.addEventListener(formattedEventName, eventHandler);
+        }
+    });
 };
 
-
-const addChildren = (
-  element: HTMLElement,
-  children: Node | string | (Node | string)[] | null
-) => {
-  if (children !== null && children !== undefined) {
-    const childArray = isArray(children) ? children : [children];
-    forEach(childArray, (child) => {
-      if (child instanceof Node) {
-        appendNode(element, child);
-      } else {
-        appendText(element, children.toString());
-      }
+const appendChildren = (element: HTMLElement, children: Children): void => {
+    forEach(children, child => {
+        if (isString(child)) {
+            element.appendChild(document.createTextNode(child));
+        } else if (isElement(child)) {
+            element.appendChild(child);
+        }
     });
-  }
 };
 
+export const r = ({ tag, attrs, children }: ElementCreator): HTMLElement => {
+    const element = document.createElement(tag);
 
-const h = <P extends { [key: string]: any }>({
-  name,
-  props = {} as P,
-  children = null,
-  setup,
-}: Element<P>): HTMLElement => {
-  const element: HTMLElement = document.createElement(name);
+    const validStyles = pickBy(attrs.style, isString);
 
-  addAttributes(element, props);
+    if (!isEmpty(validStyles)) {
+        applyStyles(element, validStyles);
+    }
 
-  addChildren(element, children);
+    if (attrs.classList && attrs.classList.length > 0) {
+        addClasses(element, attrs.classList);
+    }
 
-  const beforeOnMounted = (callback: () => void) => {
-    window.addEventListener("DOMContentLoaded", () => {
-      callback();
-    });
-  };
+    if (attrs) {
+        addEventListeners(element, attrs);
+    }
 
-  const onMounted = (callback: () => void) => {
-    window.addEventListener("load", () => {
-      callback();
-    });
-  };
+    if (children) {
+        appendChildren(element, children);
+    }
 
-  if (setup) {
-    setup({
-      beforeOnMounted,
-      onMounted,
-    });
-  }
-  return element;
+    return element;
 };
-
-export default h;

src/types.ts

 // types.ts
-type Setup = ({ beforeOnMounted, onMounted }: { beforeOnMounted?: any; onMounted?: any }) => void;
+export type ElementAttributes = {
+  style: Partial<CSSStyleDeclaration>;
+  classList?: string[];
+  [key: string]: any;
+};
 
-export interface Element<P extends { [key: string]: any } = {}> {
-  name: string;
-  props?: P;
-  children?: Node | string | (Node | string)[] | null;
-  setup?: Setup;
-}
+export  type EventHandler = (event: Event) => void;
+
+export type Children = Array<string | Element>;
+
+export type ElementCreator = {
+  tag: string;
+  attrs: ElementAttributes;
+  children: Children;
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5869

increased by10.34%

Dev dependency count

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Lines of code

79

decreased by-8.14%

Dependency changes

• + Added@types/lodash-es@^4.17.8

• + Added@types/lodash@4.17.11(transitive)

• + Added@types/lodash-es@4.17.12(transitive)