Merge pull request #5367 from nextcloud/enh/vite

feat: Move to vite for bundling

.eslintrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+	root: true,
+	extends: [
+		'@nextcloud',
+		'@nextcloud/eslint-config/typescript',
+	],
+	rules: {
+		'@typescript-eslint/no-unused-vars': ['off'],
+	}
+}

.github/workflows/cypress-e2e.yml

@@ -88,6 +88,7 @@ jobs:
 
   cypress:
     runs-on: ubuntu-22.04
+    timeout-minutes: 30
     needs: init
 
     strategy:

.tsconfig.json

@@ -0,0 +1,25 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.json",
+	"include": ["./src/**/*.ts"],
+	"compilerOptions": {
+		"types": ["cypress", "cypress-visual-regression", "node", "dockerode", "@nextcloud/typings"],
+		"target": "ESNext",
+		"module": "esnext",
+		"moduleResolution": "node",
+		// Allow ts to import js files
+		"allowJs": true,
+		"allowSyntheticDefaultImports": true,
+		"declaration": false,
+		"noImplicitAny": false,
+		"resolveJsonModule": true,
+		"strict": true,
+	},
+	"ts-node": {
+		// these options are overrides used only by ts-node
+		// same as our --compilerOptions flag and our TS_NODE_COMPILER_OPTIONS environment variable
+		"compilerOptions": {
+			"module": "commonjs",
+			"verbatimModuleSyntax": false
+		}
+	}
+}

cypress.config.js → cypress.config.mjs

@@ -1,8 +1,11 @@
-const { defineConfig } = require('cypress')
-const cypressSplit = require('cypress-split')
-const { configureVisualRegression } = require('cypress-visual-regression/dist/plugin.js')
+import { defineConfig } from 'cypress'
+import cypressSplit from 'cypress-split'
+import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin.js'
+import vitePreprocessor from 'cypress-vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import vue from '@vitejs/plugin-vue2'
 
-module.exports = defineConfig({
+export default defineConfig({
 	projectId: 'hx9gqy',
 	viewportWidth: 1280,
 	viewportHeight: 900,
@@ -19,18 +22,13 @@ module.exports = defineConfig({
 			visualRegressionType: 'regression',
 		},
 		setupNodeEvents(on, config) {
+			on('file:preprocessor', vitePreprocessor({
+				plugins: [vue(), nodePolyfills()],
+				configFile: false,
+			}))
 			cypressSplit(on, config)
 			configureVisualRegression(on)
 
-			const browserify = require('@cypress/browserify-preprocessor')
-			const webpack = require('@cypress/webpack-preprocessor')
-			const webpackOptions = require('@nextcloud/webpack-vue-config')
-
-			webpackOptions.module.rules.push({ test: /\.md/, type: 'asset/source' })
-
-			on('file:preprocessor', browserify())
-			on('file:preprocessor', webpack({ webpackOptions }))
-
 			return config
 		},
 
@@ -40,7 +38,7 @@ module.exports = defineConfig({
 	component: {
 		devServer: {
 			framework: "vue",
-			bundler: "webpack",
+			bundler: "vite",
 		},
 	},
 	retries: {

cypress/e2e/attachments.spec.js

@@ -380,6 +380,7 @@ describe('Test all attachment insertion methods', () => {
 		})
 
 		cy.visit('/apps/files')
+		cy.waitForPreview(fileName)
 		cy.getFile(fileName)
 			.should('exist')
 			.should('have.attr', 'data-cy-files-list-row-fileid')

cypress/e2e/nodes/ListItem.spec.js

@@ -7,9 +7,12 @@ import TaskItem from './../../../src/nodes/TaskItem.js'
 import BulletList from './../../../src/nodes/BulletList.js'
 import Markdown from './../../../src/extensions/Markdown.js'
 import { createCustomEditor } from './../../support/components.js'
-import testData from '../../fixtures/ListItem.md'
 import { loadMarkdown, runCommands, expectMarkdown } from './helpers.js'
 
+// https://github.com/import-js/eslint-plugin-import/issues/1739
+/* eslint-disable-next-line import/no-unresolved */
+import testData from '../../fixtures/ListItem.md?raw'
+
 describe('ListItem extension integrated in the editor', () => {
 
 	const editor = createCustomEditor({

cypress/e2e/nodes/Preview.spec.js

@@ -25,9 +25,12 @@ import Markdown from './../../../src/extensions/Markdown.js'
 import Preview from './../../../src/nodes/Preview.js'
 import { Italic, Link } from './../../../src/marks/index.js'
 import { createCustomEditor } from './../../support/components.js'
-import testData from '../../fixtures/Preview.md'
 import { loadMarkdown, runCommands, expectMarkdown } from './helpers.js'
 
+// https://github.com/import-js/eslint-plugin-import/issues/1739
+/* eslint-disable-next-line import/no-unresolved */
+import testData from '../../fixtures/Preview.md?raw'
+
 describe('Preview extension', { retries: 0 }, () => {
 
 	const editor = createCustomEditor({

cypress/e2e/nodes/Table.spec.js

@@ -6,7 +6,9 @@ import markdownit from './../../../src/markdownit/index.js'
 import EditableTable from './../../../src/nodes/EditableTable.js'
 import Markdown, { createMarkdownSerializer } from './../../../src/extensions/Markdown.js'
 
-import testData from '../../fixtures/Table.md'
+// https://github.com/import-js/eslint-plugin-import/issues/1739
+/* eslint-disable-next-line import/no-unresolved */
+import testData from '../../fixtures/Table.md?raw'
 
 const user = randUser()
 const fileName = 'empty.md'

cypress/support/commands.js

@@ -212,6 +212,17 @@ Cypress.Commands.add('moveFile', (path, destinationPath) => {
 	}).then(response => response.body)
 })
 
+// For files wait for preview to load and release lock
+Cypress.Commands.add('waitForPreview', name => {
+	cy.getFile(name)
+		.scrollIntoView()
+	cy.getFile(name)
+		.find('.files-list__row-icon img')
+		.should('be.visible')
+		.its('[0].naturalWidth')
+		.should('be.greaterThan', 0)
+})
+
 Cypress.Commands.add('deleteFile', (path) => {
 	return axios.delete(`${url}/remote.php/webdav/${path}`)
 })
@@ -320,7 +331,7 @@ Cypress.Commands.add('closeInterceptedSession', (shareToken = undefined) => {
 })
 
 Cypress.Commands.add('getFile', fileName => {
-	return cy.get(`[data-cy-files-list] tr[data-cy-files-list-row-name="${fileName}"]`)
+	return cy.get(`[data-cy-files-list] [data-cy-files-list-row-name="${fileName}"]`)
 
 })