@medyll/idae-be 0.2.1 → 0.4.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.
Files changed (4) hide show
  1. package/README.md +153 -153
  2. package/dist/be.d.ts +1 -0
  3. package/dist/be.js +1 -0
  4. package/package.json +20 -21
package/README.md CHANGED
@@ -1,154 +1,154 @@
1
-
2
- # @medyll/idae-be
3
-
4
- A powerful DOM manipulation library with a callback-based approach for precise element targeting.
5
-
6
- ## Installation
7
-
8
- ```bash
9
- npm install @medyll/idae-be
10
- ```
11
-
12
- ## Key Features
13
-
14
- - Root object persistence for consistent chaining
15
- - Callback-based element manipulation for precise targeting
16
- - Comprehensive DOM traversal and manipulation
17
- - Event handling, style management, and attribute control
18
- - Timer integration for dynamic operations
19
-
20
- ## Unique Approach
21
-
22
- Unlike jQuery and other chained libraries, `@medyll/idae-be` always returns the root object. This approach allows for consistent chaining while using callbacks to manipulate targeted elements. This design provides more control and clarity in complex DOM operations.
23
-
24
- ## Basic Usage
25
-
26
- ```javascript
27
- import { be, toBe } from '@medyll/idae-be';
28
-
29
- be('#container')
30
- .append(toBe('<div>New content</div>'), ({ be }) => {
31
- be
32
- .addClass('highlight')
33
- .on('click', () => console.log('Clicked!'));
34
- })
35
- .prepend(toBe('<h1>Title</h1>'))
36
- .children(undefined, ({ be }) => {
37
- be.setStyle({ color: 'blue' });
38
- });
39
- ```
40
-
41
- ## API Reference
42
-
43
- ### Core Methods
44
-
45
- - `be(selector: string | HTMLElement | HTMLElement[]): Be` - Create a new Be instance
46
- - `toBe(str: string | HTMLElement, options?: { tag?: string }): Be` - Convert string or HTMLElement to Be instance
47
- - `createBe(tagOrHtml: string, options?: Object): Be` - Create a new Be element
48
-
49
- ### DOM Manipulation
50
-
51
- - `update(content: string): Be`
52
- - `append(content: string | HTMLElement): Be`
53
- - `prepend(content: string | HTMLElement): Be`
54
- - `insert(mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', element: HTMLElement | Be): Be`
55
- - `remove(): Be`
56
- - `replace(content: string | HTMLElement): Be`
57
- - `clear(): Be`
58
- - `normalize(): Be`
59
- - `wrap(tag?: string): Be`
60
-
61
- ### Traversal
62
-
63
- - `up(selector?: string, callback?: HandlerCallBackFn): Be`
64
- - `next(selector?: string, callback?: HandlerCallBackFn): Be`
65
- - `previous(selector?: string, callback?: HandlerCallBackFn): Be`
66
- - `siblings(selector?: string, callback?: HandlerCallBackFn): Be`
67
- - `children(selector?: string, callback?: HandlerCallBackFn): Be`
68
- - `closest(selector: string, callback?: HandlerCallBackFn): Be`
69
- - `firstChild(selector?: string, callback?: HandlerCallBackFn): Be`
70
- - `lastChild(selector?: string, callback?: HandlerCallBackFn): Be`
71
- - `find(selector: string, callback?: HandlerCallBackFn): Be`
72
- - `findAll(selector: string, callback?: HandlerCallBackFn): Be`
73
- - `without(selector: string, callback?: HandlerCallBackFn): Be`
74
-
75
- ### Styling
76
-
77
- - `setStyle(styles: Record<string, string>): Be`
78
- - `getStyle(property: string): string | null`
79
- - `unsetStyle(properties: string[]): Be`
80
- - `addClass(className: string): Be`
81
- - `removeClass(className: string): Be`
82
- - `toggleClass(className: string): Be`
83
- - `replaceClass(oldClass: string, newClass: string): Be`
84
-
85
- ### Events
86
-
87
- - `on(eventName: string, handler: EventListener): Be`
88
- - `off(eventName: string, handler: EventListener): Be`
89
- - `fire(eventName: string, detail?: any): Be`
90
-
91
- ### Attributes and Properties
92
-
93
- - `setAttr(name: string, value: string): Be`
94
- - `getAttr(name: string): string | null`
95
- - `deleteAttr(name: string): Be`
96
- - `setData(key: string, value: string): Be`
97
- - `getData(key: string): string | null`
98
- - `deleteData(key: string): Be`
99
-
100
- ### Timers
101
-
102
- - `timeout(delay: number, callback: HandlerCallBackFn): Be`
103
- - `interval(delay: number, callback: HandlerCallBackFn): Be`
104
- - `clearTimeout(): Be`
105
- - `clearInterval(): Be`
106
-
107
- ## Advanced Example
108
-
109
- ```javascript
110
- be('#app')
111
- .append(toBe('<div id="content"></div>'), ({ be }) => {
112
- be
113
- .append(toBe('<button>Add Item</button>'), ({ be }) => {
114
- be.on('click', () => {
115
- content.append(toBe('<p>New item</p>'), ({ be }) => {
116
- be
117
- .addClass('item')
118
- .setStyle({ color: 'blue' })
119
- .on('click', ({ target }) => {
120
- be(target).toggleClass('selected');
121
- });
122
- });
123
- });
124
- })
125
- .children('.item', ({ be }) => {
126
- be.setStyle({ padding: '5px', margin: '2px' });
127
- });
128
- })
129
- .up(({ be }) => {
130
- be.setStyle({ backgroundColor: '#f0f0f0' });
131
- });
132
- ```
133
-
134
- This example demonstrates:
135
- 1. Nested element creation and manipulation
136
- 2. Event handling with dynamic content addition
137
- 3. Traversal and bulk operations on children
138
- 4. Accessing and styling parent elements
139
-
140
- ## TypeScript Support
141
-
142
- This library is written in TypeScript and includes type definitions for a great developer experience.
143
-
144
- ## Browser Support
145
-
146
- Designed for modern browsers. May require polyfills for older browser support.
147
-
148
- ## Contributing
149
-
150
- Contributions are welcome! Please submit pull requests or open issues on our GitHub repository.
151
-
152
- ## License
153
-
1
+
2
+ # @medyll/idae-be
3
+
4
+ A powerful DOM manipulation library with a callback-based approach for precise element targeting.
5
+
6
+ ## Installation
7
+
8
+ ```bash
9
+ npm install @medyll/idae-be
10
+ ```
11
+
12
+ ## Key Features
13
+
14
+ - Root object persistence for consistent chaining
15
+ - Callback-based element manipulation for precise targeting
16
+ - Comprehensive DOM traversal and manipulation
17
+ - Event handling, style management, and attribute control
18
+ - Timer integration for dynamic operations
19
+
20
+ ## Unique Approach
21
+
22
+ Unlike jQuery and other chained libraries, `@medyll/idae-be` always returns the root object. This approach allows for consistent chaining while using callbacks to manipulate targeted elements. This design provides more control and clarity in complex DOM operations.
23
+
24
+ ## Basic Usage
25
+
26
+ ```javascript
27
+ import { be, toBe } from '@medyll/idae-be';
28
+
29
+ be('#container')
30
+ .append(toBe('<div>New content</div>'), ({ be }) => {
31
+ be
32
+ .addClass('highlight')
33
+ .on('click', () => console.log('Clicked!'));
34
+ })
35
+ .prepend(toBe('<h1>Title</h1>'))
36
+ .children(undefined, ({ be }) => {
37
+ be.setStyle({ color: 'blue' });
38
+ });
39
+ ```
40
+
41
+ ## API Reference
42
+
43
+ ### Core Methods
44
+
45
+ - `be(selector: string | HTMLElement | HTMLElement[]): Be` - Create a new Be instance
46
+ - `toBe(str: string | HTMLElement, options?: { tag?: string }): Be` - Convert string or HTMLElement to Be instance
47
+ - `createBe(tagOrHtml: string, options?: Object): Be` - Create a new Be element
48
+
49
+ ### DOM Manipulation
50
+
51
+ - `update(content: string): Be`
52
+ - `append(content: string | HTMLElement): Be`
53
+ - `prepend(content: string | HTMLElement): Be`
54
+ - `insert(mode: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', element: HTMLElement | Be): Be`
55
+ - `remove(): Be`
56
+ - `replace(content: string | HTMLElement): Be`
57
+ - `clear(): Be`
58
+ - `normalize(): Be`
59
+ - `wrap(tag?: string): Be`
60
+
61
+ ### Traversal
62
+
63
+ - `up(selector?: string, callback?: HandlerCallBackFn): Be`
64
+ - `next(selector?: string, callback?: HandlerCallBackFn): Be`
65
+ - `previous(selector?: string, callback?: HandlerCallBackFn): Be`
66
+ - `siblings(selector?: string, callback?: HandlerCallBackFn): Be`
67
+ - `children(selector?: string, callback?: HandlerCallBackFn): Be`
68
+ - `closest(selector: string, callback?: HandlerCallBackFn): Be`
69
+ - `firstChild(selector?: string, callback?: HandlerCallBackFn): Be`
70
+ - `lastChild(selector?: string, callback?: HandlerCallBackFn): Be`
71
+ - `find(selector: string, callback?: HandlerCallBackFn): Be`
72
+ - `findAll(selector: string, callback?: HandlerCallBackFn): Be`
73
+ - `without(selector: string, callback?: HandlerCallBackFn): Be`
74
+
75
+ ### Styling
76
+
77
+ - `setStyle(styles: Record<string, string>): Be`
78
+ - `getStyle(property: string): string | null`
79
+ - `unsetStyle(properties: string[]): Be`
80
+ - `addClass(className: string): Be`
81
+ - `removeClass(className: string): Be`
82
+ - `toggleClass(className: string): Be`
83
+ - `replaceClass(oldClass: string, newClass: string): Be`
84
+
85
+ ### Events
86
+
87
+ - `on(eventName: string, handler: EventListener): Be`
88
+ - `off(eventName: string, handler: EventListener): Be`
89
+ - `fire(eventName: string, detail?: any): Be`
90
+
91
+ ### Attributes and Properties
92
+
93
+ - `setAttr(name: string, value: string): Be`
94
+ - `getAttr(name: string): string | null`
95
+ - `deleteAttr(name: string): Be`
96
+ - `setData(key: string, value: string): Be`
97
+ - `getData(key: string): string | null`
98
+ - `deleteData(key: string): Be`
99
+
100
+ ### Timers
101
+
102
+ - `timeout(delay: number, callback: HandlerCallBackFn): Be`
103
+ - `interval(delay: number, callback: HandlerCallBackFn): Be`
104
+ - `clearTimeout(): Be`
105
+ - `clearInterval(): Be`
106
+
107
+ ## Advanced Example
108
+
109
+ ```javascript
110
+ be('#app')
111
+ .append(toBe('<div id="content"></div>'), ({ be }) => {
112
+ be
113
+ .append(toBe('<button>Add Item</button>'), ({ be }) => {
114
+ be.on('click', () => {
115
+ content.append(toBe('<p>New item</p>'), ({ be }) => {
116
+ be
117
+ .addClass('item')
118
+ .setStyle({ color: 'blue' })
119
+ .on('click', ({ target }) => {
120
+ be(target).toggleClass('selected');
121
+ });
122
+ });
123
+ });
124
+ })
125
+ .children('.item', ({ be }) => {
126
+ be.setStyle({ padding: '5px', margin: '2px' });
127
+ });
128
+ })
129
+ .up(({ be }) => {
130
+ be.setStyle({ backgroundColor: '#f0f0f0' });
131
+ });
132
+ ```
133
+
134
+ This example demonstrates:
135
+ 1. Nested element creation and manipulation
136
+ 2. Event handling with dynamic content addition
137
+ 3. Traversal and bulk operations on children
138
+ 4. Accessing and styling parent elements
139
+
140
+ ## TypeScript Support
141
+
142
+ This library is written in TypeScript and includes type definitions for a great developer experience.
143
+
144
+ ## Browser Support
145
+
146
+ Designed for modern browsers. May require polyfills for older browser support.
147
+
148
+ ## Contributing
149
+
150
+ Contributions are welcome! Please submit pull requests or open issues on our GitHub repository.
151
+
152
+ ## License
153
+
154
154
  This project is licensed under the MIT License.
