From c906f11745af550ceaef7c38361d9665628c4d82 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 16 Jun 2024 12:45:14 +0200 Subject: [PATCH 1/4] feat(New tool): API Tester Fix #837 --- src/tools/api-tester/api-tester.vue | 118 ++++++++++++++++++++++++++++ src/tools/api-tester/index.ts | 12 +++ src/tools/index.ts | 2 + 3 files changed, 132 insertions(+) create mode 100644 src/tools/api-tester/api-tester.vue create mode 100644 src/tools/api-tester/index.ts diff --git a/src/tools/api-tester/api-tester.vue b/src/tools/api-tester/api-tester.vue new file mode 100644 index 00000000..7ebf503f --- /dev/null +++ b/src/tools/api-tester/api-tester.vue @@ -0,0 +1,118 @@ + + + diff --git a/src/tools/api-tester/index.ts b/src/tools/api-tester/index.ts new file mode 100644 index 00000000..5ea35536 --- /dev/null +++ b/src/tools/api-tester/index.ts @@ -0,0 +1,12 @@ +import { World } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'API Tester', + path: '/api-tester', + description: 'HTTP API Tester', + keywords: ['api', 'http', 'call', 'tester'], + component: () => import('./api-tester.vue'), + icon: World, + createdAt: new Date('2024-05-11'), +}); diff --git a/src/tools/index.ts b/src/tools/index.ts index aa861c93..f8e5c40c 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer'; import { tool as textToUnicode } from './text-to-unicode'; import { tool as safelinkDecoder } from './safelink-decoder'; +import { tool as apiTester } from './api-tester'; import { tool as pdfSignatureChecker } from './pdf-signature-checker'; import { tool as numeronymGenerator } from './numeronym-generator'; import { tool as macAddressGenerator } from './mac-address-generator'; @@ -128,6 +129,7 @@ export const toolsByCategory: ToolCategory[] = [ httpStatusCodes, jsonDiff, safelinkDecoder, + apiTester, ], }, { From 43922ae5f9105ff56ea31556bde07c653bcc8c30 Mon Sep 17 00:00:00 2001 From: sharevb Date: Sun, 16 Jun 2024 12:30:03 +0200 Subject: [PATCH 2/4] feat(TextAreaCopyable): word wrap --- src/components/TextareaCopyable.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue index 8b0aae61..1bf3b5ff 100644 --- a/src/components/TextareaCopyable.vue +++ b/src/components/TextareaCopyable.vue @@ -16,6 +16,7 @@ const props = withDefaults( language?: string copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none' copyMessage?: string + wordWrap?: boolean }>(), { followHeightOf: null, @@ -47,7 +48,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage. :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''" > - +
From 130183cb36b97849100b751b12bfc59983d0e752 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 16 Jun 2024 21:39:55 +0200 Subject: [PATCH 3/4] fix: final modifs --- components.d.ts | 4 ++ src/composable/queryParams.ts | 33 ++++++++++++- src/tools/api-tester/api-tester.vue | 75 +++++++++++++++++++++-------- 3 files changed, 92 insertions(+), 20 deletions(-) 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: '', + }; +} From 42f39bfa6e106dc8e2de9b677a95745a9bbc3be6 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 9 Jun 2024 12:32:10 +0200 Subject: [PATCH 4/4] chore: fix strange corepack message Fix corepack claiming strange thing : UsageError: This project is configured to use yarn because /home/runner/work/it-tools/it-tools/package.json has a "packageManager" field --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index c6cb7757..d1e6e458 100644 --- a/package.json +++ b/package.json @@ -138,5 +138,6 @@ "vitest": "^0.34.0", "workbox-window": "^7.0.0", "zx": "^7.2.1" - } + }, + "packageManager": "pnpm@8.15.3" }