Duplique a # 1870 y # 3423. Continuemos una discusión allí

Se creará una nueva compilación inicial para la plantilla actual y SB 5

@ Edd-Strickland quiere trabajar en una versión de soporte de stencl 🎉

He actualizado el iniciador de polímero con plantilla a la última versión de SB. Necesito ayuda para eliminar el polímero y agregar un complemento de plantilla ahora.

Hola,

@ Edd-Strickland solo para información, he implementado Stencil dentro de Storybook como lo hizo en su inicio, en este proyecto: https://github.com/vogloblinsky/nutrition-web-components

He utilizado el iniciador HTML de Storybook.

Por ahora, con Storybook & Stencil, solo tenía que:

• agregue un encabezado personalizado que apunte a cada archivo JavaScript raíz generado por Stencil
• agregar archivos estáticos generados por Stencil en Storybook

Creo que el principal problema es el uso de Webpack por Storybook para manejar archivos JavaScript importados dentro de una historia. El flujo de trabajo ideal es importar solo el archivo JS del componente web.

Sí, esto es lo que he hecho anteriormente, pero con la versión de polímero, sin embargo, lo que esto significa es que al importar como implementaciones de W / C estáticas simples, es necesario actualizar cada vez en su historia, lo que se siente limitante.

Hola a todos, he creado un contenedor que se puede instalar en un proyecto de tipo plantilla component . Espero eso ayude. https://github.com/nisheed2440/stencil-storybook-wrapper

se ve muy bien, lo probaré el lunes. Buen trabajo :)

¿Se convertirá en una parte oficial de Storybook? ¡Tengo una necesidad desesperada de esto!

@otw Lo estamos intentando, ¿podrías ayudarnos?

@ndelangen Me

¿Funcionaría esto con LitElement (y componentes web en general) o solo con Stencil?

@ nisheed2440 su envoltorio parece prometedor, ¡lo

@ nisheed2440 He estado muy ocupado (lo siento a todos) pero hoy he tenido una ventana muy pequeña para probar una versión muy básica de esto localmente y es realmente bueno. funciona muy bien.

Voy a dedicar algo de tiempo a esto la próxima semana tratando de incorporarlo en un proyecto existente para ver cómo podría funcionar para los usuarios / proyectos de esténcil existentes.

¡Lo probé esta mañana y también funciona bastante bien! GJ es realmente fácil de configurar. He instalado y probado algunos complementos:

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

Todo funciona bien, acabo de encontrar un problema con addon-knobs https://github.com/storybooks/storybook/issues/5017 Pero hay una solución y creo que debería solucionarse muy pronto.

Pasé las últimas 2 semanas jugando con StencilJS y Storybook e hice una transmisión en vivo donde cubrí mi solución. Siento que hay una manera mucho mejor, pero pude hacer que HMR y la mayoría de los complementos funcionaran sin problemas. Me encantaría recibir sus comentarios sobre cómo mejorar o importar los cargadores del paquete de plantillas de distribución.

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

¡Y aquí está el repositorio! ^ _ ^
https://github.com/MadnessLabs/enjin-components

@ nisheed2440 Hola, estoy usando un enfoque muy similar al tuyo y todo está funcionando excepto cromático. ¿Pudiste hacer un trabajo cromático con esténcil / libro de cuentos?
cuando corro, descubre todas mis historias, pero todas las capturas de pantalla están vacías. Probablemente le falte la plantilla al intentar renderizar la captura de pantalla del componente en el servidor cromático

@ nisheed2440 Muchas gracias por este gran esfuerzo. Con suerte, esto le dará al equipo aquí una ventaja en la dirección correcta. La plantilla y los libros de cuentos son ideales el uno para el otro.

¡Hola a todos! Parece que últimamente no ha habido mucho en este tema. Si todavía hay preguntas, comentarios o errores, no dude en continuar con la discusión. Desafortunadamente, no tenemos tiempo para abordar todos los problemas. Siempre estamos abiertos a contribuciones, así que envíenos una solicitud de extracción si desea ayudar. Los problemas inactivos se cerrarán después de 30 días. ¡Gracias!

¿Alguien quiere recoger esto?

Mi equipo está usando StencilJS + Storybook para nuestra biblioteca de componentes comunes y me encantaría contribuir. Tal vez algunos de nosotros podamos volver a encarrilar esto ...

Parece que hay mucho interés, por ejemplo, https://twitter.com/dboskovic/status/1120336958008348672

Una victoria fácil sería publicar un paquete @storybook/preset-stencil que empaqueta la configuración de @ popcorn245 en un preset de libro de cuentos . Todavía necesito terminar los documentos para eso, pero lo estoy usando para el próximo lanzamiento de Storybook Docs y es sencillo y cómo funcionará la mayoría de las configuraciones de SB en el futuro.

Estaría feliz de guiar a cualquiera que quiera aprenderlo.

Hola @shilman , emocionado de que tanta gente esté

Una implementación mucho mejor se aprovecharía del compilador Stencil y permitiría el uso de JSX como con los componentes de React, pero eso es MHO.

Además, Stencil One está a punto de lanzarse con algunos cambios importantes, por lo que puede ser bueno poner mirones en este registro de cambios para asegurarse de que quien esté trabajando en esto esté al tanto de lo que se avecina.

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

Este hilo fue inmensamente útil para mí, especialmente la configuración de @ popcorn245. Personalmente, estaba usando @stencil/state-tunnel , que rompió esa configuración. Afortunadamente, pude hacer que funcionara con algunos pequeños ajustes ~ hacks ~ ejecutando:

npm i -D [email protected]

Y agregando esto 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;
};

Comenzar a experimentar con esto también y (como se mencionó en otro lugar) usando concurrently parece funcionar bien para mí (por ahora). Creé un proyecto de inicio rápido que incluye todo lo que necesita para comenzar a trabajar tanto con la plantilla como con el libro de cuentos. Ya estoy usando la última versión de la plantilla.

Échale un vistazo aquí: stencil-storybook-starter

@ fvaldes33 ¡

La única diferencia para mí fue usar stencil build --watch (prod, no dev) porque los tiempos de compilación son muy rápidos y es más fácil consumir la versión prod en Stencil (especialmente con estilos globales y otras importaciones).

@ fvaldes33 ¿cómo puede hacer referencia a build / components.js en su preview-head.html así? Tengo que proporcionar la ruta completa, por ejemplo, http: // localhost : 3333 / build / components.js. Pero me gustaría no tener que hacer eso.

(No estoy usando su iniciador, pero estoy usando el iniciador del componente de la plantilla con una nueva instalación de libro de cuentos / html)

EDITAR:
Me di cuenta de que estaba iniciando el libro de cuentos en el puerto 6006 en lugar de en la carpeta www. ¡problema resuelto!

