From 5e3411ac54d78c5d34a963f51b8ec2770674c3ca Mon Sep 17 00:00:00 2001
From: mytlogos <mytlogos@hotmail.com>
Date: Sat, 11 Dec 2021 20:57:24 +0100
Subject: [PATCH] fix(website): address vue warnings

- add some logging
- probably fixed some form-binding bugs
---
 .../customHook/attribute-selector.vue         | 100 +++++--
 .../customHook/custom-hook-form.vue           | 182 ++++++------
 .../components/customHook/request-config.vue  | 139 +++++----
 .../src/components/customHook/selector.vue    | 144 +++++-----
 .../components/customHook/value-transfer.vue  | 263 ++++++++----------
 .../customHook/variable-extractor.vue         | 114 +++++---
 packages/website/src/init.ts                  |  38 +++
 packages/website/src/views/CustomHookView.vue |   2 +-
 8 files changed, 554 insertions(+), 428 deletions(-)

diff --git a/packages/website/src/components/customHook/attribute-selector.vue b/packages/website/src/components/customHook/attribute-selector.vue
index cb683fa1..aedcac24 100644
--- a/packages/website/src/components/customHook/attribute-selector.vue
+++ b/packages/website/src/components/customHook/attribute-selector.vue
@@ -5,7 +5,7 @@
         <label for="attributeName" class="form-label">Attributename</label>
         <input
           id="attributeName"
-          v-model="attribute"
+          v-model="model.attribute"
           type="text"
           class="form-control"
           placeholder="Name of the Attribute"
@@ -17,11 +17,11 @@
         <div class="form-check form-switch">
           <input
             id="resolveAttributeValue"
-            v-model="resolve"
+            v-model="model.resolve"
             class="form-check-input"
             type="checkbox"
             role="switch"
-            :checked="resolve"
+            :checked="model.resolve"
           />
           <label class="form-check-label" for="resolveAttributeValue">Resolve Value with Base Link</label>
         </div>
@@ -32,33 +32,48 @@
         <div class="form-check form-switch">
           <input
             id="useRegex"
-            v-model="useRegex"
+            v-model="model.useRegex"
             class="form-check-input"
             type="checkbox"
             role="switch"
-            :checked="useRegex"
+            :checked="model.useRegex"
           />
           <label class="form-check-label" for="useRegex">Use Regex for Value</label>
         </div>
       </div>
     </div>
-    <div v-if="useRegex" class="row mb-3">
+    <div v-if="model.useRegex" class="row mb-3">
       <div class="col">
-        <regex v-model="regex" />
+        <regex v-model="model.regex" />
       </div>
       <div class="col">
         <label for="replace" class="form-label">Replace value with</label>
-        <input id="replace" v-model="replace" type="text" class="form-control" placeholder="Replace Pattern" />
+        <input id="replace" v-model="model.replace" type="text" class="form-control" placeholder="Replace Pattern" />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { AttributeSelector } from "enterprise-scraper/dist/externals/custom/types";
+import { AttributeSelector, JsonRegex } from "enterprise-scraper/dist/externals/custom/types";
 import { defineComponent, PropType } from "vue";
-import { createComputedProperty } from "../../init";
+import { clone, deepEqual, Logger } from "../../init";
 import Regex from "./regex.vue";
 
