@scalar/api-client 0.4.0 → 0.5.1

package/src/helpers/sendRequest.ts

@@ -1,20 +1,20 @@
 import axios from 'axios'
 import { nanoid } from 'nanoid'
-import nunjucks from 'nunjucks'
 
 import type {
   ClientRequestConfig,
   ClientResponse,
   RequestResult,
+  SendRequestConfig,
 } from '../types'
-import { mapFromArray } from './mapFromArray'
-
-const templateEngine = nunjucks.configure({
-  tags: {
-    variableStart: '{',
-    variableEnd: '}',
-  },
-})
+import {
+  concatenateUrlAndPath,
+  mapFromArray,
+  normalizePath,
+  normalizeRequestMethod,
+  normalizeUrl,
+  replaceVariables,
+} from './'
 
 const defaultHeaders = {
   'User-Agent': 'Scalar API Client',
@@ -24,24 +24,26 @@ const defaultHeaders = {
  * Send a request via the proxy
  */
 export async function sendRequest(
-  request: ClientRequestConfig,
-  proxyUrl: string,
+  request: SendRequestConfig,
+  proxyUrl?: string,
 ): Promise<RequestResult | null> {
-  // Format complete URL
-  const method = request.type.toUpperCase()
-  const fullUrl = `${request.url}${request.path}`
+  const method = normalizeRequestMethod(request.type)
   const headers: Record<string, string | number> = {
     ...defaultHeaders,
-    ...mapFromArray(request.headers, 'name', 'value'),
+    ...mapFromArray(request.headers ?? [], 'name', 'value'),
   }
+  const url = normalizeUrl(request.url)
+  const path = normalizePath(request.path)
+  const urlWithPath = concatenateUrlAndPath(url, path)
+  const renderedURL = replaceVariables(
+    urlWithPath,
+    mapFromArray(request.parameters ?? [], '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()
 
@@ -53,7 +55,7 @@ export async function sendRequest(
     data: request.body,
   }
 
-  const config = proxy
+  const config = proxyUrl
     ? {
         method: 'POST',
         url: proxyUrl,
@@ -71,24 +73,33 @@ export async function sendRequest(
   const response: (ClientResponse & { error: false }) | { error: true } =
     // @ts-ignore
     await axios(config)
-      .then((res) => ({
-        ...res.data,
-        error: false,
-      }))
-      .catch((err) => ({
-        error: true,
-        ...err?.response,
-      }))
+      .then((res) => {
+        return {
+          ...res.data,
+          error: false,
+        }
+      })
+      .catch((err) => {
+        return {
+          error: true,
+          ...err?.response,
+        }
+      })
 
-  return !response.error
-    ? {
+  return response.error
+    ? null
+    : {
         sentTime: Date.now(),
-        request,
+        request: {
+          ...request,
+          type: method,
+          url,
+          path,
+        },
         response: {
           ...response,
           duration: Date.now() - startTime,
         },
         responseId: nanoid(),
       }
-    : null
 }

package/src/index.ts

@@ -1,5 +1,4 @@
 export { ApiClient } from './components/ApiClient'
-export { CodeMirror } from './components/CodeMirror'
 
 export * from './helpers'
 export * from './hooks'

package/src/types.ts

@@ -51,20 +51,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[]
 }
@@ -89,6 +90,9 @@ export type ClientResponse = {
   duration: number
 }
 
+export type SendRequestConfig = Partial<ClientRequestConfig> &
+  Required<Pick<ClientRequestConfig, 'url'>>
+
 export type RequestResult = {
   request: ClientRequestConfig
   response: ClientResponse

package/dist/components/CodeMirror/CodeMirror.vue.d.ts

@@ -1,56 +0,0 @@
-type Language = 'axios' | 'c' | 'clojure' | 'csharp' | 'go' | 'http' | 'java' | 'javascript' | 'json' | 'kotlin' | 'node' | 'objc' | 'ocaml' | 'powershell' | 'python' | 'r' | 'ruby' | 'shell' | 'swift' | 'php';
-declare const _default: import("vue").DefineComponent<{
-    content: {
-        type: import("vue").PropType<string>;
-    };
-    readOnly: {
-        type: import("vue").PropType<boolean>;
-    };
-    languages: {
-        type: import("vue").PropType<Language[]>;
-    };
-    withVariables: {
-        type: import("vue").PropType<boolean>;
-    };
-    lineNumbers: {
-        type: import("vue").PropType<boolean>;
-    };
-    withoutTheme: {
-        type: import("vue").PropType<boolean>;
-    };
-    disableEnter: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (value: string) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    content: {
-        type: import("vue").PropType<string>;
-    };
-    readOnly: {
-        type: import("vue").PropType<boolean>;
-    };
-    languages: {
-        type: import("vue").PropType<Language[]>;
-    };
-    withVariables: {
-        type: import("vue").PropType<boolean>;
-    };
-    lineNumbers: {
-        type: import("vue").PropType<boolean>;
-    };
-    withoutTheme: {
-        type: import("vue").PropType<boolean>;
-    };
-    disableEnter: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>> & {
-    onChange?: ((value: string) => any) | undefined;
-}, {
-    disableEnter: boolean;
-}, {}>;
-export default _default;
-//# sourceMappingURL=CodeMirror.vue.d.ts.map

package/dist/components/CodeMirror/CodeMirror.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeMirror.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/CodeMirror.vue.ts"],"names":[],"mappings":"AA+EA,KAAK,QAAQ,GACT,OAAO,GACP,GAAG,GACH,SAAS,GACT,QAAQ,GACR,IAAI,GACJ,MAAM,GACN,MAAM,GACN,YAAY,GACZ,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,QAAQ,GACR,GAAG,GACH,MAAM,GACN,OAAO,GACP,OAAO,GACP,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4JT,wBAAkD"}

package/dist/components/CodeMirror/extensions/variables.d.ts

@@ -1,6 +0,0 @@
-import { type DecorationSet, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-export declare const variables: () => ViewPlugin<{
-    variables: DecorationSet;
-    update(update: ViewUpdate): void;
-}>;
-//# sourceMappingURL=variables.d.ts.map

package/dist/components/CodeMirror/extensions/variables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeMirror/extensions/variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAGlB,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAA;AAYzB,eAAO,MAAM,SAAS;;mBAOD,UAAU;EAc5B,CAAA"}

package/dist/components/CodeMirror/index.d.ts

@@ -1,2 +0,0 @@
-export { default as CodeMirror } from './CodeMirror.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/CodeMirror/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeMirror/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}

package/src/components/CodeMirror/CodeMirror.vue

@@ -1,232 +0,0 @@
-<script lang="ts" setup>
-import { java } from '@codemirror/lang-java'
-import { javascript } from '@codemirror/lang-javascript'
-import { json } from '@codemirror/lang-json'
-import { python } from '@codemirror/lang-python'
-import { type LanguageSupport, StreamLanguage } from '@codemirror/language'
-import {
-  c,
-  csharp,
-  kotlin,
-  objectiveC,
-} from '@codemirror/legacy-modes/mode/clike'
-import { clojure } from '@codemirror/legacy-modes/mode/clojure'
-import { go } from '@codemirror/legacy-modes/mode/go'
-import { http } from '@codemirror/legacy-modes/mode/http'
-import { oCaml } from '@codemirror/legacy-modes/mode/mllike'
-import { powerShell } from '@codemirror/legacy-modes/mode/powershell'
-import { r } from '@codemirror/legacy-modes/mode/r'
-import { ruby } from '@codemirror/legacy-modes/mode/ruby'
-import { shell } from '@codemirror/legacy-modes/mode/shell'
-import { swift } from '@codemirror/legacy-modes/mode/swift'
-import { type Extension } from '@codemirror/state'
-import {
-  EditorView,
-  type ViewUpdate,
-  keymap,
-  lineNumbers as lineNumbersExtension,
-} from '@codemirror/view'
-import { useCodeMirror } from '@scalar/use-codemirror'
-import { watch } from 'vue'
-
-import { variables } from './extensions/variables'
-
-const props = withDefaults(
-  defineProps<{
-    content?: string
-    readOnly?: boolean
-    languages?: Language[]
-    withVariables?: boolean
-    lineNumbers?: boolean
-    withoutTheme?: boolean
-    disableEnter?: boolean
-  }>(),
-  {
-    disableEnter: false,
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'change', value: string): void
-}>()
-
-// TODO: Add 'php' and 'laravel'
-const syntaxHighlighting: Partial<
-  Record<Language, LanguageSupport | StreamLanguage<any>>
-> = {
-  axios: javascript(),
-  c: StreamLanguage.define(c),
-  clojure: StreamLanguage.define(clojure),
-  csharp: StreamLanguage.define(csharp),
-  go: StreamLanguage.define(go),
-  http: StreamLanguage.define(http),
-  java: java(),
-  javascript: javascript(),
-  json: json(),
-  kotlin: StreamLanguage.define(kotlin),
-  node: javascript(),
-  objc: StreamLanguage.define(objectiveC),
-  ocaml: StreamLanguage.define(oCaml),
-  powershell: StreamLanguage.define(powerShell),
-  python: python(),
-  r: StreamLanguage.define(r),
-  ruby: StreamLanguage.define(ruby),
-  shell: StreamLanguage.define(shell),
-  swift: StreamLanguage.define(swift),
-}
-
-type Language =
-  | 'axios'
-  | 'c'
-  | 'clojure'
-  | 'csharp'
-  | 'go'
-  | 'http'
-  | 'java'
-  | 'javascript'
-  | 'json'
-  | 'kotlin'
-  | 'node'
-  | 'objc'
-  | 'ocaml'
-  | 'powershell'
-  | 'python'
-  | 'r'
-  | 'ruby'
-  | 'shell'
-  | 'swift'
-  | 'php'
-
-// CSS Class
-const classes = ['scalar-api-client__codemirror']
-
-if (props.readOnly) {
-  classes.push('scalar-api-client__codemirror--read-only')
-}
-
-const getCodeMirrorExtensions = () => {
-  const extensions: Extension[] = []
-
-  extensions.push(EditorView.editorAttributes.of({ class: classes.join(' ') }))
-
-  // Read only
-  if (props.readOnly) {
-    extensions.push(EditorView.editable.of(false))
-  }
-
-  // Syntax highlighting
-  if (props.languages) {
-    props.languages
-      .filter((language) => typeof syntaxHighlighting[language] !== 'undefined')
-      .forEach((language) => {
-        extensions.push(syntaxHighlighting[language] as Extension)
-      })
-  }
-
-  // Line numbers
-  if (props.lineNumbers) {
-    extensions.push(lineNumbersExtension())
-  }
-
-  // Highlight variables
-  if (props.withVariables) {
-    extensions.push(variables())
-  }
-
-  if (props.disableEnter) {
-    extensions.push(
-      keymap.of([
-        {
-          key: 'Enter',
-          run: () => {
-            return true
-          },
-        },
-        {
-          key: 'Ctrl-Enter',
-          mac: 'Cmd-Enter',
-          run: () => {
-            return true
-          },
-        },
-        {
-          key: 'Shift-Enter',
-          run: () => {
-            return true
-          },
-        },
-      ]),
-    )
-  }
-
-  // Listen to updates
-  extensions.push(
-    EditorView.updateListener.of((v: ViewUpdate) => {
-      if (!v.docChanged) {
-        return
-      }
-
-      emit('change', v.state.doc.toString())
-    }),
-  )
-
-  return extensions
-}
-
-const { codeMirrorRef, setCodeMirrorContent, reconfigureCodeMirror } =
-  useCodeMirror({
-    content: props.content ?? '',
-    extensions: getCodeMirrorExtensions(),
-    withoutTheme: props.withoutTheme,
-  })
-
-watch(props, () => {
-  setCodeMirrorContent(props.content ?? '')
-  reconfigureCodeMirror(getCodeMirrorExtensions())
-})
-</script>
-
-<template>
-  <div
-    ref="codeMirrorRef"
-    class="scalar-api-client__codemirror__wrapper" />
-</template>
-
-<style>
-/** Basics */
-.scalar-api-client__codemirror__wrapper {
-  width: 100%;
-  display: flex;
-  align-items: stretch;
-}
-
-.scalar-api-client__codemirror {
-  flex-grow: 1;
-  max-width: 100%;
-}
-
-.scalar-api-client__codemirror.ͼw {
-  background-color: var(--theme-background-1);
-}
-
-.scalar-api-client__codemirror--read-only.ͼw {
-  background-color: var(--theme-background-2);
-}
-
-/** URL input */
-.scalar-api-client__url-input {
-  font-weight: var(--theme-semibold);
-}
-
-.scalar-api-client__url-input .cm-scroller {
-  padding-left: 6px;
-}
-
-.scalar-api-client__url-input .ͼ1 .cm-scroller {
-  align-items: center !important;
-}
-
-.scalar-api-client__variable {
-  color: var(--scalar-api-client-color);
-}
-</style>

package/src/components/CodeMirror/extensions/variables.ts

@@ -1,41 +0,0 @@
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  type ViewUpdate,
-} from '@codemirror/view'
-
-const variableHighlighterDecoration = new MatchDecorator({
-  regexp: /(\{[^}]+\})/g,
-  decoration: () =>
-    Decoration.mark({
-      attributes: {
-        class: 'scalar-api-client__variable',
-      },
-    }),
-})
-
-export const variables = () =>
-  ViewPlugin.fromClass(
-    class {
-      variables: DecorationSet
-      constructor(view: EditorView) {
-        this.variables = variableHighlighterDecoration.createDeco(view)
-      }
-      update(update: ViewUpdate) {
-        this.variables = variableHighlighterDecoration.updateDeco(
-          update,
-          this.variables,
-        )
-      }
-    },
-    {
-      decorations: (instance) => instance.variables,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of(
-          (view) => view.plugin(plugin)?.variables || Decoration.none,
-        ),
-    },
-  )

package/src/components/CodeMirror/index.ts

@@ -1 +0,0 @@
-export { default as CodeMirror } from './CodeMirror.vue'

package/src/hooks/useOperation.test.ts

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