From 13371bb757742648ff028c110897c09a8c7067ef Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 20 Jun 2023 13:46:23 +0200
Subject: [PATCH 1/2] feat: Split config + Fully support composition API by
 using the `vue-eslint-parser` parser

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 CHANGELOG.md                        |   7 ++
 index.js                            | 175 +++-------------------------
 package-lock.json                   |  15 +--
 package.json                        |   3 +-
 parts/base.js                       |  96 +++++++++++++++
 parts/typescript.js                 |  36 ++++++
 parts/vue.js                        |  42 +++++++
 tests/eslint-config.test.ts         |   7 +-
 tests/fixtures/composition-test.vue |  18 +++
 9 files changed, 230 insertions(+), 169 deletions(-)
 create mode 100644 parts/base.js
 create mode 100644 parts/typescript.js
 create mode 100644 parts/vue.js
 create mode 100644 tests/fixtures/composition-test.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 325d64c..6f7f4ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## Unreleased
+
+[Full Changelog](https://github.com/nextcloud/eslint-config/compare/v8.2.1...master)
+
+**Features:**
+- Fully support vue files using the Composition API `<script setup>`.
+
 ## [v8.3.0-beta.0](https://github.com/nextcloud/eslint-config/tree/v8.3.0-beta.0) (2023-05-12)
 
 [Full Changelog](https://github.com/nextcloud/eslint-config/compare/v8.2.1...v8.3.0-beta.0)
diff --git a/index.js b/index.js
index 2261234..47b582a 100644
--- a/index.js
+++ b/index.js
@@ -1,166 +1,21 @@
+const base = require('./parts/base.js')
+const typescriptOverrides = require('./parts/typescript.js')
+const vueOverrides = require('./parts/vue.js')
+
+/**
+ * Config for Vue + Javascript projects (optionally with parts, except vue files, written in Typescript)
+ */
 module.exports = {
-	root: true,
-	env: {
-		browser: true,
-		commonjs: true,
-		es6: true,
-		node: true,
-		// Allow jest syntax in the src folder
-		jest: true,
-	},
-	parserOptions: {
-		parser: '@babel/eslint-parser',
-		ecmaVersion: 6,
-		requireConfigFile: false,
-	},
-	extends: [
-		'eslint:recommended',
-		'plugin:import/errors',
-		'plugin:import/warnings',
-		'plugin:n/recommended',
-		'plugin:vue/recommended',
-		'plugin:@nextcloud/recommended',
-		'plugin:jsdoc/recommended',
-		'standard',
-	],
-	settings: {
-		'import/resolver': {
-			node: {
-				paths: ['src'],
-				extensions: ['.js', '.vue'],
-			},
-			exports: {
-				conditions: ['import'],
-			},
-		},
-		jsdoc: {
-			tagNamePreference: {
-				returns: 'return',
-			},
-			mode: 'typescript',
-		},
-	},
-	plugins: ['vue', 'n', 'jsdoc'],
-	rules: {
-		// space before function ()
-		'space-before-function-paren': ['error', {
-			anonymous: 'never',
-			named: 'never',
-			asyncArrow: 'always',
-		}],
-		// stay consistent with array brackets
-		'array-bracket-newline': ['error', 'consistent'],
-		// tabs only for indentation
-		indent: ['error', 'tab'],
-		'no-tabs': ['error', { allowIndentationTabs: true }],
-		'vue/html-indent': ['error', 'tab'],
-		// allow spaces after tabs for alignment
-		'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
-		// only debug console
-		'no-console': ['error', { allow: ['error', 'warn', 'info', 'debug'] }],
-		// classes blocks
-		'padded-blocks': ['error', { classes: 'always' }],
-		// always have the operator in front
-		'operator-linebreak': ['error', 'before'],
-		// ternary on multiline
-		'multiline-ternary': ['error', 'always-multiline'],
-		// force proper JSDocs
-		'jsdoc/require-returns': 0,
-		'jsdoc/require-returns-description': 0,
-		'jsdoc/tag-lines': ['off'],
-		// disallow use of "var"
-		'no-var': 'error',
-		// suggest using const
-		'prefer-const': 'error',
-		// es6 import/export and require
-		'n/no-unpublished-require': ['off'],
-		'n/no-unsupported-features/es-syntax': ['off'],
-		// PascalCase components names for vuejs
-		// https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended
-		'vue/component-name-in-template-casing': ['error', 'PascalCase'],
-		// force name
-		'vue/match-component-file-name': ['error', {
-			extensions: ['jsx', 'vue', 'js'],
-			shouldMatchCase: true,
-		}],
-		// space before self-closing elements
-		'vue/html-closing-bracket-spacing': 'error',
-		// no ending html tag on a new line
-		'vue/html-closing-bracket-newline': ['error', { multiline: 'never' }],
-		// check vue files too
-		'n/no-missing-import': ['error', {}],
-		// code spacing with attributes
-		'vue/max-attributes-per-line': ['error', {
-			singleline: 3,
-			multiline: 1,
-		}],
-		'vue/first-attribute-linebreak': ['error', {
-			singleline: 'beside',
-			multiline: 'beside',
-		}],
-		// Allow single-word components names
-		'vue/multi-word-component-names': ['off'],
-		// custom event naming convention
-		'vue/custom-event-name-casing': ['error', 'kebab-case', {
-			// allows custom xxxx:xxx events formats
-			ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'],
-		}],
-		// always add a trailing comma (for diff readability)
-		'comma-dangle': ['warn', 'always-multiline'],
-		// Allow shallow import of @vue/test-utils and @testing-library/vue in order to be able to use it in
-		// the src folder
-		'n/no-unpublished-import': ['error', {
-			allowModules: ['@vue/test-utils', '@testing-library/vue'],
-		}],
-		// require object literal shorthand syntax
-		'object-shorthand': ['error', 'always'],
-		// Warn when file extensions are not used on import paths
-		'import/extensions': ['warn', 'always', {
-			ignorePackages: true,
-		}],
-		// ignore camelcase for __webpack variables
-		camelcase: ['error', {
-			allow: ['^UNSAFE_', '^__webpack_'],
-			properties: 'never',
-			ignoreGlobals: true,
-		}],
-	},
+	// Base rules
+	...base,
+	// basic Typescript rules
 	overrides: [
 		{
-			files: ['**/*.ts', '**/*.tsx'],
-			extends: [
-				'@vue/eslint-config-typescript/recommended',
-				'plugin:import/typescript',
-			],
-			parserOptions: {
-				parser: '@typescript-eslint/parser',
-			},
-			rules: {
-				'n/no-missing-import': 'off',
-				'import/extensions': 'off',
-				'jsdoc/check-tag-names': [
-					'warn', {
-						// for projects using typedoc
-						definedTags: [
-							'notExported',
-							'packageDocumentation',
-						],
-					},
-				],
-				// Does not make sense with TypeScript
-				'jsdoc/require-param-type': 'off',
-			},
-			settings: {
-				'import/resolver': {
-					typescript: {
-						alwaysTryTypes: true,
-					},
-					node: {
-						paths: ['src'],
-						extensions: ['.(m|c)?js', '.ts', '.tsx', '.vue'],
-					},
-				},
-			},
+			...typescriptOverrides,
+		},
+		// Setup different vue parser to support `<script setup>` correctly
+		{
+			...vueOverrides,
 		},
 	],
 }
diff --git a/package-lock.json b/package-lock.json
index 10964cc..8f47b8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,8 @@
         "eslint-plugin-vue": "^9.7.0",
         "jest": "^29.4.1",
         "ts-jest": "^29.0.5",
-        "typescript": "^5.0.2"
+        "typescript": "^5.0.2",
+        "vue-eslint-parser": "^9.3.1"
       },
       "engines": {
         "node": "^16.0.0",
@@ -7862,9 +7863,9 @@
       }
     },
     "node_modules/vue-eslint-parser": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.0.tgz",
