#1870 및 #3423에 복제합니다. 거기서 토론을 계속하자

현재 스텐실 및 SB 5를 위한 새로운 스타터 빌드 생성 예정

@Edd-Srickland는 stencl 지원 버전 작업을 원합니다 🎉

스텐실이 있는 폴리머 스타터를 최신 버전의 SB로 업그레이드했습니다. 폴리머를 제거하고 스텐실 컴파일러를 추가하는 데 도움이 필요합니다.

안녕하세요,

@Edd-Strickland는 정보를 위해 이 프로젝트에서 스타터에서 했던 것처럼 스토리북 내부에 스텐실을 구현했습니다. https://github.com/vogloblinsky/nutrition-web-components

Storybook의 HTML 스타터를 사용했습니다.

지금은 Storybook & Stencil을 사용하여 다음을 수행해야 했습니다.

• Stencil에서 생성한 각 루트 JavaScript 파일을 가리키는 사용자 정의 헤더 추가
• Storybook에서 Stencil에 의해 생성된 정적 파일 추가

내가 생각하는 주요 문제는 스토리 내에서 가져온 JavaScript 파일을 처리하기 위해 Storybook에서 Webpack을 사용하는 것입니다. 이상적인 워크플로는 Web Component의 JS 파일만 가져오는 것입니다.

예, 이것은 이전에 수행한 작업이지만 폴리머 버전에서는 일반 정적 W/C 구현으로 가져오면 제한적으로 느껴지는 스토리로 매번 업데이트해야 한다는 의미입니다.

안녕하세요, 스텐실 component 유형 프로젝트에 설치할 수 있는 래퍼를 만들었습니다. 도움이 되기를 바랍니다. https://github.com/nisheed2440/stencil-storybook-wrapper

월요일에 테스트 해봐야겠습니다. 잘 했어 :)

이것이 Storybook의 공식 부분으로 만들어질까요? 나는 이것이 절실히 필요합니다!

@otw 노력하고 있습니다. 도와주시겠습니까?

@ndelangen 기꺼이 테스트하고 피드백/버그 보고서를 제공하겠습니다.

이것은 LitElement(및 일반적으로 웹 구성 요소)에서 작동합니까 아니면 Stencil에서만 작동합니까?

@nishe2440 래퍼가 유망해 보입니다. 곧 테스트하겠습니다! 하지만 Storybook 👌에 문서화된 "네이티브" 통합이 있으면 좋을 것입니다.

@nisheed2440 저는 매우 바빴지만(모두에게 죄송합니다) 오늘 아주 작은 창을 가지고 로컬에서 매우 바닐라 버전을 테스트했고 정말 좋습니다. 정말 잘 작동합니다.

다음 주에 기존 스텐실 사용자/프로젝트에서 이것이 어떻게 작동하는지 알아보기 위해 기존 프로젝트에 통합하는 데 시간을 할애할 것입니다.

나는 오늘 아침에 그것을 테스트했고 꽤 잘 작동합니다! GJ 설정은 정말 쉽습니다. 몇 가지 애드온을 설치하고 테스트했습니다.

import '@storybook/addon-backgrounds/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';

모든 것이 잘 작동합니다. addon-knobs https://github.com/storybooks/storybook/issues/5017 에서 한 가지 문제를 찾았습니다. 하지만 해결 방법이 있으며 이는 곧 수정되어야 한다고 생각합니다.

나는 지난 2주 동안 StencilJS와 Storybook을 가지고 놀았고 내 솔루션을 다루는 라이브 스트리밍을 했습니다. 훨씬 더 좋은 방법이 있다고 생각하지만 HMR을 얻을 수 있었고 대부분의 플러그인이 거의 문제 없이 작동했습니다. 배포 스텐실 번들에서 로더를 가져오거나 개선하는 방법에 대한 피드백을 환영합니다.

https://www.youtube.com/watch?v=XwHtPw3izLE

그리고 여기 레포가 있습니다! ^_^
https://github.com/MadnessLabs/enjin-components

@nisheed2440 안녕하세요,
실행하면 내 모든 스토리가 검색되지만 모든 스크린샷은 비어 있습니다. 크로매틱 서버에서 구성 요소 스크린샷을 렌더링하려고 할 때 스텐실이 누락되었을 수 있습니다.

@nisheed2440 정말 대단한 노력에 감사드립니다. 바라건대 이것은 팀이 올바른 방향으로 출발하는 데 도움이 됩니다. 스텐실과 스토리북은 서로에게 이상적입니다.

안녕하세요 여러분! 최근에 이 문제에 대해 많은 일이 일어나지 않은 것 같습니다. 여전히 질문, 의견 또는 버그가 있으면 자유롭게 토론을 계속하십시오. 불행히도 모든 문제를 다룰 시간이 없습니다. 우리는 항상 기여에 열려 있으므로 도움이 필요하면 풀 리퀘스트를 보내주십시오. 비활성 문제는 30일 후에 닫힙니다. 감사 해요!

이거 줍고 싶은 사람 있어?

우리 팀은 공통 구성 요소 라이브러리에 StencilJS + Storybook을 사용하고 있으며 기여하고 싶습니다. 어쩌면 우리 중 몇 명이 이 일을 정상으로 되돌릴 수 있을지도 모릅니다...

많은 관심이 있는 것 같습니다. 예: https://twitter.com/dboskovic/status/1120336958008348672

한 가지 쉬운 승리는 @popcorn245 의 구성을 스토리북 사전 설정으로 패키징하는 @storybook/preset-stencil 패키지를 게시하는 것입니다. 이에 대한 문서는 아직 마무리해야 하지만 곧 출시될 Storybook 문서 릴리스에 사용하고 있으며 간단하고 향후 대부분의 SB 구성이 작동하는 방식입니다.

나는 그것을 선택하려는 사람을 안내하게되어 기쁩니다.

@shilman님 , 많은 사람들이 이 문제를 열망 하고 있습니다. 그 스레드에는 내가 찾은 몇 가지 좋은 점이 있지만 노브를 사용하기 위해 요소 문자열을 반환해야 하는 것과 같은 작은 버그가 더 많습니다.

훨씬 더 나은 구현은 Stencil 컴파일러를 피기백하고 React 구성 요소와 같은 JSX 사용을 허용하지만 그것이 MHO입니다.

또한 Stencil One은 몇 가지 큰 변경 사항과 함께 곧 출시될 예정이므로 이 변경 로그를 확인하여 이 작업을 하고 있는 사람이 파이프라인에 무엇이 나올지 알 수 있도록 하는 것이 좋습니다.

https://github.com/ionic-team/stencil/blob/core-refactor/BREAKING_CHANGES.md

이 스레드는 특히 @popcorn245의 구성에 큰 도움이 되었습니다. 개인적으로 나는 @stencil/state-tunnel 하고 있었는데, 이는 그 구성을 깨뜨렸습니다. 다행히 다음을 실행하여 몇 가지 사소한 ~hacks~ 조정으로 작동하도록 할 수 있었습니다.

npm i -D [email protected]

그리고 이것을 .storybook/webpack.config.js :

const { existsSync, readdirSync } = require('fs');
const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = ({ config }) => {
  // 1. Transpile <strong i="11">@stencil</strong> modules with Babel
  const babelLoader = config.module.rules.find(
    ({ use }) => use && use[0].loader === 'babel-loader'
  );
  babelLoader.exclude = [/node_modules\/(?!\@stencil).*/];
  if (babelLoader.use[0].options) {
    babelLoader.use[0].options.plugins = ['@babel/plugin-syntax-dynamic-import'];
  }

  // 2. Load JS & CSS from our components
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.js'));
  config.entry.push(resolve(__dirname, '..', 'dist', 'MYCOMPONENTNAME.css'));

  const components = resolve(__dirname, '..', 'dist', 'collection', 'components');
  readdirSync(components).map(file => {
    jsFilePath = resolve(components, file, `${file}.js`);
    try {
      if (existsSync(jsFilePath)) config.entry.push(jsFilePath);
    } catch (err) {
      console.error(err);
    }

    cssFilePath = resolve(components, file, `${file}.css`);
    try {
      if (existsSync(cssFilePath)) config.entry.push(cssFilePath);
    } catch (err) {
      console.error(err);
    }
  });

  // 3. Fix dynamic imports for Storybook
  // IMPORTANT: webpack must be at 4.28 due to a bug. See here: https://github.com/webpack/webpack/issues/8656
  config.plugins.push(
    new CopyPlugin([
      {
        from: resolve(__dirname, '..', 'dist'),
        to: resolve(__dirname, '..', 'node_modules', '<strong i="12">@storybook</strong>', 'core', 'dist', 'public'),
      },
    ])
  );

  return config;
};

이것으로 실험을 시작하고 (다른 곳에서 언급했듯이) concurrently 를 사용하는 것이 (현재로서는) 잘 작동하는 것 같습니다. 스텐실과 스토리북을 시작하고 실행하는 데 필요한 모든 것이 포함된 빠른 시작 프로젝트를 만들었습니다. 이미 최신 스텐실 릴리스를 사용하고 있습니다.

여기에서 확인하십시오: stencil-storybook-starter

@fvaldes33 반갑습니다! 별표 표시했습니다. 실제로 방금 Stencil One 베타로 업데이트했고 구성이 비슷해 보입니다. 기본적으로 기본 웹팩 설정을 완전히 사용할 수 있습니다.

저에게 유일한 차이점은 stencil build --watch (개발이 아닌 prod)를 사용하는 것이었습니다. 왜냐하면 빌드 시간이 너무 빠르고 Stencil에서 prod 버전을 사용하는 것이 더 쉽기 때문입니다(특히 글로벌 스타일 및 기타 가져오기).

