Duplique para # 1870 e # 3423. Vamos continuar uma discussão lá

Nova construção inicial para o estêncil atual e SB 5 a ser criada

@ Edd-Strickland deseja trabalhar em uma versão de suporte do stencl 🎉

Eu atualizei o iniciador de polímero com estêncil para a versão mais recente do SB. Preciso de ajuda para remover o polímero e adicionar o compilador de estêncil agora

Oi,

@ Edd-Strickland apenas para informação, implementei o Stencil dentro do Storybook como você fez no seu iniciador, neste projeto: https://github.com/vogloblinsky/nutrition-web-components

Eu usei o HTML inicial do Storybook.

Por enquanto, com Storybook & Stencil, eu só tinha que:

• adicione um cabeçalho personalizado apontando para cada arquivo JavaScript raiz gerado pelo Stencil
• adicionar arquivos estáticos gerados pelo Stencil no Storybook

O principal problema, eu acho, é o uso do Webpack do Storybook para lidar com arquivos JavaScript importados dentro de uma história. O fluxo de trabalho ideal é importar apenas o arquivo JS do Web Component.

Sim, isso é o que foi feito anteriormente, mas com a versão de polímero, no entanto, o que isso significa é que, importando como implementações W / C estáticas simples, você precisa atualizar cada vez em sua história, o que parece limitante.

Oi pessoal Eu criei um invólucro que pode ser instalado em um projeto do tipo estêncil component . Espero que ajude. https://github.com/nisheed2440/stencil-storybook-wrapper

parece muito bom vou testar na segunda-feira. Bom trabalho :)

Isso se tornará uma parte oficial do Storybook? Eu tenho uma necessidade desesperada disso!

@otw Estamos tentando, você poderia nos ajudar?

@ndelangen Eu ficaria feliz em testar coisas e fornecer feedback / relatórios de bugs.

Isso funcionaria com LitElement (e componentes da web em geral) ou apenas Stencil?

@ nisheed2440 seu invólucro parece promissor, vou testar isso em breve! Mas pode ser ótimo ter uma integração "nativa" documentada pelo Storybook 👌

@ nisheed2440 Tenho estado muito ocupado (desculpe a todos), mas tive uma janela muito pequena hoje para testar uma versão muito simples deste localmente e é realmente bom. funciona muito bem.

passarei algum tempo na próxima semana tentando incorporá-lo a um projeto existente para ver como isso pode funcionar para usuários / projetos de stencil existentes.

Eu testei esta manhã e funciona muito bem também! GJ é muito fácil de configurar. Eu instalei e testei alguns complementos:

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

Tudo funciona bem, apenas encontrei um problema com botões de addon https://github.com/storybooks/storybook/issues/5017 Mas há uma solução alternativa e isso deve ser corrigido em breve, eu acho.

Passei as últimas 2 semanas jogando com StencilJS e Storybook e fiz uma transmissão ao vivo onde falei sobre minha solução. Acho que há uma maneira muito melhor, mas consegui fazer o HMR e a maioria dos plug-ins funcionarem com poucos problemas. Adoraria qualquer feedback que vocês tenham sobre como melhorar ou importar os carregadores do pacote de estêncil de distribuição.

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

E aqui está o repo! ^ _ ^
https://github.com/MadnessLabs/enjin-components

@ nisheed2440 Olá, estou usando uma abordagem muito semelhante à sua e tudo está funcionando, espere cromático. você conseguiu fazer um trabalho cromático com o estêncil / livro de histórias?
quando corro, ele descobre todas as minhas histórias, mas todas as imagens estão vazias. provavelmente está faltando o estêncil ao tentar renderizar a captura de tela do componente no servidor cromático

@ nisheed2440 Muito obrigado por este grande esforço. Espero que isso dê à equipe aqui uma vantagem na direção certa. Stencil e Storybooks são ideais um para o outro.

Olá a todos! Parece que não tem havido muito nesta edição ultimamente. Se ainda houver perguntas, comentários ou bugs, sinta-se à vontade para continuar a discussão. Infelizmente, não temos tempo para abordar todos os problemas. Estamos sempre abertos a contribuições, portanto, envie-nos uma solicitação de pull se quiser ajudar. Os problemas inativos serão fechados após 30 dias. Obrigado!

Alguém quer pegar isso?

Minha equipe está usando StencilJS + Storybook para nossa biblioteca de componentes comuns e eu adoraria contribuir. Talvez alguns de nós possamos colocar essa coisa de volta nos trilhos ...

Parece que há muito interesse, por exemplo, https://twitter.com/dboskovic/status/1120336958008348672

Uma vitória fácil seria publicar um pacote @storybook/preset-stencil que empacota a configuração de @popcorn245 em uma predefinição de livro de histórias . Eu ainda preciso terminar os documentos para isso, mas estou usando-o para o próximo lançamento do Storybook Docs e é simples e como a maioria das configurações do SB funcionará no futuro.

Eu ficaria feliz em orientar quem quiser aprender isso.

Ei @shilman , entender isso e implementar o Stencil com Storybook. Esse segmento tem algumas coisas boas que eu encontrei, mas existem muitos outros pequenos bugs, como ter que retornar uma string do elemento para usar os botões.

Uma implementação muito melhor seria pegar carona no compilador Stencil e permitir o uso de JSX como os componentes React, mas isso é MHO.

Além disso, o Stencil One está prestes a cair com algumas mudanças enormes, então pode ser bom colocar alguns curiosos neste Changelog para ter certeza de que quem está trabalhando nisso está ciente do que está acontecendo no pipeline.

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

Este tópico foi imensamente útil para mim, especialmente a configuração de @popcorn245. Pessoalmente, eu estava usando @stencil/state-tunnel , que quebrou essa configuração. Felizmente, consegui fazê-lo funcionar com alguns pequenos ajustes ~ hacks ~ executando:

npm i -D [email protected]

E adicionando isso a .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;
};

Começar a experimentar isso também e (como mencionado em outro lugar) usar concurrently parece funcionar muito bem para mim (por enquanto). Criei um projeto de início rápido que inclui tudo que você precisa para começar a trabalhar tanto com o estêncil quanto com o livro de histórias. Já está usando a versão mais recente do estêncil.

Confira aqui: stencil-storybook-starter

@ fvaldes33 Legal! Marcou com estrela. Na verdade, acabei de atualizar para o Stencil One beta e minha configuração parece semelhante - eu basicamente poderia usar a configuração do webpack de estoque inteiramente.

A única diferença para mim foi usar stencil build --watch (prod, não dev) porque os tempos de compilação são muito rápidos e é mais fácil consumir a versão prod no Stencil (especialmente com estilos globais e outras importações).

@ fvaldes33 como você pode fazer referência a build / components.js em seu preview-head.html assim? Tenho que fornecer o caminho completo, por exemplo, http: // localhost : 3333 / build / components.js. Mas eu gostaria de não ter que fazer isso.

(Não estou usando o seu iniciador, mas estou usando o iniciador do componente estêncil com uma nova instalação de livro de histórias / html)

EDITAR:
percebi que estava iniciando o livro de histórias na porta 6006 em vez de na pasta www. problema resolvido!

