Vue3:fix reactive decorators #21954

chakAs3 · 2023-04-05T17:15:21Z

What I did

fixing losing reactivity when using decorators ( global decorator ex: vuetify , function story decorator , template story decorator )
now vue stories support 👍 :

Reactive args with default render function or custom render function, render function can be return ( Functional Component, Concrete Component , Options Component )
Reactive args with story decorators, or global decorators, decorators are functions that return Functional Component, Concrete Component with template, or Options Component .
Reactive named slots and scoped slots with default render or custom render function

PR has a good tests coverage for these 3 features, but you can add some others if you feel they can be relevant

How to test

Checklist

Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
Make sure to add/update documentation regarding your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Maintainers

If this PR should be tested against many or all sandboxes,
make sure to add the ci:merged or ci:daily GH label to it.
Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

…into chaks/vue3-reactive-decorators # Conflicts: # code/renderers/vue3/template/stories/ReactiveDecorators.stories.ts

…torybookjs/storybook into chaks/vue3-reactive-decorators

kasperpeulen

If you can get the tests in proper state, feel free to merge it.

code/renderers/vue3/src/decorateStory.ts

kasperpeulen · 2023-04-17T07:24:23Z

code/renderers/vue3/template/stories/ReactiveArgs.stories.js

+// to test that Simple html Decorators in CSF2 format are applied correctly in reactive mode
+export const ReactiveCSF2Wrapper = (args, { argTypes }) => ({
+  components: { ReactiveArgs },
+  props: Object.keys(argTypes),


Just a general question, do you think we should recommend this style with props?

Or this style with data to make the args available:

data: () => ({ args })

code/renderers/vue3/template/stories/ReactiveSlots.stories.ts

code/renderers/vue3/template/stories/ScopedSlots.stories.ts

code/renderers/vue3/src/render.ts

kasperpeulen · 2023-04-17T07:42:29Z

code/renderers/vue3/src/decorateStory.ts

        story = decorated({
          ...context,
          ...sanitizeStoryContextUpdate(update),
        });


Shouldn't we make sure args stay reactive when they get overridden here by an decorator update?

Do we have tests for updating args from a decorator update?

code/renderers/vue3/src/decorateStory.ts

code/renderers/vue3/template/stories/ReactiveSlots.stories.ts

code/renderers/vue3/template/stories/ReactiveDecorators.stories.ts

chakAs3 · 2023-04-18T22:54:38Z

If you can get the tests in proper state, feel free to merge it.

i have gone all the tests to get them properly, + ReactiveSlots.stories as well

With the more recent version, most of the settings are no longer reactive which seems to be a bug on storybook side. It could have something to do with storybookjs/storybook#21954 but is not resolved by this version either UIEXT-609 (Make knime-ui-table more developable across multiple teams)

chakAs3 added 30 commits February 23, 2023 19:57

rewrite source decorator with optimisation

9f1f4ef

some experimental

c416f70

Merge branch 'next-remote' into chaks/vue3-source-fix

8ef5ad5

start writing propre tests for source decorator

3dc96b1

write tests for 2 main src decorator functions

207ab63

add new tests

6ab9fc1

adjusting the render with tests

46307ba

add more tests for sources decorator

4c14b10

testing the render

c8b7e68

vue3 fixing prepareStory for decotators

c8e157e

some refactoring and cleanup

2a81e98

after merging next branch

dab4855

fix null slots

233361a

handle no slots , null issue

2b205f8

fix args Inheritance and reactivity

b874cbe

merging next branch

d3f061a

fix null value exception for mdx stories

3d0b620

fix slot double quote display

da8b3b4

fix source for mdx using originFn and context

dc32a83

refactory generateSource to be elegante

14eca7c

add some tests for source decorator and render

b758496

merging next to local branch

265fc65

add some tests and fix CSF2 with decorator

ada469d

fixing react decorator breaks the reactivity

284313a

complete merging next branch

a65844e

use remount as easier way

4a7d98b

emit using channel forceRemount

f681d83

cleanup code

f670ef5

fix args after tests + cleanup

a5284cd

attribute style dynamic source

fb1c507

chakAs3 and others added 3 commits April 17, 2023 14:48

fix linter cercleci

6624221

Update tests

036e28a

Merge remote-tracking branch 'origin/chaks/vue3-reactive-decorators' …

ab083db

…into chaks/vue3-reactive-decorators # Conflicts: # code/renderers/vue3/template/stories/ReactiveDecorators.stories.ts

kasperpeulen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Apr 17, 2023

kasperpeulen and others added 8 commits April 17, 2023 14:33

Apply args to functional decorators.

de26d1e

Rename

01aee9c

Add reactive slot test

9e974b4

Apply args to functional decorators.

0fc05ca

Merge branch 'chaks/vue3-reactive-decorators' of https://github.com/s…

5edbd29

…torybookjs/storybook into chaks/vue3-reactive-decorators

cleanup test logs

620f87b

rectify the visual tests to have proper testing

60968cd

rectify visual tests to perform proper tests

9f1c700

kasperpeulen self-requested a review April 18, 2023 16:01

kasperpeulen approved these changes Apr 18, 2023

View reviewed changes

chakAs3 added 6 commits April 18, 2023 22:05

Merge branch 'next' into chaks/vue3-reactive-decorators

11926f6

add support reactive slots with default render function

b41e300

complete the slots test stories

6c24346

compte unit tests for reactive slots all types

20ab58c

refactory and cleanup

667e494

fix default token error

92e7a3b

chakAs3 added 2 commits April 19, 2023 03:11

normalize unit test / visual test stories

aea5936

fix arg type in slot function

d3e3522

chakAs3 merged commit 29cdc26 into next Apr 19, 2023

chakAs3 deleted the chaks/vue3-reactive-decorators branch April 19, 2023 00:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue3:fix reactive decorators #21954

Vue3:fix reactive decorators #21954

chakAs3 commented Apr 5, 2023 •

edited

Loading

kasperpeulen left a comment

kasperpeulen Apr 17, 2023

kasperpeulen Apr 17, 2023

kasperpeulen Apr 17, 2023

chakAs3 commented Apr 18, 2023

Vue3:fix reactive decorators #21954

Vue3:fix reactive decorators #21954

Conversation

chakAs3 commented Apr 5, 2023 • edited Loading

What I did

How to test

Checklist

Maintainers

kasperpeulen left a comment

Choose a reason for hiding this comment

kasperpeulen Apr 17, 2023

Choose a reason for hiding this comment

kasperpeulen Apr 17, 2023

Choose a reason for hiding this comment

kasperpeulen Apr 17, 2023

Choose a reason for hiding this comment

chakAs3 commented Apr 18, 2023

chakAs3 commented Apr 5, 2023 •

edited

Loading