-      "integrity": "sha512-48IxT9d0+wArT1+3wNIy0tascRoywqSUe2E1YalIC1L8jsUGe5aJQItWfRok7DVFGz3UYvzEI7n5wiTXsCMAcQ==",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
+      "integrity": "sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -13803,9 +13804,9 @@
       }
     },
     "vue-eslint-parser": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.0.tgz",
-      "integrity": "sha512-48IxT9d0+wArT1+3wNIy0tascRoywqSUe2E1YalIC1L8jsUGe5aJQItWfRok7DVFGz3UYvzEI7n5wiTXsCMAcQ==",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz",
+      "integrity": "sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==",
       "dev": true,
       "requires": {
         "debug": "^4.3.4",
diff --git a/package.json b/package.json
index 6af8db2..6d71727 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,8 @@
     "eslint-plugin-vue": "^9.7.0",
     "jest": "^29.4.1",
     "ts-jest": "^29.0.5",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "vue-eslint-parser": "^9.3.1"
   },
   "keywords": [
     "eslint",
diff --git a/parts/base.js b/parts/base.js
new file mode 100644
index 0000000..9487d8c
--- /dev/null
+++ b/parts/base.js
@@ -0,0 +1,96 @@
+/** Base rules */
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        commonjs: true,
+        es6: true,
+        node: true,
+        // Allow jest syntax in the src folder
+        jest: true,
+    },
+    parser: '@babel/eslint-parser',
+    parserOptions: {
+        requireConfigFile: false,
+    },
+    extends: [
+        'eslint:recommended',
+        'plugin:import/errors',
+        'plugin:import/warnings',
+        'plugin:n/recommended',
+        'plugin:@nextcloud/recommended',
+        'plugin:jsdoc/recommended',
+        'standard',
+    ],
+    settings: {
+        'import/resolver': {
+            node: {
+                paths: ['src'],
+                extensions: ['.js', '.vue'],
+            },
+            exports: {
+                conditions: ['import'],
+            },
+        },
+        jsdoc: {
+            tagNamePreference: {
+                returns: 'return',
+            },
+            mode: 'typescript',
+        },
+    },
+    plugins: ['vue', 'n', 'jsdoc'],
+    rules: {
+        // space before function ()
+        'space-before-function-paren': ['error', {
+            anonymous: 'never',
+            named: 'never',
+            asyncArrow: 'always',
+        }],
+        // stay consistent with array brackets
+        'array-bracket-newline': ['error', 'consistent'],
+        // tabs only for indentation
+        indent: ['error', 'tab'],
+        'no-tabs': ['error', { allowIndentationTabs: true }],
+        // allow spaces after tabs for alignment
+        'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
+        // only debug console
+        'no-console': ['error', { allow: ['error', 'warn', 'info', 'debug'] }],
+        // classes blocks
+        'padded-blocks': ['error', { classes: 'always' }],
+        // always have the operator in front
+        'operator-linebreak': ['error', 'before'],
+        // ternary on multiline
+        'multiline-ternary': ['error', 'always-multiline'],
+        // force proper JSDocs
+        'jsdoc/require-returns': 0,
+        'jsdoc/require-returns-description': 0,
+        'jsdoc/tag-lines': ['off'],
+        // disallow use of "var"
+        'no-var': 'error',
+        // suggest using const
+        'prefer-const': 'error',
+        // es6 import/export and require
+        'n/no-unpublished-require': ['off'],
+        'n/no-unsupported-features/es-syntax': ['off'],
+        // always add a trailing comma (for diff readability)
+        'comma-dangle': ['warn', 'always-multiline'],
+        // Allow shallow import of @vue/test-utils and @testing-library/vue in order to be able to use it in
+        // the src folder
+        'n/no-unpublished-import': ['error', {
+            allowModules: ['@vue/test-utils', '@testing-library/vue'],
+        }],
+        // require object literal shorthand syntax
+        'object-shorthand': ['error', 'always'],
+        // Warn when file extensions are not used on import paths
+        'import/extensions': ['warn', 'always', {
+            ignorePackages: true,
+        }],
+        // ignore camelcase for __webpack variables
+        camelcase: ['error', {
+            allow: ['^UNSAFE_', '^__webpack_'],
+            properties: 'never',
+            ignoreGlobals: true,
+        }],
+    },
+}
diff --git a/parts/typescript.js b/parts/typescript.js
new file mode 100644
index 0000000..eda041b
--- /dev/null
+++ b/parts/typescript.js
@@ -0,0 +1,36 @@
+/** Rules for typescript */
+module.exports = {
+    files: ['**/*.ts', '**/*.tsx'],
+    extends: [
+        '@vue/eslint-config-typescript/recommended',
+        'plugin:import/typescript',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {},
+    rules: {
+        'n/no-missing-import': 'off',
+        'import/extensions': 'off',
+        'jsdoc/check-tag-names': [
+            'warn', {
+                // for projects using typedoc
+                definedTags: [
+                    'notExported',
+                    'packageDocumentation',
+                ],
+            },
+        ],
+        // Does not make sense with TypeScript
+        'jsdoc/require-param-type': 'off',
+    },
+    settings: {
+        'import/resolver': {
+            typescript: {
+                alwaysTryTypes: true,
+            },
+            node: {
+                paths: ['src'],
+                extensions: ['.(m|c)?js', '.ts', '.tsx', '.vue'],
+            },
+        },
+    },
+}
\ No newline at end of file
diff --git a/parts/vue.js b/parts/vue.js
new file mode 100644
index 0000000..93427e7
--- /dev/null
+++ b/parts/vue.js
@@ -0,0 +1,42 @@
+
+module.exports = {
+    files: ['**/*.vue'],
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+        parser: '@babel/eslint-parser',
+    },
+    extends: ['plugin:vue/recommended'],
+    rules: {
+        'vue/html-indent': ['error', 'tab'],
+        // PascalCase components names for vuejs
+        // https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended
+        'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+        // force name
+        'vue/match-component-file-name': ['error', {
+            extensions: ['jsx', 'vue', 'js'],
+            shouldMatchCase: true,
+        }],
+        // space before self-closing elements
+        'vue/html-closing-bracket-spacing': 'error',
+        // no ending html tag on a new line
+        'vue/html-closing-bracket-newline': ['error', { multiline: 'never' }],
+        // check vue files too
+        'n/no-missing-import': ['error', {}],
+        // code spacing with attributes
+        'vue/max-attributes-per-line': ['error', {
+            singleline: 3,
+            multiline: 1,
+        }],
+        'vue/first-attribute-linebreak': ['error', {
+            singleline: 'beside',
+            multiline: 'beside',
+        }],
+        // Allow single-word components names
+        'vue/multi-word-component-names': ['off'],
+        // custom event naming convention
+        'vue/custom-event-name-casing': ['error', 'kebab-case', {
+            // allows custom xxxx:xxx events formats
+            ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'],
+        }],
+    },
+}
diff --git a/tests/eslint-config.test.ts b/tests/eslint-config.test.ts
index acc1962..fcda009 100644
--- a/tests/eslint-config.test.ts
+++ b/tests/eslint-config.test.ts
@@ -34,4 +34,9 @@ test('ignore camelcase for webpack', async () => {
 	const results = await lintFile('fixtures/webpack-nonce.js')
 	expect(results).toHaveIssueCount(1)
 	expect(results).toHaveIssue({ruleId: 'no-undef', line: 2 })
-})
\ No newline at end of file
+})
+
+test('works with Vue Composition API', async () => {
+	const results = await lintFile('fixtures/composition-test.vue')
+	expect(results).toHaveIssueCount(0)
+})
diff --git a/tests/fixtures/composition-test.vue b/tests/fixtures/composition-test.vue
new file mode 100644
index 0000000..1f0f583
--- /dev/null
+++ b/tests/fixtures/composition-test.vue
@@ -0,0 +1,18 @@
+<template>
+	<code>String: "{{ props.someString }}"
+		Int: {{ props.someInt }}
+	</code>
+</template>
+
+<script setup>
+const props = defineProps({
+	someString: {
+		type: String,
+		required: true,
+	},
+	someInt: {
+		type: Number,
+		required: true,
+	},
+})
+</script>

