Add latest changes from gitlab-org/gitlab@15-9-stable-eev15.9.0-rc42

1 files changed, 39 insertions, 0 deletions

diff --git a/app/assets/javascripts/helpers/init_simple_app_helper.js b/app/assets/javascripts/helpers/init_simple_app_helper.js
new file mode 100644
index 00000000000..695fc455f13
--- /dev/null
+++ b/app/assets/javascripts/helpers/init_simple_app_helper.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+
+/**
+ * Initializes a component as a simple vue app, passing the necessary props. If the element
+ * has a data attribute named `data-view-model`, the content of that attributed will be
+ * converted from json and passed on to the component as a prop. The root component is then
+ * responsible for setting up it's children, injections, and other desired features.
+ *
+ * @param {string} selector css selector for where to build
+ * @param {Vue.component} component The Vue compoment to be built as the root of the app
+ *
+ * @example
+ * ```html
+ * <div id='#mount-here' data-view-model="{'some': 'object'}" />
+ * ```
+ *
+ * ```javascript
+ * initSimpleApp('#mount-here', MyApp)
+ * ```
+ *
+ * This will mount MyApp as root on '#mount-here'. It will receive {'some': 'object'} as it's
+ * view model prop.
+ */
+export const initSimpleApp = (selector, component) => {
+  const element = document.querySelector(selector);
+
+  if (!element) {
+    return null;
+  }
+
+  const props = element.dataset.viewModel ? JSON.parse(element.dataset.viewModel) : {};
+
+  return new Vue({
+    el: element,
+    render(h) {
+      return h(component, { props });
+    },
+  });
+};