@ fvaldes33 어떻게 그렇게 미리보기-head.html에서 build/components.js를 참조할 수 있습니까? 전체 경로(예: http://localhost :3333/build/components.js)를 제공해야 합니다. 그러나 나는 그렇게하지 않아도되고 싶습니다.

(나는 당신의 스타터를 사용하지 않고 있지만 새로운 스토리북/html 설치와 함께 스텐실 컴포넌트 스타터를 사용하고 있습니다)

편집하다:
www 폴더 대신 포트 6006에서 스토리북을 시작하고 있다는 것을 깨달았습니다. 문제 해결됨!

우리 중 많은 사람들이 비슷한 솔루션을 가지고 있는 것처럼 보이지만(저를 포함하여 https://github.com/jagreehal/stencil-boilerplate) 스텐실 구성 요소를 편집할 때 핫/라이브 업데이트를 정말 원합니다. 현재 Storybook을 다시 로드하려면 브라우저를 수동으로 새로 고쳐야 합니다.

이를 완료하기 위한 요구 사항의 글머리 기호 목록이 있습니까? 구축해야 할 사항을 알고 있다면 기꺼이 참여하겠습니다.

현재 상태는 무엇입니까? 기여할 수 있습니까? 나는 이것을보고 싶다!

위의 사전 설정을 제공하는 것이 좋습니다.

• 사전 설정은 https://storybook.js.org/docs/presets/introduction/에 문서화되어 있습니다.
• 여기에 커뮤니티 사전 설정에 대한 저장소가 있습니다: https://github.com/storybookjs/presets

누군가 위의 패턴을 기반으로 사전 설정을 만들고 싶다면 스토리북 쪽에서 기꺼이 도와드리겠습니다. 나는 스텐실 측면에 익숙하지 않습니다.

나는 그것을 원하는 누군가를 위해 내 프로젝트를 게시했습니다. 기능은 다음과 같습니다.

• 자동 스토리 생성
  
  
  
  • 구성 요소의 모든 @Props 에 대한 자동 노브 생성
  
  
  • 각 소품에 사용되는 노브를 사용자 정의하는 기능(코드는 문자열, 숫자, 부울, 개체, 날짜 및 색상을 잘 추측하지만).
  
  
  • 제목, 설명 및 복사 가능한 코드 조각(일종의 경량 챕터 구현)이 있는 단일 페이지에 렌더링되는 여러 상태를 정의하는 기능
  
  
  • 각 구성 요소에 대한 메모를 정의하는 기능(일반적으로 생성된 readme를 원함)
  
  
• 스텐실 구성 요소의 라이브 재빌드/다시 로드(여전히 약간 불안정합니다. 때때로 브라우저를 새로 고쳐야 함)
• 뷰포트 애드온과 함께 제공

당신의 생각을 알려주세요: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx 멋지네요 . 이에 대해 트윗하고 @storybookjs 언급하면 스토리북 계정에서 RT하겠습니다. 그리고 만약 당신이 그것에 관한 포스트를 쓰고 싶다면, 나는 당신과 함께 그것을 알리게 하는 것을 기쁘게 생각합니다. 여기 수요가 꽤 있는 것 같아요.

멋진 작업 @DesignByOnyx ! 이것은 사전 설정에 완벽하게 맞는 것 같습니다 :tada:

좋아, 나는 트윗을 했다(나는 트위터를 많이 하지 않는다). 게다가 저는 블로그가 없습니다.

프로젝트가 작동하는 동안 나는 서둘러 그것을 함께 던져 놓았고 실제로 사용자 정의하기가 쉽지 않았습니다. 각 개별 구성 요소를 렌더링하기 위해 여러 파일을 로드하고 병합해야 하므로 거기에 있는 코드 중 일부는 정말 부서지기 쉽습니다. 더 많은 시간을 할애하기 전에 피드백을 받기를 바랍니다.

프리셋이 어떤 모습일지 궁금합니다. 가장 좋은 점은 반응하지 않는 JSX 사전 설정입니다. 이렇게 하면 Storybook-html 다양성 위에 더 쉽게 렌더링하고 템플릿을 생성할 수 있으며 스텐실과 별로 관련이 없습니다. 이 기능을 사용하려면 여러 애드온도 업데이트해야 하며, 제가 그 노력을 가장 잘 조율할 수 있을지 확신이 서지 않습니다. 어느 쪽이든, 내가 도울 수 있는 일을 알려주세요.

@DesignByOnyx 디스코드에 https://discordapp.com/invite/UUt2PJb

Storybook 블로그에서 이 작업을 수행하고 스텐실 커뮤니티에서 홍보하는 방법에 대해 더 많은 이야기를 나누고 싶습니다.

저는 Stencil용으로 @storybook/html 를 사용해 왔으며 그 경험은 거의 "작동"합니다. 기본적으로 다음을 수행합니다.

1. concurrently 를 사용하여 Storybook 서버를 시작하고 stencil build --watch "병렬"
2. -s dist 플래그로 storybook 를 시작하여 스텐실 dist 이 정적 파일로 제공되도록 합니다.

3. 다음과 같은 스크립트 태그를 포함하도록 .storybook/preview-head.html 를 구성합니다.

   <script type="module" src="/$PACKAGE_NAME/$PACKAGE_NAME.esm.js"></script>
   <script nomodule="" src="/$PACKAGE_NAME/$PACKAGE_NAME.js"></script>
   

그리고 그게 다야! 즉시 사용 가능한 html 지원은 모든 웹 구성 요소 요구 사항에 대해 작동합니다.

내가보고 싶은 것은 같은 것입니다 @storybook/stencil 와 같은 경험 (코드)이 그 html 이야기 제작 측 패키지를하지만,

1. concurrently 이 필요하지 않도록 스토리북의 일부로 스텐실 빌드 프로세스 실행을 추상화합니다.
2. 해당 script 태그를 추가합니다.
3. 스텐실 구성 요소가 다시 빌드될 때 자동 새로 고침을 연결합니다.

그런 것에 관심이 있습니까? 저는 Stencil과 Storybook에서 회사를 매각하는 과정에 있으며, 그것이 견인력을 얻는다고 가정하면 Storybook + Stencil이 함께 플레이하는 동안 그 이야기(말장난은 실례)를 정말 멋지게 만들기 위해 "작업 시간"을 가질 것입니다.

@DesignByOnyx 가 수행한 작업은 정말 훌륭하지만 해당 키트로 Stencil 구성 요소를 _시작_해야 하고 Stencil에 대한 "일반" 문서를 무시해야 합니다. Storybook이 "일반" 스텐실 스타터 키트 위에 계층화할 수 있는 패키지를 제공할 수 있는 경우 기존 스텐실 구성 요소 집합에 Storybook 구성을 쉽게 추가할 수 있습니다.

훌륭한 요약 @alexlafroscia에 감사드립니다. 나는 당신의 제안이 많은 의미가 있다고 생각합니다. 스텐실을 다시 빌드할 때 HMR이 자동으로 시작되지 않습니까? 그렇다면 왜 안되는지 아세요?

@igor-dv 사전 설정에서 preview-head.html 에 추가할 수 있습니까?

@Hypnosphi 아마도 이것은 다중 프레임워크 노력에 대한 흥미로운 예일 것입니다. 이 경우 데코레이터는 필요하지 않지만 (분명히) 전체 컴파일러가 필요합니다.

@alexlafroscia 귀하의 경우 이야기의 예는 어떻게 보입니까?

내가 일하는 회사에서 우리는 한동안 Storybook HTML과 StencilJS 패키지를 가지고 놀았습니다. 기꺼이 기여하겠습니다!

@alexlafroscia 매우 훌륭한 아이디어입니다. 실제로 이 컴파일러를 완벽하게 지원하는 것이 좋습니다. 다음은 몇 가지 다른 아이디어입니다.

• StencilJS JSX 기능(현재 Preact 기반)을 사용하여 보다 유지 관리 가능한 방식으로 스토리를 작성하십시오. 평범한 오래된 JS 또는 템플릿 리터럴을 사용하는 것은 번거로울 수 있습니다...
• 웹 구성 요소용 Smart Knobs 애드온 이 있습니다. @DesignByOnyx 는 이에 대한 좋은 기반을 제공했습니다.

이 기사에서는 StencilJS: Fall 2019 Stencil Roadmap의 진행 중인 로드맵을 다룹니다. 특히:

공개 컴파일러 API

우리가 집중하고 있는 또 다른 영역은 컴파일러가 브라우저 내에서 작동하고 다른 도구에서 사용할 수 있도록 하는 것입니다. 우리는 이미 Stackblitz, CodeSandbox 및 WebComponents.dev와 같은 몇 가지 멋진 팀과 협력하고 있습니다. 가장 낮은 수준에서 컴파일러는 이미 NodeJS 환경에서 실행되지 않고 작동하므로 기술적으로 이것은 주요 리팩터가 아니라 올바른 API를 노출하는 것입니다.

또한 Rollup, Parcel, WebPack 및 Bazel을 포함한 다른 NodeJS 도구에서 컴파일러를 쉽게 사용할 수 있도록 개선해야 할 많은 영역이 있습니다. 온라인 도구든 NodeJS 환경이든 상관없이 도구의 유지 관리자이고 Stencil 컴파일러를 구현하려는 경우 부담 없이 연락해 주시면 기꺼이 도와드리겠습니다!

유용할 수 있습니다!

스텐실을 다시 빌드할 때 HMR이 자동으로 시작되지 않습니까? 그렇다면 왜 안되는지 아세요?

@shilman Storybook과 Stencil 사이에 내가 가진 설정에서 "실제"연결이 없기 때문에 시작되지 않습니다. 빌드된 자산을 가리키는 단순한 <script> 태그입니다.

귀하의 경우 이야기의 예는 어떻게 보입니까?

@Hypnosphi 그들은이 같은 (디폴트에 대한 이야기를 보면 my-component 스텐실은 자신이 만든 최초의 패키지에 생성하는 때 npm init stencil

import { document, console } from 'global';
import { storiesOf } from '@storybook/html';

storiesOf('My Component', module)
  .add('without a middle name', () => `
    <my-component
      first="Alex"
      last="LaFroscia"
    ></my-component>
  `)
  .add('with a middle name', () => `
    <my-component
      first="Alex"
      middle="Robert"
      last="LaFroscia"
    ></my-component>
  `);

StencilJS JSX 기능(현재 Preact 기반)을 사용하여 보다 유지 관리 가능한 방식으로 스토리를 작성하십시오. 평범한 오래된 JS 또는 템플릿 리터럴을 사용하는 것은 번거로울 수 있습니다...

@darondel 스토리 저작 파일에 JSX가 없는 개발자 경험에 대한 우려에 전적으로 동의합니다. 나는 @storybook/html 를 사용할 수 있기 전에 과거에 그 접근 방식을 사용했으며 OK인 React 경험을 사용했습니다.

"기본" html 경험에 가깝게 유지하려는 부분은 스토리가 HTML 관점에서 실제로 스토리를 사용하는 방법에 대한 문서 역할을 하도록 하는 것입니다. 적어도 우리 조직에서는 다른 곳에서는 사용되지 않습니다(우리는 주로 Ember.js 상점입니다).

템플릿 태그가 좋은 경험이 아닐 것이라고 언급했지만 htm 같은 것이 좋은 옵션이 될 수 있다고 생각합니다. 또한 필수 빌드 단계가 없기 때문에 빌드 프로세스를 훌륭하고 간단하게 유지하지만 Knobs와 같은 것과 더 쉽게 상호 작용할 수 있습니다.

또한 다가오는 DocsPage 와 같은 것과 통합하는 것이 @DesignByOnyx 가 이미 수행한 작업 중 일부가 여기에서 유용할 수 있으므로 스텐실 구성 요소의 "메타데이터"를 읽어 문서 정보를 자동으로 생성하는 경로가 있을 수 있습니다. 아마도 "v1" 문제는 아니지만 "v1.1"에서 볼 수 있는 정말 멋진 것입니다! 자동 손잡이 애드온과 같은 것을 만드는 당신의 아이디어가 정말 마음에 듭니다. 정말 편리할 것입니다!

오늘 Storybook 5.2와 함께 출시된 DocsPages를 사용하여 Stencil에서 소품 등에 대한 정보를 가져와 Storybook으로 렌더링하는 것이 가능한지 조사했습니다. 나는 그것이 가능해야 한다고 생각하지만, 그것에 필요한 "접착제" 무리를 수용하기 위해 Stencil과 함께 Storybook을 사용하는 데 맞춤화된 애드온 또는 사전 설정을 갖는 것이 얼마나 유용한지 확실히 강조합니다.

이번 주에 좀 더 이것저것 해보고 정리할 수 있는지 알아봐야겠습니다.

@alexlafroscia 는 서로 다른 프레임워크가 이 데이터를 전달하는 방법을 표준화하고 @elevatebart )에서 흥미로운 것을 보았고 @atanasster 도 성능을 위해 JSON 파일에 prop 유형을 캐싱하기 위해 이 영역에서 작업하고 있습니다. 이 모든 것을 6.0에서 통합해야 한다고 생각합니다.

Jetbrains 작업에 익숙하지 않습니다. 확인해야 합니다! 검토하는 데 도움이 될 특정 정보가 있으면 제 방식대로 보내주시면 감사하겠습니다!

Stencil의 경우 "가장 좋은 방법"은 Stencil 빌드 프로세스에서 JSON 문서 를 Stencil Storybook 애드온으로 잘 알려진 위치 또는 구성 가능한 위치로 출력하는 것입니다. 이 객체에는 예상되는 props, 발생한 이벤트 및 각 구성 요소의 readme 파일 내용(자동 생성된 props 문서 제외)에 대한 모든 정보가 포함되어 있습니다. 해당 JSON 파일의 정보로 Storybook DocsPage를 채우는 정말 매력적인 스토리를 만들 수 있다고 생각합니다.

{
  "timestamp": "2019-09-18T14:30:38",
  "compiler": {
    "name": "@stencil/core",
    "version": "1.3.2",
    "typescriptVersion": "3.5.3"
  },
  "components": [
    {
      "tag": "fluid-banner",
      "encapsulation": "shadow",
      "readme": "# fluid-banner\n\nThis is the contents of the README!\n",
      "docs": "This is the contents of the README!",
      "docsTags": [],
      "usage": {},
      "props": [],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    },
    {
      "tag": "fluid-button",
      "encapsulation": "shadow",
      "readme": "# fluid-button\n\n\n",
      "docs": "",
      "docsTags": [],
      "usage": {},
      "props": [
        {
          "name": "destructive",
          "type": "boolean",
          "mutable": false,
          "attr": "destructive",
          "reflectToAttr": false,
          "docs": "Whether to display in the `destructive` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "disabled",
          "type": "boolean",
          "mutable": false,
          "attr": "disabled",
          "reflectToAttr": false,
          "docs": "Whether the button should be treated as `disabled`",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "plain",
          "type": "boolean",
          "mutable": false,
          "attr": "plain",
          "reflectToAttr": false,
          "docs": "Whether to display in the `plain` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "primary",
          "type": "boolean",
          "mutable": false,
          "attr": "primary",
          "reflectToAttr": false,
          "docs": "Whether to display in the `primary` style",
          "docsTags": [],
          "default": "false",
          "optional": false,
          "required": false
        },
        {
          "name": "size",
          "type": "\"large\" | \"medium\" | \"small\"",
          "mutable": false,
          "attr": "size",
          "reflectToAttr": true,
          "docs": "The size to display the button",
          "docsTags": [],
          "default": "\"medium\"",
          "optional": false,
          "required": false
        }
      ],
      "methods": [],
      "events": [],
      "styles": [],
      "slots": []
    }
  ]
}

일종의 해킹(JSON 출력을 dist/output.json 작성한 다음 fetch 을 사용하여 파일을 가져옴)이지만 DocsPage 구성 요소가 사용할 수 있는 슬롯 소품입니다.

Props 테이블은 완벽하지는 않지만 꽤 좋습니다. Stencil 출력은 테이블이 기대하는 모든 props를 제공한 다음 일부를 제공합니다. 구성 요소에 대한 readme.md 에 있는 것은 무엇이든 파일의 맨 위에 렌더링됩니다.

import React, { useContext, useEffect, useState } from "react";
import { DocsPage, DocsContext } from "@storybook/addon-docs/blocks";

export const StorybookDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return null;
  }

  const component = payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );

  // Empty because we will use the whole component README
  const titleSlot = () => "";
  const subtitleSlot = () => "";

  const descriptionSlot = () => component.readme;
  const propsSlot = () => ({
    rows: component.props.map(prop => ({
      name: prop.name,
      type: prop.type,
      description: prop.docs,
      required: prop.required,
      defaultValue: prop.default
    }))
  });

  return React.createElement(
    DocsPage,
    { titleSlot, subtitleSlot, descriptionSlot, propsSlot },
    null
  );
};

