Unify computed refs

qmk · Sep 30, 2024 · 22a60e7 · 22a60e7
1 parent 9f779fe
commit 22a60e7
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 227 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,18 +1,18 @@
 <template>
   <v-app>
     <v-app-bar :elevation="2">
-      <template v-slot:prepend>
+      <template #prepend>
         <v-fab-transition>
           <v-img src="@/assets/logo.svg" height="32px" width="48px" />
         </v-fab-transition>
       </template>
 
       <v-app-bar-title>QMK Keymap Compiler</v-app-bar-title>
 
-      <template v-slot:append>
+      <template #append>
         <v-switch class="d-none d-sm-flex" inset true-icon="fa-regular fa-moon" false-icon="fa-regular fa-sun"
           true-value="dark" false-value="light" v-model="mode" />
-          <v-divider class="mx-2 my-4 d-none d-md-flex" vertical />
+        <v-divider class="mx-2 my-4 d-none d-md-flex" vertical />
         <v-btn class="d-none d-md-flex" size="small" href="https://discord.gg/qmk" icon="fa-brands fa-discord" />
         <v-btn class="d-none d-md-flex" size="small" href="https://github.com/zvecr/qmk_compile_keymap" icon="fa-brands fa-github" />
       </template>

diff --git a/src/components/Build.vue b/src/components/Build.vue
@@ -1,59 +1,33 @@
 <template>
   <v-switch hide-details label="LTO" v-model="lto"/>
-  <v-select clearable label="Converter" :items="converters" v-model="converter"/>
+  <v-select clearable label="Converter" :items="CONVERTERS" v-model="converter"/>
 </template>
 
 <script lang="ts" setup>
-  import { computed } from 'vue'
-  import { useKeymapState } from '@/composables/useKeymapState'
-  
-  const converters = [
-    'rp2040_ce', // Probably most common so show first
+import { useKeymapState } from '@/composables/useKeymapState'
+import { dottyComputed } from '@/dottyComputed';
 
-    'bit_c_pro',
-    'blok',
-    'bonsai_c3',
-    'bonsai_c4',
-    'elite_pi',
-    'helios',
-    'imera',
-    'kb2040',
-    'liatris',
-    'michi',
-    'proton_c',
-    'sparkfun_pm2040',
-    'stemcell',
-  ]
+const CONVERTERS = [
+  'rp2040_ce', // Probably most common so show first
 
-  const { keymap } = useKeymapState()
-  
-  const lto = computed({
-    get() {
-      return keymap.value.config?.build?.lto ?? false;
-    },
-    set(val) {
-      if (val) {
-        keymap.value.config = keymap.value.config || {}
-        keymap.value.config.build = keymap.value.config.build || {}
-        keymap.value.config.build.lto = val;
-      } else {
-        // TODO: delete actual value and clean up empty parents
-        delete keymap.value?.config?.build?.lto;
-      }
-    }
-  })
-  
-  const converter = computed({
-    get() {
-      return keymap.value.converter ?? null;
-    },
-    set(val) {
-      if (val) {
-          keymap.value.converter = val;
-      } else {
-          delete keymap.value.converter
-      }
-    }
-  })
+  'bit_c_pro',
+  'blok',
+  'bonsai_c3',
+  'bonsai_c4',
+  'elite_pi',
+  'helios',
+  'imera',
+  'kb2040',
+  'liatris',
+  'michi',
+  'proton_c',
+  'sparkfun_pm2040',
+  'stemcell',
+]
+
+const { keymap } = useKeymapState()
+
+const lto = dottyComputed(keymap, 'config.build.lto');
+const converter = dottyComputed(keymap, 'converter', null);
 
 </script>
diff --git a/src/components/Compile.vue b/src/components/Compile.vue
@@ -1,31 +1,27 @@
 <template>
-    <v-btn block color="primary" class="mt-2 mb-4" append-icon="fa-solid fa-play" @click="dialog = true">Compile</v-btn>
-    <v-dialog
-      v-model="dialog"
-      width="auto"
-      persistent
-      @afterEnter="submitJob"
+  <v-btn block color="primary" class="mt-2 mb-4" append-icon="fa-solid fa-play" @click="dialog = true">Compile</v-btn>
+  <v-dialog
+    v-model="dialog"
+    width="auto"
+    persistent
+    @after-enter="submitJob"
+  >
+    <v-card
+      max-width="400"
+      title="Compiling..."
     >
-      <v-card
-        max-width="400"
-        title="Compiling..."
-      >
-        <template v-slot:text>
-            <p class="text-md-center">Your firmware will be automatically downloaded after the compilation is complete.</p>
-            <div class="d-flex justify-center">
-                <v-progress-circular :size="64" :width="6" class="ma-6" indeterminate></v-progress-circular>
-            </div>
-            <!-- <p v-if=jobID class="text-md-center">JobID: {{ jobID }}</p> -->
-        </template>
-        <template v-slot:actions>
-          <v-btn
-            class="ms-auto"
-            text="Abort"
-            @click="abort"
-          ></v-btn>
-        </template>
-      </v-card>
-    </v-dialog>
+      <template #text>
+        <p class="text-md-center">Your firmware will be automatically downloaded after the compilation is complete.</p>
+        <div class="d-flex justify-center">
+          <v-progress-circular :size="64" :width="6" class="ma-6" indeterminate/>
+        </div>
+        <!-- <p v-if=jobID class="text-md-center">JobID: {{ jobID }}</p> -->
+      </template>
+      <template #actions>
+        <v-btn class="ms-auto" text="Abort" @click="abort"/>
+      </template>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts" setup>

