From e6f6f679ceb5a5534d0668cc2a2657dfcfe34c4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kai=20R=C3=B6der?= <roeder.kai@gmail.com>
Date: Mon, 14 Jun 2021 11:18:27 +0200
Subject: [PATCH] feat(angular): integrate addon-ivy

This addon integrates storybook-angular-addon-ivy into
the mono-repo. This allows us to remove the ivy addon
package.
---
 .../server/framework-preset-angular-ivy.ts    | 53 +++++++++++++++++++
 app/angular/src/server/options.ts             |  1 +
 app/angular/src/types/index.ts                |  7 +++
 examples/angular-cli/.storybook/main.js       |  3 ++
 4 files changed, 64 insertions(+)
 create mode 100644 app/angular/src/server/framework-preset-angular-ivy.ts
 create mode 100644 app/angular/src/types/index.ts

diff --git a/app/angular/src/server/framework-preset-angular-ivy.ts b/app/angular/src/server/framework-preset-angular-ivy.ts
new file mode 100644
index 00000000000..1f8a886a373
--- /dev/null
+++ b/app/angular/src/server/framework-preset-angular-ivy.ts
@@ -0,0 +1,53 @@
+import { Configuration } from 'webpack';
+import { process as ngccProcess } from '@angular/compiler-cli/ngcc';
+import * as path from 'path';
+import { Options } from './framework-preset-angular-cli';
+
+/**
+ * Run ngcc for converting modules to ivy format before starting storybook
+ * This step is needed in order to support Ivy in storybook
+ *
+ * Information about Ivy can be found here https://angular.io/guide/ivy
+ */
+export const runNgcc = () => {
+  ngccProcess({
+    // should be async: true but does not work due to
+    // https://github.com/storybookjs/storybook/pull/11157/files#r615413803
+    async: false,
+    basePath: path.join(process.cwd(), 'node_modules'), // absolute path to node_modules
+    createNewEntryPointFormats: true, // --create-ivy-entry-points
+    compileAllFormats: false, // --first-only
+  });
+};
+
+export const webpack = async (webpackConfig: Configuration, options: Options) => {
+  const angularOptions = await options.presets.apply(
+    'angularOptions',
+    {} as {
+      enableIvy?: boolean;
+    },
+    options
+  );
+
+  if (!angularOptions.enableIvy) {
+    return webpackConfig;
+  }
+
+  runNgcc();
+
+  return {
+    ...webpackConfig,
+    resolve: {
+      ...webpackConfig.resolve,
+      mainFields: [
+        'es2015_ivy_ngcc',
+        'module_ivy_ngcc',
+        'main_ivy_ngcc',
+        'es2015',
+        'browser',
+        'module',
+        'main',
+      ],
+    },
+  };
+};
diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts
index 0e6db430b45..6b459475ba0 100644
--- a/app/angular/src/server/options.ts
+++ b/app/angular/src/server/options.ts
@@ -7,5 +7,6 @@ export default {
   frameworkPresets: [
     require.resolve('./framework-preset-angular'),
     require.resolve('./framework-preset-angular-cli'),
+    require.resolve('./framework-preset-angular-ivy'),
   ],
 } as LoadOptions;
diff --git a/app/angular/src/types/index.ts b/app/angular/src/types/index.ts
new file mode 100644
index 00000000000..7b7db58544c
--- /dev/null
+++ b/app/angular/src/types/index.ts
@@ -0,0 +1,7 @@
+import { StorybookConfig as BaseConfig } from '@storybook/core-common';
+
+export interface StorybookConfig extends BaseConfig {
+  angularOptions?: {
+    enableIvy: boolean;
+  };
+}
diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index 7846fc7ccb5..f1e50463ef3 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -15,4 +15,7 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  angularOptions: {
+    enableIvy: true,
+  },
 };