7b4b9e1cc4
This enables JavaScripts projects to have live previews straight in the browser without requiring any local configuration. This uses the CodeSandbox package `sandpack` to compile it all inside of an iframe. This feature is off by default and can be toggled on in the admin settings. Only projects with a `package.json` and a `main` key are supported. Updates happen in real-time with hot-reloading. We just watch for changes to files and then send them to `sandpack` to allow it to reload the iframe. The iframe includes a very simple navigation bar, the text bar is `readonly` to stop users navigating away from the preview and the back and forward buttons just pop/splice the navigation stack which is tracked by a listener on `sandpack` There is a button inside the iframe which allows the user to open the projects inside of CodeSandbox. This button is only visible on **public** projects. On private or internal projects this button get hidden to protect private code being leaked into an external public URL. Closes #47268
54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
import Vue from 'vue';
|
|
import { mapActions } from 'vuex';
|
|
import Translate from '~/vue_shared/translate';
|
|
import ide from './components/ide.vue';
|
|
import store from './stores';
|
|
import router from './ide_router';
|
|
import { convertPermissionToBoolean } from '../lib/utils/common_utils';
|
|
|
|
Vue.use(Translate);
|
|
|
|
export function initIde(el) {
|
|
if (!el) return null;
|
|
|
|
return new Vue({
|
|
el,
|
|
store,
|
|
router,
|
|
components: {
|
|
ide,
|
|
},
|
|
created() {
|
|
this.setEmptyStateSvgs({
|
|
emptyStateSvgPath: el.dataset.emptyStateSvgPath,
|
|
noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
|
|
committedStateSvgPath: el.dataset.committedStateSvgPath,
|
|
pipelinesEmptyStateSvgPath: el.dataset.pipelinesEmptyStateSvgPath,
|
|
promotionSvgPath: el.dataset.promotionSvgPath,
|
|
});
|
|
this.setLinks({
|
|
ciHelpPagePath: el.dataset.ciHelpPagePath,
|
|
webIDEHelpPagePath: el.dataset.webIdeHelpPagePath,
|
|
});
|
|
this.setInitialData({
|
|
clientsidePreviewEnabled: convertPermissionToBoolean(el.dataset.clientsidePreviewEnabled),
|
|
});
|
|
},
|
|
methods: {
|
|
...mapActions(['setEmptyStateSvgs', 'setLinks', 'setInitialData']),
|
|
},
|
|
render(createElement) {
|
|
return createElement('ide');
|
|
},
|
|
});
|
|
}
|
|
|
|
// tell webpack to load assets from origin so that web workers don't break
|
|
export function resetServiceWorkersPublicPath() {
|
|
// __webpack_public_path__ is a global variable that can be used to adjust
|
|
// the webpack publicPath setting at runtime.
|
|
// see: https://webpack.js.org/guides/public-path/
|
|
const relativeRootPath = (gon && gon.relative_url_root) || '';
|
|
const webpackAssetPath = `${relativeRootPath}/assets/webpack/`;
|
|
__webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase
|
|
}
|