@heycar/heycars-map 2.0.0-switchMap1 → 2.0.0-switchMap10

package/dist/v2/hooks/useMapLoader.d.ts

@@ -2,7 +2,7 @@ import { load as loadAmap } from "@amap/amap-jsapi-loader";
 import { type LoaderOptions } from "@googlemaps/js-api-loader";
 import { type Ref } from "vue-demi";
 import type { VNodeChild } from "../demi-polyfill";
-import type { Language } from "../types/interface";
+import type { ConnectionStatus, Language } from "../types/interface";
 export declare const DEFAULT_AMAP_PLUGINS: AmapLoaderProps["plugins"];
 export declare const DEFAULT_GMAP_LIBRARIES: LoaderOptions["libraries"];
 export declare enum Status {
@@ -19,7 +19,7 @@ declare global {
         };
     }
 }
-export interface AmapLoaderProps extends Pick<GmapLoaderProps, "fallback" | "loading" | "onChange">, Omit<AMapLoaderOptions, "key" | "version" | "plugins"> {
+export interface AmapLoaderProps extends Pick<GmapLoaderProps, "fallback" | "loading" | "onSuccess" | "onFail">, Omit<AMapLoaderOptions, "key" | "version" | "plugins"> {
     apiKey: string;
     apiSecret?: string;
     apiServiceHost?: string;
@@ -29,6 +29,7 @@ export interface AmapLoaderProps extends Pick<GmapLoaderProps, "fallback" | "loa
 }
 export declare const useAmapLoader: (props: AmapLoaderProps) => {
     statusRef: import("vue-demi").ShallowRef<Status>;
+    pingStatusRef: import("vue-demi").ShallowRef<ConnectionStatus>;
     readyPromise: Promise<undefined>;
 };
 export interface GmapLoaderProps extends LoaderOptions {
@@ -42,19 +43,23 @@ export interface GmapLoaderProps extends LoaderOptions {
      */
     fallback?: () => VNodeChild;
     /**
-     * Callback prop used to access `@googlemaps/js-api-loader` and `Status`.
-     *
-     * Note: The callback be executed multiple times in the lifecycle of the component.
+     * 成功回调只会触发一次
      */
-    onChange?: (status: Status) => void;
+    onSuccess?: () => void;
+    /**
+     * 失败回调可能会触发多次
+     */
+    onFail?: () => void;
 }
 export declare const useGmapLoader: (props: GmapLoaderProps) => {
     statusRef: import("vue-demi").ShallowRef<Status>;
+    pingStatusRef: import("vue-demi").ShallowRef<ConnectionStatus>;
     readyPromise: Promise<undefined>;
 };
 export type MapSupplier = "gmap" | "amap";
 export interface UseMapLoaderOutput {
     statusRef: Ref<Status>;
+    pingStatusRef: Ref<ConnectionStatus>;
     readyPromise: Promise<undefined>;
 }
 export interface UseMapLoaderProps {
@@ -64,7 +69,8 @@ export interface UseMapLoaderProps {
     amapServiceHost?: string;
     supplier: MapSupplier;
     language: Language;
-    onChange?: (status: Status) => any;
+    onSuccess?: () => void;
+    onFail?: () => void;
 }
 export declare const useMapLoader: (props: UseMapLoaderProps) => UseMapLoaderOutput;
 export {};

package/dist/v2/hooks/useMapLoader.js

@@ -1,6 +1,8 @@
 import { shallowRef, computed } from "vue-demi";
+import { apiPingAmap, apiPingGmap } from "../api/pingConnection.js";
 import { watchPostEffectForDeepOption } from "../utils/compare.js";
-import { createRunOnce } from "../utils/helper.js";
+import { createOneConcurrent, sleep, createRunOnce } from "../utils/helper.js";
+import { patchGoogleMapLoader } from "../utils/patchGoogleMapLoader.js";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var distExports = {};
 var dist = {
@@ -537,6 +539,7 @@ class Loader {
     }
   }
 }
+const MIN_MAP_RELOAD_INTERVAL = 5e3;
 const DEFAULT_AMAP_PLUGINS = [
   "AMap.Geocoder",
   "AMap.Driving",
@@ -551,118 +554,173 @@ var Status = /* @__PURE__ */ ((Status2) => {
   return Status2;
 })(Status || {});
 const useAmapLoader = (props) => {
-  const { disableRef, onChange } = props;
+  const { disableRef, onSuccess, onFail } = props;
   let resolveLoader;
-  let rejectLoader;
-  const readyPromise = new Promise((resolve, reject) => {
+  const readyPromise = new Promise((resolve) => {
     resolveLoader = resolve;
-    rejectLoader = reject;
   });
   const statusRef = shallowRef(
     "LOADING"
     /* LOADING */
   );
+  const pingStatusRef = shallowRef("connected");
   const optionsRef = computed(() => {
-    const { onChange: onChange2, loading, fallback, apiKey, apiSecret, apiServiceHost, version, ...options } = props;
+    const {
+      onSuccess: onSuccess2,
+      onFail: onFail2,
+      loading,
+      fallback,
+      apiKey,
+      apiSecret,
+      apiServiceHost,
+      version,
+      ...options
+    } = props;
     return { ...options, key: apiKey, version: version != null ? version : "2.0" };
   });
-  watchPostEffectForDeepOption(
-    () => [optionsRef.value, disableRef == null ? void 0 : disableRef.value],
-    ([options, disable]) => {
-      if (disable)
-        return;
-      const setStatusAndExecuteCallback = (status) => {
-        statusRef.value = status;
-        if (status === "SUCCESS")
-          resolveLoader();
-        if (status === "FAILURE")
-          rejectLoader();
-        onChange == null ? void 0 : onChange(statusRef.value);
-      };
-      setStatusAndExecuteCallback(
-        "LOADING"
-        /* LOADING */
-      );
-      window._AMapSecurityConfig = props.apiServiceHost ? {
-        serviceHost: props.apiServiceHost
-      } : { securityJsCode: props.apiSecret };
-      distExports.load(options).then(
-        () => setStatusAndExecuteCallback(
-          "SUCCESS"
-          /* SUCCESS */
-        ),
-        () => setStatusAndExecuteCallback(
-          "FAILURE"
-          /* FAILURE */
-        )
-      );
+  const defineSecurityOnce = createRunOnce(() => {
+    window._AMapSecurityConfig = props.apiServiceHost ? {
+      serviceHost: props.apiServiceHost
+    } : { securityJsCode: props.apiSecret };
+  });
+  const reload = createOneConcurrent((options) => {
+    if (statusRef.value === "SUCCESS")
+      return Promise.resolve();
+    defineSecurityOnce();
+    distExports.reset();
+    statusRef.value = "LOADING";
+    return distExports.load(options).then(
+      () => {
+        statusRef.value = "SUCCESS";
+        resolveLoader();
+        onSuccess == null ? void 0 : onSuccess();
+      },
+      () => {
+        statusRef.value = "FAILURE";
+        onFail == null ? void 0 : onFail();
+      }
+    );
+  });
+  const keepRetry = createOneConcurrent(async () => {
+    if (!(disableRef == null ? void 0 : disableRef.value) && statusRef.value === "SUCCESS") {
+      pingStatusRef.value = "pending";
+      while (!(disableRef == null ? void 0 : disableRef.value) && pingStatusRef.value !== "connected") {
+        if (pingStatusRef.value === "unconnected")
+          await sleep(MIN_MAP_RELOAD_INTERVAL);
+        pingStatusRef.value = await apiPingAmap();
+      }
     }
-  );
-  return { statusRef, readyPromise };
+    const options = optionsRef.value;
+    while (!(disableRef == null ? void 0 : disableRef.value) && statusRef.value !== "SUCCESS") {
+      if (statusRef.value === "LOADING") {
+        await reload(options);
+        continue;
+      }
+      await sleep(MIN_MAP_RELOAD_INTERVAL);
+      const pingStatus = await apiPingAmap();
+      if (pingStatus === "unconnected")
+        continue;
+      await reload(options);
+    }
+  });
+  watchPostEffectForDeepOption(() => [optionsRef.value, disableRef == null ? void 0 : disableRef.value], keepRetry);
+  return { statusRef, pingStatusRef, readyPromise };
 };
-const loadGmapOnce = createRunOnce((opts) => {
-  const loader = new Loader(opts);
-  return loader.load();
-});
 const useGmapLoader = (props) => {
-  const { disableRef, onChange } = props;
+  const { disableRef, onSuccess, onFail } = props;
   let resolveLoader;
-  let rejectLoader;
-  const readyPromise = new Promise((resolve, reject) => {
+  const readyPromise = new Promise((resolve) => {
     resolveLoader = resolve;
-    rejectLoader = reject;
   });
   const statusRef = shallowRef(
     "LOADING"
     /* LOADING */
   );
+  const pingStatusRef = shallowRef("pending");
   const optionsRef = computed(() => {
-    const { onChange: onChange2, fallback, loading, language, ...options } = props;
+    const { onSuccess: onSuccess2, onFail: onFail2, fallback, loading, language, ...options } = props;
     return options;
   });
-  watchPostEffectForDeepOption(
-    () => [optionsRef.value, disableRef == null ? void 0 : disableRef.value],
-    ([options, disable]) => {
-      if (disable)
-        return;
-      const language = navigator.language;
-      const setStatusAndExecuteCallback = (status) => {
-        statusRef.value = status;
-        if (status === "SUCCESS")
-          resolveLoader();
-        if (status === "FAILURE")
-          rejectLoader();
-        onChange == null ? void 0 : onChange(statusRef.value);
-      };
-      setStatusAndExecuteCallback(
-        "LOADING"
-        /* LOADING */
-      );
-      loadGmapOnce({ ...options, language }).then(
-        () => setStatusAndExecuteCallback(
-          "SUCCESS"
-          /* SUCCESS */
-        ),
-        () => setStatusAndExecuteCallback(
-          "FAILURE"
-          /* FAILURE */
-        )
-      );
+  const reload = createOneConcurrent((options, signal) => {
+    if (statusRef.value === "SUCCESS")
+      return Promise.resolve();
+    const loader = new Loader({ ...options, retries: 0 });
+    patchGoogleMapLoader(loader);
+    if (loader.status !== LoaderStatus.INITIALIZED) {
+      window.google = void 0;
+      loader.reset();
     }
-  );
-  return { statusRef, readyPromise };
+    const abortPromise = new Promise((resolve) => signal == null ? void 0 : signal.addEventListener("abort", resolve));
+    statusRef.value = "LOADING";
+    const loadPromise = loader.load().then(
+      () => {
+        if (signal == null ? void 0 : signal.aborted)
+          return;
+        statusRef.value = "SUCCESS";
+        resolveLoader();
+        onSuccess == null ? void 0 : onSuccess();
+      },
+      () => {
+        if (signal == null ? void 0 : signal.aborted)
+          return;
+        statusRef.value = "FAILURE";
+        onFail == null ? void 0 : onFail();
+      }
+    );
+    return Promise.race([abortPromise, loadPromise]);
+  });
+  const keepRetry = createOneConcurrent(async () => {
+    if (!(disableRef == null ? void 0 : disableRef.value) && statusRef.value === "SUCCESS") {
+      pingStatusRef.value = "pending";
+      while (!(disableRef == null ? void 0 : disableRef.value) && pingStatusRef.value !== "connected") {
+        if (pingStatusRef.value === "unconnected")
+          await sleep(MIN_MAP_RELOAD_INTERVAL);
+        pingStatusRef.value = await apiPingGmap();
+      }
+    }
+    const language = navigator.language;
+    const options = { ...optionsRef.value, language };
+    while (!(disableRef == null ? void 0 : disableRef.value) && statusRef.value !== "SUCCESS") {
+      if (statusRef.value === "FAILURE" || pingStatusRef.value === "unconnected") {
+        await sleep(MIN_MAP_RELOAD_INTERVAL);
+        pingStatusRef.value = await apiPingGmap();
+        if (pingStatusRef.value === "connected")
+          statusRef.value = "LOADING";
+        continue;
+      }
+      const controller = new AbortController();
+      const reloadPromise = reload(options, controller.signal);
+      pingStatusRef.value = await apiPingGmap();
+      if (pingStatusRef.value === "unconnected") {
+        controller.abort();
+        continue;
+      }
+      await reloadPromise;
+    }
+  });
+  watchPostEffectForDeepOption(() => [optionsRef.value, disableRef == null ? void 0 : disableRef.value], keepRetry);
+  return { statusRef, pingStatusRef, readyPromise };
 };
 const useMapLoader = (props) => {
-  const { gmapKey, amapKey, amapSecret, amapServiceHost, language, onChange } = props;
-  const { statusRef: amapStatusRef, readyPromise: amapReadyPromise } = useAmapLoader({
+  const { gmapKey, amapKey, amapSecret, amapServiceHost, language, onSuccess, onFail } = props;
+  const {
+    statusRef: amapStatusRef,
+    pingStatusRef: amapPingStatusRef,
+    readyPromise: amapReadyPromise
+  } = useAmapLoader({
     apiKey: amapKey,
     apiSecret: amapSecret,
     apiServiceHost: amapServiceHost,
     plugins: DEFAULT_AMAP_PLUGINS,
     disableRef: computed(() => props.supplier !== "amap"),
-    onChange
+    onSuccess,
+    onFail
   });
-  const { statusRef: gmapStatusRef, readyPromise: gmapReadyPromise } = useGmapLoader({
+  const {
+    statusRef: gmapStatusRef,
+    pingStatusRef: gmapPingStatusRef,
+    readyPromise: gmapReadyPromise
+  } = useGmapLoader({
     apiKey: gmapKey,
     language,
     version: "weekly",
@@ -670,12 +728,16 @@ const useMapLoader = (props) => {
     // region: "CN",
     libraries: DEFAULT_GMAP_LIBRARIES,
     disableRef: computed(() => props.supplier !== "gmap"),
-    onChange
+    onSuccess,
+    onFail
   });
   return {
     get statusRef() {
       return props.supplier === "gmap" ? gmapStatusRef : amapStatusRef;
     },
+    get pingStatusRef() {
+      return props.supplier === "gmap" ? gmapPingStatusRef : amapPingStatusRef;
+    },
     get readyPromise() {
       return props.supplier === "gmap" ? gmapReadyPromise : amapReadyPromise;
     }

package/dist/v2/hooks/useMapPlace.d.ts

@@ -3,6 +3,7 @@ import type { Place, Point } from "../types/interface";
 export interface UseMapPlaceProps {
     pointRef: Ref<Point>;
     emptyPlaceName: string;
+    signal?: AbortSignal;
     onChange?: (value: Place) => any;
 }
 export declare const useAmapPlace: (props: UseMapPlaceProps) => {

package/dist/v2/hooks/useMapPlace.js

@@ -1,23 +1,23 @@
 import { ref, reactive, watch } from "vue-demi";
 import { REGEO_TIMEOUT } from "../api/contants.js";
 import { createPipeTw } from "../utils/cn2tw.js";
-import { equalAssign } from "../utils/helper.js";
+import { equalAssign, createAbortable } from "../utils/helper.js";
 import { amapPlaceName2DisplayName, gmapPlaceName2DisplayName } from "../utils/transform.js";
-import { useAmapInChina } from "./useMapInChina.js";
+import { inChina } from "./useMapInChina.js";
 import { useMapSupplier } from "./useMapSupplier.js";
 import { useUpdate } from "./useUdate.js";
 const useAmapPlace = (props) => {
-  const { onChange, emptyPlaceName } = props;
+  const { signal, onChange, emptyPlaceName } = props;
   const defaultPoint = [...props.pointRef.value];
   const pointRef = ref(defaultPoint);
   const { readyPromise, language } = useMapSupplier();
-  const { inChina } = useAmapInChina();
   const place = reactive({
     lng: pointRef.value[0],
     lat: pointRef.value[1],
     name: "",
     displayName: ""
   });
+  const abortable = createAbortable(signal);
   const { idx: placeKey, update } = useUpdate();
   const updatePlace = (value) => {
     pointRef.value = value;
@@ -29,37 +29,42 @@ const useAmapPlace = (props) => {
     place.name = value.name;
     place.displayName = value.displayName;
   };
-  const getPlaceByRegeo = ([lng, lat]) => {
+  const getPlaceByRegeo = abortable(([lng, lat]) => {
     return new Promise((resolve) => {
-      const geocoder = new AMap.Geocoder({ lang: language === "en" ? "en" : "zh_cn" });
-      const pipeTw = createPipeTw(language === "zh-TW");
-      const isChina = inChina([lng, lat]);
-      geocoder.getAddress(new AMap.LngLat(lng, lat), (status, result) => {
-        switch (status) {
-          case "complete": {
-            const { formattedAddress, addressComponent } = result.regeocode;
-            const name = formattedAddress ? formattedAddress : emptyPlaceName;
-            const displayName = amapPlaceName2DisplayName(name, { isChina, ...addressComponent });
-            resolve({ lng, lat, name: pipeTw(name), displayName: pipeTw(displayName) });
-            return;
-          }
-          case "no_data":
-          case "error": {
-            const name = emptyPlaceName;
-            const displayName = emptyPlaceName;
-            resolve({ lng, lat, name, displayName });
-            return;
-          }
-        }
-      });
-      setTimeout(() => {
-        console.warn("高德逆地理请求超时!");
+      const handleFailed = () => {
         const name = emptyPlaceName;
         const displayName = emptyPlaceName;
         resolve({ lng, lat, name, displayName });
+      };
+      readyPromise.then(() => {
+        const geocoder = new AMap.Geocoder({ lang: language === "en" ? "en" : "zh_cn" });
+        const pipeTw = createPipeTw(language === "zh-TW");
+        const isChina = inChina([lng, lat]);
+        geocoder.getAddress(new AMap.LngLat(lng, lat), (status, result) => {
+          switch (status) {
+            case "complete": {
+              const { formattedAddress, addressComponent } = result.regeocode;
+              const name = formattedAddress ? formattedAddress : emptyPlaceName;
+              const displayName = amapPlaceName2DisplayName(name, {
+                isChina,
+                ...addressComponent
+              });
+              resolve({ lng, lat, name: pipeTw(name), displayName: pipeTw(displayName) });
+              return;
+            }
+            case "no_data":
+            case "error": {
+              handleFailed();
+            }
+          }
+        });
+      }, handleFailed);
+      setTimeout(() => {
+        console.warn("高德逆地理请求超时!");
+        handleFailed();
       }, REGEO_TIMEOUT);
     });
-  };
+  });
   watch(
     () => [placeKey.value],
     async () => {
@@ -72,7 +77,7 @@ const useAmapPlace = (props) => {
   return { place, updatePlace, setPlace, getPlaceByRegeo };
 };
 const useGmapPlace = (props) => {
-  const { onChange, emptyPlaceName } = props;
+  const { signal, onChange, emptyPlaceName } = props;
   const defaultPoint = [...props.pointRef.value];
   const pointRef = ref(defaultPoint);
   const { readyPromise, language } = useMapSupplier();
@@ -83,6 +88,7 @@ const useGmapPlace = (props) => {
     name: "",
     displayName: ""
   });
+  const abortable = createAbortable(signal);
   const updatePlace = (value) => {
     pointRef.value = value;
     update();
@@ -93,28 +99,30 @@ const useGmapPlace = (props) => {
     place.name = value.name;
     place.displayName = value.displayName;
   };
-  const getPlaceByRegeo = ([lng, lat]) => {
+  const getPlaceByRegeo = abortable(([lng, lat]) => {
     return new Promise((resolve) => {
-      const geocoder = new google.maps.Geocoder();
-      const pipeTw = createPipeTw(language === "zh-TW");
-      geocoder.geocode({ language, location: { lng, lat } }).then(({ results }) => {
-        const name = results[0].formatted_address ? results[0].formatted_address : emptyPlaceName;
-        const displayName = gmapPlaceName2DisplayName(name, results[0].address_components);
-        resolve({ lng, lat, name: pipeTw(name), displayName: pipeTw(displayName) });
-      }).catch((err) => {
-        console.error(err);
+      const handleFailed = (err) => {
+        if (err)
+          console.error(err);
         const name = emptyPlaceName;
         const displayName = emptyPlaceName;
         resolve({ lng, lat, name, displayName });
-      });
+      };
+      readyPromise.then(() => {
+        const geocoder = new google.maps.Geocoder();
+        const pipeTw = createPipeTw(language === "zh-TW");
+        geocoder.geocode({ language, location: { lng, lat } }).then(({ results }) => {
+          const name = results[0].formatted_address ? results[0].formatted_address : emptyPlaceName;
+          const displayName = gmapPlaceName2DisplayName(name, results[0].address_components);
+          resolve({ lng, lat, name: pipeTw(name), displayName: pipeTw(displayName) });
+        }).catch(handleFailed);
+      }, handleFailed);
       setTimeout(() => {
         console.warn("谷歌逆地理请求超时!");
-        const name = emptyPlaceName;
-        const displayName = emptyPlaceName;
-        resolve({ lng, lat, name, displayName });
+        handleFailed();
       }, REGEO_TIMEOUT);
     });
-  };
+  });
   watch(
     () => placeKey.value,
     async () => {

package/dist/v2/hooks/useMapRecomendPlace.d.ts

@@ -5,6 +5,7 @@ export interface UseMapRecomendPlaceProps<C = Record<string, any>> {
     context?: C;
     emptyPlaceName: string;
     queryingPlaceName: string;
+    signal?: AbortSignal;
     getLimit: (context?: C) => number;
     getAvailable?: (place: Place) => Promise<boolean>;
     getRecomendPlace: (place: Place, context?: C) => Promise<RecommendZonePlaces | undefined>;