@thednp/shorty 2.0.0-alpha2 → 2.0.0-alpha21

package/.eslintrc.cjs

@@ -0,0 +1,224 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "tsconfig.json",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "eslint-plugin-jsdoc",
+        "eslint-plugin-prefer-arrow",
+        // "eslint-plugin-react",
+        "@typescript-eslint",
+        "prettier"
+    ],
+    "root": true,
+    "rules": {
+        "prettier/prettier": "error",
+        "@typescript-eslint/adjacent-overload-signatures": "error",
+        "@typescript-eslint/array-type": [
+            "error",
+            {
+                "default": "array"
+            }
+        ],
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                "types": {
+                    "Object": {
+                        "message": "Avoid using the `Object` type. Did you mean `object`?"
+                    },
+                    "Function": {
+                        "message": "Avoid using the `Function` type. Prefer a specific function type, like `() => void`."
+                    },
+                    "Boolean": {
+                        "message": "Avoid using the `Boolean` type. Did you mean `boolean`?"
+                    },
+                    "Number": {
+                        "message": "Avoid using the `Number` type. Did you mean `number`?"
+                    },
+                    "String": {
+                        "message": "Avoid using the `String` type. Did you mean `string`?"
+                    },
+                    "Symbol": {
+                        "message": "Avoid using the `Symbol` type. Did you mean `symbol`?"
+                    }
+                }
+            }
+        ],
+        "@typescript-eslint/consistent-type-assertions": "error",
+        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/indent": "off",
+        "@typescript-eslint/member-delimiter-style": [
+            "off",
+            {
+                "multiline": {
+                    "delimiter": "none",
+                    "requireLast": true
+                },
+                "singleline": {
+                    "delimiter": "semi",
+                    "requireLast": false
+                }
+            }
+        ],
+        "@typescript-eslint/naming-convention": "off", // error
+        "@typescript-eslint/no-empty-function": "error",
+        "@typescript-eslint/no-empty-interface": "error",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-misused-new": "error",
+        "@typescript-eslint/no-namespace": "error",
+        "@typescript-eslint/no-parameter-properties": "off",
+        "@typescript-eslint/no-shadow": [
+            "error",
+            {
+                "hoist": "all"
+            }
+        ],
+        "@typescript-eslint/no-unused-expressions": "error",
+        "@typescript-eslint/no-use-before-define": "off",
+        "@typescript-eslint/no-var-requires": "error",
+        "@typescript-eslint/prefer-for-of": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/prefer-namespace-keyword": "error",
+        "@typescript-eslint/quotes": "off",
+        "@typescript-eslint/semi": [
+            "off",
+            null
+        ],
+        "@typescript-eslint/triple-slash-reference": [
+            "error",
+            {
+                "path": "always",
+                "types": "prefer-import",
+                "lib": "always"
+            }
+        ],
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "@typescript-eslint/typedef": "off",
+        "@typescript-eslint/unified-signatures": "error",
+        "arrow-parens": [
+            "off",
+            "always"
+        ],
+        "brace-style": [
+            "off",
+            "off"
+        ],
+        "comma-dangle": "off",
+        "complexity": "off",
+        "constructor-super": "error",
+        "dot-notation": "off",
+        "eol-last": "off",
+        "eqeqeq": [
+            "error",
+            "smart"
+        ],
+        "guard-for-in": "error",
+        "id-denylist": [
+            "error",
+            "any",
+            "Number",
+            "number",
+            "String",
+            "string",
+            "Boolean",
+            "boolean",
+            "Undefined",
+            "undefined"
+        ],
+        "id-match": "error",
+        "indent": "off",
+        "jsdoc/check-alignment": "error",
+        "jsdoc/check-indentation": "error",
+        // "jsdoc/newline-after-description": "error",
+        "linebreak-style": "off",
+        "max-classes-per-file": [
+            "error",
+            1
+        ],
+        "max-len": "off",
+        "new-parens": "off",
+        "newline-per-chained-call": "off",
+        "no-bitwise": "error",
+        "no-caller": "error",
+        "no-cond-assign": "error",
+        "no-console": "error",
+        "no-debugger": "error",
+        "no-empty": "error",
+        "no-empty-function": "off",
+        "no-eval": "error",
+        "no-extra-semi": "off",
+        "no-fallthrough": "off",
+        "no-invalid-this": "off",
+        "no-irregular-whitespace": "off",
+        "no-multiple-empty-lines": "off",
+        "no-new-wrappers": "error",
+        "no-shadow": "off",
+        "no-throw-literal": "error",
+        "no-trailing-spaces": "off",
+        "no-undef-init": "error",
+        "no-underscore-dangle": "off",
+        "no-unsafe-finally": "error",
+        "no-unused-expressions": "off",
+        "no-unused-labels": "error",
+        "no-use-before-define": "off",
+        "no-var": "error",
+        "object-shorthand": "error",
+        "one-var": [
+            "error",
+            "never"
+        ],
+        "padded-blocks": [
+            "off",
+            {
+                "blocks": "never"
+            },
+            {
+                "allowSingleLineBlocks": true
+            }
+        ],
+        "prefer-arrow/prefer-arrow-functions": "error",
+        "prefer-const": "error",
+        "quote-props": "off",
+        "quotes": "off",
+        "radix": "error",
+        // "react/jsx-curly-spacing": "off",
+        // "react/jsx-equals-spacing": "off",
+        // "react/jsx-tag-spacing": [
+        //     "off",
+        //     {
+        //         "afterOpening": "allow",
+        //         "closingSlash": "allow"
+        //     }
+        // ],
+        // "react/jsx-wrap-multilines": "off",
+        "semi": "off",
+        "space-before-function-paren": "off",
+        "space-in-parens": [
+            "off",
+            "never"
+        ],
+        "spaced-comment": [
+            "error",
+            "always",
+            {
+                "markers": [
+                    "/"
+                ]
+            }
+        ],
+        "use-isnan": "error",
+        "valid-typeof": "off"
+    }
+};

