Простичък Vue плъгин за гео локация

Когато пиша плъгин, мисля за него, като самостоятелно парче код, което има собствена логика на работа и е независимо от мястото, на което ще се ползва. Това разбира се не е съвсем вярно, но при проектирането на плъгин, винаги изхождам от тази идея. Все пак всяка система има своя логика и архитектура, която трябва да се спазва - особено за изходящите данни.

Гео локация

В съвременните браузъри е много лесно може да достъпите APIто за гео локация. Извиквате

navigator.geolocation.getCurrentPosition(call_success_function, call_error_function);

и в обекта, който се връща към call_success_function ще получите всичко необходимо, в това число и latitude & longitude. При необходимост можете да проверите, дали браузъра поддържа APIто за гео локация if (!navigator.geolocation) { ... } else { ... }.

Ще добавя една малка абстракция към стандартната функция, която да я направи да работи в асинхронен среда.

async function GeoLocation(): Promise<GeolocationCoordinates> {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (success) => resolve(location.coords),
      (error) => reject(error)
    );
  });
}

Чуден метод, който ще върне координатите и (както Ви казах в началото) работи независимо от средата в която ще се ползва.

Vue плъгин

В проект, където искаме да използваме, като плъгин, горния метод създавам папка plugins и в нея създавам под-папка geo-location. В тази папка добавям 2 файла - index.ts и GeoLocation.ts. Подразбира се, че съдържанието на GeoLocation.ts е горния метод.

// plugins/geo-location/GeoLocation.ts

export async function GeoLocation(): Promise<GeolocationCoordinates> {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (success) => resolve(location.coords),
      (error) => reject(error)
    );
  });
}

В index.ts спазвам стандартната структура на Vue плъгините.

// plugins/geo-location/index.ts

import type { App } from "vue";
import { GeoLocation } from "./GeoLocation";

export default {
  install(app: App) {
    app.provide("GeoLocation", GeoLocation);
  },
};

След което го добавяме в main.ts.

// main.ts

import { createApp } from "vue";
import App from "./App.vue";
import GeoLocationPlugin from "./plugins/geo-location";

const app = createApp(App);

app.use(GeoLocationPlugin);
app.mount("#app");

Използване на плъгина

Тук е причината да напиша тази статиика. За да използвате плъгина в TypeScript среда, ще трябва да внимавате с инициализацията във Vue компонента, в който ще го ползвате.

const GEOLocation = inject<() => Promise<GeolocationCoordinates>>('GeoLocation');

Ako пропуснете каста () => Promise<GeolocationCoordinates> ще получите грешка, че GeoLocation не е функция.

type GeoLocationType = () => Promise<GeolocationCoordinates>;
const GEOLocation = inject<GeoLocationType>('GeoLocation');