Parece que muchos de nosotros tenemos soluciones similares (incluyéndome a mí https://github.com/jagreehal/stencil-boilerplate), pero realmente me gustaría recibir actualizaciones en vivo cuando edito un componente de plantilla. Actualmente tengo que actualizar manualmente el navegador para volver a cargar Storybook.

¿Existe una lista con viñetas de requisitos para completar esto? Estaría feliz de colaborar si supiera lo que hay que construir.

¿Cuál es el estado actual? ¿Podemos contribuir? ¡Me gustaria ver esto!

Sugerí contribuir con un ajuste preestablecido arriba.

• Los ajustes preestablecidos se documentan aquí: https://storybook.js.org/docs/presets/introduction/
• Hay un repositorio para los ajustes preestablecidos de la comunidad aquí: https://github.com/storybookjs/presets

Si alguien quisiera armar un ajuste preestablecido basado en los patrones anteriores, estaría feliz de ayudar en el lado del Libro de cuentos. No estoy familiarizado con el lado de la plantilla.

Acabo de publicar mi proyecto para cualquiera que lo quiera. Estas son las características:

• generación automática de historias
  
  
  
  • generación automática de perillas para todos los @Props en sus componentes
  
  
  • capacidad para personalizar qué botones se utilizan para cada accesorio (aunque el código hace un buen trabajo adivinando cadenas, números, valores booleanos, objetos, fechas y colores).
  
  
  • capacidad para definir varios estados que se representan en una sola página, cada uno con un título, una descripción y un fragmento de código copiable (una especie de implementación de capítulos ligeros)
  
  
  • capacidad para definir notas para cada componente (por lo general, desea el archivo Léame generado)
  
  
• reconstrucción / recarga en vivo de los componentes de la plantilla (todavía es un poco inestable, a veces es necesario actualizar el navegador)
• viene con el complemento de la ventana gráfica

Déjame saber lo que piensas: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx Esto se ve muy bien. Envíe un tweet sobre esto y mencione @storybookjs y lo haré RT desde la cuenta del libro de cuentos. Y si quieres escribir una publicación al respecto, me complacerá trabajar contigo para que se publique. Creo que hay una demanda bastante grande aquí.

¡ Trabajo increíble

De acuerdo, he twitteado (no twitteé mucho). Además, no tengo un blog: /, pero me alegra armar algo si alguien quiere publicarlo.

Mientras el proyecto funciona, lo armé rápidamente y no facilité la personalización. Parte del código es realmente frágil, ya que tengo que cargar y fusionar varios archivos para representar cada componente individual. Espero recibir algunos comentarios antes de dedicar tiempo a hacer esto más consumible.

Tengo curiosidad por ver cómo se vería un ajuste preestablecido. Lo más importante que sería bueno es un preset JSX que no reacciona. Esto permitiría un renderizado un poco más fácil y la generación de plantillas además de la variedad storybook-html, y no tiene mucho que ver con la plantilla. También sería necesario actualizar varios complementos para que esto sea utilizable, y no estoy seguro de que sea el mejor para coordinar ese esfuerzo. De cualquier manera, dígame qué puedo hacer para ayudar.

@DesignByOnyx ¿ Alguna posibilidad de que puedas https://discordapp.com/invite/UUt2PJb

Me encantaría conversar más sobre cómo publicar este trabajo en el blog de Storybook y promocionarlo en la comunidad de plantillas.

He estado jugando con @storybook/html para Stencil y la experiencia "simplemente funciona". Básicamente haces lo siguiente:

1. Utilice concurrently para iniciar el servidor de Storybook y stencil build --watch "en paralelo"
2. Comience storybook con la bandera -s dist , de modo que su Stencil dist se sirva como archivos estáticos.

3. Configure .storybook/preview-head.html para incluir una etiqueta de secuencia de comandos como:

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

¡Y eso es! El soporte html listo para usar funciona para todas sus necesidades de componentes web.

Lo que me gustaría ver es algo como @storybook/stencil que tenga la misma experiencia (y código) que el paquete html en el lado de la creación de la historia, pero

1. Realiza resúmenes ejecutando el proceso de construcción de Stencil como parte de Storybook, por lo que no es necesario configurar concurrently
2. Agrega esas etiquetas script por ti
3. Conecta la actualización automática cuando se reconstruyen los componentes de la plantilla

¿Hay interés en algo así? Estoy en el proceso de vender mi empresa en Stencil y Storybook, y suponiendo que eso gane tracción, tendré "tiempo de trabajo" para hacer que esa historia (disculpe el juego de palabras) sea realmente agradable con Storybook + Stencil jugando juntos.

El trabajo que @DesignByOnyx ha hecho es realmente genial, pero tienes que _iniciar_ tus componentes de Stencil con ese kit e ignorar la documentación "normal" para Stencil. Si Storybook puede proporcionar un paquete que se pueda superponer sobre el kit de inicio de Stencil "normal", puede agregar fácilmente una configuración de Storybook a un conjunto existente de componentes de Stencil.

Gracias por el gran resumen @alexlafroscia. Creo que tu propuesta tiene mucho sentido. ¿HMR no se activa automáticamente cuando Stencil se reconstruye? Si es así, ¿alguna idea de por qué no?

@ igor-dv ¿Es posible agregar preview-head.html en un preset?

@Hypnosphi Quizás este sea un ejemplo interesante para sus esfuerzos en múltiples marcos. En este caso no se necesita ningún decorador (aparentemente) pero se necesita un compilador completo.

@alexlafroscia ¿cómo se ve un ejemplo de historia en tu caso?

En la empresa en la que trabajo, llevamos un tiempo jugando con los paquetes Storybook HTML y StencilJS. ¡Estaría feliz de contribuir!

@alexlafroscia Muy buenas ideas, de hecho sería bueno tener un soporte completo para este compilador. Aquí hay algunas otras ideas:

• Utilice las capacidades de StencilJS JSX (basadas en Preact en este momento) para escribir historias de una manera más fácil de mantener. Usar JS simple o incluso literales de plantilla puede ser engorroso ...
• Tenga un complemento Smart Knobs para componentes web. @DesignByOnyx proporcionó una buena base para esto.

Este artículo cubre la hoja de ruta en curso en StencilJS: Hoja de ruta de la plantilla de

API públicas del compilador

Otra área en la que también nos estamos enfocando es asegurar que el compilador pueda funcionar dentro de un navegador y ser utilizado por otras herramientas. Ya hemos estado trabajando con algunos equipos increíbles como Stackblitz, CodeSandbox y WebComponents.dev. En los niveles más bajos, el compilador ya funciona sin ejecutarse en un entorno NodeJS, por lo que técnicamente no se trata de una refactorización importante, sino más bien de exponer las API correctas.

También estamos viendo muchas áreas de mejora para garantizar que el compilador sea fácil de consumir por otras herramientas de NodeJS, incluidos Rollup, Parcel, WebPack y Bazel. Si es un mantenedor de alguna herramienta, ya sea una herramienta en línea o un entorno NodeJS, y está buscando implementar el compilador Stencil, no dude en comunicarse con nosotros y estaremos encantados de ayudarle.

¡Puede ser útil!

¿HMR no se activa automáticamente cuando Stencil se reconstruye? Si es así, ¿alguna idea de por qué no?

@shilman No se <script> apunta a los activos construidos.

¿Cómo se ve un ejemplo de historia en tu caso?

@Hypnosphi Se ven así (una historia para el valor predeterminado my-component que Stencil genera en el paquete inicial que crean cuando 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>
  `);

Utilice las capacidades de StencilJS JSX (basadas en Preact en este momento) para escribir historias de una manera más fácil de mantener. Usar JS simple o incluso literales de plantilla puede ser engorroso ...

@darondel Estoy totalmente de acuerdo con las preocupaciones sobre la experiencia del desarrollador de no tener JSX en los archivos de creación de Story. He usado ese enfoque en el pasado, antes de que @storybook/html estuviera disponible, y usé la experiencia React, que estaba bien.

Parte de querer mantener las cosas lo más cerca posible de la experiencia html "predeterminada" es que las historias actúen como documentación sobre cómo usarlas realmente desde la perspectiva HTML; de lo contrario, están vinculadas a algo como Preact, que al menos en mi organización, no se usa en ningún otro lugar (somos principalmente una tienda Ember.js).

Mencionaste que las etiquetas de plantilla no serían una gran experiencia, pero creo que algo como htm podría ser una buena opción. También mantiene el proceso de construcción agradable y simple, porque no hay un paso de construcción requerido, pero puede facilitar la interacción con algo como Knobs.

¡También estaba pensando que intentar integrarme con algo como el próximo DocsPage podría ser interesante! Apuesto a que parte del trabajo que ya ha realizado @DesignByOnyx podría ser útil aquí, de modo que haya una vía para leer los "metadatos" de un componente de Stencil para generar la información de la documentación automáticamente. Probablemente no sea una preocupación "v1", ¡pero algo que sería genial de ver para una "v1.1"! Me gusta mucho tu idea de hacer algo como ese complemento de perillas automáticas también, ¡eso sería muy útil!

Con DocsPages lanzado hoy con Storybook 5.2, investigué un poco sobre si sería posible obtener la información sobre accesorios y demás de Stencil y representarla en Storybook. Creo que debería ser posible, pero definitivamente destaca lo útil que sería tener un complemento o un ajuste preestablecido adaptado al uso de Storybook with Stencil para albergar un montón de "pegamento" necesario para eso.

Voy a jugar un poco más con las cosas esta semana y ver si puedo armar algo.

A @alexlafroscia le encantaría estandarizar cómo los diferentes marcos comunican estos datos. He visto algo interesante de Jetbrains (web_types? Cc @elevatebart ) y también @atanasster también está trabajando en esta área para almacenar en caché los tipos de prop en archivos JSON para

No estoy familiarizado con el trabajo de Jetbrains, ¡tendré que comprobarlo! Si tiene alguna información específica que sería útil revisar, ¡me encantaría que me la enviara!

En el caso de Stencil, lo que creo que la "mejor apuesta" será que el proceso de compilación de Stencil genere los documentos JSON en una ubicación que sea conocida por un complemento de Stencil Storybook o que sea configurable. Ese objeto contiene toda la información sobre accesorios esperados, eventos emitidos e incluso el contenido del archivo readme para cada componente (sin la documentación de accesorios generada automáticamente). Creo que podríamos crear una historia realmente convincente para completar Storybook DocsPage con la información de ese archivo 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": []
    }
  ]
}

Es una especie de truco (lo tengo escribiendo la salida JSON en dist/output.json y luego uso fetch para tomar el archivo) pero pude obtener la representación de DocsPage para un componente de Storybook simplemente anulando los accesorios de ranura que puede tomar el componente DocsPage .

La tabla Props no es perfecta, pero es bastante buena; la salida de Stencil proporciona todos los accesorios que espera la tabla, y más. Lo que sea que esté en readme.md para el componente se representará en la parte superior del archivo.

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

Actualización: yendo un paso más allá, definí un DocsPage personalizado completo (en lugar de simplemente anular las ranuras) para obtener una segunda tabla con documentación de cualquier 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
  );
};

La página personalizada también corrige el hecho de que cada historia tiene una altura predeterminada de 500px , que es demasiado alta 😅

@alexlafroscia ¡ Este es un trabajo increíble y tremendo!

Para su información, vamos a generalizar las cosas de la tabla de accesorios en 5.3. Específicamente, los marcos como Vue tienen el concepto de ranuras y eventos, por lo que deben dividirse en sus propias tablas. Tal vez su trabajo de estilos podría usar el mismo mecanismo. https://github.com/storybookjs/storybook/issues/8123

El proyecto Jetbrains al que me refería es este (cc @piotrtomiak): https://github.com/JetBrains/web-types

No lo he analizado en detalle y no sé si es adecuado para nosotros. Sin embargo, si cumple con nuestros casos de uso y no agrega demasiado valor adicional, prefiero usar un estándar existente en lugar de inventar el nuestro.

@shilman ¡ Gracias por ver nuestro esfuerzo (JetBrains) para llevar algún estándar para el intercambio de información de metadatos a las bibliotecas de componentes web! Nuestro impulso inicial fue simplemente proporcionar una buena finalización de código para los componentes de Vue en archivos HTML, pero descubrimos que hay mucho más por lograr con dicho estándar, por lo que lo diseñamos teniendo en cuenta un formato de intercambio de información genérico (IDE, herramientas, documentación). Hasta ahora, nuestro enfoque estaba en el marco Vue, sin embargo, siempre hemos tenido en cuenta el soporte para componentes web u otros marcos. El estándar web-types es bastante nuevo, pero ya hemos escuchado algunos comentarios positivos de la comunidad y los usuarios de Vue. Estoy promocionando activamente la especificación en la comunidad de Vue, ¡pero es genial despertar el interés de otra comunidad!

Creo que pueden faltar algunas cosas en el esquema web-types JSON, que serían específicas de su marco y se pueden agregar a la especificación. Los elementos específicos de Vue tienen, por ejemplo, el prefijo vue . También falta una sección completa para documentar la compatibilidad con CSS, en la que podríamos trabajar para incluirla. Por lo tanto, si cree que vale la pena darle una oportunidad a web-types dude en presentar problemas o crear relaciones públicas para las funciones que faltan.

El efecto secundario de documentar sus componentes en formato web-types será una buena finalización del código cuando los desarrolladores incluyan su biblioteca en su proyecto. Estamos planeando implementar un soporte tan genérico basado en características comunes web-types para todos los marcos en un futuro muy cercano. Estoy bastante seguro de que con una aceptación más amplia del formato por parte de la comunidad, otros IDE lo seguirán con soporte para el formato, lo que beneficiaría a todos :)

@alexlafroscia ¡ fantástico trabajo! La integración de Stencil y Storybook (junto con https://github.com/storybookjs/storybook/issues/7644) se ve bien

¡Gracias por vincularte a ese problema! Originalmente fui por una ruta similar (tratando de usar de alguna manera los archivos README existentes y sacarlos directamente a DocsPage) pero finalmente me resultó más fácil usar los datos que Stencil coloca en el archivo JSON de documentos, ya que _no_ incluye la tabla de accesorios y todo (ya que esos datos están en otra parte del archivo JSON y los datos estructurados son perfectos para crear una tabla personalizada).

@alexlafroscia Gracias por compartir sus hallazgos. ¿Puedo preguntar cómo puedo depurar el CustomDocsPage ?

Intenté agregarlo con addParameters y no parece estar usando el personalizado sino el predeterminado.

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>

El WC en sí se carga en la página de documentos del libro de cuentos, incluso sin usar CustomDocsPage .
¿Hay alguna forma de depurar el componente? Intenté agregar algunos registros, pero no puedo ver ninguno.

Gracias por adelantado.

También me encontré con ese problema: tuve que anular el componente DocsPage en el nivel del "componente"

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

¿Es posible hacer que @storybook/html funcione con jsx? haría mucho más fácil escribir mis historias para los componentes de la plantilla. obtendría escritura, autocompletar y no tendría que usar document.createElement o cadenas de plantilla grandes. Intenté engañar al mecanografiado con // @jsx en la parte superior usando el paquete react, pero no funcionó.

@vidarc ¿cuál fue el error cuando hiciste eso? ¿Tiene una configuración de babel personalizada ?

no mucha personalización. algunas cosas agregadas al paquete web. primer mecanografiado se queja de Cannot find name 'h' . mi tsconfig tiene jsx = react y jsxFactory = h. Puedo hacer que esas advertencias desaparezcan usando la configuración // <strong i="6">@jsx</strong> h pragma en la parte superior, pero luego obtengo un error de libro de cuentos debido a que no devuelve un nodo o cadena DOM.

voy a probar: https://github.com/developit/vhtml siguiente

EDITAR: funciona muy bien con jsx. Sin embargo, no puedo averiguar cómo hacer que funcione con mecanografiado: /

@vidarc si h significa hyperscript, devuelve un objeto personalizado que no es una cadena ni un elemento DOM

vhtml parece el camino a seguir

Para su información, tenemos un PR entrante para una aplicación web-components : https://github.com/storybookjs/storybook/pull/8400

¿Alguien aquí puede comentar cómo se cruza eso con este problema? @vidarc @DesignByOnyx @ Edd-Strickland @alexlafroscia @daKmoR

Todavía no he probado el n. ° 8400, pero antes de probarlo, he podido hacer que la plantilla "en vivo" funcione a través de:

1. Ejecute start-storybook -s ./www en una ventana.
2. Ejecute stencil build --dev --watch en otro.
3. Actualice .storybook/config.ts para recargar la ventana en 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();
  });
}

Es un poco torpe.

La razón por la que no pude investigar alternativas como https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js es que import "./my-component" falla desde import { Component } from "@stencil/core" no es una exportación válida y, de hecho, se elimina como parte del proceso de compilación:

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

¿Alguien tiene realmente una implementación / configuración de plantilla y libro de cuentos que funcione en IE11? Probé cada implementación mencionada en este hilo sin suerte.
siempre se encuentra con un rechazo de promesa no controlado TypeError: Invalid Scheme con versiones de esténcil 1.2.4 -> 1.7.4.

@shilman Pude subir los componentes de la plantilla en la aplicación web-components pero me parece que solo los está leyendo de la misma manera que todos lo hacen con el html one, y HMR no ' t reaccionar a las actualizaciones de los propios componentes de la plantilla.

Realmente sería mejor si hubiera una manera de hacer que el compilador de la plantilla se integre en la secuencia de ejecución del libro de cuentos, como ocurre con React, Angular, etc.

Continuaré probando formas de hacer que los componentes de la plantilla estén "en vivo", pero el problema arquitectónico con el que me he estado encontrando es que, a menos que me equivoque, _Los componentes de la plantilla requieren un paso de compilación personalizado para funcionar_ ( stencil build --dev --watch ), y no hay un equivalente en tiempo de ejecución.

Intenté hacer import { MyComponent} from "./MyComponent" , pero eso falla ya que @Component no se exporta realmente desde @stencil/core . De hecho, se elimina como parte del paso de compilación:

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

Sabiendo esto, mi próxima prueba es mantener el paso de compilación con enlaces React (https://github.com/ionic-team/stencil-ds-plugins), pero en cambio reemplazar la lógica HMR para usar historias React (en lugar de HTML) .

Con suerte, esto permitirá que la UX del libro de cuentos coincida con la de React, dejando a Stencil solo con la implementación del componente.

No creo que sea el fin del mundo requerir que stencil build se ejecute en paralelo en el modo de desarrollo:

• Podríamos instruir al usuario cómo ejecutar esto simultáneamente en su package.json
• Un ajuste preestablecido de plantilla podría generar este proceso al inicio y luego eliminarlo al apagarlo si quisiéramos ocultarlo al usuario

Es preferible una solución con menos partes móviles, pero no dejemos que lo bueno sea enemigo de lo bueno aquí. AFAIK, por ahora, todos todavía están desarrollando su propio soporte de plantilla en este momento, y hay una buena oportunidad para ayudar a simplificar las cosas para mucha gente aquí ...

El uso simultáneo es lo que me funciona actualmente.

Seguro que hay pasos incrementales.

Lo principal que me atrajo como usuario fue "por qué" la plantilla no funcionaba igual
como mis historias de reacción, que no se pueden resolver sin estarcido específico
cambios.

El jueves 31 de octubre de 2019 a las 5:02 p.m. Michael Shilman [email protected]
escribió:

No creo que sea el fin del mundo exigir que la construcción de la plantilla sea
corriendo en paralelo en modo dev:

• Podríamos instruir al usuario cómo ejecutar esto simultáneamente
  https://www.npmjs.com/package/ simultáneamente en su package.json
• Una plantilla preestablecida podría generar este proceso en el inicio y luego matar
  al apagarlo si quisiéramos ocultárselo al usuario

Es preferible una solución con menos partes móviles, pero no dejemos que el bien
sé el enemigo de lo grande aquí. AFAIK por ahora todo el mundo todavía está rodando sus
propio soporte de plantilla en este momento, y hay una buena oportunidad para ayudar
simplificar las cosas para mucha gente aquí ...

-
Estás recibiendo esto porque hiciste un comentario.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVDVREXHG43V2
o darse de baja
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

otro enfoque para esto sería separar claramente la interfaz de usuario (libro de cuentos) de la vista previa (plantilla). Con el libro de cuentos independiente, esto ya debería ser posible.
De esa manera, incluso podría preconstruir un libro de cuentos 💪, lo que significaría tiempos de arranque mucho más rápidos.

Y luego solo usaría la construcción de la plantilla durante el desarrollo (pero aún usando la interfaz de usuario de los libros de cuentos). Lo que significaría que obtendrá todas las ventajas que admite el servidor de desarrollo de plantillas sin la necesidad de pensar en interopt con la configuración del paquete web de libros de cuentos.

Ya investigamos esto usando es-dev-server para potenciar la vista previa de web-components . Tenemos una especie de POC ... pero todavía hay bastantes asperezas.
Sin embargo, supongo que el mismo enfoque debería funcionar para la plantilla también.

Si alguien tiene alguna pregunta o estaría interesado en investigar esto para una plantilla o ayuda para hacer un proyecto de referencia usando es-dev-server entonces estoy seguro de que @LarsDenBakker está feliz de compartir algunos detalles más 🤗

PD: todo esto solo es posible porque el libro de cuentos tiene esta increíble configuración de iframe con mensajes de canal para mantener la interfaz de usuario separada de la vista previa 🤗

oigan todos

Después de un tiempo y una gran cantidad de retoques, este es mi repositorio para una implementación de libro de cuentos integrado con plantilla https://github.com/Edd-Strickland/stencilbook.

Feliz de discutir más a fondo, con suerte, la mayoría de las cosas son obvias en el archivo Léame y al mirar el package.json para los scripts.

Esto se construye utilizando el componente inicial de la plantilla vanilla y la implementación HTML del libro de cuentos vanilla.

Por favor mire y revise ...

StencilBook - Un iniciador de libro de cuentos de plantillas

Este es un proyecto inicial para construir un componente web independiente usando Stencil y Storybook.

Plantilla

Stencil es un compilador para crear aplicaciones web rápidas utilizando componentes web.

Stencil combina los mejores conceptos de los frameworks frontend más populares en una herramienta de tiempo de compilación en lugar de tiempo de ejecución. Stencil toma TypeScript, JSX, una pequeña capa DOM virtual, enlace de datos unidireccional eficiente, una tubería de renderizado asincrónica (similar a React Fiber) y carga diferida lista para usar, y genera componentes web 100% basados ​​en estándares que se ejecutan en cualquier navegador que admita la especificación Custom Elements v1.

Los componentes de la plantilla son solo componentes web, por lo que funcionan en cualquier marco principal o sin ningún marco.

Empezando

Clonar el repositorio

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

Cambie al directorio base:

cd stencilbook

Instale los módulos:

npm install

y ejecute una compilación para todo el repositorio:

npm run build:all

Después de este libro de cuentos de ejecución:

npm run storybook

Otros comandos para este repositorio incluyen:

Plantilla de construcción:

npm run stencil

Inicie la plantilla directamente en el modo de servicio / reloj; Útil para modificar directamente los componentes de la plantilla:

npm run stencil:start

Ejecute el libro de cuentos y una creación de plantilla con watch and serve, eliminando las versiones anteriores creadas y se publicará localmente:

npm run storybook:build:all

Sirva el libro de cuentos localmente:

npm run storybook:serve

Restablecer módulos; Elimina y reinstala módulos de nodo:

npm run reset:modules

Para ejecutar las pruebas unitarias para los componentes, ejecute:

npm test

Prueba

Para ejecutar pruebas en modo reloj:

npm run test.watch

Generar nuevos componentes

Para generar nuevos componentes de Stencil de forma automática:

npm run generate

@ Edd-Strickland ¡Este es un gran comienzo! Si pudiera sugerir que tal vez agregue un script de inicio para un arranque más fácil, hice "start": "npm-run-all -p stencil:start storybook" y funciona bastante bien, excepto que no hay recarga en caliente ya que el libro de cuentos no parece reconocer cuándo se ha creado la plantilla.

... eso es a menos que me esté perdiendo algo?

@shilman parece haber un paquete @ storybook / web-components ya en master en alpha, pero no veo Stencil referenciado en el README.md: https://github.com/storybookjs/storybook/tree/next/ aplicación / componentes web

¿Es este un esfuerzo paralelo? Si no es así, ¿conocería el problema correspondiente? No se pudo encontrar al buscar web-components en problemas. Se encontró la etiqueta app: web-components , pero se acaba de agregar a la versión y se ha producido un error.

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

No entiendo qué es necesario para agregar un soporte de plantilla adecuado más allá de lo que proporciona @storybook/web-components . ¡Estoy seguro de que alguien en este hilo lo sabe!

@ Edd-Strickland ¡Este es un gran comienzo! Si pudiera sugerir que tal vez agregue un script de inicio para un arranque más fácil, hice "start": "npm-run-all -p stencil:start storybook" y funciona bastante bien, excepto que no hay recarga en caliente ya que el libro de cuentos no parece reconocer cuándo se ha creado la plantilla.

... eso es a menos que me esté perdiendo algo?

Hmm Disculpas, estuvimos ocupados y en conferencias al final de la semana pasada.

Estoy confundido en cuanto al problema que tiene, ¿podría plantearlo a través de los problemas de repositorio en lugar de en este hilo para obtener más detalles?

Sin embargo, si realiza una instalación y luego ejecuta el comando del libro de cuentos, se iniciará el servidor de vigilancia en consecuencia. Stencil se auto-HMR siempre que cambie, agregue o actualice un componente mientras este se está ejecutando.

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

No entiendo qué es necesario para agregar un soporte de plantilla adecuado más allá de lo que proporciona @storybook/web-components . ¡Estoy seguro de que alguien en este hilo lo sabe!

Depende, los componentes web funcionan con instancias de vainilla. No he comparado las diferencias entre ellos, sin embargo, la plantilla genera componentes web, pero se ejecuta como un complemento para W / C en lugar de ser W / C de forma predeterminada.

Así que podría decirse que se necesitan ambos. Un JS W / C nativo y otro para el compilador de plantillas si desea crear un prototipo rápido de W / C basados ​​en Stencil en el lado del libro de cuentos, como podría hacerlo con un componente de reacción o angular.

No tengo tiempo para ponerme al día con

Recientemente me topé con Bulmil debido a su trabajo en la integración de Stencil con nuxt-stencil y sus ejemplos de nuxt .

También descubrí que hay un soporte decente de Storybook. Quizás también valga la pena echarle un vistazo. No sé los aspectos internos / en qué se diferencian del estado actual de este hilo, pero funciona fuera de la caja dentro de Bulmil una vez que ejecuta el libro de cuentos .

@storybook/addon-actions todavía no parece funcionar o todavía no pude hacer que esto funcione.

¿Quizás podamos incluir a

Recientemente me encontré con nuxt-stencil y sus ejemplos de nuxt .

También descubrí que hay un soporte decente de Storybook. Quizás también valga la pena echarle un vistazo. No sé los aspectos internos / en qué se diferencian del estado actual de este hilo, pero funciona fuera de la caja dentro de Bulmil una vez que ejecuta el libro de cuentos .

@storybook/addon-actions todavía no parece funcionar o todavía no pude hacer que esto funcione.
Ciertamente, dentro del repositorio anterior, las acciones complementarias funcionarán, como un complemento de libro de cuentos estándar

E2A: el libro de plantillas, no la variante @Gomah .

El objeto con la integración básica de la plantilla / SB anterior era simplemente crear una base que permitiera que el libro de cuentos se convirtiera en un libro de cuentos y la plantilla en una plantilla y luego ambos se integraran para permitirle tener componentes web hechos a través de una plantilla en un marco de libro de cuentos.

He metido un pico en el sprint de mis equipos durante las próximas dos semanas para ver si la versión W / C funcionará tan bien como esta iteración y si podemos convertir nuestra versión existente que estamos usando a la versión W / C.

Idealmente, todo funcionaría para que no hubiera fragmentación de las variantes de W / C; sin embargo, a diferencia de las implementaciones nativas de W / C, Stencil no es realmente un marco, lo es. compilador. Por lo tanto, aún podría valer la pena tener la distinción de permitirle escribir componentes JSX que se generarán como W / C después.

O podría ser realmente simple.

Le avisaremos una vez que hayamos completado el aumento.

no mucha personalización. algunas cosas agregadas al paquete web. primer mecanografiado se queja de Cannot find name 'h' . mi tsconfig tiene jsx = react y jsxFactory = h. Puedo hacer que esas advertencias desaparezcan usando la configuración // <strong i="7">@jsx</strong> h pragma en la parte superior, pero luego obtengo un error de libro de cuentos debido a que no devuelve un nodo o cadena DOM.

voy a probar: https://github.com/developit/vhtml siguiente

EDITAR: funciona muy bien con jsx. Sin embargo, no puedo averiguar cómo hacer que funcione con mecanografiado: /

Hola @vidarc. ¿Pudiste hacer que esto funcionara con la sintaxis storiesOf() ? Si es así, tendría mucha curiosidad por ver cómo lo hizo. ¿Tiene un ejemplo de código o una base de código para compartir?

Si bien tenemos el libro de cuentos y la plantilla integrados y funcionan bien en nuestro proyecto, el mayor problema que tenemos es tener que recurrir a la creación de historias con document.createElement() para componentes con accesorios de objetos, etc. Si vhtml puede resolver esto, eso sería genial!

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

No entiendo qué es necesario para agregar un soporte de plantilla adecuado más allá de lo que proporciona @storybook/web-components . ¡Estoy seguro de que alguien en este hilo lo sabe!

Tienes razón y estoy de acuerdo. Noté en README.md las carpetas incluidas y vi otros marcos de componentes web, pero no la plantilla:

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

Por lo tanto, pensé que la plantilla no estaba incluida por una razón. Pero si esto funciona bien sin agregar nada, está perfectamente bien para mí.

Por cierto, ¿se puede solucionar este problema ahora, ya que se resuelve con el preajuste de componentes web mencionado anteriormente?

no mucha personalización. algunas cosas agregadas al paquete web. primer mecanografiado se queja de Cannot find name 'h' . mi tsconfig tiene jsx = react y jsxFactory = h. Puedo hacer que esas advertencias desaparezcan usando la configuración // <strong i="8">@jsx</strong> h pragma en la parte superior, pero luego obtengo un error de libro de cuentos debido a que no devuelve un nodo o cadena DOM.
voy a probar: https://github.com/developit/vhtml siguiente
EDITAR: funciona muy bien con jsx. Sin embargo, no puedo averiguar cómo hacer que funcione con mecanografiado: /

Hola @vidarc. ¿Pudiste hacer que esto funcionara con la sintaxis storiesOf() ? Si es así, tendría mucha curiosidad por ver cómo lo hizo. ¿Tiene un ejemplo de código o una base de código para compartir?

Si bien tenemos el libro de cuentos y la plantilla integrados y funcionan bien en nuestro proyecto, el mayor problema que tenemos es tener que recurrir a la creación de historias con document.createElement() para componentes con accesorios de objetos, etc. Si vhtml puede resolver esto, eso sería genial!

puede hacerlos como historias de CSF directamente con lo último y cambiar sus historias a ese formato que funciona bien. Además, si importa algunas fábricas de datos para completar los objetos de datos, puede usarlas para hidratar sus accesorios ...

@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 +
No entiendo qué es necesario para agregar un soporte de plantilla adecuado más allá de lo que proporciona @storybook/web-components . ¡Estoy seguro de que alguien en este hilo lo sabe!

Tienes razón y estoy de acuerdo. Noté en README.md las carpetas incluidas y vi otros marcos de componentes web, pero no la plantilla:

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

Por lo tanto, pensé que la plantilla no estaba incluida por una razón. Pero si esto funciona bien sin agregar nada, está perfectamente bien para mí.

Por cierto, ¿se puede solucionar este problema ahora, ya que se resuelve con el preajuste de componentes web mencionado anteriormente?

Voy a probar si funciona con la plantilla e informaré entonces podemos cerrar. No tiene sentido cerrar si realmente no funciona con la plantilla ...

...

Hola @vidarc. ¿Pudiste hacer que esto funcionara con la sintaxis storiesOf() ? Si es así, tendría mucha curiosidad por ver cómo lo hizo. ¿Tiene un ejemplo de código o una base de código para compartir?
Si bien tenemos el libro de cuentos y la plantilla integrados y funcionan bien en nuestro proyecto, el mayor problema que tenemos es tener que recurrir a la creación de historias con document.createElement() para componentes con accesorios de objetos, etc. Si vhtml puede resolver esto, eso sería genial!

puede hacerlos como historias de CSF directamente con lo último y cambiar sus historias a ese formato que funciona bien. Además, si importa algunas fábricas de datos para completar los objetos de datos, puede usarlas para hidratar sus accesorios ...

Gracias. No me había dado cuenta de que CSF ahora es la forma recomendada de escribir historias. ¿Ha logrado que el complemento jsx funcione con vhtml por cierto, o eso no es posible?

...

Hola @vidarc. ¿Pudiste hacer que esto funcionara con la sintaxis storiesOf() ? Si es así, tendría mucha curiosidad por ver cómo lo hizo. ¿Tiene un ejemplo de código o una base de código para compartir?
Si bien tenemos el libro de cuentos y la plantilla integrados y funcionan bien en nuestro proyecto, el mayor problema que tenemos es tener que recurrir a la creación de historias con document.createElement() para componentes con accesorios de objetos, etc. Si vhtml puede resolver esto, eso sería genial!

puede hacerlos como historias de CSF directamente con lo último y cambiar sus historias a ese formato que funciona bien. Además, si importa algunas fábricas de datos para completar los objetos de datos, puede usarlas para hidratar sus accesorios ...

Gracias. No me había dado cuenta de que CSF ahora es la forma recomendada de escribir historias. ¿Ha logrado que el complemento jsx funcione con vhtml por cierto, o eso no es posible?

Entonces, el JSX se analiza directamente a través del compilador de la plantilla en el shadow dom. Entonces, siempre que esté utilizando la integración del compilador en el libro de cuentos, escriba su componente de plantilla estándar y luego lo incluya en la historia de CSF y luego lo importe en su fábrica de datos para completar los accesorios.

El repositorio de vainilla con el que publiqué hace esto de inmediato sin necesidad de complementos VHTML o cualquier otra cosa, ni siquiera una envoltura que pueda escribir directamente como plantilla y solo salida.

puede usar la sintaxis storyOf pero luego está bloqueado en el patrón clásico document.createElement.
Por ejemplo, este viejo storysOf Syntax para nuestro icono

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

no mucha personalización. algunas cosas agregadas al paquete web. primer mecanografiado se queja de Cannot find name 'h' . mi tsconfig tiene jsx = react y jsxFactory = h. Puedo hacer que esas advertencias desaparezcan usando la configuración // <strong i="8">@jsx</strong> h pragma en la parte superior, pero luego obtengo un error de libro de cuentos debido a que no devuelve un nodo o cadena DOM.
voy a probar: https://github.com/developit/vhtml siguiente
EDITAR: funciona muy bien con jsx. Sin embargo, no puedo averiguar cómo hacer que funcione con mecanografiado: /

Hola @vidarc. ¿Pudiste hacer que esto funcionara con la sintaxis storiesOf() ? Si es así, tendría mucha curiosidad por ver cómo lo hizo. ¿Tiene un ejemplo de código o una base de código para compartir?

Si bien tenemos el libro de cuentos y la plantilla integrados y funcionan bien en nuestro proyecto, el mayor problema que tenemos es tener que recurrir a la creación de historias con document.createElement() para componentes con accesorios de objetos, etc. Si vhtml puede resolver esto, eso sería genial!

@robaxelsen
Terminé usando @ storybook / react y modificando la configuración del paquete web para transformar archivos MD junto con archivos MDX. Luego, solo proporciona un pequeño fragmento de código para crear perillas basadas en la plantilla de salida json doc. Para el código de la plantilla, usamos la copia del libro de cuentos de su CLI y vinculamos esos archivos en el archivo preview-head.html. Se adapta bastante bien a mis propósitos.

@ Edd-Strickland Muchas gracias por el ejemplo y la explicación. Sin embargo, con su último ejemplo, todavía termino teniendo que pasar atributos programáticamente, como accesorios en el elemento. Mi esperanza era poder, ya sea con vhtml o con el compilador de plantilla simple, escribir mis historias como JSX.

Entonces en lugar de:

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

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

  return icon;
};

...Yo escribiría:

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

Tanto por la legibilidad como por la facilidad para crear historias. Entonces, ¿esto no es posible? Si es posible, ¿podría darnos un ejemplo rápido?

También podemos hablar en el chat de discordia si eso es más fácil. Soy Rob Axelsen#1373 .

EDITAR: Para agregar a lo anterior, también miré la documentación de CSF y probé con la sintaxis JSX importando h , pero arroja el error "Esperando un fragmento de HTML o un nodo DOM de la historia:" Historia simple " de "Componente". ":

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

Si se trata de escribir historias que necesitan establecer propiedades para componentes web, puede echar un vistazo a @storybook/web-components . Está utilizando lit-html para crear html declarativamente con propiedades.

Esto debería funcionar cuando se ejecuta el libro de cuentos y la plantilla uno al lado del otro :)

Excepto que la plantilla no usa html iluminado. Eso es algo de Vue ...

@shilman parece haber un paquete @ storybook / web-components ya en master en alpha, pero no veo Stencil referenciado en el README.md: https://github.com/storybookjs/storybook/tree/next/ aplicación / componentes web

¿Cómo descargamos y probamos el paquete de componentes web? El repositorio vinculado aquí no tiene acciones de clonación, etc.

@ Edd-Strickland eso es solo un directorio en el libro de cuentos principal monorepo

Excepto que la plantilla no usa html iluminado. Eso es algo de Vue ...

es un lit thing 🤔

sin embargo, esa es la belleza de los componentes web: no importa qué esténcil se utilice debajo del capó. Puede utilizar lit-html o cualquier otra forma de definir sus historias. Todo lo que probablemente necesite es una forma de escribir "html" con propiedades.

Para lit-html se vería así

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

Entonces, si ingresara a DevTools en Chrome en la historia, podría seleccionar el componente iluminado y podría leer los siguientes detalles

• título de propiedad, por ejemplo, console.log ($ 0.title) // algún título
• atributo poder, por ejemplo, console.log ($ 0.getAttribute ('poder')) // ilimitado

para el componente de la plantilla sería "el mismo"

• datos de propiedad, por ejemplo, console.log ($ 0.data) // [{nombre: 'john', edad: 21}, {nombre: 'maria', edad: 28}];
• atributo supermodo, por ejemplo, console.log ($ 0.hasAttribute ('supermodo')) // verdadero

lit-html solo muestra el dom ... dónde / cómo se registran los elementos dom lit-html no sabe / no le importa, por lo que la tecnología que se usa para cada componente puede ser completamente diferente ... por ejemplo, puede tener un componente que son lit-element, stencil, vainilla HTMLElement o incluso podría ser un envoltorio de componente web para una aplicación completa de reacción / vue / angular ... 😱

La plantilla puede ser un compilador, pero una vez que se compila en el componente web, se puede usar solo como dom 🤗

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

El equipo de Stencil está refactorizando el compilador que creo que cambiará la integración de Stencil / Storybook.

Si alguien va a usar Stencil y Storybook a través de React, checkout https://github.com/the-road-to-learn-react/use-custom-element que le permite pasar matrices y objetos. Lo intentaré yo mismo más tarde, pero esto podría ayudar a algunas personas.

Para aquellos interesados, he publicado un iniciador para combinar Storybook / react y Stencil: https://github.com/bbellmyers/stencil-storybook-starter. Tenga en cuenta que con esta configuración, los cambios en los componentes requieren una actualización completa en el navegador, pero los cambios en las historias no.

Parece que el libro de cuentos está desarrollando un libro de cuentos para componentes web. Lo probé con plantilla y está funcionando bastante bien.

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

@ sem4phor ¿puedes compartir tu configuración?

Recibo errores sobre lit-html en una nueva instalación de libro de cuentos para componentes 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 , debe instalar 'lit-html' usted mismo, ya que se está utilizando para representar componentes en los ejemplos predeterminados.

@ Edd-Strickland agregamos un libro de cuentos para componentes web y en 6.0.0 el libro de cuentos para polímeros quedará obsoleto / ya no se actualizará.

¿Hay algo que deba hacerse para que el libro de cuentos para componentes web funcione para los componentes de la plantilla?

El libro de cuentos de componentes web puede representar componentes de componentes web de plantilla, pero la plantilla no se puede ejecutar en el navegador tal como está y debe compilarse. Por lo tanto, todavía necesita un manejo especial, a menos que compile los componentes de la plantilla antes de ejecutar el libro de cuentos.

@LarsDenBakker es cuestión de agregar un complemento / cargador de paquete web para que funcione lo anterior. (Me imagino que se desea hacer el componente de plantilla HMR y compilar dinámicamente)

Sí, aunque la plantilla en sí usa rollup. Si el paso de compilación se puede usar como un proyecto separado, quizás podría convertirlo en un complemento de paquete web. No sé lo suficiente sobre los aspectos internos para eso.

Stencil no usa Webpack. En su lugar, usa Rollup.

Es posible usar el repositorio que configuré para que ambos funcionen en consecuencia y habilite el equivalente de HMR en Stencil con la llamada -watch. De modo que esa plantilla se recarga cuando se actualizan las plantillas y ese libro de cuentos se vuelve a cargar cuando se actualiza.

Por lo tanto, no es necesario construir cada vez, ya que esto lo cubrirá.

Si bien no he tenido tiempo recientemente para actualizar el repositorio con la última SB o Stencil, este proceso seguirá funcionando y luego podrá actualizar el repositorio con las últimas versiones.

Gracias

@ Edd-Strickland agregamos un libro de cuentos para componentes web y en 6.0.0 el libro de cuentos para polímeros quedará obsoleto / ya no se actualizará.

¿Hay algo que deba hacerse para que el libro de cuentos para componentes web funcione para los componentes de la plantilla?

sí, todavía no tiene en cuenta la recarga en vivo / HMR porque, como se detalla anteriormente, las diferencias entre el uso del paquete web y el uso acumulado, por lo que en la actualidad, si desea usar la versión SB WC, entonces requiere una compilación completa de la plantilla para poder renderizar entonces toda la bondad de HMR se pierde en la plantilla.

Esta versión se basa actualmente en la versión HTML, no en la versión de polímero, por lo que esto no debería afectar el objetivo a largo plazo de retirar esa versión.

@LarsDenBakker es cuestión de agregar un complemento / cargador de paquete web para que funcione lo anterior. (Me imagino que se desea hacer el componente de plantilla HMR y compilar dinámicamente)

No lo recomendaría, la versión de paquete web de Stencil es una ruta de desarrollo significativamente más difícil y aumenta la huella de dependencias sin ninguna necesidad.Como se muestra en el repositorio que produje, es perfectamente posible tener la plantilla ejecutándose en el reloj, que se recompila en vivo en cada cambio de la instancia WC o SB. Se trata de configurarlo para permitir ambos.

Sí, aunque la plantilla en sí usa rollup. Si el paso de compilación se puede usar como un proyecto separado, quizás podría convertirlo en un complemento de paquete web. No sé lo suficiente sobre los aspectos internos para eso.

Ya existe un complemento WP de plantilla, sin embargo, esta no es una dependencia admitida o aprobada por la comunidad.

cc @ jthoms1 @adamdbradley

@dmartinjs , debe instalar 'lit-html' usted mismo, ya que se está utilizando para representar componentes en los ejemplos predeterminados.

@ sem4phor ¿puedes compartir tu configuración?

Recibo errores sobre lit-html en una nueva instalación de libro de cuentos para componentes 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

¿Algún comentario sobre esto? Tengo que instalar esta dependencia yo mismo. Si es utilizado por @ storybook / web-components, ¿debería instalarse automáticamente como una dependencia ...?

@LeeBurton, ¿ no si es una dependencia entre pares? (No estoy seguro de si lo es, si no, tal vez debería serlo) cc @daKmoR

@LeeBurton en el momento en que lo estaba probando lit-html era una dependencia entre pares. Es normal que tenga que instalar las dependencias de pares usted mismo. https://nodejs.org/es/blog/npm/peer-dependencies/

Por lo que vale, conseguí que la plantilla funcione con esta configuración en .storybook/preview.js

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

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

@idmyn Lo intenté y, mientras se compila, cualquier cambio realizado en cualquier archivo src aún no se carga en el navegador sin una recarga manual.

Lo hice funcionar ejecutando la compilación de Stencil localmente con el reloj habilitado en un script de ejecución npm mientras ejecutaba start-storybook en paralelo con el paquete npm-run-all .

Configuré la configuración del paquete web de Storybook para ver los archivos dist de Stencil usando lo siguiente en mi 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;
  },
};

Es posible que tenga que cambiar un poco las rutas / archivos para su proyecto, pero esto funcionó para mí.

Me pregunto, ¿ pensaron en convertir sus soluciones en un preajuste para 6? He usado repositorios y, como suele ser la forma, me gustan partes de cada uno :-)

Moví mi copia de @ Edd-Strickland a 6.0.0-beta con un éxito razonable, aunque encuentro que no siempre reconstruye todo cuando detecta un cambio (por ejemplo, readme.md).

¿Está esto disponible públicamente @paulfelton?

Ahora es, sírvase usted mismo :-)

He bifurcado el proyecto de Edd . @ Edd-Strickland, ¿debo hacer un PR? Necesitará una buena revisión, no soy un experto en esto.

He cambiado los paquetes, refactoricé la configuración al nuevo formato. Tuve que agregar un mecanografiado y referirme a él en tsconfig para que la historia importara el archivo léame de la plantilla y agregue una configuración para traducir 'notas' a 'documentos'.

Lista de deseos:

• Bueno, me gustaría que la integración generara una historia básica a partir del componente de la plantilla. Idealmente, tanto mdx como CSF.
• Me gustaría pasar de Storybook HTML a Storybook Webcomponent, aunque no estoy seguro de si hay beneficios de hacerlo. Simplemente se siente más natural.
• Me gustaría que los documentos de la plantilla se importen de forma más natural a los nuevos documentos complementarios, en lugar de ir a notas "vía".
• Todo esto a través de un preset :-)

@paulfelton , ¿necesitas algo de mí?

@ndelangen, no estoy seguro. Como habrás deducido, soy bastante nuevo tanto en Stencil como en Storybook, así que acabo de articular lo que puedo sacar de las discusiones de varios temas, google, etc.

También probé un repositorio de inicio, muy inspirado pero con todos los grandes esfuerzos en este número (¡gracias a todos!).

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

Utiliza @storybook/web-components , trabajando con los complementos esenciales (por ejemplo, controles, acciones). Últimas versiones de todo en esta etapa.

Alguna integración adicional entre el servidor de desarrollo de Stencil y el marco de vista previa de Storybook (por lo que la superposición de error de Stencil aparece en línea en Storybook - ¡mejor DX!) (Verifique ./storybook/preview-body.html y ./src/index.html para los deets).

~ Mezclado el devserver Stencil en start-storybook para que ejecute un solo comando y haga girar la plantilla detrás de escena. ~
EDITAR: simplificado esto con concurrently + wait-on - espere a que Stencil gire, luego continúe con Storybook

Los cambios de código (en los componentes de la plantilla o en las historias del libro de cuentos) volverán a cargar el marco de vista previa (no toda la aplicación del libro de cuentos). No es un HMR adecuado, ¡pero es bastante agradable desarrollarlo!

Bonito. El enlace no funciona.

Vaya, el repositorio es público ahora ^

He reunido un repositorio repetitivo usando stencil v2 y @ storybook / web-components v6 aquí: https://github.com/bjankord/stencil-storybook-boilerplate

También hay un repositorio en https://github.com/miriamgonp/stencil-web-components-boilerplate creado por @miriamgonp desde el canal de discordia Storybook / Stencil. ¿A alguien le apetece combinar estos modelos emergentes? ;-)

Estos dos repositorios se ven geniales. Si se consolidaran en uno con sería una buena adición. Y si alguien estuviera dispuesto a contribuir con un tutorial en Intro to Storybook basado en estos dos repositorios, lo agradeceríamos mucho. Avíseme si alguien está dispuesto a ayudarnos con esto y con mucho gusto iría a ayudar a los miembros de la comunidad que usan Stencil.

obtuve una solución adecuada de hmr;) próximamente!

obtuve una solución adecuada de hmr;) próximamente!

¡aquí está!
Stencil 2+ y Storybook 6+ (la versión Old Stencil también debería funcionar;))
https://github.com/dutscher/stencil-storybook
diviértete y anima

editar: con libro de cuentos en gh-pages https://dutscher.github.io/stencil-storybook/index.html

Cambié esto ^^ a nuestro proyecto la semana pasada y después de eliminar los bits que no son relevantes para nosotros (Bootstrap, scss, cromático, etc.) y arreglar un par de cosas menores (por ejemplo, el nombre de package.json no funciona en todos los lugares donde se importa debido a que está en @ myorg / my-proj) ha funcionado muy bien.

¡Lo he estado usando durante un día o dos y el HMR es excelente!

@elwynelwyn ¿Crees que hay algo que tengamos que hacer del lado del libro de cuentos?

@ndelangen las cosas importantes son:

1. el proxy https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. la inyección de producción de la plantilla a través de main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. y scripts npm simples y mínimos para dev y prod https://github.com/dutscher/stencil-storybook/blob/master/package.json

salud