1 files changed, 30 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js
new file mode 100644
index 00000000000..a061da38d4f
--- /dev/null
+++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js
@@ -0,0 +1,30 @@
+import { cleanTrailingSlash } from './stores/utils';
+
+export const initGitlabWebIDE = async (el) => {
+  const { start } = await import('@gitlab/web-ide');
+
+  const { gitlab_url: gitlabUrl } = window.gon;
+  const baseUrl = new URL(process.env.GITLAB_WEB_IDE_PUBLIC_PATH, window.location.origin);
+
+  // what: Pull what we need from the element. We will replace it soon.
+  const { path_with_namespace: projectPath } = JSON.parse(el.dataset.project);
+  const { cspNonce: nonce, branchName: ref } = el.dataset;
+
+  // what: Clean up the element, but preserve id.
+  // why:  This way we don't inherit any `ide-loading` side-effects. This
+  //       mirrors the behavior of Vue when it mounts to an element.
+  const newEl = document.createElement(el.tagName);
+  newEl.id = el.id;
+  newEl.classList.add('gl--flex-center', 'gl-relative', 'gl-h-full');
+
+  el.replaceWith(newEl);
+
+  // what: Trigger start on our new mounting element
+  await start(newEl, {
+    baseUrl: cleanTrailingSlash(baseUrl.href),
+    projectPath,
+    gitlabUrl,
+    ref,
+    nonce,
+  });
+};