@scalar/api-client 0.2.0 → 0.2.1

package/src/fixtures/httpStatusCodes.ts

@@ -0,0 +1,259 @@
+export type HttpStatusCode = {
+  name: string
+  url: string
+}
+
+export type HttpStatusCodes = Record<string, HttpStatusCode>
+
+export const httpStatusCodes: HttpStatusCodes = {
+  100: {
+    name: 'Continue',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/100',
+  },
+  101: {
+    name: 'Switching Protocols',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/101',
+  },
+  102: {
+    name: 'Processing',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/102',
+  },
+  103: {
+    name: 'Early Hints',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103',
+  },
+  200: {
+    name: 'OK',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200',
+  },
+  201: {
+    name: 'Created',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/201',
+  },
+  202: {
+    name: 'Accepted',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/202',
+  },
+  203: {
+    name: 'Non-Authoritative Information',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/203',
+  },
+  204: {
+    name: 'No Content',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204',
+  },
+  205: {
+    name: 'Reset Content',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/205',
+  },
+  206: {
+    name: 'Partial Content',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206',
+  },
+  207: {
+    name: 'Multi-Status',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/207',
+  },
+  208: {
+    name: 'Already Reported',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/208',
+  },
+  226: {
+    name: 'IM Used',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/226',
+  },
+  300: {
+    name: 'Multiple Choices',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/300',
+  },
+  301: {
+    name: 'Moved Permanently',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301',
+  },
+  302: {
+    name: 'Found',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302',
+  },
+  303: {
+    name: 'See Other',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/303',
+  },
+  304: {
+    name: 'Not Modified',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/304',
+  },
+  305: {
+    name: 'Use Proxy',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/305',
+  },
+  306: {
+    name: '(Unused)',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/306',
+  },
+  307: {
+    name: 'Temporary Redirect',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/307',
+  },
+  308: {
+    name: 'Permanent Redirect',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/308',
+  },
+  400: {
+    name: 'Bad Request',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400',
+  },
+  401: {
+    name: 'Unauthorized',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401',
+  },
+  402: {
+    name: 'Payment Required',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/402',
+  },
+  403: {
+    name: 'Forbidden',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/403',
+  },
+  404: {
+    name: 'Not Found',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404',
+  },
+  405: {
+    name: 'Method Not Allowed',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405',
+  },
+  406: {
+    name: 'Not Acceptable',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/406',
+  },
+  407: {
+    name: 'Proxy Authentication Required',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/407',
+  },
+  408: {
+    name: 'Request Timeout',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/408',
+  },
+  409: {
+    name: 'Conflict',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/409',
+  },
+  410: {
+    name: 'Gone',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410',
+  },
+  411: {
+    name: 'Length Required',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/411',
+  },
+  412: {
+    name: 'Precondition Failed',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/412',
+  },
+  413: {
+    name: 'Content Too Large',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/413',
+  },
+  414: {
+    name: 'URI Too Long',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/414',
+  },
+  415: {
+    name: 'Unsupported Media Type',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/415',
+  },
+  416: {
+    name: 'Range Not Satisfiable',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/416',
+  },
+  417: {
+    name: 'Expectation Failed',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/417',
+  },
+  421: {
+    name: 'Misdirected Request',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/421',
+  },
+  422: {
+    name: 'Unprocessable Content',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422',
+  },
+  423: {
+    name: 'Locked',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/423',
+  },
+  424: {
+    name: 'Failed Dependency',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/424',
+  },
+  425: {
+    name: 'Too Early',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/425',
+  },
+  426: {
+    name: 'Upgrade Required',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/426',
+  },
+  428: {
+    name: 'Precondition Required',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/428',
+  },
+  429: {
+    name: 'Too Many Requests',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/429',
+  },
+  431: {
+    name: 'Request Header Fields Too Large',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/431',
+  },
+  451: {
+    name: 'Unavailable For Legal Reasons',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/451',
+  },
+  500: {
+    name: 'Internal Server Error',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/500',
+  },
+  501: {
+    name: 'Not Implemented',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/501',
+  },
+  502: {
+    name: 'Bad Gateway',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/502',
+  },
+  503: {
+    name: 'Service Unavailable',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/503',
+  },
+  504: {
+    name: 'Gateway Timeout',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/504',
+  },
+  505: {
+    name: 'HTTP Version Not Supported',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/505',
+  },
+  506: {
+    name: 'Variant Also Negotiates',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/506',
+  },
+  507: {
+    name: 'Insufficient Storage',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/507',
+  },
+  508: {
+    name: 'Loop Detected',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/508',
+  },
+  510: {
+    name: 'Not Extended',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/510',
+  },
+  511: {
+    name: 'Network Authentication Required',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/511',
+  },
+}
+
+export default httpStatusCodes