업데이트: 한 단계 더 나아가 사용자 정의 스타일에 대한 문서가 포함된 두 번째 테이블을 얻기 위해 전체 사용자 정의 DocsPage (단순히 슬롯을 재정의하는 것이 아니라)를 정의했습니다.

import { createElement as e, useContext, useEffect, useState } from "react";
import { DocsPage, PropsTable } from "@storybook/components";
import { H2, H3 } from "@storybook/components/html";
import {
  Anchor,
  Description,
  DocsContext,
  Preview,
  Story
} from "@storybook/addon-docs/blocks";

function useStencilComponent() {
  const docsContext = useContext(DocsContext);
  const [payload, setPayload] = useState(null);

  useEffect(function() {
    fetch("./output.json")
      .then(res => res.json())
      .then(res => setPayload(res));
  });

  if (!payload) {
    return undefined;
  }

  return payload.components.find(component =>
    docsContext.selectedKind.includes(component.tag)
  );
}

const DocsStory = ({
  id,
  name,
  expanded = true,
  withToolbar = false,
  parameters
}) =>
  e(
    Anchor,
    { storyId: id },
    expanded && e(H3, null, (parameters && parameters.displayName) || name),
    expanded &&
      parameters &&
      parameters.docs &&
      parameters.docs.storyDescription &&
      e(Description, { markdown: parameters.docs.storyDescription }, null),
    e(Preview, { withToolbar }, e(Story, { id, height: "auto" }, null))
  );

export const CustomDocsPage = () => {
  const docsContext = useContext(DocsContext);
  const component = useStencilComponent();
  if (!component) {
    return null;
  }

  const { selectedKind, storyStore } = docsContext;
  const stories = storyStore.getStoriesForKind(selectedKind);
  const [primary, ...otherStories] = stories;

  const propDocs = component.props.length
    ? [
        e(H2, null, "Props"),
        e(
          PropsTable,
          {
            rows: component.props.map(prop => ({
              name: prop.name,
              type: prop.type,
              description: prop.docs,
              required: prop.required,
              defaultValue: JSON.parse(prop.default)
            }))
          },
          null
        )
      ]
    : [];

  const styleDocs = component.styles.length
    ? [
        e(H2, null, "Styles"),
        e(
          PropsTable,
          {
            rows: component.styles.map(style => ({
              name: style.name,
              description: style.docs
            }))
          },
          null
        )
      ]
    : [];

  const additionalStories = otherStories.length
    ? [
        e(H2, null, "Stories"),
        ...otherStories.map(story =>
          e(
            DocsStory,
            { key: story.id, ...story, expanded: true, withToolbar: false },
            null
          )
        )
      ]
    : [];

  return e(
    DocsPage,
    null,
    e(Description, { markdown: component.readme }, null),
    e(
      DocsStory,
      { key: primary.id, ...primary, expanded: false, withToolbar: true },
      null
    ),
    ...propDocs,
    ...styleDocs,
    ...additionalStories
  );
};

