[GLJS-1075] Fix loading of [email protected]+ (internal-2599)

Author: underoot

src/source/rtl_text_plugin.ts

@@ -6,15 +6,17 @@ import {isWorker} from '../util/util';
 
 import type {Callback} from '../types/callback';
 
-const status = {
+export const rtlPluginStatus = {
     unavailable: 'unavailable', // Not loaded
     deferred: 'deferred', // The plugin URL has been specified, but loading has been deferred
     loading: 'loading', // request in-flight
+    parsing: 'parsing',
+    parsed: 'parsed',
     loaded: 'loaded',
     error: 'error'
 };
 
-export type PluginStatus = typeof status[keyof typeof status];
+export type PluginStatus = typeof rtlPluginStatus[keyof typeof rtlPluginStatus];
 
 export type PluginState = {
     pluginStatus: PluginStatus;
@@ -25,14 +27,14 @@ type PluginStateSyncCallback = (state: PluginState) => void;
 let _completionCallback = null;
 
 //Variables defining the current state of the plugin
-let pluginStatus: PluginStatus = status.unavailable;
+let pluginStatus: PluginStatus = rtlPluginStatus.unavailable;
 let pluginURL: string | null | undefined = null;
 
 export const triggerPluginCompletionEvent = function (error?: Error | null) {
     // NetworkError's are not correctly reflected by the plugin status which prevents reloading plugin
 // @ts-expect-error - TS2339 - Property 'indexOf' does not exist on type 'never'.
     if (error && typeof error === 'string' && error.indexOf('NetworkError') > -1) {
-        pluginStatus = status.error;
+        pluginStatus = rtlPluginStatus.error;
     }
 
     if (_completionCallback) {
@@ -63,18 +65,18 @@ export const registerForPluginStateChange = function (callback: PluginStateSyncC
 };
 
 export const clearRTLTextPlugin = function () {
-    pluginStatus = status.unavailable;
+    pluginStatus = rtlPluginStatus.unavailable;
     pluginURL = null;
 };
 
 export const setRTLTextPlugin = function (url: string, callback?: Callback<{
     err: Error | null | undefined;
 }> | null, deferred: boolean = false) {
-    if (pluginStatus === status.deferred || pluginStatus === status.loading || pluginStatus === status.loaded) {
+    if (pluginStatus === rtlPluginStatus.deferred || pluginStatus === rtlPluginStatus.loading || pluginStatus === rtlPluginStatus.loaded) {
         throw new Error('setRTLTextPlugin cannot be called multiple times.');
     }
     pluginURL = browser.resolveURL(url);
-    pluginStatus = status.deferred;
+    pluginStatus = rtlPluginStatus.deferred;
     _completionCallback = callback;
     sendPluginStateToWorker();
 
@@ -85,17 +87,17 @@ export const setRTLTextPlugin = function (url: string, callback?: Callback<{
 };
 
 export const downloadRTLTextPlugin = function () {
-    if (pluginStatus !== status.deferred || !pluginURL) {
+    if (pluginStatus !== rtlPluginStatus.deferred || !pluginURL) {
         throw new Error('rtl-text-plugin cannot be downloaded unless a pluginURL is specified');
     }
-    pluginStatus = status.loading;
+    pluginStatus = rtlPluginStatus.loading;
     sendPluginStateToWorker();
     if (pluginURL) {
         getArrayBuffer({url: pluginURL}, (error) => {
             if (error) {
                 triggerPluginCompletionEvent(error);
             } else {
-                pluginStatus = status.loaded;
+                pluginStatus = rtlPluginStatus.loaded;
                 sendPluginStateToWorker();
             }
         });
@@ -109,6 +111,7 @@ export type RtlTextPlugin = {
     isLoaded: () => boolean;
     isLoading: () => boolean;
     setState: (state: PluginState) => void;
+    isParsing: () => boolean;
     isParsed: () => boolean;
     getPluginURL: () => string | null | undefined;
 };
@@ -118,24 +121,27 @@ export const plugin: RtlTextPlugin = {
     processBidirectionalText: null,
     processStyledBidirectionalText: null,
     isLoaded() {
-        return pluginStatus === status.loaded || // Main Thread: loaded if the completion callback returned successfully
+        return pluginStatus === rtlPluginStatus.loaded || // Main Thread: loaded if the completion callback returned successfully
             plugin.applyArabicShaping != null; // Web-worker: loaded if the plugin functions have been compiled
     },
     isLoading() { // Main Thread Only: query the loading status, this function does not return the correct value in the worker context.
-        return pluginStatus === status.loading;
+        return pluginStatus === rtlPluginStatus.loading;
     },
     setState(state: PluginState) { // Worker thread only: this tells the worker threads that the plugin is available on the Main thread
         assert(isWorker(self), 'Cannot set the state of the rtl-text-plugin when not in the web-worker context');
 
         pluginStatus = state.pluginStatus;
         pluginURL = state.pluginURL;
     },
+    isParsing(): boolean {
+        assert(isWorker(self), 'rtl-text-plugin is only parsed on the worker-threads');
+
+        return pluginStatus === rtlPluginStatus.parsing;
+    },
     isParsed(): boolean {
         assert(isWorker(self), 'rtl-text-plugin is only parsed on the worker-threads');
 
-        return plugin.applyArabicShaping != null &&
-            plugin.processBidirectionalText != null &&
-            plugin.processStyledBidirectionalText != null;
+        return pluginStatus === rtlPluginStatus.parsed;
     },
     getPluginURL(): string | null | undefined {
         assert(isWorker(self), 'rtl-text-plugin url can only be queried from the worker threads');

src/source/worker.ts

@@ -6,7 +6,7 @@ import RasterArrayTileWorkerSource from './raster_array_tile_worker_source';
 import GeoJSONWorkerSource from './geojson_worker_source';
 import Tiled3dModelWorkerSource from '../../3d-style/source/tiled_3d_model_worker_source';
 import assert from 'assert';
-import {plugin as globalRTLTextPlugin} from './rtl_text_plugin';
+import {plugin as globalRTLTextPlugin, rtlPluginStatus} from './rtl_text_plugin';
 import {enforceCacheSizeLimit} from '../util/tile_request_cache';
 import {PerformanceUtils} from '../util/performance';
 import {Event} from '../util/evented';
@@ -22,6 +22,7 @@ import type {RasterizedImageMap} from '../render/image_manager';
 import type {ActorMessage, ActorMessages} from '../util/actor_messages';
 import type {WorkerSource, WorkerSourceConstructor} from './worker_source';
 import type {StyleModelMap} from '../style/style_mode';
+import type {Callback} from '../types/callback';
 
 /**
  * Source types that can instantiate a {@link WorkerSource} in {@link MapWorker}.
@@ -62,6 +63,7 @@ export default class MapWorker {
     brightness: number | null | undefined;
     imageRasterizer: ImageRasterizer;
     worldview: string | undefined;
+    rtlPluginParsingListeners: Array<Callback<boolean>>;
 
     constructor(self: Worker) {
         PerformanceUtils.measure('workerEvaluateScript');
@@ -73,6 +75,7 @@ export default class MapWorker {
         this.availableModels = {};
         this.isSpriteLoaded = {};
         this.imageRasterizer = new ImageRasterizer();
+        this.rtlPluginParsingListeners = [];
 
         this.projections = {};
         this.defaultProjection = getProjection({name: 'mercator'});
@@ -100,9 +103,19 @@ export default class MapWorker {
             if (globalRTLTextPlugin.isParsed()) {
                 throw new Error('RTL text plugin already registered.');
             }
+
+            globalRTLTextPlugin.setState({
+                pluginStatus: rtlPluginStatus.parsed,
+                pluginURL: globalRTLTextPlugin.getPluginURL()
+            });
             globalRTLTextPlugin['applyArabicShaping'] = rtlTextPlugin.applyArabicShaping;
             globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
             globalRTLTextPlugin['processStyledBidirectionalText'] = rtlTextPlugin.processStyledBidirectionalText;
+
+            for (const callback of this.rtlPluginParsingListeners) {
+                callback(null, true);
+            }
+            this.rtlPluginParsingListeners = [];
         };
     }
 
@@ -279,18 +292,34 @@ export default class MapWorker {
     }
 
     syncRTLPluginState(mapId: number, state: ActorMessages['syncRTLPluginState']['params'], callback: ActorMessages['syncRTLPluginState']['callback']) {
+        if (globalRTLTextPlugin.isParsed()) {
+            callback(null, true);
+            return;
+        }
+        if (globalRTLTextPlugin.isParsing()) {
+            this.rtlPluginParsingListeners.push(callback);
+            return;
+        }
         try {
             globalRTLTextPlugin.setState(state);
             const pluginURL = globalRTLTextPlugin.getPluginURL();
             if (
                 globalRTLTextPlugin.isLoaded() &&
                 !globalRTLTextPlugin.isParsed() &&
+                !globalRTLTextPlugin.isParsing() &&
                 pluginURL != null // Not possible when `isLoaded` is true, but keeps flow happy
             ) {
+                globalRTLTextPlugin.setState({
+                    pluginStatus: rtlPluginStatus.parsing,
+                    pluginURL: globalRTLTextPlugin.getPluginURL()
+                });
                 this.self.importScripts(pluginURL);
-                const complete = globalRTLTextPlugin.isParsed();
-                const error = complete ? undefined : new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`);
-                callback(error, complete);
+
+                if (globalRTLTextPlugin.isParsed()) {
+                    callback(null, true);
+                } else {
+                    this.rtlPluginParsingListeners.push(callback);
+                }
             }
         } catch (e) {
             callback(e.toString());