From bad7a535dcc2ff74a3e43ce6d4df46cb7eebdcd5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 14 May 2024 09:24:18 +0100
Subject: [PATCH] add clonedeep that copies non-serialisable stuff

---
 .../components/app/charts/ApexChart.svelte    |  5 ++-
 .../components/app/charts/AreaChart.svelte    |  2 +-
 .../src/components/app/charts/BarChart.svelte |  2 +-
 .../app/charts/CandleStickChart.svelte        |  2 +-
 .../components/app/charts/DonutChart.svelte   |  2 +-
 .../components/app/charts/LineChart.svelte    |  2 +-
 .../src/components/app/charts/PieChart.svelte |  2 +-
 .../src/components/app/charts/formatters.js   |  8 ----
 .../client/src/components/app/charts/utils.js | 40 +++++++++++++++++++
 .../src/components/app/charts/utils.test.js   | 33 +++++++++++++++
 10 files changed, 82 insertions(+), 16 deletions(-)
 delete mode 100644 packages/client/src/components/app/charts/formatters.js
 create mode 100644 packages/client/src/components/app/charts/utils.js
 create mode 100644 packages/client/src/components/app/charts/utils.test.js

diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 8cbdbd0cca..1fd3cffdce 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import ApexCharts from "apexcharts"
   import { Icon } from "@budibase/bbui"
-  import { cloneDeep } from "lodash"
+  import { cloneDeep } from "./utils"
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -10,7 +10,8 @@
   export let options
 
   // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone options here to provide a buffer.
-  $: optionsCopy = structuredClone(options)
+  $: optionsCopy = cloneDeep(options)
+  $: console.log(options, optionsCopy)
 
   let chartElement
   let chart
diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index d30365e4d0..626f2e041a 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index bd1a2f768a..eded24ad63 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let dataProvider
   export let labelColumn
diff --git a/packages/client/src/components/app/charts/CandleStickChart.svelte b/packages/client/src/components/app/charts/CandleStickChart.svelte
index 06e0409add..8ddb4d4047 100644
--- a/packages/client/src/components/app/charts/CandleStickChart.svelte
+++ b/packages/client/src/components/app/charts/CandleStickChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 5fab53a25c..85317b1d01 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 4fced54066..b1325950ab 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 5ddf88d43d..413bf93b54 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -1,6 +1,6 @@
 <script>
   import ApexChart from "./ApexChart.svelte"
-  import formatters from "./formatters"
+  import { formatters } from "./utils"
 
   export let title
   export let dataProvider
diff --git a/packages/client/src/components/app/charts/formatters.js b/packages/client/src/components/app/charts/formatters.js
deleted file mode 100644
index 72a59ad56e..0000000000
--- a/packages/client/src/components/app/charts/formatters.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const formatters = {
-  ["Default"]: val => val,
-  ["Thousands"]: val => `${Math.round(val / 1000)}K`,
-  ["Millions"]: val => `${Math.round(val / 1000000)}M`,
-  ["Datetime"]: val => new Date(val).toLocaleString(),
-}
-
-export default formatters
diff --git a/packages/client/src/components/app/charts/utils.js b/packages/client/src/components/app/charts/utils.js
new file mode 100644
index 0000000000..f481c99bc0
--- /dev/null
+++ b/packages/client/src/components/app/charts/utils.js
@@ -0,0 +1,40 @@
+export const formatters = {
+  ["Default"]: val => val,
+  ["Thousands"]: val => `${Math.round(val / 1000)}K`,
+  ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+  ["Datetime"]: val => new Date(val).toLocaleString(),
+}
+
+// Deep clone which copies function references
+export const cloneDeep = (value) => {
+  const typesToNaiveCopy = ["string", "boolean", "number", "function", "symbol"]
+
+  if (value === null) {
+    return null
+  }
+
+  if (value === undefined) {
+    return undefined
+  }
+
+  if (typesToNaiveCopy.includes(typeof value)) {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(element => cloneDeep(element))
+  }
+
+  // Only copy "pure" objects, we want to error on stuff like Maps or Sets
+  if (typeof value === "object" && value.constructor.name === "Object") {
+    const cloneObject = {}
+
+    Object.entries(value).forEach(([key, childValue]) => {
+      cloneObject[key] = cloneDeep(childValue)
+    })
+
+    return cloneObject;
+  }
+
+  throw `Unsupported value: "${value}" of type: "${typeof value}"`
+}
diff --git a/packages/client/src/components/app/charts/utils.test.js b/packages/client/src/components/app/charts/utils.test.js
new file mode 100644
index 0000000000..e74aaa93b0
--- /dev/null
+++ b/packages/client/src/components/app/charts/utils.test.js
@@ -0,0 +1,33 @@
+import { expect, describe, it, vi } from "vitest"
+import {
+  cloneDeep,
+} from "./utils"
+
+describe("utils", () => {
+  let context;
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    context = {};
+  })
+
+  describe("cloneDeep", () => {
+    beforeEach(() => {
+      context.value = {
+        obj: { one: 1, two: 2 },
+        arr: [1, { first: null, second: undefined }, 2],
+        str: "test",
+        num: 123,
+        bool: true,
+        sym: Symbol("test"),
+        func: () => "some value"
+      }
+      context.cloneValue = cloneDeep(context.value);
+    });
+
+    it("to clone the object and not copy object references", () => {
+      expect(context.cloneValue.obj.one).toEqual(1)
+      expect(context.cloneValue.obj.two).toEqual(2)
+    });
+  })
+})