Parece que muitos de nós temos soluções semelhantes por aí (incluindo eu https://github.com/jagreehal/stencil-boilerplate), mas eu realmente gostaria de atualizações quentes / dinâmicas quando edito um componente Stencil. Atualmente, tenho que atualizar manualmente o navegador para recarregar o Storybook.

Existe uma lista com marcadores de requisitos para completar isso? Eu ficaria feliz em contribuir se soubesse o que precisa ser construído.

Qual é o estado atual? Podemos contribuir? Eu adoraria ver isso!

Eu sugeri contribuir com uma predefinição acima.

• As predefinições são documentadas aqui: https://storybook.js.org/docs/presets/introduction/
• Há um repositório para predefinições da comunidade aqui: https://github.com/storybookjs/presets

Se alguém quiser montar uma predefinição com base nos padrões acima, eu ficaria feliz em ajudar no livro de histórias. Não estou familiarizado com o lado do Stencil.

Acabei de postar meu projeto para quem quiser. Aqui estão os recursos:

• geração automática de histórias
  
  
  
  • geração automática de botões para todos os @Props em seus componentes
  
  
  • capacidade de personalizar quais botões são usados ​​para cada prop (embora o código faça um bom trabalho de adivinhação de strings, números, booleanos, objetos, datas e cores).
  
  
  • capacidade de definir vários estados que são renderizados em uma única página, cada um com um título, descrição e fragmento de código copiável (tipo de implementação de capítulos leves)
  
  
  • capacidade de definir notas para cada componente (normalmente você quer o leia-me gerado)
  
  
• reconstrução / recarregamento ao vivo de componentes de estêncil (ainda é um pouco instável - às vezes você precisa atualizar o navegador)
• vem com o add-on viewport

Deixe-me saber o que você pensa: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx Isso parece ótimo. Tweet sobre isso e mencione @storybookjs e eu irei RT da conta do livro de histórias. E se você quiser escrever um post sobre isso, ficarei feliz em trabalhar com você para publicá-lo. Acho que há uma demanda muito grande aqui.

Trabalho incrível

OK, eu twittei (não twitto muito). Além disso, não tenho um blog: /, mas fico feliz em fazer algo se alguém quiser publicá-lo.

Enquanto o projeto funciona, eu o montei com pressa e realmente não facilitei a personalização. Parte do código lá é realmente frágil, pois estou tendo que carregar e mesclar vários arquivos para renderizar cada componente individual. Espero algum feedback antes de gastar algum tempo para torná-lo mais consumível.

Estou curioso para ver como seria uma predefinição. A maior coisa que seria legal é uma predefinição JSX que não é reagir. Isso permitiria uma renderização um pouco mais fácil e geração de template além da variedade storybook-html, e não tem muito a ver com estêncil. Vários addons também precisariam ser atualizados para tornar isso utilizável, e não tenho certeza se sou o melhor para coordenar esse esforço. De qualquer forma, deixe-me saber o que posso fazer para ajudar.

@DesignByOnyx Alguma chance de você https://discordapp.com/invite/UUt2PJb

Adoraria conversar mais sobre como divulgar esse trabalho no blog do Storybook, bem como promover na comunidade de stencil.

Tenho jogado com @storybook/html para Stencil e a experiência "simplesmente funciona". Essencialmente, você faz o seguinte:

1. Use concurrently para iniciar o servidor do Storybook e stencil build --watch "em paralelo"
2. Comece storybook com a bandeira -s dist , de modo que seu Stencil dist seja servido como arquivos estáticos.

3. Configure .storybook/preview-head.html para incluir uma tag de script como:

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

E é isso! O suporte out-of-the-box html funciona para todas as suas necessidades de componentes da web.

O que eu gostaria de ver é algo como @storybook/stencil que tem a mesma experiência (e código) que o pacote html no lado da autoria da história, mas

1. Resumos executando o processo de construção do Stencil como parte do Storybook, de modo que a configuração de concurrently não é necessária
2. Adiciona aquelas script tags para você
3. Liga a atualização automática quando os componentes do Stencil são reconstruídos

Existe interesse em algo assim? Estou no processo de vender minha empresa no Stencil e no Storybook, e assumindo que ganhe força, terei "tempo de trabalho" para fazer aquela história (desculpem o trocadilho) muito legal em torno do Storybook + Stencil brincando juntos.

O trabalho que @DesignByOnyx fez é realmente ótimo, mas você meio que tem que _iniciar_ seus componentes Stencil com aquele kit e ignorar a documentação "normal" para Stencil. Se o Storybook pode fornecer um pacote que pode ser colocado em cima do kit inicial do Stencil "normal", você pode adicionar facilmente uma configuração do Storybook a um conjunto existente de componentes do Stencil.

Obrigado pelo ótimo resumo @alexlafroscia. Acho que sua proposta faz muito sentido. O HMR não entra em ação automaticamente quando o Stencil é reconstruído? Se sim, alguma ideia do porque não?

@ igor-dv É possível adicionar preview-head.html em uma predefinição?

@Hypnosphi Talvez este seja um exemplo interessante para seus esforços de multi-framework. Nesse caso, nenhum decorador é necessário (aparentemente), mas um compilador inteiro é necessário.

@alexlafroscia como é um exemplo de história no seu caso?

Na empresa onde trabalho, brincamos com os pacotes Storybook HTML e StencilJS há algum tempo. Eu ficaria feliz em contribuir!

@alexlafroscia Idéias muito boas, de fato seria bom ter um suporte completo para este compilador. Aqui estão algumas outras idéias:

• Use os recursos StencilJS JSX (baseados no Preact no momento) para escrever histórias de uma forma mais sustentável. Usar JS simples ou mesmo literais de modelo pode ser complicado ...
• Tenha um complemento Smart Knobs para Web Components. @DesignByOnyx forneceu uma boa base para isso.

Este artigo cobre o roteiro contínuo em StencilJS: Roteiro do Stencil no outono de 2019 . Notavelmente:

APIs Public Compiler

Outra área em que também estamos nos concentrando é garantir que o compilador funcione em um navegador e seja usado por outras ferramentas. Já trabalhamos com algumas equipes incríveis, como Stackblitz, CodeSandbox e WebComponents.dev. Nos níveis mais baixos, o compilador já funciona sem rodar em um ambiente NodeJS, então tecnicamente este não é um grande refatorador, mas mais, apenas expondo as APIs corretas.

Também estamos vendo muitas áreas de melhoria para garantir que o compilador seja fácil de consumir por outras ferramentas NodeJS, incluindo Rollup, Parcel, WebPack e Bazel. Se você é o mantenedor de qualquer ferramenta, seja uma ferramenta online ou um ambiente NodeJS, e deseja implementar o compilador Stencil, sinta-se à vontade para entrar em contato e ficaremos felizes em ajudar!

Pode ser útil!

O HMR não entra em ação automaticamente quando o Stencil é reconstruído? Se sim, alguma ideia do porque não?

@shilman Não funciona porque não há nenhuma conexão "real", na configuração que tenho, entre o Storybook e o Stencil. É apenas uma tag <script> simples apontando para os ativos construídos.

como é um exemplo de história no seu caso?

@Hypnosphi Eles se parecem com isto (uma história para o my-component padrão que o Stencil gera no pacote inicial que eles criam quando você 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>
  `);

Use os recursos StencilJS JSX (baseados no Preact no momento) para escrever histórias de uma forma mais sustentável. Usar JS simples ou mesmo literais de modelo pode ser complicado ...

@darondel Concordo totalmente com as preocupações em torno da experiência do desenvolvedor de não ter JSX nos arquivos de autoria de história. Eu usei essa abordagem no passado, antes de @storybook/html estar disponível, e usei a experiência React, que estava OK.

Parte de querer manter as coisas o mais próximo possível da experiência "padrão" html é que as histórias atuem como documentação sobre como realmente usá-las a partir da perspectiva HTML - caso contrário, elas estão vinculadas a algo como Preact, que pelo menos na minha organização, não está sendo usado em nenhum outro lugar (somos principalmente uma loja Ember.js).

Você mencionou que as tags de modelo não seriam uma ótima experiência, mas acho que algo como htm poderia ser uma boa opção. Também mantém o processo de construção simples e agradável, porque não há uma etapa de construção necessária, mas pode facilitar a interação com algo como botões giratórios.

Eu também estava pensando que tentar integrar com algo como o próximo DocsPage pode ser interessante! Aposto que parte do trabalho que já foi feito por @DesignByOnyx pode ser útil aqui, para que haja um caminho para ler os "metadados" de um componente Stencil para gerar as informações de documentação automaticamente. Provavelmente não é uma preocupação "v1", mas algo que seria muito legal de ver para uma "v1.1"! Eu realmente gosto da sua ideia de fazer algo como aquele complemento de botões automáticos também, que seria muito útil!

Com o DocsPages lançado hoje com o Storybook 5.2, fiz algumas pesquisas para saber se seria possível obter as informações sobre adereços e coisas do tipo do Stencil e renderizadas no Storybook. Eu acho que deveria ser possível, mas definitivamente destaca como seria útil ter um addon ou preset feito sob medida para usar Storybook com Stencil para armazenar um monte de "cola" necessária para isso.

Vou mexer um pouco mais nas coisas esta semana e ver se consigo montar alguma coisa.

@alexlafroscia adoraria padronizar como diferentes estruturas comunicam esses dados. Vi algo interessante do Jetbrains (web_types? Cc @elevatebart ) e também @atanasster também está trabalhando nesta área para armazenar em cache os tipos de prop em arquivos JSON para desempenho. Acho que devemos unificar tudo isso em 6.0

Não estou familiarizado com o trabalho do Jetbrains - vou ter que verificar isso! Se você tiver alguma informação específica que possa ser útil para revisar, eu adoraria se você pudesse enviá-la do meu jeito!

No caso do Stencil, acho que a "melhor aposta" será fazer com que o processo de construção do Stencil produza os documentos JSON em um local conhecido por um complemento Stencil Storybook ou que seja configurável. Esse objeto contém todas as informações sobre props esperados, eventos emitidos e até mesmo o conteúdo do arquivo readme para cada componente (sem a documentação de props gerada automaticamente). Acho que poderíamos construir uma história realmente atraente para preencher o Storybook DocsPage com as informações desse arquivo JSON.

{
  "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": []
    }
  ]
}

É uma espécie de hack (escrevi a saída JSON em dist/output.json e usei fetch para pegar o arquivo), mas consegui obter a renderização DocsPage para um componente Storybook apenas substituindo os adereços de slot que o componente DocsPage pode receber.

A mesa de adereços não é perfeita, mas é muito boa; a saída do Stencil fornece todos os adereços que a mesa espera e mais alguns. O que quer que esteja em readme.md para o componente será renderizado na parte superior do arquivo.

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
  );
};

Atualização: Indo um passo adiante, eu defini um DocsPage personalizado inteiro (em vez de apenas substituir os slots) para obter uma segunda tabela com a documentação de qualquer estilo personalizado.

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
  );
};

A página personalizada também corrige o fato de que o padrão de cada história é 500px de altura, o que é muuuito alto 😅

@alexlafroscia Este é um trabalho incrível, tremendo!

Para sua informação, vamos generalizar as coisas da tabela de prop em 5.3. Especificamente, frameworks como o Vue têm o conceito de slots e eventos, portanto, eles devem ser divididos em suas próprias tabelas. Talvez seus estilos funcionem usando o mesmo mecanismo. https://github.com/storybookjs/storybook/issues/8123

O projeto Jetbrains a que me referia é este (cc @piotrtomiak): https://github.com/JetBrains/web-types

Não olhei para ele em detalhes e não sei se é o certo para nós. No entanto, se ele atender aos nossos casos de uso e não adicionar muito material extra, prefiro usar um padrão existente em vez de inventar o nosso próprio.

@shilman Obrigado por olhar para o nosso esforço (JetBrains) em trazer algum padrão para troca de informações de metadados para bibliotecas de componentes da web! Nosso esforço inicial era simplesmente fornecer um bom autocompletar de código para componentes Vue em arquivos HTML, mas descobrimos que há muito mais a ser alcançado com esse padrão, então o projetamos tendo em mente um formato genérico de troca de informações (IDEs, ferramentas, documentação). Até agora, nosso foco estava na estrutura Vue, no entanto, sempre tivemos em mente o suporte para componentes da Web ou outras estruturas. O padrão web-types é muito novo, mas já ouvimos alguns comentários positivos da comunidade e dos usuários do Vue. Estou promovendo ativamente a especificação na comunidade Vue, mas é ótimo obter algum interesse de outra comunidade!

Acho que pode haver algumas coisas faltando no esquema web-types JSON, que seriam específicas para sua estrutura e podem ser adicionadas à especificação. Itens específicos de Vue são, por exemplo, prefixados com vue . Também está faltando uma seção inteira para documentar o suporte a CSS, que poderíamos trabalhar para incluir. Portanto, se você acha que vale a pena dar a web-types uma chance, sinta-se à vontade para enviar problemas ou criar PRs para recursos ausentes.

O efeito colateral de documentar seus componentes no formato web-types será um bom autocompletar de código quando os desenvolvedores incluirem sua biblioteca em seus projetos. Estamos planejando implementar esse suporte genérico baseado em recursos comuns de web-types para todas as estruturas em um futuro muito próximo. Tenho certeza de que, com uma maior aceitação do formato pela comunidade, outros IDEs seguirão com suporte para o formato, o que beneficiaria a todos :)

@alexlafroscia trabalho fantástico! A integração do Stencil e do Storybook (junto com https://github.com/storybookjs/storybook/issues/7644) está boa

Obrigado por criar um link para esse problema! Eu originalmente segui um caminho semelhante (tentando de alguma forma usar os arquivos README existentes e puxá-los diretamente para a DocsPage), mas no final achei mais fácil apenas usar os dados que o Stencil coloca no arquivo JSON do docs, uma vez que _não_ inclui a tabela de adereços e tudo (visto que os dados estão em outro lugar no arquivo JSON e os dados estruturados são perfeitos para criar uma tabela personalizada).

@alexlafroscia Obrigado por compartilhar suas descobertas. Posso perguntar como posso depurar CustomDocsPage ?

Tentei adicioná-lo com addParameters e não parece estar usando o personalizado, mas o padrão.

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>

O próprio WC é carregado na página de documentos do livro de histórias, mesmo sem usar o CustomDocsPage .
Existe uma maneira de depurar o componente? Tentei adicionar alguns logs, mas não consigo ver nenhum.

Desde já, obrigado.

Também encontrei esse problema - tive que substituir o componente DocsPage no nível de "componente"

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

é possível fazer @storybook/html trabalhar com jsx? tornaria muito mais fácil escrever minhas histórias para componentes de estêncil. obterá digitação, completará automaticamente e não precisará usar document.createElement ou strings de modelo grandes. tentei enganar o texto datilografado com // @jsx no topo usando o pacote react, mas não funcionou.

@vidarc qual foi o erro quando você fez isso? Você tem uma configuração de babel personalizada ?

não há muita personalização. algumas coisas adicionadas ao webpack. o primeiro texto datilografado reclama sobre Cannot find name 'h' . meu tsconfig tem jsx = react e jsxFactory = h. Posso fazer com que esses avisos desapareçam usando a configuração // <strong i="6">@jsx</strong> h pragma na parte superior, mas recebo um erro de livro de histórias por não retornar um nó DOM ou string.

vou experimentar: https://github.com/developit/vhtml próximo

EDIT: funciona muito bem com jsx. não consigo descobrir como fazê-lo funcionar com o texto datilografado: /

@vidarc se h significa hiperescrito, ele retorna um objeto personalizado que não é string nem elemento DOM

vhtml parece o caminho a percorrer

Para sua informação, temos um PR para um aplicativo web-components : https://github.com/storybookjs/storybook/pull/8400

Alguém pode comentar como isso se cruza com esse problema? @vidarc @DesignByOnyx @ Edd-Strickland @alexlafroscia @daKmoR

Eu não testei o nº 8400 ainda, mas antes de testar consegui fazer o Stencil "ativo" funcionar por meio de:

1. Execute start-storybook -s ./www em uma janela.
2. Execute stencil build --dev --watch em outro.
3. Atualize .storybook/config.ts para recarregar a janela no 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();
  });
}

É um pouco confuso.

O motivo pelo qual não consegui investigar alternativas como https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js é que import "./my-component" falhou desde import { Component } from "@stencil/core" não é uma exportação válida e, na verdade, eliminada como parte do processo de compilação:

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

Alguém realmente tem uma implementação / configuração de estêncil e livro de histórias que funcione no IE11? Tentei cada implementação mencionada neste tópico sem sorte.
sempre é executado em rejeição de promessa não tratada TypeError: Esquema inválido com versões de estêncil 1.2.4 -> 1.7.4.

@shilman , consegui obter componentes de estêncil no aplicativo web-components mas me parece que ele está apenas lendo-os da mesma forma que todo mundo está fazendo com html one, e o HMR não ' t reaja às atualizações dos próprios componentes do estêncil.

Seria realmente melhor se houvesse uma maneira de fazer com que o compilador de estêncil fosse integrado à sequência de execução do livro de histórias, como é para React, Angular, etc.

Vou continuar tentando maneiras de colocar os componentes do Stencil "ativos", mas o problema arquitetônico que tenho enfrentado é que, a menos que esteja enganado, _componentes do Stencil exigem uma etapa de compilação personalizada para funcionar_ ( stencil build --dev --watch ), e não há um equivalente em tempo de execução.

Tentei fazer import { MyComponent} from "./MyComponent" , mas falhou porque @Component não foi realmente exportado de @stencil/core . Na verdade, ele é removido como parte da etapa de construção:

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

Sabendo disso, meu próximo teste é manter a etapa de construção com associações do React (https://github.com/ionic-team/stencil-ds-plugins), mas, em vez disso, substituir a lógica HMR para usar histórias do React (em vez de HTML) .

Esperançosamente, isso permitirá que a UX do livro de histórias corresponda à do React, deixando o Stencil apenas para a implementação do componente.

Não acho que seja o fim do mundo exigir que stencil build seja executado em paralelo no modo de desenvolvimento:

• Poderíamos instruir o usuário sobre como executar isso simultaneamente em seu package.json
• Uma predefinição de estêncil pode gerar este processo na inicialização e, em seguida, eliminá-lo no desligamento se quisermos ocultar isso do usuário

Uma solução com menos peças móveis é preferível, mas não vamos deixar que o bom seja inimigo do ótimo aqui. AFAIK por enquanto, todo mundo ainda está desenvolvendo seu próprio suporte de estêncil agora, e há uma boa oportunidade de ajudar a simplificar as coisas para muitas pessoas aqui ...

Usar simultaneamente é o que está funcionando para mim atualmente.

Certamente, existem etapas incrementais.

A principal coisa que me chamou a atenção como usuário foi "por que" o estêncil não funcionava da mesma maneira
como minhas histórias de reação, que não podem ser resolvidas sem estêncil específico
alterar.

Na quinta-feira, 31 de outubro de 2019, às 17h02 Michael Shilman [email protected]
escreveu:

Não acho que seja o fim do mundo exigir que a construção de estêncil seja
executando em paralelo no modo dev:

• Poderíamos instruir o usuário sobre como executar isso simultaneamente
  https://www.npmjs.com/package/concurrently em seu package.json
• Uma predefinição de estêncil pode gerar esse processo na inicialização e, em seguida, matar
  no desligamento se quiséssemos esconder isso do usuário

Uma solução com menos peças móveis é preferível, mas não vamos deixar bem
seja o inimigo de grande aqui. AFAIK por enquanto, todo mundo ainda está rolando seus
próprio suporte de estêncil agora, e há uma boa oportunidade de ajudar
simplificar as coisas para muita gente aqui ...

-
Você está recebendo isso porque comentou.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECZTMEQ#issuecomment-548615698 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

uma outra abordagem para isso seria separar claramente a IU (livro de histórias) da Visualização (estêncil). Com o livro de histórias autônomo, isso já deve ser possível.
Dessa forma, você pode até mesmo pré-construir o livro de histórias - o que significaria tempos de inicialização mais rápidos.

E então você apenas usaria a construção de estêncil durante o desenvolvimento (mas ainda usando a interface de usuário de storybooks). O que significa que você obterá todas as vantagens que o servidor de desenvolvimento de estêncil suporta, sem a necessidade de pensar sobre a interoperabilidade com a configuração do webpack de storybooks.

Já investigamos isso usando es-dev-server para alimentar a visualização de web-components . Nós meio que temos um POC ... mas ainda existem algumas arestas.
No entanto, presumo que a mesma abordagem deva funcionar para o estêncil também.

Se alguém tiver alguma dúvida ou estiver interessado em investigar isso para estêncil ou ajudar a fazer um projeto de referência usando es-dev-server , tenho certeza de que @LarsDenBakker ficará feliz em compartilhar mais alguns detalhes 🤗

PS: tudo isso só é possível porque o livro de histórias tem essa configuração incrível de iframe com mensagens de canal para manter a interface do usuário separada da visualização 🤗

Olá a todos

Depois de algum tempo e muito mexendo nisso, é meu repositório para uma implementação de livro de histórias integrado de estêncil https://github.com/Edd-Strickland/stencilbook.

Fico feliz em discutir mais a fundo, espero que a maioria das coisas sejam óbvias no leia-me e ao olhar para o package.json para os scripts.

Isso é construído usando o componente inicial do estêncil vanilla e a implementação HTML do livro de histórias vanilla.

Por favor, olhe e reveja ...

StencilBook - Um Stencil Storybook Starter

Este é um projeto inicial para construir um Web Component autônomo usando Stencil e Storybook.

Estêncil

Stencil é um compilador para criar aplicativos da web rápidos usando Web Components.

O Stencil combina os melhores conceitos das estruturas de front-end mais populares em uma ferramenta de tempo de compilação, em vez de uma ferramenta de tempo de execução. O Stencil usa TypeScript, JSX, uma pequena camada virtual DOM, vinculação de dados unilateral eficiente, um pipeline de renderização assíncrona (semelhante ao React Fiber) e carregamento lento pronto para uso e gera componentes da Web 100% baseados em padrões que são executados em qualquer navegador que suporte a especificação do Custom Elements v1.

Os componentes do stencil são apenas componentes da Web, portanto, funcionam em qualquer estrutura principal ou sem nenhuma estrutura.

Começando

Clone o repo

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

Mude para o diretório base:

cd stencilbook

Instale os módulos:

npm install

e execute uma compilação para todo o repo:

npm run build:all

Após este livro de histórias de corrida:

npm run storybook

Outros comandos para este repo incluem:

Construir estêncil:

npm run stencil

Inicie o estêncil diretamente no modo servir / assistir; Útil para amenizar os componentes do estêncil diretamente:

npm run stencil:start

Execute um livro de histórias e uma construção de estêncil com assistir e servir, excluindo todas as versões anteriores criadas e serão veiculadas localmente:

npm run storybook:build:all

Distribuir livro de histórias localmente:

npm run storybook:serve

Módulos de reinicialização; Exclui e reinstala módulos de nó:

npm run reset:modules

Para executar os testes de unidade dos componentes, execute:

npm test

Teste

Para executar testes no modo de relógio:

npm run test.watch

Gerar novos componentes

Para gerar novos componentes do Stencil automaticamente:

npm run generate

@ Edd-Strickland Este é um grande começo! Se eu pudesse sugerir que talvez você adicionasse um script de início para uma inicialização mais fácil, fiz "start": "npm-run-all -p stencil:start storybook" e funciona muito bem, exceto que não há recarregamento a quente, pois o livro de histórias parece não reconhecer quando o estêncil foi criado.

... isso a menos que eu esteja faltando alguma coisa?

@shilman parece haver um pacote @ storybook / web-components já em master no alpha, mas não vejo o Stencil referenciado no README.md: https://github.com/storybookjs/storybook/tree/next/ aplicativos / componentes da web

É um esforço paralelo? Se não, você saberia o problema correspondente? Não foi possível encontrar ao pesquisar por web-components em edições. Encontrada a tag app: web-components , mas acaba de ser adicionada ao lançamento e um bug.

@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 +

Não entendo o que é necessário para adicionar suporte de estêncil adequado além do que é fornecido por @storybook/web-components . Tenho certeza que alguém neste tópico sabe!

@ Edd-Strickland Este é um grande começo! Se eu pudesse sugerir que talvez você adicionasse um script de início para uma inicialização mais fácil, fiz "start": "npm-run-all -p stencil:start storybook" e funciona muito bem, exceto que não há recarregamento a quente, pois o livro de histórias parece não reconhecer quando o estêncil foi criado.

... isso a menos que eu esteja faltando alguma coisa?

Hmm Desculpas estive ocupado e em conferências no final da semana passada.

Estou confuso quanto ao problema que você está enfrentando. Você poderia levantá-lo por meio dos problemas de repo em vez de neste tópico para obter mais detalhes.

No entanto, se você fizer uma instalação e, em seguida, executar o comando de livro de histórias, ele iniciará o servidor de observação de acordo. O Stencil irá auto HMR sempre que você alterar, adicionar ou atualizar um componente enquanto ele está sendo executado.

@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 +

Não entendo o que é necessário para adicionar suporte de estêncil adequado além do que é fornecido por @storybook/web-components . Tenho certeza que alguém neste tópico sabe!

depende, os componentes da web funcionam com instâncias vanilla. Não comparei as diferenças entre eles, no entanto, o stencil gera componentes da web, mas é executado como um complier para W / C em vez de ser W / C por padrão.

Portanto, sem dúvida, há necessidade de ambos. Um JS W / C nativo e um para o compilador de estêncil se você quiser fazer um protótipo rápido de W / C com base em estêncil no lado do livro de histórias, como você poderia dizer com um componente de reação ou angular.

Não tive tempo de conversar com @daKmoR para discutir se isso é duplicação ou redundante devido ao seu trabalho, mas por enquanto estamos mantendo esta versão.

Recentemente me deparei com Bulmil devido ao seu trabalho na integração do Stencil com o nuxt-stencil e seus exemplos nuxt .

Eu também descobri que há um suporte decente para contos de fadas. Talvez valha a pena dar uma olhada também. Eu não sei os detalhes internos / como eles diferem do estado atual deste tópico, mas funciona fora da caixa no Bulmil, uma vez que você executa o livro de histórias .

@storybook/addon-actions ainda não parece funcionar ou eu ainda não consegui fazer isso funcionar.

Talvez possamos colocar @Gomah neste tópico e ouvir suas ideias de colaboração para tornar o suporte de estêncil melhor para livros de histórias?

Recentemente me deparei com Bulmil devido ao seu trabalho na integração do Stencil com o nuxt-stencil e seus exemplos nuxt .

Eu também descobri que há um suporte decente para contos de fadas. Talvez valha a pena dar uma olhada também. Eu não sei os detalhes internos / como eles diferem do estado atual deste tópico, mas funciona fora da caixa no Bulmil, uma vez que você executa o livro de histórias .

@storybook/addon-actions ainda não parece funcionar ou eu ainda não consegui fazer isso funcionar.
Certamente dentro do repositório acima, as ações adicionais funcionarão, como um complemento de livro de histórias padrão

E2A: o livro de estêncil, não a variante @Gomah .

O objeto com a integração stencil / SB básico acima era simplesmente criar uma base que permitisse o storybook ao storybook e o stencil para o stencil e, em seguida, ambos se integrassem para permitir que você tivesse componentes da web feitos via stencil colocados em uma moldura de storybook.

Eu coloquei um pico no sprint de minhas equipes nas próximas duas semanas para ver se a versão W / C funcionará tão bem quanto esta iteração e se poderíamos converter nossa versão existente que estamos usando para a versão W / C.

Idealmente, tudo funcionaria para que não houvesse nenhuma fragmentação das variantes W / C, entretanto, ao contrário das implementações nativas W / C, o Stencil não é realmente um framework, é. compilador. Portanto, ainda pode valer a pena ter a distinção para permitir que você escreva componentes JSX que sairão como W / C depois.

Ou pode ser muito simples.

Avisará você assim que concluirmos o pico.

não há muita personalização. algumas coisas adicionadas ao webpack. o primeiro texto datilografado reclama sobre Cannot find name 'h' . meu tsconfig tem jsx = react e jsxFactory = h. Posso fazer com que esses avisos desapareçam usando a configuração // <strong i="7">@jsx</strong> h pragma na parte superior, mas recebo um erro de livro de histórias por não retornar um nó DOM ou string.

vou experimentar: https://github.com/developit/vhtml próximo

EDIT: funciona muito bem com jsx. não consigo descobrir como fazê-lo funcionar com o texto datilografado: /

Olá, @vidarc. Você conseguiu fazer isso funcionar com a sintaxe storiesOf() ? Se sim, ficaria muito curioso para ver como você fez isso. Você tem um exemplo de código ou base de código para compartilhar?

Embora tenhamos o livro de histórias e o estêncil integrados e funcionando bem em nosso projeto, o maior problema que temos é ter que recorrer à criação de histórias com document.createElement() para componentes com objetos adereços etc. Se vhtml puder resolver isso, isso seria incrível!

@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 +

Não entendo o que é necessário para adicionar suporte de estêncil adequado além do que é fornecido por @storybook/web-components . Tenho certeza que alguém neste tópico sabe!

Você está certo e eu concordo. Percebi no README.md as pastas incluídas e vi outras estruturas de componentes da web, mas não o estêncil:

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

Portanto, pensei que o estêncil não foi incluído por um motivo. Mas se isso funcionar bem sem nada adicionado, está perfeitamente bem para mim.

A propósito, esse problema pode ser resolvido agora, já que foi resolvido pela predefinição de componentes da Web mencionada anteriormente?

não há muita personalização. algumas coisas adicionadas ao webpack. o primeiro texto datilografado reclama sobre Cannot find name 'h' . meu tsconfig tem jsx = react e jsxFactory = h. Posso fazer com que esses avisos desapareçam usando a configuração // <strong i="8">@jsx</strong> h pragma na parte superior, mas recebo um erro de livro de histórias por não retornar um nó DOM ou string.
vou experimentar: https://github.com/developit/vhtml próximo
EDIT: funciona muito bem com jsx. não consigo descobrir como fazê-lo funcionar com o texto datilografado: /

Olá, @vidarc. Você conseguiu fazer isso funcionar com a sintaxe storiesOf() ? Se sim, ficaria muito curioso para ver como você fez isso. Você tem um exemplo de código ou base de código para compartilhar?

Embora tenhamos o livro de histórias e o estêncil integrados e funcionando bem em nosso projeto, o maior problema que temos é ter que recorrer à criação de histórias com document.createElement() para componentes com objetos adereços etc. Se vhtml puder resolver isso, isso seria incrível!

você pode torná-las histórias CSF diretamente com as mais recentes e trocar suas histórias para um formato que funcione bem. Além disso, se você importar alguns data factories para preencher os objetos de dados, poderá apenas usá-los para hidratar seus adereços ....

@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 +
Não entendo o que é necessário para adicionar suporte de estêncil adequado além do que é fornecido por @storybook/web-components . Tenho certeza que alguém neste tópico sabe!

Você está certo e eu concordo. Percebi no README.md as pastas incluídas e vi outras estruturas de componentes da web, mas não o estêncil:

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

Portanto, pensei que o estêncil não foi incluído por um motivo. Mas se isso funcionar bem sem nada adicionado, está perfeitamente bem para mim.

A propósito, esse problema pode ser resolvido agora, já que foi resolvido pela predefinição de componentes da Web mencionada anteriormente?

Vou testar se funciona com stencil e irei reportar para que possamos fechar. Não adianta fechar se não funcionar com estêncil ...

...

Olá, @vidarc. Você conseguiu fazer isso funcionar com a sintaxe storiesOf() ? Se sim, ficaria muito curioso para ver como você fez isso. Você tem um exemplo de código ou base de código para compartilhar?
Embora tenhamos o livro de histórias e o estêncil integrados e funcionando bem em nosso projeto, o maior problema que temos é ter que recorrer à criação de histórias com document.createElement() para componentes com objetos adereços etc. Se vhtml puder resolver isso, isso seria incrível!

você pode torná-las histórias CSF diretamente com as mais recentes e trocar suas histórias para um formato que funcione bem. Além disso, se você importar alguns data factories para preencher os objetos de dados, poderá apenas usá-los para hidratar seus adereços ....

Obrigado. Não tinha percebido que o CSF ​​agora é a forma recomendada de escrever histórias. Você conseguiu fazer o addon jsx funcionar com vhtml btw, ou isso não é possível?

...

Olá, @vidarc. Você conseguiu fazer isso funcionar com a sintaxe storiesOf() ? Se sim, ficaria muito curioso para ver como você fez isso. Você tem um exemplo de código ou base de código para compartilhar?
Embora tenhamos o livro de histórias e o estêncil integrados e funcionando bem em nosso projeto, o maior problema que temos é ter que recorrer à criação de histórias com document.createElement() para componentes com objetos adereços etc. Se vhtml puder resolver isso, isso seria incrível!

você pode torná-las histórias CSF diretamente com as mais recentes e trocar suas histórias para um formato que funcione bem. Além disso, se você importar alguns data factories para preencher os objetos de dados, poderá apenas usá-los para hidratar seus adereços ....

Obrigado. Não tinha percebido que o CSF ​​agora é a forma recomendada de escrever histórias. Você conseguiu fazer o addon jsx funcionar com vhtml btw, ou isso não é possível?

Portanto, o JSX é analisado diretamente por meio do compilador de estêncil no shadow dom. Portanto, enquanto estiver usando a integração do compilador no livro de histórias, você escreve seu componente de estêncil padrão e, em seguida, inclui-o na história do CSF ​​e, em seguida, importa em seu data factory para preencher o prop's.

O repositório vanilla com o qual postei faz isso fora da caixa, sem necessidade de plug-ins VHTML ou qualquer outra coisa, sem necessidade nem mesmo de um invólucro que você pode escrever diretamente como estêncil e apenas produzir.

você pode usar a sintaxe storyOf, mas está bloqueado no clássico padrão document.createElement.
Por exemplo, este antigo storysOf Syntax para o nosso ícone

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;
};

não há muita personalização. algumas coisas adicionadas ao webpack. o primeiro texto datilografado reclama sobre Cannot find name 'h' . meu tsconfig tem jsx = react e jsxFactory = h. Posso fazer com que esses avisos desapareçam usando a configuração // <strong i="8">@jsx</strong> h pragma na parte superior, mas recebo um erro de livro de histórias por não retornar um nó DOM ou string.
vou experimentar: https://github.com/developit/vhtml próximo
EDIT: funciona muito bem com jsx. não consigo descobrir como fazê-lo funcionar com o texto datilografado: /

Olá, @vidarc. Você conseguiu fazer isso funcionar com a sintaxe storiesOf() ? Se sim, ficaria muito curioso para ver como você fez isso. Você tem um exemplo de código ou base de código para compartilhar?

Embora tenhamos o livro de histórias e o estêncil integrados e funcionando bem em nosso projeto, o maior problema que temos é ter que recorrer à criação de histórias com document.createElement() para componentes com objetos adereços etc. Se vhtml puder resolver isso, isso seria incrível!

@robaxelsen
Acabei usando apenas @ storybook / react e modificando a configuração do webpack para transformar arquivos MD junto com arquivos MDX. Em seguida, apenas um pequeno código para criar botões com base no estêncil de saída do json doc fornece. Para o código do estêncil, usamos a cópia do livro de histórias de sua CLI e vinculamos esses arquivos no arquivo preview-head.html. Se adapta muito bem aos meus propósitos.

@ Edd-Strickland Muito obrigado pelo exemplo e explicação. Com seu último exemplo, eu ainda acabo tendo que passar atributos programaticamente, como adereços no elemento. Minha esperança era que eu pudesse, com o vhtml ou o compilador de stencil simples, escrever minhas histórias como JSX.

Então, em vez de:

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

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

  return icon;
};

...Eu escreveria:

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

Tanto para facilitar a leitura quanto para criar histórias. Isso não é possível, então? Se for possível, você poderia dar um exemplo rápido?

Também podemos conversar no chat discord se for mais fácil. Eu sou Rob Axelsen#1373 .

EDIT: Para adicionar ao acima, eu também olhei para a documentação CSF ​​e tentei com a sintaxe JSX importando h , mas gera o erro "Esperando um snippet HTML ou nó DOM da história:" História simples " de "Componente". ":

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

Se se trata de escrever histórias que precisam definir propriedades para componentes da web, você pode dar uma olhada em @storybook/web-components . Ele está usando lit-html para criar html declarativamente com propriedades.

Isso deve funcionar ao executar o livro de histórias e o estêncil lado a lado :)

Exceto que o stencil não usa html iluminado. Isso é uma coisa Vue ...

@shilman parece haver um pacote @ storybook / web-components já em master no alpha, mas não vejo o Stencil referenciado no README.md: https://github.com/storybookjs/storybook/tree/next/ aplicativos / componentes da web

Como baixamos e testamos o pacote de componentes da web, o repo vinculado aqui não tem ações de clonagem, etc?

@ Edd-Strickland que é apenas um diretório no monorepo principal do livro de histórias

Exceto que o stencil não usa html iluminado. Isso é uma coisa Vue ...

é um lit thing 🤔

no entanto, essa é a beleza dos componentes da web - não importa qual estêncil usa sob o capô. Você pode usar lit-html ou qualquer outra forma de definir suas histórias. Provavelmente, tudo o que você precisa é uma maneira de escrever "html" com propriedades.

Para lit-html seria assim

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>
  `;
}

Então, se você fosse para o DevTools no Chrome na história, você poderia selecionar o componente iluminado e poderia ler os seguintes detalhes

• título da propriedade, por exemplo, console.log ($ 0.title) // algum título
• atributo power, por exemplo, console.log ($ 0.getAttribute ('power')) // ilimitado

para o componente de estêncil, seria "o mesmo"

• dados de propriedade, por exemplo, console.log ($ 0.data) // [{nome: 'john', idade: 21}, {nome: 'maria', idade: 28}];
• atributo supermodo, por exemplo, console.log ($ 0.hasAttribute ('super-modo')) // verdadeiro

lit-html apenas renderiza o dom ... onde / como os elementos dom são registrados lit-html não sabe / se preocupa - então qual tecnologia é usada para cada componente pode ser completamente diferente ... por exemplo, você pode ter um componente que são lit-element, stencil, vanilla HTMLElement ou pode ser até mesmo um invólucro de componente web para uma aplicação completa de react / vue / angular ... 😱

stencil pode ser um compilador, mas uma vez compilado para o componente web, pode ser usado apenas como dom 🤗

PS: @storybook/web-components usa lit-html

A equipe do Stencil está refatorando o compilador, o que acho que mudará a integração do Stencil / Storybook.

Se alguém for usar o Stencil e o Storybook por meio do React, verifique https://github.com/the-road-to-learn-react/use-custom-element, que permite a passagem de matrizes e objetos. Vou tentar sozinho mais tarde, mas isso pode ajudar algumas pessoas.

Para os interessados, publiquei um iniciador para combinar Storybook / react e Stencil: https://github.com/bbellmyers/stencil-storybook-starter. Observe que, com essa configuração, as alterações nos componentes exigem uma atualização total no navegador, mas as alterações nas histórias não.

Parece que o livro de histórias está desenvolvendo livro de histórias para componentes da web. Eu tentei com stencil e está funcionando muito bem.

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

@ sem4phor você pode compartilhar sua configuração?

Estou recebendo erros sobre lit-html em uma nova instalação de livro de histórias para componentes da web

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 você precisa instalar o 'lit-html', ele está sendo usado para renderizar componentes nos exemplos padrão.

@ Edd-Strickland adicionamos o livro de histórias para componentes da web e no 6.0.0 o livro de histórias para polímero será descontinuado / não será mais atualizado.

Há algo que precisa ser feito para que o livro de histórias para componentes da web funcione para componentes de estêncil?

O livro de histórias de componentes da web pode renderizar componentes de componentes da web do stencil, mas o stencil não pode ser executado no navegador como está e precisa ser compilado. Portanto, ainda precisa de algum tratamento especial, a menos que você compile os componentes do estêncil antes de executar o livro de histórias.

@LarsDenBakker é uma questão de adicionar um plugin / carregador do webpack para fazer o acima funcionar. (Eu imagino que seja desejável fazer o componente de estêncil HMR e compilar dinamicamente)

Sim, embora o próprio estêncil use rollup. Se a etapa de compilação puder ser usada como um projeto separado, talvez você possa transformá-la em um plugin do webpack. Não sei o suficiente sobre os internos para isso.

Stencil não usa Webpack. Em vez disso, ele usa Rollup.

É possível usar o repo que configurei para ter ambos funcionando de acordo e habilitar o HMR equivalente no Stencil com a chamada -watch. Assim, o estêncil recarrega quando os estênceis são atualizados e o Storybook é recarregado quando é atualizado.

Portanto, não há necessidade de construir cada vez, pois isso irá cobrir tudo.

Embora eu não tenha tido tempo recentemente para atualizar o repo com o SB ou Stencil mais recente, este processo ainda funcionará e você pode atualizar o repo com as versões mais recentes.

Obrigado

@ Edd-Strickland adicionamos o livro de histórias para componentes da web e no 6.0.0 o livro de histórias para polímero será descontinuado / não será mais atualizado.

Há algo que precisa ser feito para que o livro de histórias para componentes da web funcione para componentes de estêncil?

sim, ainda não leva em conta o live reload / HMR porque, conforme detalhado acima, as diferenças entre o uso de webpack e o uso de roll up, então, no momento, se você quiser usar a versão SB WC, então é necessário uma construção completa de estêncil para renderizar então, toda a bondade de HMR é perdida no estêncil.

Esta versão é atualmente baseada na versão HTML, não na versão de polímero, então isso não deve impactar no objetivo de longo prazo de retirar essa versão.

@LarsDenBakker é uma questão de adicionar um plugin / carregador do webpack para fazer o acima funcionar. (Eu imagino que seja desejável fazer o componente de estêncil HMR e compilar dinamicamente)

Eu não aconselharia, a versão webpack do Stencil é um caminho de desenvolvimento significativamente mais difícil e aumenta a pegada de dependências sem qualquer necessidade, como mostrado no repo que eu produzi é perfeitamente possível ter stencil rodando no relógio que recompila ao vivo em cada mudança do WC ou da instância SB. Trata-se de configurá-lo para permitir ambos.

Sim, embora o próprio estêncil use rollup. Se a etapa de compilação puder ser usada como um projeto separado, talvez você possa transformá-la em um plugin do webpack. Não sei o suficiente sobre os internos para isso.

Já existe um plugin stencil WP, entretanto esta não é uma dependência suportada ou aprovada pela comunidade.

cc @ jthoms1 @adamdbradley

@dmartinjs você precisa instalar o 'lit-html', ele está sendo usado para renderizar componentes nos exemplos padrão.

@ sem4phor você pode compartilhar sua configuração?

Estou recebendo erros sobre lit-html em uma nova instalação de livro de histórias para componentes da web

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

Algum comentário sobre isso? Estou tendo que instalar essa dependência sozinho. Se for usado por @ storybook / web-components, ele deve ser instalado automaticamente como uma dependência ...?

@LeeBurton não se for uma dependência de pares? (Não tenho certeza se é, se não, talvez devesse) cc @daKmoR

@LeeBurton no momento em que eu estava testando lit-html era uma dependência de pares. É normal que você mesmo tenha que instalar dependências de mesmo nível. https://nodejs.org/es/blog/npm/peer-dependencies/

Pelo que vale a pena, eu tenho o estêncil trabalhando com esta configuração em .storybook/preview.js

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

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

@idmyn Eu tentei isso e enquanto ele compila, qualquer alteração feita em qualquer arquivo src ainda não é carregada no navegador sem um recarregamento manual.

Comecei a trabalhar executando a compilação do Stencil localmente com o relógio habilitado em um script de execução npm enquanto executava start-storybook em paralelo com o pacote npm-run-all .

Eu configurei a configuração do webpack do storybook para assistir os arquivos dist do Stencil usando o seguinte em meu main.js:

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;
  },
};

