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 { cspNonce: nonce, branchName: ref, projectPath } = 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, }); };