feat(angular): depreciate the story component attribute

Author: ThibaudAV

app/angular/package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@storybook/addons": "6.2.0-alpha.3",
+    "@storybook/client-logger": "^6.1.10",
     "@storybook/core": "6.2.0-alpha.3",
     "@storybook/node-logger": "6.2.0-alpha.3",
     "@types/webpack-env": "^1.15.3",

app/angular/src/client/preview/angular-beta/RenderNgAppService.ts

@@ -2,11 +2,13 @@
 import { enableProdMode, NgModule, PlatformRef, Type } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { logger } from '@storybook/client-logger';
 
 import { StoryFn } from '@storybook/addons';
 
 import { BehaviorSubject, Subject } from 'rxjs';
 import { ICollection, StoryFnAngularReturnType } from '../types';
+import { Parameters } from '../types-6-0';
 import { storyPropsProvider } from './app.token';
 import { createComponentClassFromStoryComponent } from './ComponentClassFromStoryComponent';
 import { createComponentClassFromStoryTemplate } from './ComponentClassFromStoryTemplate';
@@ -63,9 +65,27 @@ export class RenderNgAppService {
    * - true render will only use the StoryFn `props' in storyProps observable that will update sotry's component/template properties. Improves performance without reloading the whole module&component if props changes
    * - false fully recharges or initializes angular module & component
    */
-  public async render(storyFn: StoryFn<StoryFnAngularReturnType>, forced: boolean) {
+  public async render(
+    storyFn: StoryFn<StoryFnAngularReturnType>,
+    { forced, parameters }: { forced: boolean; parameters: Parameters }
+  ) {
     const storyObj = storyFn();
 
+    if (storyObj.component) {
+      logger.warn(`\`component\` story input is deprecated, and will be removed in Storybook 7.0.
+Instead, use \`export const default = () => ({ component: AppComponent });\`
+or
+\`\`\`
+export const Primary: Story = () => ({});
+Primary.parameters = { component: AppComponent };
+\`\`\`
+Read more at 
+- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-angular-component).
+- https://storybook.js.org/docs/angular/writing-stories/parameters
+`);
+    }
+    storyObj.component = storyObj.component ?? parameters.component;
+
     if (forced && this.storyProps$) {
       this.storyProps$.next(storyObj.props);
       return;

app/angular/src/client/preview/render.ts

@@ -24,5 +24,5 @@ export default function render({
     return;
   }
 
-  RenderNgAppService.getInstance().render(storyFn, forceRender);
+  RenderNgAppService.getInstance().render(storyFn, { parameters, forced: forceRender });
 }

app/angular/src/client/preview/types-6-0.ts

@@ -31,4 +31,5 @@ export type Story<Args = DefaultArgs> = BaseStory<Args, AngularReturnType> &
 export type Parameters = DefaultParameters & {
   /** Uses legacy angular rendering engine that use dynamic component */
   angularLegacyRendering?: boolean;
+  component: unknown;
 };

yarn.lock

@@ -4088,6 +4088,14 @@
   resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
   integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
 
+"@storybook/client-logger@^6.1.10":
+  version "6.1.10"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.1.10.tgz#491d960387ab336408f596c22f171c19247a1236"
+  integrity sha512-06EnESLaNCeHSzsZEEMiy9QtyucTy2BvQ2Z0yPnZLuXTXZNgI6aOtftpehwKSYXdudaIvLkb6xfNvix0BBgHhw==
+  dependencies:
+    core-js "^3.0.1"
+    global "^4.3.2"
+
 "@storybook/[email protected]":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -29099,10 +29107,27 @@ send@^0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
-serialize-javascript@^1.4.0, serialize-javascript@^2.1.2, serialize-javascript@^3.0.0, serialize-javascript@^4.0.0, serialize-javascript@^5.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"
-  integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==
+serialize-javascript@^1.4.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
+  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
+
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
+serialize-javascript@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
+  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
   dependencies:
     randombytes "^2.1.0"