diff --git a/sass/editor/_editor-main.scss b/sass/editor/_editor-main.scss index a26fcec9d..fa8f1e968 100644 --- a/sass/editor/_editor-main.scss +++ b/sass/editor/_editor-main.scss @@ -3886,10 +3886,15 @@ strong { } } - .pcui-select-input.engine-version-dropdown { + .pcui-select-input.engine-version-dropdown, + .pcui-select-input.download-format-dropdown { margin: 0; } + .pcui-select-input.download-format-dropdown { + width: 100%; + } + > .options > .pcui-container.field { line-height: 24px; diff --git a/src/editor/pickers/picker-publish-new.ts b/src/editor/pickers/picker-publish-new.ts index 667d36763..097f50646 100644 --- a/src/editor/pickers/picker-publish-new.ts +++ b/src/editor/pickers/picker-publish-new.ts @@ -9,6 +9,7 @@ import { config } from '@/editor/config'; const DOWNLOAD_FORMAT_STATIC = 'static'; const DOWNLOAD_FORMAT_WEB_LENS = 'web_lens'; +const DOWNLOAD_FORMAT_NPM = 'npm'; editor.once('load', () => { const legacyScripts = editor.call('settings:project').get('useLegacyScripts'); @@ -19,7 +20,7 @@ editor.once('load', () => { // holds events that need to be destroyed let events: EventHandle[] = []; - let containerOptionsWebLens: Container | null = null; + let containerDownloadOptions: Container | null = null; // root container const container = new Container({ @@ -39,16 +40,23 @@ editor.once('load', () => { mode = 'publish'; editor.call('picker:project', 'publish-new'); container.class.remove('download-mode'); - containerOptionsWebLens.hidden = true; + if (containerDownloadOptions) { + containerDownloadOptions.hidden = true; + } + if (fieldDownloadFormat) { + fieldDownloadFormat.value = DOWNLOAD_FORMAT_STATIC; + } + refreshDownloadFormatOptions(); }); editor.method('picker:publish:download', () => { mode = 'download'; editor.call('picker:project', 'publish-download'); container.class.add('download-mode'); - if (config.self.flags.superUser) { - containerOptionsWebLens.hidden = false; + if (containerDownloadOptions) { + containerDownloadOptions.hidden = false; } + refreshDownloadFormatOptions(); }); // info panel @@ -258,16 +266,27 @@ editor.once('load', () => { containerEngineVersion.append(engineVersionDropdown); container.append(containerEngineVersion); - let fieldOptionsConcat: BooleanInput; - let fieldOptionsMinify: BooleanInput; - let fieldOptionsSourcemaps: BooleanInput; - let fieldOptionsOptimizeSceneFormat: BooleanInput; - let fieldOptionsWebLens: BooleanInput; + let fieldOptionsConcat: BooleanInput | null = null; + let fieldOptionsMinify: BooleanInput | null = null; + let fieldOptionsSourcemaps: BooleanInput | null = null; + let fieldOptionsOptimizeSceneFormat: BooleanInput | null = null; + let fieldDownloadFormat: SelectInput | null = null; + let containerBuildOptions: Container | null = null; + let rowOptionsMinify: Container | null = null; + let rowOptionsSourcemaps: Container | null = null; + let optionsBeforeNpmProject: { + concatenate: boolean, + minify: boolean, + sourcemaps: boolean, + optimizeSceneFormat: boolean + } | null = null; + let refreshingDownloadFormatOptions = false; if (!legacyScripts) { const containerOptions = new Container({ class: 'options' }); + containerBuildOptions = containerOptions; container.append(containerOptions); const labelOptions = new Label({ @@ -300,27 +319,115 @@ editor.once('load', () => { const optMinify = createOption('Minify Scripts', true); const optSourcemaps = createOption('Generate Source Maps', false); const optOptimizeFormat = createOption('Optimize Scene Format', false); - const optWebLens = createOption('Export to WebLens Format', false); fieldOptionsConcat = optConcat.input; fieldOptionsMinify = optMinify.input; fieldOptionsSourcemaps = optSourcemaps.input; fieldOptionsOptimizeSceneFormat = optOptimizeFormat.input; - fieldOptionsWebLens = optWebLens.input; + rowOptionsMinify = optMinify.row; + rowOptionsSourcemaps = optSourcemaps.row; - containerOptionsWebLens = optWebLens.row; - containerOptionsWebLens.hidden = true; + fieldOptionsConcat.on('change', () => { + refreshDownloadFormatOptions(); + }); - fieldOptionsConcat.on('change', (value: boolean) => { - optMinify.row.hidden = !value; - optSourcemaps.row.hidden = !fieldOptionsMinify.value || !value; + fieldOptionsMinify.on('change', () => { + refreshDownloadFormatOptions(); }); + } - fieldOptionsMinify.on('change', (value: boolean) => { - optSourcemaps.row.hidden = !value; + containerDownloadOptions = new Container({ + class: 'options' + }); + container.append(containerDownloadOptions); + containerDownloadOptions.hidden = true; + + const labelDownloadOptions = new Label({ + text: 'Download Format', + class: 'field-label' + }); + containerDownloadOptions.append(labelDownloadOptions); + + const downloadFormatOptions = [{ + t: 'Static Website', + v: DOWNLOAD_FORMAT_STATIC + }, { + t: 'NPM + Vite Project (WIP)', + v: DOWNLOAD_FORMAT_NPM + }]; + + if (config.self.flags.superUser) { + downloadFormatOptions.splice(1, 0, { + t: 'Snapchat Web Lens', + v: DOWNLOAD_FORMAT_WEB_LENS }); } + fieldDownloadFormat = new SelectInput({ + class: 'download-format-dropdown', + value: DOWNLOAD_FORMAT_STATIC, + options: downloadFormatOptions + }); + containerDownloadOptions.append(fieldDownloadFormat); + + fieldDownloadFormat.on('change', () => { + refreshDownloadFormatOptions(); + }); + + function refreshDownloadFormatOptions() { + if (refreshingDownloadFormatOptions) { + return; + } + + refreshingDownloadFormatOptions = true; + + const npmProject = fieldDownloadFormat?.value === DOWNLOAD_FORMAT_NPM; + if (fieldOptionsConcat && fieldOptionsMinify && fieldOptionsSourcemaps && fieldOptionsOptimizeSceneFormat) { + if (npmProject) { + if (!optionsBeforeNpmProject) { + optionsBeforeNpmProject = { + concatenate: fieldOptionsConcat.value, + minify: fieldOptionsMinify.value, + sourcemaps: fieldOptionsSourcemaps.value, + optimizeSceneFormat: fieldOptionsOptimizeSceneFormat.value + }; + } + + fieldOptionsConcat.value = false; + fieldOptionsMinify.value = false; + fieldOptionsSourcemaps.value = false; + fieldOptionsOptimizeSceneFormat.value = false; + } else if (optionsBeforeNpmProject) { + fieldOptionsConcat.value = optionsBeforeNpmProject.concatenate; + fieldOptionsMinify.value = optionsBeforeNpmProject.minify; + fieldOptionsSourcemaps.value = optionsBeforeNpmProject.sourcemaps; + fieldOptionsOptimizeSceneFormat.value = optionsBeforeNpmProject.optimizeSceneFormat; + optionsBeforeNpmProject = null; + } + + fieldOptionsConcat.disabled = npmProject; + fieldOptionsMinify.disabled = npmProject; + fieldOptionsSourcemaps.disabled = npmProject; + fieldOptionsOptimizeSceneFormat.disabled = npmProject; + } + + if (containerBuildOptions) { + containerBuildOptions.disabled = npmProject; + containerBuildOptions.hidden = npmProject; + } + + if (!npmProject && fieldOptionsConcat && fieldOptionsMinify) { + if (rowOptionsMinify) { + rowOptionsMinify.hidden = !fieldOptionsConcat.value; + } + if (rowOptionsSourcemaps) { + rowOptionsSourcemaps.hidden = !fieldOptionsMinify.value || !fieldOptionsConcat.value; + } + } + + refreshingDownloadFormatOptions = false; + } + // scenes const containerScenes = new Container({ class: 'scenes' @@ -448,7 +555,7 @@ editor.once('load', () => { if (fieldOptionsMinify) { data.scripts_minify = fieldOptionsMinify.value; - if (fieldOptionsConcat.value && fieldOptionsMinify.value && fieldOptionsSourcemaps.value) { + if (fieldOptionsConcat?.value && fieldOptionsMinify.value && fieldOptionsSourcemaps?.value) { data.scripts_sourcemaps = true; } } @@ -457,10 +564,6 @@ editor.once('load', () => { data.optimize_scene_format = fieldOptionsOptimizeSceneFormat.value; } - if (fieldOptionsWebLens) { - data.web_lens = fieldOptionsWebLens.value; - } - data.engine_version = config.engineVersions[engineVersionDropdown.value].version; editor.api.globals.rest.apps.appCreate(data).on('load', () => { @@ -488,17 +591,20 @@ editor.once('load', () => { refreshButtonsState(); + const format = fieldDownloadFormat?.value ?? DOWNLOAD_FORMAT_STATIC; + const npmProject = format === DOWNLOAD_FORMAT_NPM; + // post data const data = { name: inputName.value, project_id: config.project.id, branch_id: config.self.branch.id, scenes: getSelectedScenes(), - scripts_concatenate: fieldOptionsConcat ? fieldOptionsConcat.value : false, - scripts_minify: fieldOptionsMinify ? fieldOptionsMinify.value : false, - scripts_sourcemaps: fieldOptionsMinify && fieldOptionsMinify.value && fieldOptionsSourcemaps.value, - optimize_scene_format: fieldOptionsOptimizeSceneFormat ? fieldOptionsOptimizeSceneFormat.value : false, - format: fieldOptionsWebLens?.value ? DOWNLOAD_FORMAT_WEB_LENS : DOWNLOAD_FORMAT_STATIC + scripts_concatenate: !npmProject && !!fieldOptionsConcat?.value, + scripts_minify: !npmProject && !!fieldOptionsMinify?.value, + scripts_sourcemaps: !npmProject && !!fieldOptionsMinify?.value && !!fieldOptionsSourcemaps?.value, + optimize_scene_format: !npmProject && !!fieldOptionsOptimizeSceneFormat?.value, + format }; data.engine_version = config.engineVersions[engineVersionDropdown.value].version;