@thednp/shorty 2.0.7 → 2.0.8

package/test/misc.test.ts

@@ -1,400 +0,0 @@
-import { expect, it, describe, vi, afterEach } from 'vitest';
-import { getExampleDOM } from './fixtures/getExampleDom';
-import * as SHORTY from '../src/index';
-import "./fixtures/style.css";
-
-describe('Shorty Library Tests - MISC', () => {
-  const wrapper = document.createElement('div');
-  document.body.append(wrapper);
-
-  afterEach(async () => {
-    wrapper.innerHTML = '';
-  });
-
-  it('Test misc folder - emulateTransitionEnd - no transition', async () => {
-    vi.useFakeTimers();
-    const container = getExampleDOM();
-    wrapper.append(container);
-    await vi.waitFor(() => container.querySelector('.alert'), 200);
-
-    const {
-      dispatchEvent,
-      emulateTransitionEnd,
-      createCustomEvent,
-      reflow,
-      querySelector,
-      setElementStyle,
-      getElementStyle,
-      removeClass,
-      addClass,
-      one,
-    } = SHORTY;
-
-    const el = querySelector('.alert', container) as HTMLElement;
-    const btn = querySelector('.btn-close', el) as HTMLButtonElement;
-    const alertHideEvent = createCustomEvent('hide-alert',);
-
-    setElementStyle(el, {
-      transition: 'none',
-      transitionProperty: 'none',
-      transitionDuration: '0s',
-      'transition-delay': '0s',
-      '--transition-prop': 'none',
-    });
-
-    expect(getElementStyle(el, 'transitionProperty')).to.equal('none');
-    expect(getElementStyle(el, 'transition-duration')).to.equal('0s');
-    expect(getElementStyle(el, 'transitionDelay')).to.equal('0s');
-    expect(getElementStyle(el, '--transition-prop')).to.equal('none');
-
-    one(el, 'hide-alert', function hideHandler(e: typeof alertHideEvent) {
-      expect(e.target).to.equal(el);
-      expect(e.relatedTarget).to.equal(btn);
-    });
-
-    one(btn, 'click', function handleBtn(e) {
-      expect(e.target).to.equal(btn);
-      removeClass(el, 'show');
-      reflow(el);
-      alertHideEvent.relatedTarget = btn;
-      dispatchEvent(el, alertHideEvent);
-      emulateTransitionEnd(el, function () {
-        addClass(el, 'show');
-        vi.advanceTimersByTime(350);
-      });
-    });
-
-    btn.click();
-  });
-
-  it('Test misc folder - emulateTransitionEnd - default', async () => {
-    vi.useFakeTimers();
-    const container = getExampleDOM();
-    wrapper.append(container);
-    await vi.waitFor(() => container.querySelector('.alert'), 200);
-
-    const {
-      dispatchEvent,
-      emulateTransitionEnd,
-      createCustomEvent,
-      reflow,
-      querySelector,
-      removeClass,
-      addClass,
-      one,
-      focus,
-    } = SHORTY;
-    
-    const el = querySelector('.alert', container) as HTMLElement;
-    const btn = querySelector('.btn-close', el) as HTMLButtonElement;
-    const alertHideEvent = createCustomEvent('hide-alert', { relatedTarget: null });
-
-    one(el, 'hide-alert', function hideHandler(e: typeof alertHideEvent) {
-      expect(e.target).to.equal(el);
-      expect(e.relatedTarget).to.equal(btn);
-    });
-
-    one(btn, 'click', function handleBtn(e) {
-      expect(e.target).to.equal(btn);
-      removeClass(el, 'show');
-      reflow(el);
-      alertHideEvent.relatedTarget = btn;
-      dispatchEvent(el, alertHideEvent);
-      emulateTransitionEnd(el, function () {
-        addClass(el, 'show');
-        focus(btn, { preventScroll: false });
-        console.log('transitionend triggered');
-        vi.advanceTimersByTime(350);
-      });
-    });
-
-    btn.click();
-  });
-
-  it("Can use focus trap", async () => {
-    const container = getExampleDOM();
-    const { focus, toggleFocusTrap, focusableSelector } = SHORTY;
-    wrapper.append(container);
-    await vi.waitFor(() => container.querySelector('.alert'), 200);
-    const element = container.querySelector<HTMLElement>('.alert')!;
-    const firstFocusable = element.querySelector<SHORTY.FocusableElement>(focusableSelector)!;
-    const table = container.querySelector<HTMLElement>('table')!;
-    const doc = element.ownerDocument!;
-
-    focus(firstFocusable);
-    toggleFocusTrap(element);
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
-    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
-
-    await vi.waitFor(() => {
-      expect(element).to.contain(doc.activeElement);
-    }, 50)
-    toggleFocusTrap(element);
-
-    toggleFocusTrap(table);
-    table.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', shiftKey: true }));
-    table.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab' }));
-
-    await vi.waitFor(() => {
-      expect(element).to.contain(doc.activeElement);
-    }, 50)
-    toggleFocusTrap(table);
-  });
-
-  it('Test misc folder - emulateAnimationEnd - default', async () => {
-    vi.useFakeTimers();
-    const container = getExampleDOM();
-    wrapper.append(container);
-    const { emulateAnimationEnd, getElementStyle, querySelector, addClass } = SHORTY;
-    await vi.waitFor(() => container.querySelector('.alert'), 200);
-
-    const el = querySelector('.alert') as HTMLElement;
-
-    addClass(el, 'animate-test');
-    emulateAnimationEnd(el, () => {
-      console.log('animationend fired - default');
-      vi.advanceTimersByTime(350);
-    });
-    await vi.waitFor(() => {
-      expect(getElementStyle(el, 'animationName'), 'animationName').to.equal('animate-test');
-      expect(getElementStyle(el, 'animationDuration'), 'animationDuration').to.equal('0.3s');
-      expect(getElementStyle(el, 'animationDelay'), 'animationDelay').to.equal('0s');
-    }, 351)
-  });
-
-
-  it('Test misc folder - emulateAnimationEnd - no duration', async () => {
-    vi.useFakeTimers();
-    const container = getExampleDOM();
-    wrapper.append(container);
-    await vi.waitFor(() => container.querySelector('.alert'), 200);
-
-    const { emulateAnimationEnd, setElementStyle, getElementStyle, querySelector, addClass } =
-      SHORTY;
-
-    const el = querySelector('.alert', container)!;
-    // setElementStyle(el, { animationDuration: '0.1s' });
-    setElementStyle(el, { animationDuration: '0s' });
-
-    addClass(el, 'animate-test');
-
-    emulateAnimationEnd(el, () => {
-      console.log('animationend fired no duration');
-      vi.advanceTimersByTime(150);
-    });
-
-    await vi.waitFor(() => {
-      expect(getElementStyle(el, 'animationName'), 'animationName').to.equal('animate-test');
-      expect(getElementStyle(el, 'animationDuration'), 'animationDuration').to.equal('0s');
-      expect(getElementStyle(el, 'animationDelay'), 'animationDelay').to.equal('0s');
-    }, 50)
-
-  });
-
-  it('Test misc folder - everything else', async () => {
-    const container = getExampleDOM();
-    wrapper.append(container);
-    await vi.waitFor(() => container.querySelector('.alert'), 200);
-
-    const {
-      ArrayFrom,
-      Float32ArrayFrom,
-      Float64ArrayFrom,
-      distinct,
-      noop,
-      ObjectHasOwn,
-      ObjectEntries,
-      ObjectAssign,
-      ObjectKeys,
-      ObjectValues,
-      // ObjectDefineProperty,
-      ObjectFromEntries,
-      createElement,
-      createElementNS,
-      Data,
-      getInstance,
-      normalizeOptions,
-      Timer,
-      toLowerCase,
-      toUpperCase,
-      querySelector,
-      getElementsByClassName,
-    } = SHORTY;
-
-
-    const el = querySelector('.alert', container)!;
-    const table = querySelector('.table', container)!;
-
-    const defaults = { op1: true, op2: true, op3: 5, title: null };
-    const jsOps = { op1: false, op2: false, op3: 8, title: 'something' };
-    expect(ObjectHasOwn(jsOps, 'op3')).to.be.true;
-    expect(ObjectHasOwn(jsOps, 'momo')).to.be.false;
-    // @ts-expect-error
-    expect(ObjectHasOwn(null, 'momo')).to.be.false;
-    expect(normalizeOptions(el, defaults, {}, 'bs'), 'normalizeOptions(data)').to.deep.equal({
-      op1: false,
-      op2: true,
-      op3: 10,
-      title: null,
-    });
-    // @ts-expect-error
-    expect(normalizeOptions(el, defaults, jsOps, 'bs'), 'normalizeOptions(js)').to.deep.equal({
-      op1: false,
-      op2: false,
-      op3: 8,
-      title: 'something',
-    });
-    expect(noop()).to.be.undefined;
-
-    // @ts-expect-error
-    Timer.set('el', noop, 150);
-    Timer.set(el, () => console.log(el.tagName + ' has timer of 150'), 150, 'alert');
-    // @ts-expect-error
-    expect(Timer.get('el', 'alert')).to.be.null;
-    expect(Timer.get(el, 'alert')).to.not.be.undefined;
-    // @ts-expect-error
-    Timer.clear('el', 'alert');
-    Timer.clear(el, 'alert');
-    expect(Timer.get(el, 'alert')).to.be.null;
-
-    Timer.set(el, () => console.log(el.tagName + ' has timer of 250'), 250);
-    expect(Timer.get(el)).to.not.be.null;
-    Timer.clear(el);
-    expect(Timer.get(el)).to.be.null;
-
-    expect([0, 1, 1, 2, 3, 3].filter(distinct), 'filter(DISTINCT)').to.deep.equal([0, 1, 2, 3]);
-
-    expect(toLowerCase('textSample'), 'toLowerCase(string)').to.equal('textsample');
-    expect(toUpperCase('textSample'), 'toUpperCase(string)').to.equal('TEXTSAMPLE');
-
-    // expect(
-    //   Object.defineProperty({ c: 3}, 'a', { value: {b: 1}, writable: true }),
-    //   'ObjectDefineProperty(object1, prop, value)',
-    // ).to.deep.equal({ c: 3, a: {b: 1} });
-    expect(
-      ObjectAssign({ c: 3 }, { a: 1, b: 2 }),
-      'ObjectAssign(object1, object2)',
-    ).to.deep.equal({ a: 1, b: 2, c: 3 });
-    expect(ObjectEntries({ a: 1, b: 2 }), 'ObjectEntries(object)').to.deep.equal([
-      ['a', 1],
-      ['b', 2],
-    ]);
-    expect(ObjectKeys({ a: 1, b: 2 }), 'ObjectKeys(object)').to.deep.equal(['a', 'b']);
-    expect(ObjectValues({ a: 1, b: 2 }), 'ObjectValues(object)').to.deep.equal([1, 2]);
-
-    expect(Float32ArrayFrom([0, 1, 2, 3]), 'Float32ArrayFrom(array)').to.be.instanceOf(
-      Float32Array,
-    );
-    expect(Float64ArrayFrom([0, 1, 2, 3]), 'Float64ArrayFrom(array)').to.be.instanceOf(
-      Float64Array,
-    );
-    expect(Float64ArrayFrom([0, 1, 2, 3]).length, 'Float64ArrayFrom(array)').to.eq(4);
-
-    expect(
-      ArrayFrom(new Float32Array([0, 1, 2, 3])),
-      'ArrayFrom(Float32Array)',
-    ).to.be.instanceOf(Array);
-    expect(ArrayFrom(new Float64Array([0, 1, 2, 3])), 'Array(Float64Array)').to.be.instanceOf(
-      Array,
-    );
-    expect(
-      ArrayFrom(getElementsByClassName('table', container)),
-      'ArrayFrom(HTMLCollection)',
-    ).to.deep.equal([table]);
-
-    expect(createElement(), 'createElement()').to.be.undefined;
-    expect(createElement('input'), 'createElement(string)').to.be.instanceOf(HTMLInputElement);
-    const parag = createElement({
-      tagName: 'p',
-      className: 'lead',
-      innerText: 'This is a newly created paragraph.',
-    });
-    expect(parag).to.be.instanceOf(HTMLParagraphElement)
-    expect(parag?.className).to.contain('lead')
-    expect(parag?.innerHTML).to.contain('This is a newly created paragraph.');
-    expect(
-      createElement({
-        tagName: 'p',
-        textContent: 'This is a newly created paragraph.',
-      }),
-      'createElement(object)',
-    ).to.be.instanceOf(HTMLParagraphElement)
-    // .and.contain('This is a newly created paragraph.');
-
-    expect(
-      createElement({
-        className: 'lead',
-        innerText: 'This is a newly created paragraph.',
-      }),
-      'createElement(incompleteObject)',
-    ).to.be.undefined;
-
-    expect(createElementNS(''), 'createElementNS()').to.be.undefined;
-    expect(
-      createElementNS('http://www.w3.org/2000/svg', 'svg'),
-      'createElementNS(ns, string)',
-    ).to.be.instanceOf(SVGElement);
-    expect(
-      createElementNS<HTMLButtonElement>('http://www.w3.org/1999/xhtml', {
-        tagName: 'button',
-        className: 'btn',
-        innerText: 'New Item',
-        textContent: 'New Item',
-      }),
-      'createElementNS(ns, object)',
-    )
-      .to.be.instanceOf(HTMLButtonElement)
-    // .and.contain('btn')
-    // .and.contain('New Item');
-
-    expect(
-      createElementNS<SVGPathElement & { d: string }>('http://www.w3.org/2000/svg', {
-        tagName: 'path',
-        d: 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z',
-      }),
-      'createElementNS(ns, object)',
-    ).to.be.instanceOf(SVGPathElement)
-      .and.have.property('d').equal('M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
-
-    expect(
-      createElementNS<SVGPathElement & { d: string }>('http://www.w3.org/2000/svg', {
-        tagName: '',
-        className: 'icon',
-        d: 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z',
-      }),
-      'createElementNS(ns, incompleteObject)',
-    ).to.be.undefined;
-
-    // @ts-expect-error
-    Data.set(el);
-    // @ts-expect-error
-    expect(Data.get(el), 'not enough params - Data.get(node)').to.be.null;
-
-    // @ts-expect-error
-    Data.set('str', 'strKey', 'data');
-    // @ts-expect-error
-    expect(Data.get('str', 'strKey'), 'not HTMLElement - Data.get(string, string, string)').to
-      .be.null;
-
-    Data.set(el, 'Alert', { element: el });
-    expect(Data.get(el, 'Alert'), 'Data.get(node, key)').to.deep.equal({ element: el });
-    expect(getInstance(el, 'Alert'), 'getInstance(node, key)').to.deep.equal({ element: el });
-    expect(Data.getAllFor('Alert')?.size, 'Data.getAllFor(string).size').to.equal(1);
-
-    Data.remove(el, 'Alert');
-    expect(Data.get(el, 'Alert'), 'removed - Data.get(node, string)').to.be.null;
-    expect(getInstance(el, 'Alert'), 'removed - getInstance(node, string)').to.be.null;
-    expect(Data.getAllFor('Alert'), 'removed - Data.getAllFor(string)').to.be.null;
-    Data.remove(el, 'Alert');
-
-    expect(ObjectFromEntries([['a', 1], ['b', 2]])).to.deep.equal({ a: 1, b: 2 })
-  });
-});

package/test/selectors.test.ts

@@ -1,90 +0,0 @@
-import { expect, it, describe, vi, afterEach } from 'vitest';
-import { getExampleDOM } from './fixtures/getExampleDom';
-import * as SHORTY from '../src/index';
-import CustomElem from './fixtures/custom-elem';
-import "./fixtures/style.css";
-
-describe('Shorty Library Tests', () => {
-  const wrapper = document.createElement('div');
-  document.body.append(wrapper);
-  afterEach(async () => {
-    wrapper.innerHTML = '';
-  });
-
-  it('Test selectors folder', () => {
-    const container = getExampleDOM();
-    wrapper.append(container);
-
-    const {
-      closest,
-      getCustomElements,
-      getElementById,
-      getElementsByClassName,
-      getElementsByTagName,
-      matches,
-      querySelector,
-      querySelectorAll,
-    } = SHORTY;
-
-    const el = querySelector('.alert', container);
-    if (!el) return;
-    const win = window;
-
-    const CE = new CustomElem();
-    win.document.body.append(CE);
-
-    expect(querySelectorAll('div'), 'querySelectorAll(div)').to.have.length(3);
-    expect(querySelectorAll('div', win.document), 'querySelectorAll(div, parent)').to.have.length(3);
-
-    // @ts-expect-error
-    expect(querySelector(), 'querySelector()').to.be.null;
-    expect(querySelector(el), 'querySelector(node)').to.equal(el);
-    expect(querySelector('.alert'), 'querySelector(selector)').to.not.be.null;
-    expect(querySelector('.alert', win.document), 'querySelector(selector, parent)').to.eq(el);
-    // @ts-expect-error
-    expect(closest(), 'closest()').to.be.null;
-    // @ts-expect-error
-    expect(closest(el)).to.be.null;
-    expect(closest(el, 'wombat'), 'closest(el, invalidTagSelector)').to.be.null;
-    expect(closest(el, 'body'), 'closest(body)').to.eq(win.document.body);
-
-    expect(getCustomElements(), 'getCustomElements()').to.have.lengthOf(1);
-    expect(getCustomElements(win.document), 'getCustomElements(expected)').to.deep.equal([CE]);
-
-    // @ts-expect-error
-    expect(getElementById(), 'getElementById()').to.be.null;
-    expect(getElementById('alertDemo'), 'getElementById(id)').to.not.be.null;
-    expect(
-      getElementById('alertDemo', win.document),
-      'getElementById(id, parent)',
-    ).to.be.instanceOf(win.HTMLDivElement);
-
-    // @ts-expect-error
-    expect(getElementsByClassName(), 'getElementsByClassName()').to.be.instanceOf(
-      HTMLCollection,
-    );
-    expect(
-      getElementsByClassName('alert'),
-      'getElementsByClassName(selector)',
-    ).to.be.instanceOf(HTMLCollection);
-    expect(
-      getElementsByClassName('alert', win.document),
-      'getElementsByClassName(selector, parent)',
-    ).to.be.instanceOf(win.HTMLCollection);
-
-    // @ts-expect-error
-    expect(getElementsByTagName(), 'getElementsByTagName()').to.be.instanceOf(HTMLCollection);
-    expect(getElementsByTagName('div'), 'getElementsByTagName(selector)').to.be.instanceOf(
-      HTMLCollection,
-    );
-    expect(
-      getElementsByTagName('div', win.document),
-      'getElementsByTagName(selector, parent)',
-    ).to.be.instanceOf(win.HTMLCollection);
-
-    expect(
-      [...getElementsByClassName('alert', win.document)].filter(x => matches(x, 'div')),
-      'matches(node, selector)',
-    ).to.deep.equal([el]);
-  });
-});

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-   // https://janessagarrow.com/blog/typescript-and-esbuild/
-  "compilerOptions": {
-    "lib": ["DOM", "ESNext", "DOM.Iterable"],
-    // "types": ["vite", "vite/client"],
-    "rootDir": "./",
-    "baseUrl": "./",
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "Bundler",
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolvePackageJsonImports": true,
-    "useDefineForClassFields": true,
-    "strict": true,
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "removeComments": false,
-    "allowSyntheticDefaultImports": true,
-    "noEmit": true,
-    "checkJs": true,
-    "skipLibCheck": true, // allows dts-bundle-generator to import from package.json
-    "paths": {
-      "~/*": [
-        "./src/*"
-      ],
-    }
-  },
-  "include": ["src/*", "src/**/*"],
-  "exclude": ["node_modules", "experiments", "coverage", "dist"],
-}

