Gathering detailed insights and metrics for wences
Installations
npm install wencesDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
22.12.0
NPM Version
10.9.0
Score
73.7
Supply Chain
98.9
Quality
86.6
Maintenance
100
Vulnerability
100
License
Contributors
1
Unable to fetch Contributors
Languages
2
JavaScript
TypeScript
JavaScript (53.03%)
TypeScript (46.97%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
433
Last Day
1
Last Week
3
Last Month
130
Last Year
433
GitHub Statistics
MIT License
81 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Feb 11, 2025
Bundle Size
10.37 kB
Minified
3.20 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.1
Package Id
wences@1.1.1
Unpacked Size
75.17 kB
Size
15.82 kB
File Count
23
NPM Version
10.9.0
Node Version
22.12.0
Published on
Feb 11, 2025
Total Downloads
Cumulative downloads
Total Downloads
433
Last Day
0%
1
Compared to previous day
Last Week
-25%
3
Compared to previous week
Last Month
348.3%
130
Compared to previous month
Last Year
0%
433
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Wences
Wences is a lightweight, modular JavaScript utility for creating and managing HTML elements with a clean, declarative API. It provides a structured way to handle HTML attributes, accessibility, events, content management, and element lifecycle through a simple configuration object.
Features
- 🚀 Easy Setup: Create and manage HTML elements with a simple, intuitive config
- ♿ Built-in Accessibility: ARIA attributes handled automatically
- 🔒 Type Safe: Ensures valid elements and attributes at runtime
- 📦 Modular: Features are isolated for easy debugging and maintenance
- 🎛️ Event Handling: Simplified event management with auto-cleanup
- ⚡ State Management: Supports boolean attributes with proper HTML5 compliance
- 🎨 Style Handling: Clean API with automatic kebab-case conversion
- 👶 Child Elements: Easy creation, management, and cleanup of child elements
- 🔄 Lifecycle Control: Manages creation, updates, and destruction
- 🌀 Cloning: Supports deep and shallow cloning with config preservation
- 🧹 Memory Safe: Auto-cleans events and references when elements are removed
Installation
Using npm:
1npm install wences
Using yarn:
1yarn add wences
Using bun:
1bun install wences
Basic Usage
1import Wences from 'wences'; 2 3// Create a button with various configurations 4const button = new Wences('button', { 5 accessibility: { 6 label: 'Submit form', 7 role: 'button', 8 describedBy: 'description' 9 }, 10 general: { 11 class: 'primary-button', 12 id: 'submit-btn' 13 }, 14 style: { 15 backgroundColor: 'blue', 16 color: 'white' 17 }, 18 events: { 19 click: () => console.log('Button clicked'), 20 mouseenter: () => console.log('Mouse entered') 21 }, 22 state: { 23 disabled: true, 24 hidden: false 25 } 26}); 27 28// Create and append child elements 29const icon = button.appendChild('span', { 30 general: { class: 'icon' } 31}); 32 33// Append to a parent element 34button.appendTo('#form-container');
Configuration Options
Accessibility Configuration
Handle accessibility attributes without requiring the 'aria-' prefix:
1{ 2 accessibility: { 3 // Standard role attribute (remains unchanged) 4 role: 'button', 5 6 // Aria attributes (automatically prefixed with 'aria-') 7 label: 'Submit button', // becomes aria-label 8 describedBy: 'description', // becomes aria-describedby 9 current: 'page', // becomes aria-current 10 expanded: 'false', // becomes aria-expanded 11 hidden: 'true' // becomes aria-hidden 12 } 13}
Contents Configuration
Manage child elements and content nodes:
1{ 2 contents: { 3 // Array of valid DOM nodes 4 children: [ 5 document.createElement('div'), 6 document.createTextNode('Hello'), 7 document.createElement('svg'), 8 new Text('World') 9 ] 10 } 11}
Events Configuration
Handle DOM event listeners with automatic cleanup:
1{ 2 events: { 3 // Standard DOM events 4 click: (e) => console.log('Clicked'), 5 mouseenter: (e) => console.log('Mouse entered'), 6 7 // Events with 'on' prefix (automatically normalized) 8 onChange: (e) => console.log('Changed'), 9 10 // Custom events 11 'custom-event': (e) => console.log('Custom event fired') 12 } 13}
General Attributes Configuration
Manage standard HTML attributes:
1{ 2 general: { 3 // Standard HTML attributes 4 id: 'my-element', 5 class: 'button primary', 6 name: 'submit-button', 7 8 // Data attributes 9 'data-test': 'value', 10 'data-user-id': '123', 11 12 // Custom attributes 13 title: 'My Button', 14 lang: 'en' 15 } 16}
State Configuration
Handle boolean attributes following HTML5 specifications:
1{ 2 state: { 3 // Standard boolean attributes 4 disabled: true, // adds disabled attribute 5 hidden: false, // removes hidden attribute 6 required: true, // adds required attribute 7 checked: false, // removes checked attribute 8 } 9}
Valid boolean attributes include: async, autofocus, autoplay, checked, disabled, hidden, multiple, readonly, required, selected, and more.
Style Configuration
Manage inline styles with support for camelCase and kebab-case:
1{ 2 style: { 3 // CamelCase properties 4 backgroundColor: '#fff', 5 fontSize: '16px', 6 marginTop: '10px', 7 8 // Kebab-case properties 9 'background-color': '#fff', 10 'font-size': '16px', 11 'margin-top': '10px', 12 13 // Transforms and animations 14 transform: 'translateX(10px)', 15 transition: 'all 0.3s ease' 16 } 17}
API Reference
Constructor
1new Wences(tagName: string, config: WencesConfig)
Methods
getElement()
Returns the underlying DOM element.
1const element = wencesInstance.getElement();
appendChild(tagName: string, config?: WencesConfig)
Creates and appends a child Wences element.
1const child = wencesInstance.appendChild('div', { 2 style: { color: 'red' } 3});
appendTo(parent: Element | string)
Appends the element to a parent element or selector.
1wencesInstance.appendTo('#container');
destroy()
Removes the element and cleans up all event listeners and references.
1wencesInstance.destroy();
update(newConfig: WencesConfig)
Updates the configuration of the element.
1wencesInstance.update({ 2 style: { color: 'blue' }, 3 state: { disabled: true } 4});
clone(deep: boolean = false)
Creates a clone of the current Wences instance.
1const clone = wencesInstance.clone(true); // Deep clone
getConfig()
Gets the current configuration of the element.
1const config = wencesInstance.getConfig();
Type Definitions
For TypeScript users:
1interface WencesConfig { 2 accessibility?: { 3 [key: string]: string; 4 role?: string; 5 }; 6 contents?: { 7 children: (HTMLElement | SVGElement | Text)[]; 8 }; 9 events?: { 10 [key: string]: (event: Event) => void; 11 }; 12 general?: { 13 [key: string]: string; 14 }; 15 state?: { 16 [key: string]: boolean; 17 }; 18 style?: { 19 [key: string]: string; 20 }; 21}
Error Handling
Wences includes comprehensive runtime validation and will throw errors for:
- Invalid HTML tag names
- Invalid children types (must be HTML elements or text nodes)
- Invalid parent elements when using appendTo()
- Invalid configuration object structure
- Invalid event handlers
- Invalid style values
- Memory leaks (via console warnings)
Best Practices
- Always Destroy Elements: Call
destroy()when removing elements to prevent memory leaks - Use Child Management: Prefer
appendChild()over direct DOM manipulation - Config Updates: Use
update()instead of direct property manipulation - Error Handling: Wrap Wences operations in try-catch blocks for proper error handling
- Configuration Storage: Use
getConfig()to store/restore element states
Browser Support
Wences supports all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributing
We welcome contributions! Please follow these steps:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Development Setup
1# Install dependencies 2npm install 3 4# Run tests 5npm test 6 7# Build 8npm run build 9 10# Run linter 11npm run lint
License
This project is licensed under the MIT License - see the LICENSE.md file for details.
Support
For support, please:
- Check the documentation
- Search existing issues
- Open a new issue
Made with ❤️ by Chessurisme
No vulnerabilities found.
No security vulnerabilities found.