From ebb72d2da83858ee7ed6efd559dbac2d97f80713 Mon Sep 17 00:00:00 2001 From: Randy Merrill Date: Sat, 14 Aug 2021 07:57:30 -0600 Subject: [PATCH] fix: Load the preview url without waiting for the file to load. (#240) --- src/ts/editor/state.ts | 96 ++++++++++--------------- src/ts/editor/ui/parts/preview.ts | 2 +- src/ts/editor/ui/parts/preview/frame.ts | 4 +- 3 files changed, 41 insertions(+), 61 deletions(-) diff --git a/src/ts/editor/state.ts b/src/ts/editor/state.ts index c3a6b2f5..9fd840f7 100644 --- a/src/ts/editor/state.ts +++ b/src/ts/editor/state.ts @@ -89,6 +89,10 @@ export class EditorState extends ListenersMixin(Base) { * Value is null when the file is not found or fails to load. */ file?: EditorFileData | null; + /** + * File preview url + */ + filePreviewUrl?: string | null; /** * Editor history. */ @@ -389,55 +393,6 @@ export class EditorState extends ListenersMixin(Base) { ); } - /** - * When loading a file the url may not be defined and needs to be verified. - * If a preview server is defined in the project config the preview server - * settings are loaded to check for a url defined by the preview server. - */ - protected ensureFileUrl() { - // If there is no url for the file, check if the preview server - // knows how to preview the file. - if (this.file && !this.file.url) { - const originalPath = this.file.file.path; - const updateFileUrl = (previewSettings: PreviewSettings | null) => { - // If the path has changed then we have moved on, nothing to see here. - if (originalPath !== this.file?.file.path) { - return; - } - - if ( - previewSettings && - this.file?.file.path && - this.file?.file.path in previewSettings.routes - ) { - const baseUrl = interpolatePreviewUrl( - this.project?.preview as EditorPreviewSettings, - this.workspace as WorkspaceData - ); - const route = previewSettings.routes[this.file?.file.path]; - - if ((route as PreviewRoutesMetaData).path) { - this.file.url = `${baseUrl}${( - route as PreviewRoutesMetaData - ).path.replace(REGEX_START_SLASH, '')}`; - } else { - this.file.url = `${baseUrl}${(route as PreviewRoutesLocaleData)[ - previewSettings.defaultLocale - ].path.replace(REGEX_START_SLASH, '')}`; - } - - this.render(); - } - }; - - if (this.previewConfig === undefined) { - this.getPreviewConfig(updateFileUrl); - } else { - updateFileUrl(this.previewConfig); - } - } - } - /** * Lazy load of files data. * @@ -529,18 +484,14 @@ export class EditorState extends ListenersMixin(Base) { return; } - // Start the loading of the preview configuration before waiting - // for a full file load response. - this.previewConfigOrGetPreviewConfig(); + // Update the preview url for the path. + this.updateFilePreviewUrl(file.path); this.promises[promiseKey] = this.api .getFile(file) .then(data => { this.file = data; - // Update the file url as it may not be not defined. - this.ensureFileUrl(); - // Loading is complete, remove the loading file information. this.loadingFilePath = undefined; @@ -1001,9 +952,6 @@ export class EditorState extends ListenersMixin(Base) { .then(data => { this.file = data; - // Update the file url as it may not be not defined. - this.ensureFileUrl(); - // Reload the workspace from the api. // Refreshes the publish status. this.workspace = this.getWorkspace(); @@ -1063,6 +1011,38 @@ export class EditorState extends ListenersMixin(Base) { document.title = parts.join(' — '); } + protected updateFilePreviewUrl(path: string) { + const updateUrl = (previewSettings: PreviewSettings | null) => { + if (previewSettings && path in previewSettings.routes) { + const baseUrl = interpolatePreviewUrl( + this.project?.preview as EditorPreviewSettings, + this.workspace as WorkspaceData + ); + const route = previewSettings.routes[path]; + + if ((route as PreviewRoutesMetaData).path) { + this.filePreviewUrl = `${baseUrl}${( + route as PreviewRoutesMetaData + ).path.replace(REGEX_START_SLASH, '')}`; + } else { + this.filePreviewUrl = `${baseUrl}${(route as PreviewRoutesLocaleData)[ + previewSettings.defaultLocale + ].path.replace(REGEX_START_SLASH, '')}`; + } + + this.render(); + } else { + this.filePreviewUrl = null; + } + }; + + if (this.previewConfig === undefined) { + this.getPreviewConfig(updateUrl); + } else { + updateUrl(this.previewConfig); + } + } + /** * Lazy load of workspace data. * diff --git a/src/ts/editor/ui/parts/preview.ts b/src/ts/editor/ui/parts/preview.ts index 6cae2ce3..1676f015 100644 --- a/src/ts/editor/ui/parts/preview.ts +++ b/src/ts/editor/ui/parts/preview.ts @@ -105,7 +105,7 @@ export class PreviewPart extends BasePart implements UiPartComponent { pieces.push(this.partToolbar.template()); - if (this.config.state.file?.url) { + if (this.config.state.filePreviewUrl) { pieces.push( this.partFrame.template( this.partToolbar.device, diff --git a/src/ts/editor/ui/parts/preview/frame.ts b/src/ts/editor/ui/parts/preview/frame.ts index 3807a138..9ae6de7c 100644 --- a/src/ts/editor/ui/parts/preview/frame.ts +++ b/src/ts/editor/ui/parts/preview/frame.ts @@ -143,7 +143,7 @@ export class PreviewFramePart extends BasePart implements UiPartComponent { // Needs to be manually set in JS since the html src does not change the // value and will not trigger a refresh like it will in JS. (iframe as HTMLIFrameElement).src = - this.config.state.file?.url || (iframe as HTMLIFrameElement).src; + this.config.state.filePreviewUrl || (iframe as HTMLIFrameElement).src; } } @@ -168,7 +168,7 @@ export class PreviewFramePart extends BasePart implements UiPartComponent { })} >