nuxt-codemirror 0.0.2 → 0.0.3

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/github/your-org/my-module?file=playground%2Fapp.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.3",
   "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/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-codemirror",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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!");
-});