@schukai/monster 3.70.0 → 3.71.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 
 
+## [3.71.0] - 2024-06-25
+
+### Add Features
+
+- new feature for  transfer the part that has been changed [#217](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/217)
+
 ## [3.70.0] - 2024-06-25
 
 ### Add Features
@@ -9,15 +15,18 @@
 - complete change of form control to a derivation of dataset [#216](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/216)
 - new dataset feature refreshOnMutation [#215](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/215)
 - new comprehensive options display [#213](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/213)
+
 ### Bug Fixes
 
 - initialize of loaded html fields [#210](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/210)
 - values from the value attribute are now displayed correctly after loading the options. [#212](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/212)
 - If a value is specified in the select, it is now also displayed with a label from the options. [#212](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/212)
+
 ### Changes
 
 - doc, little bugs and tidy
 - test adjustments and minor layout adjustments
+
 ### Code Refactoring
 
 - adjustments to the form stylesheets [#214](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/214)

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.70.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.5","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.71.0"}

package/source/components/datatable/datasource/rest.mjs

@@ -12,25 +12,27 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-import { Datasource, dataSourceSymbol } from "../datasource.mjs";
-import { DatasourceStyleSheet } from "../stylesheet/datasource.mjs";
-import { instanceSymbol } from "../../../constants.mjs";
+import {diff} from "../../../data/diff.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import {isArray} from "../../../types/is.mjs";
+import {Datasource, dataSourceSymbol} from "../datasource.mjs";
+import {DatasourceStyleSheet} from "../stylesheet/datasource.mjs";
+import {instanceSymbol} from "../../../constants.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    registerCustomElement,
 } from "../../../dom/customelement.mjs";
-import { RestAPI } from "../../../data/datasource/server/restapi.mjs";
-import { Formatter } from "../../../text/formatter.mjs";
-import { clone } from "../../../util/clone.mjs";
-import { validateBoolean } from "../../../types/validate.mjs";
-import { findElementWithIdUpwards } from "../../../dom/util.mjs";
-import { Observer } from "../../../types/observer.mjs";
-import { Pathfinder } from "../../../data/pathfinder.mjs";
-import { fireCustomEvent } from "../../../dom/events.mjs";
+import {RestAPI} from "../../../data/datasource/server/restapi.mjs";
+import {Formatter} from "../../../text/formatter.mjs";
+import {clone} from "../../../util/clone.mjs";
+import {validateBoolean} from "../../../types/validate.mjs";
+import {findElementWithIdUpwards} from "../../../dom/util.mjs";
+import {Observer} from "../../../types/observer.mjs";
+import {Pathfinder} from "../../../data/pathfinder.mjs";
+import {fireCustomEvent} from "../../../dom/events.mjs";
 
-export { Rest };
+export {Rest};
 
 /**
  * @private
@@ -44,7 +46,7 @@ const intersectionObserverHandlerSymbol = Symbol("intersectionObserverHandler");
  * @type {symbol}
  */
 const rawDataSymbol = Symbol.for(
-	"@schukai/monster/data/datasource/server/restapi/rawdata",
+    "@schukai/monster/data/datasource/server/restapi/rawdata",
 );
 
 /**
@@ -52,7 +54,7 @@ const rawDataSymbol = Symbol.for(
  * @type {symbol}
  */
 const intersectionObserverObserverSymbol = Symbol(
-	"intersectionObserverObserver",
+    "intersectionObserverObserver",
 );
 
 /**
@@ -81,23 +83,23 @@ const filterObserverSymbol = Symbol("filterObserver");
  * @summary A rest api datasource
  */
 class Rest extends Datasource {
-	/**
-	 * the constructor of the class
-	 */
-	constructor() {
-		super();
-		this[dataSourceSymbol] = new RestAPI();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/datasource/rest@@instance");
-	}
-
-	/**
+    /**
+     * the constructor of the class
+     */
+    constructor() {
+        super();
+        this[dataSourceSymbol] = new RestAPI();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/datasource/rest@@instance");
+    }
+
+    /**
      * To set the options via the html tag the attribute `data-monster-options` must be used.
      * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
      *
@@ -128,405 +130,409 @@ class Rest extends Datasource {
      * @property {Object} write Write configuration
 
      */
-	get defaults() {
-		const restOptions = new RestAPI().defaults;
-
-		restOptions.read.parameters = {
-			filter: undefined,
-			oderBy: undefined,
-			page: "1",
-		};
-
-		return Object.assign({}, super.defaults, restOptions, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			features: {
-				autoInit: false,
-				filter: false,
-			},
-
-			autoInit: {
-				intersectionObserver: false,
-				oneTime: true,
-			},
-
-			filter: {
-				id: undefined,
-			},
-
-			datatable: {
-				id: undefined,
-			},
-
-			response: {
-				path: {
-					message: "sys.message",
-					code: "sys.code",
-				},
-			},
-		});
-	}
-
-	/**
-	 *
-	 * @param {string} page
-	 * @param {string} query
-	 * @param {string} orderBy
-	 * @returns {Monster.Components.Datatable.Datasource.Rest}
-	 */
-	setParameters({ page, query, orderBy }) {
-		const parameters = this.getOption("read.parameters");
-		if (query !== undefined) {
-			parameters.query = `${query}`;
-			parameters.page = "1";
-		}
-
-		// after a query the page is set to 1, so if the page is not set, it is set to 1
-		if (page !== undefined) parameters.page = `${page}`;
-		if (orderBy !== undefined) parameters.order = `${orderBy}`;
-		this.setOption("read.parameters", parameters);
-		return this;
-	}
-
-	/**
-	 * @return {void}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initEventHandler.call(this);
-		initAutoInit.call(this);
-	}
-
-	/**
-	 * @deprecated 2023-06-25
-	 * @returns {Promise<never>|*}
-	 */
-	reload() {
-		return this.fetch();
-	}
-
-	/**
-	 * Fetches the data from the rest api
-	 * @returns {Promise<never>|*}
-	 */
-	fetch() {
-		const opt = clone(this.getOption("read"));
-		this[dataSourceSymbol].setOption("read", opt);
-
-		let url = this.getOption("read.url");
-		const formatter = new Formatter(this.getOption("read.parameters"));
-
-		if (!url) {
-			return Promise.reject(new Error("No url defined"));
-		}
-
-		url = formatter.format(url);
-
-		this[dataSourceSymbol].setOption("read.url", url);
-
-		return new Promise((resolve, reject) => {
-			fireCustomEvent(this, "monster-datasource-fetch", {
-				datasource: this,
-			});
-
-			setTimeout(() => {
-				this[dataSourceSymbol]
-					.read()
-					.then((response) => {
-						fireCustomEvent(this, "monster-datasource-fetched", {
-							datasource: this,
-						});
-
-						resolve(response);
-					})
-					.catch((error) => {
-						fireCustomEvent(this, "monster-datasource-error", {
-							error: error,
-						});
-
-						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
-						reject(error);
-					});
-			}, 0);
-		});
-	}
-
-	/**
-	 *
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [DatasourceStyleSheet];
-	}
-
-	/**
-	 * @private
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datasource-rest";
-	}
-
-	/**
-	 * This method activates the intersection observer manually.
-	 * For this purpose, the option `autoInit.intersectionObserver` must be set to `false`.
-	 *
-	 * @returns {Monster.Components.Datatable.Datasource.Rest}
-	 */
-	initIntersectionObserver() {
-		initIntersectionObserver.call(this);
-		return this;
-	}
-
-	/**
-	 * @private
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		setTimeout(() => {
-			if (this.getOption("features.filter", false) === true) {
-				initFilter.call(this);
-			}
-		}, 0);
-	}
-
-	/**
-	 * @private
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		removeFilter.call(this);
-	}
-
-	read() {
-		return this.fetch();
-	}
-
-	/**
-	 * Fetches the data from the rest api
-	 * @returns {Promise<never>|*}
-	 */
-	write() {
-		const opt = clone(this.getOption("write"));
-		this[dataSourceSymbol].setOption("write", opt);
-
-		let url = this.getOption("write.url");
-		const formatter = new Formatter(this.getOption("write.parameters"));
-
-		if (!url) {
-			return Promise.reject(new Error("No url defined"));
-		}
-
-		url = formatter.format(url);
-
-		this[dataSourceSymbol].setOption("write.url", url);
-
-		return new Promise((resolve, reject) => {
-			fireCustomEvent(this, "monster-datasource-fetch", {
-				datasource: this,
-			});
-
-			setTimeout(() => {
-				this[dataSourceSymbol]
-					.write()
-					.then((response) => {
-						fireCustomEvent(this, "monster-datasource-fetched", {
-							datasource: this,
-						});
-
-						resolve(response);
-					})
-					.catch((error) => {
-						fireCustomEvent(this, "monster-datasource-error", {
-							error: error,
-						});
-
-						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
-						reject(error);
-					});
-			}, 0);
-		});
-	}
+    get defaults() {
+        const restOptions = new RestAPI().defaults;
+
+        restOptions.read.parameters = {
+            filter: undefined,
+            oderBy: undefined,
+            page: "1",
+        };
+
+        return Object.assign({}, super.defaults, restOptions, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            features: {
+                autoInit: false,
+                filter: false,
+            },
+
+            autoInit: {
+                intersectionObserver: false,
+                oneTime: true,
+            },
+
+            filter: {
+                id: undefined,
+            },
+
+            datatable: {
+                id: undefined,
+            },
+
+            response: {
+                path: {
+                    message: "sys.message",
+                    code: "sys.code",
+                },
+            },
+        });
+    }
+
+    /**
+     *
+     * @param {string} page
+     * @param {string} query
+     * @param {string} orderBy
+     * @returns {Monster.Components.Datatable.Datasource.Rest}
+     */
+    setParameters({page, query, orderBy}) {
+        const parameters = this.getOption("read.parameters");
+        if (query !== undefined) {
+            parameters.query = `${query}`;
+            parameters.page = "1";
+        }
+
+        // after a query the page is set to 1, so if the page is not set, it is set to 1
+        if (page !== undefined) parameters.page = `${page}`;
+        if (orderBy !== undefined) parameters.order = `${orderBy}`;
+        this.setOption("read.parameters", parameters);
+        return this;
+    }
+
+    /**
+     * @return {void}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initEventHandler.call(this);
+        initAutoInit.call(this);
+    }
+
+    /**
+     * @deprecated 2023-06-25
+     * @returns {Promise<never>|*}
+     */
+    reload() {
+        return this.fetch();
+    }
+
+    /**
+     * Fetches the data from the rest api
+     * @returns {Promise<never>|*}
+     */
+    fetch() {
+        const opt = clone(this.getOption("read"));
+        this[dataSourceSymbol].setOption("read", opt);
+
+        let url = this.getOption("read.url");
+        const formatter = new Formatter(this.getOption("read.parameters"));
+
+        if (!url) {
+            return Promise.reject(new Error("No url defined"));
+        }
+
+        url = formatter.format(url);
+
+        this[dataSourceSymbol].setOption("read.url", url);
+
+        return new Promise((resolve, reject) => {
+            fireCustomEvent(this, "monster-datasource-fetch", {
+                datasource: this,
+            });
+
+            setTimeout(() => {
+                this[dataSourceSymbol]
+                    .read()
+                    .then((response) => {
+                        fireCustomEvent(this, "monster-datasource-fetched", {
+                            datasource: this,
+                        });
+
+                        resolve(response);
+                    })
+                    .catch((error) => {
+                        fireCustomEvent(this, "monster-datasource-error", {
+                            error: error,
+                        });
+
+                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
+                        reject(error);
+                    });
+            }, 0);
+        });
+    }
+
+    /**
+     *
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [DatasourceStyleSheet];
+    }
+
+    /**
+     * @private
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-datasource-rest";
+    }
+
+    /**
+     * This method activates the intersection observer manually.
+     * For this purpose, the option `autoInit.intersectionObserver` must be set to `false`.
+     *
+     * @returns {Monster.Components.Datatable.Datasource.Rest}
+     */
+    initIntersectionObserver() {
+        initIntersectionObserver.call(this);
+        return this;
+    }
+
+    /**
+     * @private
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        setTimeout(() => {
+            if (this.getOption("features.filter", false) === true) {
+                initFilter.call(this);
+            }
+        }, 0);
+    }
+
+    /**
+     * @private
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        removeFilter.call(this);
+    }
+
+    /**
+     * @returns {Promise<never>|*}
+     */
+    read() {
+        return this.fetch();
+    }
+
+    /**
+     * Fetches the data from the rest api
+     * @returns {Promise<never>|*}
+     */
+    write() {
+        const opt = clone(this.getOption("write"));
+        this[dataSourceSymbol].setOption("write", opt);
+
+        let url = this.getOption("write.url");
+        const formatter = new Formatter(this.getOption("write.parameters"));
+
+        if (!url) {
+            return Promise.reject(new Error("No url defined"));
+        }
+
+        url = formatter.format(url);
+
+        this[dataSourceSymbol].setOption("write.url", url);
+
+        return new Promise((resolve, reject) => {
+            fireCustomEvent(this, "monster-datasource-fetch", {
+                datasource: this,
+            });
+            
+            setTimeout(() => {
+                this[dataSourceSymbol]
+                    .write()
+                    .then((response) => {
+                        fireCustomEvent(this, "monster-datasource-fetched", {
+                            datasource: this,
+                        });
+
+                        resolve(response);
+                    })
+                    .catch((error) => {
+                        fireCustomEvent(this, "monster-datasource-error", {
+                            error: error,
+                        });
+
+                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
+                        reject(error);
+                    });
+            }, 0);
+        });
+    }
 }
 
 /**
  * @private
  */
 function removeFilter() {
-	const filterID = this.getOption("filter.id", undefined);
-	if (!filterID) return;
+    const filterID = this.getOption("filter.id", undefined);
+    if (!filterID) return;
 
-	const filterControl = findElementWithIdUpwards(this, filterID);
+    const filterControl = findElementWithIdUpwards(this, filterID);
 
-	if (filterControl && this[filterObserverSymbol]) {
-		filterControl?.detachObserver(this[filterObserverSymbol]);
-	}
+    if (filterControl && this[filterObserverSymbol]) {
+        filterControl?.detachObserver(this[filterObserverSymbol]);
+    }
 }
 
 /**
  * @private
  */
 function initFilter() {
-	const filterID = this.getOption("filter.id", undefined);
-
-	if (!filterID)
-		throw new Error("filter feature is enabled but no filter id is defined");
-
-	const filterControl = findElementWithIdUpwards(this, filterID);
-	if (!filterControl)
-		throw new Error(
-			"filter feature is enabled but no filter control with id " +
-				filterID +
-				" is found",
-		);
-
-	this[filterObserverSymbol] = new Observer(() => {
-		const query = filterControl.getOption("query");
-		if ( query===undefined) {
-			return;
-		}
-		this.setParameters({ query: query });
-		this.fetch()
-			.then((response) => {
-				if (!(response instanceof Response)) {
-					throw new Error("Response is not an instance of Response");
-				}
-
-				if (response?.ok === true) {
-					this.dispatchEvent(new CustomEvent("reload", { bubbles: true }));
-					filterControl?.showSuccess();
-				}
-
-				if (response.bodyUsed === true) {
-					return handleIntersectionObserver.call(
-						this,
-						response[rawDataSymbol],
-						response,
-						filterControl,
-					);
-				}
-
-				response
-					.text()
-					.then((jsonAsText) => {
-						let json;
-						try {
-							json = JSON.parse(jsonAsText);
-						} catch (e) {
-							const message = e instanceof Error ? e.message : `${e}`;
-							filterControl?.showFailureMessage(message);
-							return Promise.reject(e);
-						}
-
-						return handleIntersectionObserver.call(
-							this,
-							json,
-							response,
-							filterControl,
-						);
-					})
-					.catch((e) => {
-						filterControl?.showFailureMessage(e.message);
-					});
-			})
-			.catch((e) => {
-				this.dispatchEvent(
-					new CustomEvent("error", { bubbles: true, detail: e }),
-				);
-
-				if (!(e instanceof Error)) {
-					e = new Error(e);
-				}
-
-				filterControl?.showFailureMessage(e.message);
-				return Promise.reject(e);
-			});
-	});
-
-	filterControl.attachObserver(this[filterObserverSymbol]);
+    const filterID = this.getOption("filter.id", undefined);
+
+    if (!filterID)
+        throw new Error("filter feature is enabled but no filter id is defined");
+
+    const filterControl = findElementWithIdUpwards(this, filterID);
+    if (!filterControl)
+        throw new Error(
+            "filter feature is enabled but no filter control with id " +
+            filterID +
+            " is found",
+        );
+
+    this[filterObserverSymbol] = new Observer(() => {
+        const query = filterControl.getOption("query");
+        if (query === undefined) {
+            return;
+        }
+        this.setParameters({query: query});
+        this.fetch()
+            .then((response) => {
+                if (!(response instanceof Response)) {
+                    throw new Error("Response is not an instance of Response");
+                }
+
+                if (response?.ok === true) {
+                    this.dispatchEvent(new CustomEvent("reload", {bubbles: true}));
+                    filterControl?.showSuccess();
+                }
+
+                if (response.bodyUsed === true) {
+                    return handleIntersectionObserver.call(
+                        this,
+                        response[rawDataSymbol],
+                        response,
+                        filterControl,
+                    );
+                }
+
+                response
+                    .text()
+                    .then((jsonAsText) => {
+                        let json;
+                        try {
+                            json = JSON.parse(jsonAsText);
+                        } catch (e) {
+                            const message = e instanceof Error ? e.message : `${e}`;
+                            filterControl?.showFailureMessage(message);
+                            return Promise.reject(e);
+                        }
+
+                        return handleIntersectionObserver.call(
+                            this,
+                            json,
+                            response,
+                            filterControl,
+                        );
+                    })
+                    .catch((e) => {
+                        filterControl?.showFailureMessage(e.message);
+                    });
+            })
+            .catch((e) => {
+                this.dispatchEvent(
+                    new CustomEvent("error", {bubbles: true, detail: e}),
+                );
+
+                if (!(e instanceof Error)) {
+                    e = new Error(e);
+                }
+
+                filterControl?.showFailureMessage(e.message);
+                return Promise.reject(e);
+            });
+    });
+
+    filterControl.attachObserver(this[filterObserverSymbol]);
 }
 
 function handleIntersectionObserver(json, response, filterControl) {
-	const path = new Pathfinder(json);
-
-	const codePath = this.getOption("response.path.code");
-
-	if (path.exists(codePath)) {
-		const code = `${path.getVia(codePath)}`;
-		if (code && code === "200") {
-			filterControl?.showSuccess();
-			return Promise.resolve(response);
-		}
-
-		const messagePath = this.getOption("response.path.message");
-		if (path.exists(messagePath)) {
-			const message = path.getVia(messagePath);
-			filterControl?.showFailureMessage(message);
-			return Promise.reject(new Error(message));
-		}
-
-		return Promise.reject(new Error("Response code is not 200"));
-	}
+    const path = new Pathfinder(json);
+
+    const codePath = this.getOption("response.path.code");
+
+    if (path.exists(codePath)) {
+        const code = `${path.getVia(codePath)}`;
+        if (code && code === "200") {
+            filterControl?.showSuccess();
+            return Promise.resolve(response);
+        }
+
+        const messagePath = this.getOption("response.path.message");
+        if (path.exists(messagePath)) {
+            const message = path.getVia(messagePath);
+            filterControl?.showFailureMessage(message);
+            return Promise.reject(new Error(message));
+        }
+
+        return Promise.reject(new Error("Response code is not 200"));
+    }
 }
 
 /**
  * @private
  */
 function initAutoInit() {
-	
-	const autoInit = this.getOption("features.autoInit");
-	validateBoolean(autoInit);
 
-	if (autoInit !== true) return;
+    const autoInit = this.getOption("features.autoInit");
+    validateBoolean(autoInit);
+
+    if (autoInit !== true) return;
 
-	if (this.getOption("autoInit.intersectionObserver") === true) {
-		initIntersectionObserver.call(this);
-		return;
-	}
+    if (this.getOption("autoInit.intersectionObserver") === true) {
+        initIntersectionObserver.call(this);
+        return;
+    }
 
-	setTimeout(() => {
-		this.fetch().catch(() => {});
-	}, 0);
+    setTimeout(() => {
+        this.fetch().catch(() => {
+        });
+    }, 0);
 }
 
 function initEventHandler() {
-	this[intersectionObserverHandlerSymbol] = (entries) => {
-		entries.forEach((entry) => {
-			if (entry.isIntersecting) {
-				if (entry.intersectionRatio > 0) {
-					this.fetch();
-				}
-
-				// only load once
-				if (
-					this.getOption("autoInit.oneTime") === true &&
-					this[intersectionObserverObserverSymbol] !== undefined
-				) {
-					this[intersectionObserverObserverSymbol].unobserve(this);
-				}
-			}
-		});
-	};
+    this[intersectionObserverHandlerSymbol] = (entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                if (entry.intersectionRatio > 0) {
+                    this.fetch();
+                }
+
+                // only load once
+                if (
+                    this.getOption("autoInit.oneTime") === true &&
+                    this[intersectionObserverObserverSymbol] !== undefined
+                ) {
+                    this[intersectionObserverObserverSymbol].unobserve(this);
+                }
+            }
+        });
+    };
 }
 
 function initIntersectionObserver() {
-	this.classList.add("intersection-observer");
-
-	const options = {
-		root: null,
-		rootMargin: "0px",
-		threshold: 0.1,
-	};
-
-	this[intersectionObserverObserverSymbol] = new IntersectionObserver(
-		this[intersectionObserverHandlerSymbol],
-		options,
-	);
-	this[intersectionObserverObserverSymbol].observe(this);
+    this.classList.add("intersection-observer");
+
+    const options = {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1,
+    };
+
+    this[intersectionObserverObserverSymbol] = new IntersectionObserver(
+        this[intersectionObserverHandlerSymbol],
+        options,
+    );
+    this[intersectionObserverObserverSymbol].observe(this);
 }
 
 /**
@@ -534,8 +540,8 @@ function initIntersectionObserver() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <slot></slot>`;
 }
 

package/source/components/datatable/save-button.mjs

@@ -77,9 +77,6 @@ class SaveButton extends CustomElement {
 	 * @property {Object} classes The classes
 	 * @property {string} classes.bar The bar class
 	 * @property {string} classes.badge The badge class
-	 * @property {object} mapping The mapping
-	 * @property {string} mapping.data The data
-	 * @property {number} mapping.index The index
 	 * @property {Array} ignoreChanges The ignore changes (regex)
 	 * @property {Array} data The data
 	 * @return {Object}
@@ -105,11 +102,6 @@ class SaveButton extends CustomElement {
 
 			changes: "0",
 
-			mapping: {
-				data: "dataset",
-				index: 0,
-			},
-
 			ignoreChanges: [],
 
 			data: {},

package/source/components/form/form.mjs

@@ -164,13 +164,6 @@ class Form extends DataSet {
 }
 
 function initDataSourceHandler() {
-    if (!this[datasourceLinkedElementSymbol]) {
-        return;
-    }
-console.log(this[datasourceLinkedElementSymbol]);
-    this[datasourceLinkedElementSymbol].setOption("write.responseCallback", (response) => {
-        console.log("response!!!", response);
-    })
 
 }
 

package/source/data/datasource/server/restapi.mjs

@@ -13,7 +13,8 @@
  */
 
 import {internalSymbol, instanceSymbol} from "../../../constants.mjs";
-import {isObject, isFunction} from "../../../types/is.mjs";
+import {isObject, isFunction, isArray} from "../../../types/is.mjs";
+import {diff} from "../../diff.mjs";
 import {Server} from "../server.mjs";
 import {WriteError} from "./restapi/writeerror.mjs";
 import {DataFetchError} from "./restapi/data-fetch-error.mjs";
@@ -30,6 +31,7 @@ const rawDataSymbol = Symbol.for(
     "@schukai/monster/data/datasource/server/restapi/rawdata",
 );
 
+
 /**
  * The RestAPI is a class that enables a REST API server.
  *
@@ -75,6 +77,8 @@ class RestAPI extends Server {
      * @property {Monster.Data.Datasource~exampleCallback[]} write.mapping.callback with the help of the callback, the structures can be adjusted before writing.
      * @property {Object} write.report
      * @property {String} write.report.path Path to validations
+     * @property {Object} write.partial
+     * @property {Function} write.partial.callback Callback function to be executed after the request has been completed. (obj, diffResult) => obj
      * @property {Object} write.sheathing
      * @property {Object} write.sheathing.object Object to be wrapped
      * @property {string} write.sheathing.path Path to the data
@@ -107,6 +111,10 @@ class RestAPI extends Server {
                 report: {
                     path: undefined,
                 },
+
+                partial: {
+                    callback: null,
+                }
             },
             read: {
                 init: {
@@ -135,10 +143,11 @@ class RestAPI extends Server {
         if (!init["method"]) init["method"] = "GET";
 
         let callback = this.getOption("read.responseCallback");
-        if (!callback)
+        if (!callback) {
             callback = (obj) => {
                 this.set(this.transformServerPayload.call(this, obj));
             };
+        }
 
         return fetchData.call(this, init, "read", callback);
     }
@@ -189,7 +198,7 @@ function fetchData(init, key, callback) {
         .then((resp) => {
             response = resp;
 
-            const acceptedStatus =  this.getOption(`${key}.acceptedStatus`, [200]).map(Number);
+            const acceptedStatus = this.getOption(`${key}.acceptedStatus`, [200]).map(Number);
 
             if (acceptedStatus.indexOf(resp.status) === -1) {
                 throw new DataFetchError(

package/source/data/datasource/server.mjs

@@ -12,13 +12,21 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { internalSymbol, instanceSymbol } from "../../constants.mjs";
-import { isObject } from "../../types/is.mjs";
-import { Datasource } from "../datasource.mjs";
-import { Pathfinder } from "../pathfinder.mjs";
-import { Pipe } from "../pipe.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {isArray, isFunction, isObject} from "../../types/is.mjs";
+import {Datasource} from "../datasource.mjs";
+import {diff} from "../diff.mjs";
+import {Pathfinder} from "../pathfinder.mjs";
+import {Pipe} from "../pipe.mjs";
 
-export { Server };
+export {Server};
+
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const serverVersionSymbol = Symbol("serverVersion");
 
 /**
  * Base class for all server data sources
@@ -30,54 +38,82 @@ export { Server };
  * @summary The Server class encapsulates the access to a server datasource
  */
 class Server extends Datasource {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/data/datasource/server");
-	}
-
-	/**
-	 * This prepares the data that comes from the server.
-	 * Should not be called directly.
-	 *
-	 * @private
-	 * @param {Object} payload
-	 * @returns {Object}
-	 */
-	transformServerPayload(payload) {
-		payload = doTransform.call(this, "read", payload);
-
-		const dataPath = this.getOption("read.path");
-		if (dataPath) {
-			payload = new Pathfinder(payload).getVia(dataPath);
-		}
-
-		return payload;
-	}
-
-	/**
-	 * This prepares the data for writing and should not be called directly.
-	 *
-	 * @private
-	 * @param {Object} payload
-	 * @returns {Object}
-	 */
-	prepareServerPayload(payload) {
-		payload = doTransform.call(this, "write", payload);
-
-		const sheathingObject = this.getOption("write.sheathing.object");
-		const sheathingPath = this.getOption("write.sheathing.path");
-
-		if (sheathingObject && sheathingPath) {
-			const sub = payload;
-			payload = sheathingObject;
-			new Pathfinder(payload).setVia(sheathingPath, sub);
-		}
-
-		return payload;
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/data/datasource/server");
+    }
+
+    /**
+     * This prepares the data that comes from the server.
+     * Should not be called directly.
+     *
+     * @private
+     * @param {Object} payload
+     * @returns {Object}
+     */
+    transformServerPayload(payload) {
+        payload = doTransform.call(this, "read", payload);
+        this[serverVersionSymbol] = payload;
+
+        const dataPath = this.getOption("read.path");
+        if (dataPath) {
+            payload = new Pathfinder(payload).getVia(dataPath);
+        }
+
+        return payload;
+    }
+
+    /**
+     * This prepares the data for writing and should not be called directly.
+     *
+     * @private
+     * @param {Object} payload
+     * @returns {Object}
+     */
+    prepareServerPayload(payload) {
+        payload = doTransform.call(this, "write", payload);
+        payload = doDiff.call(this, payload);
+
+        const sheathingObject = this.getOption("write.sheathing.object");
+        const sheathingPath = this.getOption("write.sheathing.path");
+
+        if (sheathingObject && sheathingPath) {
+            const sub = payload;
+            payload = sheathingObject;
+            new Pathfinder(payload).setVia(sheathingPath, sub);
+        }
+
+        return payload;
+    }
+}
+
+/**
+ * 
+ * @param obj
+ * @returns {*}
+ */
+function doDiff(obj) {
+    if (this[serverVersionSymbol] === null || this[serverVersionSymbol] === undefined) {
+        return obj;
+    }
+
+    const callback = this.getOption("write.partial.callback");
+    if (!isFunction(callback)) {
+        return obj;
+    }
+
+    const results = diff(this[serverVersionSymbol], obj);
+    if (!results) {
+        return obj;
+    }
+
+    obj = callback(obj, results);
+    this[serverVersionSymbol] = obj;
+
+    return obj;
 }
 
 /**
@@ -87,24 +123,32 @@ class Server extends Datasource {
  * @returns {Object}
  */
 function doTransform(type, obj) {
-	const transformation = this.getOption(`${type}.mapping.transformer`);
-	if (transformation !== undefined && transformation !== null) {
-		const pipe = new Pipe(transformation);
-		const callbacks = this.getOption(`${type}.mapping.callbacks`);
-
-		if (isObject(callbacks)) {
-			for (const key in callbacks) {
-				if (
-					callbacks.hasOwnProperty(key) &&
-					typeof callbacks[key] === "function"
-				) {
-					pipe.setCallback(key, callbacks[key]);
-				}
-			}
-		}
-
-		obj = pipe.run(obj);
-	}
-
-	return obj;
+    const transformation = this.getOption(`${type}.mapping.transformer`);
+    if (transformation !== undefined && transformation !== null) {
+        const pipe = new Pipe(transformation);
+        const callbacks = this.getOption(`${type}.mapping.callbacks`);
+
+        if (isArray(callbacks)) {
+            for (const callback of callbacks) {
+                if (typeof callback === "function") {
+                    pipe.setCallback(callback);
+                }
+            }
+        }
+
+        if (isObject(callbacks)) {
+            for (const key in callbacks) {
+                if (
+                    callbacks.hasOwnProperty(key) &&
+                    typeof callbacks[key] === "function"
+                ) {
+                    pipe.setCallback(key, callbacks[key]);
+                }
+            }
+        }
+
+        obj = pipe.run(obj);
+    }
+
+    return obj;
 }

package/source/data/diff.mjs

@@ -183,4 +183,4 @@ function getOperator(a, b) {
 	}
 
 	return operator;
-}
+}

package/test/cases/data/diff.mjs

@@ -6,6 +6,43 @@ import {Queue} from "../../../source/types/queue.mjs";
 
 describe('Diff', function () {
 
+    describe('test to datasets', function () {
+
+        var obj1, obj2;
+
+        beforeEach(() => {
+            obj1 = [
+                {
+                    "id": 1,
+                    "name": "test"
+                },
+                {
+                    "id": 2,
+                    "name": "test2"
+                }
+            ]
+
+            obj2 = [
+                {
+                    "id": 1,
+                    "name": "test"
+                },
+                {
+                    "id": "3",
+                    "name": "test2"
+                }
+            ]
+
+        });
+
+        it('should return the difference between two datasets', function () {
+            let d = diff(obj1, obj2);
+            expect(JSON.stringify(d)).is.equal('[{"operator":"update","path":["1","id"],"first":{"value":2,"type":"number"},"second":{"value":"3","type":"string"}}]');
+        });
+        
+        
+    })
+    
     describe('Diff special cases', function () {
 
         var obj1, obj2;