@scalar/api-client 0.4.0 → 0.5.0

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.0",
+  "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,18 @@
   },
   "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-codemirror": "0.5.0",
+    "@scalar/use-keyboard-event": "0.4.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.2.3",
@@ -54,7 +60,7 @@
   },
   "peerDependencies": {
     "vue": "3.3.4",
-    "@types/nunjucks": "3.2.3"
+    "@types/nunjucks": "3.2.2"
   },
   "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/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/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/index.ts

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

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'