TSX for Stencil로 스토리북 스토리 작성

그래 넌 할수있어!

TSX(JSX의 Typescript 버전)를 사용하여 스토리북용 스텐실 스토리를 작성하려는 경우 실제로 가능합니다. 약간의 조정, 그리고 당신은 가야합니다.
그러나 이것은 아직 초기 작업이며 다양한 시나리오에서 충돌이 거의 없을 것으로 예상합니다. 그럼에도 불구하고 사람들이 해결책을 찾고 있다는 것을 알고 있기 때문에 공유할 가치가 있다고 생각했습니다.

이것은 Stencil과 함께 Storybook의 html 버전을 사용한다고 가정합니다. 내 stencil-onedemo repo에서 작동하는 버전을 찾을 수 있습니다. (이것은 Stencil에서 단위 테스트를 위한 데모 저장소이므로 자유롭게 둘러보십시오.)

제가 작업한 주요 버전입니다. 다른 버전과 호환되는지는 모르겠습니다.

스텐실: 2.15

스토리북: 6

웹팩: 5

바벨 로더: 8

1단계: 스토리 작성

이것은 CSF3(Component Story Format)을 사용하여 스토리가 보여야 하는 모습입니다. 분명히 .tsx 라는 파일에 있어야 하므로 올바른 도구를 통해 이동합니다. 또한 .tsx 파일을 포함하도록 스토리를 찾는 경로를 변경합니다. (메인 파일의 스토리 옵션).

/** @jsx h */
/** @jsxRuntime classic */

import {h} from '@stencil/core';

export default {
  title: 'My Basic',
};

export const Default = {
  render: () => (<my-basic first="Millie" last="Brown"></my-basic>)
};

@jsx 지시문에 유의하십시오. 필요한 것 같습니다.

2단계: jsx용 Webpack 구성

babel jsx 변환기를 포함하도록 조정.storybook/main할 것입니다. 이를 위해 tsx를 처리하는 규칙을 찾고 @babel/plugin-transform-react-jsx를 pragma: {'h'}와 함께 플러그인으로 추가합니다.

  webpackFinal: async (config) => {
    const tsxRule = config.module.rules.find(rule => 'a.tsx'.match(rule.test));

    if(tsxRule) {
        const options = tsxRule.use[0].options;
        options.plugins = [
          ['@babel/plugin-transform-react-jsx', {
            prgama: 'h'
          }],
          ...options.plugins
        ];
    }
    return config;
  }

3단계: Stencil의 renderVDom을 사용하여 스토리 렌더링

마지막 부분은 storybook/preview 코드에 대한 변경 사항입니다. 데코레이터로 사용될 함수를 만들고 DOM에 요소를 렌더링합니다.

const stencilWrapper = (storyFn, context) => {
  const host = document.createElement('div');
  stencilClient.renderVdom(
    {
      $ancestorComponent$: undefined,
      $flags$: 0,
      $modeName$: undefined,
      $cmpMeta$: {
        $flags$: 0,
        $tagName$: 'div',  
      },
      $hostElement$: host,
    },
    storyFn(context)
  );
  return host.children[0];
}

그런 다음 활성화하십시오.addDecorator(stencilWrapper);
또한 미리 보기 코드 또는 미리 보기 관리자 html 파일에서 defineCustomElements(어쨌든 해야 함)를 호출하고 있는지 확인해야 합니다.

위에서 언급했듯이 이것은 여전히 ​​오류가 발생하기 쉽습니다. 제안, 개선, 버그 수정 등이 있으면 의견을 말하십시오.