Frontend refactor: move Vue related code from `index.js` to `components` dir, and remove unused codes. (#17301)

* frontend refactor

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Update templates/base/head.tmpl

Co-authored-by: delvh <dev.lh@web.de>

* Update docs/content/doc/developers/guidelines-frontend.md

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

* fix typo

* fix typo

* refactor PageData to pageData

* Apply suggestions from code review

Co-authored-by: delvh <dev.lh@web.de>

* Simply for the visual difference.

Co-authored-by: delvh <dev.lh@web.de>

* Revert "Apply suggestions from code review"

This reverts commit 4d78ad9b0e96ca180e0823de17659a2e0814c099.

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>

1 files changed, 52 insertions, 0 deletions

diff --git a/web_src/js/components/VueComponentLoader.js b/web_src/js/components/VueComponentLoader.js
new file mode 100644
index 0000000000..6b2a2cbd58
--- /dev/null
+++ b/web_src/js/components/VueComponentLoader.js
@@ -0,0 +1,52 @@
+import Vue from 'vue';
+import {svgs} from '../svg.js';
+
+const vueDelimiters = ['${', '}'];
+
+let vueEnvInited = false;
+function initVueEnv() {
+  if (vueEnvInited) return;
+  vueEnvInited = true;
+
+  const isProd = window.config.IsProd;
+  Vue.config.productionTip = false;
+  Vue.config.devtools = !isProd;
+}
+
+let vueSvgInited = false;
+function initVueSvg() {
+  if (vueSvgInited) return;
+  vueSvgInited = true;
+
+  // register svg icon vue components, e.g. <octicon-repo size="16"/>
+  for (const [name, htmlString] of Object.entries(svgs)) {
+    const template = htmlString
+      .replace(/height="[0-9]+"/, 'v-bind:height="size"')
+      .replace(/width="[0-9]+"/, 'v-bind:width="size"');
+
+    Vue.component(name, {
+      props: {
+        size: {
+          type: String,
+          default: '16',
+        },
+      },
+      template,
+    });
+  }
+}
+
+
+function initVueApp(el, opts = {}) {
+  if (typeof el === 'string') {
+    el = document.querySelector(el);
+  }
+  if (!el) return null;
+
+  return new Vue(Object.assign({
+    el,
+    delimiters: vueDelimiters,
+  }, opts));
+}
+
+export {vueDelimiters, initVueEnv, initVueSvg, initVueApp};