chore: dist size improvements

chore: configure terser to mangle internal properties

chore: do not use default value assignment in function args

scripts/rollup.config.js

@@ -5,6 +5,7 @@ import babel from 'rollup-plugin-babel'
 import replace from 'rollup-plugin-replace'
 import { terser } from 'rollup-plugin-terser'
 import defaultsDeep from 'lodash/defaultsDeep'
+import { defaultOptions } from '../src/shared/constants'
 
 const pkg = require('../package.json')
 
@@ -35,6 +36,41 @@ const babelConfig = () => ({
   ]
 })
 
+const internalObjectProperties = [
+  // Plugin options
+  // NOTE, see shared/options for why/how this is possible to do
+  ...Object.keys(defaultOptions),
+  'refreshOnceOnNavigation',
+  // Runtime state props on $root._vueMeta
+  'appId',
+  'pausing',
+  'navGuards',
+  'initialized',
+  'initializing',
+  'deprecationWarningShown',
+  // updateClientMetaInfo return props
+  'tagsAdded',
+  'tagsRemoved',
+  // escapeOptions
+  'doEscape',
+  // deepmerge
+  'isMergeableObject',
+  'arrayMerge'
+]
+
+const terserOpts = {
+  nameCache: {},
+  mangle: {
+    properties: {
+      //debug: '___DEBUGGGG___',
+      // minimize all object properties except when they are quotes like obj['prop']
+      keep_quoted: "strict",
+      // and minimize props listed in internalObjectProperties
+      regex: new RegExp(`^(${internalObjectProperties.join('|')})$`)
+    }
+  }
+}
+
 function rollupConfig({
   plugins = [],
   ...config
@@ -51,17 +87,18 @@ function rollupConfig({
       'process.env.VERSION': `"${version}"`,
       'process.server' : isBrowserBuild ? 'false' : 'true',
       /* remove unused stuff from deepmerge */
-
       // remove react stuff from is-mergeable-object
       '|| isReactElement(value)': '|| false',
       // we always provide an arrayMerge, remove default
       '|| defaultArrayMerge' : '',
-      // we dont provide a custom merge
+      // clone is a deprecated option we dont use
       'options.clone' : 'false',
       // we dont provide a custom merge
       'options.customMerge' : 'false',
-      // dont use this
-      'deepmerge.all = ' : 'false;'
+      // we dont use this helper
+      'deepmerge.all = ' : 'false;',
+      // we dont use symbols on our objects
+      '.concat(getEnumerableOwnPropertySymbols(target))': ''
     }
   }
 
@@ -103,7 +140,7 @@ export default [
       file: pkg.web.replace('.js', '.min.js'),
     },
     plugins: [
-      terser()
+      terser(terserOpts)
     ]
   },
   // common js build
@@ -137,7 +174,7 @@ export default [
       format: 'es'
     },
     plugins: [
-      terser()
+      terser(terserOpts)
     ],
     external: Object.keys(pkg.dependencies)
   }

src/client/load.js

@@ -1,13 +1,14 @@
 import { toArray } from '../utils/array'
+import { querySelector, removeAttribute } from '../utils/elements'
 
 const callbacks = []
 
