@nethru/ui 2.1.13 → 2.1.15

package/base/Slider.js

@@ -8,8 +8,8 @@ const Slider = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const autoMarks = useMemo(() => {
-    let values = value || defaultValue;
-    if (values === undefined) return {};
+    let values = value ?? defaultValue;
+    if (values === undefined) return [];
     if (values instanceof Array === false) values = [values];
     return values.map(v => {
       return {

package/base/editor/Editor.js

@@ -11,6 +11,8 @@ import borderRadius from "../styles/borderRadius";
 import { blue, grey, red, yellow } from "../colors";
 import typography from "../styles/typography";
 import shadow from "../styles/shadow";
+import { linter } from "@codemirror/lint";
+import { Linter } from "eslint-linter-browserify";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Editor({
@@ -20,6 +22,7 @@ export default function Editor({
   helperText,
   basicSetup,
   keymap = [],
+  eslintRules,
   extensions = [],
   format = 'javascript',
   keyword,
@@ -30,6 +33,7 @@ export default function Editor({
   onScroll,
   onFocus,
   onBlur,
+  onEslintUpdate,
   style,
   ...props
 }) {
@@ -140,12 +144,36 @@ export default function Editor({
         });
     }
   }, [format]);
+  const eslintLinter = useMemo(() => {
+    return format === 'javascript' ? linter(view => {
+      const text = view.state.doc.toString();
+      const linter = new Linter();
+      const config = {
+        rules: {
+          "func-names": "off",
+          "no-unused-expressions": "off",
+          ...eslintRules
+        }
+      };
+      const hints = linter.verify(text, config).map(hint => ({
+        line: hint.line,
+        column: hint.column,
+        from: view.state.doc.line(hint.line).from + hint.column - 1,
+        to: view.state.doc.line(hint.line).from + hint.column - 1 + (linter.getSourceCode()?.length || 0),
+        severity: hint.severity === 2 ? "error" : "warning",
+        message: hint.message
+      }));
+      if (onEslintUpdate) onEslintUpdate(hints);
+      return hints;
+    }) : undefined;
+  }, [format, eslintRules, onEslintUpdate]);
   const keymapExtension = useMemo(() => {
     return [keyMapper.of(keymap), keyMapper.of(defaultKeymap)];
   }, [keymap]);
   const extensionList = useMemo(() => {
     const result = [EditorView.lineWrapping, highlight.extension, ...keymapExtension];
     if (languageExtension) result.push(languageExtension);
+    if (eslintLinter) result.push(eslintLinter);
     if (onScroll) {
       result.push(EditorView.domEventHandlers({
         scroll(event, view) {
@@ -156,7 +184,7 @@ export default function Editor({
     }
     result.push(...extensions);
     return result;
-  }, [languageExtension, highlight.extension, keymapExtension, extensions, onScroll]);
+  }, [languageExtension, eslintLinter, highlight.extension, keymapExtension, extensions, onScroll]);
   const handleUpdate = viewUpdate => {
     setFocused(viewUpdate.view.hasFocus);
     if (onUpdate) onUpdate(viewUpdate);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "main": "base/index.js",
   "files": [
     "/base"
@@ -8,6 +8,7 @@
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lint": "^6.8.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.0.8",
@@ -24,6 +25,10 @@
     "@uiw/react-codemirror": "^4.21.21",
     "dayjs": "^1.11.13",
     "days": "^1.1.1",
+    "eslint-browser": "^3.8.1",
+    "eslint-linter-browserify": "^9.17.0",
+    "eslint-utils": "^3.0.0",
+    "eslint4b": "^7.32.0",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",