feat(SSR): SSR support

package.json

@@ -3,7 +3,8 @@
   "description": "NaverMap component for Vue3",
   "version": "0.4.0",
   "license": "MIT",
-  "main": "dist/vue3-naver-maps.js",
+  "main": "dist/vue3-naver-maps.cjs.js",
+  "module": "dist/vue3-naver-maps.esm.js",
   "types": "dist/vue3-naver-maps.d.ts",
   "sideEffects": false,
   "files": [

rollup.config.js

@@ -2,33 +2,67 @@ import path from "path";
 import alias from "@rollup/plugin-alias";
 import nodeResolve from "@rollup/plugin-node-resolve";
 import typescript from "rollup-plugin-typescript2";
-import vuePlugin from "rollup-plugin-vue";
+import vue from "rollup-plugin-vue";
 import { terser } from "rollup-plugin-terser";
 
-export default {
-  input: "src/index.ts",
-  output: [{ file: "dist/vue3-naver-maps.js", format: "es" }],
-  external: ["vue"],
-  plugins: [
-    alias({
-      entries: [{ find: "@", replacement: path.resolve(__dirname, "src/") }],
-    }),
-    nodeResolve({
-      extensions: [".ts", ".tsx", ".js", ".json", ".vue"],
-      modules: [path.resolve(__dirname, "./"), "node_modules"],
-    }),
-    typescript({
-      tsconfig: path.resolve(__dirname, "tsconfig.json"),
-      tsconfigOverride: {
-        compilerOptions: {
-          sourceMap: false,
-          declaration: true,
-          declarationMap: true,
+const pkg = require("./package.json");
+const banner = `/*!
+  * ${pkg.name} v${pkg.version}
+  * (c) ${new Date().getFullYear()} Dongkyuuuu
+  * @license MIT
+  */`;
+
+const outputConfigs = {
+  cjs: {
+    file: pkg.main,
+    format: "cjs",
+  },
+  esm: {
+    file: pkg.module,
+    format: "es",
+  },
+};
+
+const createConfigs = (format, output) => {
+  output.sourcemap = !!process.env.SOURCE_MAP;
+  output.exports = format === "cjs" ? "named" : "auto";
+  output.globals = {
+    vue: "Vue",
+  };
+  output.banner = banner;
+
+  const pluginVue =
+    format === "cjs" ? vue({ template: { optimizeSSR: true } }) : vue();
+
+  return {
+    input: "src/index.ts",
+    external: ["vue"],
+    plugins: [
+      alias({
+        entries: [{ find: "@", replacement: path.resolve(__dirname, "src/") }],
+      }),
+      nodeResolve({
+        extensions: [".ts", ".tsx", ".js", ".json", ".vue"],
+        modules: [path.resolve(__dirname, "./"), "node_modules"],
+      }),
+      typescript({
+        tsconfig: path.resolve(__dirname, "tsconfig.json"),
+        tsconfigOverride: {
+          compilerOptions: {
+            sourceMap: false,
+            declaration: true,
+            declarationMap: true,
+          },
         },
-      },
-      exclude: [".yarn", "__tests__"],
-    }),
-    vuePlugin(),
-    terser(),
-  ],
+        exclude: [".yarn", "__tests__"],
+      }),
+      pluginVue,
+      terser(),
+    ],
+    output,
+  };
 };
+
+export default Object.keys(outputConfigs).map((format) =>
+  createConfigs(format, outputConfigs[format])
+);

src/components/Map.vue

@@ -14,9 +14,12 @@ import {
   onUnmounted,
   watchEffect,
   provide,
+  inject,
+  onBeforeMount,
 } from "vue";
 import { useMapInitOptions, addEventMap, UI_EVENT_MAP } from "../utils";
-import { naverMapObject } from "../injectionKeys";
+import { naverMapObject, isSSR } from "../injectionKeys";
+import { setupScript } from "../config/install";
 import type { naverV3 } from "../types";
 
 export default defineComponent({
@@ -35,6 +38,7 @@ export default defineComponent({
     },
   },
   setup: (props, { emit }) => {
+    const ssr = inject(isSSR);
     const map = ref<naver.maps.Map | null>(null);
     const mapRef = ref<HTMLDivElement | null>(null);
     const { width, height, mapOptions, initLayers } = toRefs(props);
@@ -67,6 +71,7 @@ export default defineComponent({
       });
     });
 
+    onBeforeMount(() => (ssr ? setupScript(ssr) : ""));
     onMounted(() =>
       window.naver ? createMap() : createMapAfterScriptLoaded()
     );

src/config/install.ts

@@ -1,4 +1,5 @@
 import { App } from "vue";
+import { isSSR } from "../injectionKeys";
 import type { naverV3 } from "../types";
 
 export function install(app: App<Element>, options: naverV3.install.options) {
@@ -8,13 +9,13 @@ export function install(app: App<Element>, options: naverV3.install.options) {
 
   if (!options.clientId) throw new Error(ERROR_MSG_CLIENT);
 
-  _setupScript(options);
+  options.ssr ? app.provide(isSSR, options) : setupScript(options);
 }
 
 /**
  * vue3-naver-maps script setup
  */
-function _setupScript(options: naverV3.install.options) {
+export function setupScript(options: naverV3.install.options) {
   const isExist = document.getElementById("vue3-naver-maps");
   if (!isExist) {
     const URL = _createURL(options);

src/index.ts

@@ -6,9 +6,8 @@ import NaverInfoWindow from "./components/InfoWindow.vue";
 import NaverCircle from "./components/Circle.vue";
 import NaverEllipse from "./components/Ellipse.vue";
 import NaverRectangle from "./components/Rectangle.vue";
-import NaverPolygon from './components/Polygon.vue'
+import NaverPolygon from "./components/Polygon.vue";
 
-// export * from "./apis";
 export { naverV3 } from "./types";
 
 export {
@@ -22,8 +21,5 @@ export {
   NaverEllipse,
   NaverRectangle,
   NaverPolygon,
-  /**
-   * default
-   */
-  install as default,
 };
+export default install;

src/injectionKeys.ts

@@ -1,9 +1,10 @@
 import { InjectionKey, Ref } from "vue";
-import type { useMap } from "./types";
+import { naverV3 } from "./index";
 
 export const naverMapObject: InjectionKey<Ref<naver.maps.Map | null>> = Symbol(
   "[vue3-naver-maps]naverMapObject"
 );
-export const useMapkey: InjectionKey<useMap> = Symbol(
-  "[vue3-naver-maps]useMap"
+
+export const isSSR: InjectionKey<naverV3.install.options> = Symbol(
+  "[vue3-naver-maps]Options-SSR"
 );

src/types/index.ts

@@ -6,6 +6,7 @@ export declare namespace naverV3 {
 
     interface options {
       clientId: string;
+      ssr: boolean;
       category?: category;
       subModules?: string;
     }