feat: save code

Author: notwindstone

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useEventListener } from "@vueuse/core";
 import { defineAsyncComponent, onBeforeMount, provide, shallowReactive } from "vue";
 
 import ErrorBoundary from "@/components/general/errors/ErrorBoundary.vue";
@@ -11,6 +12,7 @@ import {
   ApplicationNamespace,
   GlobalStatesContextKey,
 } from "@/constants/application.ts";
+import { DevelopmentModeHelpers } from "@/lib/development-mode-helpers";
 import GlobalStateHelpers from "@/lib/global-state-helpers";
 import { __changeGlobalState } from "@/lib/global-state-helpers/scopes/change-global-state.ts";
 import { log } from "@/lib/logging/scopes/log.ts";
@@ -102,6 +104,16 @@ onBeforeMount(async () => {
     globalStates[key as "locale"] = value as GlobalStatesType["locale"];
   }
 });
+
+/**
+ * Handles 'F5', 'Ctrl+R', and 'Command+R' key binds that reload the launcher
+ */
+useEventListener("keydown", (event: KeyboardEvent) => (
+  DevelopmentModeHelpers.handleNativeReloadKeyBinds(
+    event,
+    globalStates.development.enableNativeReloadKeyBinds,
+  )
+));
 </script>
 
 <template>
@@ -118,7 +130,7 @@ onBeforeMount(async () => {
           <LogViewer v-if="globalStates.logs.show" />
         </Transition>
 
-        <DevelopmentMode v-if="globalStates.development.enabled" />
+        <DevelopmentMode v-if="true || globalStates.development.enabled" />
         <NonBundledClasses />
       </Layout>
     </template>

src/components/general/development-mode/DevelopmentMode.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { inject, onUnmounted, watchEffect } from "vue";
 
+import FramesPerSecond from "@/components/general/development-mode/FramesPerSecondCounter.vue";
 import { GlobalStatesContextKey } from "@/constants/application.ts";
 import { DevelopmentModeHelpers } from "@/lib/development-mode-helpers";
 import type { ContextGlobalStatesType } from "@/types/application/global-states.type.ts";
@@ -23,6 +24,5 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NativeReloadKeyBinds v-if="globalStates?.development?.enableNativeReloadKeyBinds" />
-  <FpsCounter v-if="globalStates?.development?.showFPS" />
+  <FramesPerSecond v-if="true || globalStates?.development?.showFPS" />
 </template>

src/components/general/development-mode/FramesPerSecondCounter.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+
+const aborted = ref<boolean>(false);
+const fps = ref<number>(0);
+
+onMounted(() => {
+  const times: Array<number> = [];
+
+  function countFrame(): void {
+    if (aborted.value) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      const now = performance.now();
+
+      while (times.length > 0 && times[0] <= now - 1000) {
+        times.shift();
+      }
+
+      times.push(now);
+
+      fps.value = times.length;
+
+      countFrame();
+    });
+  }
+
+  countFrame();
+});
+onUnmounted(() => {
+  aborted.value = true;
+});
+</script>
+
+<template>
+  <div id="__dev-fps-counter__wrapper" class="fixed right-4 top-4 z-65000 bg-[theme(colors.black/.5)]">
+    {{ fps }}
+  </div>
+</template>

src/lib/development-mode-helpers/index.ts

@@ -1,7 +1,11 @@
 import { disableDebugMode } from "@/lib/development-mode-helpers/scopes/disable-debug-mode.ts";
 import { enableDebugMode } from "@/lib/development-mode-helpers/scopes/enable-debug-mode.ts";
+import {
+  handleNativeReloadKeyBinds,
+} from "@/lib/development-mode-helpers/scopes/handle-native-reload-key-binds.ts";
 
 export const DevelopmentModeHelpers = {
   disableDebugMode,
   enableDebugMode,
+  handleNativeReloadKeyBinds,
 } as const;

src/lib/development-mode-helpers/scopes/handle-native-reload-key-binds.ts

@@ -0,0 +1,17 @@
+import { log } from "@/lib/logging/scopes/log.ts";
+
+export function handleNativeReloadKeyBinds(event: KeyboardEvent, ignore: boolean): void {
+  // If user has enabled native reload key binds, then do not prevent them from firing
+  if (ignore) {
+    return;
+  }
+
+  if (
+    event.key === "F5" ||
+    (event.ctrlKey && event.key === "r") ||
+    (event.metaKey && event.key === "r")
+  ) {
+    log.debug("Prevented native behaviour when triggering reload key binds");
+    event.preventDefault();
+  }
+}

src/main.ts

@@ -1,6 +1,6 @@
 // Import UnoCSS essentials
 import "virtual:uno.css";
-// Reset all CSS styles in a Tailwind style
+// Reset all CSS styles in a Tailwind-like way
 import "@unocss/reset/tailwind.css";
 // Import custom CSS styles
 import "@/globals.css";
@@ -22,37 +22,35 @@ import Logging from "@/lib/logging";
 import { log } from "@/lib/logging/scopes/log.ts";
 import type { ConfigType } from "@/types/application/config.type.ts";
 
-// Get the exact timestamp in milliseconds before initialization
-const startTime = performance.now();
-
-// Share the 'portable' status between other functions
+// Check if launcher is in a portable version
 const portable: boolean = await General.checkIsPortable();
-// Get launcher base directory
+// Get the launcher base directory
 const baseDirectory: string = await General.getBaseDirectory(portable);
 
-// No need to log yet, all logs will go into the previous launch log file
+// No need to log yet since all logs will go into the previous launch log file
 await Logging.prepareLogFile(baseDirectory).catch((error: unknown) => {
   log.error("Failed to prepare a log file:", Errors.prettify(error));
 });
 
-log.debug("Extending global window object in the app namespace");
+/*
+ * Now the log file preparation is done (unless something threw an error).
+ *
+ * Previous code doesn't access the 'window' object, but config reading does
+ */
+log.debug("Extending global window object with the app namespace");
 Globals.declareWindow();
 
 // Get user's launcher configuration
 const config: ConfigType = await Configs.getSafe(baseDirectory);
 
+// Show a pretty ASCII art with the launcher name :3
+log.info(getASCIIArt(portable, config.development.enableDebugMode));
+
 // Enabling debug mode means that debug-level messages will be logged
 if (config.development.enableDebugMode) {
   DevelopmentModeHelpers.enableDebugMode();
 }
 
-/*
- * Now the log file preparation is done (unless something threw an error).
- *
- * Show a pretty ASCII art with the launcher name :3
- */
-log.info(getASCIIArt(portable, config.development.enableDebugMode));
-
 if (config.showBeforeInitialization) {
   try {
     log.debug("Showing webview window before initialization according to user's config");
@@ -79,12 +77,3 @@ log.debug("Initializing launcher");
 await General.initializeLauncher(config).catch((error: unknown) => {
   log.error("Failed to initialize launcher:", Errors.prettify(error));
 });
-
-// Get the exact timestamp in milliseconds after initialization
-const endTime = performance.now();
-
-log.info(
-  "Launcher was initialized in",
-  (endTime - startTime).toFixed(2),
-  "ms",
-);