From 44e9f6b9abff67186ba3d4ca8bb1e508065af58f Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Wed, 28 Sep 2022 14:55:07 +0530 Subject: [PATCH] build(deps): Bump from vue 2 to vue 3 --- esbuild/esbuild.js | 27 ++++++++++++++++----- esbuild/frappe-vue-style.js | 48 +++++++++++++++++++++++++++++++++++++ package.json | 10 ++++---- 3 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 esbuild/frappe-vue-style.js diff --git a/esbuild/esbuild.js b/esbuild/esbuild.js index 69e479a6ff..ad7e8e741a 100644 --- a/esbuild/esbuild.js +++ b/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()]; - return esbuild.build(get_build_options(files, outdir, build_plugins)); + let build_plugins = [vue(), html_plugin, build_cleanup_plugin, vue_style_plugin]; + 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; + } + } } } diff --git a/esbuild/frappe-vue-style.js b/esbuild/frappe-vue-style.js new file mode 100644 index 0000000000..8147aec777 --- /dev/null +++ b/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; +} diff --git a/package.json b/package.json index 18063c69cf..b1252a1b83 100644 --- a/package.json +++ b/package.json @@ -58,23 +58,23 @@ "sortablejs": "1.9.0", "superagent": "^3.8.2", "touch": "^3.1.0", - "vue": "2.6.14", - "vue-router": "^2.0.0", + "vue": "3.2.39", + "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,