@scalar/use-codemirror 0.11.4 → 0.11.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-codemirror
 
+## 0.11.5
+
+### Patch Changes
+
+- 6b32eee: feat: add json linter
+
 ## 0.11.4
 
 ### Patch Changes

package/dist/hooks/useCodeMirror.d.ts

@@ -19,6 +19,8 @@ type BaseParameters = {
     lineNumbers?: MaybeRefOrGetter<boolean | undefined>;
     withVariables?: MaybeRefOrGetter<boolean | undefined>;
     disableEnter?: MaybeRefOrGetter<boolean | undefined>;
+    /** Option to lint and show error in the editor */
+    lint?: MaybeRefOrGetter<boolean | undefined>;
     onBlur?: (v: string) => void;
     onFocus?: (v: string) => void;
 };

package/dist/hooks/useCodeMirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAKX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAMT,MAAM,KAAK,CAAA;AAGZ,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,KAAK,cAAc,GAAG;IACpB,yCAAyC;IACzC,aAAa,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAA;IAC1C,8BAA8B;IAC9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC1D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IAChD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAChD,gDAAgD;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACnD,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,cAAc,GAAG;IAChB,qEAAqE;IACrE,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAC,GACF,CAAC,cAAc,GAAG;IAChB,QAAQ,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,CAAA;AAsBN,sCAAsC;AACtC,eAAO,MAAM,aAAa,WAChB,uBAAuB,KAC9B;IACD,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;CA+HnC,CAAA"}
+{"version":3,"file":"useCodeMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeMirror.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EACL,UAAU,EAKX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,GAAG,EAMT,MAAM,KAAK,CAAA;AAGZ,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD,KAAK,cAAc,GAAG;IACpB,yCAAyC;IACzC,aAAa,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,mDAAmD;IACnD,UAAU,CAAC,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAA;IAC1C,8BAA8B;IAC9B,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,mDAAmD;IACnD,QAAQ,EAAE,gBAAgB,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAA;IAC1D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;IAChD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAChD,gDAAgD;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACnD,aAAa,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IACpD,kDAAkD;IAClD,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAC5C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,cAAc,GAAG;IAChB,qEAAqE;IACrE,OAAO,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAC,GACF,CAAC,cAAc,GAAG;IAChB,QAAQ,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,CAAC,CAAA;AAsBN,sCAAsC;AACtC,eAAO,MAAM,aAAa,WAChB,uBAAuB,KAC9B;IACD,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;CAgInC,CAAA"}

package/dist/hooks/useCodeMirror.js

