Transform nodes as they are added to the page.

• Install
• Usage
• Browser compatibility
• API
• License

With npm installed, run

$ npm install alchemize

Or, with Yarn,

$ yarn add alchemize

Alternatively, download alchemize.min.js

import alchemize from 'alchemize'

alchemize('.water', function(el) { $(el).addClass('wine').removeClass('water').text('wine') })

Or,

<script type="text/javascript" src="https://unpkg.com/alchemize@1.0.0/browser/alchemize.min.js"></script>
<script type="text/javascript">
  alchemize('.water', function(el) { $(el).addClass('wine').removeClass('water').text('wine') });
</script>

Alchemize is based entirely on the MutationObserver native class (including the prefixed WebkitMutationObserver). If this class is not present, Alchemize will not work at all.

Runs transform everytime a matching element is added to parent.

• matches (required) - This argument is either:
  • A CSS selector string (ex. "div#id.class")
  • A function that returns a boolean (ex. (el) => el.nodeType === 1 && $(el).hasClass('.selector'))
• transform (required) - This argument is either:
  • A constant that the element will be replaced with (for example, plain text or a Node).
  • A function that operates on the element. (ex. (el) => { $(el).addClass('added') }))
• parent (optional, default: document.documentElement) - The top level element to watch for added childrens.

• Observer instance.

Starts watching for added nodes if not already.

Stops watching for added nodes.

Pauses observation until function terminates.

• fn (required) - Function to call once observation is suspended. Bound to Observer instance.

• Whatever fn returns.

• connected (boolean) - Whether the instance is observing or not.

MIT © James Anthony Bruno