working on linting

Author: zamoore

packages/components/package.json

@@ -335,6 +335,7 @@
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",
       "./modifiers/hds-code-editor.js": "./dist/_app_/modifiers/hds-code-editor.js",
       "./modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js": "./dist/_app_/modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js",
+      "./modifiers/hds-code-editor/languages/rego.js": "./dist/_app_/modifiers/hds-code-editor/languages/rego.js",
       "./modifiers/hds-code-editor/languages/sentinel.js": "./dist/_app_/modifiers/hds-code-editor/languages/sentinel.js",
       "./modifiers/hds-code-editor/palettes/hds-dark-palette.js": "./dist/_app_/modifiers/hds-code-editor/palettes/hds-dark-palette.js",
       "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",

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

@@ -8,6 +8,7 @@ import { assert, warn } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
 import { task } from 'ember-concurrency';
 import config from 'ember-get-config';
+import { linter } from '@codemirror/lint';
 
 // hds-dark theme
 import hdsDarkTheme from './hds-code-editor/themes/hds-dark-theme.ts';
@@ -274,21 +275,18 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       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 [];
+            return [
+              { from: 0, to: 0, severity: 'error', message: 'Test error' },
+            ];
           },
           { delay: 0 }
         );
       }
 
-      console.log(lintingExtension);
+      console.log({ lintingExtension });
 
       const languageExtension = await this._loadLanguageTask.perform(language);
 
@@ -311,13 +309,13 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       );
 
       let extensions = [
-        bracketMatching(),
-        highlightActiveLine(),
-        highlightActiveLineGutter(),
-        highlightSpecialChars(),
-        history(),
-        lineNumbers(),
-        keymap.of([...defaultKeymap, ...historyKeymap]),
+        // bracketMatching(),
+        // highlightActiveLine(),
+        // highlightActiveLineGutter(),
+        // highlightSpecialChars(),
+        // history(),
+        // lineNumbers(),
+        // keymap.of([...defaultKeymap, ...historyKeymap]),
         // custom extensions
         handleUpdateExtension,
         // hds dark theme
@@ -326,7 +324,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       ];
 
       if (languageExtension !== undefined) {
-        extensions = [languageExtension, ...extensions];
+        extensions = [...extensions, languageExtension];
       }
 
       if (lintingExtension !== undefined) {

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

@@ -15,6 +15,7 @@ ut labore et dolore magna aliqua`;
     {
       value: 'rego',
       label: 'Rego',
+      isLintingEnabled: true,
       code: `package example.test
 import data.users
 
@@ -34,6 +35,7 @@ deny { base64.decode(input.encoded) == "decoded" }
     {
       value: 'ruby',
       label: 'Ruby',
+      isLintingEnabled: true,
       code: `require 'date'
 
 file_name = 'example_file.txt'
@@ -49,6 +51,7 @@ end`,
     {
       value: 'shell',
       label: 'Shell',
+      isLintingEnabled: true,
       code: `DIR="example_directory"
 LOG_FILE="script.log"
 
@@ -62,6 +65,7 @@ fi`,
     {
       value: 'go',
       label: 'Go',
+      isLintingEnabled: true,
       code: `package main
 
 import "fmt"
@@ -74,6 +78,7 @@ func main() {
     {
       value: 'hcl',
       label: 'HCL',
+      isLintingEnabled: true,
       code: `variable "region" {
   type    = string
   default = "us-west-1"
@@ -82,6 +87,7 @@ func main() {
     {
       value: 'javascript',
       label: 'JavaScript',
+      isLintingEnabled: true,
       code: `const message = 'Hello, world!';
 
 function sayMessage() {
@@ -104,6 +110,7 @@ sayMessage();
     {
       value: 'sentinel',
       label: 'Sentinel',
+      isLintingEnabled: true,
       code: `param allowed_regions = ["us-east-1", "us-west-2"]
 
 main = rule { all tfplan.resources[*].instances as r { r.attributes.region in allowed_regions } }
@@ -112,13 +119,15 @@ main = rule { all tfplan.resources[*].instances as r { r.attributes.region in al
     {
       value: 'sql',
       label: 'SQL',
+      isLintingEnabled: true,
       code: `SELECT 'Hello, world!';
 SELECT 'Welcome to SQL!';
 SELECT 'Enjoy coding!';`,
     },
     {
       value: 'yaml',
       label: 'YAML',
+      isLintingEnabled: true,
       code: `app_config:
   name: ExampleApp
   version: 1.0.0