Invalid escaping if stories.yml args contain top-level object.

[mikemiles86]

When creating a *.stories.yml file for a component if an argument is an object and it is not contained within an items array, then the whole object is escaped and treated as a string. This prevents the "cl_server" module from correctly decoding it and passing the arguments to the twig template.

This seems to be an issue from this plugin not correctly escaping and encoding the arguments from the *.stories.yml file.

Example

Twig template (mycomponent.twig.html)

<h1>{{ title }}</h1>
{% if cta.url %}
 <a href="{{ cta.url }}" target="{{ cta.target }}">{{ cta.text }}</a>
{% endif %}

Stories (mycomponent.stories.yml)

title: components/MyComponent
stories:
  - name: Default
    args:
      title: "Component Example"
      cta:
        url: "https://www.example.com"
        text: "Learn More"
        target: "_blank" 

Request

Example of the request sent to the cl_server endpoint:

https://www.mywebsite.com/_cl_server?_storyFileName=.%2Fweb%2Fthemes%2Fcustom%2Fmytheme%2Fcomponents%2Fmycomponent%2Fmycomponent.stories.yml&_drupalTheme=mytheme&_params=eyJ0aXRsZSI6ICJDb21wb25lbnQgRXhhbXBsZSIsImN0YSI6ICJ7XCJ1cmxcIjpcImh0dHBzOi8vd3d3LmV4YW1wbGUuY29tL1wiLFwidGV4dFwiOlwiTGVhcm4gTW9yZVwiLFwidGFyZ2V0XCI6XCJfYmxhbmtcIn0ifQ==

Decoded request: What the decoded params are decoded as:

{"title": "Component Example","cta": "{\"url\":\"https://www.example.com/\",\"text\":\"Learn More\",\"target\":\"_blank\"}"}

Expected request: What the decoded params should be decoded as:

{"title": "Component Example","cta":{"url":"https://www.example.com/","text":"Learn More","target":"_blank"}}

[e0ipso]

It seems that changing:

    _params: btoa(unescape(encodeURIComponent(JSON.stringify(params)))),

with

    _params: btoa(unescape(encodeURIComponent(JSON.stringify(context.args)))),

will resolve the issue. Now the question is why Storybook (via server render framework) passes the params like that into the fetchHtml entry point. Moreover, I am interested in the implications of using context.args instead of params.

[e0ipso]

This also indicates that a new nested component CTA may be in order here, but that is beyond the point.

[e0ipso]

Reading more in https://github.com/storybookjs/storybook/blob/next/code/frameworks/server-webpack5/README.md makes me think we'll likely be fine, unless we decide to support server params... which we might.

I am torn by this, I feel this is an upstream bug. The documentation clearly states that params are:

Merged story params parameters.server.paramsand story args

Yet they differ in their encoding.

@mikemiles86 did you resolve this issue? Did you file a bug upstream?

[e0ipso]

Closing tentatively. I might reopen based on feedback.

[n-lamkin]

Hi @e0ipso, Nate with MIT-Sloan here, we have not resolved this issue and did not file a bug upstream. Is that the best next step to have your proposed solution merged in a later update?

[mikemiles86]

@e0ipso I can confirm that changing

_params: btoa(unescape(encodeURIComponent(JSON.stringify(params)))),

to

_params: btoa(unescape(encodeURIComponent(JSON.stringify(context.args)))),

solves the issue.

I do not have enough understanding of how Storybook addons work to confidently open an upstream issue. In the mean time my team and I are working on updating our systems to use Yarn 2 (or 3) so that we can patch this addon with the change.

[e0ipso]

I will commit this change. No need for you to patch. I think it makes sense to support this feature.