From 05b788a0ce26b8048e4b730396f5d5c18a64eeda Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 20 Jun 2023 13:47:20 +0200
Subject: [PATCH 2/2] feat: Add extra config for vue+typescript projects

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 CHANGELOG.md                           |  1 +
 README.md                              | 14 ++++++++++++++
 tests/eslint-typescript-config.test.ts | 19 +++++++++++++++++++
 tests/fixtures/typescript-test.vue     | 12 ++++++++++++
 typescript.js                          | 25 +++++++++++++++++++++++++
 5 files changed, 71 insertions(+)
 create mode 100644 tests/eslint-typescript-config.test.ts
 create mode 100644 tests/fixtures/typescript-test.vue
 create mode 100644 typescript.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f7f4ff..abe194a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 [Full Changelog](https://github.com/nextcloud/eslint-config/compare/v8.2.1...master)
 
 **Features:**
+- Provide config for vue files written in Typescript, use `extends: "@nextcloud/eslint-config/typescript"`.
 - Fully support vue files using the Composition API `<script setup>`.
 
 ## [v8.3.0-beta.0](https://github.com/nextcloud/eslint-config/tree/v8.3.0-beta.0) (2023-05-12)
diff --git a/README.md b/README.md
index 37f6c5a..8a344be 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,20 @@ module.exports = {
 }
 ```
 
+### Usage with Typescript projects
+
+If your projects uses Typescript for vue files, like `<script lang="ts">` then use the Typescript config instead:
+
+Add a file `.eslintrc.js` in the root directory of your app repository with the following content:
+
+```js
+module.exports = {
+	extends: [
+		'@nextcloud/eslint-config/typescript',
+	],
+}
+```
+
 ## Release new version
 
  1. Update CHANGELOG.md file with the latest changes
diff --git a/tests/eslint-typescript-config.test.ts b/tests/eslint-typescript-config.test.ts
new file mode 100644
index 0000000..f1a7af5
--- /dev/null
+++ b/tests/eslint-typescript-config.test.ts
@@ -0,0 +1,19 @@
+import { ESLint } from "eslint"
+import type { Linter } from "eslint"
+import * as path from 'path'
+import * as eslintConfig from '../typescript.js'
+
+
+const eslint = new ESLint({
+	baseConfig: eslintConfig as unknown as Linter.Config<Linter.RulesRecord>
+})
+
+const lintFile = async (file) => {
+	const real = path.resolve(path.join(__dirname, file))
+	return await eslint.lintFiles(real)
+}
+
+test('works with Typescript + Vue', async () => {
+	const results = await lintFile('fixtures/typescript-test.vue')
+	expect(results).toHaveIssueCount(0)
+})
\ No newline at end of file
diff --git a/tests/fixtures/typescript-test.vue b/tests/fixtures/typescript-test.vue
new file mode 100644
index 0000000..5cdae3f
--- /dev/null
+++ b/tests/fixtures/typescript-test.vue
@@ -0,0 +1,12 @@
+<template>
+	<code>String: "{{ props.someString }}"
+		Int: {{ props.someInt }}
+	</code>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	someString: string,
+	someInt: number,
+}>()
+</script>
diff --git a/typescript.js b/typescript.js
new file mode 100644
index 0000000..9642b46
--- /dev/null
+++ b/typescript.js
@@ -0,0 +1,25 @@
+const base = require('./parts/base.js')
+const typescriptOverrides = require('./parts/typescript.js')
+const vueOverrides = require('./parts/vue.js')
+
+/**
+ * Config for projects written in Typescript + vue including vue files written in Typescript (`<script lang='ts'>`)
+ */
+module.exports = {
+	...base,
+	overrides: [
+		// Add Typescript rules also for vue files
+		{
+			...typescriptOverrides,
+			files: ['**/*.ts', '**/*.tsx', '**/*.vue'],
+		},
+		// Use different parser for vue files script section
+		{
+			...vueOverrides,
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+				sourceType: 'module',
+			},
+		},
+	],
+}