@ttoss/google-maps 1.25.21 → 2.0.0

package/dist/esm/index.js

@@ -4,7 +4,7 @@
 import * as React from "react";
 import { useScript } from "@ttoss/react-hooks";
 import { jsx } from "react/jsx-runtime";
-var GoogleMapsContext = /*#__PURE__*/React.createContext({
+var GoogleMapsContext = React.createContext({
   status: "idle",
   googleMaps: null
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/google-maps",
-  "version": "1.25.21",
+  "version": "2.0.0",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)",
@@ -11,10 +11,10 @@
     "url": "https://github.com/ttoss/ttoss.git",
     "directory": "packages/google-maps"
   },
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
-      "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
@@ -25,7 +25,7 @@
   "dependencies": {
     "@types/google.maps": "^3.54.10",
     "use-callback-ref": "^1.3.0",
-    "@ttoss/react-hooks": "^1.25.14"
+    "@ttoss/react-hooks": "^2.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -36,9 +36,14 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.2.4",
-    "@ttoss/test-utils": "^2.1.12",
-    "@ttoss/config": "^1.32.8"
+    "@ttoss/config": "^1.32.9",
+    "@ttoss/test-utils": "^2.1.13"
   },
+  "keywords": [
+    "Google",
+    "Maps",
+    "React"
+  ],
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -46,6 +51,6 @@
   "gitHead": "2a911f70d465d6bffdd6589a62d17701f1026f01",
   "scripts": {
     "build": "tsup",
-    "test": "jest"
+    "test": "jest --projects tests/unit"
   }
 }

package/dist/index.d.mts

@@ -1,78 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { ScriptStatus } from '@ttoss/react-hooks';
-
-type Extends<T, U extends T> = U;
-type GoogleMaps = typeof google.maps;
-type LoadedMapsStatus = Extends<ScriptStatus, 'ready'>;
-type NotLoadedMapStatus = Extends<ScriptStatus, 'idle' | 'error' | 'loading'>;
-type Libraries = 'places' | 'visualization' | 'drawing' | 'geometry';
-declare const GoogleMapsProvider: ({ children, apiKey, libraries, language, }: {
-    children: React.ReactNode;
-    apiKey: string;
-    libraries?: Libraries[];
-    /**
-     * https://developers.google.com/maps/faq#languagesupport
-     */
-    language?: string;
-}) => react_jsx_runtime.JSX.Element;
-/**
- *
- * @returns param.googleMaps: GoogleMaps - returns the google maps object which
- * provides access to the [Google Maps API](https://developers.google.com/maps/documentation/javascript/overview).
- */
-declare const useGoogleMaps: () => {
-    status: LoadedMapsStatus;
-    googleMaps: GoogleMaps;
-} | {
-    status: NotLoadedMapStatus;
-    googleMaps: null;
-};
-
-declare const useGeocoder: () => {
-    geocoder: google.maps.Geocoder | null;
-    isGeocoderInitialized: boolean;
-};
-
-declare const useMap: (options?: google.maps.MapOptions) => {
-    /**
-     * asss
-     */
-    map: google.maps.Map | null;
-    /**
-     * hhhh
-     */
-    ref: React.MutableRefObject<HTMLDivElement | null>;
-};
-
-interface HookArgs {
-    requestOptions?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
-    debounce?: number;
-    cache?: number | false;
-    cacheKey?: string;
-    callbackName?: string;
-    defaultValue?: string;
-    initOnMount?: boolean;
-}
-type Suggestion = google.maps.places.AutocompletePrediction;
-type Status = `${google.maps.places.PlacesServiceStatus}` | '';
-interface Suggestions {
-    readonly loading: boolean;
-    readonly status: Status;
-    data: Suggestion[];
-}
-interface SetValue {
-    (val: string, shouldFetchData?: boolean): void;
-}
-interface HookReturn {
-    ready: boolean;
-    value: string;
-    suggestions: Suggestions;
-    setValue: SetValue;
-    clearSuggestions: () => void;
-    clearCache: () => void;
-    init: () => void;
-}
-declare const usePlacesAutocomplete: ({ requestOptions, debounce, cache, cacheKey, callbackName, defaultValue, initOnMount, }?: HookArgs) => HookReturn;
-
-export { GoogleMapsProvider, useGeocoder, useGoogleMaps, useMap, usePlacesAutocomplete };

package/dist/index.js

@@ -1,319 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-"use strict";
-
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  GoogleMapsProvider: () => GoogleMapsProvider,
-  useGeocoder: () => useGeocoder,
-  useGoogleMaps: () => useGoogleMaps,
-  useMap: () => useMap,
-  usePlacesAutocomplete: () => usePlacesAutocomplete
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/GoogleMapsProvider.tsx
-var React = __toESM(require("react"));
-var import_react_hooks = require("@ttoss/react-hooks");
-var import_jsx_runtime = require("react/jsx-runtime");
-var GoogleMapsContext = React.createContext({
-  status: "idle",
-  googleMaps: null
-});
-var GoogleMapsProvider = ({
-  children,
-  apiKey,
-  libraries,
-  language
-}) => {
-  const src = (() => {
-    let srcTemp = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
-    if (libraries) {
-      srcTemp = srcTemp + `&libraries=${libraries.join(",")}`;
-    }
-    if (language) {
-      srcTemp = srcTemp + `&language=${language}`;
-    }
-    return srcTemp;
-  })();
-  const {
-    status
-  } = (0, import_react_hooks.useScript)(src);
-  const googleMaps = React.useMemo(() => {
-    if (status === "ready" && window.google.maps) {
-      return window.google.maps;
-    }
-    return null;
-  }, [status]);
-  const value = React.useMemo(() => {
-    if (status === "ready" && googleMaps) {
-      return {
-        status,
-        googleMaps
-      };
-    }
-    return {
-      status,
-      googleMaps: null
-    };
-  }, [googleMaps, status]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(GoogleMapsContext.Provider, {
-    value,
-    children
-  });
-};
-var useGoogleMaps = () => {
-  return React.useContext(GoogleMapsContext);
-};
-
-// src/useGeocoder.ts
-var React2 = __toESM(require("react"));
-var useGeocoder = () => {
-  const {
-    googleMaps
-  } = useGoogleMaps();
-  const [isGeocoderInitialized, setIsGeocoderInitialized] = React2.useState(false);
-  const geocoder = React2.useMemo(() => {
-    if (googleMaps) {
-      const googleMapsGeocoder = new googleMaps.Geocoder();
-      setIsGeocoderInitialized(true);
-      return googleMapsGeocoder;
-    }
-    return null;
-  }, [googleMaps]);
-  return {
-    geocoder,
-    isGeocoderInitialized
-  };
-};
-
-// src/useMap.ts
-var React3 = __toESM(require("react"));
-var import_use_callback_ref = require("use-callback-ref");
-var useMap = (options = {}) => {
-  const [, forceUpdate] = React3.useState(0);
-  const ref = (0, import_use_callback_ref.useCallbackRef)(null, () => {
-    return forceUpdate(n => {
-      return n + 1;
-    });
-  });
-  const {
-    googleMaps
-  } = useGoogleMaps();
-  const map = React3.useMemo(() => {
-    if (googleMaps && ref.current) {
-      return new googleMaps.Map(ref.current, options);
-    }
-    return null;
-  }, [googleMaps, ref.current]);
-  const optionsStringify = JSON.stringify(options);
-  React3.useEffect(() => {
-    if (map) {
-      const parsedOptions = JSON.parse(optionsStringify);
-      map.setOptions(parsedOptions);
-    }
-  }, [optionsStringify, map]);
-  return {
-    /**
-     * asss
-     */
-    map,
-    /**
-     * hhhh
-     */
-    ref
-  };
-};
-
-// src/usePlacesAutocomplete/index.ts
-var import_react2 = require("react");
-
-// src/usePlacesAutocomplete/debounce.ts
-var debounce = (fn, delay) => {
-  let timer;
-  function debounceFn(...args) {
-    if (timer !== null) {
-      clearTimeout(timer);
-      timer = null;
-    }
-    timer = setTimeout(() => fn.apply(this, args), delay);
-  }
-  return debounceFn;
-};
-var debounce_default = debounce;
-
-// src/usePlacesAutocomplete/useLatest.ts
-var import_react = require("react");
-var useLatest_default = val => {
-  const ref = (0, import_react.useRef)(val);
-  ref.current = val;
-  return ref;
-};
-
-// src/usePlacesAutocomplete/index.ts
-var usePlacesAutocomplete = ({
-  requestOptions,
-  debounce: debounce2 = 200,
-  cache = 24 * 60 * 60,
-  cacheKey,
-  callbackName,
-  defaultValue = "",
-  initOnMount = true
-} = {}) => {
-  const [ready, setReady] = (0, import_react2.useState)(false);
-  const [value, setVal] = (0, import_react2.useState)(defaultValue);
-  const [suggestions, setSuggestions] = (0, import_react2.useState)({
-    loading: false,
-    status: "",
-    data: []
-  });
-  const asRef = (0, import_react2.useRef)(null);
-  const requestOptionsRef = useLatest_default(requestOptions);
-  const {
-    googleMaps
-  } = useGoogleMaps();
-  const googleMapsRef = useLatest_default(googleMaps);
-  const upaCacheKey = cacheKey ? `upa-${cacheKey}` : "upa";
-  const init = (0, import_react2.useCallback)(() => {
-    if (asRef.current) return;
-    if (!googleMaps) {
-      return;
-    }
-    const {
-      current: gMaps
-    } = googleMapsRef;
-    const placesLib = gMaps?.places || googleMaps.places;
-    if (!placesLib) {
-      return;
-    }
-    asRef.current = new placesLib.AutocompleteService();
-    setReady(true);
-  }, [googleMaps]);
-  const clearSuggestions = (0, import_react2.useCallback)(() => {
-    setSuggestions({
-      loading: false,
-      status: "",
-      data: []
-    });
-  }, []);
-  const clearCache = (0, import_react2.useCallback)(() => {
-    try {
-      sessionStorage.removeItem(upaCacheKey);
-    } catch (error) {}
-  }, []);
-  const fetchPredictions = (0, import_react2.useCallback)(debounce_default(val => {
-    if (!val) {
-      clearSuggestions();
-      return;
-    }
-    setSuggestions(prevState => ({
-      ...prevState,
-      loading: true
-    }));
-    let cachedData = {};
-    try {
-      cachedData = JSON.parse(sessionStorage.getItem(upaCacheKey) || "{}");
-    } catch (error) {}
-    if (cache) {
-      cachedData = Object.keys(cachedData).reduce((acc, key) => {
-        if (cachedData[key].maxAge - Date.now() >= 0) acc[key] = cachedData[key];
-        return acc;
-      }, {});
-      if (cachedData[val]) {
-        setSuggestions({
-          loading: false,
-          status: "OK",
-          data: cachedData[val].data
-        });
-        return;
-      }
-    }
-    asRef?.current?.getPlacePredictions({
-      ...requestOptionsRef.current,
-      input: val
-    }, (data, status) => {
-      setSuggestions({
-        loading: false,
-        status,
-        data: data || []
-      });
-      if (cache && status === "OK") {
-        cachedData[val] = {
-          data,
-          maxAge: Date.now() + cache * 1e3
-        };
-        try {
-          sessionStorage.setItem(upaCacheKey, JSON.stringify(cachedData));
-        } catch (error) {}
-      }
-    });
-  }, debounce2), [debounce2, clearSuggestions]);
-  const setValue = (0, import_react2.useCallback)((val, shouldFetchData = true) => {
-    setVal(val);
-    if (asRef.current && shouldFetchData) fetchPredictions(val);
-  }, [fetchPredictions]);
-  (0, import_react2.useEffect)(() => {
-    if (!initOnMount) {
-      return () => null;
-    }
-    if (!googleMapsRef.current && !googleMaps && callbackName) {
-      window[callbackName] = init;
-    } else {
-      init();
-    }
-    return () => {
-      if (window[callbackName]) delete window[callbackName];
-    };
-  }, [callbackName, init]);
-  return {
-    ready,
-    value,
-    suggestions,
-    setValue,
-    clearSuggestions,
-    clearCache,
-    init
-  };
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  GoogleMapsProvider,
-  useGeocoder,
-  useGoogleMaps,
-  useMap,
-  usePlacesAutocomplete
-});

package/src/GoogleMapsProvider.spec.tsx

@@ -1,83 +0,0 @@
-// import { renderHook, act } from '@testing-library/react-hooks';
-// import { useGoogleMaps } from '..';
-
-// const mapObject = { map: 'object' };
-// const googleMock = {
-//   maps: {
-//     Map: jest.fn().mockImplementation(() => mapObject),
-//   },
-// };
-
-import { GoogleMapsProvider, useGoogleMaps } from './';
-import { act, render, screen } from '@ttoss/test-utils';
-
-const mapObject = { map: 'object' };
-const googleMock = {
-  maps: {
-    Map: jest.fn().mockImplementation(() => {
-      return mapObject;
-    }),
-  },
-};
-
-beforeAll(() => {
-  (global.google as unknown) = googleMock;
-});
-
-beforeEach(() => {
-  document.querySelectorAll('script')[0]?.remove();
-});
-
-const RenderStatus = () => {
-  const { status } = useGoogleMaps();
-  return (
-    <div>
-      <span>{status}</span>
-    </div>
-  );
-};
-
-const loadEvent = new Event('load');
-
-const apiKey = 'apiKey';
-
-test('should display correct status', () => {
-  render(
-    <GoogleMapsProvider apiKey={apiKey}>
-      <RenderStatus />
-    </GoogleMapsProvider>
-  );
-
-  expect(screen.getByText('loading')).toBeInTheDocument();
-
-  act(() => {
-    document.querySelectorAll('script')[0].dispatchEvent(loadEvent);
-  });
-
-  expect(screen.getByText('ready')).toBeInTheDocument();
-});
-
-test.each([
-  [{ apiKey }, `https://maps.googleapis.com/maps/api/js?key=${apiKey}`],
-  [
-    { apiKey, language: 'pt-BR' },
-    `https://maps.googleapis.com/maps/api/js?key=${apiKey}&language=pt-BR`,
-  ],
-  [
-    { apiKey, language: 'pt-BR', libraries: ['places'] },
-    `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&language=pt-BR`,
-  ],
-  [
-    { apiKey, language: 'pt-BR', libraries: ['places', 'geometry'] },
-    `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&language=pt-BR`,
-  ],
-])('Google Maps API src %#', (props, src) => {
-  render(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <GoogleMapsProvider {...(props as any)}>
-      <RenderStatus />
-    </GoogleMapsProvider>
-  );
-
-  expect(document.querySelectorAll('script')[0].src).toEqual(src);
-});

package/src/index.spec.ts

@@ -1,9 +0,0 @@
-import * as googleMaps from './index';
-
-test('should export all methods', () => {
-  expect(googleMaps.GoogleMapsProvider).toBeDefined();
-  expect(googleMaps.useGeocoder).toBeDefined();
-  expect(googleMaps.useGoogleMaps).toBeDefined();
-  expect(googleMaps.useMap).toBeDefined();
-  expect(googleMaps.usePlacesAutocomplete).toBeDefined();
-});