resolve conflict

Author: Normaltic

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-daum-postcode",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Daum Postcode service for React",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/DaumPostcodeEmbed.tsx

@@ -1,12 +1,12 @@
 import React, { Component, createRef, CSSProperties } from 'react';
-import loadPostcode, { postcodeScriptUrl, ConstructorOptions } from './loadPostcode';
+import loadPostcode, { postcodeScriptUrl, PostcodeConstructor, PostcodeOptions } from './loadPostcode';
 
 export interface DaumPostcodeEmbedProps
-  extends Omit<ConstructorOptions, 'oncomplete' | 'onresize' | 'onclose' | 'onsearch' | 'width' | 'height'> {
-  onComplete?: ConstructorOptions['oncomplete'];
-  onResize?: ConstructorOptions['onresize'];
-  onClose?: ConstructorOptions['onclose'];
-  onSearch?: ConstructorOptions['onsearch'];
+  extends Omit<PostcodeOptions, 'oncomplete' | 'onresize' | 'onclose' | 'onsearch' | 'width' | 'height'> {
+  onComplete?: PostcodeOptions['oncomplete'];
+  onResize?: PostcodeOptions['onresize'];
+  onClose?: PostcodeOptions['onclose'];
+  onSearch?: PostcodeOptions['onsearch'];
   className?: string;
   style?: CSSProperties;
   defaultQuery?: string;
@@ -56,7 +56,7 @@ class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
     loadPostcode(scriptUrl).then(initiate).catch(onError);
   }
 
-  initiate = (Postcode: typeof window.daum.Postcode) => {
+  initiate = (Postcode: PostcodeConstructor) => {
     if (!this.wrap.current) return;
     const { scriptUrl, className, style, defaultQuery, autoClose, errorMessage, onComplete, onClose, onResize, onSearch, ...options } =
       this.props;
@@ -77,7 +77,8 @@ class DaumPostcodeEmbed extends Component<DaumPostcodeEmbedProps, State> {
     postcode.embed(this.wrap.current, { q: defaultQuery, autoClose: autoClose });
   };
 
-  onError = () => {
+  onError = (e: unknown) => {
+    console.error(e);
     this.setState({ hasError: true });
   };
 

src/loadPostcode.ts

@@ -1,12 +1,12 @@
 declare global {
   interface Window {
-    daum: {
-      postcode: {
+    daum?: {
+      postcode?: {
         load: (fn: () => void) => void;
         version: string;
         _validParam_: boolean;
       };
-      Postcode: PostcodeConstructor;
+      Postcode?: PostcodeConstructor;
     };
   }
 }
@@ -73,7 +73,7 @@ export interface Theme {
   outlineColor?: string;
 }
 
-export interface ConstructorOptions {
+export interface PostcodeOptions {
   oncomplete?: (address: Address) => void;
   onresize?: (size: Size) => void;
   onclose?: (state: State) => void;
@@ -114,59 +114,40 @@ export interface EmbedOptions {
   autoClose?: boolean;
 }
 
+export interface PostcodeConstructor {
+  new (postcodeOptions: PostcodeOptions): Postcode;
+}
+
 export interface Postcode {
   open(openOptions?: OpenOptions): void;
   embed(element: HTMLElement, embedOptions?: EmbedOptions): void;
 }
 
-export interface PostcodeConstructor {
-  new (constructorOptions: ConstructorOptions): Postcode;
-}
+export const postcodeScriptUrl = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
 
-const promiseQueue = (function () {
-  const queue: Array<[(value: PostcodeConstructor) => void, (error: unknown) => void]> = [];
-  const enqueue = queue.push.bind(queue);
-  const dequeue = () => queue.shift() ?? [];
-  const resolveAll = (value: PostcodeConstructor) => {
-    while (queue.length) {
-      const [resolve] = dequeue();
-      resolve?.(value);
-    }
-  };
-  const rejectAll = (value: unknown) => {
-    while (queue.length) {
-      const [_, reject] = dequeue();
-      reject?.(value);
-    }
-  };
-  return { enqueue, resolveAll, rejectAll };
-})();
+const loadPostcode = (function () {
+  const scriptId = 'daum_postcode_script';
+  let promise: Promise<PostcodeConstructor> | null = null;
 
-export const postcodeScriptUrl = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
+  return function (url: string = postcodeScriptUrl): Promise<PostcodeConstructor> {
+    if( promise ) return promise;
 
-const scriptId = 'daum_postcode_script';
+    promise = new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = url;
+      script.onload = () => {
+        if( window?.daum?.Postcode ) {
+          return resolve(window.daum.Postcode);
+        }
+        reject(new Error('Script is loaded successfully, but cannot find Postcode module. Check your scriptURL property.'))
+      };
+      script.onerror = (error) => reject(error);
+      script.id = scriptId;
+      document.body.appendChild(script);
+    })
 
-const loadPostcode = (url: string = postcodeScriptUrl): Promise<typeof window.daum.Postcode> => {
-  if (window.daum && window.daum.Postcode) {
-    return Promise.resolve(window.daum.Postcode);
-  }
-  if (!document.getElementById(scriptId)) {
-    const script = document.createElement('script');
-    script.src = url;
-    script.id = scriptId;
-    script.onload = () => {
-      try {
-        promiseQueue.resolveAll(window.daum.Postcode);
-      } catch (e) {
-        promiseQueue.rejectAll(e);
-      }
-    };
-    script.onerror = (error) => promiseQueue.rejectAll(error);
-    document.body.appendChild(script);
-  }
-  return new Promise<PostcodeConstructor>((resolve, reject) => {
-    promiseQueue.enqueue([resolve, reject]);
-  });
-};
+    return promise;
+  };
+})();
 
 export default loadPostcode;