@@ -1,82 +1,84 @@
-import { autocompletion as M, closeBrackets as k, completionKeymap as C, closeBracketsKeymap as S } from "@codemirror/autocomplete";
-import { indentWithTab as w } from "@codemirror/commands";
-import { css as H } from "@codemirror/lang-css";
-import { html as N } from "@codemirror/lang-html";
-import { json as T } from "@codemirror/lang-json";
-import { yaml as V } from "@codemirror/lang-yaml";
-import { syntaxHighlighting as K, defaultHighlightStyle as O, indentOnInput as R, bracketMatching as j } from "@codemirror/language";
-import { StateEffect as A } from "@codemirror/state";
-import { EditorView as c, highlightSpecialChars as B, keymap as a, lineNumbers as I } from "@codemirror/view";
-import { ref as L, watch as h, onBeforeUnmount as P, toValue as i, computed as U } from "vue";
-import { customTheme as W } from "../themes/index.js";
-import { variables as q } from "./variables.js";
-const u = (e) => "provider" in e && !!i(e.provider), z = {
+import { autocompletion as C, closeBrackets as w, completionKeymap as H, closeBracketsKeymap as N } from "@codemirror/autocomplete";
+import { indentWithTab as j } from "@codemirror/commands";
+import { css as O } from "@codemirror/lang-css";
+import { html as T } from "@codemirror/lang-html";
+import { json as V } from "@codemirror/lang-json";
+import { yaml as K } from "@codemirror/lang-yaml";
+import { syntaxHighlighting as L, defaultHighlightStyle as R, indentOnInput as A, bracketMatching as B } from "@codemirror/language";
+import { linter as I } from "@codemirror/lint";
+import { StateEffect as z } from "@codemirror/state";
+import { EditorView as d, highlightSpecialChars as J, keymap as v, lineNumbers as P } from "@codemirror/view";
+import { ref as U, watch as m, onBeforeUnmount as W, toValue as r, computed as q } from "vue";
+import { customTheme as D } from "../themes/index.js";
+import { variables as G } from "./variables.js";
+const u = (e) => "provider" in e && !!r(e.provider), Q = {
   key: "Mod-a",
   run: (e) => (e.dispatch({
     selection: { anchor: 0, head: e.state.doc.length },
     scrollIntoView: !1
   }), !0)
-}, oe = (e) => {
-  const o = L(null);
-  h(
+}, le = (e) => {
+  const o = U(null);
+  m(
     e.codeMirrorRef,
     () => {
       var t;
-      (t = o.value) == null || t.destroy(), l();
+      (t = o.value) == null || t.destroy(), s();
     },
     { immediate: !0 }
-  ), P(() => {
+  ), W(() => {
     var t;
     return (t = o.value) == null ? void 0 : t.destroy();
   });
-  function l() {
+  function s() {
     if (e.codeMirrorRef.value) {
-      const t = u(e) ? i(e.provider) : null, f = v({
-        ...s.value,
+      const t = u(e) ? r(e.provider) : null, h = b({
+        ...l.value,
         provider: t
       });
-      o.value = new c({
+      o.value = new d({
         parent: e.codeMirrorRef.value,
-        extensions: f
-      }), u(e) || r(i(e.content));
+        extensions: h
+      }), u(e) || n(r(e.content));
     }
   }
-  const s = U(() => ({
+  const l = q(() => ({
     onChange: e.onChange,
     onBlur: e.onBlur,
     onFocus: e.onFocus,
-    language: i(e.language),
-    classes: i(e.classes),
-    readOnly: i(e.readOnly),
-    lineNumbers: i(e.lineNumbers),
-    withVariables: i(e.withVariables),
-    disableEnter: i(e.withVariables),
-    withoutTheme: i(e.withoutTheme),
-    additionalExtensions: i(e.extensions)
+    language: r(e.language),
+    classes: r(e.classes),
+    readOnly: r(e.readOnly),
+    lineNumbers: r(e.lineNumbers),
+    withVariables: r(e.withVariables),
+    disableEnter: r(e.withVariables),
+    withoutTheme: r(e.withoutTheme),
+    lint: r(e.lint),
+    additionalExtensions: r(e.extensions)
   }));
-  h(
-    () => u(e) ? i(e.provider) : null,
+  m(
+    () => u(e) ? r(e.provider) : null,
     () => {
       var t;
-      u(e) && ((t = o.value) == null || t.destroy(), l());
+      u(e) && ((t = o.value) == null || t.destroy(), s());
     }
-  ), h(
-    s,
+  ), m(
+    l,
     () => {
       if (o.value) {
-        const t = u(e) ? i(e.provider) : null, f = v({
-          ...s.value,
+        const t = u(e) ? r(e.provider) : null, h = b({
+          ...l.value,
           provider: t
         });
         o.value.dispatch({
-          effects: A.reconfigure.of(f)
+          effects: z.reconfigure.of(h)
         });
       } else
         return;
     },
     { immediate: !0 }
   );
-  const r = (t = "") => {
+  const n = (t = "") => {
     o.value && o.value.state.doc.toString() !== t && o.value.dispatch({
       changes: {
         from: 0,
@@ -91,78 +93,107 @@ const u = (e) => "provider" in e && !!i(e.provider), z = {
       }
     });
   };
-  return h(
-    () => i(e.content),
+  return m(
+    () => r(e.content),
     () => {
-      u(e) || r(i(e.content));
+      u(e) || n(r(e.content));
     },
     { immediate: !0 }
   ), {
     /** Replaces the current content with the given value. */
-    setCodeMirrorContent: r,
+    setCodeMirrorContent: n,
     /** Codemirror instance */
     codeMirror: o
   };
-}, g = {
-  html: N,
-  json: T,
-  yaml: V,
-  css: H
+}, p = {
+  html: T,
+  json: V,
+  yaml: K,
+  css: O
 };
-function v({
+function b({
   onChange: e,
   onBlur: o,
-  onFocus: l,
-  provider: s,
-  language: r,
+  onFocus: s,
+  provider: l,
+  language: n,
   classes: t = [],
-  readOnly: f = !1,
-  lineNumbers: p = !1,
-  withVariables: y = !1,
-  disableEnter: b = !1,
-  withoutTheme: x = !1,
-  additionalExtensions: E = []
+  readOnly: h = !1,
+  lineNumbers: y = !1,
+  withVariables: x = !1,
+  disableEnter: E = !1,
+  withoutTheme: M = !1,
+  lint: S = !1,
+  additionalExtensions: k = []
 }) {
-  const n = [
-    B(),
-    K(O, { fallback: !0 }),
-    c.theme({
+  const i = [
+    J(),
+    L(R, { fallback: !0 }),
+    d.theme({
       ".cm-line": {
         lineHeight: "20px"
       },
       ".cm-gutterElement": {
         lineHeight: "20px"
+      },
+      ".cm-tooltip": {
+        border: "1px solid #f5c6cb",
+        fontSize: "12px"
+      },
+      ".cm-tooltip-lint": {
+        backgroundColor: "#ffffff"
+      },
+      ".cm-diagnostic-error": {
+        borderLeft: "0",
+        color: "#dc1b19"
       }
     }),
     // Listen to updates
-    c.updateListener.of((d) => {
-      d.docChanged && (e == null || e(d.state.doc.toString()));
+    d.updateListener.of((c) => {
+      c.docChanged && (e == null || e(c.state.doc.toString()));
     }),
-    c.domEventHandlers({
-      blur: (d, m) => {
-        o == null || o(m.state.doc.toString());
+    d.domEventHandlers({
+      blur: (c, f) => {
+        o == null || o(f.state.doc.toString());
       },
-      focus: (d, m) => {
-        l == null || l(m.state.doc.toString());
+      focus: (c, f) => {
+        s == null || s(f.state.doc.toString());
       }
     }),
     // Add Classes
-    c.editorAttributes.of({ class: t.join(" ") }),
-    ...E
+    d.editorAttributes.of({ class: t.join(" ") }),
+    ...k
   ];
-  return s && n.push(s), x || n.push(W), f ? n.push(c.editable.of(!1)) : n.push(
-    R(),
-    j(),
-    M(),
-    k(),
-    a.of([
-      ...C,
-      ...S,
-      w,
-      z
+  if (l && i.push(l), M || i.push(D), h ? i.push(d.editable.of(!1)) : i.push(
+    A(),
+    B(),
+    C(),
+    w(),
+    v.of([
+      ...H,
+      ...N,
+      j,
+      Q
     ])
-  ), r && g[r] && n.push(g[r]()), p && n.push(I()), y && n.push(q()), b && n.push(
-    a.of([
+  ), n && p[n] && i.push(p[n]()), S && n === "json") {
+    const c = I((f) => {
+      const a = [];
+      try {
+        JSON.parse(f.state.doc.toString());
+      } catch (g) {
+        g instanceof Error && a.push({
+          from: 0,
+          to: f.state.doc.length,
+          severity: "error",
+          message: g.message
+        });
+      }
+      return a;
+    });
+    i.push(c);
+  }
+  return y && i.push(P()), x && i.push(G()), E && i.push(
+    v.of([
       {
         key: "Enter",
         run: () => !0
@@ -177,8 +208,8 @@ function v({
         run: () => !0
       }
     ])
-  ), n;
+  ), i;
 }
 export {
-  oe as useCodeMirror
+  le as useCodeMirror
 };

package/package.json

@@ -16,7 +16,7 @@
     "vue",
     "vue3"
   ],
-  "version": "0.11.4",
+  "version": "0.11.5",
   "engines": {
     "node": ">=18"
   },
@@ -31,8 +31,8 @@
   ],
   "module": "dist/index.js",
   "optionalDependencies": {
-    "yjs": "^13.6.0",
-    "y-codemirror.next": "^0.3.2"
+    "y-codemirror.next": "^0.3.2",
+    "yjs": "^13.6.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.12.0",
@@ -42,6 +42,7 @@
     "@codemirror/lang-json": "^6.0.0",
     "@codemirror/lang-yaml": "^6.0.0",
     "@codemirror/language": "^6.10.1",
+    "@codemirror/lint": "^6.8.1",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.1",
     "@lezer/common": "^1.2.1",
@@ -62,7 +63,7 @@
     "vue-tsc": "^2.0.13",
     "y-codemirror.next": "^0.3.2",
     "yjs": "^13.6.0",
-    "@scalar/build-tooling": "0.1.7"
+    "@scalar/build-tooling": "0.1.9"
   },
   "scripts": {
     "build": "vite build && pnpm types:build && tsc-alias -p tsconfig.build.json",