Skip to content

feat: add download format selector #2056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kpal81xd wants to merge 3 commits into
base: main
Choose a base branch
from
+140 −29
Open

feat: add download format selector #2056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33cec60
feat: add npm project download option
kpal81xd May 13, 2026
897ff8a
feat: use download format selector
kpal81xd May 14, 2026
c8a8b25
style: clarify download format label
kpal81xd May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion sass/editor/_editor-main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
162 changes: 134 additions & 28 deletions src/editor/pickers/picker-publish-new.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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({
Expand All @@ -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
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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;
}
}
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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;
Expand Down