feat: change Injection Symbols

Dongkyuuuu · Sep 8, 2021 · 9a23f92 · 9a23f92
1 parent 907fa91
commit 9a23f92
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 159 deletions.
diff --git a/README.md b/README.md
@@ -4,12 +4,10 @@
 ![npm bundle size](https://img.shields.io/bundlephobia/min/vue3-naver-maps)
 ![NPM](https://img.shields.io/npm/l/vue3-naver-maps)
 
-본 프로젝트는 <b>개발 진행중인(pre-release)</b> 프로젝트 입니다.
+본 프로젝트는 <b>개발 진행중인(pre-release)</b> 프로젝트 입니다. **항상 최신버전을 유지해 주세요.**
 
 업데이트에 대한 자세한 현황은 [Update Roadmap](https://github.com/DongKyuuuu/vue3-naver-maps/issues/3)에서 확인 가능합니다.
 
-사용방법이 변경 되었습니다. `v0.1.0` 이상의 버전을 사용해주세요.
-
 ## Introduce
 
 `vue3-naver-maps`는 `NAVER 지도 API v3` Vue3에서 간편하게 사용하기 위해 작성 된 라이브러리 입니다.

diff --git a/docs/index.md b/docs/index.md
@@ -5,12 +5,14 @@ footer: MIT Licensed | Copyright © 2021-present DongKyuuuu
 
 # 소개
 
-::: info 알림
-사용방법이 변경 되었습니다. v0.1.0 이상 버전을 사용해주세요!
-:::
+![GitHub package.json version](https://img.shields.io/github/package-json/v/dongkyuuuu/vue3-naver-maps)&nbsp;
+![npm bundle size](https://img.shields.io/bundlephobia/min/vue3-naver-maps)&nbsp;
+![NPM](https://img.shields.io/npm/l/vue3-naver-maps)
 
 ::: warning
-WIP: 현재 기능추가가 되고 있는 단계입니다. 자세한 업데이트 일정을 확인하고 싶다면, [Update Roadmap](https://github.com/DongKyuuuu/vue3-naver-maps/issues/3)을 확인해주세요!
+아직 개발 진행중인 단계 입니다. `v1.0.0` 버전 업데이트 전까지 **항상 최신버전을 유지해주세요!**
+
+자세한 업데이트 일정을 확인하고 싶다면, [Update Roadmap](https://github.com/DongKyuuuu/vue3-naver-maps/issues/3)을 확인해주세요.
 :::
 
 `vue3-naver-maps`는 네이버에서 제공하는 `Naver Maps JavaScript API v3`를 간편하게 Vue.js 컴포넌트로 사용하기 위해서 제공하는 라이브러리 입니다. 컴포넌트 호출 후, 해당 Object를 전달받아 직접 제어할 수 있습니다.

diff --git a/package.json b/package.json
@@ -54,6 +54,6 @@
     "vite": "^2.5.1",
     "vitepress": "^0.17.0",
     "vue": "3.0.0",
-    "vue-tsc": "^0.2.2"
+    "vue-tsc": "^0.3.0"
   }
 }
diff --git a/playground/App.vue b/playground/App.vue
@@ -22,15 +22,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from "vue";
+import { defineComponent, reactive, ref, computed } from "vue";
 import type { naverV3 } from "../dist/vue3-naver-maps";
-import { NaverMaps, NaverMarker } from "../dist/vue3-naver-maps";
+import { NaverMaps, NaverMarker, useMap } from "../dist/vue3-naver-maps";
 
 export default defineComponent({
   components: { NaverMaps, NaverMarker },
   name: "App",
-  setup: () => {
+  setup: (props, { emit }) => {
     const map = ref<naver.maps.Map | null>(null);
+    const { setZoom } = useMap();
     const mapSize = reactive({
       width: "400px",
       height: "400px",
@@ -62,16 +63,7 @@ export default defineComponent({
     };
 
     const change = () => {
-      initLayers.value = [
-        "BACKGROUND",
-        "BACKGROUND_DETAIL",
-        // "POI_KOREAN",
-        "TRANSIT",
-        "ENGLISH",
-      ];
-      mapOptions.value.zoom = 14;
-
-      // map.value?.setCenter(new window.naver.maps.LatLng(36, 127));
+      setZoom(5);
     };
     return {
       mapOptions,

diff --git a/rollup.config.js b/rollup.config.js
@@ -29,6 +29,6 @@ export default {
       exclude: [".yarn", "__tests__"],
     }),
     vuePlugin(),
-    terser(),
+    // terser(),
   ],
 };
diff --git a/src/apis/useMap.ts b/src/apis/useMap.ts
@@ -1,103 +1,9 @@
-export interface useMapMethods {
-  setLayerTypeId(typeId: string): void;
-
-  addPane(name: string, elementOrZIndex: HTMLElement | number): void;
-
-  destroy(): void;
-
-  fitBounds(
-    bounds:
-      | naver.maps.Bounds
-      | naver.maps.BoundsLiteral
-      | naver.maps.ArrayOfCoords
-      | naver.maps.ArrayOfCoordsLiteral,
-    margin: number
-  ): void;
-
-  morph(
-    coord: naver.maps.Coord | naver.maps.CoordLiteral,
-    zoom?: number,
-    transitionOptions?: naver.maps.TransitionOptions
-  ): void;
-
-  panTo(
-    coord: naver.maps.Coord | naver.maps.CoordLiteral,
-    transitionOptions: naver.maps.TransitionOptions
-  ): void;
-
-  panToBounds(
-    bounds: naver.maps.Bounds | naver.maps.BoundsLiteral,
-    transitionOptions: naver.maps.TransitionOptions,
-    margin: naver.maps.Margin
-  ): void;
-
-  panBy(x: number, y: number): void;
-
-  refresh(noEffect: boolean): void;
-
-  removePane(name: string): void;
-
-  updateBy(
-    coord: naver.maps.Coord | naver.maps.CoordLiteral,
-    zoom: number
-  ): void;
-
-  zoomBy(
-    deltaZoom: number,
-    zoomOrigin: naver.maps.Coord | naver.maps.CoordLiteral | undefined,
-    effect: boolean
-  ): void;
-}
-
-export interface useMapGetterMethods {
-  getBounds(): naver.maps.Bounds;
-
-  getCenter(): naver.maps.Coord;
-
-  getCenterPoint(): naver.maps.Coord;
-
-  getElement(): HTMLElement;
-
-  getMapTypeId(): string;
-
-  getOptions(key: string | undefined): any;
-
-  getPanes(): naver.maps.MapPanes;
-
-  getPrimitiveProjection(): naver.maps.Projection;
-
-  getProjection(): naver.maps.MapSystemProjection;
-
-  getSize(): naver.maps.Size;
-
-  getZoom(): number;
-}
-
-export interface useMapSetterMethods {
-  setCenter(
-    latOrLatLng: naver.maps.LatLng | naver.maps.LatLngLiteral | number,
-    lng: number
-  ): void;
-
-  setCenterPoint(point: naver.maps.Point | naver.maps.PointLiteral): void;
-
-  setMapTypeId(type: "NORMAL" | "TERRAIN" | "SATELLITE" | "HYBRID"): void;
-
-  setOptions(
-    optionsOrKey: naver.maps.MapOptions | string,
-    value?: naver.maps.MapOptions | null
-  ): void;
-
-  setSize(size: naver.maps.Size | naver.maps.SizeLiteral): void;
-
-  setZoom(level: number, useEffect: boolean): void;
-}
-
-export interface useMap
-  extends useMapMethods,
-    useMapGetterMethods,
-    useMapSetterMethods {}
-
+import type {
+  useMapGetterMethods,
+  useMapMethods,
+  useMapSetterMethods,
+  useMap,
+} from "../types/mapAPI";
 /**
  * naver.maps.Map Methods
  */
@@ -120,7 +26,7 @@ function _useMapMethods(map: naver.maps.Map): useMapMethods {
       | naver.maps.BoundsLiteral
       | naver.maps.ArrayOfCoords
       | naver.maps.ArrayOfCoordsLiteral,
-    margin: number
+    margin?: number
   ) => {
     map.fitBounds(bounds, margin);
   };
@@ -146,7 +52,7 @@ function _useMapMethods(map: naver.maps.Map): useMapMethods {
   const panToBounds = (
     bounds: naver.maps.Bounds | naver.maps.BoundsLiteral,
     transitionOptions: naver.maps.TransitionOptions,
-    margin: naver.maps.Margin
+    margin?: naver.maps.Margin
   ) => {
     map.panToBounds(bounds, transitionOptions, margin);
   };
@@ -155,7 +61,7 @@ function _useMapMethods(map: naver.maps.Map): useMapMethods {
     map.panBy(new window.naver.maps.Point(x, y));
   };
 
-  const refresh = (noEffect: boolean = false) => {
+  const refresh = (noEffect?: boolean) => {
     map.refresh(noEffect);
   };
 
@@ -172,11 +78,8 @@ function _useMapMethods(map: naver.maps.Map): useMapMethods {
 
   const zoomBy = (
     deltaZoom: number,
-    zoomOrigin:
-      | naver.maps.Coord
-      | naver.maps.CoordLiteral
-      | undefined = undefined,
-    effect: boolean = false
+    zoomOrigin?: naver.maps.Coord | naver.maps.CoordLiteral,
+    effect?: boolean
   ) => {
     if (zoomOrigin) map.zoomBy(deltaZoom, zoomOrigin, effect);
     else map.zoomBy(deltaZoom);
@@ -222,7 +125,7 @@ function _useMapGetterMethods(map: naver.maps.Map): useMapGetterMethods {
     return map.getMapTypeId();
   };
 
-  const getOptions = (key: string | undefined = undefined): any => {
+  const getOptions = (key?: string): any => {
     return key ? map.getOptions(key) : map.getOptions();
   };
 
@@ -267,7 +170,7 @@ function _useMapGetterMethods(map: naver.maps.Map): useMapGetterMethods {
 function _useMapSetterMethods(map: naver.maps.Map): useMapSetterMethods {
   const setCenter = (
     latOrLatLng: naver.maps.LatLng | naver.maps.LatLngLiteral | number,
-    lng: number = 0
+    lng: number | undefined = 0
   ) => {
     const center = isNaN(latOrLatLng as number)
       ? latOrLatLng
@@ -291,7 +194,7 @@ function _useMapSetterMethods(map: naver.maps.Map): useMapSetterMethods {
 
   const setOptions = (
     optionsOrKey: naver.maps.MapOptions | string,
-    value: naver.maps.MapOptions | null = null
+    value?: naver.maps.MapOptions | null
   ) => {
     if (map) {
       if (value) map.setOptions(optionsOrKey, value);
@@ -303,7 +206,7 @@ function _useMapSetterMethods(map: naver.maps.Map): useMapSetterMethods {
     map.setSize(size);
   };
 
-  const setZoom = (level: number, useEffect: boolean = false) => {
+  const setZoom = (level: number, useEffect?: boolean) => {
     map.setZoom(level, useEffect);
   };
 

diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -15,12 +15,8 @@ import {
   watchEffect,
   provide,
 } from "vue";
-import {
-  useMapInitOptions,
-  naverMapObject,
-  addEventMap,
-  UI_EVENT_MAP,
-} from "../utils";
+import { useMapInitOptions, addEventMap, UI_EVENT_MAP } from "../utils";
+import { naverMapObject } from "../injectionKeys";
 import type { naverV3 } from "../types";
 
 export default defineComponent({

diff --git a/src/components/Marker.vue b/src/components/Marker.vue
@@ -14,7 +14,8 @@ import {
   toRefs,
   PropType,
 } from "vue";
-import { naverMapObject, addEventMarker, UI_EVENT } from "../utils";
+import { addEventMarker, UI_EVENT } from "../utils";
+import { naverMapObject } from "../injectionKeys";
 import type { naverV3 } from "../types";
 
 export default defineComponent({

diff --git a/src/index.ts b/src/index.ts
@@ -2,7 +2,8 @@ import { install } from "./config";
 import NaverMaps from "./components/Map.vue";
 import NaverMarker from "./components/Marker.vue";
 
-export * from "./types";
+// export * from "./apis";
+export { naverV3 } from "./types";
 
 /**
  * Export Components

diff --git a/src/injectionKeys.ts b/src/injectionKeys.ts
@@ -0,0 +1,9 @@
+import { InjectionKey, Ref } from "vue";
+import type { useMap } from "./types";
+
+export const naverMapObject: InjectionKey<Ref<naver.maps.Map | null>> = Symbol(
+  "[vue3-naver-maps]naverMapObject"
+);
+export const useMapkey: InjectionKey<useMap> = Symbol(
+  "[vue3-naver-maps]useMap"
+);
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,3 +1,5 @@
+export { useMap } from "./mapAPI";
+
 export declare namespace naverV3 {
   namespace install {
     type category = "gov" | "ncp" | "fin";