From 1e20a891fa705239037e34ae786155d06ffc0f12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gaetanmaisse@gmail.com>
Date: Tue, 23 Mar 2021 19:09:31 +0100
Subject: [PATCH] feat(addon-docs): improve inline rendering setup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Gaëtan Maisse <gaetanmaisse@gmail.com>
Co-authored-by: ThibaudAv <thibaud.avenier@gmail.com>
---
 addons/docs/angular/README.md                 |  2 --
 addons/docs/angular/inline.js                 |  1 -
 addons/docs/src/frameworks/angular/config.ts  |  4 +++
 .../frameworks/angular/prepareForInline.ts    | 11 ++++++-
 addons/docs/src/frameworks/angular/preset.ts  | 29 +++++++++++++++++++
 examples/angular-cli/.storybook/preview.ts    |  7 ++---
 6 files changed, 45 insertions(+), 9 deletions(-)
 delete mode 100644 addons/docs/angular/inline.js
 create mode 100644 addons/docs/src/frameworks/angular/preset.ts

diff --git a/addons/docs/angular/README.md b/addons/docs/angular/README.md
index 0a62e2399682..1485fb4a48b6 100644
--- a/addons/docs/angular/README.md
+++ b/addons/docs/angular/README.md
@@ -220,12 +220,10 @@ Then update `.storybook/preview.js`:
 
 ```js
 import { addParameters } from '@storybook/angular';
-import { prepareForInline } from '@storybook/addon-docs/angular/inline';
 
 addParameters({
   docs: {
     inlineStories: true,
-    prepareForInline,
   },
 });
 ```
diff --git a/addons/docs/angular/inline.js b/addons/docs/angular/inline.js
deleted file mode 100644
index 5e94eb81966a..000000000000
--- a/addons/docs/angular/inline.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../dist/esm/frameworks/angular/prepareForInline');
diff --git a/addons/docs/src/frameworks/angular/config.ts b/addons/docs/src/frameworks/angular/config.ts
index 6071afdab112..35eab90103e7 100644
--- a/addons/docs/src/frameworks/angular/config.ts
+++ b/addons/docs/src/frameworks/angular/config.ts
@@ -1,9 +1,13 @@
 import { SourceType } from '../../shared';
 import { extractArgTypes, extractComponentDescription } from './compodoc';
 import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
 
 export const parameters = {
   docs: {
+    // probably set this to true by default once it's battle-tested
+    inlineStories: true,
+    prepareForInline,
     extractArgTypes,
     extractComponentDescription,
     source: {
diff --git a/addons/docs/src/frameworks/angular/prepareForInline.ts b/addons/docs/src/frameworks/angular/prepareForInline.ts
index 0f85b8469d54..9da32baec8e5 100644
--- a/addons/docs/src/frameworks/angular/prepareForInline.ts
+++ b/addons/docs/src/frameworks/angular/prepareForInline.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { IStory, StoryContext } from '@storybook/angular';
-import { ElementRendererService } from '@storybook/angular/element-renderer';
 import { StoryFn } from '@storybook/addons';
+import { logger } from '@storybook/client-logger';
 
 const customElementsVersions: Record<string, number> = {};
 
@@ -27,6 +27,15 @@ export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: S
     }
 
     async componentDidMount() {
+      const { ElementRendererService } = await import('@storybook/angular/element-renderer').catch(
+        (error) => {
+          logger.error(
+            'Check the documentation to activate `inlineStories`. The `@angular/elements` & `@webcomponents/custom-elements` dependencies are required.'
+          );
+          throw error;
+        }
+      );
+
       // eslint-disable-next-line no-undef
       customElements.define(
         customElementsName,
diff --git a/addons/docs/src/frameworks/angular/preset.ts b/addons/docs/src/frameworks/angular/preset.ts
new file mode 100644
index 000000000000..919a2f44775f
--- /dev/null
+++ b/addons/docs/src/frameworks/angular/preset.ts
@@ -0,0 +1,29 @@
+import { Configuration, IgnorePlugin, Plugin } from 'webpack';
+
+export function webpackFinal(webpackConfig: Configuration = {}): Configuration {
+  return {
+    ...webpackConfig,
+    plugins: [...webpackConfig.plugins, ...makeAngularElementRendererOptional()],
+  };
+}
+/**
+ * Ignore `@storybook/angular/element-renderer` import if `@angular/elements` is not available
+ */
+function makeAngularElementRendererOptional(): Plugin[] {
+  if (
+    moduleIsAvailable('@angular/elements') &&
+    moduleIsAvailable('@webcomponents/custom-elements')
+  ) {
+    return [];
+  }
+  return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)];
+}
+
+function moduleIsAvailable(moduleName: string): boolean {
+  try {
+    require.resolve(moduleName);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts
index 2920464a8cf4..1f2220621e70 100644
--- a/examples/angular-cli/.storybook/preview.ts
+++ b/examples/angular-cli/.storybook/preview.ts
@@ -1,6 +1,4 @@
-import { addParameters } from '@storybook/angular';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
-import { prepareForInline } from '@storybook/addon-docs/angular/inline';
 import addCssWarning from '../src/cssWarning';
 
 // @ts-ignore
@@ -17,17 +15,16 @@ setCompodocJson(filtered);
 
 addCssWarning();
 
-addParameters({
+export const parameters = {
   docs: {
     inlineStories: true,
-    prepareForInline,
   },
   options: {
     storySort: {
       order: ['Welcome', 'Core ', 'Addons ', 'Basics '],
     },
   },
-});
+};
 
 export const globalTypes = {
   theme: {