diff --git a/src/components/Debounce.vue b/src/components/Debounce.vue
@@ -1,26 +1,26 @@
 <template>
   <v-slider :max="50" :min="0" :step="1" class="pb-2" label="Value" v-model="value" hide-details>
-    <template v-slot:append>
+    <template #append>
       <v-text-field
         v-model="value"
         density="compact"
         style="width: 5em"
         type="number"
         hide-details
         single-line
-      ></v-text-field>
+      />
     </template>
   </v-slider>
-  <v-select clearable label="Algorithms" :items="debounce_type" v-model="type"/>
+  <v-select clearable label="Algorithms" :items="DEBOUNCE_TYPES" v-model="type"/>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { useKeymapState } from '@/composables/useKeymapState'
+import { dottyComputed } from '@/dottyComputed';
 
 const { keymap } = useKeymapState()
 
-const debounce_type = [
+const DEBOUNCE_TYPES = [
   "asym_eager_defer_pk",
   "sym_defer_g",
   "sym_defer_pk",
@@ -29,35 +29,7 @@ const debounce_type = [
   "sym_eager_pr",
 ];
 
-const value = computed({
-  get() {
-    return keymap.value.config?.debounce ?? 5;
-  },
-  set(val) {
-    val = +val;
-    if (val !== 5) {
-        keymap.value.config = keymap.value.config || {}
-        keymap.value.config.debounce = val;
-    } else {
-        delete keymap.value.config?.debounce;
-    }
-  }
-})
-
-const type = computed({
-    get() {
-      return keymap.value.config?.build?.debounce_type ?? null;
-    },
-    set(val) {
-      if (val) {
-        keymap.value.config = keymap.value.config || {}
-        keymap.value.config.build = keymap.value.config.build || {}
-        keymap.value.config.build.debounce_type = val;
-      } else {
-        // TODO: delete actual value and clean up empty parents
-        delete keymap.value?.config?.build?.debounce_type;
-      }
-    }
-  })
+const value = dottyComputed(keymap, 'config.debounce', 5);
+const type = dottyComputed(keymap, 'config.build.debounce_type', null);
 
 </script>
diff --git a/src/components/Features.vue b/src/components/Features.vue
@@ -6,58 +6,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { useKeymapState } from '@/composables/useKeymapState'
+import { dottyComputed } from '@/dottyComputed';
 
 const { keymap } = useKeymapState()
 
-const bootmagic = computed({
-  get() {
-    return keymap.value.config?.features?.bootmagic ?? false;
-  },
-  set(val) {
-    keymap.value.config = keymap.value.config || {}
-    keymap.value.config.features = keymap.value.config.features || {}
-    keymap.value.config.features.bootmagic = val;
-  }
-})
-
-const extrakey = computed({
-  get() {
-    return keymap.value.config?.features?.extrakey ?? false;
-  },
-  set(val) {
-    keymap.value.config = keymap.value.config || {}
-    keymap.value.config.features = keymap.value.config.features || {}
-    keymap.value.config.features.extrakey = val;
-  }
-})
-
-const mousekey = computed({
-  get() {
-    return keymap.value.config?.features?.mousekey ?? false;
-  },
-  set(val) {
-    keymap.value.config = keymap.value.config || {}
-    keymap.value.config.features = keymap.value.config.features || {}
-    keymap.value.config.features.mousekey = val;
-  }
-})
-
-const via = computed({
-  get() {
-    return keymap.value.config?.features?.via ?? false;
-  },
-  set(val) {
-    if (val) {
-      keymap.value.config = keymap.value.config || {}
-      keymap.value.config.features = keymap.value.config.features || {}
-      keymap.value.config.features.via = val;
-    } else {
-      // TODO: delete actual value and clean up empty parents
-      delete keymap.value?.config?.features?.via
-    }
-  }
-})
+const bootmagic = dottyComputed(keymap, 'config.features.bootmagic');
+const extrakey = dottyComputed(keymap, 'config.features.extrakey');
+const mousekey = dottyComputed(keymap, 'config.features.mousekey');
+const via = dottyComputed(keymap, 'config.features.via');
 
 </script>
diff --git a/src/components/MiscConfig.vue b/src/components/MiscConfig.vue
@@ -4,44 +4,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { useKeymapState } from '@/composables/useKeymapState'
+import { dottyComputed } from '@/dottyComputed';
 
 const { keymap } = useKeymapState()
 
-const usbdetect = computed({
-  get() {
-    return keymap.value.config?.split?.usb_detect?.enabled ?? false;
-  },
-  set(val) {
-    if (val) {
-        keymap.value.config = keymap.value.config || {}
-        keymap.value.config.split = keymap.value.config.split || {}
-        keymap.value.config.split.usb_detect = keymap.value.config.split.usb_detect || {}
-        keymap.value.config.split.usb_detect.enabled = true;
-    } else {
-        // TODO: delete actual value and clean up empty parents
-        delete keymap.value?.config?.split?.usb_detect
-    }
-  }
-})
-
-const watchdog = computed({
-  get() {
-    return keymap.value.config?.split?.transport?.watchdog ?? false;
-  },
-  set(val) {
-    if (val) {
-        keymap.value.config = keymap.value.config || {}
-        keymap.value.config.split = keymap.value.config.split || {}
-        keymap.value.config.split.transport = keymap.value.config.split.transport || {}
-        keymap.value.config.split.transport.watchdog = true;
-    } else {
-        // TODO: delete actual value and clean up empty parents
-        delete keymap.value?.config?.split?.transport
-    }
-  }
-})
-
+const usbdetect = dottyComputed(keymap, 'config.split.usb_detect.enabled');
+const watchdog = dottyComputed(keymap, 'config.split.transport.watchdog');
 </script>