Você pode ter que mudar um pouco os caminhos / arquivos do seu projeto, mas funcionou para mim.

Apenas pensando, @DesignByOnyx ou @ Edd-Strickland já

Mudei minha cópia de @Edd-Strickland's para 6.0.0-beta com razoável sucesso, embora eu ache que nem sempre reconstrói tudo quando detecta uma alteração (por exemplo, readme.md).

Este @paulfelton está disponível publicamente?

Agora é, sirva-se :-)

Eu bifurquei o projeto de Edd . @Edd-Strickland, devo fazer uma RP? Vai precisar de uma boa revisão, não sou especialista nisso.

Eu alterei os pacotes, refatorou a configuração para o novo formato. Tive que adicionar uma tipificação e referenciá-la no tsconfig para obter a história para importar o readme do estêncil e adicionar uma configuração para traduzir 'notas' em 'documentos'.

Lista de Desejos:

• Bem, eu gostaria que a integração gerasse uma história básica a partir do componente estêncil. Idealmente, tanto mdx quanto CSF.
• Eu gostaria de mudar do Storybook HTML para o sabor de Storybook Webcomponent, embora não tenha certeza se há benefícios em fazer isso. Parece mais natural.
• Eu gostaria que os documentos do stencil importassem mais naturalmente para os novos addon-docs, ao invés de ir 'via' notas.
• Tudo isso por meio de uma predefinição :-)