package/vite.config.mts

@@ -1,45 +0,0 @@
-import { resolve } from 'path';
-import { defineConfig } from 'vite';
-import dts from "vite-plugin-dts";
-
-const NAME = 'SHORTY';
-
-const fileName = {
-  es: `shorty.mjs`,
-  cjs: `shorty.cjs`,
-  iife: `shorty.js`,
-};
-
-export default defineConfig({
-  base: './',
-  esbuild: {
-    legalComments: 'none',
-    minifyIdentifiers: false,
-  },
-  plugins: [
-    dts({
-      outDir: 'dist',
-      copyDtsFiles: true,
-      rollupTypes: true,
-    })
-  ],
-  build: {
-    rollupOptions: {
-      preserveEntrySignatures: "strict",
-      output: {
-        compact: true
-      }
-    },
-    minify: 'esbuild',
-    emptyOutDir: true,
-    outDir: 'dist',
-    target: 'ESNext',
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: NAME,
-      formats: ['es', 'cjs', 'iife'],
-      fileName: (format) => fileName[format],
-    },
-    sourcemap: true,
-  },
-});

package/vitest.config-ui.mts

@@ -1,26 +0,0 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  optimizeDeps: {
-    include: [
-      "@vitest/coverage-istanbul"
-    ]
-  },
-  test: {
-    css: true,
-    globals: true,
-    coverage: {
-      provider: "istanbul",
-      reporter: ["html", "text", "lcov"],
-      enabled: true,
-      include: ["src/**/*.{ts,tsx}"],
-    },
-    browser: {
-      // provider: 'webdriverio', // or 'preview'
-      enabled: true,
-      headless: false,
-      name: 'chrome', // browser name is required
-      // enableUI: true
-    },
-  },
-});

package/vitest.config.mts

@@ -1,25 +0,0 @@
-import { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  optimizeDeps: {
-    include: [
-      "@vitest/coverage-istanbul"
-    ]
-  },
-  test: {
-    css: true,
-    globals: true,
-    coverage: {
-      provider: "istanbul",
-      reporter: ["html", "text", "lcov"],
-      enabled: true,
-      include: ["src/**/*.{ts,tsx}"],
-    },
-    browser: {
-      provider: 'playwright', // or 'webdriverio'
-      enabled: true,
-      headless: true,
-      name: 'chromium', // browser name is required
-    },
-  },
-});