feat: add support for setting attributes from multiple apps

pimlie · pimlie · commit d9b0ab29da25 · 2019-09-17T13:55:29.000+02:00
chore: improve build size
diff --git a/examples/ssr/App.js b/examples/ssr/App.js
@@ -69,6 +69,7 @@ export default function createApp () {
       return {
         title: 'Boring Title',
         htmlAttrs: { amp: true },
+        bodyAttrs: { class: 'main-app' },
         meta: [
           {
             skip: this.count < 1,
@@ -116,6 +117,14 @@ export default function createApp () {
         users: process.server ? [] : window.users
       }
     },
+    mounted() {
+      const { set, remove } = this.$meta().addApp('client-only')
+      set({
+        bodyAttrs: { class: 'client-only' }
+      })
+
+      setTimeout(() => remove(), 3000)
+    },
     methods: {
       loadCallback () {
         this.count++
@@ -140,6 +149,7 @@ export default function createApp () {
 
   const { set } = app.$meta().addApp('custom')
   set({
+    bodyAttrs: { class: 'custom-app' },
     meta: [{ charset: 'utf-8' }]
   })
 
diff --git a/examples/vue-router/app.js b/examples/vue-router/app.js
@@ -18,6 +18,9 @@ const ChildComponent = {
   metaInfo () {
     return {
       title: `${this.page} - ${this.date && this.date.toTimeString()}`,
+      bodyAttrs: {
+        class: 'child-component'
+      },
       afterNavigation () {
         metaUpdated = 'yes'
       }
@@ -82,6 +85,9 @@ const app = new Vue(App)
 const { set, remove } = app.$meta().addApp('custom')
 
 set({
+  bodyAttrs: {
+    class: 'custom-app'
+  },
   meta: [
     { charset: 'utf=8' }
   ]
diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js
@@ -43,13 +43,15 @@ function rollupConfig({
   const isBrowserBuild = !config.output || !config.output.format || config.output.format === 'umd' || config.output.file.includes('.browser.')
 
   const replaceConfig = {
-    exclude: 'node_modules/**',
+    exclude: 'node_modules/(?!is-mergeable-object)',
     delimiters: ['', ''],
     values: {
       // replaceConfig needs to have some values
       'const polyfill = process.env.NODE_ENV === \'test\'': 'const polyfill = true',
       'process.env.VERSION': `"${version}"`,
-      'process.server' : isBrowserBuild ? 'false' : 'true'
+      'process.server' : isBrowserBuild ? 'false' : 'true',
+      // remove react stuff from is-mergeable-object
+      '|| isReactElement(value)': '|| false'
     }
   }
 
diff --git a/src/client/load.js b/src/client/load.js
@@ -60,7 +60,11 @@ export function addListeners () {
 }
 
 export function applyCallbacks (matchElement) {
-  callbacks.forEach(([query, callback]) => {
+  callbacks.forEach((args) => {
+    // do not use destructuring for args, it increases transpiled size
+    // due to var checks while we are guaranteed the structure of the cb
+    const query = args[0]
+    const callback = args[1]
     const selector = `${query}[onload="this.__vm_l=1"]`
 
     let elements = []
diff --git a/src/client/updateClientMetaInfo.js b/src/client/updateClientMetaInfo.js
@@ -56,7 +56,7 @@ export default function updateClientMetaInfo (appId, options = {}, newInfo) {
 
     if (includes(metaInfoAttributeKeys, type)) {
       const tagName = type.substr(0, 4)
-      updateAttribute(options, newInfo[type], getTag(tags, tagName))
+      updateAttribute(appId, options, type, newInfo[type], getTag(tags, tagName))
       continue
     }
 
diff --git a/src/client/updaters/attribute.js b/src/client/updaters/attribute.js
@@ -1,46 +1,72 @@
 import { booleanHtmlAttributes } from '../../shared/constants'
-import { toArray, includes } from '../../utils/array'
-import { isArray } from '../../utils/is-type'
+import { includes } from '../../utils/array'
+
+// keep a local map of attribute values
+// instead of adding it to the html
+export const attributeMap = {}
 
 /**
  * Updates the document's html tag attributes
  *
  * @param  {Object} attrs - the new document html attributes
  * @param  {HTMLElement} tag - the HTMLElement tag to update with new attrs
  */
-export default function updateAttribute ({ attribute } = {}, attrs, tag) {
+export default function updateAttribute (appId, { attribute } = {}, type, attrs, tag) {
   const vueMetaAttrString = tag.getAttribute(attribute)
-  const vueMetaAttrs = vueMetaAttrString ? vueMetaAttrString.split(',') : []
-  const toRemove = toArray(vueMetaAttrs)
+  if (vueMetaAttrString) {
+    attributeMap[type] = JSON.parse(decodeURI(vueMetaAttrString))
+    tag.removeAttribute(attribute)
+  }
 
-  const keepIndexes = []
-  for (const attr in attrs) {
-    if (attrs.hasOwnProperty(attr)) {
-      const value = includes(booleanHtmlAttributes, attr)
-        ? ''
-        : isArray(attrs[attr]) ? attrs[attr].join(' ') : attrs[attr]
+  let data = attributeMap[type] || {}
+
+  const toUpdate = []
 
-      tag.setAttribute(attr, value || '')
+  // remove attributes from the map
+  // which have been removed for this appId
+  for (const attr in data) {
+    if (data[attr] && appId in data[attr]) {
+      toUpdate.push(attr)
 
-      if (!includes(vueMetaAttrs, attr)) {
-        vueMetaAttrs.push(attr)
+      if (!attrs[attr]) {
+        delete data[attr][appId]
       }
+    }
+  }
+
+  for (const attr in attrs) {
+    const attrData = data[attr]
+
+    if (!attrData || attrData[appId] !== attrs[attr]) {
+      toUpdate.push(attr)
 
-      // filter below wont ever check -1
-      keepIndexes.push(toRemove.indexOf(attr))
+      if (attrs[attr]) {
+        data[attr] = data[attr] || {}
+        data[attr][appId] = attrs[attr]
+      } else {
+        delete data[attr][appId]
+      }
     }
   }
 
-  const removedAttributesCount = toRemove
-    .filter((el, index) => !includes(keepIndexes, index))
-    .reduce((acc, attr) => {
-      tag.removeAttribute(attr)
-      return acc + 1
-    }, 0)
+  for (const attr of toUpdate) {
+    const attrData = data[attr]
 
-  if (vueMetaAttrs.length === removedAttributesCount) {
-    tag.removeAttribute(attribute)
-  } else {
-    tag.setAttribute(attribute, (vueMetaAttrs.sort()).join(','))
+    const attrValues = []
+    for (const appId in attrData) {
+      Array.prototype.push.apply(attrValues, [].concat(attrData[appId]))
+    }
+
+    if (attrValues.length) {
+      const attrValue = includes(booleanHtmlAttributes, attr) && attrValues.some(Boolean)
+        ? ''
+        : attrValues.filter(Boolean).join(' ')
+
+      tag.setAttribute(attr, attrValue)
+    } else {
+      tag.removeAttribute(attr)
+    }
   }
+
+  attributeMap[type] = data
 }
diff --git a/src/server/generateServerInjector.js b/src/server/generateServerInjector.js
@@ -47,17 +47,30 @@ export default function generateServerInjector (options, metaInfo) {
         }
 
         if (metaInfoAttributeKeys.includes(type)) {
-          let str = attributeGenerator(options, type, serverInjector.data[type], arg)
+          const attributeData = {}
 
-          if (serverInjector.extraData) {
-            for (const appId in serverInjector.extraData) {
-              const data = serverInjector.extraData[appId][type]
-              const extraStr = attributeGenerator(options, type, data, arg)
-              str = `${str}${extraStr}`
+          const data = serverInjector.data[type]
+          if (data) {
+            for (const attr in data) {
+              attributeData[attr] = {
+                [options.ssrAppId]: data[attr]
+              }
             }
           }
 
-          return str
+          for (const appId in serverInjector.extraData) {
+            const data = serverInjector.extraData[appId][type]
+            if (data) {
+              for (const attr in data) {
+                attributeData[attr] = {
+                  ...attributeData[attr],
+                  [appId]: data[attr]
+                }
+              }
+            }
+          }
+
+          return attributeGenerator(options, type, attributeData, arg)
         }
 
         let str = tagGenerator(options, type, serverInjector.data[type], arg)
diff --git a/src/server/generators/attribute.js b/src/server/generators/attribute.js
@@ -1,5 +1,4 @@
 import { booleanHtmlAttributes } from '../../shared/constants'
-import { isUndefined, isArray } from '../../utils/is-type'
 
 /**
  * Generates tag attributes for use on the server.
@@ -10,22 +9,26 @@ import { isUndefined, isArray } from '../../utils/is-type'
  */
 export default function attributeGenerator ({ attribute, ssrAttribute } = {}, type, data, addSrrAttribute) {
   let attributeStr = ''
-  const watchedAttrs = []
 
   for (const attr in data) {
-    if (data.hasOwnProperty(attr)) {
-      watchedAttrs.push(attr)
+    const attrData = data[attr]
+    const attrValues = []
 
-      attributeStr += isUndefined(data[attr]) || booleanHtmlAttributes.includes(attr)
-        ? attr
-        : `${attr}="${isArray(data[attr]) ? data[attr].join(' ') : data[attr]}"`
+    for (const appId in attrData) {
+      attrValues.push(...[].concat(attrData[appId]))
+    }
+
+    if (attrValues.length) {
+      attributeStr += booleanHtmlAttributes.includes(attr) && attrValues.some(Boolean)
+        ? `${attr}`
+        : `${attr}="${attrValues.join(' ')}"`
 
       attributeStr += ' '
     }
   }
 
   if (attributeStr) {
-    attributeStr += `${attribute}="${(watchedAttrs.sort()).join(',')}"`
+    attributeStr += `${attribute}="${encodeURI(JSON.stringify(data))}"`
   }
 
   if (type === 'htmlAttrs' && addSrrAttribute) {
diff --git a/src/shared/additional-app.js b/src/shared/additional-app.js
@@ -1,5 +1,7 @@
 import updateClientMetaInfo from '../client/updateClientMetaInfo'
-import { removeElementsByAppId } from '../utils/elements'
+import { updateAttribute } from '../client/updaters'
+import { metaInfoAttributeKeys } from '../shared/constants'
+import { getTag, removeElementsByAppId } from '../utils/elements'
 
 let appsMetaInfo
 
@@ -24,6 +26,12 @@ export function setMetaInfo (vm, appId, options, metaInfo) {
 
 export function removeMetaInfo (vm, appId, options) {
   if (vm && vm.$el) {
+    const tags = {}
+    for (const type of metaInfoAttributeKeys) {
+      const tagName = type.substr(0, 4)
+      updateAttribute(appId, options, type, {}, getTag(tags, tagName))
+    }
+
     return removeElementsByAppId(options, appId)
   }
 
diff --git a/src/shared/constants.js b/src/shared/constants.js
@@ -57,19 +57,18 @@ export const defaultOptions = {
   ssrAppId
 }
 
+// The metaInfo property keys which are used to disable escaping
+export const disableOptionKeys = [
+  '__dangerouslyDisableSanitizers',
+  '__dangerouslyDisableSanitizersByTagID'
+]
+
 // List of metaInfo property keys which are configuration options (and dont generate html)
 export const metaInfoOptionKeys = [
   'titleChunk',
   'titleTemplate',
   'changed',
-  '__dangerouslyDisableSanitizers',
-  '__dangerouslyDisableSanitizersByTagID'
-]
-
-// The metaInfo property keys which are used to disable escaping
-export const disableOptionKeys = [
-  '__dangerouslyDisableSanitizers',
-  '__dangerouslyDisableSanitizersByTagID'
+  ...disableOptionKeys
 ]
 
 // List of metaInfo property keys which only generates attributes and no tags
diff --git a/src/shared/escaping.js b/src/shared/escaping.js
@@ -34,7 +34,10 @@ export function escape (info, options, escapeOptions, escapeKeys) {
       continue
     }
 
-    let [ disableKey ] = disableOptionKeys
+    // do not use destructuring for disableOptionKeys, it increases transpiled size
+    // due to var checks while we are guaranteed the structure of the cb
+    let disableKey = disableOptionKeys[0]
+
     if (escapeOptions[disableKey] && includes(escapeOptions[disableKey], key)) {
       // this info[key] doesnt need to escaped if the option is listed in __dangerouslyDisableSanitizers
       escaped[key] = value
@@ -81,8 +84,10 @@ export function escape (info, options, escapeOptions, escapeKeys) {
 }
 
 export function escapeMetaInfo (options, info, escapeSequences = []) {
+  // do not use destructuring for seq, it increases transpiled size
+  // due to var checks while we are guaranteed the structure of the cb
   const escapeOptions = {
-    doEscape: value => escapeSequences.reduce((val, [v, r]) => val.replace(v, r), value)
+    doEscape: value => escapeSequences.reduce((val, seq) => val.replace(seq[0], seq[1]), value)
   }
 
   disableOptionKeys.forEach((disableKey, index) => {
diff --git a/test/unit/components.test.js b/test/unit/components.test.js
@@ -1,6 +1,6 @@
 import { getComponentMetaInfo } from '../../src/shared/getComponentOption'
 import _getMetaInfo from '../../src/shared/getMetaInfo'
-import { mount, createWrapper, loadVueMetaPlugin, vmTick } from '../utils'
+import { mount, createWrapper, loadVueMetaPlugin, vmTick, clearClientAttributeMap } from '../utils'
 import { defaultOptions } from '../../src/shared/constants'
 
 import GoodbyeWorld from '../components/goodbye-world.vue'
@@ -226,6 +226,13 @@ describe('client', () => {
     // this component uses a computed prop to simulate a non-synchronous
     // metaInfo update like you would have with a Vuex mutation
     const Component = Vue.extend({
+      metaInfo () {
+        return {
+          htmlAttrs: {
+            theme: this.theme
+          }
+        }
+      },
       data () {
         return {
           hiddenTheme: 'light'
@@ -239,14 +246,7 @@ describe('client', () => {
       beforeMount () {
         this.hiddenTheme = 'dark'
       },
-      render: h => h('div'),
-      metaInfo () {
-        return {
-          htmlAttrs: {
-            theme: this.theme
-          }
-        }
-      }
+      render: h => h('div')
     })
 
     const vm = new Component().$mount(el)
@@ -263,6 +263,8 @@ describe('client', () => {
   })
 
   test('changes during hydration initialization trigger an update', async () => {
+    clearClientAttributeMap()
+
     html.setAttribute(defaultOptions.ssrAttribute, 'true')
 
     const el = document.createElement('div')
diff --git a/test/unit/generators.test.js b/test/unit/generators.test.js
@@ -29,7 +29,7 @@ describe('generators', () => {
         const testInfo = typeTests[action]
 
         // return when no test case available
-        if (!testCases[action] && !testInfo.test) {
+        if (!testCases[action]) {
           return
         }
 
diff --git a/test/unit/updaters.test.js b/test/unit/updaters.test.js
diff --git a/test/utils/index.js b/test/utils/index.js
diff --git a/test/utils/meta-info-data.js b/test/utils/meta-info-data.js

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ export default function updateClientMetaInfo (appId, options = {}, newInfo) {`
`56`	`56`
`57`	`57`	`if (includes(metaInfoAttributeKeys, type)) {`
`58`	`58`	`const tagName = type.substr(0, 4)`
`59`		`- updateAttribute(options, newInfo[type], getTag(tags, tagName))`
	`59`	`+ updateAttribute(appId, options, type, newInfo[type], getTag(tags, tagName))`
`60`	`60`	`continue`
`61`	`61`	`}`
`62`	`62`