@paulfelton você precisa de alguma coisa de mim?

@ndelangen, não tenho certeza. Como você deve ter percebido, sou muito novo no Stencil e no Storybook, então apenas juntei o que posso extrair de várias discussões de questões, google, etc.

Eu também tentei um repositório inicial, fortemente inspirado, mas com todos os grandes esforços nesta edição (obrigado a todos!).

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

Usa @storybook/web-components , trabalhando com os complementos essenciais (por exemplo, controles, ações). Versões mais recentes de tudo nesta fase ..

Alguma integração extra entre o servidor de desenvolvimento do Stencil e o quadro de visualização do Storybook (para que a sobreposição de erro do Stencil apareça inline no Storybook - melhor DX!) (Verifique ./storybook/preview-body.html e ./src/index.html para os detalhes).

~ Mashed o Stencil devserver em start-storybook para que você apenas execute um único comando e ele gira o stencil nos bastidores. ~
EDITAR: simplificado com concurrently + wait-on - espere o Stencil girar, então vá em frente com o Storybook

As alterações de código (para componentes do Stencil ou histórias do livro de histórias) recarregarão o quadro de visualização (não o aplicativo de livro de histórias inteiro). Não é um HMR adequado, mas é razoavelmente bom para desenvolver!

Agradável. O link não funciona.

