feat: Vite compat DDEV

inc/vite.php

@@ -2,6 +2,7 @@
 if (!defined("_ECRIRE_INC_VERSION")) {
 	return;
 }
+defined('_SERVEUR_MODE') || define('_SERVEUR_MODE', 'PROD');
 
 // Helpers here serve as example. Change to suit your needs.
 // const VITE_HOST = "https://localhost:5134";
@@ -16,7 +17,12 @@ if (!defined("_ECRIRE_INC_VERSION")) {
 // Prints all the html entries needed for Vite
 
 function vite(string $entry, $port = "5134"): string {
-	defined('VITE_HOST') ||	define('VITE_HOST', "https://localhost:".$port);
+	if ($_SERVER['IS_DDEV_PROJECT'] ) {
+		defined('VITE_HOST') ||	define('VITE_HOST', "https://" . $_SERVER['SERVER_ADDR'] . ":" .$port);
+	} else {
+		defined('VITE_HOST') ||	define('VITE_HOST', "https://localhost:".$port);
+	}
+
 	return "\n" .
 		jsTag($entry) .
 		"\n" .
@@ -38,12 +44,8 @@ function isDev(string $entry): bool {
 		return $exists;
 	}
 
-	if (
-		!empty($_SERVER["SERVER_ADDR"]) and
-		in_array($_SERVER["SERVER_ADDR"], ["::1", "127.0.0.1"])
-	) {
+	if ( _SERVEUR_MODE !== 'PROD') {
 		$handle = curl_init(VITE_HOST . "/" . $entry);
-
 		curl_setopt($handle, CURLOPT_SSL_VERIFYHOST, false);
 		curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false);
 

package.json

@@ -1,24 +1,34 @@
 {
-	"name": "gamutable",
-	"version": "1.0.0",
-	"private": true,
-	"scripts": {
-		"dev": "APP_ENV=development vite",
-		"build": "vite build",
-		"watch": "vite build --watch",
-		"preview": "vite preview"
-	},
-	"dependencies": {
-		"@vitejs/plugin-basic-ssl": "^1.0.1",
-		"typescript": "^5.1.6",
-		"vue": "^3.2.47",
-		"vue-next-select": "^2.10.5",
-		"vue-papa-parse": "^3.1.0"
-	},
-	"devDependencies": {
-		"@vitejs/plugin-vue": "^4.0.0",
-		"@vue/compiler-sfc": "^3.2.47",
-		"vite": "^4.1.1",
-		"vite-plugin-live-reload": "^3.0.1"
-	}
+  "name": "gamutable",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --mode dev",
+    "build": "vite build --mode prod",
+    "watch": "vite build --watch --mode prod"
+  },
+  "dependencies": {
+    "@vueform/multiselect": "^2.6.6",
+    "jenesius-vue-modal": "^1.11.0",
+    "json5": "^2.2.3",
+    "luxon": "^3.4.4",
+    "typescript": "^5.3.3",
+    "vue": "^3.4.21",
+    "vue-cookie-next": "^1.3.0",
+    "vue-next-select": "^2.10.5",
+    "vue-papa-parse": "^3.1.0",
+    "vue3-selecto": "^1.12.3"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.29",
+    "@types/luxon": "^3.4.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.21",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.22.0",
+    "vite": "^5.1.4",
+    "vite-plugin-live-reload": "^3.0.3",
+    "vite-plugin-mkcert": "^1.17.4"
+  }
 }

vite.config.js

@@ -1,55 +1,60 @@
-import { defineConfig, splitVendorChunkPlugin } from "vite";
+// import { defineConfig, splitVendorChunkPlugin } from "vite";
+import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import liveReload from "vite-plugin-live-reload";
-import path from "path";
-import fs from "fs";
-import basicSsl from "@vitejs/plugin-basic-ssl";
+import path, { dirname } from "path";
+// import fs from "fs";
+import mkcert from 'vite-plugin-mkcert'
+import { fileURLToPath } from 'url'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-	plugins: [
-		vue({
-			template: {
-				transformAssetUrls: {
-					base: "plugins/gamutable",
-					includeAbsolute: false,
+export default defineConfig(({ mode }) => {
+	const __filename = fileURLToPath(import.meta.url)
+	const __dirname = dirname(__filename)
+	const port = 5134
+	return {
+		root: "src",
+		base: mode === "dev" ? "/" : "/dist/",
+
+		plugins: [
+			vue({
+				template: {
+					transformAssetUrls: {
+						base: "plugins/gamutable",
+						includeAbsolute: false,
+					},
 				},
+			}),
+			liveReload([__dirname + "/**/*.php", __dirname + "/**/*.html"]),
+			// splitVendorChunkPlugin(),
+			mkcert()
+		],
+
+		// config
+
+		build: {
+			outDir: "../dist",
+			emptyOutDir: true,
+			manifest: true,
+			// cssCodeSplit: false,
+
+			rollupOptions: {
+				input: path.resolve(__dirname, "src/gamutable.js"),
 			},
-		}),
-		liveReload([__dirname + "/**/*.php", __dirname + "/**/*.html"]),
-		splitVendorChunkPlugin(),
-		// basicSsl(),
-	],
-
-	// config
-	root: "src",
-	base: process.env.APP_ENV === "development" ? "/" : "/dist/",
-
-	build: {
-		outDir: "../dist",
-		emptyOutDir: true,
-		manifest: true,
-
-		rollupOptions: {
-			input: path.resolve(__dirname, "src/gamutable.js"),
 		},
-	},
 
-	server: {
-		strictPort: true,
-		port: 5134,
-		https: {
-			key: fs.readFileSync("certs/vite.key.pem"),
-			cert: fs.readFileSync("certs/vite.crt.pem"),
+		server: {
+			host: true,
+			port: port,
+			strictPort: true,
 		},
-		cors: true,
-	},
 
-	// required for in-browser template compilation
-	// https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation
-	resolve: {
-		alias: {
-			vue: "vue/dist/vue.esm-bundler.js",
+		// required for in-browser template compilation
+		// https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation
+		resolve: {
+			alias: {
+				vue: "vue/dist/vue.esm-bundler.js",
+			},
 		},
-	},
+	}
 });