diff options
author | Phil Hughes <me@iamphill.com> | 2018-06-13 19:06:35 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-08-07 16:45:55 +0300 |
commit | 7b4b9e1cc453c2620502daceb94d3e2248b58dcb (patch) | |
tree | 96f79cdace962466a0a27d31c91dbdbc82d4bd88 /app/assets/javascripts/ide/index.js | |
parent | f3b36ac1171f6d170d008c52a0a324a438f3e886 (diff) |
Web IDE & CodeSandbox
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
Diffstat (limited to 'app/assets/javascripts/ide/index.js')
-rw-r--r-- | app/assets/javascripts/ide/index.js | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index 2d74192e6b3..79e38ae911e 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -4,6 +4,7 @@ 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); @@ -23,13 +24,18 @@ export function initIde(el) { 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']), + ...mapActions(['setEmptyStateSvgs', 'setLinks', 'setInitialData']), }, render(createElement) { return createElement('ide'); |