@nethru/ui 2.1.14 → 2.1.16

package/base/Slider.js

@@ -18,7 +18,6 @@ const Slider = /*#__PURE__*/forwardRef(({
       };
     });
   }, [value, defaultValue]);
-  console.log(value, autoMarks);
   return /*#__PURE__*/_jsx(MuiSlider, {
     ref: ref,
     value: value,

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,8 @@ export default function Editor({
   helperText,
   basicSetup,
   keymap = [],
+  eslintRules,
+  customVariables = [],
   extensions = [],
   format = 'javascript',
   keyword,
@@ -30,6 +34,7 @@ export default function Editor({
   onScroll,
   onFocus,
   onBlur,
+  onEslintUpdate,
   style,
   ...props
 }) {
@@ -140,12 +145,56 @@ export default function Editor({
         });
     }
   }, [format]);
+  const eslintLinter = useMemo(() => {
+    const regex = /\{\{(\S+)\}\}/g;
+    return format === 'javascript' ? linter(view => {
+      const text = view.state.doc.toString();
+      const linter = new Linter();
+      let replaced = text;
+      let hints = [];
+      const config = {
+        rules: {
+          "func-names": "off",
+          "no-unused-expressions": "off",
+          ...eslintRules
+        }
+      };
+      if (customVariables.length > 0) {
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+          if (!customVariables.includes(match[1])) {
+            hints.push({
+              from: match.index + 2,
+              to: match.index + 2,
+              severity: 'error',
+              message: `${match[1]}는 정의된 변수가 아닙니다.`
+            });
+            break;
+          }
+        }
+        replaced = text.replace(regex, () => `''`);
+      }
+      if (hints.length === 0) {
+        hints = linter.verify(replaced, 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, customVariables]);
   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 +205,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.14",
+  "version": "2.1.16",
   "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": "^8.20.0",
+    "eslint-utils": "^3.0.0",
+    "eslint4b": "^7.32.0",
     "immer": "^10.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",