@neocodemirror/svelte - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

./dist/index.js

@@ -14,3 +14,3 @@ import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 var codemirror = (node, options) => {
-  if (!options)
+  if (is_undefined(options))
     throw new Error("No options provided. At least `value` is required.");
@@ -34,4 +34,6 @@ let {
   const autocomplete_compartment = new Compartment();
+  const watcher = EditorView.updateListener.of((view_update) => on_change(view_update));
   async function make_extensions(options2) {
     return [
+      watcher,
       // User extensions matter the most, keep em on top
@@ -50,14 +52,10 @@ extensions_compartment.of(get_user_extensions(options2)),
   }
-  function handle_change(tr) {
+  function handle_change(view_update) {
     const new_value = view.state.doc.toString();
-    if (new_value === value)
-      return;
-    if (new_value !== value) {
+    if (!is_equal(new_value, value)) {
       value = new_value;
       node.dispatchEvent(new CustomEvent("codemirror:textChange", { detail: value }));
-      options.onTextChange?.(value);
     }
     instanceStore?.set({ value, view, extensions: internal_extensions });
-    node.dispatchEvent(new CustomEvent("codemirror:change", { detail: tr }));
-    options.onChange?.(tr);
+    node.dispatchEvent(new CustomEvent("codemirror:change", { detail: view_update }));
   }
@@ -78,9 +76,7 @@ const { kind: behaviorKind = "debounce", duration: behaviorDuration = 50 } = onChangeBehavior;
       state,
-      parent: node,
-      dispatch(tr) {
-        view.update([tr]);
-        on_change(tr);
-      }
+      parent: node
     });
     make_diagnostics(view, diagnostics);
+    if (!is_undefined(options.cursorPos))
+      view.focus();
     instanceStore?.set({
@@ -97,3 +93,3 @@ view,
       const transaction = {};
-      if (value !== new_options.value) {
+      if (!is_equal(value, new_options.value)) {
         value = new_options.value;
@@ -106,3 +102,3 @@ transaction.changes = {
       }
-      if (typeof new_options.cursorPos !== "undefined" && options.cursorPos !== new_options.cursorPos) {
+      if (!is_undefined(new_options.cursorPos) && !is_equal(options.cursorPos, new_options.cursorPos)) {
         transaction.selection = {
@@ -112,2 +108,3 @@ anchor: new_options.cursorPos ?? 0,
         };
+        view.focus();
       }
@@ -147,3 +144,3 @@ async function append_effect(compartment, options_list, factory) {
       const { kind: behaviorKind2 = "debounce", duration: behaviorDuration2 = 50 } = new_options.onChangeBehavior ?? { kind: "debounce", duration: 50 };
-      if (options.onChangeBehavior?.kind !== behaviorKind2 || options.onChangeBehavior.duration !== behaviorDuration2) {
+      if (!is_equal(options.onChangeBehavior?.kind, behaviorKind2) || !is_equal(options.onChangeBehavior?.duration, behaviorDuration2)) {
         on_change = behaviorKind2 === "debounce" ? debounce(handle_change, behaviorDuration2) : throttle(handle_change, behaviorDuration2);
@@ -160,3 +157,3 @@ }
   const { setup } = options;
-  if (!setup)
+  if (is_undefined(setup))
     return [];
@@ -172,3 +169,3 @@ if (setup === "basic")
 async function get_lang({ lang, langMap }) {
-  if (!lang)
+  if (is_undefined(lang))
     return [];
@@ -192,3 +189,3 @@ if (typeof lang === "string") {
 async function get_autocompletion({ autocomplete }) {
-  if (!autocomplete)
+  if (is_undefined(autocomplete))
     return [];
@@ -205,3 +202,3 @@ const { autocompletion } = await import('@codemirror/autocomplete');
 async function make_diagnostics(view, diagnostics) {
-  if (!diagnostics)
+  if (is_undefined(diagnostics))
     return;
@@ -212,2 +209,4 @@ const { setDiagnostics } = await import('@codemirror/lint');
 }
+var is_equal = (a, b) => a === b;
+var is_undefined = (a) => typeof a === "undefined";
 function debounce(func, threshold, execAsap = false) {
@@ -214,0 +213,0 @@ let timeout;

dist/index.d.ts

@@ -290,27 +290,2 @@ import * as _codemirror_autocomplete from '@codemirror/autocomplete';
     /**
-     * Triggers every time value of code editor is changed
-     *
-     * @default undefined
-     *
-     * @example
-     * ```svelte
-     * <div use:codemirror={{ onValueChange: (value) => console.log(value) }} />
-     * ```
-     */
-    onTextChange?: (value: string) => void;
-    /**
-     * Triggers on any change in editor state. This includes changes in value, cursor position, diagnostics, etc.
-     * The transaction object is exposed to the callback function.
-     *
-     * Note: If you are new to codemirror 6, this will trigger more than you probably think it will.
-     *
-     * @default undefined
-     *
-     * @example
-     * ```svelte
-     * <div use:codemirror={{ onChange: (transaction) => console.log(transaction.selection) }} />
-     * ```
-     */
-    onChange?: (e: Transaction) => void;
-    /**
      * Options to config the behavior of the onChange/onTextChange callback. You can specify a kind
@@ -317,0 +292,0 @@ * between throttle and debounce and a duration as a number of milliseconds. This prevent the callback from being called

dist/index.js

@@ -14,3 +14,3 @@ import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 var codemirror = (node, options) => {
-  if (!options)
+  if (is_undefined(options))
     throw new Error("No options provided. At least `value` is required.");
@@ -34,4 +34,6 @@ let {
   const autocomplete_compartment = new Compartment();
+  const watcher = EditorView.updateListener.of((view_update) => on_change(view_update));
   async function make_extensions(options2) {
     return [
+      watcher,
       // User extensions matter the most, keep em on top
@@ -50,14 +52,10 @@ extensions_compartment.of(get_user_extensions(options2)),
   }
-  function handle_change(tr) {
+  function handle_change(view_update) {
     const new_value = view.state.doc.toString();
-    if (new_value === value)
-      return;
-    if (new_value !== value) {
+    if (!is_equal(new_value, value)) {
       value = new_value;
       node.dispatchEvent(new CustomEvent("codemirror:textChange", { detail: value }));
-      options.onTextChange?.(value);
     }
     instanceStore?.set({ value, view, extensions: internal_extensions });
-    node.dispatchEvent(new CustomEvent("codemirror:change", { detail: tr }));
-    options.onChange?.(tr);
+    node.dispatchEvent(new CustomEvent("codemirror:change", { detail: view_update }));
   }
@@ -78,9 +76,7 @@ const { kind: behaviorKind = "debounce", duration: behaviorDuration = 50 } = onChangeBehavior;
       state,
-      parent: node,
-      dispatch(tr) {
-        view.update([tr]);
-        on_change(tr);
-      }
+      parent: node
     });
     make_diagnostics(view, diagnostics);
+    if (!is_undefined(options.cursorPos))
+      view.focus();
     instanceStore?.set({
@@ -97,3 +93,3 @@ view,
       const transaction = {};
-      if (value !== new_options.value) {
+      if (!is_equal(value, new_options.value)) {
         value = new_options.value;
@@ -106,3 +102,3 @@ transaction.changes = {
       }
-      if (typeof new_options.cursorPos !== "undefined" && options.cursorPos !== new_options.cursorPos) {
+      if (!is_undefined(new_options.cursorPos) && !is_equal(options.cursorPos, new_options.cursorPos)) {
         transaction.selection = {
@@ -112,2 +108,3 @@ anchor: new_options.cursorPos ?? 0,
         };
+        view.focus();
       }
@@ -147,3 +144,3 @@ async function append_effect(compartment, options_list, factory) {
       const { kind: behaviorKind2 = "debounce", duration: behaviorDuration2 = 50 } = new_options.onChangeBehavior ?? { kind: "debounce", duration: 50 };
-      if (options.onChangeBehavior?.kind !== behaviorKind2 || options.onChangeBehavior.duration !== behaviorDuration2) {
+      if (!is_equal(options.onChangeBehavior?.kind, behaviorKind2) || !is_equal(options.onChangeBehavior?.duration, behaviorDuration2)) {
         on_change = behaviorKind2 === "debounce" ? debounce(handle_change, behaviorDuration2) : throttle(handle_change, behaviorDuration2);
@@ -160,3 +157,3 @@ }
   const { setup } = options;
-  if (!setup)
+  if (is_undefined(setup))
     return [];
@@ -172,3 +169,3 @@ if (setup === "basic")
 async function get_lang({ lang, langMap }) {
-  if (!lang)
+  if (is_undefined(lang))
     return [];
@@ -192,3 +189,3 @@ if (typeof lang === "string") {
 async function get_autocompletion({ autocomplete }) {
-  if (!autocomplete)
+  if (is_undefined(autocomplete))
     return [];
@@ -205,3 +202,3 @@ const { autocompletion } = await import('@codemirror/autocomplete');
 async function make_diagnostics(view, diagnostics) {
-  if (!diagnostics)
+  if (is_undefined(diagnostics))
     return;
@@ -212,2 +209,4 @@ const { setDiagnostics } = await import('@codemirror/lint');
 }
+var is_equal = (a, b) => a === b;
+var is_undefined = (a) => typeof a === "undefined";
 function debounce(func, threshold, execAsap = false) {
@@ -214,0 +213,0 @@ let timeout;

package.json

 {
   "name": "@neocodemirror/svelte",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Svelte Action to add codemirro to your apps 😉",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

31819

decreased by-1.27%

Lines of code

846

decreased by-3.09%

No dependency changes