@scalar/use-codemirror 0.5.0 → 0.5.1

package/README.md

@@ -15,7 +15,7 @@ npm install @scalar/use-codemirror
 
 ```vue
 <script setup>
-import { CodeMirror } from '../CodeMirror'
+import { CodeMirror } from '@scalar/use-codemirror'
 </script>
 
 <CodeMirror

package/package.json

@@ -7,7 +7,7 @@
     "composable",
     "codemirror"
   ],
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Scalar (https://github.com/scalar)",
   "homepage": "https://github.com/scalar/scalar",
   "repository": {
@@ -26,11 +26,9 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
-    "src",
     "dist"
   ],
   "exports": {
-    "development": "./src/index.ts",
     "import": "./dist/index.js"
   },
   "dependencies": {
@@ -62,6 +60,7 @@
     "tsc-alias": "1.8.6",
     "vite": "4.4.8",
     "vitest": "0.34.1",
+    "@vitest/coverage-v8": "^0.34.4",
     "vue-tsc": "1.8.8"
   },
   "peerDependencies": {

package/src/components/CodeMirror/CodeMirror.vue

@@ -1,249 +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 { watch } from 'vue'
-
-import { useCodeMirror } from '../../hooks'
-import { variables } from './extensions/variables'
-
-const props = withDefaults(
-  defineProps<{
-    extensions?: Extension[]
-    content?: string
-    readOnly?: boolean
-    languages?: Language[]
-    withVariables?: boolean
-    lineNumbers?: boolean
-    withoutTheme?: boolean
-    disableEnter?: boolean
-    forceDarkMode?: boolean
-  }>(),
-  {
-    disableEnter: false,
-    forceDarkMode: 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(' ') }))
-
-  // Custom extensions
-  if (props.extensions) {
-    props.extensions.forEach((extension) => {
-      extensions.push(extension)
-    })
-  }
-
-  // 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,
-    forceDarkMode: props.forceDarkMode,
-  })
-
-watch(props, () => {
-  setCodeMirrorContent(props.content ?? '')
-  reconfigureCodeMirror(getCodeMirrorExtensions())
-})
-
-defineExpose({
-  setCodeMirrorContent,
-})
-</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%;
-
-  font-size: var(--theme-small);
-}
-
-/* .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/index.ts

@@ -1 +0,0 @@
-export * from './useCodeMirror'

package/src/hooks/useCodeMirror.test.ts

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

package/src/hooks/useCodeMirror.ts

@@ -1,181 +0,0 @@
-import { type Extension, StateEffect } from '@codemirror/state'
-import { type EditorViewConfig } from '@codemirror/view'
-import { EditorView } from 'codemirror'
-import { type Ref, ref, watch } from 'vue'
-
-import { darkTheme, lightTheme } from '../themes'
-
-/** TODO: This is a static value, make it work with a dynamic parameter. */
-const isDark = ref(false)
-
-type UseCodeMirrorParameters = {
-  /**
-   * Some additional CodeMirror extensions.
-   */
-  extensions: Extension[]
-  /**
-   * Prefill the content. Will be ignored when a provider is given.
-   */
-  content?: string
-  /**
-   * Force the dark mode.
-   */
-  forceDarkMode?: boolean
-  /**
-   * Force the light mode.
-   */
-  forceLightMode?: boolean
-  /**
-   * Whether to load a theme.
-   */
-  withoutTheme?: boolean
-}
-
-export const useCodeMirror = (
-  parameters: UseCodeMirrorParameters,
-): {
-  value: Ref<string>
-  codeMirrorRef: Ref<HTMLDivElement | null>
-  codeMirror: Ref<EditorView | null>
-  setCodeMirrorContent: (content: string) => void
-  reconfigureCodeMirror: (newExtensions: Extension[]) => void
-  restartCodeMirror: (newExtensions: Extension[]) => void
-} => {
-  const { extensions, content, forceDarkMode, forceLightMode, withoutTheme } =
-    parameters
-  const value = ref(content ?? '')
-  const codeMirrorRef = ref<HTMLDivElement | null>(null)
-  const codeMirror = ref<EditorView | null>(null)
-
-  // Unmounts CodeMirror if it’s mounted already, and mounts CodeMirror, if the given ref exists.
-  watch(codeMirrorRef, () => {
-    destroyCodeMirror()
-    mountCodeMirror(extensions)
-  })
-
-  // Initializes CodeMirror.
-  const mountCodeMirror = (withCustomExtensions: Extension[]) => {
-    if (codeMirrorRef.value) {
-      const configuration: EditorViewConfig = {
-        parent: codeMirrorRef.value,
-        extensions: addDefaultExtensions(withCustomExtensions),
-      }
-
-      // Only set the content, when not in collaborative editing mode
-      if (content) {
-        configuration.doc = content
-      }
-
-      codeMirror.value = new EditorView(configuration)
-    }
-  }
-
-  const getCurrentTheme = () => {
-    if (withoutTheme) {
-      return null
-    }
-
-    if (forceDarkMode) {
-      return darkTheme
-    }
-
-    if (forceLightMode) {
-      return lightTheme
-    }
-
-    if (isDark.value) {
-      return darkTheme
-    }
-
-    return lightTheme
-  }
-
-  // Extend the given extension list with a dark/light theme.
-  const addDefaultExtensions = (newExtensions: Extension[] = []) => {
-    // Themes
-    const defaultExtensions: Extension[] = [
-      EditorView.theme({}, { dark: forceDarkMode ? false : isDark.value }),
-      getCurrentTheme(),
-    ].filter((extension) => extension !== null) as Extension[]
-
-    return [...defaultExtensions, newExtensions]
-  }
-
-  watch(isDark, () => {
-    const { extensions: configuredExtensions } = parameters
-
-    if (!forceDarkMode) {
-      reconfigureCodeMirror(configuredExtensions)
-    }
-  })
-
-  // Removes CodeMirror.
-  const destroyCodeMirror = () => {
-    codeMirror.value?.destroy()
-  }
-
-  const setCodeMirrorContent = (newValue: string) => {
-    if (!codeMirror.value) {
-      return
-    }
-
-    value.value = newValue
-
-    codeMirror.value.dispatch({
-      changes: {
-        from: 0,
-        to: codeMirror.value.state.doc.length,
-        insert: newValue,
-      },
-      selection: {
-        anchor: Math.min(
-          codeMirror.value.state.selection.main.anchor,
-          newValue.length,
-        ),
-      },
-    })
-  }
-
-  const reconfigureCodeMirror = (newExtensions: Extension[]) => {
-    if (!codeMirror.value) {
-      return
-    }
-
-    codeMirror.value.dispatch({
-      effects: StateEffect.reconfigure.of(addDefaultExtensions(newExtensions)),
-    })
-  }
-
-  const restartCodeMirror = (newExtensions: Extension[]) => {
-    destroyCodeMirror()
-    mountCodeMirror(newExtensions)
-  }
-
-  return {
-    /**
-     * The current value
-     */
-    value,
-    /**
-     * An empty reference used to mount CodeMirror when bound to the DOM.
-     */
-    codeMirrorRef,
-    /**
-     * The CodeMirror instance.
-     */
-    // @ts-ignore
-    codeMirror,
-    /**
-     * Replaces the current content with the given value.
-     */
-    setCodeMirrorContent,
-    /**
-     * Reconfigure the used extensions.
-     */
-    reconfigureCodeMirror,
-    /**
-     * Restarts CodeMirror (destroy + mount)
-     */
-    restartCodeMirror,
-  }
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export { CodeMirror } from './components/CodeMirror'
-export * from './hooks/useCodeMirror'

package/src/themes/index.ts

@@ -1,77 +0,0 @@
-import { tags as t } from '@lezer/highlight'
-import { createTheme } from '@uiw/codemirror-themes'
-
-export const lightTheme = createTheme({
-  theme: 'light',
-  settings: {
-    background: 'var(--theme-background-2)',
-    foreground: 'var(--theme-color-1)',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: 'var(--theme-background-2)',
-    gutterForeground: 'var(--theme-color-2)',
-    gutterBorder: 'transparent',
-    lineHighlight: '#EFEFEF',
-    fontFamily: 'var(--theme-font-code)',
-  },
-  styles: [
-    { tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
-    { tag: [t.comment, t.bracket], color: '#6a737d' },
-    { tag: [t.className, t.propertyName], color: '#6f42c1' },
-    {
-      tag: [t.variableName, t.attributeName, t.number, t.operator],
-      color: '#005cc5',
-    },
-    {
-      tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
-      color: '#d73a49',
-    },
-    { tag: [t.string, t.meta, t.regexp], color: '#032f62' },
-    { tag: [t.name, t.quote], color: '#22863a' },
-    { tag: [t.heading], color: '#24292e', fontWeight: 'bold' },
-    { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
-    { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
-    { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
-    { tag: t.link, textDecoration: 'underline' },
-    { tag: t.strikethrough, textDecoration: 'line-through' },
-    { tag: t.invalid, color: '#cb2431' },
-  ],
-})
-
-export const darkTheme = createTheme({
-  theme: 'dark',
-  settings: {
-    background: 'var(--theme-background-2)',
-    foreground: 'var(--theme-color-1)',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: 'var(--theme-background-2)',
-    gutterForeground: 'var(--theme-color-2)',
-    lineHighlight: '#36334280',
-    fontFamily: 'var(--theme-font-code)',
-  },
-  styles: [
-    { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
-    { tag: [t.comment, t.bracket], color: '#8b949e' },
-    { tag: [t.className, t.propertyName], color: '#d2a8ff' },
-    {
-      tag: [t.variableName, t.attributeName, t.number, t.operator],
-      color: '#79c0ff',
-    },
-    {
-      tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
-      color: '#ff7b72',
-    },
-    { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
-    { tag: [t.name, t.quote], color: '#7ee787' },
-    { tag: [t.heading], color: '#d2a8ff', fontWeight: 'bold' },
-    { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
-    { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
-    { tag: t.link, textDecoration: 'underline' },
-    { tag: t.strikethrough, textDecoration: 'line-through' },
-    { tag: t.invalid, color: '#f97583' },
-  ],
-})