higher-order component for vue.js 2

HOC-after-2.2.0.js

export default function(WrappedComponent) {
  const mixinProps = (WrappedComponent.mixins || [])
          .filter((mixin) => mixin.props)
          .map((mixin) => mixin.props);
  const allProps = mixinProps.concat(WrappedComponent.props);
  const mergedProps = allProps.reduce((merged, props) => Object.assign(merged, props), {});

  return {
    props: mergedProps,
    render(createElement) {
      return createElement(
        WrappedComponent,
        { props: this.$props },
        this.$slots.default
      );
    },
  };
};

HOC-before-2.2.0.js

export default function(WrappedComponent) {
  const mixinProps = (WrappedComponent.mixins || [])
          .filter((mixin) => mixin.props)
          .map((mixin) => mixin.props);
  const allProps = mixinProps.concat(WrappedComponent.props);
  const mergedProps = allProps.reduce((merged, props) => Object.assign(merged, props), {});
  const propsInterpolation = Object.keys(mergedProps)
          .map((key) => `:${key}="${key}"`)
          .join(' ');

  return {
    template: `<wrapped ${propsInterpolation}><slot></slot></wrapped>`,
    props: mergedProps,
    components: {
      'wrapped': WrappedComponent,
    },
  };
};