package/.lgtm.yml

@@ -0,0 +1,8 @@
+extraction:
+  typescript:
+    index:
+      exclude:
+        - coverage
+        - cypress
+        - experiments
+        - node_modules

package/.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

package/README.md

@@ -5,8 +5,12 @@
 [![NPM Version](https://img.shields.io/npm/v/@thednp/shorty.svg)](https://www.npmjs.com/package/@thednp/shorty)
 [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/shorty.svg)](http://npm-stat.com/charts.html?package=@thednp/shorty)
 [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hw/@thednp/shorty)](https://www.jsdelivr.com/package/npm/@thednp/shorty)
-![cypress version](https://img.shields.io/badge/cypress-10.3.1-brightgreen)
-![typescript version](https://img.shields.io/badge/typescript-4.7.4-brightgreen)
+[![typescript version](https://img.shields.io/badge/typescript-5.2.2-brightgreen)](https://www.typescriptlang.org/)
+[![eslint version](https://img.shields.io/badge/eslint-8.49.0-brightgreen)](https://github.com/eslint)
+[![prettier version](https://img.shields.io/badge/prettier-2.8.8-brightgreen)](https://prettier.io/)
+[![cypress version](https://img.shields.io/badge/cypress-13.1.0-brightgreen)](https://cypress.io/)
+[![vite version](https://img.shields.io/badge/vite-4.4.9-brightgreen)](https://github.com/vitejs)
+
 
 A small TypeScript library with various tools, all ESLint valid and featuring everything useful for creating light libraries or web components. If there is anything that is consistently repeating itself, **shorty** can help you save up to 50% of the code required, with little to no performance cost.
 
@@ -160,6 +164,7 @@ const duration = getElementAnimationDuration(target);
 # is
 
 - **_isArray_** - check if a given value is an `Array`;
+- **_isCanvas_** - check if a given value is a `HTMLCanvasElement` instance;
 - **_isCustomElement_** - check if a given value is a `CustomElement` instance;
 - **_isDocument_** - check if a given value is a `Document` instance;
 - **_isElement_** - check if a given value is an `Element` instance;
@@ -170,7 +175,7 @@ const duration = getElementAnimationDuration(target);
 - **_isHTMLCollection_** - check if a given value is an `HTMLCollection` instance;
 - **_isHTMLElement_** - check if a given value is an `HTMLElement` instance;
 - **_isHTMLImageElement_** - check if a given value is an `HTMLImageElement` instance;
-- **_isMedia_** - check if a given value is an `SVGElement`, `HTMLImageElement` or `HTMLVideoElement` instance;
+- **_isMedia_** - check if a given value is an `SVGElement`, `HTMLImageElement`, `HTMLCanvasElement` or `HTMLVideoElement` instance;
 - **_isNode_** - check if a given value is a `Node` instance;
 - **_isNodeList_** - check if a given value is a `NodeList` instance;
 - **_isNumber_** - check if a given value is string;
@@ -214,6 +219,7 @@ if (isElementsArray(myValue)) {
 - **_normalizeOptions_** - a cool utility to normalize and crosscheck JavaScript options and their DATA API counterparts for various web components; supports namespaced options like `data-NAMESPACE-option="value"`; priority: JavaScript options > DATA API options > default options
 - **_ObjectAssign_** - a shortie for `Object.assign()` method;
 - **_ObjectEntries_** - a shortie for `Object.entries()` method;
+- **_ObjectHasOwn_** - a shortie for `Object.hasOwn()` method;
 - **_ObjectKeys_** - a shortie for `Object.keys()` method;
 - **_ObjectValues_** - a shortie for `Object.values()` method;
 - **_OriginalEvent_** - a small utility that returns a synthetic `CustomEvent` with the added `relatedTarget` and other properties;

package/cypress/e2e/att.cy.ts

@@ -0,0 +1,46 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test attr folder', () => {
+    const {
+      getAttribute,
+      setAttribute,
+      hasAttribute,
+      removeAttribute,
+      getAttributeNS,
+      setAttributeNS,
+      hasAttributeNS,
+      removeAttributeNS,
+      querySelector,
+    } = SHORTY;
+
+    cy
+      .get('.alert')
+      .should($element => {
+        const el = $element[0];
+        expect(getAttribute(el, 'class'), 'getAttribute').to.have.length.above(0);
+        setAttribute(el, 'data-att', 'momo');
+        expect(hasAttribute(el, 'data-att'), 'hasAttribute').to.be.true;
+        removeAttribute(el, 'data-att');
+        expect(hasAttribute(el, 'data-att'), 'hasAttribute').to.be.false;
+      });
+    cy.get('svg').should($svg => {
+      console.log(querySelector('svg'));
+      const svg = $svg[0] as HTMLElement;
+      const ns = 'http://www.w3.org/2000/svg';
+      expect(hasAttributeNS(ns, svg, 'transform'), 'hasAttributeNS').to.be.false;
+      setAttributeNS(ns, svg, 'transform', 'scale(0.99)');
+      expect(getAttributeNS(ns, svg, 'transform'), 'getAttributeNS').to.eq('scale(0.99)');
+      removeAttributeNS(ns, svg, 'transform');
+      expect(getAttributeNS(ns, svg, 'transform'), 'getAttributeNS').to.be.null;
+    });
+  });
+});

package/cypress/e2e/boolean.cy.ts

@@ -0,0 +1,44 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test boolean folder', () => {
+    const {
+      // these are impossible to test 100% of the branches
+      isApple,
+      isMobile,
+      isFirefox,
+      support3DTransform,
+      supportAnimation,
+      supportPassive,
+      supportTouch,
+      supportTransform,
+      supportTransition,
+      // querySelectorAll, getWindow
+    } = SHORTY;
+    cy
+      .window()
+      .then(() => {
+        expect(isApple, 'isApple').to.be.false;
+        expect(isMobile, 'isMobile').to.be.false;
+        if (Cypress.isBrowser('firefox')) {
+          expect(isFirefox, 'isFirefox').to.be.true;
+        } else {
+          expect(isFirefox, 'isFirefox').to.be.false;
+        }
+        expect(support3DTransform, 'support3DTransform').to.be.true;
+        expect(supportAnimation, 'supportAnimation').to.be.true;
+        expect(supportPassive, 'supportPassive').to.be.true;
+        expect(supportTouch, 'supportTouch').to.be.false;
+        expect(supportTransform, 'supportTransform').to.be.true;
+        expect(supportTransition, 'supportTransition').to.be.true;
+      });
+  });
+});

package/cypress/e2e/class.cy.ts

@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test class folder', () => {
+    const { addClass, hasClass, removeClass } = SHORTY;
+    cy
+      .get('.alert')
+      .then($alert => {
+        const alert = $alert[0];
+
+        addClass(alert, 'to-be-removed');
+        expect(hasClass(alert, 'to-be-removed')).to.be.true;
+        removeClass(alert, 'show');
+        expect(hasClass(alert, 'show')).to.be.false;
+      })
+      .wait(200)
+      .get('.alert')
+      .should('be.hidden');
+  });
+});

package/cypress/e2e/event.cy.ts

@@ -0,0 +1,51 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test event folder', () => {
+    const {
+      // on, off are called by one
+      one,
+      getElementsByClassName,
+    } = SHORTY;
+
+    cy
+      .get('.alert')
+      .should(($alert) => {
+
+        if ($alert[0]){
+          const [el] = $alert;
+          const [btn] = getElementsByClassName('btn-close', el);
+          const doc = btn.ownerDocument;
+          console.log(doc, btn)
+  
+          one(el, 'click', function handle(e) {
+            const message = doc.createElement('p');
+            message.innerText += 'click fired for ' + (e.currentTarget as HTMLElement).tagName;
+            el.append(message);
+            // console.log(e.target, e.currentTarget);
+          });
+  
+          one(btn, 'click', function handle(e) {
+            const message = doc.createElement('p');
+            message.innerText = 'click fired for ' + (e.target as HTMLElement).tagName;
+            el.append(message);
+          });
+        }
+      })
+      .get('.btn-close')
+      .click({ force: true })
+      .should(btn => {
+        expect(btn[0], 'event target').be.equal((btn[0].ownerDocument as Document).activeElement);
+      })
+      .get('.alert')
+      .should('contain', 'click fired for BUTTON');
+  });
+});

