nuxt-codemirror 0.0.2 → 0.0.4

package/README.md

@@ -1,85 +1,93 @@
-
-
-# Nuxt-CodeMirror
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-My new Nuxt module for doing amazing things.
-
-- [✨  Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
-## Features
-
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
-
-## Quick Setup
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add my-module
-```
-
-That's it! You can now use My Module in your Nuxt app ✨
-
-
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-
-  ```bash
-  # Install dependencies
-  npm install
-
-  # Generate type stubs
-  npm run dev:prepare
-
-  # Develop with the playground
-  npm run dev
-
-  # Build the playground
-  npm run dev:build
-
-  # Run ESLint
-  npm run lint
-
-  # Run Vitest
-  npm run test
-  npm run test:watch
-
-  # Release new version
-  npm run release
-  ```
-
-</details>
-
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/my-module
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
-
-
-
-## TO write FAQ
-
-- I get extension duplicate error:  Fix Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
-
-shamefully hoist solves it for now with pnpm together with a resolutions config for codemirror state
+
+
+# Nuxt CodeMirror
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Codemirror as a Nuxt module. Demo preview: Coming soon
+
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+- [🏀 Online playground](https://stackblitz.com/edit/nuxt-starter-ev2hgm?file=app.vue)
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- 🚀 Easily configure codemirror to your own needs using almost every API
+- 🚠 Built with Typescript
+- 🌲 Custom useNuxtCodeMirror composable for creating your own editor
+- Built for CodeMirror 6 and above
+
+## Credits
+
+This Nuxt module wouldn't be possible without:
+
+- @uiw/react-codemirror: https://github.com/uiwjs/react-codemirror
+- @surmon-china/vue-codemirror: https://github.com/surmon-china/vue-codemirror
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add nuxt-codemirror
+```
+
+That's it! You can now use Nuxt-codemirror in your Nuxt app ✨
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+
+  ```bash
+  # Install dependencies
+  pnpm i
+
+  # Generate type stubs
+  pnpm dev:prepare
+
+  # Develop with the playground
+  pnpm dev
+
+  # Build the playground
+  pnpm dev:build
+
+  # Run ESLint
+  pnpm lint
+
+  # Run Vitest
+  pnpm test
+  pnpm test:watch
+
+  # Release new version
+  pnpm release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-codemirror/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/nuxt-codemirror
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-codemirror.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/nuxt-codemirror
+
+[license-src]: https://img.shields.io/npm/l/nuxt-codemirror.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nuxt-codemirror
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
+
+
+
+## FAQ
+
+- I get an extension duplicate error:  Fix Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
+
+For now write shamefully-hoist=true in your .npmrc file to solve this. We are working on a better solution

package/dist/module.json

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

package/dist/module.mjs

@@ -19,9 +19,14 @@ const module = defineNuxtModule({
       from: resolve("./runtime/composables/useNuxtCodeMirror.ts")
     });
     addTypeTemplate({
-      filename: "../runtime/types/nuxt-codemirror.d.ts",
+      filename: "nuxt-codemirror.d.ts",
       src: resolve("./runtime/types/nuxt-codemirror.d.ts")
     });
+    _nuxt.hook("vite:extendConfig", (config) => {
+      config.resolve = config.resolve || {};
+      config.resolve.alias = config.resolve.alias || {};
+      config.resolve.alias["@codemirror/state"] = resolve(_nuxt.options.rootDir, "node_modules/@codemirror/state");
+    });
   }
 });
 

package/dist/runtime/composables/useNuxtCodeMirror.d.ts

@@ -1,8 +1,2 @@
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
 import { type UseCodeMirrorProps } from '../types/nuxt-codemirror.js';
-export declare function useNuxtCodeMirror(props: UseCodeMirrorProps): {
-    containerRef: import("#imports").Ref<HTMLDivElement | null>;
-    viewRef: import("#imports").Ref<EditorView | undefined>;
-    stateRef: import("#imports").Ref<EditorState | undefined>;
-};
+export declare function useNuxtCodeMirror(props: UseCodeMirrorProps): void;

package/dist/runtime/composables/useNuxtCodeMirror.js

@@ -2,12 +2,12 @@ import { Annotation, EditorState, StateEffect } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { getDefaultExtensions } from "../getDefaultExtensions.js";
 import { getStatistics } from "../utils/utils.js";
-import { onBeforeUnmount, watch, watchEffect } from "#imports";
+import { onUnmounted, watch, watchEffect } from "#imports";
 const External = Annotation.define();
 const emptyExtensions = [];
 export function useNuxtCodeMirror(props) {
   const {
-    // modelValue = '',
+    modelValue: value = "",
     selection,
     onChange,
     onStatistics,
@@ -51,8 +51,8 @@ export function useNuxtCodeMirror(props) {
   const updateListener = EditorView.updateListener.of((viewUpdate) => {
     if (viewUpdate.docChanged && typeof onChange === "function" && !viewUpdate.transactions.some((tr) => tr.annotation(External))) {
       const doc = viewUpdate.state.doc;
-      const value = doc.toString();
-      onChange(value, viewUpdate);
+      const value2 = doc.toString();
+      onChange(value2, viewUpdate);
     }
     if (viewUpdate.focusChanged) {
       viewUpdate.view.hasFocus ? onFocus && onFocus(viewUpdate) : onBlur && onBlur(viewUpdate);
@@ -75,7 +75,7 @@ export function useNuxtCodeMirror(props) {
   watchEffect(() => {
     if (containerRef.value && !stateRef?.value) {
       const config = {
-        doc: props.modelValue,
+        doc: value,
         selection,
         extensions: getExtensions
       };
@@ -126,13 +126,13 @@ export function useNuxtCodeMirror(props) {
     { immediate: true }
   );
   watchEffect(() => {
-    if (props.modelValue === void 0) {
+    if (value === void 0) {
       return;
     }
     const currentValue = viewRef.value ? viewRef.value.state.doc.toString() : "";
-    if (viewRef.value && props.modelValue !== currentValue) {
+    if (viewRef.value && value !== currentValue) {
       viewRef.value.dispatch({
-        changes: { from: 0, to: currentValue.length, insert: props.modelValue || "" },
+        changes: { from: 0, to: currentValue.length, insert: value || "" },
         annotations: [External.of(true)]
       });
     }
@@ -146,15 +146,10 @@ export function useNuxtCodeMirror(props) {
     },
     { immediate: true }
   );
-  onBeforeUnmount(() => {
+  onUnmounted(() => {
     if (viewRef) {
       viewRef.value?.destroy();
       viewRef.value = void 0;
     }
   });
-  return {
-    containerRef,
-    viewRef,
-    stateRef
-  };
 }

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

@@ -3,121 +3,123 @@ import type { EditorView, ViewUpdate } from '@codemirror/view'
 import type { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup'
 import type { Ref } from '#imports'
 
-export interface NuxtCodeMirrorProps
-  extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
+declare module 'nuxt-codemirror' {
+  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?: 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
-}
+    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
+  export interface CodeMirrorRef {
+    container: HTMLDivElement | null
+    view: EditorView | undefined
+    state: EditorState | undefined
+    editor: HTMLDivElement | null
+  }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-codemirror",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Nuxt codemirror module",
-  "repository": "your-org/my-module",
+  "repository": "https://github.com/ThimoDEV/nuxt-codemirror",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/state": "6.4.1",
     "@codemirror/theme-one-dark": "^6.1.1",
     "@codemirror/view": "6.28.1",
@@ -51,4 +50,4 @@
     "vitest": "^2.0.3",
     "vue-tsc": "^2.0.26"
   }
-}
+}

package/dist/runtime/plugin.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugin.js

@@ -1,4 +0,0 @@
-import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((_nuxtApp) => {
-  console.log("Plugin injected by my-module!");
-});