feat: Add support for vite serve

README.md

@@ -40,6 +40,26 @@ Follow its development setup and then continue here.
 3. ✅ Enable the app through the app management of your Nextcloud
 4. 🎉 Partytime! Help fix [some issues](https://github.com/nextcloud/text/issues) and [review pull requests](https://github.com/nextcloud/text/pulls) 👍
 
+### Use hot module replacement via `vite serve`
+
+To use the advantages of `vite serve` with hot module replacement (HMR) and not have to recompile the JS assets after each code change, do the following:
+
+1. Configure your webserver to redirect requests to `/apps/text/` to the vite serve server.
+   When using [nextcloud-docker-dev](https://github.com/juliusknorr/nextcloud-docker-dev), add the following snippet to `data/nginx/vhost.d/nextcloud.local` and restart the proxy container. You might have to replace `/apps/text` with e.g. `/apps-extra/text` depending on where the text app resides in your dev setup.
+   ```
+   location /apps/text/ {
+       proxy_pass http://host.docker.internal:5173/apps/text;
+       # fallback to nextcloud server if vite serve doesn't answer
+       error_page 502 = @fallback;
+   }
+   location @fallback {
+       proxy_pass http://nextcloud.local;
+   }
+   ```
+2. Run `npm run serve` to start the vite serve server. If text resides somewhere else than `/apps/text`, run e.g. `BASE=/apps-extra/text npm run serve`.
+
+Afterwards all changes to the code will apply to the application in your browser automatically thanks to hot module replacement (HMR).
+
 ### 🧙 Advanced development stuff
 
 To build the Javascript whenever you make changes, instead of the full `make` you can also run `npm run build`. Or run `npm run watch` to rebuild on every file save.

lib/Listeners/LoadEditorListener.php

@@ -34,7 +34,7 @@ public function handle(Event $event): void {
 		$this->eventDispatcher->dispatchTyped(new RenderReferenceEvent());
 
 		$this->initialStateProvider->provideState();
-		Util::addScript('text', 'text-editors');
-		Util::addStyle('text', 'text-editors');
+		Util::addScript('text', 'text-editor');
+		Util::addStyle('text', 'text-editor');
 	}
 }

package.json

@@ -19,6 +19,7 @@
   "scripts": {
     "build": "NODE_ENV=production NODE_OPTIONS='--max-old-space-size=4096' vite --mode production build",
     "dev": "NODE_ENV=development NODE_OPTIONS='--max-old-space-size=4096' vite --mode development build",
+    "serve": "BASE=${BASE:-/apps/text} NODE_ENV=development vite --mode development serve --host",
     "watch": "NODE_ENV=development NODE_OPTIONS='--max-old-space-size=8192' vite --mode development build --watch",
     "lint": "tsc && eslint --ext .js,.ts,.vue src cypress",
     "lint:fix": "tsc && eslint --ext .js,.ts,.vue src cypress --fix",

vite.config.ts

@@ -4,21 +4,40 @@
 /// <reference types="vitest/config" />
 
 import { createAppConfig } from '@nextcloud/vite-config'
+import type { ViteDevServer, Connect } from 'vite'
 import webpackStats from 'rollup-plugin-webpack-stats'
 import path from 'path'
 
+const rewriteMiddlewarePlugin = {
+	name: 'rewriteAssetsUrl',
+	configureServer(server: ViteDevServer) {
+		server.middlewares.use((req, res, next: Connect.NextFunction): void => {
+			const m = req.url?.match(/\/js\/text-(.*)\.mjs$/)
+			if (m) {
+				if (m[1] === 'text') {
+					req.url = req.url?.replace(/\/js\/text-.*.mjs/, '/src/main.js')
+				} else {
+					req.url = req.url?.replace(/\/js\/text-.*.mjs/, `/src/${m[1]}.js`)
+				}
+			}
+			next()
+		})
+	}
+}
+
 const config = createAppConfig({
 	text: path.join(__dirname, 'src', 'main.js'),
 	files: path.join(__dirname, 'src', 'files.js'),
 	public: path.join(__dirname, 'src', 'public.js'),
 	viewer: path.join(__dirname, 'src', 'viewer.js'),
-	editors: path.join(__dirname, 'src', 'editor.js'),
+	editor: path.join(__dirname, 'src', 'editor.js'),
 	init: path.join(__dirname, 'src', 'init.js'),
 }, {
 	createEmptyCSSEntryPoints: true,
 	extractLicenseInformation: true,
 	thirdPartyLicense: false,
 	config: {
+		base: process.env.BASE,
 		resolve: {
 			dedupe: ['vue'],
 		},
@@ -29,6 +48,7 @@ const config = createAppConfig({
 		},
 		plugins: [
 			webpackStats(),
+			rewriteMiddlewarePlugin,
 		],
 		build: {
 			cssCodeSplit: true,