Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Marko support rerendering #7460

Merged
merged 4 commits into from
Jul 19, 2019
Merged

Marko support rerendering #7460

merged 4 commits into from
Jul 19, 2019

Conversation

DylanPiercey
Copy link
Contributor

Issue:

Currently the Marko API for stories is to return a render result. This limits the ability for stories to be efficiently rerendered while maintaining state and also locks in users to a specific render API for Marko.

What I did

This PR adds a deprecation warning for the old api of returning the renderSync result of a component, and now accepts an object result with the template to render and the input for the template similar to the vue, angular, svelte and some other implementations.

With this change I was able to keep track of the currently rendered component instance and only destroy the existing component if the constructor has been modified. This means that when using an addon like knobs the component is efficiently rerendered instead of destroyed. This also means that the entire lifecycle of the component is no longer rerun during updates which I think is more inline with what developers expect.

How to test

I am unsure what the best way to test this is, however I have updated all examples I could find.

@vercel
Copy link

vercel bot commented Jul 17, 2019 •
edited
Loading

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-dylanpiercey-marko-support-rerendering.storybook.now.sh

@DylanPiercey
Copy link
Contributor Author

I botched this PR, give me a minute to fix 😄

@DylanPiercey
Copy link
Contributor Author

Alright, I believe I've fixed everything. Happy to address any feedback.

shilman
shilman requested changes Jul 19, 2019
View reviewed changes
Copy link
Member

@shilman shilman left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few minor things

examples/marko-cli/src/stories/addon-knobs.stories.js Outdated
@@ -5,16 +5,14 @@ export default {
title: 'Addons|Knobs/Hello',
decorators: [withKnobs],
parameters: {
component: Hello,
template: Hello,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

component param is for addon-docs

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the pointer! Could you share with me the docs for that config option? I’m new to using story book and want to make sure that Marko is accommodating as much of the ecosystem as possible 🙂.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It hasn't made it into the main docs yet (coming soon!), but here's the best resource for now. https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent, thanks. Perhaps it would make sense to use component instead of template as a property for the story fns as well just to be consistent. I’ll update the PR shortly.

examples/marko-cli/src/stories/addon-actions.stories.js Outdated
@@ -4,8 +4,11 @@ import Button from '../components/action-button/index.marko';
export default {
title: 'Addons|Actions/Button',
parameters: {
component: Button,
options: { panelPosition: 'right' },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

component param is for addon-docs

@vercel vercel bot temporarily deployed to staging July 19, 2019 03:04 Inactive
@DylanPiercey
Copy link
Contributor Author

DylanPiercey commented Jul 19, 2019 •
edited
Loading

@shilman I've added back the component parameter option to the config. I've also changed the return value from the story functions to also expect a property called component instead of template since I think this makes the whole thing more cohesive.

I've set it up such that if there is a component option in the parameter options that that will be used if no component option was set as the return from a story function. This I think makes it easier to define multiple stories for a single component with varying inputs. Hopefully overloading this parameter property as a shorthand is some cases is acceptable 😄

@shilman
Copy link
Member

shilman commented Jul 19, 2019

@DylanPiercey Is this a breaking change?

@DylanPiercey
Copy link
Contributor Author

@shilman this should not be a breaking change. I added a deprecation message for the old behavior.

@shilman shilman added this to the 5.2.0 milestone Jul 19, 2019
@shilman shilman merged commit 0d872f7 into storybookjs:next Jul 19, 2019
@dependencies dependencies bot mentioned this pull request Jan 15, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@shilman shilman shilman approved these changes

@ndelangen ndelangen ndelangen approved these changes

Assignees
No one assigned
Labels
feature request
Projects
None yet
Milestone
5.2.0
Development

Successfully merging this pull request may close these issues.
3 participants
@DylanPiercey @ndelangen @shilman