+function model() {
+  return {
+    useRegex: false,
+    attribute: "",
+    resolve: false,
+    regex: {
+      pattern: "",
+      flags: "",
+    },
+    replace: "",
+  };
+}
+
+const logger = new Logger("attribute-selector");
+
 export default defineComponent({
   name: "AttributeSelector",
   components: {
@@ -73,31 +88,62 @@ export default defineComponent({
   emits: ["update:modelValue"],
   data() {
     return {
-      useRegex: false,
+      model: model(),
     };
   },
-  computed: {
-    attribute: createComputedProperty("modelValue", "attribute"),
-    resolve: createComputedProperty("modelValue", "resolve"),
-    regex: createComputedProperty("modelValue", "regex"),
-    replace: createComputedProperty("modelValue", "replace"),
-  },
   watch: {
-    useRegex(newValue: boolean) {
-      if (!newValue) {
-        const tmp = { ...this.modelValue };
+    model: {
+      handler(newValue: ReturnType<typeof model>) {
+        const newModelValue: Partial<AttributeSelector> = {
+          attribute: newValue.attribute,
+          // @ts-expect-error
+          resolve: newValue.resolve,
+        };
 
-        if ("regex" in tmp) {
+        if (newValue.useRegex) {
           // @ts-expect-error
-          delete tmp.regex;
+          newModelValue.regex = {
+            pattern: newValue.regex.pattern,
+            flags: newValue.regex.flags,
+          };
           // @ts-expect-error
-          delete tmp.replace;
+          newModelValue.replace = newValue.replace;
+        }
 
-          this.$emit("update:modelValue", tmp);
+        if (deepEqual(newModelValue, this.modelValue)) {
+          logger.info("Did not update model from prop");
+        } else {
+          logger.info("Updated modelValue");
+          this.$emit("update:modelValue", newModelValue);
+        }
+      },
+      deep: true,
+    },
+    modelValue: {
+      handler(newValue: Partial<AttributeSelector>) {
+        if (!newValue) {
+          this.model = model();
+          logger.info("attribute-selector: Resetting cuz ther is no value");
+          return;
+        }
+        const newModel = clone(this.model);
+        newModel.attribute = newValue.attribute || "";
+        newModel.resolve = (newValue.resolve as boolean) || false;
+        newModel.regex = ("regex" in newValue && (newValue.regex as JsonRegex)) || { flags: "", pattern: "" };
+        newModel.replace = ("replace" in newValue && newValue.replace) || "";
+
+        if (newModel.regex.pattern || newModel.regex.flags) {
+          newModel.useRegex = true;
+        }
+        if (deepEqual(newModel, this.model)) {
+          logger.info("Did not update model from prop");
+        } else {
+          logger.info("Updated model from prop");
+          this.model = newModel;
         }
-      } else {
-        this.$emit("update:modelValue", { ...this.modelValue, regex: {} });
-      }
+      },
+      deep: true,
+      immediate: true,
     },
   },
 });
diff --git a/packages/website/src/components/customHook/custom-hook-form.vue b/packages/website/src/components/customHook/custom-hook-form.vue
index 85d8f89e..b9bcf7b7 100644
--- a/packages/website/src/components/customHook/custom-hook-form.vue
+++ b/packages/website/src/components/customHook/custom-hook-form.vue
@@ -55,13 +55,13 @@
     <div>
       <div>
         <button class="btn btn-primary me-1" role="button" @click="addToc">Create Toc Scraper</button>
-        <button class="btn btn-primary me-1" role="button" :disabled="searchConfig" @click="addSearch">
+        <button class="btn btn-primary me-1" role="button" :disabled="!!searchConfig" @click="addSearch">
           Create Search Scraper
         </button>
-        <button class="btn btn-primary me-1" role="button" :disabled="newsConfig" @click="addNews">
+        <button class="btn btn-primary me-1" role="button" :disabled="!!newsConfig" @click="addNews">
           Create News Scraper
         </button>
-        <button class="btn btn-primary" role="button" :disabled="downloadConfig" @click="addDownload">
+        <button class="btn btn-primary" role="button" :disabled="!!downloadConfig" @click="addDownload">
           Create Download Scraper
         </button>
       </div>
@@ -126,19 +126,13 @@
 </template>
 <script lang="ts">
 import { CustomHook, HookState } from "enterprise-core/dist/types";
-import {
-  DownloadConfig,
-  HookConfig,
-  NewsConfig,
-  SearchConfig,
-  TocConfig,
-  Selector as SelectorType,
-} from "enterprise-scraper/dist/externals/custom/types";
+import { HookConfig, Selector as SelectorType, JsonRegex } from "enterprise-scraper/dist/externals/custom/types";
 import { defineComponent, PropType } from "vue";
 import ScraperConfig from "./scraper-config.vue";
 import Regex from "./regex.vue";
 import "bootstrap/js/dist/collapse";
-import { createComputedProperty } from "../../init";
+import { toArray, deepEqual, Logger } from "../../init";
+import { MediaType } from "../../siteTypes";
 
 export default defineComponent({
   name: "CustomHookForm",
@@ -159,96 +153,115 @@ export default defineComponent({
   emits: ["update:hook", "update:config"],
   data() {
     return {
-      tocConfig: [] as TocConfig[],
-      searchConfig: null as null | SearchConfig,
-      newsConfig: null as null | NewsConfig,
-      downloadConfig: null as null | DownloadConfig,
+      name: this.hook.name,
+      enabled: this.hook.hookState ? this.hook.hookState === HookState.ENABLED : true,
+      comment: this.hook.comment,
+      baseUrl: this.config.base,
+      medium: MediaType.TEXT,
+      domain: this.config.domain || ({ pattern: "", flags: "" } as JsonRegex),
+      tocConfig: toArray(this.config.toc),
+      searchConfig: this.config.search && { ...this.config.search },
+      newsConfig: this.config.news && { ...this.config.news },
+      downloadConfig: this.config.download && { ...this.config.download },
+      logger: new Logger("custom-hook-form"),
     };
   },
   computed: {
-    name: {
-      get() {
-        return this.hook.name;
-      },
-      set(value: string) {
-        this.$emit("update:hook", { ...this.hook, name: value });
-        this.$emit("update:config", { ...this.config, name: value });
-      },
-    },
-    enabled: {
-      get() {
-        return this.hook.hookState === HookState.ENABLED;
-      },
-      set(value: boolean) {
-        this.$emit("update:hook", { ...this.hook, hookState: value ? HookState.ENABLED : HookState.DISABLED });
-      },
+    hookModel(): CustomHook {
+      return {
+        ...this.hook,
+        name: this.name,
+        comment: this.comment,
+        hookState: this.enabled ? HookState.ENABLED : HookState.DISABLED,
+      };
     },
-    comment: createComputedProperty("hook", "comment"),
-    medium: {
-      get() {
-        return this.config.medium;
-      },
-      set(value: number) {
-        this.$emit("update:config", { ...this.config, medium: Number(value) });
-      },
+    configModel(): HookConfig {
+      return {
+        name: this.name,
+        domain: this.domain,
+        base: this.baseUrl,
+        medium: Number(this.medium),
+        download: this.downloadConfig,
+        news: this.newsConfig,
+        toc: this.tocConfig,
+        search: this.searchConfig,
+      };
     },
-    baseUrl: createComputedProperty("config", "base"),
-    domain: createComputedProperty("config", "domain"),
   },
   watch: {
-    tocConfig: {
-      handler(newValue: any[]) {
-        this.$emit("update:config", { ...this.config, toc: newValue });
+    hookModel: {
+      handler(newValue: CustomHook) {
+        if (deepEqual(newValue, this.hook)) {
+          this.logger.info("Did not update hook");
+        } else {
+          this.logger.info("Updated hook");
+          this.$emit("update:hook", newValue);
+        }
       },
       deep: true,
     },
-    newsConfig: {
-      handler(newValue: any[]) {
-        this.$emit("update:config", { ...this.config, news: newValue });
+    configModel: {
+      handler(newValue: HookConfig) {
+        if (deepEqual(newValue, this.hook)) {
+          this.logger.info("Did not update config");
+        } else {
+          this.logger.info("Updated config");
+          this.$emit("update:config", newValue);
+        }
       },
       deep: true,
     },
-    downloadConfig: {
-      handler(newValue: any[]) {
-        this.$emit("update:config", { ...this.config, download: newValue });
+    hook: {
+      handler(newValue: CustomHook) {
+        if (newValue.comment !== this.comment) {
+          this.comment = newValue.comment;
+        }
+        const enabled = newValue.hookState === HookState.ENABLED;
+        if (enabled !== this.enabled) {
+          this.enabled = enabled;
+        }
+        if (newValue.name !== this.name) {
+          this.name = newValue.name;
+        }
       },
       deep: true,
     },
-    searchConfig: {
-      handler(newValue: any[]) {
-        this.$emit("update:config", { ...this.config, search: newValue });
+    config: {
+      handler(newValue: HookConfig) {
+        if (newValue.base !== this.baseUrl) {
+          this.baseUrl = newValue.base;
+        }
+        if (newValue.medium != this.medium) {
+          this.medium = newValue.medium;
+        }
+        if (newValue.name !== this.name) {
+          this.name = newValue.name;
+        }
+        if (!deepEqual(newValue.domain, this.domain)) {
+          this.domain = newValue.domain;
+        }
+        if (!deepEqual(newValue.news, this.newsConfig)) {
+          this.newsConfig = newValue.news;
+        }
+        if (!deepEqual(newValue.toc, this.tocConfig)) {
+          this.tocConfig = toArray(newValue.toc);
+        }
+        if (!deepEqual(newValue.download, this.downloadConfig)) {
+          this.downloadConfig = newValue.download;
+        }
+        if (!deepEqual(newValue.search, this.searchConfig)) {
+          this.searchConfig = newValue.search;
+        }
       },
       deep: true,
     },
   },
-  created() {
-    if (this.config.toc) {
-      this.tocConfig = Array.isArray(this.config.toc) ? [...this.config.toc] : [this.config.toc];
-      this.tocConfig.forEach((value) => this.ensureArray(value, "selector"));
-    }
-    if (this.config.search) {
-      this.searchConfig = { ...this.config.search };
-      this.ensureArray(this.searchConfig, "selector");
-    }
-    if (this.config.news) {
-      this.newsConfig = { ...this.config.news };
-      this.ensureArray(this.newsConfig, "selector");
-    }
-    if (this.config.download) {
-      this.downloadConfig = { ...this.config.download };
-      this.ensureArray(this.downloadConfig, "selector");
-    }
-    // ensure that regex component binds to value of config
-    if (!this.config.domain) {
-      this.$emit("update:config", { ...this.config, domain: {} });
-    }
-  },
   methods: {
     remove(array: any[], index: number) {
       array.splice(index, 1);
     },
     removeConfig(prop: "searchConfig" | "newsConfig" | "downloadConfig") {
-      this[prop] = null;
+      this[prop] = undefined;
     },
     addToc() {
       this.tocConfig.push({
@@ -280,18 +293,11 @@ export default defineComponent({
         selector: [{ selector: "" }],
       };
     },
-    ensureArray<T, K extends keyof T>(value: T, key: K) {
-      if (!value[key]) {
-        // @ts-expect-error
-        value[key] = [];
-      } else if (!Array.isArray(value[key])) {
-        // @ts-expect-error
-        value[key] = [value[key]];
+    addSelector(config: any) {
+      if (!Array.isArray(config.selector)) {
+        config.selector = toArray(config.selector);
       }
-    },
-    addSelector(config: any, key = "selector") {
-      this.ensureArray(config, key);
-      config[key].push({
+      config.selector.push({
         selector: "",
       } as SelectorType<any>);
     },
diff --git a/packages/website/src/components/customHook/request-config.vue b/packages/website/src/components/customHook/request-config.vue
index 618f3a6b..49f62e45 100644
--- a/packages/website/src/components/customHook/request-config.vue
+++ b/packages/website/src/components/customHook/request-config.vue
@@ -4,13 +4,13 @@
   </div>
   <div :id="'request' + id" ref="collapse" class="collapse show">
     <div class="card card-body">
-      <regex v-model="regexUrl" class="mb-3" />
+      <regex v-model="model.regexUrl" class="mb-3" />
       <div class="row mb-3">
         <div class="col">
           <label for="transformUrl" class="form-label">Regex Replace Value</label>
           <input
             id="transformUrl"
-            v-model="transformUrl"
+            v-model="model.transformUrl"
             type="text"
             class="form-control"
             placeholder="Replace Pattern"
@@ -22,7 +22,7 @@
           <label for="templateUrl" class="form-label">Template URL</label>
           <input
             id="templateUrl"
-            v-model="templateUrl"
+            v-model="model.templateUrl"
             type="text"
             class="form-control"
             placeholder="Template String"
@@ -34,7 +34,7 @@
           <label for="templateBody" class="form-label">Template Body</label>
           <input
             id="templateBody"
-            v-model="templateBody"
+            v-model="model.templateBody"
             type="text"
             class="form-control"
             placeholder="Template String"
@@ -46,11 +46,11 @@
           <div class="form-check form-switch">
             <input
               id="jsonResponse"
-              v-model="jsonResponse"
+              v-model="model.jsonResponse"
               class="form-check-input"
               type="checkbox"
               role="switch"
-              :checked="jsonResponse"
+              :checked="model.jsonResponse"
             />
             <label class="form-check-label" for="jsonResponse">Transform Response into JSON</label>
           </div>
@@ -62,42 +62,42 @@
           <div id="httpmethod" class="btn-group" role="group" aria-label="Select the HTTP Method">
             <input
               :id="'get' + id"
-              v-model="options.method"
+              v-model="model.options.method"
               type="radio"
               class="btn-check"
               :name="'httpmethod' + id"
               autocomplete="off"
               value="GET"
-              :checked="options.method === 'GET'"
+              :checked="model.options.method === 'GET'"
             />
             <label class="btn btn-outline-primary" :for="'get' + id">Get</label>
             <input
               :id="'post' + id"
-              v-model="options.method"
+              v-model="model.options.method"
               type="radio"
               class="btn-check"
               :name="'httpmethod' + id"
               autocomplete="off"
               value="POST"
-              :checked="options.method === 'POST'"
+              :checked="model.options.method === 'POST'"
             />
             <label class="btn btn-outline-primary" :for="'post' + id">Post</label>
             <input
               :id="'head' + id"
-              v-model="options.method"
+              v-model="model.options.method"
               type="radio"
               class="btn-check"
               :name="'httpmethod' + id"
               autocomplete="off"
               value="HEAD"
-              :checked="options.method === 'HEAD'"
+              :checked="model.options.method === 'HEAD'"
             />
             <label class="btn btn-outline-primary" :for="'head' + id">Head</label>
           </div>
         </div>
       </div>
       <div>Headers</div>
-      <div v-for="entry in headers" :key="entry[0]" class="row align-items-center mb-3">
+      <div v-for="entry in model.headers" :key="entry[0]" class="row align-items-center mb-3">
         <div class="col">
           <label for="headerName" class="form-label">Name</label>
           <input id="headerName" v-model="entry[0]" type="text" class="form-control" placeholder="Header Key" />
@@ -136,13 +136,24 @@
 </template>
 <script lang="ts">
 import { RequestConfig } from "enterprise-scraper/dist/externals/custom/types";
-import { Options } from "request";
 import { defineComponent, PropType } from "vue";
-import { createComputedProperty, idGenerator } from "../../init";
+import { clone, deepEqual, idGenerator, Logger } from "../../init";
 import Regex from "./regex.vue";
 
 const nextId = idGenerator();
 
+function model(prop: RequestConfig) {
+  return {
+    options: Object.assign({}, prop.options || {}, { method: "GET" }),
+    headers: Object.entries((prop.options || {}).headers || {}) as Array<[string, string]>,
+    regexUrl: prop.regexUrl || { flags: "", pattern: "" },
+    transformUrl: prop.transformUrl || "",
+    templateUrl: prop.templateUrl || "",
+    templateBody: prop.templateBody || "",
+    jsonResponse: prop.jsonResponse || false,
+  };
+}
+
 export default defineComponent({
   name: "RequestConfig",
   components: {
@@ -156,67 +167,73 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   data() {
+    const id = nextId();
     return {
-      id: nextId(),
-      options: {
-        method: "GET",
-      } as Options & { headers: NonNullable<Options["headers"]> },
-      headers: [] as Array<[string, string]>,
+      id,
+      logger: new Logger("request-config-" + id),
+      model: model(this.modelValue),
       nextHeaderName: "",
       nextHeaderValue: "",
     };
   },
-  computed: {
-    regexUrl: createComputedProperty("modelValue", "regexUrl"),
-    transformUrl: createComputedProperty("modelValue", "transformUrl"),
-    templateUrl: createComputedProperty("modelValue", "templateUrl"),
-    templateBody: createComputedProperty("modelValue", "templateBody"),
-    jsonResponse: createComputedProperty("modelValue", "jsonResponse"),
-  },
   watch: {
-    options: {
-      handler(newValue: Options) {
-        this.$emit("update:modelValue", { ...this.modelValue, options: newValue });
-      },
-      deep: true,
-    },
-    "modelValue.options": {
-      handler(newValue: any) {
-        this.options = newValue;
-      },
-      deep: true,
-    },
-    "modelValue.options.headers": {
-      handler(newValue: any) {
-        this.headers = Object.entries(newValue || {});
+    model: {
+      handler(newValue: ReturnType<typeof model>) {
+        const result = clone(this.modelValue);
+
+        result.jsonResponse = newValue.jsonResponse;
+        result.templateBody = newValue.templateBody;
+        result.templateUrl = newValue.templateUrl;
+
+        if (newValue.regexUrl.pattern || newValue.regexUrl.flags) {
+          result.regexUrl = newValue.regexUrl;
+        } else {
+          delete result.regexUrl;
+        }
+        result.transformUrl = newValue.transformUrl || "";
+
+        result.options = clone(newValue.options);
+        result.options.headers = Object.fromEntries(newValue.headers);
+
+        if (deepEqual(result, this.modelValue)) {
+          this.logger.info("Did not update modelValue");
+        } else {
+          this.logger.info("Updated modelValue");
+          this.$emit("update:modelValue", result);
+        }
       },
       deep: true,
     },
-    headers: {
-      handler(newValue: any) {
-        this.$emit("update:modelValue", { ...this.modelValue, headers: Object.fromEntries(newValue) });
+    modelValue: {
+      handler(newValue: RequestConfig) {
+        const result = clone(this.model);
+
+        result.jsonResponse = newValue.jsonResponse || false;
+        result.templateBody = newValue.templateBody || "";
+        result.templateUrl = newValue.templateUrl || "";
+        result.regexUrl = newValue.regexUrl || { pattern: "", flags: "" };
+        result.transformUrl = newValue.transformUrl || "";
+
+        result.options = Object.assign({ method: "GET" }, newValue.options || {});
+
+        // remove it as it is managed separately
+        delete result.options.headers;
+
+        result.headers = Object.entries((newValue.options || {}).headers || {});
+
+        if (deepEqual(result, this.model)) {
+          this.logger.info("Did not update model from prop");
+        } else {
+          this.logger.info("Updated model from prop");
+          this.model = result;
+        }
       },
       deep: true,
     },
   },
-  created() {
-    const options = this.modelValue.options;
-    if (options) {
-      // set defaults from data() to options, if they do not have any value
-      for (const [key, value] of Object.entries(this.options)) {
-        // @ts-expect-error
-        if (!options[key]) {
-          // @ts-expect-error
-          options[key] = value;
-        }
-      }
-      // @ts-expect-error
-      this.options = options;
-    }
-  },
   methods: {
     createHeaderEntry() {
-      this.headers.push([this.nextHeaderName, this.nextHeaderValue]);
+      this.model.headers.push([this.nextHeaderName, this.nextHeaderValue]);
       this.nextHeaderName = "";
       this.nextHeaderValue = "";
     },
diff --git a/packages/website/src/components/customHook/selector.vue b/packages/website/src/components/customHook/selector.vue
index 1cf8fb5a..17310209 100644
--- a/packages/website/src/components/customHook/selector.vue
+++ b/packages/website/src/components/customHook/selector.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="card" role="button" data-bs-toggle="collapse" :data-bs-target="'#selector' + id" aria-expanded="true">
-      <div class="card-body">Selector {{ selector }}</div>
+      <div class="card-body">Selector {{ model.selector }}</div>
     </div>
     <div :id="'selector' + id" ref="collapse" class="collapse show">
       <div class="card card-body">
@@ -18,7 +18,7 @@
             <label for="selector" class="form-label">{{ selectorTitle }} Selector</label>
             <input
               id="selector"
-              v-model="selector"
+              v-model="model.selector"
               type="text"
               class="form-control"
               :placeholder="selectorPlaceholder"
@@ -26,17 +26,17 @@
             />
           </div>
         </div>
-        <regex v-if="allowRegex" v-model="regex" />
+        <regex v-if="allowRegex" v-model="model.regex" />
         <div class="row align-items-center mb-3">
           <div class="col">
             <div class="form-check form-switch">
               <input
                 id="multipleResults"
-                v-model="multiple"
+                v-model="model.multiple"
                 class="form-check-input"
                 type="checkbox"
                 role="switch"
-                :checked="multiple"
+                :checked="model.multiple"
               />
               <label class="form-check-label" for="multipleResults">Expect multiple results for Selector</label>
             </div>
@@ -44,7 +44,7 @@
         </div>
         <div class="mb-3">
           <button class="btn btn-primary" role="button" @click="addVariable">Add Variable</button>
-          <template v-if="variables.length">
+          <template v-if="model.variables.length">
             <div
               class="card card-body mt-3"
               role="button"
@@ -57,13 +57,13 @@
             <div :id="'selector' + id + 'transfers'" class="collapse show">
               <div class="card">
                 <variable-extractor
-                  v-for="(variable, index) in variables"
+                  v-for="(variable, index) in model.variables"
                   :key="variable.variableName + index"
-                  v-model="variables[index]"
+                  v-model="model.variables[index]"
                   :selector-type="currentSelectorType"
                   class="card-body mt-3"
                   :class="{ 'border-top': index }"
-                  @delete="remove(variables, index)"
+                  @delete="remove(model.variables, index)"
                 />
               </div>
             </div>
@@ -71,7 +71,7 @@
         </div>
         <div class="mb-3">
           <button class="btn btn-primary" role="button" @click="addTransfer">Add Transfer</button>
-          <template v-if="transfers.length">
+          <template v-if="model.transfers.length">
             <div
               class="card card-body mt-3"
               role="button"
@@ -84,13 +84,13 @@
             <div :id="'selector' + id + 'transfers'" class="collapse show">
               <div class="card">
                 <value-transfer
-                  v-for="(transfer, index) in transfers"
+                  v-for="(transfer, index) in model.transfers"
                   :key="transfer.targetKey + index"
-                  v-model="transfers[index]"
+                  v-model="model.transfers[index]"
                   :selector-type="currentSelectorType"
                   class="card-body mt-3"
                   :class="{ 'border-top': index }"
-                  @delete="remove(transfers, index)"
+                  @delete="remove(model.transfers, index)"
                 />
               </div>
             </div>
@@ -99,12 +99,12 @@
         <div class="mb-3">
           <button class="btn btn-primary" role="button" @click="addChild">Add Child</button>
           <selector
-            v-for="(child, index) in children"
+            v-for="(child, index) in model.children"
             :key="index"
-            v-model="children[index]"
+            v-model="model.children[index]"
             :selector-types="selectorTypes"
             class="mt-3"
-            @delete="remove(children, index)"
+            @delete="remove(model.children, index)"
           />
         </div>
       </div>
@@ -113,6 +113,7 @@
 </template>
 <script lang="ts">
 import {
+  JsonRegex,
   JsonSelector,
   JSONTransfer,
   RegexTransfer,
@@ -123,13 +124,28 @@ import {
 import { defineComponent, PropType } from "vue";
 import ValueTransfer from "./value-transfer.vue";
 import VariableExtractor from "./variable-extractor.vue";
-import { createComputedProperty, idGenerator } from "../../init";
+import { clone, idGenerator, Logger, deepEqual, toArray } from "../../init";
 import { SelectorType, SelectorValueType } from "../../siteTypes";
 import Regex from "./regex.vue";
 
 // this relies on the fact that a component is loaded only once
 const nextId = idGenerator();
 
+function model(prop: ModelValue) {
+  return {
+    children: toArray(prop.children as any) as Array<Selector<any> | JsonSelector<any, any>>,
+    transfers: toArray(prop.transfers as any) as Array<
+      SimpleTransfer<any> | RegexTransfer<any> | JSONTransfer<any, any>
+    >,
+    variables: toArray(prop.variables as any) as VarExtractor[],
+    selector: prop.selector,
+    multiple: prop.multiple || false,
+    regex: ("regex" in prop && (prop.regex as JsonRegex)) || { pattern: "", flags: "" },
+  };
+}
+
+type ModelValue = Selector<any> | JsonSelector<any, any>;
+
 export default defineComponent({
   name: "Selector",
   components: {
@@ -150,22 +166,19 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "delete"],
   data() {
+    const id = nextId();
     return {
-      id: nextId(),
-      children: [] as Array<Selector<any> | JsonSelector<any, any>>,
-      transfers: [] as Array<SimpleTransfer<any> | RegexTransfer<any> | JSONTransfer<any, any>>,
-      variables: [] as VarExtractor[],
+      id,
+      logger: new Logger("selector-" + id),
+      model: model(this.modelValue),
     };
   },
   computed: {
-    selector: createComputedProperty("modelValue", "selector"),
-    multiple: createComputedProperty("modelValue", "multiple"),
-    regex: createComputedProperty("modelValue", "regex"),
     currentSelectorType(): SelectorValueType {
       if (this.selectorTypes.length === 1 && this.selectorTypes[0] === "json") {
         return "json";
       }
-      if (this.selectorTypes.includes("regex") && (this.regex?.pattern || this.regex?.flags)) {
+      if (this.selectorTypes.includes("regex") && (this.model.regex.pattern || this.model.regex.flags)) {
         return "regex";
       }
       return "text";
@@ -189,65 +202,66 @@ export default defineComponent({
     },
   },
   watch: {
-    allowRegex: {
-      handler(newValue: boolean) {
-        if (newValue) {
-          this.$emit("update:modelValue", { ...this.modelValue, regex: {} });
-        } else {
-          const tmp = { ...this.modelValue };
+    model: {
+      handler(newValue: ReturnType<typeof model>) {
+        const result = clone(this.modelValue);
+
+        result.variables = [...newValue.variables];
+        result.transfers = [...newValue.transfers] as any[];
+        result.children = [...newValue.children] as any[];
+
+        result.multiple = newValue.multiple;
+        result.selector = newValue.selector;
+
+        if (this.currentSelectorType === "regex") {
           // @ts-expect-error
-          delete tmp.regex;
-          this.$emit("update:modelValue", tmp);
+          result.regex = newValue.regex;
+        }
+
+        if (deepEqual(result, this.modelValue)) {
+          this.logger.info("Did not update modelValue");
+        } else {
+          this.logger.info("Updated modelValue");
+          this.$emit("update:modelValue", result);
         }
-      },
-      immediate: true,
-    },
-    children: {
-      handler(newValue: any[]) {
-        this.$emit("update:modelValue", { ...this.modelValue, children: newValue });
-      },
-      deep: true,
-    },
-    transfers: {
-      handler(newValue: any[]) {
-        this.$emit("update:modelValue", { ...this.modelValue, transfers: newValue });
       },
       deep: true,
     },
-    variables: {
-      handler(newValue: any[]) {
-        this.$emit("update:modelValue", { ...this.modelValue, variables: newValue });
+    modelValue: {
+      handler(newValue: ModelValue) {
+        const result = clone(this.model);
+
+        result.variables = toArray(newValue.variables);
+        result.transfers = toArray(newValue.transfers as any);
+        result.children = toArray(newValue.children as any);
+
+        result.multiple = newValue.multiple || false;
+        result.selector = newValue.selector;
+        result.regex = ("regex" in newValue && (newValue.regex as JsonRegex)) || { pattern: "", flags: "" };
+
+        if (deepEqual(result, this.model)) {
+          this.logger.info("Did not update model from prop");
+        } else {
+          this.logger.info("Updated model from prop");
+          this.model = result;
+        }
       },
       deep: true,
     },
   },
-  created() {
-    if (this.modelValue.children) {
-      this.children = [...this.modelValue.children];
-    }
-    if (this.modelValue.transfers) {
-      this.transfers = [...this.modelValue.transfers];
-    }
-    if (this.modelValue.variables) {
-      this.variables = [...this.modelValue.variables];
-    }
-    if (this.allowRegex && !this.regex) {
-      this.regex = {};
-    }
-  },
   methods: {
     remove(array: any[], index: number) {
       array.splice(index, 1);
     },
     addVariable() {
-      this.variables.push({
+      this.model.variables.push({
         variableName: "",
         value: "",
         extract: undefined,
       });
     },
     addTransfer() {
-      this.transfers.push({
+      this.model.transfers.push({
         targetKey: "",
         type: "string",
         optional: false,
@@ -256,7 +270,7 @@ export default defineComponent({
       });
     },
     addChild() {
-      this.children.push({
+      this.model.children.push({
         selector: "",
         multiple: false,
         children: [],
diff --git a/packages/website/src/components/customHook/value-transfer.vue b/packages/website/src/components/customHook/value-transfer.vue
index 80993860..8048c3a1 100644
--- a/packages/website/src/components/customHook/value-transfer.vue
+++ b/packages/website/src/components/customHook/value-transfer.vue
@@ -59,39 +59,39 @@
           <template v-if="selectorType !== 'regex'">
             <input
               :id="'valueText' + id"
-              v-model="use"
+              v-model="model.use"
               type="radio"
               class="btn-check"
               :name="'valueSource' + id"
               autocomplete="off"
               value="text"
-              :checked="use === 'text'"
+              :checked="model.use === 'text'"
             />
             <label class="btn btn-outline-primary" :for="'valueText' + id">Full Value</label>
           </template>
           <template v-if="allowRegex">
             <input
               :id="'valueRegex' + id"
-              v-model="use"
+              v-model="model.use"
               type="radio"
               class="btn-check"
               :name="'valueSource' + id"
               autocomplete="off"
               value="regex"
-              :checked="use === 'regex'"
+              :checked="model.use === 'regex'"
             />
             <label class="btn btn-outline-primary" :for="'valueRegex' + id">Regex</label>
           </template>
           <template v-if="allowAttribute">
             <input
               :id="'valueAttribute' + id"
-              v-model="use"
+              v-model="model.use"
               type="radio"
               class="btn-check"
               :name="'valueSource' + id"
               autocomplete="off"
               value="attribute"
-              :checked="use === 'attribute'"
+              :checked="model.use === 'attribute'"
             />
             <label class="btn btn-outline-primary" :for="'valueAttribute' + id">Attribute</label>
           </template>
@@ -128,28 +128,28 @@
         </div>
       </div>
     </div>
-    <div v-if="use === 'regex'" class="row mb-3">
+    <div v-if="model.use === 'regex'" class="row mb-3">
       <div class="col">
         <label for="variableName" class="form-label">Value Transformation Regex Replace</label>
         <input
           id="variableName"
-          v-model="extractRegex"
+          v-model="model.extractRegex"
           type="text"
           class="form-control"
           placeholder="Replace Pattern"
         />
       </div>
     </div>
-    <attribute-selector v-else-if="use === 'attribute' && allowAttribute" v-model="extractAttribute" />
+    <attribute-selector v-else-if="model.use === 'attribute' && allowAttribute" v-model="model.extractAttribute" />
     <div>Transfer Mapping</div>
-    <div v-for="mapping in mappings" :key="mapping.from" class="row align-items-center mb-3">
+    <div v-for="mapping in model.mappings" :key="mapping[0]" class="row align-items-center mb-3">
       <div class="col">
         <label for="attributeName" class="form-label">From</label>
-        <input id="attributeName" v-model="mapping.from" type="text" class="form-control" placeholder="Mapped from" />
+        <input id="attributeName" v-model="mapping[0]" type="text" class="form-control" placeholder="Mapped from" />
       </div>
       <div class="col">
         <label for="attributeName" class="form-label">To</label>
-        <input id="attributeName" v-model="mapping.to" type="text" class="form-control" placeholder="Mapped to" />
+        <input id="attributeName" v-model="mapping[1]" type="text" class="form-control" placeholder="Mapped to" />
       </div>
     </div>
     <div class="row align-items-center mb-3">
@@ -187,7 +187,7 @@ import {
   TransferType,
 } from "enterprise-scraper/dist/externals/custom/types";
 import { defineComponent, PropType } from "vue";
-import { clone, idGenerator, deepEqual } from "../../init";
+import { clone, idGenerator, deepEqual, Logger } from "../../init";
 import { SelectorValueType } from "../../siteTypes";
 import AttributeSelector from "./attribute-selector.vue";
 
@@ -196,6 +196,22 @@ type Source = "text" | "regex" | "attribute";
 
 type Transfer = SimpleTransfer<any> | RegexTransfer<any> | JSONTransfer<any, any>;
 
+function model() {
+  return {
+    mappings: [] as Array<[string, string]>,
+    use: "text" as Source,
+    extractAttribute: {
+      attribute: "",
+    } as AttributeSelectorType,
+    extractRegex: "",
+    targetKey: "",
+    sourceKey: "",
+    type: "string" as TransferType,
+    optional: false as boolean | undefined,
+    html: false as boolean | undefined,
+  };
+}
+
 export default defineComponent({
   name: "ValueTransfer",
   components: {
@@ -212,23 +228,17 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue", "delete"],
-  data: () => ({
-    id: nextId(),
-    use: "text" as Source,
-    extractAttribute: {} as AttributeSelectorType,
-    extractRegex: "",
-    nextTo: "",
-    nextFrom: "",
-    mappings: [] as Array<{ from: string; to: string }>,
-    allowedTypes: ["string", "decimal", "integer", "date"] as TransferType[],
-    model: {
-      targetKey: "",
-      sourceKey: "",
-      type: "string",
-      optional: false as boolean | undefined,
-      html: false as boolean | undefined,
-    },
-  }),
+  data() {
+    const id = nextId();
+    return {
+      id,
+      logger: new Logger("value-transfer-" + id),
+      nextTo: "",
+      nextFrom: "",
+      allowedTypes: ["string", "decimal", "integer", "date"] as TransferType[],
+      model: model(),
+    };
+  },
   computed: {
     allowRegex(): boolean {
       return this.selectorType === "regex";
@@ -239,145 +249,108 @@ export default defineComponent({
     },
   },
   watch: {
-    use(newValue: Source) {
-      const tmp = { ...this.modelValue };
-      let update = false;
-
-      if (newValue === "text") {
-        // @ts-expect-error
-        delete tmp.extract;
-        // @ts-expect-error
-        delete tmp.value;
-        update = true;
-      }
-      if (newValue !== "attribute" && "extract" in tmp && typeof tmp.extract === "object") {
-        delete tmp.extract;
-        update = true;
-      }
-      if (newValue === "attribute") {
-        // @ts-expect-error
-        tmp.extract = {};
-        update = true;
-      }
-      if (update) {
-        this.$emit("update:modelValue", tmp);
-      }
-    },
     selectorType(newValue: SelectorValueType) {
-      const tmp = { ...this.modelValue };
-      let update = false;
-
       if (newValue === "json") {
         // json does not have attributes and is not string only, so allow only values/text
-        this.use = "text";
-
-        if ("html" in tmp) {
-          delete tmp.html;
-          update = true;
-        }
-      } else if (newValue === "regex" && this.use === "text") {
+        this.model.use = "text";
+      } else if (newValue === "regex" && this.model.use === "text") {
         // either use attribute or regex replace when parent selector has regex
-        this.use = "regex";
-      } else if (newValue === "text" && this.use === "regex") {
+        this.model.use = "regex";
+      } else if (newValue === "text" && this.model.use === "regex") {
         // regex is only allowed when selectorType === "regex"
-        this.use = "text";
-      }
-
-      if (newValue !== "json" && "sourceKey" in tmp) {
-        // @ts-expect-error
-        delete tmp.sourceKey;
-        update = true;
-      }
-      if (update) {
-        this.$emit("update:modelValue", tmp);
+        this.model.use = "text";
       }
     },
-    mappings: {
-      handler() {
-        const result = this.mappings.reduce((previous, current) => {
-          previous[current.from] = current.to;
-          return previous;
-        }, {} as { [key: string]: string });
-        this.$emit("update:modelValue", { ...this.modelValue, mapping: { include: result } });
-      },
-      deep: true,
-    },
-    extractAttribute: {
-      handler(newValue: AttributeSelectorType) {
-        // @ts-expect-error
-        this.model.extract = newValue;
-      },
-      deep: true,
-    },
-    extractRegex: {
-      handler(newValue: string) {
-        // @ts-expect-error
-        this.model.extract = newValue;
-      },
-      deep: true,
-    },
     model: {
-      handler(newValue: Transfer) {
-        // do not check strict, use undefined == ""
-        if (deepEqual(this.modelValue, newValue) || JSON.stringify(newValue) === JSON.stringify(this.modelValue)) {
-          console.log("value-transfer: Model Value is the same, not updating");
-          return;
+      handler(newValue: ReturnType<typeof model>) {
+        const result: Partial<Transfer> = {
+          targetKey: newValue.targetKey,
+          optional: newValue.optional,
+        };
+
+        if (newValue.mappings.length) {
+          result.mapping = { include: Object.fromEntries(newValue.mappings) };
+        }
+
+        if (this.selectorType === "json") {
+          // @ts-expect-error
+          result.sourceKey = newValue.sourceKey;
+        } else {
+          // @ts-expect-error
+          result.html = newValue.html;
+
+          if (newValue.use === "regex") {
+            // @ts-expect-error
+            result.extract = newValue.extractRegex;
+          } else if (newValue.use === "attribute") {
+            // @ts-expect-error
+            result.extract = newValue.extractAttribute;
+          }
+        }
+
+        if (deepEqual(result, this.modelValue)) {
+          this.logger.info("Did not update modelValue");
+        } else {
+          this.logger.info("Updated modelValue");
+          this.$emit("update:modelValue", result);
         }
-        clone(this.modelValue);
-        console.log("value-transfer: Updating modelValue", JSON.stringify(newValue));
-        this.$emit("update:modelValue", clone(newValue));
       },
       deep: true,
     },
     modelValue: {
-      handler(newValue: Transfer) {
-        if (deepEqual(this.model, newValue) || JSON.stringify(newValue) === JSON.stringify(this.model)) {
-          console.log("value-transfer: Model is the same, not updating");
-          return;
-        }
+      handler(newValue: Partial<Transfer>) {
         if (!newValue) {
-          console.log("value-transfer: Reset");
-          this.reset();
+          this.logger.info("Reset");
+          this.model = model();
         } else {
-          console.log("value-transfer: Updating model from prop", JSON.stringify(newValue));
-          this.model.targetKey = newValue.targetKey;
-          this.model.optional = newValue.optional;
-          // @ts-expect-error
-          this.model.sourceKey = newValue.sourceKey;
-          // @ts-expect-error
-          this.model.extract = newValue.extract;
-          // @ts-expect-error
-          this.model.html = newValue.html;
-          // @ts-expect-error
-          this.model.type = newValue.type;
-          // @ts-expect-error
-          this.model.mapping = newValue.mapping;
+          const newModel = clone(this.model);
+          newModel.targetKey = newValue.targetKey || "";
+          newModel.optional = newValue.optional || false;
+          newModel.sourceKey = ("sourceKey" in newValue && newValue.sourceKey) || "";
+
+          let toUse: Source = "text";
+
+          if ("extract" in newValue) {
+            if (typeof newValue.extract === "string") {
+              newModel.extractRegex = newValue.extract || "";
+
+              if (newValue.extract) {
+                toUse = "regex";
+              }
+            } else if (typeof newValue.extract === "object") {
+              newModel.extractAttribute = newValue.extract || {};
+
+              if (newValue.extract.attribute) {
+                toUse = "attribute";
+              }
+            } else {
+              newModel.extractRegex = "";
+              newModel.extractAttribute = { attribute: "" };
+            }
+          }
+          newModel.use = toUse;
+          newModel.html = "html" in newValue && newValue.html;
+          newModel.type = ("type" in newValue && newValue.type) || "string";
+          newModel.mappings = Object.entries((newValue.mapping || {}).include || {});
+
+          if (deepEqual(newModel, this.model)) {
+            this.logger.info("Did not update model from prop");
+          } else {
+            this.logger.info("Updated model from prop");
+            this.model = newModel;
+          }
         }
       },
       deep: true,
+      immediate: true,
     },
   },
   created() {
-    const mapping = this.modelValue.mapping?.include || {};
-    this.mappings = Object.entries(mapping).map((value) => ({ from: value[0], to: value[1] }));
+    this.logger.info("I have created!");
   },
   methods: {
-    reset() {
-      this.extractAttribute = { attribute: "" };
-      this.extractRegex = "";
-      this.mappings = [];
-      this.nextFrom = "";
-      this.nextTo = "";
-      this.model = {
-        targetKey: "",
-        sourceKey: "",
-        type: "string",
-        optional: false,
-        html: false,
-      };
-    },
     createMapping() {
-      this.mappings.push({ from: this.nextFrom, to: this.nextTo });
+      this.model.mappings.push([this.nextFrom, this.nextTo]);
       this.nextFrom = "";
       this.nextTo = "";
     },
diff --git a/packages/website/src/components/customHook/variable-extractor.vue b/packages/website/src/components/customHook/variable-extractor.vue
index 4d1e7f64..c7ff3871 100644
--- a/packages/website/src/components/customHook/variable-extractor.vue
+++ b/packages/website/src/components/customHook/variable-extractor.vue
@@ -13,7 +13,7 @@
         <label for="variableName" class="form-label">Variable Name</label>
         <input
           id="variableName"
-          v-model="variableName"
+          v-model="model.name"
           type="text"
           class="form-control"
           placeholder="Name of the Variable"
@@ -27,64 +27,79 @@
           <template v-if="selectorType !== 'regex'">
             <input
               :id="'sourceText' + id"
-              v-model="use"
+              v-model="model.use"
               type="radio"
               class="btn-check"
               :name="'variableSource' + id"
               autocomplete="off"
               value="text"
-              :checked="use === 'text'"
+              :checked="model.use === 'text'"
             />
             <label class="btn btn-outline-primary" :for="'sourceText' + id">Full Value</label>
           </template>
           <template v-if="allowRegex">
             <input
               :id="'sourceRegex' + id"
-              v-model="use"
+              v-model="model.use"
               type="radio"
               class="btn-check"
               :name="'variableSource' + id"
               autocomplete="off"
               value="regex"
-              :checked="use === 'regex'"
+              :checked="model.use === 'regex'"
             />
             <label class="btn btn-outline-primary" :for="'sourceRegex' + id">Regex</label>
           </template>
           <template v-if="allowAttribute">
             <input
               :id="'sourceAttribute' + id"
-              v-model="use"
+              v-model="model.use"
               type="radio"
               class="btn-check"
               :name="'variableSource' + id"
               autocomplete="off"
               value="attribute"
-              :checked="use === 'attribute'"
+              :checked="model.use === 'attribute'"
             />
             <label class="btn btn-outline-primary" :for="'sourceAttribute' + id">Attribute</label>
           </template>
         </div>
       </div>
     </div>
-    <div v-if="use === 'regex'" class="row mb-3">
+    <div v-if="model.use === 'regex'" class="row mb-3">
       <div class="col">
         <label for="variableName" class="form-label">Value Transformation Regex Replace</label>
-        <input id="variableName" v-model="value" type="text" class="form-control" placeholder="Replace Pattern" />
+        <input id="variableName" v-model="model.value" type="text" class="form-control" placeholder="Replace Pattern" />
       </div>
     </div>
-    <attribute-selector v-else-if="use === 'attribute' && extract && allowAttribute" v-model="extract" />
+    <attribute-selector
+      v-else-if="model.use === 'attribute' && model.extract && allowAttribute"
+      v-model="model.extract"
+    />
   </div>
 </template>
 <script lang="ts">
-import { VariableExtractor } from "enterprise-scraper/dist/externals/custom/types";
+import {
+  AttributeSelector as AttributeSelectorType,
+  VariableExtractor,
+} from "enterprise-scraper/dist/externals/custom/types";
 import { defineComponent, PropType } from "vue";
-import { createComputedProperty, idGenerator } from "../../init";
+import { clone, deepEqual, idGenerator, Logger } from "../../init";
 import { SelectorValueType } from "../../siteTypes";
 import AttributeSelector from "./attribute-selector.vue";
 
 const nextId = idGenerator();
 type Source = "text" | "regex" | "attribute";
 
+function model(prop: VariableExtractor) {
+  return {
+    use: (prop.value ? "regex" : prop.extract?.attribute ? "attribute" : "text") as Source,
+    extract: prop.extract || ({ attribute: "" } as AttributeSelectorType),
+    value: prop.value || "",
+    name: prop.variableName,
+  };
+}
+
 export default defineComponent({
   name: "VariableExtractor",
   components: { AttributeSelector },
@@ -100,16 +115,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "delete"],
   data() {
+    const id = nextId();
     return {
-      id: nextId(),
-      use: "text" as Source,
-      extract: {},
-      value: "",
+      id,
+      model: model(this.modelValue),
+      logger: new Logger("variable-extractor-" + id),
     };
   },
   computed: {
-    variableName: createComputedProperty("modelValue", "variableName"),
-
     allowRegex(): boolean {
       return this.selectorType === "regex";
     },
@@ -131,37 +144,56 @@ export default defineComponent({
       }
       this.$emit("update:modelValue", tmp);
     },
-    value(newValue: string) {
-      this.$emit("update:modelValue", { ...this.modelValue, value: newValue });
-    },
-    extract(newValue: any) {
-      this.$emit("update:modelValue", { ...this.modelValue, extract: newValue });
-    },
     selectorType(newValue: SelectorValueType) {
       if (newValue === "json") {
         // json does not have attributes and is not string only, so allow only values/text
-        this.use = "text";
-      } else if (newValue === "regex" && this.use === "text") {
+        this.model.use = "text";
+      } else if (newValue === "regex" && this.model.use === "text") {
         // either use attribute or regex replace when parent selector has regex
-        this.use = "regex";
-      } else if (newValue === "text" && this.use === "regex") {
+        this.model.use = "regex";
+      } else if (newValue === "text" && this.model.use === "regex") {
         // regex is only allowed when selectorType === "regex"
-        this.use = "text";
+        this.model.use = "text";
       }
     },
-    "modelValue.extract"(newValue: any) {
-      if (!newValue) {
-        this.extract = {};
-      } else {
-        this.extract = newValue;
-      }
+
+    model: {
+      handler(newValue: ReturnType<typeof model>) {
+        const result: VariableExtractor = {
+          variableName: newValue.name,
+        };
+
+        if (newValue.use === "attribute") {
+          result.extract = newValue.extract;
+        } else if (newValue.use === "regex") {
+          result.value = newValue.value;
+        }
+
+        if (deepEqual(result, this.modelValue)) {
+          this.logger.info("Did not update modelValue");
+        } else {
+          this.logger.info("Updated modelValue");
+          this.$emit("update:modelValue", result);
+        }
+      },
+      deep: true,
     },
-    "modelValue.value"(newValue: string) {
-      if (!newValue) {
-        this.value = "";
-      } else {
-        this.value = newValue;
-      }
+    modelValue: {
+      handler(newValue: VariableExtractor) {
+        const result = clone(this.model);
+
+        result.extract = newValue.extract || { attribute: "" };
+        result.value = newValue.value || "";
+        result.name = newValue.variableName || "";
+
+        if (deepEqual(result, this.model)) {
+          this.logger.info("Did not update model from prop");
+        } else {
+          this.logger.info("Updated model from prop");
+          this.model = result;
+        }
+      },
+      deep: true,
     },
   },
 });
diff --git a/packages/website/src/init.ts b/packages/website/src/init.ts
index 92c03f3f..a4934f08 100644
--- a/packages/website/src/init.ts
+++ b/packages/website/src/init.ts
@@ -440,3 +440,41 @@ export function deepEqual(actual: any, expected: any): boolean {
     return actual === expected;
   }
 }
+
+export class Logger {
+  public readonly prefix: string;
+
+  public constructor(prefix: string) {
+    this.prefix = prefix;
+  }
+
+  public debug(...args: any[]): void {
+    console.debug(`[${new Date().toLocaleString()}] ${this.prefix}:`, ...args);
+  }
+
+  public info(...args: any[]): void {
+    console.info(`[${new Date().toLocaleString()}] ${this.prefix}:`, ...args);
+  }
+
+  public error(...args: any[]): void {
+    console.error(`[${new Date().toLocaleString()}] ${this.prefix}:`, ...args);
+  }
+
+  public warn(...args: any[]): void {
+    console.warn(`[${new Date().toLocaleString()}] ${this.prefix}:`, ...args);
+  }
+
+  public log(...args: any[]): void {
+    console.log(`[${new Date().toLocaleString()}] ${this.prefix}:`, ...args);
+  }
+}
+
+export function toArray<T>(value: T[] | T | undefined): T[] {
+  if (Array.isArray(value)) {
+    return [...value];
+  } else if (value) {
+    return [value];
+  } else {
+    return [];
+  }
+}
diff --git a/packages/website/src/views/CustomHookView.vue b/packages/website/src/views/CustomHookView.vue
index 723c04ac..35e730da 100644
--- a/packages/website/src/views/CustomHookView.vue
+++ b/packages/website/src/views/CustomHookView.vue
@@ -290,7 +290,7 @@ export default defineComponent({
       if (this.id) {
         // simple but stupid way to clone the hook, firefox went off alone in 94 and introduced "structuredClone" (with Node 17 support at this time)
         // when there is wider support, maybe use that, else if lodash is ever used use that cloneDeep
-        this.hook = JSON.parse(JSON.stringify(this.$store.state.hooks.hooks[this.id]));
+        this.hook = clone(this.$store.state.hooks.hooks[this.id]);
         this.code = this.hook.state || "";
       }
     },