Skip to content

How to handle single quote in stories? #31

@jibees

Description

@jibees

Hi
Thanks a lot for your library, which is very useful for a React developer, newly involved into a Rails project 🙏

I'm facing an issue with single quote escaping... Which I was able to reproduce with the https://github.com/jonspalmer/view_component_storybook_example project (and mine obviously)

When I try to add a single quote character as an example for the title attribute of the TestComponent like this:

diff --git a/test/components/stories/test_component_stories.rb b/test/components/stories/test_component_stories.rb
index 09275ba..efd6fb7 100644
--- a/test/components/stories/test_component_stories.rb
+++ b/test/components/stories/test_component_stories.rb
@@ -26,7 +26,7 @@ class TestComponentStories < ViewComponent::Storybook::Stories
 
   story(:with_long_title) do
     controls do
-      title 'This is a really long title to see how the component renders this'
+      title "This is a really long titl'e to see how the component renders this"
     end
     content do
       "Help me please"

I got an error into my console:

index.js:47 Unexpected error while loading ./stories/test_component.stories.json: Error: Module parse failed: Unexpected token (49:37)
File was processed with these loaders:
 * ./node_modules/@storybook/server/dist/cjs/server/loader.js
You may need an additional loader to handle the result of these loaders.
| };
| with_long_title.args = {
>   title: 'This is a really long titl'e to see how the component renders this'
| };
| with_long_title.argTypes = {

which show, in an obvious way, an escape issue around ' character.
I'm wondering how to handle it?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions