@conduction/nextcloud-vue 0.1.0-beta.4 → 0.1.0-beta.6

package/src/components/CnObjectCard/eslint-setup.md

@@ -0,0 +1,235 @@
+# ESLint Setup — How Red Lines and Auto-fix Work
+
+Exact files, exact settings, no guessing. This is the working setup in OpenRegister.
+
+---
+
+## Required VSCode Extension
+
+**`dbaeumer.vscode-eslint`** (version 3.0.24)
+
+This is the only extension involved in linting and formatting `.vue` and `.js` files. It does two things:
+1. Runs ESLint in the background and draws red/yellow underlines (diagnostics)
+2. Acts as the formatter — fixes the code when you save
+
+---
+
+## The 6 Files That Matter
+
+### 1. `.vscode/settings.json`
+
+Tells VSCode to use ESLint as the formatter for all files (including `.vue`) and to run it on save.
+
+```json
+{
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true,
+    "eslint.format.enable": true,
+
+    "[javascript]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[php]": {
+        "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
+    }
+}
+```
+
+- No `[vue]` block exists. Vue falls back to the top-level `editor.defaultFormatter` = ESLint.
+- `eslint.format.enable: true` is what makes ESLint able to **fix** on save, not just show errors.
+- `editor.formatOnSave: true` triggers that fix every Ctrl+S.
+
+---
+
+### 2. `eslint.config.js`
+
+The ESLint flat config entry point. The extension finds this automatically at the project root.
+
+```js
+const { defineConfig } = require('@eslint/config-helpers')
+const js = require('@eslint/js')
+const { FlatCompat } = require('@eslint/eslintrc')
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all,
+})
+
+module.exports = defineConfig([{
+    extends: compat.extends('@nextcloud'),
+
+    settings: {
+        'import/resolver': {
+            alias: {
+                map: [
+                    ['@', './src'],
+                    ['@floating-ui/dom-actual', './node_modules/@floating-ui/dom'],
+                    ['@conduction/nextcloud-vue', '../nextcloud-vue/src'],
+                ],
+                extensions: ['.js', '.ts', '.vue', '.json', '.css'],
+            },
+        },
+    },
+
+    rules: {
+        'no-unused-vars': ['error', { varsIgnorePattern: '^(t|n)$', argsIgnorePattern: '^_' }],
+        'jsdoc/require-jsdoc': 'off',
+        'vue/first-attribute-linebreak': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        'n/no-missing-import': 'off',
+        'import/namespace': 'off',
+        'import/default': 'off',
+        'import/no-named-as-default': 'off',
+        'import/no-named-as-default-member': 'off',
+    },
+}])
+```
+
+- Uses **flat config** format (ESLint 8.57.0).
+- Uses `FlatCompat` to bridge `@nextcloud/eslint-config` which is still in legacy format.
+- Works with `require()` because `package.json` has **no** `"type": "module"`.
+
+---
+
+### 3. `.babelrc`
+
+The Babel config used by `@babel/eslint-parser` to parse `.js` and `.vue` `<script>` blocks. This is a **project-root** `.babelrc` file, not a `babel.config.js`.
+
+```json
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-typescript"
+  ]
+}
+```
+
+- `@babel/preset-env` — handles modern JS syntax without a `targets` restriction, so it supports ES module syntax (`export default`, `import`, etc.).
+- `@babel/preset-typescript` + `@babel/plugin-transform-typescript` — allows TypeScript syntax in `.vue` `<script lang="ts">` blocks.
+- No `"type": "module"` in `package.json` means this `.babelrc` is loaded as JSON without any module format issues.
+
+---
+
+### 4. `node_modules/@nextcloud/eslint-config/index.js` (v8.4.1)
+
+Loaded by `compat.extends('@nextcloud')`. Combines three parts:
+
+```js
+module.exports = {
+    ...base,           // parts/base.js
+    overrides: [
+        { ...typescriptOverrides },  // parts/typescript.js
+        { ...vueOverrides },         // parts/vue.js
+    ],
+}
+```
+
+---
+
+### 5. `node_modules/@nextcloud/eslint-config/parts/base.js`
+
+Applies to all files. Contains the indent rules that cause **red lines in `<script>` blocks**.
+
+```js
+parser: '@babel/eslint-parser',
+parserOptions: {
+    requireConfigFile: false,  // won't crash if no babel config — but .babelrc IS present and IS used
+},
+
+rules: {
+    indent: ['error', 'tab'],                              // red line: spaces used instead of tabs
+    'no-tabs': ['error', { allowIndentationTabs: true }],  // red line: tabs used outside indentation
+    'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],   // red line: mixed
+    ...
+}
+```
+
+`'error'` = **red underline**. `'warn'` = yellow. Auto-fix on save corrects all of these.
+
+---
+
+### 6. `node_modules/@nextcloud/eslint-config/parts/vue.js`
+
+Applies **only** to `**/*.vue` files. Contains the indent rule that causes **red lines in `<template>` blocks**.
+
+```js
+files: ['**/*.vue'],
+parser: 'vue-eslint-parser',        // parses the full .vue file structure
+parserOptions: {
+    parser: '@babel/eslint-parser', // delegates <script> parsing to Babel (picks up .babelrc)
+},
+extends: ['plugin:vue/recommended'],
+
+rules: {
+    'vue/html-indent': ['error', 'tab'],  // red line: wrong indentation in <template>
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    'vue/html-closing-bracket-spacing': 'error',
+    'vue/html-closing-bracket-newline': ['error', { multiline: 'never' }],
+    'vue/max-attributes-per-line': ['error', { singleline: 3, multiline: 1 }],
+    'vue/multi-word-component-names': ['off'],
+    ...
+}
+```
+
+- `vue-eslint-parser` is what lets ESLint understand `<template>`, `<script>`, `<style>` as separate blocks.
+- `vue/html-indent: ['error', 'tab']` → red line on wrong indentation inside `<template>`.
+- `indent: ['error', 'tab']` from base.js → red line on wrong indentation inside `<script>`.
+
+---
+
+## The Full Chain
+
+```
+You open a .vue file in VSCode
+        │
+        ▼
+dbaeumer.vscode-eslint extension starts
+  reads .vscode/settings.json
+  → editor.defaultFormatter = ESLint for .vue (no [vue] override, falls back to global)
+  → eslint.format.enable = true  (ESLint can fix, not just report)
+        │
+        ▼
+ESLint loads eslint.config.js
+  → FlatCompat bridges @nextcloud/eslint-config (legacy → flat)
+  → index.js loads base.js + vue.js
+        │
+        ▼
+For <template> block:
+  vue-eslint-parser handles the HTML
+  Rule: vue/html-indent ['error', 'tab']
+  Wrong indent → RED UNDERLINE
+
+For <script> block:
+  @babel/eslint-parser handles the JS
+  Picks up .babelrc (preset-env + preset-typescript)
+  Rule: indent ['error', 'tab']
+  Wrong indent → RED UNDERLINE
+        │
+        ▼
+You press Ctrl+S
+  editor.formatOnSave triggers ESLint formatter
+  ESLint runs --fix internally
+  → replaces wrong indentation with tabs in both blocks
+  → fixes bracket spacing, trailing commas, etc.
+  File saved with corrected formatting
+```
+
+---
+
+## Key Reason This Works and nextcloud-vue Does Not
+
+| | OpenRegister | nextcloud-vue |
+|---|---|---|
+| `package.json` `"type"` field | not set (defaults to CommonJS) | `"type": "module"` |
+| `eslint.config.js` uses `require()` | works fine | **crashes** — `require` not defined in ES module scope |
+| Babel config file | `.babelrc` (JSON, no module issues) | `babel.config.js` (treated as ESM, crashes Babel sync load) |
+| ESLint server in VSCode | starts, lints, shows red lines | hangs on startup, times out, shows nothing |
+
+The fix for nextcloud-vue is to rename both files to `.cjs` so Node treats them as CommonJS regardless of `"type": "module"`, and ensure `babel.config.cjs` uses `module.exports` (not `export default`) with `sourceType: 'unambiguous'` at the top level.