사용자 정의 페이지는 또한 각 이야기의 높이가 기본적으로 500px 되어 있다는 사실을 수정합니다.

@alexlafroscia 이것은 놀랍고 엄청난 작업입니다!

참고로, 우리는 5.3에서 prop 테이블을 일반화할 것입니다. 특히 Vue와 같은 프레임워크에는 슬롯 및 이벤트의 개념이 있으므로 자체 테이블로 분할해야 합니다. 아마도 당신의 스타일 작업은 동일한 메커니즘을 사용할 수 있습니다. https://github.com/storybookjs/storybook/issues/8123

내가 언급한 Jetbrains 프로젝트는 다음과 같습니다(cc @piotrtomiak): https://github.com/JetBrains/web-types

나는 그것을 자세히 보지 않았고 그것이 우리에게 맞는지 모릅니다. 그러나 그것이 우리의 사용 사례를 충족하고 너무 많은 불필요한 것을 추가하지 않는다면, 나는 우리 자신의 표준을 발명하기보다는 기존 표준을 사용하고 싶습니다.

@shilman 메타데이터 정보 교환에 대한 표준을 웹 구성 요소 라이브러리로 가져오기 위한 (JetBrains) 노력을 살펴주셔서 감사합니다! 우리의 초기 추진력은 단순히 HTML 파일의 Vue 구성 요소에 대한 우수한 코드 완성을 제공하는 것이었지만 그러한 표준으로 달성할 수 있는 것이 훨씬 더 많다는 것을 알았으므로 일반 정보 교환 형식(IDE, 도구, 문서). 지금까지는 Vue 프레임워크에 중점을 두었지만 웹 구성 요소 또는 기타 프레임워크에 대한 지원을 항상 염두에 두었습니다. web-types 표준은 꽤 신선하지만 Vue 커뮤니티와 사용자로부터 긍정적인 피드백을 이미 들었습니다. Vue 커뮤니티에서 사양을 적극적으로 홍보하고 있지만 다른 커뮤니티에서 약간의 관심을 얻을 수 있어서 너무 좋습니다!

web-types JSON 스키마에 누락된 몇 가지 사항이 있을 수 있다고 생각합니다. 이는 프레임워크에 따라 다르며 사양에 추가할 수 있습니다. 예를 들어 Vue 특정 항목에는 vue 접두사가 붙습니다. 또한 CSS 지원을 문서화하기 위한 전체 섹션이 누락되어 포함할 수 있습니다. 따라서 web-types 에 기회를 줄 가치가 있다고 생각되면 언제든지 문제를 제기하거나 누락된 기능에 대한 PR을 작성하십시오.

web-types 형식으로 구성 요소를 문서화하는 부작용은 개발자가 프로젝트에 라이브러리를 포함할 때 좋은 코드 완성이 될 것입니다. 우리는 가까운 장래에 모든 프레임워크에 대한 공통 web-types 기능을 기반으로 하는 이러한 일반 지원을 구현할 계획입니다. 커뮤니티가 더 많은 형식을 수용하면 다른 IDE가 이 형식에 대한 지원을 따를 것이며, 이는 모두에게 도움이 될 것이라고 확신합니다. :)