package/src/fixtures/index.ts

@@ -0,0 +1,6 @@
+export { httpHeaders, type HttpHeader } from './httpHeaders'
+export {
+  default as httpStatusCodes,
+  type HttpStatusCode,
+  type HttpStatusCodes,
+} from './httpStatusCodes'

package/src/helpers/createPlaceholderRequest.ts

@@ -0,0 +1,16 @@
+import type { ClientRequestConfig } from '../types'
+
+/**
+ * Generate a new placeholder request
+ */
+export const createPlaceholderRequest = (): ClientRequestConfig => ({
+  name: '',
+  url: '',
+  type: 'GET',
+  path: '',
+  parameters: [],
+  headers: [],
+  query: [],
+  body: '',
+  formData: [],
+})

package/src/helpers/generateParameters.ts

@@ -0,0 +1,19 @@
+import type { BaseParameter, Parameters } from '../types'
+
+/**
+ * Generate parameters for the request from the parameters in the swagger file
+ */
+export function generateParameters(parameters: Parameters[]) {
+  const params: BaseParameter[] = []
+  parameters.forEach((parameter: Parameters) => {
+    const param: BaseParameter = {
+      name: parameter.name,
+      value: '',
+      customClass: parameter.required ? 'required-parameter' : '',
+    }
+    param.value = ''
+    params.push(param)
+  })
+
+  return params
+}

package/src/helpers/generateRequest.ts

@@ -0,0 +1,26 @@
+import { type ParamMap } from '../hooks/useOperation'
+import type { ClientRequestConfig, Operation, Server } from '../types'
+import { generateParameters } from './generateParameters'
+
+/**
+ * Generate parameters for the request
+ */
+export function generateRequest(
+  operation: Operation,
+  parameterMap: ParamMap,
+  server: Server,
+): ClientRequestConfig {
+  const item = {
+    id: operation.operationId,
+    name: operation.name,
+    type: operation.httpVerb,
+    path: operation.path,
+    parameters: generateParameters(parameterMap.path),
+    query: generateParameters(parameterMap.query),
+    headers: generateParameters(parameterMap.header),
+    url: server.url,
+    body: '',
+  }
+
+  return item
+}

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+export { createPlaceholderRequest } from './createPlaceholderRequest'
+export { generateRequest } from './generateRequest'
+export { generateParameters } from './generateParameters'
+export { mapFromArray } from './mapFromArray'
+export { sendRequest } from './sendRequest'

package/src/helpers/mapFromArray.ts

@@ -0,0 +1,16 @@
+/**
+ * A utility function to convert an array of objects to an object of objects.
+ */
+export function mapFromArray<
+  T extends Record<string, unknown>,
+  K extends keyof T & string,
+  V extends keyof T & string,
+>(arr: T[], key: K, valueKey: V) {
+  const obj: Record<string, T[V]> = {}
+
+  arr.forEach((entry) => {
+    obj[entry[key] as string] = entry[valueKey]
+  })
+
+  return obj
+}

package/src/helpers/sendRequest.ts

