diff --git a/application/example/dom/updater.mjs b/application/example/dom/updater.mjs new file mode 100644 index 0000000000000000000000000000000000000000..09a014751cbf5e185ed0cde7ebc207e838fdc978 --- /dev/null +++ b/application/example/dom/updater.mjs @@ -0,0 +1,23 @@ +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 diff --git a/application/source/dom/updater.mjs b/application/source/dom/updater.mjs index 21d177144f351e5d2af601a5ebb70d87d46c6583..7cdefefdb1a969e8dd8eb6c2ec1a1de790ccb278 100644 --- a/application/source/dom/updater.mjs +++ b/application/source/dom/updater.mjs @@ -1,5 +1,3 @@ - - /** * 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 diff --git a/application/source/dom/util.mjs b/application/source/dom/util.mjs index 0f7e44a7ba79ac73e6a6bf6ae294d2c0d1d87b72..ee3e405906acefa4ca24f8173c013e029fb1ca5b 100644 --- a/application/source/dom/util.mjs +++ b/application/source/dom/util.mjs @@ -1,5 +1,3 @@ - - /** * 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"