nuxt-codemirror 0.0.5 → 0.0.7

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-codemirror",
   "configKey": "nuxtCodemirror",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponent, addImports, addTypeTemplate, extendViteConfig } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -22,10 +22,11 @@ const module = defineNuxtModule({
       filename: "nuxt-codemirror.d.ts",
       src: resolve("./runtime/types/nuxt-codemirror.d.ts")
     });
-    _nuxt.hook("vite:extendConfig", (config) => {
+    extendViteConfig((config) => {
       config.resolve = config.resolve || {};
       config.resolve.alias = config.resolve.alias || {};
       config.resolve.alias["@codemirror/state"] = resolve(_nuxt.options.rootDir, "node_modules/@codemirror/state");
+      config.resolve.alias["@codemirror/view"] = resolve(_nuxt.options.rootDir, "node_modules/@codemirror/view");
     });
   }
 });

package/dist/runtime/components/NuxtCodeMirror.vue

@@ -3,7 +3,7 @@ import type { ViewUpdate, EditorView } from '@codemirror/view'
 import type { EditorState } from '@codemirror/state'
 import { useNuxtCodeMirror } from '../composables/useNuxtCodeMirror'
 import type { NuxtCodeMirrorProps, Statistics } from '../types/nuxt-codemirror'
-import { onMounted, ref, watch, nextTick, computed } from '#imports'
+import { onMounted, ref, watch, computed, onBeforeUnmount } from '#imports'
 
 const editor = ref<HTMLDivElement | null>(null)
 const container = ref<HTMLDivElement | null>(null)
@@ -31,9 +31,7 @@ const emit = defineEmits<{
   (event: 'onUpdate' | 'onFocus' | 'onBlur', update: ViewUpdate): void
 }>()
 
