Merge pull request #15527 from dexster/Composition_order

Composition: Fix refs ordering

examples/angular-cli/.storybook/main.js

@@ -19,4 +19,19 @@ module.exports = {
   angularOptions: {
     enableIvy: true,
   },
+  // These are just here to test composition. They could be added to any storybook example project
+  refs: {
+    first: {
+      title: 'Composition test one',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+    second: {
+      title: 'Composition test two',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+    third: {
+      title: 'Composition test three',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+  },
 };

lib/api/src/modules/refs.ts

@@ -228,8 +228,15 @@ export const init: ModuleFn = ({ store, provider, singleStory }, { runCheck = tr
 
       updated[id] = { ...ref, ...data };
 
+      /* eslint-disable no-param-reassign */
+      const ordered = Object.keys(initialState).reduce((obj: any, key) => {
+        obj[key] = updated[key];
+        return obj;
+      }, {});
+      /* eslint-enable no-param-reassign */
+
       store.setState({
-        refs: updated,
+        refs: ordered,
       });
     },
   };