Optimize SSR for Nuxt

dist/vue-clock.esm.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const SECOND=1e3,HOUR=12;function getHourTime(e){return e>=12?"PM":"AM"}function getZeroPad(e){return(parseInt(e,10)>=10?"":"0")+e}var script={data(){return{hours:0,minutes:0,seconds:0,hourtime:""}},mounted(){this.$options.timer=window.setTimeout(this.updateDateTime,SECOND)},beforeDestroy(){window.clearTimeout(this.$options.timer)},methods:{updateDateTime(){const e=new Date();this.hours=e.getHours(),this.minutes=getZeroPad(e.getMinutes()),this.seconds=getZeroPad(e.getSeconds()),this.hourtime=getHourTime(this.hours),this.hours=this.hours%HOUR||HOUR,this.$options.timer=window.setTimeout(this.updateDateTime,SECOND)}}};function normalizeComponent(e,t,s,n,d,u,c,r,l,m){typeof c!="boolean"&&(l=r,r=c,c=!1);const i=typeof s=="function"?s.options:s;e&&e.render&&(i.render=e.render,i.staticRenderFns=e.staticRenderFns,i._compiled=!0,d&&(i.functional=!0)),n&&(i._scopeId=n);let a;if(u?(a=function(o){o=o||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!o&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(o=__VUE_SSR_CONTEXT__),t&&t.call(this,l(o)),o&&o._registeredComponents&&o._registeredComponents.add(u)},i._ssrRegister=a):t&&(a=c?function(o){t.call(this,m(o,this.$root.$options.shadowRoot))}:function(o){t.call(this,r(o))}),a)if(i.functional){const o=i.render;i.render=function(_,A){return a.call(A),o(_,A)}}else{const o=i.beforeCreate;i.beforeCreate=o?[].concat(o,a):[a]}return s}const isOldIE=typeof navigator!="undefined"&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(e){return(t,s)=>addStyle(t,s)}let HEAD;const styles={};function addStyle(e,t){const s=isOldIE?t.media||"default":e,n=styles[s]||(styles[s]={ids:new Set(),styles:[]});if(!n.ids.has(e)){n.ids.add(e);let d=t.source;if(t.map&&(d+=`
-/*# sourceURL=`+t.map.sources[0]+" */",d+=`
-/*# sourceMappingURL=data:application/json;base64,`+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),HEAD===void 0&&(HEAD=document.head||document.getElementsByTagName("head")[0]),HEAD.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(d),n.element.styleSheet.cssText=n.styles.filter(Boolean).join(`
-`);else{const u=n.ids.size-1,c=document.createTextNode(d),r=n.element.childNodes;r[u]&&n.element.removeChild(r[u]),r.length?n.element.insertBefore(c,r[u]):n.element.appendChild(c)}}}const __vue_script__=script;var __vue_render__=function(){var e=this,t=e.$createElement,s=e._self._c||t;return e.hourtime!=""?s("div",{staticClass:"clock"},[s("div",{staticClass:"clock__hours"},[s("span",{staticClass:"clock__hourtime",domProps:{textContent:e._s(e.hourtime)}}),e._v(" "),s("span",{domProps:{textContent:e._s(e.hours)}})]),e._v(" "),s("div",{staticClass:"clock__minutes",domProps:{textContent:e._s(e.minutes)}}),e._v(" "),s("div",{staticClass:"clock__seconds",domProps:{textContent:e._s(e.seconds)}})]):e._e()},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;const __vue_inject_styles__=function(e){if(!e)return;e("data-v-6294754c_0",{source:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const SECOND=1e3,HOUR=12;function getHourTime(e){return e>=12?"PM":"AM"}function getZeroPad(e){return(parseInt(e,10)>=10?"":"0")+e}var script={data(){return{hours:0,minutes:0,seconds:0,hourtime:""}},mounted(){this.$options.timer=window.setTimeout(this.updateDateTime,SECOND)},beforeDestroy(){window.clearTimeout(this.$options.timer)},methods:{updateDateTime(){const e=new Date();this.hours=e.getHours(),this.minutes=getZeroPad(e.getMinutes()),this.seconds=getZeroPad(e.getSeconds()),this.hourtime=getHourTime(this.hours),this.hours=this.hours%HOUR||HOUR,this.$options.timer=window.setTimeout(this.updateDateTime,SECOND)}}};function normalizeComponent(e,n,s,i,a,c,d,u,_,A){typeof d!="boolean"&&(_=u,u=d,d=!1);const o=typeof s=="function"?s.options:s;e&&e.render&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,a&&(o.functional=!0)),i&&(o._scopeId=i);let r;if(c?(r=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!t&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(t=__VUE_SSR_CONTEXT__),n&&n.call(this,_(t)),t&&t._registeredComponents&&t._registeredComponents.add(c)},o._ssrRegister=r):n&&(r=d?function(t){n.call(this,A(t,this.$root.$options.shadowRoot))}:function(t){n.call(this,u(t))}),r)if(o.functional){const t=o.render;o.render=function(m,l){return r.call(l),t(m,l)}}else{const t=o.beforeCreate;o.beforeCreate=t?[].concat(t,r):[r]}return s}function createInjectorSSR(e){return!e&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(e=__VUE_SSR_CONTEXT__),e?("styles"in e||(e._styles=e._styles||{},Object.defineProperty(e,"styles",{enumerable:!0,get:()=>e._renderStyles(e._styles)}),e._renderStyles=e._renderStyles||renderStyles),(n,s)=>addStyle(n,s,e)):()=>{}}function addStyle(e,n,s){const i=process.env.NODE_ENV==="production"?n.media||"default":e,a=s._styles[i]||(s._styles[i]={ids:[],css:""});if(!a.ids.includes(e)){a.media=n.media,a.ids.push(e);let c=n.source;process.env.NODE_ENV!=="production"&&n.map&&(c+=`
+/*# sourceURL=`+n.map.sources[0]+" */",c+=`
+/*# sourceMappingURL=data:application/json;base64,`+Buffer.from(unescape(encodeURIComponent(JSON.stringify(n.map)))).toString("base64")+" */"),a.css+=c+`
+`}}function renderStyles(e){let n="";for(const s in e){const i=e[s];n+='<style data-vue-ssr-id="'+Array.from(i.ids).join(" ")+'"'+(i.media?' media="'+i.media+'"':"")+">"+i.css+"</style>"}return n}const __vue_script__=script;var __vue_render__=function(){var e=this,n=e.$createElement,s=e._self._c||n;return e.hourtime!=""?s("div",{staticClass:"clock"},[e._ssrNode('<div class="clock__hours" data-v-6294754c><span class="clock__hourtime" data-v-6294754c>'+e._ssrEscape(e._s(e.hourtime))+"</span> <span data-v-6294754c>"+e._ssrEscape(e._s(e.hours))+'</span></div> <div class="clock__minutes" data-v-6294754c>'+e._ssrEscape(e._s(e.minutes))+'</div> <div class="clock__seconds" data-v-6294754c>'+e._ssrEscape(e._s(e.seconds))+"</div>")]):e._e()},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;const __vue_inject_styles__=function(e){if(!e)return;e("data-v-6294754c_0",{source:`
 .clock[data-v-6294754c] {
   background: #fff;
   border: 0.3rem solid #fff;
@@ -124,4 +124,4 @@ export default {
   left: 8px;
 }
 </style>
-`]},media:void 0})},__vue_scope_id__="data-v-6294754c",__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,__vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,void 0,void 0);exports.default=__vue_component__;
+`]},media:void 0})},__vue_scope_id__="data-v-6294754c",__vue_module_identifier__="data-v-6294754c",__vue_is_functional_template__=!1,__vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,void 0,createInjectorSSR,void 0);exports.default=__vue_component__;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dangvanthanh/vue-clock",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Simple clock using Vue.js",
   "author": "Dang Van Thanh <[email protected]>",
   "main": "dist/vue-clock.cjs.js",
@@ -9,11 +9,7 @@
   "scripts": {
     "build": "rollup -c"
   },
-  "keywords": [
-    "vue",
-    "vue-clock",
-    "clock"
-  ],
+  "keywords": ["vue", "vue-clock", "clock"],
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^15.0.0",

rollup.config.js

@@ -7,6 +7,12 @@ import pkg from './package.json';
 const production = !process.env.ROLLUP_WATCH;
 
 const plugins = [vue(), resolve(), commonjs(), esbuild({ minify: production })];
+const pluginsSSR = [
+  vue({ template: { optimizeSSR: true } }),
+  resolve(),
+  commonjs(),
+  esbuild({ minify: production })
+];
 
 export default [
   {
@@ -24,7 +30,7 @@ export default [
       format: 'cjs',
       file: pkg.module
     },
-    plugins
+    plugins: pluginsSSR
   },
   {
     input: 'src/index.js',