SSR feature

build/deploy-ci.sh

@@ -42,7 +42,7 @@ if [ "$TRAVIS_TAG" ]; then
   export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
   echo $SUB_FOLDER
 
-  SUB_FOLDER='1.0'
+  SUB_FOLDER='1.1'
   mkdir $SUB_FOLDER
   rm -rf *.js *.css *.map static
   rm -rf $SUB_FOLDER/**

packages/date-picker/src/picker.vue

@@ -375,6 +375,7 @@ export default {
     },
 
     showPicker() {
+      if (this.$isServer) return;
       if (!this.picker) {
         this.panel.defaultValue = this.internalValue;
         this.picker = new Vue(this.panel).$mount(document.createElement('div'));

packages/input-number/src/input-number.vue

@@ -22,7 +22,7 @@
         </template>
         <template slot="append" v-if="$slots.append">
           <slot name="append"></slot>
-        </template> 
+        </template>
     </el-input>
     <span
       v-if="controls"
@@ -79,11 +79,8 @@
           let interval = null;
           let startTime;
 
-          const handler = () => {
-            vnode.context[binding.expression]();
-          };
-
-          const clear = function() {
+          const handler = () => vnode.context[binding.expression]();
+          const clear = () => {
             if (new Date() - startTime < 100) {
               handler();
             }
@@ -91,12 +88,10 @@
             interval = null;
           };
 
-          on(el, 'mousedown', function() {
+          on(el, 'mousedown', () => {
             startTime = new Date();
             once(document, 'mouseup', clear);
-            interval = setInterval(function() {
-              handler();
-            }, 100);
+            interval = setInterval(handler, 100);
           });
         }
       }

packages/input/src/input.vue

@@ -117,10 +117,9 @@
         this.$refs.input.select();
       },
       resizeTextarea() {
+        if (this.$isServer) return;
         var { autosize, type } = this;
-        if (!autosize || type !== 'textarea') {
-          return;
-        }
+        if (!autosize || type !== 'textarea') return;
         const minRows = autosize.minRows;
         const maxRows = autosize.maxRows;
 

packages/loading/src/directive.js

@@ -3,6 +3,7 @@ import { addClass, removeClass } from 'wind-dom/src/class';
 let Mask = Vue.extend(require('./loading.vue'));
 
 exports.install = Vue => {
+  if (Vue.prototype.$isServer) return;
   let toggleLoading = (el, binding) => {
     if (binding.value) {
       Vue.nextTick(() => {

packages/loading/src/index.js

@@ -61,6 +61,7 @@ const addStyle = (options, parent, instance) => {
 };
 
 const Loading = (options = {}) => {
+  if (Vue.prototype.$isServer) return;
   options = merge({}, defaults, options);
   if (typeof options.target === 'string') {
     options.target = document.querySelector(options.target);

packages/message-box/src/main.js

@@ -102,6 +102,7 @@ const showNextMsg = () => {
 };
 
 const MessageBox = function(options, callback) {
+  if (Vue.prototype.$isServer) return;
   if (typeof options === 'string') {
     options = {
       message: options

packages/message/src/main.js

@@ -7,6 +7,7 @@ let instances = [];
 let seed = 1;
 
 var Message = function(options) {
+  if (Vue.prototype.$isServer) return;
   options = options || {};
   if (typeof options === 'string') {
     options = {

packages/notification/src/main.js

@@ -7,6 +7,7 @@ let instances = [];
 let seed = 1;
 
 var Notification = function(options) {
+  if (Vue.prototype.$isServer) return;
   options = options || {};
   let userOnClose = options.onClose;
   let id = 'notification_' + seed++;

packages/select/src/select.vue

@@ -299,6 +299,7 @@
       },
 
       options(val) {
+        if (this.$isServer) return;
         this.optionsAllDisabled = val.length === val.filter(item => item.disabled === true).length;
         if (this.multiple) {
           this.resetInputHeight();

packages/table/src/dropdown.js

@@ -1,6 +1,7 @@
+import Vue from 'vue';
 var dropdowns = [];
 
-document.addEventListener('click', function(event) {
+!Vue.prototype.$isServer && document.addEventListener('click', function(event) {
   dropdowns.forEach(function(dropdown) {
     var target = event.target;
     if (!dropdown || !dropdown.$el) return;

packages/table/src/table-header.js

@@ -226,7 +226,7 @@ export default {
         filterPanel.table = table;
         filterPanel.cell = cell;
         filterPanel.column = column;
-        filterPanel.$mount(document.createElement('div'));
+        !this.$isServer && filterPanel.$mount(document.createElement('div'));
       }
 
       setTimeout(() => {
@@ -239,6 +239,7 @@ export default {
     },
 
     handleMouseDown(event, column) {
+      if (this.$isServer) return;
       if (column.children && column.children.length > 0) return;
       /* istanbul ignore if */
       if (this.draggingColumn && this.border) {
@@ -329,6 +330,7 @@ export default {
     },
 
     handleMouseOut() {
+      if (this.$isServer) return;
       document.body.style.cursor = '';
     },
 

packages/table/src/util.js

@@ -99,7 +99,7 @@ export const getColumnByCell = function(table, cell) {
   return null;
 };
 
-const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 
 export const mousewheel = function(element, callback) {
   if (element && element.addEventListener) {

packages/upload/src/iframe-upload.vue

@@ -113,7 +113,7 @@ export default {
   },
 
   mounted() {
-    window.addEventListener('message', (event) => {
+    !this.$isServer && window.addEventListener('message', (event) => {
       var targetOrigin = new URL(this.action).origin;
       if (event.origin !== targetOrigin) {
         return false;
@@ -158,7 +158,7 @@ export default {
             on-change={this.handleChange}
             accept={this.accept}>
           </input>
-          <input type="hidden" name="documentDomain" value={document.domain} />
+          <input type="hidden" name="documentDomain" value={ this.$isServer ? '' : document.domain } />
           <span ref="data"></span>
          </form>
         {!this.showCover ? this.$slots.default : cover}

packages/upload/src/index.vue

@@ -209,7 +209,7 @@ export default {
       ref: 'upload-inner'
     };
 
-    var uploadComponent = typeof FormData !== 'undefined'
+    var uploadComponent = this.$isServer ? '' : typeof FormData !== 'undefined'
       ? <upload {...props}>{this.$slots.default}</upload>
       : <iframeUpload {...props}>{this.$slots.default}</iframeUpload>;
 

src/utils/clickoutside.js

@@ -1,9 +1,10 @@
+import Vue from 'vue';
 import { on } from 'wind-dom/src/event';
 
 const nodeList = [];
 const ctx = '@@clickoutsideContext';
 
-on(document, 'click', e => {
+!Vue.prototype.$isServer && on(document, 'click', e => {
   nodeList.forEach(node => node[ctx].documentHandler(e));
 });
 /**

src/utils/resize-event.js

@@ -3,9 +3,11 @@
 *
 * version: 0.5.3
 **/
+const isServer = typeof window === 'undefined';
 
 /* istanbul ignore next */
 const requestFrame = (function() {
+  if (isServer) return;
   const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
     function(fn) {
       return window.setTimeout(fn, 20);
@@ -17,6 +19,7 @@ const requestFrame = (function() {
 
 /* istanbul ignore next */
 const cancelFrame = (function() {
+  if (isServer) return;
   const cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
   return function(id) {
     return cancel(id);
@@ -59,7 +62,7 @@ const scrollListener = function(event) {
 };
 
 /* Detect CSS Animations support to detect element display/re-attach */
-const attachEvent = document.attachEvent;
+const attachEvent = isServer ? {} : document.attachEvent;
 const DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
 const START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
 const RESIZE_ANIMATION_NAME = 'resizeanim';
@@ -68,7 +71,7 @@ let keyFramePrefix = '';
 let animationStartEvent = 'animationstart';
 
 /* istanbul ignore next */
-if (!attachEvent) {
+if (!attachEvent && !isServer) {
   const testElement = document.createElement('fakeelement');
   if (testElement.style.animationName !== undefined) {
     animation = true;
@@ -91,7 +94,7 @@ if (!attachEvent) {
 let stylesCreated = false;
 /* istanbul ignore next */
 const createStyles = function() {
-  if (!stylesCreated) {
+  if (!stylesCreated && !isServer) {
     const animationKeyframes = `@${keyFramePrefix}keyframes ${RESIZE_ANIMATION_NAME} { from { opacity: 0; } to { opacity: 0; } } `;
     const animationStyle = `${keyFramePrefix}animation: 1ms ${RESIZE_ANIMATION_NAME};`;
 
@@ -119,6 +122,7 @@ const createStyles = function() {
 
 /* istanbul ignore next */
 export const addResizeListener = function(element, fn) {
+  if (isServer) return;
   if (attachEvent) {
     element.attachEvent('onresize', fn);
   } else {
@@ -162,4 +166,4 @@ export const removeResizeListener = function(element, fn) {
       element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
     }
   }
-};
+};

src/utils/vue-popper.js

@@ -66,6 +66,7 @@ export default {
 
   methods: {
     createPopper() {
+      if (this.$isServer) return;
       if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
         return;
       }