build(deps): Bump from vue 2 to vue 3

esbuild/esbuild.js

@@ -3,11 +3,12 @@ const path = require("path");
 const fs = require("fs");
 const glob = require("fast-glob");
 const esbuild = require("esbuild");
-const vue = require("esbuild-vue");
+const vue = require("esbuild-plugin-vue3");
 const yargs = require("yargs");
 const cliui = require("cliui")();
 const chalk = require("chalk");
 const html_plugin = require("./frappe-html");
+const vue_style_plugin = require("./frappe-vue-style");
 const rtlcss = require("rtlcss");
 const postCssPlugin = require("@frappe/esbuild-plugin-postcss2").default;
 const ignore_assets = require("./ignore-assets");
@@ -155,7 +156,7 @@ function build_assets_for_apps(apps, files) {
 				style_file_map[output_name] = file;
 				rtl_style_file_map[output_name.replace("/css/", "/css-rtl/")] = file;
 			} else {
-				file_map[output_name] = file;
+				file_map[output_name.replace("/js/", "/")] = file;
 			}
 		}
 		let build = build_files({
@@ -218,8 +219,9 @@ function get_files_to_build(files) {
 }
 
 function build_files({ files, outdir }) {
-	let build_plugins = [html_plugin, build_cleanup_plugin, vue()];
+	let build_plugins = [vue(), html_plugin, build_cleanup_plugin, vue_style_plugin];
-	return esbuild.build(get_build_options(files, outdir, build_plugins));
+	let entry_names = "[dir]/[ext]/[name].[hash]";
+	return esbuild.build(get_build_options(files, outdir, build_plugins, entry_names));
 }
 
 function build_style_files({ files, outdir, rtl_style = false }) {
@@ -241,10 +243,11 @@ function build_style_files({ files, outdir, rtl_style = false }) {
 	return esbuild.build(get_build_options(files, outdir, build_plugins));
 }
 
-function get_build_options(files, outdir, plugins) {
+function get_build_options(files, outdir, plugins, entry_names) {
+	let entryNames = entry_names || "[dir]/[name].[hash]";
 	return {
 		entryPoints: files,
-		entryNames: "[dir]/[name].[hash]",
+		entryNames,
 		target: ["es2017"],
 		outdir,
 		sourcemap: true,
@@ -254,6 +257,8 @@ function get_build_options(files, outdir, plugins) {
 		nodePaths: NODE_PATHS,
 		define: {
 			"process.env.NODE_ENV": JSON.stringify(PRODUCTION ? "production" : "development"),
+			"__VUE_OPTIONS_API__": JSON.stringify(true),
+			"__VUE_PROD_DEVTOOLS__": JSON.stringify(false),
 		},
 		plugins: plugins,
 		watch: get_watch_config(),
@@ -378,6 +383,16 @@ async function write_assets_json(metafile) {
 				key = `rtl_${key}`;
 			}
 			out[key] = asset_path;
+		} else if (Object.keys(info.inputs).length !== 0) {
+			for (let input in info.inputs) {
+				if (input.includes(".vue?type=style")) {
+					// remove hash from css file name
+					let key = path.basename(asset_path);
+					key = key.split('.css')[0];
+					key = key.substring(0, key.lastIndexOf(".")) + '.css';
+					out[key] = asset_path;
+				}
+			}
 		}
 	}
 

esbuild/frappe-vue-style.js

@@ -0,0 +1,48 @@
+const fs = require("fs");
+const path = require("path");
+const { sites_path } = require("./utils");
+
+module.exports = {
+	name: "frappe-vue-style",
+	setup(build) {
+		build.initialOptions.write = false;
+		build.onEnd((result) => {
+			let files = get_files(result.metafile.outputs);
+			let keys = Object.keys(files);
+			for (let out of result.outputFiles) {
+				let asset_path = "/" + path.relative(sites_path, out.path);
+				let dir = path.dirname(out.path);
+				if (out.path.endsWith(".js") && keys.includes(asset_path)) {
+					let bundle_css = files[asset_path];
+					let include_css = '\nfrappe.require("' + bundle_css + '");\n';
+					let modified = include_css + out.text;
+					out.contents = Buffer.from(modified);
+				}
+				if (!fs.existsSync(dir)){
+					fs.mkdirSync(dir);
+				}
+				fs.writeFile(out.path, out.contents, (err) => {
+					err && console.error(err);
+				});
+			}
+		});
+	},
+};
+
+function get_files(files) {
+	let result = {};
+	for (let file in files) {
+		let info = files[file];
+		let asset_path = "/" + path.relative(sites_path, file);
+		if (info && info.entryPoint && Object.keys(info.inputs).length !== 0) {
+			for (let input in info.inputs) {
+				if (input.includes(".vue?type=style")) {
+					let bundle_css = path.basename(info.entryPoint).replace(".js", ".css");
+					result[asset_path] = bundle_css;
+					break;
+				}
+			}
+		}
+	}
+	return result;
+}

package.json

@@ -58,23 +58,23 @@
     "sortablejs": "1.9.0",
     "superagent": "^3.8.2",
     "touch": "^3.1.0",
-    "vue": "2.6.14",
+    "vue": "3.2.39",
-    "vue-router": "^2.0.0",
+    "vue-router": "^4.1.5",
     "vuedraggable": "^2.24.3",
-    "vuex": "3",
+    "vuex": "4.0.2",
     "@frappe/esbuild-plugin-postcss2": "^0.1.3",
     "@vue/component-compiler": "^4.2.4",
     "autoprefixer": "10",
     "chalk": "^2.3.2",
     "cliui": "^7.0.4",
     "esbuild": "^0.14.29",
-    "esbuild-vue": "^1.2.1",
+    "esbuild-plugin-vue3": "^0.3.0",
     "fast-glob": "^3.2.5",
     "launch-editor": "^2.2.1",
     "md5": "^2.3.0",
     "postcss": "8",
     "rtlcss": "^3.2.1",
-    "vue-template-compiler": "2.6.14",
+    "@vue/compiler-sfc": "^3.2.39",
     "yargs": "^17.5.1"
   },
   "snyk": true,