refactor(tools): config in query params

src/composable/queryParams.ts

@@ -0,0 +1,35 @@
+import { useRouteQuery } from '@vueuse/router';
+import { computed } from 'vue';
+
+export { useQueryParam };
+
+const transformers = {
+  number: {
+    fromQuery: (value: string) => Number(value),
+    toQuery: (value: number) => String(value),
+  },
+  string: {
+    fromQuery: (value: string) => value,
+    toQuery: (value: string) => value,
+  },
+  boolean: {
+    fromQuery: (value: string) => value.toLowerCase() === 'true',
+    toQuery: (value: boolean) => (value ? 'true' : 'false'),
+  },
+};
+
+function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never));
+
+  return computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+}

src/tools/hash-text/hash-text.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+import { useQueryParam } from '@/composable/queryParams';
 import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
 import { ref } from 'vue';
 import InputCopyable from '../../components/InputCopyable.vue';
@@ -59,7 +60,7 @@ const algos = {
 type AlgoNames = keyof typeof algos;
 type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
-const encoding = ref<Encoding>('Hex');
+const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
 const clearText = ref('');
 
 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {

src/tools/token-generator/token-generator.tool.vue

@@ -54,18 +54,19 @@
 <script setup lang="ts">
 import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
+import { useQueryParam } from '@/composable/queryParams';
 import { createToken } from './token-generator.service';
 
 const token = ref('');
-const length = ref(64);
+const length = useQueryParam({ name: 'length', defaultValue: 64 });
 const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
 
-const withUppercase = ref(true);
-const withLowercase = ref(true);
-const withNumbers = ref(true);
-const withSymbols = ref(false);
+const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
+const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
+const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
+const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });
 
-watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken);
+watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken, { immediate: true });
 
 function refreshToken() {
   token.value = createToken({
@@ -76,6 +77,4 @@ function refreshToken() {
     withSymbols: withSymbols.value,
   });
 }
-
-refreshToken();
 </script>

src/tools/uuid-generator/uuid-generator.vue

@@ -32,8 +32,9 @@
 import { useCopy } from '@/composable/copy';
 import { ref, watch } from 'vue';
 import { v4 as generateUUID } from 'uuid';
+import { useQueryParam } from '@/composable/queryParams';
 
-const count = ref(1);
+const count = useQueryParam({ defaultValue: 1, name: 'count' });
 
 const uuids = ref('');