Typescript: Fix types of client-api & storystore

app/vue/src/client/preview/index.js

@@ -46,13 +46,18 @@ function decorateStory(getStory, decorators) {
 
       const decoratedStory = decorator((p = {}) => {
         story = decorated(
-          Object.assign(
-            context,
-            p,
-            { parameters: Object.assign(context.parameters || {}, p.parameters) },
-            { options: Object.assign(context.options || {}, p.options) }
-          )
+          p
+            ? {
+                ...context,
+                ...p,
+                parameters: {
+                  ...context.parameters,
+                  ...p.parameters,
+                },
+              }
+            : context
         );
+
         return story;
       }, context);
 

examples/official-storybook/stories/core/parameters.stories.js

@@ -1,7 +1,11 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
-// We would need to add this in config.js idomatically however that would make this file a bit confusing
+// We would need to add this in config.js idiomatically however that would make this file a bit confusing
 import { addParameters } from '@storybook/react';
+import { addDecorator } from '@storybook/react/dist/client/preview';
+
+addDecorator(fn => fn({ customStoryContext: 52, parameters: { customParameter: 42 } }));
 
 addParameters({ globalParameter: 'globalParameter' });
 
@@ -15,10 +19,9 @@ export default {
 
 // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples?
 // Given we sort of control the props, should we export a prop type?
-export const passed = ({
-  // eslint-disable-next-line react/prop-types
-  parameters: { options, ...parameters },
-}) => <pre>Parameters are {JSON.stringify(parameters, null, 2)}</pre>;
+export const passed = ({ parameters: { options, ...parameters }, ...rest }) => (
+  <pre>StoryContext: {JSON.stringify({ ...rest, parameters }, null, 2)}</pre>
+);
 passed.story = {
   name: 'passed to story',
   parameters: { storyParameter: 'storyParameter' },

examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap

@@ -327,6 +327,38 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
 </div>
 `;
 
+exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <pre>
+      {
+  "id": "custom-decorator-for-vue--withdata",
+  "kind": "Custom|Decorator for Vue",
+  "name": "withData",
+  "story": "withData",
+  "customContext": 52,
+  "parameters": {
+    "options": {
+      "hierarchyRootSeparator": {},
+      "hierarchySeparator": {},
+      "docs": {
+        "iframeHeight": "60px"
+      }
+    },
+    "globalParameter": "globalParameter",
+    "framework": "vue",
+    "customParameter": 42
+  }
+}
+    </pre>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
 <button
   class="button"

examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js

@@ -5,7 +5,7 @@ export default {
   decorators: [
     storyFn => {
       // Decorated with story-function
-      const WrapButton = storyFn();
+      const WrapButton = storyFn({ customContext: 52, parameters: { customParameter: 42 } });
       return {
         components: { WrapButton },
         template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
@@ -30,6 +30,10 @@ export const template = () => ({
   template: '<my-button>MyButton with template</my-button>',
 });
 
+export const withData = ({ parameters, ...rest }) => ({
+  template: `<pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
+});
+
 export const render = () => ({
   render(h) {
     return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);

lib/client-api/src/client_api.ts

@@ -34,31 +34,29 @@ const merge = (a: any, b: any) =>
     return undefined;
   });
 
-interface DecoratorPropData {
-  [key: string]: any;
-}
+const defaultContext: StoryContext = {
+  id: 'unspecified',
+  name: 'unspecified',
+  kind: 'unspecified',
+  parameters: {},
+};
 
 export const defaultDecorateStory = (storyFn: StoryFn, decorators: DecoratorFunction[]) =>
   decorators.reduce(
-    (decorated, decorator) => (
-      context: StoryContext = {
-        id: 'unspecified',
-        name: 'unspecified',
-        kind: 'unspecified',
-        parameters: null,
-      }
-    ) =>
-      decorator((p: DecoratorPropData = {}) => {
-        return decorated(
-          // MUTATION !
-          Object.assign(
-            context,
-            p,
-            { parameters: Object.assign(context.parameters || {}, p.parameters) },
-            { options: Object.assign(context.options || {}, p.options) }
-          )
-        );
-      }, context),
+    (decorated, decorator) => (context: StoryContext = defaultContext) =>
+      decorator(
+        p =>
+          decorated(
+            p
+              ? {
+                  ...context,
+                  ...p,
+                  parameters: { ...context.parameters, ...p.parameters },
+                }
+              : context
+          ),
+        context
+      ),
     storyFn
   );
 

lib/client-api/src/story_store.ts

@@ -23,8 +23,6 @@ import {
 const toKey = (input: string) =>
   input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase());
 
-const toChild = (it: {}) => ({ ...it });
-
 let count = 0;
 
 const getId = (): number => {
@@ -188,8 +186,12 @@ export default class StoryStore extends EventEmitter {
       applyDecorators(getOriginal(), getDecorators())
     );
 
-    const storyFn: StoryFn = (p: object) =>
-      getDecorated()({ ...identification, parameters: { ...parameters, ...p } });
+    const storyFn: StoryFn = p =>
+      getDecorated()({
+        ...identification,
+        ...p,
+        parameters: { ...parameters, ...(p && p.parameters) },
+      });
 
     _data[id] = {
       ...identification,