HTML editor

html-editor it's a set of tools that helps find and modify HTML elements in the Rx stream. Useful for browser extensions and userscripts.

Table of contents

• Observables
  • observeElementMutation
  • observeQuerySelector
  • observeQuerySelectorAll
  • awaitElement
  • awaitRandomElement
  • urlChange$
  • observeUrlChanges
• Operators
  • mergeMapAddedElements
  • mergeMapStringCondition

Observables

observeElementMutation

Converts the callback of the MutationObserver class to an Rx event stream.

Example:

observeElementMutation(
  document.querySelector('#my-element')!,
  { attributeFilter: ['data-my-data'] },
).subscribe(console.log);

observeQuerySelector

Observation changes (addition and deletion) of elements that match to query selectors as an Rx stream.

Example:

observeQuerySelector({
  query: '.my-child',
  parent: document.querySelector('#my-parent')!,
  has: '.my-sub-child',
  filter: element => element.classList.contains('.my-child-modifier'),
}).subscribe(console.log);

Example log:

{added: Element, target: Element, removed: undefined};
{added: undefined, target: undefined, removed: Element};

observeQuerySelectorAll

Observation changes (additions and deletions) of elements that match to query selectors as an Rx stream.

Example:

observeQuerySelectorAll({
  query: '.my-child',
  parent: document.querySelector('#my-parent')!,
  has: '.my-sub-child',
  filter: element => element.classList.contains('.my-child-modifier'),
}).subscribe(console.log);

Example log:

{added: [Element], target: [Element, Element], removed: []};
{added: [], target: [Element], removed: [Element]};

awaitElement

Awaiting only one element to match the selector and returns it as an Rx stream. The stream ends immediately after one element is found / added.

Example:

awaitElement('#my-element')
  .subscribe(console.log);

awaitRandomElement

Awaiting Expects at least one element to match the selector and returns it as an Rx stream. If there are more than 1 elements, it will return a random one. The stream ends immediately after the elements are found / added.

Example:

awaitRandomElement('.my-element')
  .subscribe(console.log);

urlChange$

Emit new location url when the URL is changes.

Example:

urlChange$.subscribe(console.log);

observeUrlChanges

Observation of URL changes that satisfy the conditions.

Example:

observeUrlChanges({ condition: /my-url-segment/ })
  .subscribe(console.log);

Operators

mergeMapAddedElements

Conversion operator to a new stream for each new added element.

Example:

observeQuerySelectorAll('.my-button').pipe(
  mergeMapAddedElements(element => fromEvent(element, 'click'))
).subscribe(console.log);

It can be more convenient to use the project option in observeQuerySelector and observeQuerySelectorAll functions. Example:

observeQuerySelectorAll({
  query: '.my-button',
  project: element => fromEvent(element, 'click'),
}).subscribe(console.log);

mergeMapStringCondition

The operator creates a separate stream when the source string is validated.

Example:

urlChange$.pipe(
  mergeMapStringCondition(
    /my-url-segment/,
    () => observeQuerySelectorAll('.my-element'),
  )
).subscribe(console.log);

It can be more convenient to use the project option in observeUrlChanges function. Example:

observeUrlChanges({
  condition: /my-url-segment/,
  project: () => observeQuerySelectorAll('.my-element')
}).subscribe(console.log);