working on initial linting plugin

Author: zamoore

packages/components/package.json

@@ -43,6 +43,7 @@
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.10.3",
     "@codemirror/legacy-modes": "^6.4.2",
+    "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.36.2",
     "@ember/render-modifiers": "^2.1.0",

packages/components/src/components/hds/code-editor/index.hbs

@@ -56,6 +56,7 @@
       ariaLabel=@ariaLabel
       ariaLabelledBy=this.ariaLabelledBy
       value=@value
+      isLintingEnabled=@isLintingEnabled
       language=@language
       onBlur=@onBlur
       onInput=this.onInput

packages/components/src/modifiers/hds-code-editor.ts

@@ -19,6 +19,7 @@ import type {
   StreamLanguage as StreamLanguageType,
   StreamParser as StreamParserType,
 } from '@codemirror/language';
+import type { Diagnostic } from '@codemirror/lint';
 import type { Extension } from '@codemirror/state';
 import type { EditorView, ViewUpdate } from '@codemirror/view';
 import type Owner from '@ember/owner';
@@ -31,6 +32,7 @@ export interface HdsCodeEditorSignature {
       ariaDescribedBy?: string;
       ariaLabel?: string;
       ariaLabelledBy?: string;
+      isLintingEnabled?: boolean;
       language?: HdsCodeEditorLanguages;
       value?: string;
       onInput?: (newVal: string) => void;
@@ -249,80 +251,111 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
     }
   );
 
-  private _buildExtensionsTask = task({ drop: true }, async ({ language }) => {
-    const [
-      {
-        EditorView,
-        keymap,
-        lineNumbers,
-        highlightActiveLineGutter,
-        highlightSpecialChars,
-        highlightActiveLine,
-      },
-      { defaultKeymap, history, historyKeymap },
-      { bracketMatching, syntaxHighlighting },
-    ] = await Promise.all([
-      import('@codemirror/view'),
-      import('@codemirror/commands'),
-      import('@codemirror/language'),
-    ]);
-
-    const languageExtension = await this._loadLanguageTask.perform(language);
-
-    const handleUpdateExtension = EditorView.updateListener.of(
-      (update: ViewUpdate) => {
-        // toggle a class if the update has/does not have a selection
-        if (update.selectionSet) {
-          update.view.dom.classList.toggle(
-            'cm-hasSelection',
-            !update.state.selection.main.empty
-          );
-        }
+  private _buildExtensionsTask = task(
+    { drop: true },
+    async ({ isLintingEnabled, language }) => {
+      const [
+        {
+          EditorView,
+          keymap,
+          lineNumbers,
+          highlightActiveLineGutter,
+          highlightSpecialChars,
+          highlightActiveLine,
+        },
+        { defaultKeymap, history, historyKeymap },
+        { bracketMatching, syntaxHighlighting },
+      ] = await Promise.all([
+        import('@codemirror/view'),
+        import('@codemirror/commands'),
+        import('@codemirror/language'),
+      ]);
+
+      let lintingExtension: Extension | undefined;
+
+      if (isLintingEnabled) {
+        const [{ linter }, { syntaxTree }] = await Promise.all([
+          import('@codemirror/lint'),
+          import('@codemirror/language'),
+        ]);
+
+        lintingExtension = linter(
+          (view) => {
+            console.log('Test linter triggered', view.state.doc.toString());
+            return [];
+          },
+          { delay: 0 }
+        );
+      }
+
+      console.log(lintingExtension);
+
+      const languageExtension = await this._loadLanguageTask.perform(language);
+
+      const handleUpdateExtension = EditorView.updateListener.of(
+        (update: ViewUpdate) => {
+          // toggle a class if the update has/does not have a selection
+          if (update.selectionSet) {
+            update.view.dom.classList.toggle(
+              'cm-hasSelection',
+              !update.state.selection.main.empty
+            );
+          }
 
-        // call the onInput callback if the document has changed
-        if (!update.docChanged || this.onInput === undefined) {
-          return;
+          // call the onInput callback if the document has changed
+          if (!update.docChanged || this.onInput === undefined) {
+            return;
+          }
+          this.onInput(update.state.doc.toString());
         }
-        this.onInput(update.state.doc.toString());
+      );
+
+      let extensions = [
+        bracketMatching(),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        lineNumbers(),
+        keymap.of([...defaultKeymap, ...historyKeymap]),
+        // custom extensions
+        handleUpdateExtension,
+        // hds dark theme
+        hdsDarkTheme,
+        syntaxHighlighting(hdsDarkHighlightStyle),
+      ];
+
+      if (languageExtension !== undefined) {
+        extensions = [languageExtension, ...extensions];
       }
-    );
 
-    let extensions = [
-      bracketMatching(),
-      highlightActiveLine(),
-      highlightActiveLineGutter(),
-      highlightSpecialChars(),
-      history(),
-      lineNumbers(),
-      keymap.of([...defaultKeymap, ...historyKeymap]),
-      // custom extensions
-      handleUpdateExtension,
-      // hds dark theme
-      hdsDarkTheme,
-      syntaxHighlighting(hdsDarkHighlightStyle),
-    ];
-
-    if (languageExtension !== undefined) {
-      extensions = [languageExtension, ...extensions];
-    }
+      if (lintingExtension !== undefined) {
+        extensions = [...extensions, lintingExtension];
+      }
 
-    return extensions;
-  });
+      return extensions;
+    }
+  );
 
   private _createEditorTask = task(
     { drop: true },
     async (
       element: HTMLElement,
       {
+        isLintingEnabled,
         language,
         value,
-      }: Pick<HdsCodeEditorSignature['Args']['Named'], 'language' | 'value'>
+      }: Pick<
+        HdsCodeEditorSignature['Args']['Named'],
+        'isLintingEnabled' | 'language' | 'value'
+      >
     ) => {
       try {
         const { EditorState } = await import('@codemirror/state');
         const { EditorView } = await import('@codemirror/view');
 
         const extensions = await this._buildExtensionsTask.perform({
+          isLintingEnabled,
           language,
         });
 
@@ -359,6 +392,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         ariaDescribedBy,
         ariaLabel,
         ariaLabelledBy,
+        isLintingEnabled,
         language,
         value,
       } = named;
@@ -369,6 +403,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       this.element = element;
 
       const editor = await this._createEditorTask.perform(element, {
+        isLintingEnabled,
         language,
         value,
       });
@@ -389,6 +424,10 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         ariaLabelledBy,
       });
 
+      this.editor.dispatch({
+        changes: { from: 0, to: 0, insert: ' ' },
+      });
+
       onSetup?.(this.editor);
     }
   );

