Addons and app changes for on demand store #16010

tmeasday · 2021-09-10T09:04:15Z

Part of #15871

Telescoping on #16009

What I did

Updated addons + apps for on-demand store. Mostly updating types

tmeasday · 2021-09-10T09:04:36Z

@ThibaudAV there were a few more changes to Angular that you might want to take a look at.

nx-cloud · 2021-09-10T09:04:45Z

Nx Cloud Report

We didn't find any information for the current pull request with the commit e29268c.
You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

Sent with 💌 from NxCloud.

github-actions · 2021-09-10T09:06:20Z

	Fails
🚫	PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","dependencies","other"]

Generated by 🚫 dangerJS against e29268c

shilman

Looking good! 🚀

shilman · 2021-09-10T09:21:40Z

app/react/src/client/preview/render.tsx

-  forceRender,
-}: RenderContext) {
-  const Story = unboundStoryFn as FunctionComponent<StoryContext>;
+export async function renderToDOM(


let's convert these to named exports 🙏

That's coming

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

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

app/preact/src/client/preview/render.tsx

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

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

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

app/web-components/src/client/preview/render.ts

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

ThibaudAV · 2021-09-11T07:32:17Z

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


 export type Parameters = DefaultParameters & {
  /** Uses legacy angular rendering engine that use dynamic component */
  angularLegacyRendering?: boolean;
-  component: unknown;


why delete this type?

it allows to force the component of a story if the one defined in export default is not the one wanted
ex :

storybook/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts

Line 13 in 8fe441d

component: MultipleSelectorComponent,

it seemed to me that the component property in the story should be deprecated 🤔

@shilman perhaps you care to respond to this one -- the rationale is that this method of overriding the component was an implementation detail, and can be considered a bug.

ThibaudAV · 2021-09-11T08:01:26Z

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

@@ -45,7 +44,7 @@ export const getStorybookModuleMetadata = (
  if (storyComponent) {
    deprecatedStoryComponentWarning();
  }
-  const component = storyComponent ?? parameters.component;
+  const component = storyComponent ?? annotatedComponent;


this will be create braking change. i think

because before, to have a specific component for a story, you had to pass it through the parameters

Now if I understand correctly we can make a :

export const Primary: Story = () => ({}); Primary.component = AppComponent;

maybe add a message in the MIGRATION.md

ThibaudAV

a big job 👏 👏 👏 .
there are a lot of changes. which version is it for?

tmeasday · 2021-09-11T09:18:53Z

@ThibaudAV

there are a lot of changes. which version is it for?

It's for 6.4. There aren't intended to be any functional changes for the angular layer, mostly it is just due to updating types. Do you see any other changes that concern you (barring the parameters.component part)?.

shilman · 2021-09-11T09:54:36Z

@ThibaudAV @tmeasday

Here is my understanding of the situation:

In 6.1, the user could specify () => ({ component: SomeComponent })
In 6.2, @ThibaudAV refactored so that:
- The story return value's component was deprecated
- It would use default.component if there was no component in the story return value
- @ThibaudAV used parameters.component to override default.component
Now, in 6.4 @tmeasday 's refactor:
- Removes parameters.component. It was an implementation detail that was never intended as a public API.
- Rewrites the examples to use the deprecated component in the story return value

Given all that:

Assuming it's OK to restrict @storybook/angular users to a single component per file, we can tell them to use the deprecated story return value's component until 7.0 and then we can remove it as a breaking change in 7.0.

If that is too restrictive, we can un-deprecate it. Or we can discuss other options.

@ThibaudAV Please let me know if that all makes sense. I don't understand enough about the Angular use case, so let's please discuss here! 🙏

ThibaudAV · 2021-09-11T14:11:55Z

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

    targetDOMNode,
  }: {
    storyFnAngular: StoryFnAngularReturnType;
    forced: boolean;
+    component?: any;


I would tend to say that the correct ts type for the reference to an angular component class is :
Type

I'm not sure of myself. but it can avoid any and show that we are referring to an angular component
🙃

ThibaudAV · 2021-09-11T14:27:00Z

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

-  mainStoryFn: StoryFn<StoryFnAngularReturnType>,
-  decorators: DecoratorFunction<StoryFnAngularReturnType>[]
-): StoryFn<StoryFnAngularReturnType> {
+  mainStoryFn: LegacyStoryFn<AngularFramework>,


how to get rid of the LegacyStoryFn ? ( in the future )

it's not the same type as ProjectAnnotations<...>['applyDecorators']; or PartialStoryFn<AngularFramework>,

only for my personal understanding 😄 🙏

ThibaudAV · 2021-09-11T14:29:44Z

@shilman Ok. Thank you for the summary

Assuming it's OK to restrict @storybook/angular users to a single component per file, we can tell them to use the deprecated story return value's component until 7.0 and then we can remove it as a breaking change in 7.0.

If that is too restrictive, we can un-deprecate it. Or we can discuss other options.

I think it's good, it forces to have coherent stories. 🤷‍♂️
But I've seen some people use this possibility to make a story with several similar components, or for stories about the "wrapper/parent" component.
for which the only solution is to use template property (if component dose not exist)

I'm thinking of some improvements on this
like being able to use the template created by default from the "export default.component" in each story.
-> allows to create a story about a component in different parent html context

or to be able to add to this same template only an inner template (<c>innerTemplate</c>) without redefining all the template
-> (oppose it) . Allow to have a story on a component with different inner html context

@tmeasday

Do you see any other changes that concern you (barring the parameters.component part)?.

Nope 🚀
If you need help fixing examples or tests for angular let me know

shilman · 2021-09-11T14:31:25Z

Cc @kroeder @Marklb 👆

shilman · 2021-09-14T09:48:18Z

Merged as part of #15871

TAharshalcarpenter · 2021-12-14T05:37:48Z

Nope 🚀 If you need help fixing examples or tests for angular let me know

@ThibaudAV Can you please help me on how to use @storybook/addon-controls instead of @storybook/addon-knobs in Angular ?

I am only finding examples of usage in React ..

manuelmeister · 2022-01-07T08:47:51Z

@shilman I think the codemod for storiesOf still transforms the stories to parameters: { component: SomeComponent }

shilman · 2022-01-07T08:50:09Z

Good call @manuelmeister opening an issue for that

Addons and app changes for on demand store

e29268c

tmeasday requested a review from ThibaudAV September 10, 2021 09:04

tmeasday mentioned this pull request Sep 10, 2021

Core: On demand store #15871

Merged

14 tasks

shilman reviewed Sep 10, 2021

View reviewed changes

tmeasday mentioned this pull request Sep 10, 2021

Add modernInlineRendering feature #16011

Closed

ThibaudAV reviewed Sep 11, 2021

View reviewed changes

shilman closed this Sep 14, 2021

shilman mentioned this pull request Jan 7, 2022

Update storiesOf to CSF transform for parameters: { component: SomeComponent } #17160

Closed

stof deleted the on-demand-store-6-addons-apps branch May 25, 2022 09:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addons and app changes for on demand store #16010

Addons and app changes for on demand store #16010

tmeasday commented Sep 10, 2021

tmeasday commented Sep 10, 2021

nx-cloud bot commented Sep 10, 2021 •

edited

Loading

github-actions bot commented Sep 10, 2021

shilman left a comment

shilman Sep 10, 2021

tmeasday Sep 10, 2021

tmeasday Sep 11, 2021

ThibaudAV Sep 11, 2021

ThibaudAV Sep 11, 2021

tmeasday Sep 11, 2021

ThibaudAV Sep 11, 2021

ThibaudAV left a comment

tmeasday commented Sep 11, 2021

shilman commented Sep 11, 2021 •

edited

Loading

ThibaudAV Sep 11, 2021

ThibaudAV Sep 11, 2021 •

edited

Loading

ThibaudAV commented Sep 11, 2021

shilman commented Sep 11, 2021

shilman commented Sep 14, 2021

TAharshalcarpenter commented Dec 14, 2021

manuelmeister commented Jan 7, 2022

shilman commented Jan 7, 2022

Addons and app changes for on demand store #16010

Addons and app changes for on demand store #16010

Conversation

tmeasday commented Sep 10, 2021

What I did

tmeasday commented Sep 10, 2021

nx-cloud bot commented Sep 10, 2021 • edited Loading

Nx Cloud Report

github-actions bot commented Sep 10, 2021

shilman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThibaudAV left a comment

Choose a reason for hiding this comment

tmeasday commented Sep 11, 2021

shilman commented Sep 11, 2021 • edited Loading

Choose a reason for hiding this comment

ThibaudAV Sep 11, 2021 • edited Loading

Choose a reason for hiding this comment

ThibaudAV commented Sep 11, 2021

shilman commented Sep 11, 2021

shilman commented Sep 14, 2021

TAharshalcarpenter commented Dec 14, 2021

manuelmeister commented Jan 7, 2022

shilman commented Jan 7, 2022

nx-cloud bot commented Sep 10, 2021 •

edited

Loading

shilman commented Sep 11, 2021 •

edited

Loading

ThibaudAV Sep 11, 2021 •

edited

Loading