Ops, repo agora é público ^

Eu montei um repositório padrão usando stencil v2 e @ storybook / web-components v6 aqui: https://github.com/bjankord/stencil-storybook-boilerplate

Há também um repositório em https://github.com/miriamgonp/stencil-web-components-boilerplate criado por

Esses dois repositórios parecem ótimos. Se eles fossem consolidados em um, seria uma boa adição. E se alguém estiver disposto a contribuir com um tutorial de Introdução ao Storybook baseado nesses dois repositórios, nós realmente apreciaríamos. Deixe-me saber se alguém está disposto a nos ajudar com isso e eu ficaria feliz em ajudar os membros da comunidade que usam o Stencil.

eu tenho uma solução adequada de hmr;) em breve!

eu tenho uma solução adequada de hmr;) em breve!

aqui está!
Stencil 2+ e Storybook 6+ (a versão antiga do Stencil também deve funcionar;))
https://github.com/dutscher/stencil-storybook
divirta-se e alegre

editar: com storybook em gh-pages https://dutscher.github.io/stencil-storybook/index.html

Troquei isto ^^ em nosso projeto na semana passada e depois de retirar as partes não relevantes para nós (Bootstrap, scss, cromático etc) e consertar algumas coisas menores (por exemplo, o nome do package.json não está funcionando em todos os lugares em que foi importado devido a estar em @ formato myorg / my-proj) está funcionando muito bem.

Estou usando há mais ou menos um dia e o HMR é excelente!

@elwynelwyn: alguma coisa que precisamos fazer no lado do livro de histórias, você acha?

@ndelangen, as coisas importantes são:

1. o proxy https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. a injeção de produção de estêncil via main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. e scripts npm simples e mínimos para dev e prod https://github.com/dutscher/stencil-storybook/blob/master/package.json

Felicidades