[Bug]: Accent in Meta's title break the doc page

DRYmag commented 2 months ago

Describe the bug

If accent are used in Meta's title, the doc page is broken, stories can't be retrieve from partial url.

If the title is : 'Example/Button with an "é" accent', I have the error : Error: NG05104: The selector "-accent--primary--primary-inner-1" did not match any elements. Find more at https://angular.dev/errors/NG05104.

Reproduction link

https://stackblitz.com/edit/github-uxwf7j?file=src%2Fstories%2Fbutton.stories.ts&preset=node

Reproduction steps

open the reproduction link
open the file containing the stories of button

Meta's title contain un accent :

const meta: Meta<ButtonComponent> = {
  title: 'Example/Button with an "é" accent',
  component: ButtonComponent,
  // ...
}

Go to the button doc page : https://zzmivoxlzggithub-zhd0--6006--28a8ce1b.local-corp.webcontainer.io/?path=/docs/example-button-with-an-%C3%A9-accent--docs

The stories can't be shown due to the error :

Error: NG05104: The selector "-accent--primary--primary-inner-1" did not match any elements. Find more at https://angular.dev/errors/NG05104
at locateHostElement (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:61196:32))
at ComponentFactory.create (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:65447:46))
at ApplicationRef.bootstrap (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:81016:38))
at /vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:82366:20
at _ZoneDelegate.invoke (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:146238:160))
at Object.onInvoke (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:56293:25))
at _ZoneDelegate.invoke (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:146238:48))
at ZoneImpl.run (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:145988:37))
at /vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:148405:30

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-essentials: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-interactions: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-links: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-onboarding: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/angular: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/blocks: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/test: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    storybook: ^8.4.0-alpha.0 => 8.4.0-alpha.0

Additional context

I use on my project the version 8.3.0 but I also reproduce on stackblitz with the version 8.4.0-aplha.

PotatoesMaster commented 2 months ago

Same problem here.

As a temporary workaround, I defined an id manually in my stories.

const meta: Meta<ButtonComponent> = {
  title: 'Example/Button with an "é" accent',
  id: 'Example/Button with an eacute', // <---
  // ...
}

SarvT commented 3 weeks ago

@vanessayuenn I want to work on this issue, can it be assigned to me?

szantnerb commented 3 weeks ago

I also noticed this change in behavior when I upgraded a project from Storybook v7 to v8. This PR introduced an additional piece of information to the story wrapper component's selector: a story UID as an attribute (STORY_UID_ATTRIBUTE). This attribute could contain accents (derived from meta & story names) but Angular is unable to handle components that have selectors with accented attributes e.g. app-component[spécial-character]. Filtering the characters of this attribute does solve the problem (I changed the source in my node_modules to quickly verify). (The targetSelector was somewhat similiarly already filtered in case it contained forbidden characters)

storybookjs / storybook