add `options` property to the render context of functional component

What problem does this feature solve?

Custom properties in the options of functional component can’t be accessed easily.

What does the proposed API look like?

In the render function of functional component, options can be accessed by context.options, just like vm.$options(https://vuejs.org/v2/api/index.html#vm-options)

related issue #7492

[Aaron-Pool]

Sure! Disclaimer though, I’m fairly new to vue. I have pretty extensive experience in other front end frameworks, but I’m new to adopting vue. There’s a very real chance I’m doing something ridiculous and unintuitive, but the use case doesn’t strike me that way, personally.

Suppose I have a mixin that takes a custom property “types” from a component definition, assuming its present, and checks for matching attributes on the component’s host element. It then concatenates a string of styles, derived from the attributes specified on the component element that match a type specified in the component definition. Here’s how I might do it (I’m using styled components. Hopefully you’re familiar with the library):

So, suppose this is my component:

import styled                 from 'vue-styled-components';
import IsTyped                from '@Composables/IsTyped';
import { Typography, Colors } from '@Constants/style';
let SmallLabel = {
 functional: true,
  name : 'SmallLabel,
  mixins : [IsTyped],
  render : function(h, context) {
    let Label = styled.span`
        // define base styles
        font-size   : ${Typography.size.medium};
        color       : ${Colors.black};
        // now add any styles based on types provided in the attributes
        ${context.$options.typedStyles} // this will be set by my mixin
      `;
    return (<Label>{context.$slots.default}</Label>);
  },

  types : {
    bright : `color      : ${Colors.smoke};`,
    dark   : `color      : ${Colors.sepia};`,
    bold   : `font-weight: ${Typography.weight.bold};`,
    light  : `font-weight: ${Typography.weight.bold};`
  }
};

And here’s my IsTyped mixin:

import {keys, intersection, values} from 'lodash';

export default {
    beforeMount: function() {
      let styles = '';
      // looks for intersection between a components attribute and specified types
      intersection(keys(this.$options.types), values(this.$attrs))
        .forEach((t) => {styles = styles.concat(this.types[t]);})
      // concatenates the styles and then attaches them to the custom options of the component
      this.$options.typedStyles = styles;
    }
  }
}

Unfortunately, this does not work. Because $options is not on the context object provided to the render function.

[caikan]

My initial idea was to let functional components can be extended dynamically. Extended components have the same render logic but different options. Now I think I have found another workaround: using a factory function.

function createResponsiveComponent(options) {
  return {
    functional: true,
    render(h, context) {
      let component = options[getDeviceType()];
      return h(component, context.data);
    },
  };
}