-onMounted(async () => {
-  await nextTick()
-
+onMounted(() => {
   useNuxtCodeMirror({
     ...props,
     modelValue: modelValue.value,
@@ -57,6 +55,13 @@ onMounted(async () => {
   // console.log('test: ', view.value)
 })
 
+onBeforeUnmount(() => {
+  if (view.value) {
+    view.value?.destroy()
+    view.value = undefined
+  }
+})
+
 watch(() => modelValue, (newValue) => {
   if (typeof newValue !== 'string') {
     console.error(`value must be typeof string but got ${typeof newValue}`)

package/dist/runtime/composables/useNuxtCodeMirror.js

@@ -2,7 +2,7 @@ import { Annotation, EditorState, StateEffect } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { getDefaultExtensions } from "../getDefaultExtensions.js";
 import { getStatistics } from "../utils/utils.js";
-import { onUnmounted, watch, watchEffect } from "#imports";
+import { watch, watchEffect } from "#imports";
 const External = Annotation.define();
 const emptyExtensions = [];
 export function useNuxtCodeMirror(props) {
@@ -146,10 +146,4 @@ export function useNuxtCodeMirror(props) {
     },
     { immediate: true }
   );
-  onUnmounted(() => {
-    if (viewRef) {
-      viewRef.value?.destroy();
-      viewRef.value = void 0;
-    }
-  });
 }

package/dist/runtime/types/nuxt-codemirror.d.ts

@@ -3,125 +3,126 @@ import type { EditorView, ViewUpdate } from '@codemirror/view'
 import type { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup'
 import type { Ref } from '#imports'
 
-declare module 'nuxt-codemirror' {
-  export interface NuxtCodeMirrorProps
-    extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
+export interface NuxtCodeMirrorProps
+  extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
   /** value of the auto created model in the editor. */
-    modelValue?: string
-    height?: string
-    minHeight?: string
-    maxHeight?: string
-    width?: string
-    minWidth?: string
-    maxWidth?: string
-    /** focus on the editor. */
-    autoFocus?: boolean
-    /** Enables a placeholder—a piece of example content to show when the editor is empty. */
-    placeholder?: string | HTMLElement
-    /**
-     * `light` / `dark` / `Extension` Defaults to `light`.
-     * @default light
-     */
-    theme?: 'light' | 'dark' | 'none' | Extension
-    /**
-     * Whether to optional basicSetup by default
-     * @default true
-     */
-    basicSetup?: boolean | BasicSetupOptions
-    /**
-     * This disables editing of the editor content by the user.
-     * @default true
-     */
-    editable?: boolean
-    /**
-     * This disables editing of the editor content by the user.
-     * @default false
-     */
-    readOnly?: boolean
-    /**
-     * Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`)
-     * or behaves according to the browser's default behavior (`false`).
-     * @default true
-     */
-    indentWithTab?: boolean
-    /** Fired whenever a change occurs to the document. */
-    onChange?(value: string, viewUpdate: ViewUpdate): void
-    /** Some data on the statistics editor. */
-    onStatistics?(data: Statistics): void
-    /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
-    onUpdate?(viewUpdate: ViewUpdate): void
-    /** The first time the editor executes the event. */
-    onCreateEditor?(view: EditorView, state: EditorState): void
-    /** Fired whenever the editor is focused. */
-    onFocus?(view: ViewUpdate): void
-    /** Fired whenever the editor is blurred. */
-    onBlur?(view: ViewUpdate): void
-    /**
-     * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.
-     * They can either be built-in extension-providing objects,
-     * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),
-     * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
-     */
-    extensions?: Extension[]
-    /**
-     * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.
-     * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
-     */
-    root?: ShadowRoot | Document
-    /**
-     * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function
-     */
-    initialState?: {
+  modelValue?: string
+  height?: string
+  minHeight?: string
+  maxHeight?: string
+  width?: string
+  minWidth?: string
+  maxWidth?: string
+  /** focus on the editor. */
+  autoFocus?: boolean
+  /** Enables a placeholder—a piece of example content to show when the editor is empty. */
+  placeholder?: string | HTMLElement
+  /**
+   * `light` / `dark` / `Extension` Defaults to `light`.
+   * @default light
+   */
+  theme?: 'light' | 'dark' | 'none' | Extension
+  /**
+   * Whether to optional basicSetup by default
+   * @default true
+   */
+  basicSetup?: boolean | BasicSetupOptions
+  /**
+   * This disables editing of the editor content by the user.
+   * @default true
+   */
+  editable?: boolean
+  /**
+   * This disables editing of the editor content by the user.
+   * @default false
+   */
+  readOnly?: boolean
+  /**
+   * Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`)
+   * or behaves according to the browser's default behavior (`false`).
+   * @default true
+   */
+  indentWithTab?: boolean
+  /** Fired whenever a change occurs to the document. */
+  onChange?(value: string, viewUpdate: ViewUpdate): void
+  /** Some data on the statistics editor. */
+  onStatistics?(data: Statistics): void
+  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
+  onUpdate?(viewUpdate: ViewUpdate): void
+  /** The first time the editor executes the event. */
+  onCreateEditor?(view: EditorView, state: EditorState): void
+  /** Fired whenever the editor is focused. */
+  onFocus?(view: ViewUpdate): void
+  /** Fired whenever the editor is blurred. */
+  onBlur?(view: ViewUpdate): void
+  /**
+   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.
+   * They can either be built-in extension-providing objects,
+   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),
+   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
+   */
+  extensions?: Extension[]
+  /**
+   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.
+   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
+   */
+  root?: ShadowRoot | Document
+  /**
+   * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function
+   */
+  initialState?: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      json: any
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      fields?: Record<string, StateField<any>>
-    }
+    json: any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fields?: Record<string, StateField<any>>
   }
+}
 
-  export interface UseCodeMirrorProps extends NuxtCodeMirrorProps {
-    container?: HTMLDivElement | null
-    viewRef: Ref<EditorView | undefined>
-    stateRef: Ref<EditorState | undefined>
-    containerRef: Ref<HTMLDivElement | null>
-  }
+export interface UseCodeMirrorProps extends NuxtCodeMirrorProps {
+  /** Container element of the CodeMirror instance */
+  container?: HTMLDivElement | null
+  viewRef: Ref<EditorView | undefined>
+  stateRef: Ref<EditorState | undefined>
+  containerRef: Ref<HTMLDivElement | null>
+}
 
-  export interface Statistics {
+export interface Statistics {
   /** total length of the document */
-    length: number
-    /** Get the number of lines in the editor. */
-    lineCount: number
-    /** Get the currently line description around the given position. */
-    line: Line
-    /** Get the proper [line-break](https://codemirror.net/docs/ref/#state.EditorState^lineSeparator) string for this state. */
-    lineBreak: string
-    /** Returns true when the editor is [configured](https://codemirror.net/6/docs/ref/#state.EditorState^readOnly) to be read-only. */
-    readOnly: boolean
-    /** The size (in columns) of a tab in the document, determined by the [`tabSize`](https://codemirror.net/6/docs/ref/#state.EditorState^tabSize) facet. */
-    tabSize: number
-    /** Cursor Position */
-    selection: EditorSelection
-    /** Make sure the selection only has one range. */
-    selectionAsSingle: SelectionRange
-    /** Retrieves a list of all current selections. */
-    ranges: readonly SelectionRange[]
-    /** Get the currently selected code. */
-    selectionCode: string
-    /**
-     * The length of the given array should be the same as the number of active selections.
-     * Replaces the content of the selections with the strings in the array.
-     */
-    selections: string[]
-    /** Return true if any text is selected. */
-    selectedText: boolean
-  }
-
-  export interface CodeMirrorRef {
-    container: HTMLDivElement | null
-    view: EditorView | undefined
-    state: EditorState | undefined
-    editor: HTMLDivElement | null
-  }
+  length: number
+  /** Get the number of lines in the editor. */
+  lineCount: number
+  /** Get the currently line description around the given position. */
+  line: Line
+  /** Get the proper [line-break](https://codemirror.net/docs/ref/#state.EditorState^lineSeparator) string for this state. */
+  lineBreak: string
+  /** Returns true when the editor is [configured](https://codemirror.net/6/docs/ref/#state.EditorState^readOnly) to be read-only. */
+  readOnly: boolean
+  /** The size (in columns) of a tab in the document, determined by the [`tabSize`](https://codemirror.net/6/docs/ref/#state.EditorState^tabSize) facet. */
+  tabSize: number
+  /** Cursor Position */
+  selection: EditorSelection
+  /** Make sure the selection only has one range. */
+  selectionAsSingle: SelectionRange
+  /** Retrieves a list of all current selections. */
+  ranges: readonly SelectionRange[]
+  /** Get the currently selected code. */
+  selectionCode: string
+  /**
+   * The length of the given array should be the same as the number of active selections.
+   * Replaces the content of the selections with the strings in the array.
+   */
+  selections: string[]
+  /** Return true if any text is selected. */
+  selectedText: boolean
 }
 
-export type { Statistics, CodeMirrorRef, UseCodeMirrorProps, NuxtCodeMirrorProps } from 'nuxt-codemirror'
+export interface CodeMirrorRef {
+  /** Container element of the CodeMirror instance */
+  container: HTMLDivElement | null
+  /** The EditorView of the CodeMirror instance */
+  view: EditorView | undefined
+  /** The EditorState of the CodeMirror instance */
+  state: EditorState | undefined
+  /** Editor element of the CodeMirror instance */
+  editor: HTMLDivElement | null
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-codemirror",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Nuxt codemirror module",
   "repository": "https://github.com/ThimoDEV/nuxt-codemirror",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "@codemirror/commands": "^6.6.0",
     "@codemirror/state": "6.4.1",
     "@codemirror/theme-one-dark": "^6.1.1",
-    "@codemirror/view": "6.28.1",
+    "@codemirror/view": "6.29.1",
     "@nuxt/kit": "^3.12.4",
     "@uiw/codemirror-extensions-basic-setup": "^4.23.0"
   },