package/dist/be.d.ts CHANGED
@@ -131,6 +131,7 @@ export declare class Be {
131
131
  private handle;
132
132
  }
133
133
  type CreateFragment = `<${string}>${string}</${string}>` | string;
134
+ /** set exports as root */
134
135
  export declare const be: typeof Be.elem;
135
136
  export declare const toBe: typeof Be.toBe;
136
137
  export declare const beId: (id: string) => Be;
package/dist/be.js CHANGED
@@ -287,6 +287,7 @@ export class Be {
287
287
  return cl.handle.bind(cl);
288
288
  }
289
289
  }
290
+ /** set exports as root */
290
291
  export const be = Be.elem;
291
292
  export const toBe = Be.toBe;
292
293
  export const beId = (id) => Be.elem(`#${id}`);
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@medyll/idae-be",
3
- "version": "0.2.1",
3
+ "scope": "@medyll",
4
+ "version": "0.4.0",
4
5
  "scripts": {
5
6
  "dev": "vite dev",
6
7
  "build": "vite build && npm run package",
@@ -31,30 +32,28 @@
31
32
  "svelte": "^5.0.0-next.1"
32
33
  },
33
34
  "devDependencies": {
34
- "@playwright/test": "^1.28.1",
35
- "@sveltejs/adapter-auto": "^3.0.0",
36
- "@sveltejs/kit": "^2.0.0",
37
- "@sveltejs/package": "^2.0.0",
38
- "@sveltejs/vite-plugin-svelte": "^3.0.0",
39
- "@types/eslint": "^8.56.7",
40
- "eslint": "^9.0.0",
35
+ "@playwright/test": "^1.45.3",
36
+ "@sveltejs/adapter-auto": "^3.2.2",
37
+ "@sveltejs/kit": "^2.5.20",
38
+ "@sveltejs/package": "^2.3.2",
39
+ "@sveltejs/vite-plugin-svelte": "^3.1.1",
40
+ "@types/eslint": "^9.6.0",
41
+ "eslint": "^9.8.0",
41
42
  "eslint-config-prettier": "^9.1.0",
42
- "eslint-plugin-svelte": "^2.36.0",
43
- "globals": "^15.0.0",
43
+ "eslint-plugin-svelte": "^2.43.0",
44
+ "globals": "^15.9.0",
44
45
  "jsdom": "^24.1.1",
45
- "prettier": "^3.1.1",
46
- "prettier-plugin-svelte": "^3.1.2",
47
- "publint": "^0.1.9",
46
+ "prettier": "^3.3.3",
47
+ "prettier-plugin-svelte": "^3.2.6",
48
48
  "svelte": "^5.0.0-next.1",
49
- "svelte-check": "^3.6.0",
50
- "tslib": "^2.4.1",
51
- "typescript": "^5.0.0",
52
- "typescript-eslint": "^8.0.0-alpha.20",
53
- "vite": "^5.0.11",
54
- "vitest": "^1.2.0"
49
+ "svelte-check": "^3.8.5",
50
+ "tslib": "^2.6.3",
51
+ "typescript": "^5.5.4",
52
+ "typescript-eslint": "^8.0.0",
53
+ "vite": "^5.3.5",
54
+ "vitest": "^2.0.5"
55
55
  },
56
56
  "svelte": "./dist/index.js",
57
57
  "types": "./dist/index.d.ts",
58
- "type": "module",
59
- "scope": "medyll"
58
+ "type": "module"
60
59
  }