@@ -0,0 +1,94 @@
+import axios from 'axios'
+import { nanoid } from 'nanoid'
+import nunjucks from 'nunjucks'
+
+import type {
+  ClientRequestConfig,
+  ClientResponse,
+  RequestResult,
+} from '../types'
+import { mapFromArray } from './mapFromArray'
+
+const templateEngine = nunjucks.configure({
+  tags: {
+    variableStart: '{',
+    variableEnd: '}',
+  },
+})
+
+const defaultHeaders = {
+  'User-Agent': 'Scalar API Client',
+}
+
+/**
+ * Send a request via the proxy
+ */
+export async function sendRequest(
+  request: ClientRequestConfig,
+  proxyUrl: string,
+): Promise<RequestResult | null> {
+  // Format complete URL
+  const method = request.type.toUpperCase()
+  const fullUrl = `${request.url}${request.path}`
+  const headers: Record<string, string | number> = {
+    ...defaultHeaders,
+    ...mapFromArray(request.headers, 'name', 'value'),
+  }
+  /** TODO: Make dynamic */
+  const auth = {
+    type: 'none',
+  }
+  const variables = mapFromArray(request.parameters, 'name', 'value')
+  const renderedURL = templateEngine.renderString(fullUrl, variables)
+  /** TODO: Make dynamic */
+  const proxy = true
+
+  const startTime = Date.now()
+
+  const requestOptions = {
+    method,
+    url: renderedURL,
+    auth,
+    headers,
+    data: request.body,
+  }
+
+  const config = proxy
+    ? {
+        method: 'POST',
+        url: proxyUrl,
+        data: requestOptions,
+      }
+    : {
+        method: requestOptions.method,
+        url: requestOptions.url,
+        headers: requestOptions.headers,
+        data: requestOptions.data,
+      }
+
+  console.info(`${requestOptions.method} ${requestOptions.url}`)
+
+  const response: (ClientResponse & { error: false }) | { error: true } =
+    // @ts-ignore
+    await axios(config)
+      .then((res) => ({
+        ...res.data,
+        error: false,
+      }))
+      .catch((err) => ({
+        error: true,
+        ...err?.response,
+      }))
+
+  return !response.error
+    ? {
+        sentTime: Date.now(),
+        request,
+        response: {
+          ...response,
+          duration: Date.now() - startTime,
+        },
+        responseId: nanoid(),
+      }
+    : null
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+// export { useCopilot } from './useCopilot'
+export { useOperation, type ParamMap } from './useOperation'

package/src/hooks/useCopilot.ts

@@ -0,0 +1,64 @@
+import { useWebSocket } from '@vueuse/core'
+import { reactive, readonly } from 'vue'
+
+export enum CopilotLoadingStates {
+  Inactive = 'Inactive',
+  Fix = 'Fix',
+  Loading = 'Loading',
+  Working = 'Working',
+  Success = 'Success',
+}
+
+export type RequestData = {
+  id: string
+  request: string
+}
+export type RecommendationHandler = (recommendation: string) => void
+
+const recommendationHandler: Set<RecommendationHandler> = new Set([])
+
+function onMessage(_ws: WebSocket, event: MessageEvent) {
+  const jsonData = JSON.parse(event.data)
+  const recommendation = jsonData['response']
+  recommendationHandler.forEach((handler) => handler(recommendation))
+}
+
+const { send } = useWebSocket(import.meta.env.VITE_COPILOT_WS_URL, {
+  onMessage,
+  autoReconnect: true,
+})
+
+function sendCopilot(requestData: RequestData) {
+  setLoadingState(CopilotLoadingStates.Loading)
+  const jsonString = JSON.stringify(requestData)
+  send(jsonString)
+}
+
+const serverHandler = () => ({
+  uuid: '',
+  curlRequest:
+    "curl -X 'GET' 'https://petstore.swagger.io/v2/pet/findByStatus?status=SOld' -H 'accept: application/json'",
+})
+
+const serverHandlerState = reactive(serverHandler())
+
+const state = reactive({
+  loadingState: CopilotLoadingStates.Inactive,
+})
+
+function setLoadingState(loadingState: CopilotLoadingStates) {
+  state.loadingState = loadingState
+}
+
+/**
+ * This hook is used to send requests to the copilot server and receive recommendations.
+ */
+export const useCopilot = () => ({
+  sendCopilot,
+  state: readonly(state),
+  onRecommendation: (handler: RecommendationHandler) => {
+    recommendationHandler.add(handler)
+  },
+  serverHandlerState,
+  setLoadingState,
+})

package/src/hooks/useOperation.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('example', () => {
+  it('executes tests', () => {
+    expect(true).toBe(true)
+  })
+})

package/src/hooks/useOperation.ts

@@ -0,0 +1,43 @@
+import { computed } from 'vue'
+
+import type { Operation, Parameters } from '../types'
+
+export type ParamMap = {
+  path: Parameters[]
+  query: Parameters[]
+  header: Parameters[]
+}
+
+export type OperationProps = {
+  operation: Operation
+}
+
+/**
+ * This hook is used to generate the parameters for the request from the parameters in the swagger file
+ */
+export function useOperation(props: OperationProps) {
+  const parameterMap = computed(() => {
+    const { parameters } = props.operation.information
+    const map: ParamMap = {
+      path: [],
+      query: [],
+      header: [],
+    }
+    if (parameters) {
+      parameters.forEach((parameter: Parameters) => {
+        if (parameter.in === 'path') {
+          map.path.push(parameter)
+        } else if (parameter.in === 'query') {
+          map.query.push(parameter)
+        } else if (parameter.in === 'header') {
+          map.header.push(parameter)
+        }
+      })
+    }
+    return map
+  })
+
+  return {
+    parameterMap,
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export { ApiClient } from './components/ApiClient'
+export { CodeMirror } from './components/CodeMirror'
+
+export * from './helpers'
+export * from './hooks'
+export * from './stores/apiClientStore'
+export * from './stores/apiClientRequestStore'
+export * from './types'
+export * from './fixtures'

package/src/stores/apiClientRequestStore.ts

@@ -0,0 +1,103 @@
+import { computed, reactive, ref } from 'vue'
+
+import { createPlaceholderRequest } from '../helpers/createPlaceholderRequest'
+import type { AuthState, ClientRequestConfig, RequestResult } from '../types'
+
+// Auth state template
+export const createEmptyAuthState = (): AuthState => ({
+  type: 'none',
+  basic: {
+    userName: '',
+    password: '',
+    active: true,
+  },
+  oauthTwo: {
+    generatedToken: '',
+    discoveryURL: '',
+    authURL: '',
+    accessTokenURL: '',
+    clientID: '',
+    clientSecret: '',
+    scope: '',
+    active: true,
+  },
+  bearer: {
+    token: '',
+    active: true,
+  },
+  digest: {
+    userName: '',
+    password: '',
+    active: true,
+  },
+})
+
+/**
+ * Request state
+ */
+type RequestHistoryOrder = string[]
+type RequestHistoryEntry = RequestResult
+
+// Request Authorization State
+const authState = reactive(createEmptyAuthState())
+
+// Log of all requests made
+const requestHistory: Record<string, RequestHistoryEntry> = reactive({})
+
+// Request list order
+const requestHistoryOrder = ref<RequestHistoryOrder>([])
+
+// Id of the currently viewed request
+const activeRequestId = ref('')
+
+// Active request object
+const activeRequest = reactive(createPlaceholderRequest())
+
+/**
+ * Mutators
+ */
+
+// Add a new request to the history log and make it active
+const addRequestToHistory = (value: RequestHistoryEntry) => {
+  requestHistory[value.responseId] = value
+  activeRequestId.value = value.responseId
+  requestHistoryOrder.value.unshift(value.responseId)
+}
+
+// Set a response by key to currently active
+const setActiveResponse = (historyID: string) => {
+  activeRequestId.value = historyID
+  const { request }: { request: ClientRequestConfig } =
+    requestHistory[historyID]
+  Object.assign(activeRequest, request)
+}
+
+// Get the currently active response
+const activeResponse = computed(() =>
+  activeRequestId.value ? requestHistory[activeRequestId.value].response : null,
+)
+
+// Set the active request object
+const setActiveRequest = (request: ClientRequestConfig) => {
+  Object.assign(activeRequest, request)
+}
+
+/**
+ * View state
+ */
+
+// Whether the request is in read mode or edit mode
+const readOnly = ref(true)
+
+export const useApiClientRequestStore = () => ({
+  authState,
+  readOnly,
+  activeRequest,
+  activeResponse,
+  requestHistory,
+  requestHistoryOrder,
+  activeRequestId,
+  setActiveResponse,
+  addRequestToHistory,
+  setActiveRequest,
+})