FIX tricky typing for extending framework supports

addons/contexts/src/preview/frameworks/react.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { createAddonDecorator, Renderer } from '../index';
+import { createAddonDecorator, Render } from '../index';
 import { addonContextsAPI } from '../api';
 
 /**
  * This is the framework specific bindings for React.
  * '@storybook/react' expects the returning object from a decorator to be a 'React Element' (vNode).
  */
-export const renderReact: Renderer = (contextNodes, propsMap, getStoryVNode) => {
+export const renderReact: Render<React.ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
   const { getRendererFrom } = addonContextsAPI();
   return getRendererFrom(React.createElement)(contextNodes, propsMap, getStoryVNode);
 };

addons/contexts/src/preview/frameworks/vue.ts

@@ -1,13 +1,13 @@
-import Vue, { Component } from 'vue';
-import { createAddonDecorator, Renderer } from '../index';
+import Vue from 'vue';
+import { createAddonDecorator, Render } from '../index';
 import { addonContextsAPI } from '../api';
 import { ID } from '../../constants';
 
 /**
  * This is the framework specific bindings for Vue.
  * '@storybook/vue' expects the returning object from a decorator to be a 'VueComponent'.
  */
-export const renderVue: Renderer = (contextNodes, propsMap, getStoryVNode) => {
+export const renderVue: Render<Vue.Component> = (contextNodes, propsMap, getStoryVNode) => {
   const { getRendererFrom, updateReactiveSystem } = addonContextsAPI();
   const reactiveProps = updateReactiveSystem(propsMap);
   return Vue.extend({
@@ -16,7 +16,7 @@ export const renderVue: Renderer = (contextNodes, propsMap, getStoryVNode) => {
     render: createElement =>
       getRendererFrom((component, props, children) =>
         createElement(component, { props }, [children])
-      )(contextNodes, reactiveProps, () => createElement(getStoryVNode() as Component)),
+      )(contextNodes, reactiveProps, () => createElement(getStoryVNode())),
   });
 };
 

addons/contexts/src/preview/index.ts

@@ -14,10 +14,10 @@ import { AddonSetting, AnyFunctionReturns, ContextNode, PropsMap } from '../type
  * who is also knowing how to communicate with the Storybook manager (in React) via the Storybook
  * event system.
  *
- * @param {Renderer} render - framework specific bindings
+ * @param {Render} render - framework specific bindings
  */
-export type Renderer = (...args: [ContextNode[], PropsMap, AnyFunctionReturns<unknown>]) => unknown;
-type CreateAddonDecorator = (renderer: Renderer) => (contexts: AddonSetting[]) => unknown;
+export type Render<T> = (...args: [ContextNode[], PropsMap, AnyFunctionReturns<T>]) => T;
+type CreateAddonDecorator = <T>(render: Render<T>) => (contexts: AddonSetting[]) => T;
 
 export const createAddonDecorator: CreateAddonDecorator = render => {
   const wrapper: StoryWrapper = (getStory, context, settings: any) => {

addons/contexts/src/preview/libs/getContextNodes.ts

@@ -40,7 +40,9 @@ type GetContextNodes = (settings: WrapperSettings) => ContextNode[];
 export const getContextNodes: GetContextNodes = ({ options, parameters }) => {
   const titles = Array()
     .concat(options, parameters)
-    .map(({ title } = {}) => title);
+    .filter(Boolean)
+    .map(({ title }) => title);
+
   return Array.from(new Set(titles))
     .filter(Boolean)
     .map(title =>

addons/contexts/src/preview/libs/getRendererFrom.ts

@@ -43,7 +43,7 @@ export const _getAggregatedWrap: GetAggregatedWrap = h => (components, props, op
  */
 type GetRendererFrom = <T>(
   h: AnyFunctionReturns<T>
-) => (contextNodes: ContextNode[], propsMap: PropsMap, getStoryVNode: AnyFunctionReturns<any>) => T;
+) => (contextNodes: ContextNode[], propsMap: PropsMap, getStoryVNode: AnyFunctionReturns<T>) => T;
 
 export const getRendererFrom: GetRendererFrom = h => (contextNodes, propsMap, getStoryVNode) =>
   contextNodes