diff --git a/components.d.ts b/components.d.ts index f2c3146f..e42a8dda 100644 --- a/components.d.ts +++ b/components.d.ts @@ -11,6 +11,7 @@ declare module '@vue/runtime-core' { export interface GlobalComponents { '404.page': typeof import('./src/pages/404.page.vue')['default'] About: typeof import('./src/pages/About.vue')['default'] + ApiTester: typeof import('./src/tools/api-tester/api-tester.vue')['default'] App: typeof import('./src/App.vue')['default'] AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default'] 'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'] @@ -127,10 +128,12 @@ declare module '@vue/runtime-core' { MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'] MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'] NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] + NCheckbox: typeof import('naive-ui')['NCheckbox'] NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NDivider: typeof import('naive-ui')['NDivider'] + NDynamicInput: typeof import('naive-ui')['NDynamicInput'] NEllipsis: typeof import('naive-ui')['NEllipsis'] NFormItem: typeof import('naive-ui')['NFormItem'] NGi: typeof import('naive-ui')['NGi'] @@ -138,6 +141,7 @@ declare module '@vue/runtime-core' { NH1: typeof import('naive-ui')['NH1'] NH3: typeof import('naive-ui')['NH3'] NIcon: typeof import('naive-ui')['NIcon'] + NInput: typeof import('naive-ui')['NInput'] NInputNumber: typeof import('naive-ui')['NInputNumber'] NLabel: typeof import('naive-ui')['NLabel'] NLayout: typeof import('naive-ui')['NLayout'] diff --git a/src/composable/queryParams.ts b/src/composable/queryParams.ts index 9699abbc..7cc8cc0d 100644 --- a/src/composable/queryParams.ts +++ b/src/composable/queryParams.ts @@ -1,7 +1,8 @@ import { useRouteQuery } from '@vueuse/router'; import { computed } from 'vue'; +import { useStorage } from '@vueuse/core'; -export { useQueryParam }; +export { useQueryParam, useQueryParamOrStorage }; const transformers = { number: { @@ -16,6 +17,12 @@ const transformers = { fromQuery: (value: string) => value.toLowerCase() === 'true', toQuery: (value: boolean) => (value ? 'true' : 'false'), }, + object: { + fromQuery: (value: string) => { + return JSON.parse(value); + }, + toQuery: (value: object) => JSON.stringify(value), + }, }; function useQueryParam({ name, defaultValue }: { name: string; defaultValue: T }) { @@ -33,3 +40,27 @@ function useQueryParam({ name, defaultValue }: { name: string; defaultValue: }, }); } + +function useQueryParamOrStorage({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) { + const type = typeof defaultValue; + const transformer = transformers[type as keyof typeof transformers] ?? transformers.string; + + const storageRef = useStorage(storageName, defaultValue); + const proxyDefaultValue = transformer.toQuery(defaultValue as never); + const proxy = useRouteQuery(name, proxyDefaultValue); + + const r = ref(defaultValue); + + watch(r, + (value) => { + proxy.value = transformer.toQuery(value as never); + storageRef.value = value as never; + }, + { deep: true }); + + r.value = (proxy.value && proxy.value !== proxyDefaultValue + ? transformer.fromQuery(proxy.value) as unknown as T + : storageRef.value as T) as never; + + return r; +} diff --git a/src/tools/api-tester/api-tester.vue b/src/tools/api-tester/api-tester.vue index 7ebf503f..f96fee11 100644 --- a/src/tools/api-tester/api-tester.vue +++ b/src/tools/api-tester/api-tester.vue @@ -10,31 +10,47 @@ const baseUrl = useQueryParamOrStorage({ name: 'url', storageName: 'api-tester:u const method = useQueryParamOrStorage({ name: 'method', storageName: 'api-tester:m', defaultValue: 'POST' }); const queryParams = useQueryParamOrStorage({ name: 'params', storageName: 'api-tester:params', defaultValue: [] }); const headers = useQueryParamOrStorage({ name: 'headers', storageName: 'api-tester:headers', defaultValue: [] }); +const contentType = useQueryParamOrStorage({ name: 'ct', storageName: 'api-tester:ct', defaultValue: 'application/json' }); const body = useQueryParamOrStorage({ name: 'body', storageName: 'api-tester:body', defaultValue: '' }); +const noCORS = ref(false); const apiCallResult = ref(); const inprogress = ref(false); async function callAPI() { const url = new URL(baseUrl.value); for (const kv of queryParams.value) { + if (!kv.key) { + continue; + } url.searchParams.append(kv.key, kv.value || ''); } const queryHeaders = [] as [string, string][]; for (const kv of headers.value) { + if (!kv.key) { + continue; + } queryHeaders.push([kv.key, kv.value || '']); } + queryHeaders.push(['Content-Type', contentType.value || '']); try { const response = await fetch(url, { method: method.value, headers: queryHeaders, - body: body.value, + body: (method.value === 'GET' || method.value === 'HEAD') ? null : body.value, + mode: noCORS.value ? 'no-cors' : 'cors', }); + let responseText = await response.text(); + try { + responseText = JSON.stringify(JSON.parse(responseText), null, 2); + } + catch (_) { + } apiCallResult.value = { code: response.status, error: '', - result: await response.text(), + result: responseText, }; } catch (err: any) { @@ -45,11 +61,18 @@ async function callAPI() { }; } } + +function emptyKeyPair() { + return { + key: '', + value: '', + }; +}