Commit 09c9d756 authored by Paul Slaughter's avatar Paul Slaughter

Add custom bundlerURL to clientside preview

These are the FE changes that anticipate a parameter from the BE (in a
following commit)
parent 54b2524f
......@@ -21,7 +21,7 @@ export default {
};
},
computed: {
...mapState(['entries', 'promotionSvgPath', 'links']),
...mapState(['entries', 'promotionSvgPath', 'links', 'codesandboxBundlerUrl']),
...mapGetters(['packageJson', 'currentProject']),
normalizedEntries() {
return Object.keys(this.entries).reduce((acc, path) => {
......@@ -106,12 +106,7 @@ export default {
return this.loadFileContent(this.mainEntry)
.then(() => this.$nextTick())
.then(() => {
this.initManager('#ide-preview', this.sandboxOpts, {
fileResolver: {
isFile: p => Promise.resolve(Boolean(this.entries[createPathWithExt(p)])),
readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content),
},
});
this.initManager();
this.listener = listen(e => {
switch (e.type) {
......@@ -139,8 +134,18 @@ export default {
this.manager.updatePreview(this.sandboxOpts);
}, 250);
},
initManager(el, opts, resolver) {
this.manager = new Manager(el, opts, resolver);
initManager() {
const { codesandboxBundlerUrl: bundlerURL } = this;
const settings = {
fileResolver: {
isFile: p => Promise.resolve(Boolean(this.entries[createPathWithExt(p)])),
readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content),
},
...(bundlerURL ? { bundlerURL } : {}),
};
this.manager = new Manager('#ide-preview', this.sandboxOpts, settings);
},
},
};
......
......@@ -53,6 +53,7 @@ export function initIde(el, options = {}) {
clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled),
renderWhitespaceInCode: parseBoolean(el.dataset.renderWhitespaceInCode),
editorTheme: window.gon?.user_color_scheme || DEFAULT_THEME,
codesandboxBundlerUrl: el.dataset.codesandboxBundlerUrl,
});
},
methods: {
......
......@@ -34,4 +34,5 @@ export default () => ({
clientsidePreviewEnabled: false,
renderWhitespaceInCode: false,
editorTheme: DEFAULT_THEME,
codesandboxBundlerUrl: null,
});
---
title: Update Web IDE clientside preview bundler to use GitLab managed server
merge_request: 21520
author:
type: changed
......@@ -16,6 +16,17 @@ const dummyPackageJson = () => ({
main: 'index.js',
}),
});
const expectedSandpackOptions = () => ({
files: {},
entry: '/index.js',
showOpenInCodeSandbox: true,
});
const expectedSandpackSettings = () => ({
fileResolver: {
isFile: expect.any(Function),
readFile: expect.any(Function),
},
});
describe('IDE clientside preview', () => {
let wrapper;
......@@ -84,6 +95,46 @@ describe('IDE clientside preview', () => {
return waitForCalls();
});
it('creates sandpack manager', () => {
expect(smooshpack.Manager).toHaveBeenCalledWith(
'#ide-preview',
expectedSandpackOptions(),
expectedSandpackSettings(),
);
});
it('pings usage', () => {
expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(1);
});
});
describe('with codesandboxBundlerUrl', () => {
const TEST_BUNDLER_URL = 'https://test.gitlab-static.test';
beforeEach(() => {
createComponent({
getters: { packageJson: dummyPackageJson },
state: { codesandboxBundlerUrl: TEST_BUNDLER_URL },
});
return waitForCalls();
});
it('creates sandpack manager with bundlerURL', () => {
expect(smooshpack.Manager).toHaveBeenCalledWith('#ide-preview', expectedSandpackOptions(), {
...expectedSandpackSettings(),
bundlerURL: TEST_BUNDLER_URL,
});
});
});
describe('with codesandboxBundlerURL', () => {
beforeEach(() => {
createComponent({ getters: { packageJson: dummyPackageJson } });
return waitForCalls();
});
it('creates sandpack manager', () => {
expect(smooshpack.Manager).toHaveBeenCalledWith(
'#ide-preview',
......@@ -100,10 +151,6 @@ describe('IDE clientside preview', () => {
},
);
});
it('pings usage', () => {
expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(1);
});
});
describe('computed', () => {
......
......@@ -2779,6 +2779,11 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
codesandbox-api@0.0.23:
version "0.0.23"
resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.23.tgz#bf650a21b5f3c2369e03f0c19d10b4e2ba255b4f"
integrity sha512-fFGBkIghDkQILh7iHYlpZU5sfWncCDb92FQSFE4rR3VBcTfUsD5VZgpQi+JjZQuwWIdfl4cOhcIFrUYwshUezA==
codesandbox-api@^0.0.20:
version "0.0.20"
resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.20.tgz#174bcd76c9f31521175c6bceabc37da6b1fbc30b"
......@@ -10334,12 +10339,12 @@ slugify@^1.3.1:
resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.3.1.tgz#f572127e8535329fbc6c1edb74ab856b61ad7de2"
integrity sha512-6BwyhjF5tG5P8s+0DPNyJmBSBePG6iMyhjvIW5zGdA3tFik9PtK+yNkZgTeiroCRGZYgkHftFA62tGVK1EI9Kw==
smooshpack@^0.0.54:
version "0.0.54"
resolved "https://registry.yarnpkg.com/smooshpack/-/smooshpack-0.0.54.tgz#9044358b85052d348b801f385678c8a0c76f2bb6"
integrity sha512-yIwEWb17hqoW5IaWyzO6O6nxY89I5UdRoGIZy5hihoqXP9OYcoMbBTxKwS57MeXSKdNA2rtk86rlCcOgAYIgrA==
smooshpack@^0.0.62:
version "0.0.62"
resolved "https://registry.yarnpkg.com/smooshpack/-/smooshpack-0.0.62.tgz#cb31b9f808f73de3146b050f84d044eb353b5503"
integrity sha512-lFuJV2f504/U78sifWy0V2FyoE/8mTgOXM4DL918ncNxAxbtu236XSCLAH3SQwXZWn0JdmRnWs/XU4+sIUVVmQ==
dependencies:
codesandbox-api "^0.0.20"
codesandbox-api "0.0.23"
codesandbox-import-utils "^1.2.3"
lodash.isequal "^4.5.0"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment