Merge branch '23352-editorconfig' into 'master'

Support EditorConfig inside of the Web IDE

See merge request gitlab-org/gitlab!32378

app/assets/javascripts/ide/components/repo_editor.vue

@@ -15,6 +15,8 @@ import FileTemplatesBar from './file_templates/bar.vue';
 import { __ } from '~/locale';
 import { extractMarkdownImagesFromEntries } from '../stores/utils';
 import { getPathParent, readFileAsDataURL } from '../utils';
+import { getRulesWithTraversal } from '../lib/editorconfig/parser';
+import mapRulesToMonaco from '../lib/editorconfig/rules_mapper';
 
 export default {
   components: {
@@ -32,6 +34,7 @@ export default {
     return {
       content: '',
       images: {},
+      rules: {},
     };
   },
   computed: {
@@ -195,7 +198,7 @@ export default {
 
       this.editor.clearEditor();
 
-      this.fetchFileData()
+      Promise.all([this.fetchFileData(), this.fetchEditorconfigRules()])
         .then(() => {
           this.createEditorInstance();
         })
@@ -254,6 +257,8 @@ export default {
         this.editor.attachModel(this.model);
       }
 
+      this.model.updateOptions(this.rules);
+
       this.model.onChange(model => {
         const { file } = model;
         if (!file.active) return;
@@ -280,12 +285,29 @@ export default {
       this.setFileLanguage({
         fileLanguage: this.model.language,
       });
+
+      this.$emit('editorSetup');
     },
     refreshEditorDimensions() {
       if (this.showEditor) {
         this.editor.updateDimensions();
       }
     },
+    fetchEditorconfigRules() {
+      return getRulesWithTraversal(this.file.path, path => {
+        const entry = this.entries[path];
+        if (!entry) return Promise.resolve(null);
+
+        const content = entry.content || entry.raw;
+        if (content) return Promise.resolve(content);
+
+        return this.getFileData({ path: entry.path, makeFileActive: false }).then(() =>
+          this.getRawFileData({ path: entry.path }),
+        );
+      }).then(rules => {
+        this.rules = mapRulesToMonaco(rules);
+      });
+    },
     onPaste(event) {
       const editor = this.editor.instance;
       const reImage = /^image\/(png|jpg|jpeg|gif)$/;

app/assets/javascripts/ide/lib/editorconfig/parser.js

+import { parseString } from 'editorconfig/src/lib/ini';
+import minimatch from 'minimatch';
+import { getPathParents } from '../../utils';
+
+const dirname = path => path.replace(/\.editorconfig$/, '');
+
+function isRootConfig(config) {
+  return config.some(([pattern, rules]) => !pattern && rules?.root === 'true');
+}
+
+function getRulesForSection(path, [pattern, rules]) {
+  if (!pattern) {
+    return {};
+  }
+  if (minimatch(path, pattern, { matchBase: true })) {
+    return rules;
+  }
+
+  return {};
+}
+
+function getRulesWithConfigs(filePath, configFiles = [], rules = {}) {
+  if (!configFiles.length) return rules;
+
+  const [{ content, path: configPath }, ...nextConfigs] = configFiles;
+  const configDir = dirname(configPath);
+
+  if (!filePath.startsWith(configDir)) return rules;
+
+  const parsed = parseString(content);
+  const isRoot = isRootConfig(parsed);
+  const relativeFilePath = filePath.slice(configDir.length);
+
+  const sectionRules = parsed.reduce(
+    (acc, section) => Object.assign(acc, getRulesForSection(relativeFilePath, section)),
+    {},
+  );
+
+  // prefer existing rules by overwriting to section rules
+  const result = Object.assign(sectionRules, rules);
+
+  return isRoot ? result : getRulesWithConfigs(filePath, nextConfigs, result);
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function getRulesWithTraversal(filePath, getFileContent) {
+  const editorconfigPaths = [
+    ...getPathParents(filePath).map(x => `${x}/.editorconfig`),
+    '.editorconfig',
+  ];
+
+  return Promise.all(
+    editorconfigPaths.map(path => getFileContent(path).then(content => ({ path, content }))),
+  ).then(results => getRulesWithConfigs(filePath, results.filter(x => x.content)));
+}

app/assets/javascripts/ide/lib/editorconfig/rules_mapper.js

+import { isBoolean, isNumber } from 'lodash';
+
+const map = (key, validValues) => value =>
+  value in validValues ? { [key]: validValues[value] } : {};
+
+const bool = key => value => (isBoolean(value) ? { [key]: value } : {});
+
+const int = (key, isValid) => value =>
+  isNumber(value) && isValid(value) ? { [key]: Math.trunc(value) } : {};
+
+const rulesMapper = {
+  indent_style: map('insertSpaces', { tab: false, space: true }),
+  indent_size: int('tabSize', n => n > 0),
+  tab_width: int('tabSize', n => n > 0),
+  trim_trailing_whitespace: bool('trimTrailingWhitespace'),
+  end_of_line: map('endOfLine', { crlf: 1, lf: 0 }),
+  insert_final_newline: bool('insertFinalNewline'),
+};
+
+const parseValue = x => {
+  let value = typeof x === 'string' ? x.toLowerCase() : x;
+  if (/^[0-9.-]+$/.test(value)) value = Number(value);
+  if (value === 'true') value = true;
+  if (value === 'false') value = false;
+
+  return value;
+};
+
+export default function mapRulesToMonaco(rules) {
+  return Object.entries(rules).reduce((obj, [key, value]) => {
+    return Object.assign(obj, rulesMapper[key]?.(parseValue(value)) || {});
+  }, {});
+}

app/assets/javascripts/ide/stores/index.js

@@ -15,22 +15,23 @@ import routerModule from './modules/router';
 
 Vue.use(Vuex);
 
-export const createStore = () =>
-  new Vuex.Store({
-    state: state(),
-    actions,
-    mutations,
-    getters,
-    modules: {
-      commit: commitModule,
-      pipelines,
-      mergeRequests,
-      branches,
-      fileTemplates: fileTemplates(),
-      rightPane: paneModule(),
-      clientside: clientsideModule(),
-      router: routerModule,
-    },
-  });
+export const createStoreOptions = () => ({
+  state: state(),
+  actions,
+  mutations,
+  getters,
+  modules: {
+    commit: commitModule,
+    pipelines,
+    mergeRequests,
+    branches,
+    fileTemplates: fileTemplates(),
+    rightPane: paneModule(),
+    clientside: clientsideModule(),
+    router: routerModule,
+  },
+});
+
+export const createStore = () => new Vuex.Store(createStoreOptions());
 
 export default createStore();

changelogs/unreleased/23352-editorconfig.yml

+---
+title: Support reading .editorconfig files inside of the Web IDE
+merge_request: 32378
+author:
+type: added

package.json

@@ -79,6 +79,7 @@
     "diff": "^3.4.0",
     "document-register-element": "1.14.3",
     "dropzone": "^4.2.0",
+    "editorconfig": "^0.15.3",
     "emoji-regex": "^7.0.3",
     "emoji-unicode-version": "^0.2.1",
     "exports-loader": "^0.7.0",
@@ -103,6 +104,7 @@
     "marked": "^0.3.12",
     "mermaid": "^8.5.1",
     "mersenne-twister": "1.1.0",
+    "minimatch": "^3.0.4",
     "mitt": "^1.2.0",
     "monaco-editor": "^0.18.1",
     "monaco-editor-webpack-plugin": "^1.7.0",

spec/frontend/__mocks__/monaco-editor/index.js

@@ -9,5 +9,8 @@ import 'monaco-editor/esm/vs/language/json/monaco.contribution';
 import 'monaco-editor/esm/vs/language/html/monaco.contribution';
 import 'monaco-editor/esm/vs/basic-languages/monaco.contribution';
 
+// This language starts trying to spin up web workers which obviously breaks in Jest environment
+jest.mock('monaco-editor/esm/vs/language/typescript/tsMode');
+
 export * from 'monaco-editor/esm/vs/editor/editor.api';
 export default global.monaco;

spec/frontend/ide/lib/editorconfig/mock_data.js

+export const exampleConfigs = [
+  {
+    path: 'foo/bar/baz/.editorconfig',
+    content: `
+[*]
+tab_width = 6
+indent_style = tab
+`,
+  },
+  {
+    path: 'foo/bar/.editorconfig',
+    content: `
+root = false
+
+[*]
+indent_size = 5
+indent_style = space
+trim_trailing_whitespace = true
+
+[*_spec.{js,py}]
+end_of_line = crlf
+    `,
+  },
+  {
+    path: 'foo/.editorconfig',
+    content: `
+[*]
+tab_width = 4
+indent_style = tab
+    `,
+  },
+  {
+    path: '.editorconfig',
+    content: `
+root = true
+
+[*]
+indent_size = 3
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+
+[*.js]
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+
+[*.txt]
+end_of_line = crlf
+    `,
+  },
+  {
+    path: 'foo/bar/root/.editorconfig',
+    content: `
+root = true
+
+[*]
+tab_width = 1
+indent_style = tab
+    `,
+  },
+];
+
+export const exampleFiles = [
+  {
+    path: 'foo/bar/root/README.md',
+    rules: {
+      indent_style: 'tab', // foo/bar/root/.editorconfig
+      tab_width: '1', // foo/bar/root/.editorconfig
+    },
+    monacoRules: {
+      insertSpaces: false,
+      tabSize: 1,
+    },
+  },
+  {
+    path: 'foo/bar/baz/my_spec.js',
+    rules: {
+      end_of_line: 'crlf', // foo/bar/.editorconfig (for _spec.js files)
+      indent_size: '5', // foo/bar/.editorconfig
+      indent_style: 'tab', // foo/bar/baz/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '6', // foo/bar/baz/.editorconfig
+      trim_trailing_whitespace: 'true', // .editorconfig (for .js files)
+    },
+    monacoRules: {
+      endOfLine: 1,
+      insertFinalNewline: true,
+      insertSpaces: false,
+      tabSize: 6,
+      trimTrailingWhitespace: true,
+    },
+  },
+  {
+    path: 'foo/my_file.js',
+    rules: {
+      end_of_line: 'lf', // .editorconfig
+      indent_size: '2', // .editorconfig (for .js files)
+      indent_style: 'tab', // foo/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '4', // foo/.editorconfig
+      trim_trailing_whitespace: 'true', // .editorconfig (for .js files)
+    },
+    monacoRules: {
+      endOfLine: 0,
+      insertFinalNewline: true,
+      insertSpaces: false,
+      tabSize: 4,
+      trimTrailingWhitespace: true,
+    },
+  },
+  {
+    path: 'foo/my_file.md',
+    rules: {
+      end_of_line: 'lf', // .editorconfig
+      indent_size: '3', // .editorconfig
+      indent_style: 'tab', // foo/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '4', // foo/.editorconfig
+    },
+    monacoRules: {
+      endOfLine: 0,
+      insertFinalNewline: true,
+      insertSpaces: false,
+      tabSize: 4,
+    },
+  },
+  {
+    path: 'foo/bar/my_file.txt',
+    rules: {
+      end_of_line: 'crlf', // .editorconfig (for .txt files)
+      indent_size: '5', // foo/bar/.editorconfig
+      indent_style: 'space', // foo/bar/.editorconfig
+      insert_final_newline: 'true', // .editorconfig
+      tab_width: '4', // foo/.editorconfig
+      trim_trailing_whitespace: 'true', // foo/bar/.editorconfig
+    },
+    monacoRules: {
+      endOfLine: 1,
+      insertFinalNewline: true,
+      insertSpaces: true,
+      tabSize: 4,
+      trimTrailingWhitespace: true,
+    },
+  },
+];

spec/frontend/ide/lib/editorconfig/parser_spec.js

+import { getRulesWithTraversal } from '~/ide/lib/editorconfig/parser';
+import { exampleConfigs, exampleFiles } from './mock_data';
+
+describe('~/ide/lib/editorconfig/parser', () => {
+  const getExampleConfigContent = path =>
+    Promise.resolve(exampleConfigs.find(x => x.path === path)?.content);
+
+  describe('getRulesWithTraversal', () => {
+    it.each(exampleFiles)(
+      'traverses through all editorconfig files in parent directories (until root=true is hit) and finds rules for this file (case %#)',
+      ({ path, rules }) => {
+        return getRulesWithTraversal(path, getExampleConfigContent).then(result => {
+          expect(result).toEqual(rules);
+        });
+      },
+    );
+  });
+});

spec/frontend/ide/lib/editorconfig/rules_mapper_spec.js

+import mapRulesToMonaco from '~/ide/lib/editorconfig/rules_mapper';
+
+describe('mapRulesToMonaco', () => {
+  const multipleEntries = {
+    input: { indent_style: 'tab', indent_size: '4', insert_final_newline: 'true' },
+    output: { insertSpaces: false, tabSize: 4, insertFinalNewline: true },
+  };
+
+  // tab width takes precedence
+  const tabWidthAndIndent = {
+    input: { indent_style: 'tab', indent_size: '4', tab_width: '3' },
+    output: { insertSpaces: false, tabSize: 3 },
+  };
+
+  it.each`
+    rule                                     | monacoOption
+    ${{ indent_style: 'tab' }}               | ${{ insertSpaces: false }}
+    ${{ indent_style: 'space' }}             | ${{ insertSpaces: true }}
+    ${{ indent_style: 'unset' }}             | ${{}}
+    ${{ indent_size: '4' }}                  | ${{ tabSize: 4 }}
+    ${{ indent_size: '4.4' }}                | ${{ tabSize: 4 }}
+    ${{ indent_size: '0' }}                  | ${{}}
+    ${{ indent_size: '-10' }}                | ${{}}
+    ${{ indent_size: 'NaN' }}                | ${{}}
+    ${{ tab_width: '4' }}                    | ${{ tabSize: 4 }}
+    ${{ tab_width: '5.4' }}                  | ${{ tabSize: 5 }}
+    ${{ tab_width: '-10' }}                  | ${{}}
+    ${{ trim_trailing_whitespace: 'true' }}  | ${{ trimTrailingWhitespace: true }}
+    ${{ trim_trailing_whitespace: 'false' }} | ${{ trimTrailingWhitespace: false }}
+    ${{ trim_trailing_whitespace: 'unset' }} | ${{}}
+    ${{ end_of_line: 'lf' }}                 | ${{ endOfLine: 0 }}
+    ${{ end_of_line: 'crlf' }}               | ${{ endOfLine: 1 }}
+    ${{ end_of_line: 'cr' }}                 | ${{}}
+    ${{ end_of_line: 'unset' }}              | ${{}}
+    ${{ insert_final_newline: 'true' }}      | ${{ insertFinalNewline: true }}
+    ${{ insert_final_newline: 'false' }}     | ${{ insertFinalNewline: false }}
+    ${{ insert_final_newline: 'unset' }}     | ${{}}
+    ${multipleEntries.input}                 | ${multipleEntries.output}
+    ${tabWidthAndIndent.input}               | ${tabWidthAndIndent.output}
+  `('correctly maps editorconfig rule to monaco option: $rule', ({ rule, monacoOption }) => {
+    expect(mapRulesToMonaco(rule)).toEqual(monacoOption);
+  });
+});