showcase/app/controllers/components/code-editor.js

@@ -94,6 +94,7 @@ sayMessage();
     {
       value: 'json',
       label: 'JSON',
+      isLintingEnabled: true,
       code: `{
   "message": "Hello, world!",
   "status": "success",

showcase/app/templates/components/code-editor.hbs

@@ -121,7 +121,12 @@
   <Shw::Flex @direction="column" as |SF|>
     {{#each this.languages as |lang|}}
       <SF.Item @label={{lang.label}}>
-        <Hds::CodeEditor @language={{lang.value}} @value={{lang.code}} as |CE|>
+        <Hds::CodeEditor
+          @language={{lang.value}}
+          @value={{lang.code}}
+          @isLintingEnabled={{lang.isLintingEnabled}}
+          as |CE|
+        >
           <CE.Title>{{lang.label}}</CE.Title>
         </Hds::CodeEditor>
       </SF.Item>

yarn.lock

@@ -2201,7 +2201,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/lint@npm:^6.0.0":
+"@codemirror/lint@npm:^6.0.0, @codemirror/lint@npm:^6.8.4":
   version: 6.8.4
   resolution: "@codemirror/lint@npm:6.8.4"
   dependencies:
@@ -2221,7 +2221,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.35.0, @codemirror/view@npm:^6.36.2":
+"@codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.36.2":
   version: 6.36.2
   resolution: "@codemirror/view@npm:6.36.2"
   dependencies:
@@ -2232,6 +2232,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@codemirror/view@npm:^6.35.0":
+  version: 6.36.3
+  resolution: "@codemirror/view@npm:6.36.3"
+  dependencies:
+    "@codemirror/state": "npm:^6.5.0"
+    style-mod: "npm:^4.1.0"
+    w3c-keyname: "npm:^2.2.4"
+  checksum: 10/a41b9af6c57c74cab2dc3e7a3e5a6d3912253514667878f7cacb5b889892e445e514e68200a7ac4d4c3eefc1a221ae5f7b5a85f211c3b7fdd6749475086e4dff
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -3956,6 +3967,7 @@ __metadata:
     "@codemirror/lang-yaml": "npm:^6.1.2"
     "@codemirror/language": "npm:^6.10.3"
     "@codemirror/legacy-modes": "npm:^6.4.2"
+    "@codemirror/lint": "npm:^6.8.4"
     "@codemirror/state": "npm:^6.5.0"
     "@codemirror/view": "npm:^6.36.2"
     "@ember/render-modifiers": "npm:^2.1.0"