@alexlafroscia 환상적인 작품! 스텐실 및 스토리북 통합(https://github.com/storybookjs/storybook/issues/7644와 함께)이 좋아 보입니다.

해당 문제에 연결해 주셔서 감사합니다! 나는 원래 비슷한 경로를 밟았지만(기존 README 파일을 어떻게든 사용하고 DocsPage로 직접 가져오려고 시도함) 궁극적으로 Stencil이 문서 JSON 파일에 넣은 데이터를 사용하는 것이 더 쉽다는 것을 알게 되었습니다. 테이블을 포함하지 _하지 않기 때문입니다. 소품 및 모든 것(해당 데이터는 JSON 파일의 다른 위치에 있고 구조화된 데이터는 사용자 지정 테이블을 만드는 데 완벽하기 때문에).

@alexlafroscia 결과를 공유해 주셔서 감사합니다. CustomDocsPage 디버깅 방법을 여쭤봐도 될까요?

addParameters 추가하려고 시도했지만 사용자 지정을 사용하지 않는 것 같지만 대신 기본값을 사용합니다.

import { configure, addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

import { CustomDocsPage } from './docs.jsx';

addParameters({
  options: { theme: themes.dark },
  docs: { page: CustomDocsPage }
});

configure(require.context('../src', true, /\.(story|stories)\.(mdx)$/), module);

### Web Component
<Story name="WC">
    <component-name name="test"></component-name>
</Story>

WC 자체는 CustomDocsPage 를 사용하지 않아도 스토리북 문서 페이지에 로드됩니다.
구성 요소를 디버깅할 수 있는 방법이 있습니까? 일부 로그를 추가하려고 시도했지만 아무 것도 볼 수 없습니다.

미리 감사드립니다.

나는 그 문제도 겪었다 -- 나는 "구성 요소" 수준에서 DocsPage 구성 요소를 재정의해야 했다

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replace -docspage

@storybook/html 가 jsx와 함께 작동하도록 할 수 있습니까? 스텐실 구성 요소에 대한 내 이야기를 훨씬 쉽게 작성할 수 있습니다. 입력하고 자동 완성되며 document.createElement 또는 큰 템플릿 문자열을 사용할 필요가 없습니다. 반응 패키지를 사용하여 맨 위에 // @jsx 로 typescript를 속이려고 했지만 작동하지 않았습니다.

@vidarc 그렇게 할 때 오류가 무엇 사용자 정의 babel 구성이 있습니까?

커스터마이징이 많지 않습니다. 웹팩에 몇 가지가 추가되었습니다. 첫 번째 typescript는 Cannot find name 'h' 에 대해 불평합니다. 내 tsconfig에는 jsx = react 및 jsxFactory = h가 있습니다. 맨 위에 있는 // <strong i="6">@jsx</strong> h pragma 설정을 사용하여 이러한 경고가 사라지도록 할 수 있지만 DOM 노드 또는 문자열을 반환하지 않기 때문에 스토리북 오류가 발생합니다.

시도해 볼 것: https://github.com/developit/vhtml 다음

편집 : jsx와 잘 작동합니다. 그래도 typescript와 함께 작동하도록 하는 방법을 알 수 없습니다 :/

@vidarc h 가 하이퍼스크립트를 나타내는 경우 문자열도 DOM 요소도 아닌 사용자 정의 개체를 반환합니다.

vhtml은 갈 길을 보인다

참고로 web-components 앱에 대한 PR이 있습니다. https://github.com/storybookjs/storybook/pull/8400

여기 누군가가 이 문제와 어떻게 교차하는지에 대해 언급할 수 있습니까? @Vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

아직 #8400을 테스트하지 않았지만 테스트하기 전에 다음을 통해 "라이브" 스텐실을 사용할 수 있었습니다.

1. 하나의 창에서 start-storybook -s ./www 를 실행합니다.
2. 다른 곳에서 stencil build --dev --watch 를 실행합니다.
3. .storybook/config.ts 를 업데이트하여 HMR에서 창을 다시 로드합니다.

const req = require.context('../src/components', true, /.stories.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

if (module.hot) {
  module.hot.accept(req.id, () => {
    const currentLocationHref = window.location.href;
    window.history.pushState(null, null, currentLocationHref);
    window.location.reload();
  });
}

조금 지저분합니다.

https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js 와 같은 대안을 조사할 수 없는 이유는 import "./my-component" 가 import { Component } from "@stencil/core" 이후 실패하기 때문입니다.

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

실제로 IE11에서 작동하는 스텐실 및 스토리북 구현/구성이 있는 사람이 있습니까? 나는 운이 없이 이 스레드에서 언급된 각 구현을 시도했습니다.
항상 처리되지 않은 약속 거부가 발생합니다. TypeError: Invalid Scheme with stencil versions 1.2.4 -> 1.7.4.

@shilman web-components 앱에서 스텐실 구성 요소를 얻을 수 있었지만 모든 사람이 html 하나로 하는 것과 같은 방식으로 읽고 HMR은 ' t 스텐실 구성 요소 자체에 대한 업데이트에 반응합니다.

React, Angular 등과 같은 스토리북 실행 시퀀스에 스텐실 컴파일러를 빌드하는 방법이 있다면 정말 좋을 것입니다.

스텐실 구성 요소를 "라이브" 상태로 유지하는 방법을 계속 시도할 것이지만 내가 겪고 있는 아키텍처 문제는 내가 실수하지 않는 한 _스텐실 구성 요소가 작동하려면 사용자 정의 빌드 단계가 필요하다는 것입니다_( stencil build --dev --watch ) 및 런타임에 해당하는 항목이 없습니다.

import { MyComponent} from "./MyComponent" 시도했지만 @Component 가 실제로 @stencil/core 에서 내보내지지 않았기 때문에 실패합니다. 실제로 빌드 단계의 일부로 제거됩니다.

https://github.com/ionic-team/stencil/blob/master/src/compiler/transformers/validate-types-transform.ts

이것을 알고 내 다음 테스트는 React 바인딩(https://github.com/ionic-team/stencil-ds-plugins)으로 빌드 단계를 유지하되 대신 HMR 로직을 HTML 대신 React를 사용하도록 교체하는 것입니다. .

이것이 스토리북 UX가 React와 일치하도록 하고 Stencil은 구성 요소 구현에만 남게 되기를 바랍니다.

stencil build 가 개발 모드에서 병렬로 실행되어야 하는 것이 세상의 종말이라고 생각하지 않습니다.

• package.json 에서 동시에 실행하는 방법을 사용자에게 지시할 수 있습니다.
• 스텐실 사전 설정은 시작 시 이 프로세스를 생성하고 사용자에게 숨기려면 종료 시 종료할 수 있습니다.

움직이는 부분이 적은 솔루션이 바람직하지만 여기에서 좋은 것이 큰 것을 적으로 두지 맙시다. AFAIK는 현재 모두가 여전히 자체 스텐실 지원을 제공하고 있으며 여기 많은 사람들을 위해 일을 단순화할 수 있는 좋은 기회가 있습니다...

동시에 사용하는 것이 현재 저에게 효과적입니다.

확실히 증분 단계가 있습니다.

나를 사용자로 만든 주된 이유는 스텐실이 동일하게 작동하지 않는 "이유"였습니다.
스텐실 특정 없이는 해결할 수 없는 내 반응 이야기로
변경.

2019년 10월 31일 목요일 오후 5:02 Michael Shilman [email protected]
썼다:

나는 스텐실 빌드를 요구하는 것이 세상의 종말이라고 생각하지 않습니다.
개발 모드에서 병렬로 실행:

• 사용자에게 이것을 동시에 실행하는 방법을 지시할 수 있습니다.
  그들의 package.json에서 https://www.npmjs.com/package/concurrently
• 스텐실 사전 설정은 시작 시 이 프로세스를 생성한 다음 종료할 수 있습니다.
  사용자에게 숨기려면 종료 시

움직이는 부분이 적은 솔루션이 바람직하지만 좋지 않습니다.
여기에서 위대한 것의 적이 되십시오. AFAIK 지금은 모두가 여전히 롤링 중입니다.
현재 자체 스텐실 지원을 제공하고 있습니다.
여기 많은 사람들을 위해 일을 단순화하십시오 ...

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVEXG43VMXHJ2LDNMV
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

이에 대한 또 다른 접근 방식은 미리보기(스텐실)에서 UI(스토리북)를 명확하게 분리하는 것입니다. 스토리북 독립 실행형으로 이것은 이미 가능해야 합니다.
그렇게 하면 훨씬 더 빠른 부팅 시간을 의미하는 스토리북 💪을 미리 구축할 수도 있습니다.

그런 다음 개발하는 동안 스텐실 빌드만 사용합니다(하지만 여전히 스토리북 UI 사용). 즉, 스토리북 웹팩 설정과의 상호 운용에 대해 생각할 필요 없이 스텐실 개발 서버가 지원하는 모든 장점을 얻을 수 있습니다.

우리는 이미 사용하여이 조사 es-dev-server 위한 전원에 미리보기를 web-components . 우리는 일종의 POC를 가지고 있지만 여전히 거친 가장자리가 있습니다.
그러나 정확히 동일한 접근 방식이 스텐실에서도 작동해야 한다고 가정합니다.

누군가 질문이 있거나 스텐실을 위해 이것을 조사하는 데 관심이 있거나 es-dev-server 를 사용하여 참조 프로젝트를 만드는 데 도움이 된다면 @LarsDenBakker 가 더 자세한 정보를 기꺼이 공유할 것입니다 🤗

추신: 이 모든 것은 스토리북에 채널 메시지가 포함된 멋진 iframe 설정이 있어 UI를 미리보기와 별도로 유지하기 때문에 가능합니다 🤗

모두 안녕

얼마 후 이것에 대해 많은 만지작거림이 끝나면 스텐실 통합 스토리북 구현 https://github.com/Edd-Stricland/stencilbook에 대한 내 저장소입니다

추가로 논의하게 되어 기쁩니다. 대부분의 사항이 readme와 스크립트에 대한 package.json을 보면 명확해집니다.

이것은 바닐라 스텐실 스타터 컴포넌트와 바닐라 스토리북 HTML 구현을 사용하여 구축되었습니다.

보시고 후기 부탁드립니다...

StencilBook - 스텐실 스토리북 스타터

이것은 스텐실과 스토리북을 사용하여 독립형 웹 컴포넌트를 구축하기 위한 스타터 프로젝트입니다.

원판

스텐실은 웹 구성 요소를 사용하여 빠른 웹 앱을 빌드하기 위한 컴파일러입니다.

스텐실은 가장 인기 있는 프론트엔드 프레임워크의 최고의 개념을 런타임 도구가 아닌 컴파일 시간에 결합합니다. Stencil은 TypeScript, JSX, 작은 가상 DOM 레이어, 효율적인 단방향 데이터 바인딩, 비동기 렌더링 파이프라인(React Fiber와 유사) 및 지연 로딩을 즉시 사용하고 실행되는 100% 표준 기반 웹 구성 요소를 생성합니다. Custom Elements v1 사양을 지원하는 모든 브라우저에서

스텐실 구성 요소는 웹 구성 요소일 뿐이므로 모든 주요 프레임워크에서 작동하거나 전혀 프레임워크 없이 작동합니다.

시작하기

리포지토리 복제

git clone https://github.com/Edd-Strickland/stencilbook.git

기본 디렉토리로 변경:

cd stencilbook

모듈을 설치합니다.

npm install

전체 리포지토리에 대한 빌드를 실행합니다.

npm run build:all

이 실행 스토리북 후:

npm run storybook

이 리포지토리에 대한 다른 명령은 다음과 같습니다.

스텐실 빌드:

npm run stencil

서빙/감시 모드에서 스텐실을 직접 시작합니다. 스텐실 구성 요소를 직접 수정하는 데 유용합니다.

npm run stencil:start

watch 및 serve로 스토리북 및 스텐실 빌드를 실행하고 빌드되어 로컬에서 제공될 이전 버전을 삭제합니다.

npm run storybook:build:all

지역에서 스토리북 제공:

npm run storybook:serve

모듈을 재설정합니다. 노드 모듈을 삭제하고 다시 설치합니다.

npm run reset:modules

구성 요소에 대한 단위 테스트를 실행하려면 다음을 실행합니다.

npm test

시험

감시 모드에서 테스트를 실행하려면:

npm run test.watch

새 구성 요소 생성

새 스텐실 구성 요소를 자동으로 생성하려면:

npm run generate

@Edd-Srickland 멋진 시작입니다! 더 쉬운 부팅을 위해 시작 스크립트를 추가할 것을 제안할 수 있다면 "start": "npm-run-all -p stencil:start storybook" 했으며 스토리북이 스텐실이 빌드될 때 인식하지 못하는 것처럼 핫 다시 로드가 없다는 점을 제외하고는 꽤 잘 작동합니다.

...그건 내가 뭔가를 놓치고 있지 않는 한?

@shilman 이미 마스터 알파에 @storybook/web-components 패키지가 있는 것 같지만 README.md에서 참조된 스텐실이 보이지 않습니다: https://github.com/storybookjs/storybook/tree/next/ 앱/웹 구성 요소

이것은 병행 노력입니까? 그렇지 않은 경우 해당 문제를 알게 되었습니까? 문제에서 web-components 를 검색할 때 찾을 수 없습니다. app: web-components 태그를 찾았지만 방금 릴리스 및 버그에 추가되었습니다.

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

@storybook/web-components 제공하는 것 이상으로 적절한 스텐실 지원을 추가하는 데 필요한 것이 무엇인지 이해하지 못합니다. 이 스레드의 누군가가 알고 있다고 확신합니다!

@Edd-Srickland 멋진 시작입니다! 더 쉬운 부팅을 위해 시작 스크립트를 추가할 것을 제안할 수 있다면 "start": "npm-run-all -p stencil:start storybook" 했으며 스토리북이 스텐실이 빌드될 때 인식하지 못하는 것처럼 핫 다시 로드가 없다는 점을 제외하고는 꽤 잘 작동합니다.

...그건 내가 뭔가를 놓치고 있지 않는 한?

흠 사과는 바쁘고 지난주 말에 회의에 참석했습니다.

귀하가 겪고 있는 문제에 대해 혼란스럽습니다. 자세한 내용은 이 스레드가 아닌 repo 문제를 통해 문제를 제기할 수 있습니까?

그러나 설치를 수행한 다음 스토리북 명령을 실행하면 그에 따라 감시 서버가 시작됩니다. 스텐실은 실행 중 구성 요소를 변경, 추가 또는 업데이트할 때마다 자동 HMR을 수행합니다.

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

@storybook/web-components 제공하는 것 이상으로 적절한 스텐실 지원을 추가하는 데 필요한 것이 무엇인지 이해하지 못합니다. 이 스레드의 누군가가 알고 있다고 확신합니다!

웹 구성 요소는 바닐라 인스턴스와 작동하지만 스텐실은 웹 구성 요소를 출력하지만 기본적으로 W/C가 아닌 W/C의 컴파일러로 실행됩니다.

따라서 틀림없이 둘 다 필요합니다. 하나의 네이티브 JS W/C와 스텐실 컴파일러용 하나는 반응 또는 각도 구성 요소로 할 수 있는 것처럼 스토리북 측면에서 스텐실 기반 W/C의 프로토타입을 빠르게 만들고자 하는 경우입니다.

@daKmoR 과 만나 이것이 중복인지 중복인지 논의할 시간이 없지만 당분간 이 버전을 유지 관리하고 있습니다.

나는 최근 Bulmil 과 nuxt-stencil 및 nuxt 예제 와 Stencil 통합에 대한 작업으로 인해 우연히 알게 되었습니다.

나는 또한 적절한 Storybook 지원이 있다는 것을 알았습니다. 어쩌면 볼 가치가 있습니다. 내부가 이 스레드의 현재 상태와 어떻게 다른지 모르겠지만 일단 스토리북 을 실행하면 Bulmil 내에서 즉시 작동합니다.

@storybook/addon-actions 이(가) 아직 작동하지 않는 것 같거나 아직 작동하지 못했습니다.

이 스레드에서 @Gomah를 만나서 스토리북의 스텐실 지원을 개선하기 위한 협업에 대한 그의 아이디어를 들을 수 있을까요?

최근에 나는 Bulmil 과 nuxt-stencil 및 nuxt 예제 와 Stencil 통합에 대한 작업으로 인해 Bulmil을 우연히 만났습니다.

나는 또한 적절한 Storybook 지원이 있다는 것을 알았습니다. 어쩌면 볼 가치가 있습니다. 내부가 이 스레드의 현재 상태와 어떻게 다른지 모르겠지만 일단 스토리북 을 실행하면 Bulmil 내에서 즉시 작동합니다.

@storybook/addon-actions 이(가) 아직 작동하지 않는 것 같거나 아직 작동하지 못했습니다.
확실히 위의 repo 내에서 add on action이 표준 스토리북 애드온으로 작동합니다.

E2A: @Gomah 변형이 아닌 스텐실 책.

위의 기본 스텐실/SB 통합을 사용한 목적은 단순히 스토리북에서 스토리북으로, 스텐실에서 스텐실로, 그리고 둘 다 함께 통합되어 스텐실을 통해 만들어진 웹 구성 요소를 스토리북 프레임에 넣을 수 있도록 하는 기반을 만드는 것입니다.

나는 W/C 버전이 이 반복과 마찬가지로 실행되고 우리가 사용하고 있는 기존 버전을 W/C 버전으로 변환할 수 있는지 확인하기 위해 다음 2주 동안 팀 스프린트에 집중했습니다.

이상적으로는 W/C 변형이 단편화되지 않도록 모두 작동하지만 기본 W/C 구현과 달리 스텐실은 실제로 프레임워크가 아닙니다. 컴파일러. 따라서 나중에 W/C로 출력할 JSX 구성 요소를 작성할 수 있도록 구별하는 것이 여전히 가치가 있을 수 있습니다.

아니면 정말 간단할 수도 있습니다.

스파이크가 완료되면 알려 드리겠습니다.

커스터마이징이 많지 않습니다. 웹팩에 몇 가지가 추가되었습니다. 첫 번째 typescript는 Cannot find name 'h' 에 대해 불평합니다. 내 tsconfig에는 jsx = react 및 jsxFactory = h가 있습니다. 맨 위에 있는 // <strong i="7">@jsx</strong> h pragma 설정을 사용하여 이러한 경고가 사라지도록 할 수 있지만 DOM 노드 또는 문자열을 반환하지 않기 때문에 스토리북 오류가 발생합니다.

시도해 볼 것: https://github.com/developit/vhtml 다음

편집 : jsx와 잘 작동합니다. 그래도 typescript와 함께 작동하도록 하는 방법을 알 수 없습니다 :/

안녕하세요 @vidarc입니다. storiesOf() 구문으로 이 작업을 수행할 수 있었습니까? 그렇다면 어떻게 하셨는지 정말 궁금합니다. 공유할 코드 예제 또는 코드 기반이 있습니까?

스토리북과 스텐실이 통합되어 프로젝트에서 잘 작동하지만 가장 큰 문제는 개체 소품 등을 포함하는 구성 요소에 대해 document.createElement() 로 스토리를 만드는 데 의존해야 한다는 것입니다. vhtml 가 해결할 수 있다면 이것, 그것은 굉장할 것입니다!

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+

@storybook/web-components 제공하는 것 이상으로 적절한 스텐실 지원을 추가하는 데 필요한 것이 무엇인지 이해하지 못합니다. 이 스레드의 누군가가 알고 있다고 확신합니다!

당신 말이 맞아요, 저도 동의합니다. README.md에 포함된 폴더를 보고 다른 웹 구성 요소 프레임워크를 보았지만 스텐실은 보지 못했습니다.

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

그래서 스텐실이 포함되지 않은 이유가 있다고 생각했습니다. 그러나 아무것도 추가하지 않고 이것이 잘 작동한다면 그것은 나에게 완벽합니다.

Btw, 앞서 언급한 웹 구성 요소 사전 설정에 의해 해결되었으므로 이 문제를 이제 닫을 수 있습니까?

커스터마이징이 많지 않습니다. 웹팩에 몇 가지가 추가되었습니다. 첫 번째 typescript는 Cannot find name 'h' 에 대해 불평합니다. 내 tsconfig에는 jsx = react 및 jsxFactory = h가 있습니다. 맨 위에 있는 // <strong i="8">@jsx</strong> h pragma 설정을 사용하여 이러한 경고가 사라지도록 할 수 있지만 DOM 노드 또는 문자열을 반환하지 않기 때문에 스토리북 오류가 발생합니다.
시도해 볼 것: https://github.com/developit/vhtml 다음
편집 : jsx와 잘 작동합니다. 그래도 typescript와 함께 작동하도록 하는 방법을 알 수 없습니다 :/

안녕하세요 @vidarc입니다. storiesOf() 구문으로 이 작업을 수행할 수 있었습니까? 그렇다면 어떻게 하셨는지 정말 궁금합니다. 공유할 코드 예제 또는 코드 기반이 있습니까?

스토리북과 스텐실이 통합되어 프로젝트에서 잘 작동하지만 가장 큰 문제는 개체 소품 등을 포함하는 구성 요소에 대해 document.createElement() 로 스토리를 만드는 데 의존해야 한다는 것입니다. vhtml 가 해결할 수 있다면 이것, 그것은 굉장할 것입니다!

최신 내용을 사용하여 직접 CSF 스토리로 만들고 스토리를 잘 작동하는 형식으로 바꿀 수 있습니다. 또한 데이터 개체를 채우기 위해 일부 데이터 팩토리를 가져오면 이를 사용하여 소품을 수화할 수 있습니다....

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components %22+
@storybook/web-components 제공하는 것 이상으로 적절한 스텐실 지원을 추가하는 데 필요한 것이 무엇인지 이해하지 못합니다. 이 스레드의 누군가가 알고 있다고 확신합니다!

당신 말이 맞아요, 저도 동의합니다. README.md에 포함된 폴더를 보고 다른 웹 구성 요소 프레임워크를 보았지만 스텐실은 보지 못했습니다.

By default the following folders are included

src/*.js
packages/*/src/*.js
node_modules/lit-html/*.js
node_modules/lit-element/*.js
node_modules/@open-wc/*.js
node_modules/@polymer/*.js
node_modules/@vaadin/*.js

그래서 스텐실이 포함되지 않은 이유가 있다고 생각했습니다. 그러나 아무것도 추가하지 않고 이것이 잘 작동한다면 그것은 나에게 완벽합니다.

Btw, 앞서 언급한 웹 구성 요소 사전 설정에 의해 해결되었으므로 이 문제를 이제 닫을 수 있습니까?

스텐실과 함께 작동하는지 테스트하고 다시 보고할 것입니다. 그러면 닫을 수 있습니다. 실제로 스텐실과 함께 작동하지 않으면 닫는 의미가 없습니다 ...

...

안녕하세요 @vidarc입니다. storiesOf() 구문으로 이 작업을 수행할 수 있었습니까? 그렇다면 어떻게 하셨는지 정말 궁금합니다. 공유할 코드 예제 또는 코드 기반이 있습니까?
스토리북과 스텐실이 프로젝트에 통합되어 잘 작동하고 있지만 가장 큰 문제는 개체 소품 등이 있는 구성 요소에 대해 document.createElement() 로 스토리를 만드는 데 의존해야 한다는 것입니다. vhtml 가 해결할 수 있다면 이것, 그것은 굉장할 것입니다!

최신 내용을 사용하여 직접 CSF 스토리로 만들고 스토리를 잘 작동하는 형식으로 바꿀 수 있습니다. 또한 데이터 개체를 채우기 위해 일부 데이터 팩토리를 가져오면 이를 사용하여 소품을 수화할 수 있습니다....

감사 해요. CSF가 지금 권장되는 스토리 작성 방법이라는 것을 깨닫지 못했습니다. jsx 애드온이 vhtml btw와 함께 작동하도록 관리했습니까, 아니면 불가능합니까?

...

안녕하세요 @vidarc입니다. storiesOf() 구문으로 이 작업을 수행할 수 있었습니까? 그렇다면 어떻게 하셨는지 정말 궁금합니다. 공유할 코드 예제 또는 코드 기반이 있습니까?
스토리북과 스텐실이 프로젝트에 통합되어 잘 작동하고 있지만 가장 큰 문제는 개체 소품 등이 있는 구성 요소에 대해 document.createElement() 로 스토리를 만드는 데 의존해야 한다는 것입니다. vhtml 가 해결할 수 있다면 이것, 그것은 굉장할 것입니다!

최신 내용을 사용하여 직접 CSF 스토리로 만들고 스토리를 잘 작동하는 형식으로 바꿀 수 있습니다. 또한 데이터 개체를 채우기 위해 일부 데이터 팩토리를 가져오면 이를 사용하여 소품을 수화할 수 있습니다....

감사 해요. CSF가 지금 권장되는 스토리 작성 방법이라는 것을 깨닫지 못했습니다. jsx 애드온이 vhtml btw와 함께 작동하도록 관리했습니까, 아니면 불가능합니까?

따라서 JSX는 스텐실 컴파일러를 통해 섀도우 돔으로 직접 구문 분석됩니다. 따라서 스토리북에 컴파일러 통합을 사용하는 한 표준 스텐실 구성 요소를 작성한 다음 CSF 스토리에 포함시킨 다음 데이터 팩토리로 가져와서 소품을 채웁니다.

내가 게시한 바닐라 리포지토리는 VHTML 플러그인이 필요하지 않고 스텐실로 직접 작성하고 출력할 수 있는 래퍼도 필요하지 않습니다.

당신은 storyOf 구문을 사용할 수 있지만 당신은 고전적인 document.createElement 패턴에 잠겨 있습니다.
예를 들어 우리 아이콘에 대한 이 오래된 이야기의 구문

import { storiesOf } from '@storybook/html';
/** 
  * Import readme from component into the story 
  */
import markdown from './readme.md';

storiesOf('1-Atoms/icon', module)
    .addParameters({ viewport: { defaultViewport: 'responsive' } })
    .add('knobs', () => {
        /**
         * Add Knobs to component panel
         * Set within Each knob as the third parameter
         */
        let icon = document.createElement('namespace-icon');
        icon.classList.add('namespace-action-plan');
        icon.size = 'medium';
        return icon;
    }, { notes: { markdown } });

VS

import centered from '@storybook/addon-centered/html';
import markdown from './readme.md';

export default {
  title: 'Atoms|Icon',
  decorators: [centered],
  parameters: {
    notes: { markdown },
    viewport: { defaultViewport: 'responsive' }
  }
};

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

커스터마이징이 많지 않습니다. 웹팩에 몇 가지가 추가되었습니다. 첫 번째 typescript는 Cannot find name 'h' 에 대해 불평합니다. 내 tsconfig에는 jsx = react 및 jsxFactory = h가 있습니다. 맨 위에 있는 // <strong i="8">@jsx</strong> h pragma 설정을 사용하여 이러한 경고가 사라지도록 할 수 있지만 DOM 노드 또는 문자열을 반환하지 않기 때문에 스토리북 오류가 발생합니다.
시도해 볼 것: https://github.com/developit/vhtml 다음
편집 : jsx와 잘 작동합니다. 그래도 typescript와 함께 작동하도록 하는 방법을 알 수 없습니다 :/

안녕하세요 @vidarc입니다. storiesOf() 구문으로 이 작업을 수행할 수 있었습니까? 그렇다면 어떻게 하셨는지 정말 궁금합니다. 공유할 코드 예제 또는 코드 기반이 있습니까?

스토리북과 스텐실이 통합되어 프로젝트에서 잘 작동하지만 가장 큰 문제는 개체 소품 등을 포함하는 구성 요소에 대해 document.createElement() 로 스토리를 만드는 데 의존해야 한다는 것입니다. vhtml 가 해결할 수 있다면 이것, 그것은 굉장할 것입니다!

@roboxelsen
@storybook/react를 사용하고 webpack 구성을 수정하여 MDX 파일과 함께 MD 파일을 변환했습니다. 그런 다음 json 문서 출력 스텐실을 기반으로 노브를 생성하는 약간의 코드가 제공합니다. 스텐실 코드의 경우 CLI에서 스토리북 사본을 사용하고 해당 파일을 preview-head.html 파일에 연결합니다. 제 목적에 아주 잘 맞습니다.

@Edd-Srickland 예제와 설명에 감사드립니다. 마지막 예제에서는 여전히 요소의 소품으로 프로그래밍 방식으로 속성을 전달해야 합니다. 내 희망은 vhtml이나 일반 스텐실 컴파일러로 내 이야기를 JSX로 작성할 수 있다는 것이었습니다.

따라서 다음 대신:

export const knobs = (): HTMLNamespaceIconElement => {
  const icon: HTMLYooIconElement = document.createElement('namespace-icon');

  icon.classList.add('namespace-action-plan');
  icon.size = 'medium';

  return icon;
};

...나는 다음과 같이 쓸 것이다.

export const knobs = (): HTMLNamespaceIconElement => {
    return (
        <namespace-icon class="namespace-action-plan" size="medium">
        </namespace-icon>
    );
};

가독성과 스토리 작성의 용이성을 위해. 그러면 불가능한 건가요? 가능하다면 간단한 예를 들어 주시겠습니까?

그것이 더 쉬우면 우리는 또한 불화 채팅에서 이야기할 수 있습니다. 저는 Rob Axelsen#1373 입니다.

편집: 위에 추가하기 위해 CSF 설명서도 살펴보고 h 가져오기 JSX 구문으로 시도했지만 "스토리에서 HTML 스니펫 또는 DOM 노드 기대: "단순한 이야기" 오류가 발생합니다. "구성 요소"의.":

export const simpleStory = () => <namespace-icon class="namespace-action-plan" size="medium"></name-spaceicon>;

이것이 웹 구성 요소에 대한 속성을 설정해야 하는 스토리 작성에 관한 것이라면 @storybook/web-components 살펴볼 수 있습니다. lit-html 을 사용하여 속성이 있는

이것은 스토리북과 스텐실을 나란히 실행할 때 작동해야 합니다. :)

스텐실이 lit html을 사용하지 않는다는 점을 제외하고. 그게 Vue의 문제야...

@shilman 이미 마스터 알파에 @storybook/web-components 패키지가 있는 것 같지만 README.md에서 참조된 스텐실이 보이지 않습니다: https://github.com/storybookjs/storybook/tree/next/ 앱/웹 구성 요소

여기에 링크된 저장소에 복제 작업 등이 없는 웹 구성 요소 패키지를 어떻게 다운로드하고 테스트합니까?

@Edd-Stricland는 메인 스토리북 모노레포의 디렉토리일 뿐입니다.

스텐실이 lit html을 사용하지 않는다는 점을 제외하고. 그게 Vue의 문제야...

lit thing 🤔

그러나 이것이 웹 구성 요소의 아름다움입니다. 후드 아래에서 스텐실이 사용하는 것은 중요하지 않습니다. lit-html을 사용하거나 스토리를 정의하는 다른 방법을 사용할 수 있습니다. 아마도 필요한 것은 속성으로 "html"을 작성하는 방법뿐입니다.

lit-html의 경우 다음과 같습니다.

export myStory = () => {
  const dataArray = [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
  return html`
    <my-lit-component .title=${'some title'} power="unlimited">
      <p> some light dom</p>
    </my-lit-component>
    <my-stencil-component super-mode .data=${dataArray}></my-stencil-component>
  `;
}

따라서 스토리에서 Chrome의 DevTools로 이동하면 조명 구성 요소를 선택할 수 있고 다음 세부 정보를 읽을 수 있습니다.

• 속성 제목 예: console.log($0.title) // 일부 제목
• 속성 power eg console.log($0.getAttribute('power')) // 무제한

스텐실 구성 요소의 경우 "동일"합니다.

• 속성 데이터 eg console.log($0.data) // [{ name: 'john', age: 21 }, { name: 'maria', age: 28 }];
• 속성 슈퍼 모드 예: console.log($0.hasAttribute('super-mode')) // true

lit-html은 dom만 렌더링합니다... dom 요소가 등록된 위치/방법 lit-html은 알지 못하므로 각 구성 요소에 사용되는 기술은 완전히 다를 수 있습니다... 예를 들어 다음과 같은 구성 요소를 가질 수 있습니다. 조명 요소, 스텐실, 바닐라 HTMLElement 또는 전체 반응/뷰/각도 응용 프로그램을 위한 웹 구성 요소 래퍼일 수도 있습니다... 😱

스텐실은 컴파일러일 수 있지만 웹 컴포넌트로 컴파일되면 그냥 dom으로 사용할 수 있습니다 🤗

추신: @storybook/web-components 는 lit-html을 사용합니다.

스텐실 팀은 스텐실/스토리북 통합을 변경할 컴파일러를 리팩토링하고 있습니다.

누구든지 배열과 개체를 전달할 수 있는 React 체크아웃 https://github.com/the-road-to-learn-react/use-custom-element 를 통해 스텐실 및 스토리북을 사용하려는 경우. 나중에 직접 시도해 보겠습니다. 하지만 이것은 일부 사람들에게 도움이 될 수 있습니다.

관심 있는 분들을 위해 Storybook/react와 Stencil을 결합하는 스타터를 게시했습니다: https://github.com/bbellmyers/stencil-storybook-starter. 이 구성을 사용하면 구성 요소를 변경하려면 브라우저에서 하드 새로 고침이 필요하지만 스토리에 대한 변경은 그렇지 않습니다.

스토리북이 웹 컴포넌트용 스토리북을 개발 중인 것 같습니다. 나는 스텐실로 그것을 시도했고 꽤 잘 작동합니다.

https://github.com/storybookjs/storybook/tree/next/app/web-components

@sem4phor 구성을 공유할 수 있습니까?

웹 구성 요소에 대한 새로운 스토리북 설치에서 lit-html에 대한 오류가 발생합니다.

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

@dmartinjs 를 사용하려면 기본 예제에서 구성 요소를 렌더링하는 데 사용되는 'lit-html'을 직접 설치해야 합니다.

@Edd-Srickland 웹 구성 요소용 스토리북을 추가했으며 6.0.0에서 폴리머용 스토리북은 더 이상 사용되지 않거나 업데이트되지 않습니다.

웹 구성 요소에 대한 스토리북이 스텐실 구성 요소에 대해 작동하도록 하기 위해 수행해야 할 작업이 있습니까?

웹 구성 요소 스토리북은 스텐실 웹 구성 요소 구성 요소를 렌더링할 수 있지만 스텐실은 브라우저에서 그대로 실행할 수 없으며 컴파일해야 합니다. 따라서 스토리북을 실행하기 전에 스텐실 구성 요소를 컴파일하지 않는 한 여전히 약간의 특별한 처리가 필요합니다.

@LarsDenBakker 는 위의 작업을 수행하기 위해 webpack 플러그인/로더를 추가하는 문제입니다. ( 스텐실 구성 요소를 HMR로 만들고 동적으로 컴파일하는 것이 바람직하다고 생각합니다)

예, 스텐실 자체가 롤업을 사용하지만. 컴파일 단계를 별도의 프로젝트로 사용할 수 있다면 웹팩 플러그인으로 만들 수도 있습니다. 나는 그것에 대한 내부에 대해 충분히 모른다.

스텐실은 Webpack을 사용하지 않습니다. 대신 롤업을 사용합니다.

내가 설정한 리포지토리를 사용하여 적절하게 작동하고 -watch 호출을 사용하여 스텐실에서 해당하는 HMR을 활성화할 수 있습니다. 스텐실이 업데이트되면 스텐실이 다시 로드되고 업데이트되면 Storybook이 다시 로드됩니다.

이렇게 하면 커버되므로 매번 빌드할 필요가 없습니다.

최근에 리포지토리를 최신 SB 또는 스텐실로 업데이트할 시간이 없었지만 이 프로세스는 계속 작동하므로 리포지토리를 최신 버전으로 업그레이드할 수 있습니다.

감사 해요

@Edd-Srickland 웹 구성 요소용 스토리북을 추가했으며 6.0.0에서 폴리머용 스토리북은 더 이상 사용되지 않거나 업데이트되지 않습니다.

웹 구성 요소에 대한 스토리북이 스텐실 구성 요소에 대해 작동하도록 하기 위해 수행해야 할 작업이 있습니까?

예, 웹팩 사용과 롤업 사용의 차이점에 대해 위에서 자세히 설명했듯이 현재 SB WC 버전을 사용하려는 경우 렌더링을 위해 전체 스텐실 빌드가 필요하기 때문에 여전히 라이브 다시 로드/HMR을 고려하지 않습니다. 그러면 HMR의 모든 장점이 스텐실로 손실됩니다.

이 버전은 현재 폴리머 버전이 아닌 HTML 버전을 기반으로 하므로 해당 버전을 폐기하려는 장기적인 목표에 영향을 미치지 않습니다.

@LarsDenBakker 는 위의 작업을 수행하기 위해 webpack 플러그인/로더를 추가하는 문제입니다. ( 스텐실 구성 요소를 HMR로 만들고 동적으로 컴파일하는 것이 바람직하다고 생각합니다)

나는 그것을 조언하지 않을 것입니다. 스텐실의 웹팩 버전은 훨씬 더 어려운 개발 경로이며 필요 없이 종속성 풋프린트를 증가시킵니다. 내가 생성한 리포지토리에서 볼 수 있듯이 스텐실을 시계에서 실행하는 것이 완벽하게 가능합니다. WC 또는 SB 인스턴스의 변경. 둘 다 허용하도록 구성하는 것입니다.

예, 스텐실 자체가 롤업을 사용하지만. 컴파일 단계를 별도의 프로젝트로 사용할 수 있다면 웹팩 플러그인으로 만들 수도 있습니다. 나는 그것에 대한 내부에 대해 충분히 모른다.

이미 스텐실 WP 플러그인이 있지만 이것은 지원되거나 커뮤니티에서 승인한 종속성이 아닙니다.

cc @jthoms1 @adamdbradley

@dmartinjs 를 사용하려면 기본 예제에서 구성 요소를 렌더링하는 데 사용되는 'lit-html'을 직접 설치해야 합니다.

@sem4phor 구성을 공유할 수 있습니까?

웹 구성 요소에 대한 새로운 스토리북 설치에서 lit-html에 대한 오류가 발생합니다.

ERROR in ./node_modules/@storybook/web-components/dist/client/preview/render.js
Module not found: Error: Can't resolve 'lit-html' in '/Users/david/www/stencil-starter/node_modules/@storybook/web-components/dist/client/preview'
 @ ./node_modules/@storybook/web-components/dist/client/preview/render.js 20:15-34
 @ ./node_modules/@storybook/web-components/dist/client/preview/index.js
 @ ./node_modules/@storybook/web-components/dist/client/index.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

이에 대한 피드백이 있습니까? 이 종속성을 직접 설치해야 합니다. @storybook/web-components에서 사용하는 경우 종속성으로 자동 설치되어야 합니다...?

@LeeBurton 이 피어 종속성이라면 그렇지 않습니까? (인지 아닌지 확실하지 않은 경우 아마도 그래야 할 것입니다) cc @daKmoR

@LeeBurton 을 테스트할 당시 lit-html은 피어 종속성이었습니다. 피어 종속성을 직접 설치해야 하는 것은 정상입니다. https://nodejs.org/es/blog/npm/peer-dependencies/

그만한 가치가 있기 때문에 .storybook/preview.js 에서 이 구성으로 작업하는 스텐실을 얻었습니다.

import { defineCustomElements } from "../dist/esm/loader.mjs"
defineCustomElements()

configure(require.context('../src', true, /.*\.stories\.(js|mdx)$/), module);

@idmyn 나는 그것을 시도했고 컴파일하는 동안 src 파일에 대한 변경 사항은 수동 하드 다시 로드 없이는 여전히 브라우저에 로드되지 않습니다.

npm-run-all 패키지와 병렬로 start-storybook 를 실행하면서 하나의 npm 실행 스크립트에서 시계를 활성화한 상태에서 스텐실의 빌드를 로컬로 실행하여 작동하도록 했습니다.

내 main.js에서 다음을 사용하여 Stencil의 dist 파일을 보도록 스토리북의 webpack 구성을 구성했습니다.

const path = require('path');
const glob = require('glob');

module.exports = {
  webpackFinal: (config) => {
    // watch all revelant files in dist folder
    const distDir = path.resolve(__dirname, '../dist');
    const files = glob.sync(`${distDir}/**/*.entry.js`, { absolute: true, ignore: ['**/*.system.entry.js'] });
    config.entry.push(...files);
    return config;
  },
};

프로젝트의 경로/파일을 약간 변경해야 할 수도 있지만 이것은 저에게 효과적이었습니다.

@DesignByOnyx 또는 @Edd-

@Edd-Stricland의 사본을 6.0.0-베타로 합리적으로 성공적으로 옮겼습니다. 그러나 변경 사항(예: readme.md)을 발견할 때 항상 모든 것을 다시 작성하지는 않는다는 것을 알았습니다.

공개적으로 사용 가능한 @paulpelton입니까?

지금입니다, 스스로를 도와주세요 :-)

나는 Edd의 프로젝트를 포크했습니다 . @Edd-Srickland, PR을 하면 될까요? 좋은 검토가 필요합니다. 나는 이것에 전문가가 아닙니다.

패키지를 충돌하고 구성을 새 형식으로 리팩토링했습니다. 타이핑을 추가하고 tsconfig에서 참조하여 스텐실 추가 정보를 가져오는 스토리를 얻고 '메모'를 '문서'로 번역하는 구성을 추가해야 했습니다.

위시리스트:

• 글쎄요, 통합이 스텐실 구성 요소에서 기본 스토리를 생성하는 것을 보고 싶습니다. 이상적으로는 mdx와 CSF 모두입니다.
• 저는 Storybook HTML에서 Storybook Webcomponent 방식으로 전환하고 싶지만 그렇게 하는 이점이 있는지 확실하지 않습니다. 오히려 더 자연스럽게 느껴집니다.
• 스텐실 문서가 '통해' 메모를 사용하는 대신 새 애드온 문서로 더 자연스럽게 가져오기를 바랍니다.
• 이 모든 것이 사전 설정을 통해 :-)

@paulpelton 내게 필요한 것이 있습니까?

@ndelangen 잘 모르겠습니다. 당신이 모았을 수도 있지만, 저는 Stencil과 Storybook 모두에 매우 익숙하지 않기 때문에 다양한 문제 토론, Google 등에서 끌어올 수 있는 것을 함께 뭉쳤습니다.

나는 스타터 리포지토리에도 가 보았고 큰 영감을 받았지만 이 문제에 대한 모든 노력을 기울였습니다(모두 감사합니다!).

https://github.com/elwynelwyn/stencilbook-ding

@storybook/web-components 를 사용하여 필수 애드온(예: 컨트롤, 작업)과 함께 작업합니다. 이 단계에서 모든 것의 최신 버전..

스텐실 개발 서버와 스토리북 미리보기 프레임 간의 추가 통합(따라서 스텐실 오류 오버레이가 스토리북에 인라인으로 표시됩니다 - 더 나은 DX!)(디에 대해서는 ./storybook/preview-body.html 및 ./src/index.html ).

~Stencil devserver를 start-storybook 로 매시하여 단일 명령을 실행하면 스텐실이 뒤에서 회전합니다.~
편집: concurrently + wait-on 단순화 - 스텐실이 회전할 때까지 기다린 다음 스토리북으로 진행

스텐실 구성 요소 또는 스토리북 스토리에 대한 코드 변경은 미리보기 프레임(전체 스토리북 앱이 아님)을 다시 로드합니다. 적절한 HMR은 아니지만 개발하기에 상당히 좋습니다!

멋진. 링크가 작동하지 않습니다.

앗, repo가 ​​공개되었습니다 ^^

여기에서 stencil v2 및 @storybook/web-components v6을 사용하여 상용구 저장소를 만들었습니다. https://github.com/bjankord/stencil-storybook-boilerplate

https://github.com/miriamgonp/stencil-web-components-boilerplate의 repo도 Storybook/Stencil discord 채널에서

이 두 repos는 멋지게 보입니다. 그것들이 하나로 통합된다면 좋은 추가 사항이 될 것입니다. 그리고 누군가가 이 두 저장소를 기반으로 한

나는 적절한 hmr 솔루션을 얻었습니다 ;) 곧 오고 있습니다!

나는 적절한 hmr 솔루션을 얻었습니다 ;) 곧 오고 있습니다!

여기있어!
Stencil 2+ & Storybook 6+ (이전 스텐실 버전도 작동해야 합니다 ;))
https://github.com/dutscher/stencil-storybook
재미와 건배

편집: gh-pages의 스토리북 포함 https://dutscher.github.io/stencil-storybook/index.html

이것을 지난 주에 우리 프로젝트로 바꿨습니다. 그리고 우리와 관련이 없는 비트(Bootstrap, scss, 반음계 등)를 제거하고 몇 가지 사소한 사항(예: package.json 이름이 @에 있기 때문에 가져온 모든 곳에서 작동하지 않음)을 수정한 후 myorg/my-proj 형식) 정말 잘 작동하고 있습니다.

이제 하루 정도 사용했는데 HMR이 우수합니다!

@elwynelwyn 스토리북 쪽에서 우리가 해야 할 일은 무엇이라고 생각하세요?

@ndelangen 중요한 사항은 다음과 같습니다.

1. 프록시 https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. main.js를 통한 스텐실 생산 주입 https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. dev 및 prod를 위한 간단하고 최소한의 npm 스크립트 https://github.com/dutscher/stencil-storybook/blob/master/package.json

건배