Composition: Fix refs ordering

examples/composition/.gitignore

@@ -0,0 +1,41 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+addon-jest.testresults.json
+documentation.json

examples/composition/.storybook/main.js

@@ -0,0 +1,25 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(ts|mdx)'],
+  logLevel: 'debug',
+  addons: ['@storybook/addon-docs', '@storybook/addon-controls'],
+  core: {
+    builder: 'webpack4',
+  },
+  angularOptions: {
+    enableIvy: true,
+  },
+  refs: {
+    first: {
+      title: 'First storybook',
+      url: 'https://storybookjs.netlify.app/angular-cli',
+    },
+    second: {
+      title: 'Second storybook',
+      url: 'https://storybookjs.netlify.app/angular-cli',
+    },
+    third: {
+      title: 'Third storybook',
+      url: 'https://storybookjs.netlify.app/angular-cli',
+    },
+  },
+};

examples/composition/.storybook/preview.js

@@ -0,0 +1,5 @@
+export const parameters = {
+  docs: {
+    inlineStories: true,
+  },
+};

examples/composition/.storybook/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": [
+      "node"
+    ]
+  },
+  "include": ["../src/**/*", "*.js"],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

examples/composition/angular.json

@@ -0,0 +1,72 @@
+{
+  /* angular.json can have comments */
+  // angular.json can have comments
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "composition": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/composition",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-cli:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-cli:build:production"
+            }
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "browserTarget": "composition:build",
+            "port": 4400
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "browserTarget": "composition:build"
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "composition"
+}

examples/composition/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "composition",
+  "version": "6.4.0-alpha.6",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "ng build",
+    "build-storybook": "yarn storybook-prebuild && build-storybook -s src/assets",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "e2e": "ng e2e",
+    "ng": "ng",
+    "start": "ng serve",
+    "storybook": "start-storybook -p 9008 -s src/assets",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {
+    "@angular/common": "^11.2.14",
+    "@angular/compiler": "^11.2.14",
+    "@angular/core": "^11.2.14",
+    "@angular/forms": "^11.2.14",
+    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^11.2.14",
+    "core-js": "^3.8.2",
+    "node-sass": "^4.14.1",
+    "rxjs": "^6.6.3",
+    "zone.js": "^0.11.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1102.13",
+    "@angular-devkit/core": "^11.2.13",
+    "@angular/cli": "^11.2.13",
+    "@angular/compiler-cli": "^11.2.14",
+    "@storybook/addon-jest": "6.4.0-alpha.6",
+    "@storybook/addon-links": "6.4.0-alpha.6",
+    "@storybook/addons": "6.4.0-alpha.6",
+    "@storybook/angular": "6.4.0-alpha.6",
+    "@storybook/source-loader": "6.4.0-alpha.6",
+    "@types/core-js": "^2.5.4",
+    "@types/jest": "^26.0.16",
+    "@types/node": "^14.14.20",
+    "@types/webpack-env": "^1.16.0",
+    "@webcomponents/custom-elements": "^1.4.3",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "global": "^4.4.0",
+    "storybook-addon-angular-ivy": "^0.0.1",
+    "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.0",
+    "typescript": "^4.1.3"
+  },
+  "storybook": {
+    "chromatic": {
+      "projectToken": "tl92yzsj6w"
+    }
+  }
+}

examples/composition/src/Introduction.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Composition" />
+
+# Storybook Composition
+
+Composing multiple Storybook sites.
+
+Order is set according to the order of refs in main.js

examples/composition/src/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": [
+      "node"
+    ]
+  },
+  "exclude": [
+    "karma.ts",
+    "**/*.spec.ts"
+  ]
+}

examples/composition/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "lerna": {
+    "disabled": true
+  },
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es5",
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"],
+    "lib": ["es2017", "dom"]
+  }
+}

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,
       });
     },
   };

yarn.lock

@@ -15784,6 +15784,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"composition@workspace:examples/composition":
+  version: 0.0.0-use.local
+  resolution: "composition@workspace:examples/composition"
+  dependencies:
+    "@angular-devkit/build-angular": ~0.1102.13
+    "@angular-devkit/core": ^11.2.13
+    "@angular/cli": ^11.2.13
+    "@angular/common": ^11.2.14
+    "@angular/compiler": ^11.2.14
+    "@angular/compiler-cli": ^11.2.14
+    "@angular/core": ^11.2.14
+    "@angular/forms": ^11.2.14
+    "@angular/platform-browser": ^11.2.14
+    "@angular/platform-browser-dynamic": ^11.2.14
+    "@storybook/addon-jest": 6.4.0-alpha.6
+    "@storybook/addon-links": 6.4.0-alpha.6
+    "@storybook/addons": 6.4.0-alpha.6
+    "@storybook/angular": 6.4.0-alpha.6
+    "@storybook/source-loader": 6.4.0-alpha.6
+    "@types/core-js": ^2.5.4
+    "@types/jest": ^26.0.16
+    "@types/node": ^14.14.20
+    "@types/webpack-env": ^1.16.0
+    "@webcomponents/custom-elements": ^1.4.3
+    babel-plugin-require-context-hook: ^1.0.0
+    core-js: ^3.8.2
+    global: ^4.4.0
+    node-sass: ^4.14.1
+    rxjs: ^6.6.3
+    storybook-addon-angular-ivy: ^0.0.1
+    ts-jest: ^26.4.4
+    ts-node: ^9.1.0
+    typescript: ^4.1.3
+    zone.js: ^0.11.3
+  languageName: unknown
+  linkType: soft
+
 "compressible@npm:~2.0.16":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"