Use structuredClone

panel/lab/components/stats/1_stats/index.vue

@@ -38,7 +38,7 @@ export default {
 			];
 		},
 		reportsWithoutTheme() {
-			return this.$helper.clone(this.reports).map((report) => {
+			return structuredClone(this.reports).map((report) => {
 				report.icon = null;
 				report.theme = null;
 				return report;

panel/src/components/Forms/Blocks/Blocks.vue

@@ -329,7 +329,7 @@ export default {
 		},
 		async duplicate(block, index) {
 			const copy = {
-				...this.$helper.clone(block),
+				...structuredClone(block),
 				id: this.$helper.uuid()
 			};
 			this.blocks.splice(index + 1, 0, copy);
@@ -669,7 +669,7 @@ export default {
 			if (to < 0) {
 				return;
 			}
-			let blocks = this.$helper.clone(this.blocks);
+			let blocks = structuredClone(this.blocks);
 			blocks.splice(from, 1);
 			blocks.splice(to, 0, block);
 			this.blocks = blocks;
@@ -679,7 +679,7 @@ export default {
 		},
 		async split(block, index, contents) {
 			// prepare old block with reduced content chunk
-			const oldBlock = this.$helper.clone(block);
+			const oldBlock = structuredClone(block);
 			oldBlock.content = { ...oldBlock.content, ...contents[0] };
 
 			// create a new block and merge in default contents as

panel/src/components/Forms/Input/TagsInput.vue

@@ -131,7 +131,7 @@ export default {
 			// no new tags if this is full,
 			// check if the tag is accepted
 			if (this.isAllowed(tag) === true) {
-				const tags = this.$helper.object.clone(this.value);
+				const tags = structuredClone(this.value);
 				tags.push(tag.value);
 				this.$emit("input", tags);
 			}
@@ -182,7 +182,7 @@ export default {
 			}
 
 			// replace the tag at the given index
-			const tags = this.$helper.object.clone(this.value);
+			const tags = structuredClone(this.value);
 			tags.splice(index, 1, updated.value);
 			this.$emit("input", tags);
 

panel/src/components/Forms/Layouts/Layouts.vue

@@ -127,7 +127,7 @@ export default {
 			});
 		},
 		duplicate(index, layout) {
-			const copy = this.$helper.clone(layout);
+			const copy = structuredClone(layout);
 
 			// replace all unique IDs for layouts, columns and blocks
 			// the method processes a single object and returns it as an array
@@ -192,7 +192,7 @@ export default {
 				// move throught the new layout rows in steps of columns per row
 				for (let i = 0; i < chunks; i += newLayout.columns.length) {
 					const copy = {
-						...this.$helper.clone(newLayout),
+						...structuredClone(newLayout),
 						id: this.$helper.uuid()
 					};
 

panel/src/components/Navigation/Tags.vue

@@ -108,7 +108,7 @@ export default {
 			handler() {
 				// make sure values are not reactive
 				// otherwise this could have nasty side-effects
-				let tags = this.$helper.object.clone(this.value);
+				let tags = structuredClone(this.value);
 
 				// sort all tags by the available options
 				if (this.sort === true) {

panel/src/components/Views/System/SystemSecurity.vue

@@ -28,8 +28,6 @@
 </template>
 
 <script>
-import { clone } from "@/helpers/object.js";
-
 /**
  * @internal
  * @since 4.0.0
@@ -42,7 +40,7 @@ export default {
 	},
 	data() {
 		return {
-			issues: clone(this.security)
+			issues: structuredClone(this.security)
 		};
 	},
 	async created() {

panel/src/helpers/field.js

@@ -1,13 +1,11 @@
-import { clone } from "./object.js";
-
 /**
  * Loads the default value for a field definition
  * @param {Object} field
  * @returns {mixed}
  */
 export function defaultValue(field) {
 	if (field.default !== undefined) {
-		return clone(field.default);
+		return structuredClone(field.default);
 	}
 
 	const component =

panel/src/helpers/object.js

@@ -1,15 +1,17 @@
 /**
  * Clone provided object or array
  *
- * @param {Object|array} array
+ * @param {Object|array} value
  * @returns  {Object|array}
+ *
+ * @deprecated Use `structuredClone` instead
  */
-export function clone(array) {
-	if (array === undefined) {
+export function clone(value) {
+	if (value === undefined) {
 		return undefined;
 	}
 
-	return JSON.parse(JSON.stringify(array));
+	return structuredClone(value);
 }
 
 /**

panel/src/store/modules/content.js

@@ -1,5 +1,5 @@
 import { set, del } from "vue";
-import { clone, length } from "@/helpers/object.js";
+import { length } from "@/helpers/object.js";
 
 const keep = (id, data) => {
 	localStorage.setItem("kirby$content$" + id, JSON.stringify(data));
@@ -86,7 +86,7 @@ export default {
 		 * Returns original (in content file) values for passed model ID
 		 */
 		originals: (state, getters) => (id) => {
-			return clone(getters.model(id).originals);
+			return structuredClone(getters.model(id).originals);
 		},
 		/**
 		 * Returns values (incl. unsaved changes) for passed model ID
@@ -101,7 +101,7 @@ export default {
 		 * Returns unsaved changes for passed model ID
 		 */
 		changes: (state, getters) => (id) => {
-			return clone(getters.model(id).changes);
+			return structuredClone(getters.model(id).changes);
 		}
 	},
 
@@ -138,7 +138,7 @@ export default {
 		},
 		MOVE(state, [from, to]) {
 			// move state
-			const model = clone(state.models[from]);
+			const model = structuredClone(state.models[from]);
 			del(state.models, from);
 			set(state.models, to, model);
 
@@ -171,7 +171,7 @@ export default {
 				value = null;
 			}
 
-			value = clone(value);
+			value = structuredClone(value);
 
 			// // compare current field value with its original value
 			const current = JSON.stringify(value);
@@ -245,7 +245,7 @@ export default {
 			context.commit("CLEAR");
 		},
 		create(context, model) {
-			const content = clone(model.content);
+			const content = structuredClone(model.content);
 
 			// remove fields from the content object that
 			// should be ignored in changes or when saving content