package/src/components/CnObjectCard/package.json-or.json

@@ -0,0 +1,132 @@
+{
+  "name": "openregister",
+  "version": "1.0.0",
+  "license": "EUPL-1.2",
+  "engines": {
+    "node": "^20.0.0",
+    "npm": "^10.0.0"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js --progress --mode production",
+    "dev": "NODE_ENV=development webpack --config webpack.config.js --progress",
+    "watch": "NODE_ENV=development webpack --config webpack.config.js --progress --watch",
+    "lint": "eslint src",
+    "lint-fix": "npm run lint -- --fix",
+    "test": "jest --silent",
+    "test-coverage": "jest --silent --coverage",
+    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
+    "validate-oas": "spectral lint oas-*.json --fail-severity error",
+    "download-oas": "scripts/download-oas.sh"
+  },
+  "browserslist": ["extends @nextcloud/browserslist-config"],
+  "sideEffects": true,
+  "peerDependencies": {
+    "vue": "^2.6 || ^3.0",
+    "vue-frag": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-frag": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@conduction/nextcloud-vue": "0.1.0-beta.5",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@nextcloud/axios": "^2.5.0",
+    "@nextcloud/dialogs": "^6.1.1",
+    "@nextcloud/initial-state": "^2.2.0",
+    "@nextcloud/l10n": "^3.2.0",
+    "@nextcloud/router": "^3.0.0",
+    "@nextcloud/vue": "^8.16.0",
+    "@vueuse/core": "^10.7.2",
+    "apexcharts": "^3.45.0",
+    "axios": "^1.7.3",
+    "bootstrap": "^5.3.2",
+    "bootstrap-vue": "^2.23.1",
+    "css-loader": "^6.8.1",
+    "lodash": "^4.17.21",
+    "marked": "^16.4.0",
+    "pinia": "^2.1.7",
+    "remark-cli": "^11.0.0",
+    "remark-lint-list-item-indent": "^3.1.1",
+    "remark-preset-lint-consistent": "^5.1.1",
+    "remark-preset-lint-recommended": "^6.1.2",
+    "style-loader": "^3.3.3",
+    "vue": "^2.7.16",
+    "vue-apexcharts": "^1.6.2",
+    "vue-codemirror6": "^1.1.5",
+    "vue-draggable-plus": "^0.2.6",
+    "vue-frag": "^1.4.3",
+    "vue-loader": "^15.11.1",
+    "vue-loading-overlay": "^6.0.3",
+    "vue-material-design-icons": "^5.2.0",
+    "vue-template-compiler": "^2.7.16",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-transform-typescript": "^7.26.8",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/traverse": "^7.23.9",
+    "@cyclonedx/cyclonedx-npm": "^4.2.1",
+    "@eslint/config-helpers": "^0.4.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.39.1",
+    "@nextcloud/browserslist-config": "^2.3.0",
+    "@nextcloud/eslint-config": "^8.4.1",
+    "@nextcloud/stylelint-config": "^2.4.0",
+    "@nextcloud/webpack-vue-config": "^5.5.0",
+    "@pinia/testing": "^0.1.3",
+    "@stoplight/spectral-cli": "^6.15.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.17.23",
+    "@vue/test-utils": "^2.4.4",
+    "@vue/vue2-jest": "^29.2.6",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.56.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.21.1",
+    "eslint-webpack-plugin": "^4.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
+    "postcss": "^8.4.31",
+    "stylelint": "^15.11.0",
+    "stylelint-webpack-plugin": "^4.1.1",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.8.2",
+    "vue-router": "^3.6.5"
+  },
+  "overrides": {
+    "vue": "^2.7.16",
+    "@nextcloud/vue": "^8.16.0",
+    "stylelint": "^15.11.0",
+    "eslint": "^8.56.0",
+    "postcss": "^8.4.31",
+    "json5": "^2.2.3",
+    "@babel/traverse": "^7.23.9",
+    "babel-jest": "^29.7.0",
+    "vue-template-compiler": "^2.7.16",
+    "@vue/test-utils": "^2.4.4",
+    "bootstrap": "^5.3.2",
+    "vue-demi": "^0.14.6",
+    "minimatch": ">=3.1.5",
+    "rollup": ">=2.80.0"
+  },
+  "resolutions": {
+    "postcss": "^8.4.31",
+    "json5": "^2.2.3",
+    "@babel/traverse": "^7.23.9",
+    "vue-template-compiler": "^2.7.16",
+    "bootstrap": "^5.3.2",
+    "vue-demi": "^0.14.6"
+  }
+}