Show HN: Web-directive.js – A directive pattern for native HTML
9 hours ago
- #javascript
- #html-directives
- #web-development
- WebDirective is a library for implementing directive patterns in native HTML without frameworks, inspired by Vue.js.
- It allows developers to inject JavaScript behaviors into HTML elements by adding attributes, similar to Vue directives.
- Traditional methods like binding events directly or using delegated event listeners have drawbacks, such as memory leaks or complexity.
- Web Components offer another solution but come with a higher development barrier and potential CSS management issues.
- WebDirective provides a non-invasive, side-effect-free way to extend HTML elements, working across different environments and frameworks.
- It supports features like event listeners, singleton instances, and dynamic updates with hooks like mounted, unmounted, and updated.
- The library can be installed via npm, yarn, or directly from a CDN, and supports both UMD and ES module formats.
- WebDirective also includes utilities like useEventListener for automatic event cleanup and nextTick for waiting on updates.
- Custom events are emitted for directive lifecycle stages, with configurable prefixes to avoid conflicts.
- Options like enableAttrParams and enableChildrenUpdated allow for more advanced use cases, such as argument and modifier support.