2022-07-26

TODO #

• Storybook 코드 프리뷰에서 named slot이 제대로 표시되지 않는 문제
  • Vue 2.6.0+ 에서 deprecated된 Named Slots with slot attribute 방식을 사용하면 스토리북에서 Named Slot이 정상적으로 표시됨.
    • How to use a Vue slot with a template · Discussion #12691 · storybookjs/storybook (github.com)
  • Storybook docs-addon에서 transformSource 를 사용하면 code snippet 렌더링을 커스텀할 수 있음.
    • storybook/recipes.md · storybookjs/storybook (github.com)
    • slot="slotName"을 v-slot="slotName"으로 transform 하기 위해 정규식을 사용함.
      • https://stackoverflow.com/a/7671954
      • /slot="([^"]*)"/g
      • String.prototype.replace에서 replacer 함수에서 capturing group을 가져올 수 있음
    js

    source.replace(/slot="([^"]*)"/g, (_, p1) => `v-slot:${p1}`);
    

    source.replace(/slot="([^"]*)"/g, (_, p1) => `v-slot:${p1}`);
    

  • 스토리 파일에서 스토리 작성 시에는 slot attribute를 사용하고, 이를 커스텀하여 스토리북에서는 v-slot으로 표시하도록 처리함.
    • https://github.com/storybookjs/storybook/discussions/12691#discussioncomment-3229006

Reading #

• Capturing groups (javascript.info)
• 패턴과 플래그 (javascript.info)
• String.prototype.replace() - JavaScript | MDN (mozilla.org)
  • String.prototype.replace에서 특수 문자로 문자열을 교체하는 방법, replacer 함수로 문자열을 교체하는 방법도 있음.