storybook for html이 너무 사용하기 어렵기 때문에 pug를 사용하여 잘 사용하는 방법을 생각해 보았습니다.

storybook for html을 이용하는 경우는 vu이라든지 사용하지 않는다고 생각합니다만, 실제 제작으로 원소의 HTML로 쓰는 케이스는 거의 없지요. pug로 쓰는 것이 많을까 생각합니다.
그런 가운데 storybook을 이용하고 싶은 경우 【코드 보완이 없는 환경에서 HTML을 쓴다】인가 【빌드하고 코피페】, 게다가 쓴 곳에서 pug로서 재이용할 수 있는 내용이 아닙니다.
잘못하면 일이 늘어나는 것만으로 분명히 말해서 사용할 수 없습니다. 검색에도 거의 걸리지 않는 상태입니다.
그렇다고 storybook을 사용하기 위해 nuxt를 이용한다는 것도 다르다고 생각하기 때문에, 잘 사용하는 방법을 생각해 보았습니다.

20/02/26
환경을 만들어 보았습니다. git도 두고 있으므로 이쪽을 참고로 해 주세요.
정적 WEB 사이트용으로도 사용할 수 있는 storybook의 pug 환경을 만들어 보았다

이전 준비

이번 설명하는 내용은 pug의 이용 방법을 설명할 뿐이므로, 특별한 환경은 만들지 않습니다.
샘플을 만드는 것이 번거롭기 때문에 초기 설치 + bootstrap css를 사용하여 진행합니다.

npx -p @storybook/cli sb init --type html

설치하면 우선 이런 느낌의 구성으로 준비합니다.

├── .storybook
│   ├── config.js
│   └── preview-head.html
└── stories
    └── sample
        ├── button.pug
        └── sample.stories.js

storybook/preview-head.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

stories/sample/button.pug

  button.btn.btn-primary(type="button") Primary
  button.btn.btn-secondary(type="button") Secondary
  button.btn.btn-success(type="button") Success
  button.btn.btn-danger(type="button") Danger
  button.btn.btn-warning(type="button") Warning
  button.btn.btn-info(type="button") Info
  button.btn.btn-light(type="button") Light
  button.btn.btn-dark(type="button") Dark

stories.js에서 pug에서 직접 표시하는 방법

pug를 로드할 수 있도록 하려면 다음을 추가로 설치하십시오.

npm i pug pug-plain-loader html-loader -D

pug를 읽고 표시하는 것만이라면 실은 간단하기도 합니다.
pug-plain-loader와 html-loader를 통해서만 출력한다.

import { storiesOf } from '@storybook/html';
import Pug2HtmlBtn from '!html-loader!pug-plain-loader!./button.pug'

storiesOf('sample', module)
.add('pug2html', () => Pug2HtmlBtn ) //htmlタグに変換されたものを表示するだけ

Pug의 소스 표시 & 복사를 할 수 있도록 한다

pug로부터 html을 표시할 수 있었다고 해도, 페이지상에서 pug의 소스 표시나 카피를 할 수 없으면 미묘하기 때문에 카피 할 수 있도록 합니다.
코드의 복사에 관해서는 storybook의 addons에 있는 【 Copy code block 】를 사용합니다.

npm i -D @pickra/copy-code-block

pug 소스의 표시 방법은, html-loader만으로 읽어들여 pug의 소스로서 읽어들일 수가 있습니다.

stories/sample/sample.stories.js

import { storiesOf } from '@storybook/html';
import copyCodeBlock from '@pickra/copy-code-block';
import Pug2HtmlBtn from '!html-loader!pug-plain-loader!./button.pug'
import PugSrcBtn from '!html-loader!./button.pug'

storiesOf('sample', module)
.add('pug2html', () => Pug2HtmlBtn ) //htmlタグに変換されたものを表示するだけ
.add('pug&html', () => Pug2HtmlBtn + copyCodeBlock(PugSrcBtn) )

샘플은 올리지 않지만 아래 이미지와 같이 pug 레이아웃이나 mixin 등도 반영할 수 있습니다.

더 쉽게 사용할 수 있는 방법을 생각

nuxt 개발자 레벨이라면, 이 정도의 일이 되어 있으면 충분히 활용할 수 있다고 생각합니다만, 마크업의 사람이 메인으로 사용하는 것을 생각하면 아직 조금 복잡한 느낌입니다.
그리고 import의 기술이 많아져 버리는 점도 문제로서 있습니다.
그 주변을 개선하겠습니다.

가져오기 동적화

require.context라든지 단번에 읽어도 괜찮습니다만, HTML과 pug는 기본 세트로 사용하므로 copyCodeBlock를 래퍼화해 그 안에서 읽어들이도록 합니다.

.storybook/config.js

import { configure } from '@storybook/html';
import copyCodeBlock from '@pickra/copy-code-block';

// 指定したパスのhtml表示とpugソースのコピーボタンを表示する
global.code = (path,title=false) => {
  const pug = require(`!html-loader!../stories/${path}.pug`);
  const html = require(`!html-loader!pug-plain-loader!../stories/${path}.pug`);
  return `
  <div class="container mt-4">
    ${title ? '<h1 class="mb-5">'+title+'</h1>':''}
    ${html}
    <div class="mt-5">
    ${copyCodeBlock(pug)}
    </div>
  </div>`
}

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

sample.stories.js에 기술한 내용을 config.js에 기술하고 global 함수로 등록하여 모든 stories.js에서 사용할 수 있습니다.

storiesOf('ボタン', module)
.add('ノーマルボタン', () => code('sample/button','ノーマルボタン') )

이런 느낌의 심플한 기술을 추가하는 것만으로 【제목+HTML+pug】의 표시를 할 수 있게 됩니다.

더 편하게 하다

const path = require('path')
const req = require.context('../stories', true, /\.stories\.pug$/)
req.keys().forEach((pathstr) => {
  const dir = path.dirname(pathstr).replace('./','')
  const fpath = `${dir}/${path.basename(pathstr,'.pug')}`
  const fname = path.basename(pathstr,'.stories.pug')
  storiesOf( dir , module)
  .add( fname , () => code( fpath , fname) )
})

마크다운도 비슷한 생각으로 만들 수 있습니다.

지금까지의 내용에 마크다운에서의 기술을 추가하면 편집하기 쉬운 페이지를 할 수 있다고 생각합니다.
마크다운도 이번 pug와 같은 생각으로 html-loader와 markdown-loader로 읽는 것만으로 같은 처리를 할 수 있습니다.

const md2html = !html-loader!markdown-loader!パス名

메소드를 똑같이 작성하면 보다 기술을 적게 해, 자유도가 높은 페이지 작성을 할 수 있다고 생각합니다.
참고로 여러 가지 시도하십시오.