ts-dom-utils 1.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -4
- package/dist/DOMisReady.cjs +1 -0
- package/dist/DOMisReady.d.cts +33 -0
- package/dist/DOMisReady.d.ts +33 -0
- package/dist/DOMisReady.js +1 -0
- package/dist/chunk-22TR3O4D.js +1 -0
- package/dist/chunk-AR3IDUAF.js +1 -0
- package/dist/chunk-QYTVIVCC.js +1 -0
- package/dist/chunk-YC4DGQBN.js +1 -0
- package/dist/createElement.cjs +1 -52
- package/dist/createElement.d.cts +31 -0
- package/dist/createElement.d.ts +16 -0
- package/dist/createElement.js +1 -6
- package/dist/index.cjs +1 -72
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -14
- package/dist/qs.cjs +1 -28
- package/dist/qs.d.cts +14 -0
- package/dist/qs.d.ts +5 -0
- package/dist/qs.js +1 -6
- package/dist/qsa.cjs +1 -28
- package/dist/qsa.d.cts +17 -0
- package/dist/qsa.d.ts +9 -0
- package/dist/qsa.js +1 -6
- package/package.json +5 -4
- package/dist/chunk-2CYKZHHS.js +0 -32
- package/dist/chunk-MRTNZYZJ.js +0 -8
- package/dist/chunk-QUWBOENH.js +0 -8
package/README.md
CHANGED
|
@@ -3,6 +3,19 @@ A lightweight TypeScript library that provides simple wrappers around common DOM
|
|
|
3
3
|
It allows you to write less code.
|
|
4
4
|
Although it's written in TypeScript, it can also be used in JavaScript projects.
|
|
5
5
|
|
|
6
|
+
## Table of Contents
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
- [Installation](#installation)
|
|
10
|
+
- [Features](#features)
|
|
11
|
+
- [Functions](#functions)
|
|
12
|
+
- [createElement](#createelement)
|
|
13
|
+
- [DOMisReady](#domisready)
|
|
14
|
+
- [qs](#qs)
|
|
15
|
+
- [qsa](#qsa)
|
|
16
|
+
- [How to Contribute](#how-to-contribute)
|
|
17
|
+
- [Support This Project](#support-this-project)
|
|
18
|
+
|
|
6
19
|
## Installation
|
|
7
20
|
|
|
8
21
|
```shell
|
|
@@ -16,6 +29,7 @@ yarn add ts-dom-utils
|
|
|
16
29
|
- Strong TypeScript typings for better editor autocompletion and error checking.
|
|
17
30
|
- Compatible with both TypeScript and JavaScript projects.
|
|
18
31
|
- Simple and intuitive API.
|
|
32
|
+
- Tree-shakeable
|
|
19
33
|
|
|
20
34
|
|
|
21
35
|
## Functions
|
|
@@ -29,15 +43,16 @@ import { createElement } from 'ts-dom-utils';
|
|
|
29
43
|
|
|
30
44
|
const button = createElement('button', {
|
|
31
45
|
id: 'my-button',
|
|
32
|
-
'aria-expandended': 'false',
|
|
33
46
|
class: ['btn', 'btn-primary'],
|
|
34
47
|
text: 'Click me',
|
|
35
48
|
dataset: {
|
|
36
|
-
action: 'open-
|
|
49
|
+
action: 'open-menu',
|
|
37
50
|
},
|
|
51
|
+
'aria-expandended': 'false',
|
|
38
52
|
});
|
|
39
53
|
|
|
40
54
|
document.body.appendChild(button);
|
|
55
|
+
// <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
|
|
41
56
|
```
|
|
42
57
|
|
|
43
58
|
| Param | Default | Description |
|
|
@@ -47,6 +62,34 @@ document.body.appendChild(button);
|
|
|
47
62
|
| target | document | The Document in which to create the element. |
|
|
48
63
|
---
|
|
49
64
|
|
|
65
|
+
## `DOMisReady`
|
|
66
|
+
`DOMisReady` is a function that returns a Promise. This Promise resolves when the provided DOM is ready, i.e., when the document's readyState is not 'loading'. This can be used to delay script execution until the DOM is fully constructed and can be safely manipulated.
|
|
67
|
+
```typescript
|
|
68
|
+
import { DOMisReady, qs } from 'ts-dom-utils';
|
|
69
|
+
|
|
70
|
+
// using then
|
|
71
|
+
DOMisReady().then(() => {
|
|
72
|
+
// DOM manipulation code here
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
// using async/await
|
|
76
|
+
(async function() {
|
|
77
|
+
await DOMisReady();
|
|
78
|
+
// DOM manipulation code here
|
|
79
|
+
})();
|
|
80
|
+
|
|
81
|
+
// checking if an iframe's document is ready
|
|
82
|
+
const iframe = qs<HTMLIFrameElement>('iframe');
|
|
83
|
+
DOMisReady(iframe.contentDocument).then(() => {
|
|
84
|
+
// iframe DOM manipulation code here
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
| Param | Default | Description |
|
|
89
|
+
|-------|-----------|-------------------------|
|
|
90
|
+
| doc | document | The Document to check. |
|
|
91
|
+
---
|
|
92
|
+
|
|
50
93
|
### `qs`
|
|
51
94
|
A wrapper function for `document.querySelector`.
|
|
52
95
|
|
|
@@ -54,8 +97,8 @@ Example
|
|
|
54
97
|
```typescript
|
|
55
98
|
import { qs } from 'ts-dom-utils';
|
|
56
99
|
|
|
57
|
-
const
|
|
58
|
-
const button = qs<HTMLButtonElement>('button',
|
|
100
|
+
const container = qs<HTMLDivElement>('.footer > .buttons');
|
|
101
|
+
const button = qs<HTMLButtonElement>('button', container);
|
|
59
102
|
```
|
|
60
103
|
| Param | Default | Description |
|
|
61
104
|
|----------|------------|-----------------------------------------------------|
|
|
@@ -72,9 +115,20 @@ Example
|
|
|
72
115
|
import { qsa } from 'ts-dom-utils';
|
|
73
116
|
|
|
74
117
|
const buttons = qsa<HTMLButtonElement>('.btn');
|
|
118
|
+
|
|
119
|
+
const menu = qs<HTMLDivElement>('.menu');
|
|
120
|
+
const menuButtons = qsa<HTMLButtonElement>('.btn', menu);
|
|
75
121
|
```
|
|
76
122
|
|
|
77
123
|
| Param | Default | Description |
|
|
78
124
|
|----------|-----------|-----------------------------------------------------|
|
|
79
125
|
| selector | undefined | The selector to match against. |
|
|
80
126
|
| parent | document | The ParentNode in which to search for the selector. |
|
|
127
|
+
|
|
128
|
+
## How to Contribute
|
|
129
|
+
|
|
130
|
+
We welcome any contributions! If you have an idea for a new feature or tool, please feel free to open an issue to discuss it. You can also submit a pull request if you've developed a feature or fix that you'd like to contribute back.
|
|
131
|
+
|
|
132
|
+
### Support This Project
|
|
133
|
+
|
|
134
|
+
This project is developed and maintained by a single developer. If you find it useful and would like to support its continued development, you can do so through [GitHub Sponsors](https://github.com/rafaucau/ts-dom-utils?sponsor=1). Any amount is appreciated!
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var s=(t,e)=>{for(var d in e)r(t,d,{get:e[d],enumerable:!0})},f=(t,e,d,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of u(e))!m.call(t,n)&&n!==d&&r(t,n,{get:()=>e[n],enumerable:!(i=a(e,n))||i.enumerable});return t};var D=t=>f(r({},"__esModule",{value:!0}),t);var c={};s(c,{default:()=>o});module.exports=D(c);function o(t=document){return new Promise(e=>{if(t.readyState!=="loading")return e();t.addEventListener("DOMContentLoaded",()=>e())})}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This Promise resolves when the provided DOM is ready.
|
|
3
|
+
* This can be used to delay script execution until the DOM is fully constructed and can be safely manipulated.
|
|
4
|
+
*
|
|
5
|
+
* @param doc - The Document object to check for readiness.
|
|
6
|
+
* Defaults to the global document.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* import { DOMisReady } from 'ts-dom-utils';
|
|
10
|
+
* // using then
|
|
11
|
+
* DOMisReady().then(() => {
|
|
12
|
+
* // DOM manipulation code here
|
|
13
|
+
* });
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* import { DOMisReady } from 'ts-dom-utils';
|
|
17
|
+
* // using async/await
|
|
18
|
+
* (async function() {
|
|
19
|
+
* await DOMisReady();
|
|
20
|
+
* // DOM manipulation code here
|
|
21
|
+
* })();
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* import { DOMisReady } from 'ts-dom-utils';
|
|
25
|
+
* const iframe = document.querySelector('iframe');
|
|
26
|
+
* // check if the iframe's document is ready
|
|
27
|
+
* DOMisReady(iframe.contentDocument).then(() => {
|
|
28
|
+
* // iframe DOM manipulation code here
|
|
29
|
+
* });
|
|
30
|
+
*/
|
|
31
|
+
declare function DOMisReady(doc?: Document): Promise<void>;
|
|
32
|
+
|
|
33
|
+
export { DOMisReady as default };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This Promise resolves when the provided DOM is ready.
|
|
3
|
+
* This can be used to delay script execution until the DOM is fully constructed and can be safely manipulated.
|
|
4
|
+
*
|
|
5
|
+
* @param doc - The Document object to check for readiness.
|
|
6
|
+
* Defaults to the global document.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* import { DOMisReady } from 'ts-dom-utils';
|
|
10
|
+
* // using then
|
|
11
|
+
* DOMisReady().then(() => {
|
|
12
|
+
* // DOM manipulation code here
|
|
13
|
+
* });
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* import { DOMisReady } from 'ts-dom-utils';
|
|
17
|
+
* // using async/await
|
|
18
|
+
* (async function() {
|
|
19
|
+
* await DOMisReady();
|
|
20
|
+
* // DOM manipulation code here
|
|
21
|
+
* })();
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* import { DOMisReady } from 'ts-dom-utils';
|
|
25
|
+
* const iframe = document.querySelector('iframe');
|
|
26
|
+
* // check if the iframe's document is ready
|
|
27
|
+
* DOMisReady(iframe.contentDocument).then(() => {
|
|
28
|
+
* // iframe DOM manipulation code here
|
|
29
|
+
* });
|
|
30
|
+
*/
|
|
31
|
+
declare function DOMisReady(doc?: Document): Promise<void>;
|
|
32
|
+
|
|
33
|
+
export { DOMisReady as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a}from"./chunk-QYTVIVCC.js";export{a as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function n(e,t=document){return t.querySelectorAll(e)}export{n as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function o(r,n={},a=document){let e=a.createElement(r);return Object.entries(n).forEach(([s,t])=>{if(s==="class"){Array.isArray(t)?e.classList.add(...t):e.classList.add(t);return}if(s==="dataset"&&typeof t=="object"&&t!==null){Object.entries(t).forEach(([i,c])=>{e.dataset[i]=c});return}if(s==="text"){e.textContent=t;return}e.setAttribute(s,t)}),e}export{o as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function n(e=document){return new Promise(t=>{if(e.readyState!=="loading")return t();e.addEventListener("DOMContentLoaded",()=>t())})}export{n as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function n(e,t=document){return t.querySelector(e)}export{n as a};
|
package/dist/createElement.cjs
CHANGED
|
@@ -1,52 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/createElement.ts
|
|
21
|
-
var createElement_exports = {};
|
|
22
|
-
__export(createElement_exports, {
|
|
23
|
-
default: () => createElement
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(createElement_exports);
|
|
26
|
-
function createElement(tagName, options = {}, target = document) {
|
|
27
|
-
const element = target.createElement(tagName);
|
|
28
|
-
Object.entries(options).forEach(([key, value]) => {
|
|
29
|
-
if (key === "class") {
|
|
30
|
-
if (Array.isArray(value)) {
|
|
31
|
-
element.classList.add(...value);
|
|
32
|
-
} else {
|
|
33
|
-
element.classList.add(value);
|
|
34
|
-
}
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
if (key === "dataset" && typeof value === "object" && value !== null) {
|
|
38
|
-
Object.entries(value).forEach(
|
|
39
|
-
([dataKey, dataValue]) => {
|
|
40
|
-
element.dataset[dataKey] = dataValue;
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
if (key === "text") {
|
|
46
|
-
element.textContent = value;
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
element.setAttribute(key, value);
|
|
50
|
-
});
|
|
51
|
-
return element;
|
|
52
|
-
}
|
|
1
|
+
"use strict";var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var l=(s,t)=>{for(var a in t)i(s,a,{get:t[a],enumerable:!0})},p=(s,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of f(t))!m.call(s,e)&&e!==a&&i(s,e,{get:()=>t[e],enumerable:!(r=d(t,e))||r.enumerable});return s};var E=s=>p(i({},"__esModule",{value:!0}),s);var x={};l(x,{default:()=>c});module.exports=E(x);function c(s,t={},a=document){let r=a.createElement(s);return Object.entries(t).forEach(([e,n])=>{if(e==="class"){Array.isArray(n)?r.classList.add(...n):r.classList.add(n);return}if(e==="dataset"&&typeof n=="object"&&n!==null){Object.entries(n).forEach(([o,g])=>{r.dataset[o]=g});return}if(e==="text"){r.textContent=n;return}r.setAttribute(e,n)}),r}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Create a new element with the provided options.
|
|
3
|
+
* @param tagName - The name of the element type to create.
|
|
4
|
+
* @param options - The options to use when creating the element.
|
|
5
|
+
* @param target - The Document in which to create the element. Defaults to the current document.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* import { createElement } from 'ts-dom-utils';
|
|
9
|
+
*
|
|
10
|
+
* const button = createElement('button', {
|
|
11
|
+
* id: 'my-button',
|
|
12
|
+
* class: ['btn', 'btn-primary'],
|
|
13
|
+
* text: 'Click me',
|
|
14
|
+
* dataset: {
|
|
15
|
+
* action: 'open-menu',
|
|
16
|
+
* },
|
|
17
|
+
* 'aria-expandended': 'false',
|
|
18
|
+
* });
|
|
19
|
+
|
|
20
|
+
* document.body.appendChild(button);
|
|
21
|
+
* // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
|
|
22
|
+
*/
|
|
23
|
+
declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: CreateElementOptions, target?: Document): HTMLElementTagNameMap[K];
|
|
24
|
+
type CreateElementOptions = {
|
|
25
|
+
[key: string]: any;
|
|
26
|
+
class?: string | string[];
|
|
27
|
+
dataset?: Record<string, string>;
|
|
28
|
+
text?: string;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { CreateElementOptions, createElement as default };
|
package/dist/createElement.d.ts
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
* @param tagName - The name of the element type to create.
|
|
4
4
|
* @param options - The options to use when creating the element.
|
|
5
5
|
* @param target - The Document in which to create the element. Defaults to the current document.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* import { createElement } from 'ts-dom-utils';
|
|
9
|
+
*
|
|
10
|
+
* const button = createElement('button', {
|
|
11
|
+
* id: 'my-button',
|
|
12
|
+
* class: ['btn', 'btn-primary'],
|
|
13
|
+
* text: 'Click me',
|
|
14
|
+
* dataset: {
|
|
15
|
+
* action: 'open-menu',
|
|
16
|
+
* },
|
|
17
|
+
* 'aria-expandended': 'false',
|
|
18
|
+
* });
|
|
19
|
+
|
|
20
|
+
* document.body.appendChild(button);
|
|
21
|
+
* // <button id="my-button" class="btn btn-primary" data-action="open-menu" aria-expandended="false">Click me</button>
|
|
6
22
|
*/
|
|
7
23
|
declare function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: CreateElementOptions, target?: Document): HTMLElementTagNameMap[K];
|
|
8
24
|
type CreateElementOptions = {
|
package/dist/createElement.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -1,72 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
createElement: () => createElement,
|
|
24
|
-
qs: () => qs,
|
|
25
|
-
qsa: () => qsa
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(src_exports);
|
|
28
|
-
|
|
29
|
-
// src/createElement.ts
|
|
30
|
-
function createElement(tagName, options = {}, target = document) {
|
|
31
|
-
const element = target.createElement(tagName);
|
|
32
|
-
Object.entries(options).forEach(([key, value]) => {
|
|
33
|
-
if (key === "class") {
|
|
34
|
-
if (Array.isArray(value)) {
|
|
35
|
-
element.classList.add(...value);
|
|
36
|
-
} else {
|
|
37
|
-
element.classList.add(value);
|
|
38
|
-
}
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (key === "dataset" && typeof value === "object" && value !== null) {
|
|
42
|
-
Object.entries(value).forEach(
|
|
43
|
-
([dataKey, dataValue]) => {
|
|
44
|
-
element.dataset[dataKey] = dataValue;
|
|
45
|
-
}
|
|
46
|
-
);
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
if (key === "text") {
|
|
50
|
-
element.textContent = value;
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
element.setAttribute(key, value);
|
|
54
|
-
});
|
|
55
|
-
return element;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// src/qs.ts
|
|
59
|
-
function qs(selector, parent = document) {
|
|
60
|
-
return parent.querySelector(selector);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// src/qsa.ts
|
|
64
|
-
function qsa(selector, parent = document) {
|
|
65
|
-
return parent.querySelectorAll(selector);
|
|
66
|
-
}
|
|
67
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
68
|
-
0 && (module.exports = {
|
|
69
|
-
createElement,
|
|
70
|
-
qs,
|
|
71
|
-
qsa
|
|
72
|
-
});
|
|
1
|
+
"use strict";var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},x=(t,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of E(e))!g.call(t,r)&&r!==a&&o(t,r,{get:()=>e[r],enumerable:!(n=u(e,r))||n.enumerable});return t};var y=t=>x(o({},"__esModule",{value:!0}),t);var O={};p(O,{DOMisReady:()=>d,createElement:()=>i,qs:()=>f,qsa:()=>c});module.exports=y(O);function i(t,e={},a=document){let n=a.createElement(t);return Object.entries(e).forEach(([r,s])=>{if(r==="class"){Array.isArray(s)?n.classList.add(...s):n.classList.add(s);return}if(r==="dataset"&&typeof s=="object"&&s!==null){Object.entries(s).forEach(([l,m])=>{n.dataset[l]=m});return}if(r==="text"){n.textContent=s;return}n.setAttribute(r,s)}),n}function d(t=document){return new Promise(e=>{if(t.readyState!=="loading")return e();t.addEventListener("DOMContentLoaded",()=>e())})}function f(t,e=document){return e.querySelector(t)}function c(t,e=document){return e.querySelectorAll(t)}0&&(module.exports={DOMisReady,createElement,qs,qsa});
|
package/dist/index.d.cts
ADDED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,14 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
createElement
|
|
3
|
-
} from "./chunk-2CYKZHHS.js";
|
|
4
|
-
import {
|
|
5
|
-
qs
|
|
6
|
-
} from "./chunk-QUWBOENH.js";
|
|
7
|
-
import {
|
|
8
|
-
qsa
|
|
9
|
-
} from "./chunk-MRTNZYZJ.js";
|
|
10
|
-
export {
|
|
11
|
-
createElement,
|
|
12
|
-
qs,
|
|
13
|
-
qsa
|
|
14
|
-
};
|
|
1
|
+
import{a as e}from"./chunk-QYTVIVCC.js";import{a}from"./chunk-AR3IDUAF.js";import{a as t}from"./chunk-YC4DGQBN.js";import{a as r}from"./chunk-22TR3O4D.js";export{e as DOMisReady,a as createElement,t as qs,r as qsa};
|
package/dist/qs.cjs
CHANGED
|
@@ -1,28 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/qs.ts
|
|
21
|
-
var qs_exports = {};
|
|
22
|
-
__export(qs_exports, {
|
|
23
|
-
default: () => qs
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(qs_exports);
|
|
26
|
-
function qs(selector, parent = document) {
|
|
27
|
-
return parent.querySelector(selector);
|
|
28
|
-
}
|
|
1
|
+
"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of l(e))!s.call(t,n)&&n!==r&&o(t,n,{get:()=>e[n],enumerable:!(u=c(e,n))||u.enumerable});return t};var f=t=>a(o({},"__esModule",{value:!0}),t);var i={};E(i,{default:()=>d});module.exports=f(i);function d(t,e=document){return e.querySelector(t)}
|
package/dist/qs.d.cts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* QuerySelector wrapper function.
|
|
3
|
+
* @param selector The selector to match against.
|
|
4
|
+
* @param parent The ParentNode in which to search for the selector.
|
|
5
|
+
* @returns The first Element within the document that matches the specified selector, or group of selectors.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* import { qs } from 'ts-dom-utils';
|
|
9
|
+
* const menu = qs<HTMLDivElement>('.menu');
|
|
10
|
+
* const menuButtons = qsa<HTMLButtonElement>('.btn', menu);
|
|
11
|
+
*/
|
|
12
|
+
declare function qs<E extends Element>(selector: string, parent?: ParentNode): E | null;
|
|
13
|
+
|
|
14
|
+
export { qs as default };
|
package/dist/qs.d.ts
CHANGED
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
* @param selector The selector to match against.
|
|
4
4
|
* @param parent The ParentNode in which to search for the selector.
|
|
5
5
|
* @returns The first Element within the document that matches the specified selector, or group of selectors.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* import { qs } from 'ts-dom-utils';
|
|
9
|
+
* const menu = qs<HTMLDivElement>('.menu');
|
|
10
|
+
* const menuButtons = qsa<HTMLButtonElement>('.btn', menu);
|
|
6
11
|
*/
|
|
7
12
|
declare function qs<E extends Element>(selector: string, parent?: ParentNode): E | null;
|
|
8
13
|
|
package/dist/qs.js
CHANGED
package/dist/qsa.cjs
CHANGED
|
@@ -1,28 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/qsa.ts
|
|
21
|
-
var qsa_exports = {};
|
|
22
|
-
__export(qsa_exports, {
|
|
23
|
-
default: () => qsa
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(qsa_exports);
|
|
26
|
-
function qsa(selector, parent = document) {
|
|
27
|
-
return parent.querySelectorAll(selector);
|
|
28
|
-
}
|
|
1
|
+
"use strict";var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var a=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of s(e))!E.call(t,n)&&n!==r&&o(t,n,{get:()=>e[n],enumerable:!(d=u(e,n))||d.enumerable});return t};var f=t=>c(o({},"__esModule",{value:!0}),t);var i={};a(i,{default:()=>l});module.exports=f(i);function l(t,e=document){return e.querySelectorAll(t)}
|
package/dist/qsa.d.cts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* QuerySelectorAll wrapper function.
|
|
3
|
+
* @param selector - The selector to match against.
|
|
4
|
+
* @param parent - The ParentNode in which to search for the selector. Defaults to the entire document.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* import { qsa } from 'ts-dom-utils';
|
|
8
|
+
* const buttons = qsa<HTMLButtonElement>('.btn');
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* import { qsa } from 'ts-dom-utils';
|
|
12
|
+
* const menu = qs<HtmlNavElement>('.menu');
|
|
13
|
+
* const menuButtons = qsa<HTMLButtonElement>('.btn', menu);
|
|
14
|
+
*/
|
|
15
|
+
declare function qsa<E extends Element>(selector: string, parent?: ParentNode): NodeListOf<E>;
|
|
16
|
+
|
|
17
|
+
export { qsa as default };
|
package/dist/qsa.d.ts
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
* QuerySelectorAll wrapper function.
|
|
3
3
|
* @param selector - The selector to match against.
|
|
4
4
|
* @param parent - The ParentNode in which to search for the selector. Defaults to the entire document.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* import { qsa } from 'ts-dom-utils';
|
|
8
|
+
* const buttons = qsa<HTMLButtonElement>('.btn');
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* import { qsa } from 'ts-dom-utils';
|
|
12
|
+
* const menu = qs<HtmlNavElement>('.menu');
|
|
13
|
+
* const menuButtons = qsa<HTMLButtonElement>('.btn', menu);
|
|
5
14
|
*/
|
|
6
15
|
declare function qsa<E extends Element>(selector: string, parent?: ParentNode): NodeListOf<E>;
|
|
7
16
|
|
package/dist/qsa.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ts-dom-utils",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A simple utility library for DOM manipulation. Provides TypeScript typings for enhanced development experience in TS environments.",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -20,15 +20,16 @@
|
|
|
20
20
|
"typescript",
|
|
21
21
|
"utilities"
|
|
22
22
|
],
|
|
23
|
-
"author": "rafaucau",
|
|
23
|
+
"author": "rafaucau (https://github.com/rafaucau)",
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"bugs": {
|
|
26
26
|
"url": "https://github.com/rafaucau/ts-dom-utils/issues"
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://github.com/rafaucau/ts-dom-utils#readme",
|
|
29
|
+
"funding": "https://github.com/rafaucau/ts-dom-utils?sponsor=1",
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"prettier": "^2.8.8",
|
|
31
|
-
"tsup": "^
|
|
32
|
-
"typescript": "^5.
|
|
32
|
+
"tsup": "^7.1.0",
|
|
33
|
+
"typescript": "^5.1.6"
|
|
33
34
|
}
|
|
34
35
|
}
|
package/dist/chunk-2CYKZHHS.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
// src/createElement.ts
|
|
2
|
-
function createElement(tagName, options = {}, target = document) {
|
|
3
|
-
const element = target.createElement(tagName);
|
|
4
|
-
Object.entries(options).forEach(([key, value]) => {
|
|
5
|
-
if (key === "class") {
|
|
6
|
-
if (Array.isArray(value)) {
|
|
7
|
-
element.classList.add(...value);
|
|
8
|
-
} else {
|
|
9
|
-
element.classList.add(value);
|
|
10
|
-
}
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
if (key === "dataset" && typeof value === "object" && value !== null) {
|
|
14
|
-
Object.entries(value).forEach(
|
|
15
|
-
([dataKey, dataValue]) => {
|
|
16
|
-
element.dataset[dataKey] = dataValue;
|
|
17
|
-
}
|
|
18
|
-
);
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
if (key === "text") {
|
|
22
|
-
element.textContent = value;
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
element.setAttribute(key, value);
|
|
26
|
-
});
|
|
27
|
-
return element;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export {
|
|
31
|
-
createElement
|
|
32
|
-
};
|
package/dist/chunk-MRTNZYZJ.js
DELETED