package/cypress/e2e/get.cy.ts

@@ -0,0 +1,168 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+import CustomElem from '../fixtures/custom-elem';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test get folder', () => {
+    const {
+      getBoundingClientRect,
+      getDocument,
+      getDocumentBody,
+      getDocumentElement,
+      getDocumentHead,
+      getElementAnimationDelay,
+      getElementAnimationDuration,
+      getElementTransitionDelay,
+      getElementTransitionDuration,
+      getElementStyle,
+      getNodeScroll,
+      getParentNode,
+      getRectRelativeToOffsetParent,
+      getUID,
+      getWindow,
+      ObjectValues,
+    } = SHORTY;
+
+    cy
+      .get('.alert')
+      .should($element => {
+        const element = $element[0];
+        element.style.transform = 'scale(1.01)';
+        const win = getWindow(element);
+        const CE = new CustomElem();
+        CE.className = 'btn btn-outline-primary';
+        win.document.body.append(CE);
+
+        // we round values so all browsers return same values
+        let { x, y, top, left, right, bottom, width, height } = getBoundingClientRect(
+          element,
+          true,
+        );
+        expect(
+          ObjectValues([x, y, top, left, right, bottom, width, height]).map(Math.round),
+          'getBoundingClientRect',
+        ).to.deep.equal([63, 87, 87, 63, 927, 204, 864, 117]);
+        element.style.transform = '';
+
+        expect(getWindow(), 'getWindow').to.be.instanceOf(Window); // root WINDOW
+        expect(getWindow(element.ownerDocument), 'getWindow(document)').to.be.instanceOf(
+          win.Window,
+        );
+        expect(getWindow(CE), 'getWindow(CustomElement)').to.be.instanceOf(win.Window);
+        expect(getWindow(CE.shadowRoot), 'getWindow(CustomElement.shadowRoot)').to.be.instanceOf(
+          win.Window,
+        );
+        expect(getWindow(win.top), 'getWindow(window)').to.be.instanceOf(win.top.Window);
+
+        expect(getDocument(), 'getDocument()').to.be.instanceOf(Document);
+        expect(getDocument(element), 'getDocument(node)').to.be.instanceOf(win.Document);
+        expect(getDocument(win.document), 'getDocument(document)').to.be.instanceOf(win.Document);
+        expect(getDocument(win), 'getDocument(window)').to.be.instanceOf(win.Document);
+
+        expect(getDocumentBody(element), 'getDocumentBody').to.be.instanceOf(win.HTMLBodyElement);
+        expect(getDocumentElement(element), 'getDocumentElement').to.be.instanceOf(
+          win.HTMLHtmlElement,
+        );
+        expect(getDocumentHead(element), 'getDocumentHead').to.be.instanceOf(win.HTMLHeadElement);
+
+        expect(getElementAnimationDelay(element), 'getElementAnimationDelay').to.equal(0);
+
+        expect(getElementAnimationDuration(element), 'getElementAnimationDuration').to.equal(0);
+
+        CE.style.animation = 'animate-me 1s ease 0.5s';
+        expect(getElementAnimationDelay(CE), 'getElementAnimationDelay - seconds').to.equal(500);
+
+        expect(getElementAnimationDuration(CE), 'getElementAnimationDuration - seconds').to.equal(
+          1000,
+        );
+
+        CE.style.animation = 'animate-me 1200ms ease 400ms';
+        expect(getElementAnimationDelay(CE), 'getElementAnimationDelay - miliseconds').to.equal(
+          400,
+        );
+
+        expect(
+          getElementAnimationDuration(CE),
+          'getElementAnimationDuration - miliseconds',
+        ).to.equal(1200);
+
+        element.style.transition = 'opacity .145s linear .1s';
+        expect(getElementTransitionDelay(element), 'getElementTransitionDelay - seconds').to.equal(
+          100,
+        );
+        expect(
+          getElementTransitionDuration(element),
+          'getElementTransitionDuration - seconds',
+        ).to.equal(145);
+
+        element.style.transition = 'opacity 140ms linear 10ms';
+        expect(
+          getElementTransitionDelay(element),
+          'getElementTransitionDelay- miliseconds',
+        ).to.equal(10);
+
+        expect(
+          getElementTransitionDuration(element),
+          'getElementTransitionDuration- miliseconds',
+        ).to.equal(140);
+
+        element.style.transition = '';
+
+        expect(getElementStyle(element, 'color'), 'getElementStyle(color)').to.equal(
+          'rgb(102, 77, 3)',
+        );
+
+        expect(getNodeScroll(win), 'getNodeScroll(window)').to.deep.equal({ x: 0, y: 0 });
+        expect(getNodeScroll(element), 'getNodeScroll(element)').to.deep.equal({ x: 0, y: 0 });
+        expect(
+          getNodeScroll(element.offsetParent as HTMLElement),
+          'getNodeScroll(element.offsetParent)',
+        ).to.deep.equal({ x: 0, y: 0 });
+        expect(getNodeScroll(getDocumentBody(element)), 'getNodeScroll(body)').to.deep.equal({
+          x: 0,
+          y: 0,
+        });
+
+        expect(getParentNode(getDocumentElement()), 'getParentNode()').to.be.instanceOf(
+          HTMLHtmlElement,
+        ); // root HTML
+        expect(getParentNode(win), 'getParentNode(window)').to.be.instanceOf(win.HTMLHtmlElement);
+        expect(getParentNode(getDocumentBody(element)), 'getParentNode(body)').to.be.instanceOf(
+          win.HTMLHtmlElement,
+        );
+        expect(getParentNode(element), 'getParentNode(node)').to.have.class('container');
+        expect(getParentNode(CE), 'getParentNode(CustomElement)').to.be.instanceOf(
+          win.HTMLBodyElement,
+        );
+        expect(
+          getParentNode(CE.shadowRoot),
+          'getParentNode(CustomElement.shadowRoot)',
+        ).to.be.instanceOf(CustomElem);
+
+        ({ x, y, width, height } = getRectRelativeToOffsetParent(
+          element,
+          getDocumentElement(win),
+          getNodeScroll(getDocumentElement(win)),
+        ));
+
+        expect(
+          [x, y, width, height].map(Math.round),
+          'getRectRelativeToOffsetParent',
+        ).to.deep.equal([68, 88, 864, 117]);
+
+        expect(getUID(element), 'getUID()').to.eq(0);
+        expect(getUID(element, 'Alert'), 'getUID(key) - set & returns').to.eq(0);
+        expect(getUID(element, 'Alert'), 'getUID(key) - returns').to.eq(0);
+        expect(getUID(win, 'Alert'), 'getUID(key) - set & returns').to.eq(1);
+        expect(getUID(win, 'Alert'), 'getUID(key) - returns').to.eq(1);
+      });
+  });
+});