Skip to content
Snippets Groups Projects
Verified Commit c2f78863 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: commit save point

parent daf062b2
No related branches found
No related tags found
No related merge requests found
import {Updater} from '@schukai/monster/source/dom/updater.mjs';
// First we prepare the html document.
// This is done here via script, but can also be inserted into the document as pure html.
// To do this, simply insert the tag <h1 data-monster-replace="path:headline"></h1>.
const body = document.querySelector('body');
const headline = document.createElement('h1');
headline.setAttribute('data-monster-replace', 'path:headline')
body.appendChild(headline);
// the data structure
let obj = {
headline: "Hello World",
};
// Now comes the real magic. we pass the updater the parent HTMLElement
// and the desired data structure.
const updater = new Updater(body, obj);
updater.run();
// Now you can change the data structure and the HTML will follow these changes.
const subject = updater.getSubject();
subject['headline'] = "Hello World!"
\ No newline at end of file
/**
* Copyright schukai GmbH and contributors 2022. All Rights Reserved.
* Node module: @schukai/monster
......@@ -7,7 +5,6 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/
import {internalSymbol} from "../constants.mjs";
import {diff} from "../data/diff.mjs";
import {Pathfinder} from "../data/pathfinder.mjs";
......@@ -45,39 +42,7 @@ export {Updater}
* Changes to attributes are made only when the direct values are changed. If you want to assign changes to other values
* as well, you have to insert the attribute `data-monster-select-this`. This should be done with care, as it can reduce performance.
*
* ```
* <script type="module">
* import {Updater} from '@schukai/monster/source/dom/updater.mjs';
* new Updater()
* </script>
* ```
*
* @example
*
* import {Updater} from '@schukai/monster/source/dom/updater.mjs';
*
* // First we prepare the html document.
* // This is done here via script, but can also be inserted into the document as pure html.
* // To do this, simply insert the tag <h1 data-monster-replace="path:headline"></h1>.
* const body = document.querySelector('body');
* const headline = document.createElement('h1');
* headline.setAttribute('data-monster-replace','path:headline')
* body.appendChild(headline);
*
* // the data structure
* let obj = {
* headline: "Hello World",
* };
*
* // Now comes the real magic. we pass the updater the parent HTMLElement
* // and the desired data structure.
* const updater = new Updater(body, obj);
* updater.run();
*
* // Now you can change the data structure and the HTML will follow these changes.
* const subject = updater.getSubject();
* subject['headline'] = "Hello World!"
*
* @externalExample ../../example/dom/updater.mjs
* @license AGPLv3
* @since 1.8.0
* @copyright schukai GmbH
......
/**
* Copyright schukai GmbH and contributors 2022. All Rights Reserved.
* Node module: @schukai/monster
......@@ -7,23 +5,15 @@
* License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
*/
import {getGlobal} from "../types/global.mjs";
import {validateString} from "../types/validate.mjs";
export {getDocument, getWindow, getDocumentFragmentFromString}
/**
* this method fetches the document object
*
* ```
* <script type="module">
* import {getDocument} from '@schukai/monster/source/dom/util.mjs';
* console.log(getDocument())
* </script>
* ```
* This method fetches the document object
*
* in nodejs this functionality can be performed with [jsdom](https://www.npmjs.com/package/jsdom).
* In nodejs this functionality can be performed with [jsdom](https://www.npmjs.com/package/jsdom).
*
* ```
* import {JSDOM} from "jsdom"
......@@ -67,16 +57,9 @@ function getDocument() {
}
/**
* this method fetches the window object
* This method fetches the window object
*
* ```
* <script type="module">
* import {getWindow} from '@schukai/monster/source/dom/util.mjs';
* console.log(getWindow(null))
* </script>
* ```
*
* in nodejs this functionality can be performed with [jsdom](https://www.npmjs.com/package/jsdom).
* In nodejs this functionality can be performed with [jsdom](https://www.npmjs.com/package/jsdom).
*
* ```
* import {JSDOM} from "jsdom"
......@@ -123,16 +106,9 @@ function getWindow() {
/**
* this method fetches the document object
*
* ```
* <script type="module">
* import {getDocumentFragmentFromString} from '@schukai/monster/source/dom/util.mjs';
* console.log(getDocumentFragmentFromString('<div></div>'))
* </script>
* ```
* This method fetches the document object
*
* in nodejs this functionality can be performed with [jsdom](https://www.npmjs.com/package/jsdom).
* In nodejs this functionality can be performed with [jsdom](https://www.npmjs.com/package/jsdom).
*
* ```
* import {JSDOM} from "jsdom"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment