From 4d9a4066e54cb36aa9b89939a0197a0d4bf5efb2 Mon Sep 17 00:00:00 2001 From: Dongkyuuuu Date: Thu, 30 Sep 2021 22:04:55 +0900 Subject: [PATCH] feat(SSR): SSR support --- package.json | 3 +- rollup.config.js | 86 +++++++++++++++++++++++++++++------------- src/components/Map.vue | 7 +++- src/config/install.ts | 5 ++- src/index.ts | 8 +--- src/injectionKeys.ts | 7 ++-- src/types/index.ts | 1 + 7 files changed, 78 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 8704262..b829c6d 100644 --- a/package.json +++ b/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": [ diff --git a/rollup.config.js b/rollup.config.js index 95c02cf..93c4cf6 100644 --- a/rollup.config.js +++ b/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]) +); diff --git a/src/components/Map.vue b/src/components/Map.vue index 960d982..7fb4e34 100644 --- a/src/components/Map.vue +++ b/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(null); const mapRef = ref(null); const { width, height, mapOptions, initLayers } = toRefs(props); @@ -67,6 +71,7 @@ export default defineComponent({ }); }); + onBeforeMount(() => (ssr ? setupScript(ssr) : "")); onMounted(() => window.naver ? createMap() : createMapAfterScriptLoaded() ); diff --git a/src/config/install.ts b/src/config/install.ts index bcd08c6..663cbce 100644 --- a/src/config/install.ts +++ b/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, options: naverV3.install.options) { @@ -8,13 +9,13 @@ export function install(app: App, 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); diff --git a/src/index.ts b/src/index.ts index ca55e75..d0951bc 100644 --- a/src/index.ts +++ b/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; diff --git a/src/injectionKeys.ts b/src/injectionKeys.ts index c4acb48..3c55cd4 100644 --- a/src/injectionKeys.ts +++ b/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> = Symbol( "[vue3-naver-maps]naverMapObject" ); -export const useMapkey: InjectionKey = Symbol( - "[vue3-naver-maps]useMap" + +export const isSSR: InjectionKey = Symbol( + "[vue3-naver-maps]Options-SSR" ); diff --git a/src/types/index.ts b/src/types/index.ts index 6a1535b..406ef5a 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -6,6 +6,7 @@ export declare namespace naverV3 { interface options { clientId: string; + ssr: boolean; category?: category; subModules?: string; }