-export function isDOMLoaded (d = document) {
-  return d.readyState !== 'loading'
+export function isDOMLoaded (d) {
+  return (d || document).readyState !== 'loading'
 }
 
-export function isDOMComplete (d = document) {
-  return d.readyState === 'complete'
+export function isDOMComplete (d) {
+  return (d || document).readyState === 'complete'
 }
 
 export function waitDOMLoaded () {
@@ -69,7 +70,7 @@ export function applyCallbacks (matchElement) {
 
     let elements = []
     if (!matchElement) {
-      elements = toArray(document.querySelectorAll(selector))
+      elements = toArray(querySelector(selector))
     }
 
     if (matchElement && matchElement.matches(selector)) {
@@ -95,7 +96,7 @@ export function applyCallbacks (matchElement) {
          * attribute after ssr and if we dont remove it the node
          * will fail isEqualNode on the client
          */
-        element.removeAttribute('onload')
+        removeAttribute(element, 'onload')
 
         callback(element)
       }

src/client/refresh.js

@@ -17,7 +17,9 @@ import updateClientMetaInfo from './updateClientMetaInfo'
  *
  * @return {Object} - new meta info
  */
-export default function refresh (rootVm, options = {}) {
+export default function refresh (rootVm, options) {
+  options = options || {}
+
   // make sure vue-meta was initiated
   if (!rootVm[rootConfigKey]) {
     showWarningNotSupported()
@@ -30,11 +32,16 @@ export default function refresh (rootVm, options = {}) {
   const metaInfo = getMetaInfo(options, rawInfo, clientSequences, rootVm)
 
   const { appId } = rootVm[rootConfigKey]
-  const tags = updateClientMetaInfo(appId, options, metaInfo)
+  let tags = updateClientMetaInfo(appId, options, metaInfo)
 
   // emit "event" with new info
   if (tags && isFunction(metaInfo.changed)) {
-    metaInfo.changed(metaInfo, tags.addedTags, tags.removedTags)
+    metaInfo.changed(metaInfo, tags.tagsAdded, tags.tagsRemoved)
+
+    tags = {
+      addedTags: tags.tagsAdded,
+      removedTags: tags.tagsRemoved
+    }
   }
 
   const appsMetaInfo = getAppsMetaInfo()
@@ -46,5 +53,9 @@ export default function refresh (rootVm, options = {}) {
     clearAppsMetaInfo(true)
   }
 
-  return { vm: rootVm, metaInfo, tags }
+  return {
+    vm: rootVm,
+    metaInfo: metaInfo, // eslint-disable-line object-shorthand
+    tags
+  }
 }

src/client/update.js

@@ -11,7 +11,7 @@ export function triggerUpdate (rootVm, hookName) {
     rootVm[rootConfigKey].initialized = null
   }
 
-  if (rootVm[rootConfigKey].initialized && !rootVm[rootConfigKey].paused) {
+  if (rootVm[rootConfigKey].initialized && !rootVm[rootConfigKey].pausing) {
     // batch potential DOM updates to prevent extraneous re-rendering
     batchUpdate(() => rootVm.$meta().refresh())
   }
@@ -24,7 +24,9 @@ export function triggerUpdate (rootVm, hookName) {
  * @param  {Function} callback - the update to perform
  * @return {Number} id - a new ID
  */
-export function batchUpdate (callback, timeout = 10) {
+export function batchUpdate (callback, timeout) {
+  timeout = timeout || 10
+
   clearTimeout(batchId)
 
   batchId = setTimeout(() => {

src/client/updateClientMetaInfo.js

@@ -1,7 +1,7 @@
 import { metaInfoOptionKeys, metaInfoAttributeKeys, tagsSupportingOnload } from '../shared/constants'
 import { isArray } from '../utils/is-type'
 import { includes } from '../utils/array'
-import { getTag } from '../utils/elements'
+import { getTag, removeAttribute } from '../utils/elements'
 import { addCallbacks, addListeners } from './load'
 import { updateAttribute, updateTag, updateTitle } from './updaters'
 
@@ -10,7 +10,8 @@ import { updateAttribute, updateTag, updateTitle } from './updaters'
  *
  * @param  {Object} newInfo - the meta info to update to
  */
-export default function updateClientMetaInfo (appId, options = {}, newInfo) {
+export default function updateClientMetaInfo (appId, options, newInfo) {
+  options = options || {}
   const { ssrAttribute, ssrAppId } = options
 
   // only cache tags for current update
@@ -21,7 +22,7 @@ export default function updateClientMetaInfo (appId, options = {}, newInfo) {
   // if this is a server render, then dont update
   if (appId === ssrAppId && htmlTag.hasAttribute(ssrAttribute)) {
     // remove the server render attribute so we can update on (next) changes
-    htmlTag.removeAttribute(ssrAttribute)
+    removeAttribute(htmlTag, ssrAttribute)
 
     // add load callbacks if the
     let addLoadListeners = false
@@ -39,8 +40,8 @@ export default function updateClientMetaInfo (appId, options = {}, newInfo) {
   }
 
   // initialize tracked changes
-  const addedTags = {}
-  const removedTags = {}
+  const tagsAdded = {}
+  const tagsRemoved = {}
 
   for (const type in newInfo) {
     // ignore these
@@ -75,10 +76,10 @@ export default function updateClientMetaInfo (appId, options = {}, newInfo) {
     )
 
     if (newTags.length) {
-      addedTags[type] = newTags
-      removedTags[type] = oldTags
+      tagsAdded[type] = newTags
+      tagsRemoved[type] = oldTags
     }
   }
 
-  return { addedTags, removedTags }
+  return { tagsAdded, tagsRemoved }
 }

src/client/updaters/attribute.js

@@ -1,5 +1,6 @@
 import { booleanHtmlAttributes } from '../../shared/constants'
 import { includes } from '../../utils/array'
+import { removeAttribute } from '../../utils/elements'
 
 // keep a local map of attribute values
 // instead of adding it to the html
@@ -11,11 +12,13 @@ export const attributeMap = {}
  * @param  {Object} attrs - the new document html attributes
  * @param  {HTMLElement} tag - the HTMLElement tag to update with new attrs
  */
-export default function updateAttribute (appId, { attribute } = {}, type, attrs, tag) {
+export default function updateAttribute (appId, options, type, attrs, tag) {
+  const { attribute } = options || {}
+
   const vueMetaAttrString = tag.getAttribute(attribute)
   if (vueMetaAttrString) {
     attributeMap[type] = JSON.parse(decodeURI(vueMetaAttrString))
-    tag.removeAttribute(attribute)
+    removeAttribute(tag, attribute)
   }
 
   const data = attributeMap[type] || {}
@@ -62,7 +65,7 @@ export default function updateAttribute (appId, { attribute } = {}, type, attrs,
 
       tag.setAttribute(attr, attrValue)
     } else {
-      tag.removeAttribute(attr)
+      removeAttribute(tag, attr)
     }
   }
 

src/client/updaters/tag.js

@@ -10,8 +10,8 @@ import { queryElements, getElementsKey } from '../../utils/elements.js'
  * @param  {(Array<Object>|Object)} tags - an array of tag objects or a single object in case of base
  * @return {Object} - a representation of what tags changed
  */
-export default function updateTag (appId, options = {}, type, tags, head, body) {
-  const { attribute, tagIDKeyName } = options
+export default function updateTag (appId, options, type, tags, head, body) {
+  const { attribute, tagIDKeyName } = options || {}
 
   const dataAttributes = commonDataAttributes.slice()
   dataAttributes.push(tagIDKeyName)
@@ -46,20 +46,20 @@ export default function updateTag (appId, options = {}, type, tags, head, body)
     const newElement = document.createElement(type)
     newElement.setAttribute(attribute, appId)
 
-    for (const attr in tag) {
+    Object.keys(tag).forEach((attr) => {
       /* istanbul ignore next */
-      if (!tag.hasOwnProperty(attr) || includes(tagProperties, attr)) {
-        continue
+      if (includes(tagProperties, attr)) {
+        return
       }
 
       if (attr === 'innerHTML') {
         newElement.innerHTML = tag.innerHTML
-        continue
+        return
       }
 
       if (attr === 'json') {
         newElement.innerHTML = JSON.stringify(tag.json)
-        continue
+        return
       }
 
       if (attr === 'cssText') {
@@ -69,12 +69,12 @@ export default function updateTag (appId, options = {}, type, tags, head, body)
         } else {
           newElement.appendChild(document.createTextNode(tag.cssText))
         }
-        continue
+        return
       }
 
       if (attr === 'callback') {
         newElement.onload = () => tag[attr](newElement)
-        continue
+        return
       }
 
       const _attr = includes(dataAttributes, attr)
@@ -83,12 +83,12 @@ export default function updateTag (appId, options = {}, type, tags, head, body)
 
       const isBooleanAttribute = includes(booleanHtmlAttributes, attr)
       if (isBooleanAttribute && !tag[attr]) {
-        continue
+        return
       }
 
       const value = isBooleanAttribute ? '' : tag[attr]
       newElement.setAttribute(_attr, value)
-    }
+    })
 
     const oldElements = currentElements[getElementsKey(tag)]
 

src/index.js

@@ -10,7 +10,7 @@ import { hasMetaInfo } from './shared/meta-helpers'
  * Plugin install function.
  * @param {Function} Vue - the Vue constructor.
  */
-function install (Vue, options = {}) {
+function install (Vue, options) {
   if (Vue.__vuemeta_installed) {
     return
   }

src/server/generate.js

@@ -3,8 +3,9 @@ import { serverSequences } from '../shared/escaping'
 import { setOptions } from '../shared/options'
 import generateServerInjector from './generateServerInjector'
 
-export default function generate (rawInfo, options = {}) {
-  const metaInfo = getMetaInfo(setOptions(options), rawInfo, serverSequences)
+export default function generate (rawInfo, options) {
+  options = setOptions(options)
+  const metaInfo = getMetaInfo(options, rawInfo, serverSequences)
 
   const serverInjector = generateServerInjector(options, metaInfo)
   return serverInjector.injectors

src/server/generators/attribute.js

@@ -7,7 +7,8 @@ import { booleanHtmlAttributes } from '../../shared/constants'
  * @param  {Object} data - the attributes to generate
  * @return {Object} - the attribute generator
  */
-export default function attributeGenerator ({ attribute, ssrAttribute } = {}, type, data, addSrrAttribute) {
+export default function attributeGenerator (options, type, data, addSrrAttribute) {
+  const { attribute, ssrAttribute } = options || {}
   let attributeStr = ''
 
   for (const attr in data) {

src/server/generators/tag.js

@@ -14,7 +14,10 @@ import {
  * @param  {(Array<Object>|Object)} tags - an array of tag objects or a single object in case of base
  * @return {Object} - the tag generator
  */
-export default function tagGenerator ({ ssrAppId, attribute, tagIDKeyName } = {}, type, tags, { appId, body = false, pbody = false, ln = false } = {}) {
+export default function tagGenerator (options, type, tags, generatorOptions) {
+  const { ssrAppId, attribute, tagIDKeyName } = options || {}
+  const { appId, body = false, pbody = false, ln = false } = generatorOptions || {}
+
   const dataAttributes = [tagIDKeyName, ...commonDataAttributes]
 
   if (!tags || !tags.length) {

src/server/generators/title.js

@@ -5,7 +5,9 @@
  * @param  {String} data - the title text
  * @return {Object} - the title generator
  */
-export default function titleGenerator ({ attribute } = {}, type, data, { ln } = {}) {
+export default function titleGenerator (options, type, data, generatorOptions) {
+  const { ln } = generatorOptions || {}
+
   if (!data) {
     return ''
   }