https://github.com/anonyco/idl-property-observer
Plug changes like HTMLInputElement.value into MutationObservers in 766 bytes. Framework agnostic!
https://github.com/anonyco/idl-property-observer
bad-practices dom-events drop-in easy-to-learn easy-to-use evil framework-agnostic horrible htmlelement library mutation-observer no-dependencies no-jquery npm npm-package shitty-code vanilla-javascript vanilla-js vanillajs worst-js
Last synced: about 1 month ago
JSON representation
Plug changes like HTMLInputElement.value into MutationObservers in 766 bytes. Framework agnostic!
- Host: GitHub
- URL: https://github.com/anonyco/idl-property-observer
- Owner: anonyco
- License: cc0-1.0
- Created: 2019-08-19T00:34:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-19T18:51:22.000Z (about 5 years ago)
- Last Synced: 2025-03-20T13:17:56.033Z (about 1 month ago)
- Topics: bad-practices, dom-events, drop-in, easy-to-learn, easy-to-use, evil, framework-agnostic, horrible, htmlelement, library, mutation-observer, no-dependencies, no-jquery, npm, npm-package, shitty-code, vanilla-javascript, vanilla-js, vanillajs, worst-js
- Language: JavaScript
- Homepage: https://anonyco.github.io/IDL-Property-Observer/hastyDemo.html
- Size: 53.7 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://npmjs.org/package/idl-property-observer "View this project on npm")
[](https://github.com/anonyco/IDL-Property-Observer/stargazers "View others who have stared this repository")
[](https://github.com/anonyco/IDL-Property-Observer/blob/master/dist/IDLPropertyObserver.min.js "File without gzip")
[](https://github.com/anonyco/IDL-Property-Observer/blob/master/IDLPropertyObserver.min.js.gz "Gzipped file")
[](https://npmjs.org/package/idl-property-observer "View this project on npm")
[]( https://github.com/anonyco/IDL-Property-Observer/issues )
[](https://unlicense.org/ "This project's liscence")
[](https://npmjs.org/package/idl-property-observer "View this project on npm")
# IDL-Property-Observer
Plug changes like HTMLInputElement.value into MutationObservers. Framework agnostic! **This library is not responsible for your decision to utilize the poor programming practices that this library shamelessly represents!** This library overwrites native prototypes. Please only use this library as a last-resort if you have a finished project and do not have the time to go back and change the code to fire a common handler on IDL property changes.
### Quick Start
Drop the following above your code in the HTML of the page. I call this library "framework agnostic" because whatever framework, build system, or language abstraction (such as CoffeeScript) you are using (if any), there is likely a way to include this library above your code in the page.
````HTML
````
Preferably, it would be best to copy and paste the code into your main or bundled Javascript code file inorder to lower network requests and make the page load faster. If this is not possible due to the framework, build system, or language abstraction that you are using, then at least try to add defer="" to all of the scripts so that the browser can download this script from dropbox in synchrony with the one from your website.
````HTML
````
The use of dropbox allows me to push out new versions that address any bugs that I find and such. As I have no big plans or intentions for this library in the future, I will never push up a breaking change that could damage your website. Only bug-fixes will be applied.
### API
There is no API. This library is merely a monkey-patch for the spotty behavior of Mutation Observers. Observe as the mutation observer fails horribly.
```Javascript
var input = document.createElement("input");
var observer = new MutationObserver(function(records){
for (var i=0; i