@scalar/api-client 0.4.0 → 0.5.1

package/dist/stores/apiClientRequestStore.d.ts

@@ -32,26 +32,26 @@ export declare const useApiClientRequestStore: () => {
     readOnly: import("vue").Ref<boolean>;
     activeRequest: {
         id?: string | undefined;
-        name: string;
+        name?: string | undefined;
         url: string;
         type: string;
         path: string;
-        parameters: {
+        parameters?: {
             name: string;
             value: string | number;
             customClass?: string | undefined;
-        }[];
-        query: {
+        }[] | undefined;
+        query?: {
             name: string;
             value: string | number;
             customClass?: string | undefined;
-        }[];
-        headers: {
+        }[] | undefined;
+        headers?: {
             name: string;
             value: string | number;
             customClass?: string | undefined;
-        }[];
-        body: string;
+        }[] | undefined;
+        body?: string | undefined;
         formData?: {
             name: string;
             value: string | number;

package/dist/types.d.ts

@@ -41,20 +41,21 @@ export type FormDataItem = BaseParameter;
 /** Complete request state for a client request */
 export type ClientRequestConfig = {
     id?: string;
-    name: string;
+    name?: string;
     url: string;
     /** HTTP Request Method */
     type: string;
     /** Request path */
     path: string;
+    /** TODO: Rename to variables? */
     /** Path parameters */
-    parameters: BaseParameter[];
+    parameters?: BaseParameter[];
     /** Query parameters */
-    query: Query[];
+    query?: Query[];
     /** Request headers */
-    headers: Header[];
+    headers?: Header[];
     /** Content type matched body */
-    body: string;
+    body?: string;
     /** Optional form data body */
     formData?: FormDataItem[];
 };
@@ -76,6 +77,7 @@ export type ClientResponse = {
     data: string;
     duration: number;
 };
+export type SendRequestConfig = Partial<ClientRequestConfig> & Required<Pick<ClientRequestConfig, 'url'>>;
 export type RequestResult = {
     request: ClientRequestConfig;
     response: ClientResponse;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,25 @@
 {
   "name": "@scalar/api-client",
-  "version": "0.4.0",
-  "author": "Scalar",
+  "description": "the open source API testing client",
+  "keywords": [
+    "api",
+    "client",
+    "testing",
+    "rest",
+    "graphql",
+    "postman alternative"
+  ],
+  "version": "0.5.1",
+  "author": "Scalar (https://github.com/scalar)",
+  "homepage": "https://github.com/scalar/scalar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scalar/scalar.git",
+    "directory": "packages/api-client"
+  },
+  "bugs": {
+    "url": "https://github.com/scalar/scalar/issues/new"
+  },
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -19,30 +37,17 @@
   },
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@codemirror/lang-java": "^6.0.1",
-    "@codemirror/lang-javascript": "6.1.9",
-    "@codemirror/lang-json": "6.0.1",
-    "@codemirror/lang-python": "6.1.3",
-    "@codemirror/language": "6.8.0",
-    "@codemirror/legacy-modes": "6.3.3",
-    "@codemirror/state": "6.2.1",
-    "@codemirror/view": "6.16.0",
     "@headlessui/vue": "1.7.14",
-    "@lezer/highlight": "1.1.6",
-    "@uiw/codemirror-theme-duotone": "4.21.3",
-    "@uiw/codemirror-themes": "4.21.3",
     "@vueuse/core": "10.1.2",
     "axios": "1.4.0",
-    "codemirror": "6.0.1",
     "javascript-time-ago": "2.5.9",
     "nanoid": "4.0.2",
-    "nunjucks": "3.2.3",
     "pretty-bytes": "6.1.0",
     "pretty-ms": "8.0.0",
     "tippy.js": "6.3.7",
-    "@scalar/default-theme": "0.2.0",
-    "@scalar/use-codemirror": "0.4.0",
-    "@scalar/use-keyboard-event": "0.4.0"
+    "@scalar/default-theme": "0.2.1",
+    "@scalar/use-keyboard-event": "0.4.1",
+    "@scalar/use-codemirror": "0.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.2.3",
@@ -50,11 +55,11 @@
     "vite": "4.4.8",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vitest": "0.34.1",
-    "vue-tsc": "1.8.8"
+    "vue-tsc": "1.8.8",
+    "@scalar/echo-server": "0.4.1"
   },
   "peerDependencies": {
-    "vue": "3.3.4",
-    "@types/nunjucks": "3.2.3"
+    "vue": "3.3.4"
   },
   "scripts": {
     "build": "vite build && pnpm types:build && tsc-alias -p tsconfig.build.json",

package/src/components/ApiClient/AddressBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { CodeMirror } from '@scalar/use-codemirror'
 import { useKeyboardEvent } from '@scalar/use-keyboard-event'
 import { useMediaQuery } from '@vueuse/core'
 import TimeAgo from 'javascript-time-ago'
@@ -7,7 +8,6 @@ import { computed, ref } from 'vue'
 
 import { sendRequest } from '../../helpers/sendRequest'
 import { useApiClientRequestStore } from '../../stores/apiClientRequestStore'
-import { CodeMirror } from '../CodeMirror'
 import FlowModal, { useModalState } from '../FlowModal.vue'
 import RequestHistory from './RequestHistory.vue'
 

package/src/components/ApiClient/Request/Request.vue

@@ -25,7 +25,7 @@ const { activeRequest, readOnly } = useApiClientRequestStore()
     </div>
     <div>
       <RequestAuth />
-      <RequestVariables :paths="activeRequest.parameters" />
+      <RequestVariables :variables="activeRequest.parameters" />
       <RequestQuery :queries="activeRequest.query" />
       <RequestHeaders :headers="activeRequest.headers" />
       <RequestBody

package/src/components/ApiClient/Request/RequestBody.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { CodeMirror } from '@scalar/use-codemirror'
+
 import { useApiClientRequestStore } from '../../../stores/apiClientRequestStore'
-import { CodeMirror } from '../../CodeMirror'
 import { CollapsibleSection } from '../../CollapsibleSection'
 import { Grid } from '../../Grid'
 
@@ -33,7 +34,7 @@ const updateActiveRequest = (value: string) => {
       v-else
       :content="activeRequest.body"
       :languages="['json']"
-      :lineNumbers="true"
+      lineNumbers
       @change="updateActiveRequest" />
   </CollapsibleSection>
 </template>

package/src/components/ApiClient/Request/RequestHeaders.vue

@@ -2,11 +2,11 @@
 import { CollapsibleSection } from '../../CollapsibleSection'
 import { Grid } from '../../Grid'
 
-defineProps<{ headers: any[] }>()
+defineProps<{ headers?: any[] }>()
 </script>
 <template>
   <CollapsibleSection title="Headers">
-    <template v-if="headers.length === 0">
+    <template v-if="!headers || headers.length === 0">
       <div class="scalar-api-client__empty-state">No Headers</div>
     </template>
     <template v-else>

package/src/components/ApiClient/Request/RequestQuery.vue

@@ -3,11 +3,11 @@ import type { Query } from '../../../types'
 import { CollapsibleSection } from '../../CollapsibleSection'
 import { Grid } from '../../Grid'
 
-defineProps<{ queries: Query[] }>()
+defineProps<{ queries?: Query[] }>()
 </script>
 <template>
   <CollapsibleSection title="Query Parameters">
-    <template v-if="queries.length === 0">
+    <template v-if="!queries || queries.length === 0">
       <div class="scalar-api-client__empty-state">No Query Parameters</div>
     </template>
     <template v-else>

package/src/components/ApiClient/Request/RequestVariables.vue

@@ -3,15 +3,15 @@ import type { BaseParameter } from '../../../types'
 import { CollapsibleSection } from '../../CollapsibleSection'
 import { Grid } from '../../Grid'
 
-defineProps<{ paths: BaseParameter[] }>()
+defineProps<{ variables?: BaseParameter[] }>()
 </script>
 <template>
   <CollapsibleSection title="Variables">
-    <template v-if="paths.length === 0">
+    <template v-if="!variables || variables.length === 0">
       <div class="scalar-api-client__empty-state">No variables</div>
     </template>
     <template v-else>
-      <Grid :items="paths" />
+      <Grid :items="variables" />
       <!-- @addAnother="addQuery"
           @deleteItem="deleteQuery"
           @toggleDescription="toggleDescription"

package/src/components/ApiClient/Response/ResponseBody.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { CodeMirror } from '../../CodeMirror'
+import { CodeMirror } from '@scalar/use-codemirror'
+
 import { CollapsibleSection } from '../../CollapsibleSection'
 
 withDefaults(defineProps<{ active: boolean; data: any }>(), {
@@ -13,7 +14,7 @@ withDefaults(defineProps<{ active: boolean; data: any }>(), {
       v-if="active"
       :content="data"
       :languages="['json']"
-      :readOnly="true" />
+      readOnly />
     <div
       v-else
       class="scalar-api-client__empty-state">

package/src/helpers/concatenateUrlAndPath.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+
+import { concatenateUrlAndPath } from './'
+
+describe('concatenateUrlAndPath', () => {
+  it('trims a slash from the URL', async () => {
+    expect(concatenateUrlAndPath('http://127.0.0.1/', 'foobar')).toBe(
+      'http://127.0.0.1/foobar',
+    )
+  })
+
+  it('adds a slash between url and path', async () => {
+    expect(concatenateUrlAndPath('http://127.0.0.1', 'foobar')).toBe(
+      'http://127.0.0.1/foobar',
+    )
+  })
+
+  it('trims a slash from the path', async () => {
+    expect(concatenateUrlAndPath('http://127.0.0.1', '/foobar')).toBe(
+      'http://127.0.0.1/foobar',
+    )
+  })
+
+  it('works without a path', async () => {
+    expect(concatenateUrlAndPath('http://127.0.0.1')).toBe('http://127.0.0.1')
+  })
+})

package/src/helpers/concatenateUrlAndPath.ts

@@ -0,0 +1,13 @@
+/**
+ * Make sure the URL and path are concatenated correctly.
+ */
+export const concatenateUrlAndPath = (url: string, path?: string) => {
+  if (typeof path !== 'string' || !path.length) {
+    return url
+  }
+
+  const urlWithSlash = url.endsWith('/') ? url : `${url}/`
+  const pathWithoutSlash = path.startsWith('/') ? path.slice(1) : path
+
+  return [urlWithSlash, pathWithoutSlash].join('')
+}

package/src/helpers/index.ts

@@ -1,5 +1,10 @@
+export { concatenateUrlAndPath } from './concatenateUrlAndPath'
 export { createPlaceholderRequest } from './createPlaceholderRequest'
-export { generateRequest } from './generateRequest'
 export { generateParameters } from './generateParameters'
+export { generateRequest } from './generateRequest'
 export { mapFromArray } from './mapFromArray'
+export { normalizePath } from './normalizePath'
+export { normalizeRequestMethod } from './normalizeRequestMethod'
+export { normalizeUrl } from './normalizeUrl'
+export { replaceVariables } from './replaceVariables'
 export { sendRequest } from './sendRequest'

package/src/helpers/normalizePath.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+import { normalizePath } from './'
+
+describe('normalizePath', () => {
+  it('keeps a path as is', async () => {
+    expect(normalizePath('foobar')).toBe('foobar')
+  })
+
+  it('removes slash', async () => {
+    expect(normalizePath('/foobar')).toBe('foobar')
+  })
+
+  it('trims whitespace', async () => {
+    expect(normalizePath('foobar ')).toBe('foobar')
+  })
+})

package/src/helpers/normalizePath.ts

@@ -0,0 +1,16 @@
+/**
+ * Normalizes a path by removing leading slashes.
+ */
+export const normalizePath = (path?: string) => {
+  if (typeof path !== 'string') {
+    return ''
+  }
+
+  let normalizedPath = path.trim()
+
+  if (normalizedPath.startsWith('/')) {
+    normalizedPath = normalizedPath.slice(1)
+  }
+
+  return normalizedPath
+}

package/src/helpers/normalizeRequestMethod.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { normalizeRequestMethod } from './'
+
+describe('normalizeRequestMethod', () => {
+  it('returns a valid request method', async () => {
+    expect(normalizeRequestMethod('GET')).toBe('GET')
+  })
+
+  it('makes method uppercase', async () => {
+    expect(normalizeRequestMethod('get')).toBe('GET')
+  })
+
+  it('return uppercase POST', async () => {
+    expect(normalizeRequestMethod('post')).toBe('POST')
+  })
+
+  it('trims whitespace', async () => {
+    expect(normalizeRequestMethod('post ')).toBe('POST')
+  })
+
+  it('uses GET as the default', async () => {
+    expect(normalizeRequestMethod()).toBe('GET')
+  })
+
+  it('ignores invalid request methods', async () => {
+    expect(normalizeRequestMethod('fantasy')).toBe('GET')
+  })
+})

package/src/helpers/normalizeRequestMethod.ts

@@ -0,0 +1,43 @@
+const defaultRequestMethod = 'GET'
+
+const validRequestMethods = [
+  'GET',
+  'POST',
+  'PUT',
+  'HEAD',
+  'DELETE',
+  'PATCH',
+  'OPTIONS',
+  'CONNECT',
+  'TRACE',
+]
+
+/**
+ * Get a normalized request method (e.g. GET, POST, etc.)
+ */
+export const normalizeRequestMethod = (method?: string) => {
+  // Make sure it’s a string
+  if (typeof method !== 'string') {
+    console.warn(
+      `[sendRequest] Request method is not a string. Using ${defaultRequestMethod} as the default.`,
+    )
+
+    return defaultRequestMethod
+  }
+
+  // Normalize the string
+  const normalizedMethod = method.trim().toUpperCase()
+
+  // Make sure it’s a valid request method
+  const isValidRequestMethod = validRequestMethods.includes(normalizedMethod)
+
+  if (!isValidRequestMethod) {
+    console.warn(
+      `[sendRequest] ${method} is not a valid request method. Using ${defaultRequestMethod} as the default.`,
+    )
+
+    return defaultRequestMethod
+  }
+
+  return normalizedMethod
+}

package/src/helpers/normalizeUrl.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+
+import { normalizeUrl } from './'
+
+describe('normalizeUrl', () => {
+  it('keeps URLs as is', async () => {
+    expect(normalizeUrl('http://127.0.0.1')).toBe('http://127.0.0.1')
+  })
+
+  it('keeps slashes', async () => {
+    expect(normalizeUrl('http://127.0.0.1/')).toBe('http://127.0.0.1/')
+  })
+
+  it('makes URLs lowercase', async () => {
+    expect(normalizeUrl('http://EXAMPLE.COM')).toBe('http://example.com')
+  })
+
+  it('adds http://', async () => {
+    expect(normalizeUrl('example.com')).toBe('http://example.com')
+  })
+
+  it('trims whitespace', async () => {
+    expect(normalizeUrl('http://example.com ')).toBe('http://example.com')
+  })
+})

package/src/helpers/normalizeUrl.ts

@@ -0,0 +1,24 @@
+/**
+ * Normalizes a URL by trimming it and adding http:// as the default prefix.
+ */
+export const normalizeUrl = (url?: string) => {
+  if (typeof url !== 'string') {
+    console.warn(
+      `[sendRequest] URL is not a string. Using an empty string as the default.`,
+    )
+
+    return ''
+  }
+
+  let normalizedUrl = url.trim().toLowerCase()
+
+  if (!normalizedUrl.startsWith('http')) {
+    console.warn(
+      `[sendRequest] URL does not start with http. Adding http:// as the default prefix.`,
+    )
+
+    normalizedUrl = `http://${normalizedUrl}`
+  }
+
+  return normalizedUrl
+}

package/src/helpers/replaceVariables.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+
+import { replaceVariables } from './'
+
+describe('replaceVariables', () => {
+  it('replaces variables', async () => {
+    expect(
+      replaceVariables('http://{baseUrl}/foobar', {
+        baseUrl: 'example.com',
+      }),
+    ).toBe('http://example.com/foobar')
+  })
+})

package/src/helpers/replaceVariables.ts

@@ -0,0 +1,11 @@
+/**
+ * Replaces variables in a url with the values provided.
+ */
+export const replaceVariables = (
+  url: string,
+  variables: Record<string, string | number>,
+) => {
+  return Object.entries(variables).reduce((acc, [key, value]) => {
+    return acc.replace(`{${key}}`, value.toString())
+  }, url)
+}

package/src/helpers/sendRequest.test.ts

@@ -0,0 +1,50 @@
+import { createEchoServer } from '@scalar/echo-server'
+import { describe, expect, it } from 'vitest'
+
+import { sendRequest } from './sendRequest'
+
+const createEchoServerOnAnyPort = (): { address: string; port: number } => {
+  const { listen } = createEchoServer()
+  const instance = listen(0)
+
+  return instance.address()
+}
+
+describe('sendRequest', () => {
+  it('sends requests', async () => {
+    const { port } = createEchoServerOnAnyPort()
+
+    const request = {
+      url: `http://127.0.0.1:${port}`,
+    }
+
+    const result = await sendRequest(request)
+
+    expect(result?.response).toContain({
+      method: 'GET',
+      path: '/',
+    })
+  })
+
+  it('replaces variables', async () => {
+    const { port } = createEchoServerOnAnyPort()
+
+    const request = {
+      url: `http://127.0.0.1:${port}`,
+      path: '{path}',
+      parameters: [
+        {
+          name: 'path',
+          value: 'example',
+        },
+      ],
+    }
+
+    const result = await sendRequest(request)
+
+    expect(result?.response).toContain({
+      method: 'GET',
+      path: '/example',
+    })
+  })
+})