Dupliquer à #1870 et #3423. Continuons une discussion là-bas

Nouvelle version de démarrage pour le pochoir actuel et SB 5 à créer

@Edd-Strickland veut travailler sur une version support stencl 🎉

J'ai mis à niveau le démarreur polymère avec pochoir vers la dernière version de SB j'ai besoin d'aide pour retirer le polymère et ajouter le conformeur de pochoir maintenant

Salut,

@Edd-Strickland juste pour information, j'ai implémenté Stencil dans Storybook comme vous l'avez fait dans votre starter, dans ce projet : https://github.com/vogloblinsky/nutrition-web-components

J'ai utilisé le démarreur HTML de Storybook.

Pour l'instant avec Storybook & Stencil, il me suffisait de :

• ajouter un en-tête personnalisé pointant vers chaque fichier JavaScript racine généré par Stencil
• ajouter des fichiers statiques générés par Stencil dans Storybook

Le principal problème, je pense, est l'utilisation de Webpack par Storybook pour gérer les fichiers JavaScript importés dans une histoire. Le workflow idéal consiste à importer uniquement le fichier JS du composant Web.

Oui, c'est ce qui a été fait précédemment, mais avec la version polymère, cela signifie qu'en important des implémentations W/C statiques simples, vous devez mettre à jour à chaque fois votre histoire, ce qui semble limitatif.

Salut à tous, j'ai créé un wrapper qui peut être installé sur un projet de type pochoir component . J'espère que ça aide. https://github.com/nisheed2440/stencil-storybook-wrapper

ça a l'air vraiment bien je testerai lundi. Bon travail :)

Cela fera-t-il partie intégrante de Storybook ? J'en ai désespérément besoin !

@otw On essaie, pourriez-vous nous aider ?

@ndelangen Je serais heureux de tester des choses et de fournir des commentaires/rapports de bogues.

Cela fonctionnerait-il avec LitElement (et les composants Web en général) ou simplement avec Stencil ?

@nisheed2440 ton emballage semble prometteur, je

@nisheed2440 J'ai été très occupé (désolé tout le monde) mais j'ai eu une très petite fenêtre aujourd'hui pour tester une version très vanille de ceci localement et c'est vraiment bien. fonctionne vraiment bien.

va passer du temps là-dessus la semaine prochaine à essayer de l'intégrer dans un projet existant pour voir comment cela pourrait fonctionner pour les utilisateurs / projets de pochoir existants.

Je l'ai testé ce matin et ça marche plutôt bien aussi ! GJ c'est vraiment facile à installer. J'ai installé et testé quelques addons :

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

Tout fonctionne bien, je viens de trouver un problème avec addon-knobs https://github.com/storybooks/storybook/issues/5017 Mais il existe une solution de contournement et cela devrait être corrigé très bientôt, je pense.

J'ai passé les 2 dernières semaines à jouer avec StencilJS et Storybook et j'ai fait un livestream où je couvre ma solution. Je pense qu'il existe un bien meilleur moyen, mais j'ai pu obtenir le HMR et la plupart des plugins pour fonctionner avec peu de problèmes. J'adorerais vos commentaires sur la façon d'améliorer ou d'importer les chargeurs à partir du lot de pochoirs de distribution.

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

Et voici le repo ! ^_^
https://github.com/MadnessLabs/enjin-components

@nisheed2440 Bonjour,
quand je cours, il découvre toutes mes histoires mais toutes les captures d'écran sont vides. il manque probablement le pochoir lorsque vous essayez de rendre la capture d'écran du composant sur le serveur chromatique

@nisheed2440 Merci beaucoup pour ce très bon effort. Espérons que cela donne à l'équipe ici une longueur d'avance dans la bonne direction. Les pochoirs et les livres de contes sont idéaux l'un pour l'autre.

Salut à tous! On dirait qu'il n'y a pas eu grand-chose sur ce sujet ces derniers temps. S'il y a encore des questions, des commentaires ou des bugs, n'hésitez pas à poursuivre la discussion. Malheureusement, nous n'avons pas le temps d'aborder chaque problème. Nous sommes toujours ouverts aux contributions, veuillez donc nous envoyer une demande de tirage si vous souhaitez aider. Les problèmes inactifs seront fermés après 30 jours. Merci!

Quelqu'un veut ramasser ça ?

Mon équipe utilise StencilJS + Storybook pour notre bibliothèque de composants communs et j'aimerais contribuer. Peut-être que quelques-uns d'entre nous peuvent remettre cette chose sur les rails...

On dirait qu'il y a beaucoup d'intérêt, par exemple https://twitter.com/dboskovic/status/1120336958008348672

Une victoire facile serait de publier un package @storybook/preset-stencil qui emballe la configuration de @popcorn245 dans un préréglage de livre de contes . Je dois encore terminer les documents pour cela, mais je l'utilise pour la prochaine version de Storybook Docs et c'est simple et comment la plupart des configurations SB fonctionneront à l'avenir.

Je serais heureux de guider tous ceux qui veulent le ramasser.

Hé @shilman ,

Une bien meilleure implémentation se superposerait au compilateur Stencil et permettrait l'utilisation de JSX comme avec les composants React, mais c'est MHO.

De plus, Stencil One est sur le point d'être abandonné avec d'énormes changements, il peut donc être bon de mettre des examinateurs sur ce journal des modifications pour s'assurer que quiconque y travaille est au courant de ce qui se passe dans le pipeline.

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

Ce fil m'a été extrêmement utile, en particulier la configuration de @popcorn245. Personnellement, j'utilisais @stencil/state-tunnel , ce qui a cassé cette configuration. Heureusement, j'ai pu le faire fonctionner avec quelques ~hacks~ mineurs en exécutant :

npm i -D [email protected]

Et en ajoutant ceci à .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;
};

Commencer à expérimenter cela aussi et (comme mentionné ailleurs) utiliser concurrently semble fonctionner très bien pour moi (pour l'instant). J'ai créé un projet de démarrage rapide qui comprend tout ce dont vous avez besoin pour être opérationnel à la fois avec le pochoir et le livre de contes. Vous utilisez déjà la dernière version de pochoir.

Découvrez-le ici : stencil-storybook-starter

@fvaldes33 Sympa ! L'a marqué. En fait, je viens de passer à la version bêta de Stencil One et ma configuration est similaire.

La seule différence pour moi était d'utiliser stencil build --watch (prod, pas dev) car les temps de construction sont très rapides et il est plus facile de consommer la version prod dans Stencil (en particulier avec les styles globaux et autres importations).

@fvaldes33 comment pouvez-vous référencer le build/components.js dans votre preview-head.html comme ça ? Je dois fournir le chemin complet, par exemple http://localhost :3333/build/components.js. Mais j'aimerais ne pas avoir à faire ça.

(Je n'utilise pas votre démarreur, mais j'utilise le démarreur de composant de pochoir avec une nouvelle installation de storybook/html)

ÉDITER:
Je me suis rendu compte que je démarrais le livre de contes sur le port 6006 au lieu du dossier www. problème résolu!

On dirait que beaucoup d'entre nous ont des solutions similaires (y compris moi https://github.com/jagreehal/stencil-boilerplate), mais j'aimerais vraiment des mises à jour chaudes/en direct lorsque je modifie un composant Stencil. Actuellement, je dois actualiser manuellement le navigateur pour recharger Storybook.

Existe-t-il une liste à puces des exigences à remplir ? Je serais heureux de participer si je savais ce qui devait être construit.

Quel est l'état actuel ? Pouvons-nous contribuer ? J'aimerais voir ça!

J'ai suggéré de contribuer un préréglage ci-dessus.

• Les préréglages sont documentés ici : https://storybook.js.org/docs/presets/introduction/
• Il existe un dépôt pour les préréglages de la communauté ici : https://github.com/storybookjs/presets

Si quelqu'un voulait créer un préréglage basé sur les modèles ci-dessus, je serais heureux de vous aider du côté du livre de contes. Je ne connais pas le côté Stencil.

Je viens de poster mon projet là-bas pour tous ceux qui le veulent. Voici les fonctionnalités :

• génération automatique d'histoires
  
  
  
  • génération automatique de boutons pour tous les @Props sur vos composants
  
  
  • possibilité de personnaliser les boutons utilisés pour chaque accessoire (bien que le code fasse un bon travail pour deviner les chaînes, les nombres, les booléens, les objets, les dates et les couleurs).
  
  
  • possibilité de définir plusieurs états qui sont rendus sur une seule page, chacun avec un titre, une description et un extrait de code copiable (une sorte d'implémentation de chapitres légers)
  
  
  • possibilité de définir des notes pour chaque composant (généralement vous voulez le readme généré)
  
  
• reconstruction/rechargement en direct des composants du gabarit (c'est toujours un peu bancal - parfois vous devez actualiser le navigateur)
• est livré avec le module complémentaire viewport

Dites moi ce que vous en pensez : https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx Cela a l'air génial. Tweetez à ce sujet et mentionnez @storybookjs et je RT depuis le compte du livre de contes. Et si vous voulez écrire un article à ce sujet, je serais heureux de travailler avec vous pour le faire connaître. Je pense qu'il y a une demande assez importante ici.

Travail incroyable

OK, j'ai tweeté (je ne twitter pas beaucoup). De plus, je n'ai pas de blog :/, mais je suis heureux de préparer quelque chose si quelqu'un veut le publier.

Pendant que le projet fonctionne, je l'ai préparé à la hâte et je ne l'ai pas vraiment rendu facile à personnaliser. Une partie du code est vraiment fragile car je dois charger et fusionner plusieurs fichiers afin de rendre chaque composant individuel. J'espère avoir des commentaires avant de passer du temps à rendre cela plus consommable.

Je suis curieux de voir à quoi ressemblerait un préréglage. La plus grande chose qui serait bien est un preset JSX qui ne réagit pas. Cela permettrait un rendu un peu plus facile et la génération de modèles en plus de la variété storybook-html, et cela n'a pas grand-chose à voir avec le pochoir. Plusieurs addons devraient également être mis à jour pour rendre cela utilisable, et je ne suis pas sûr d'être le meilleur pour coordonner cet effort. Dans tous les cas, dites-moi ce que je peux faire pour vous aider.

@DesignByOnyx Avez -vous une chance de sauter sur notre Discord ? https://discordapp.com/invite/UUt2PJb

J'aimerais discuter davantage de la diffusion de ce travail sur le blog Storybook ainsi que de la promotion dans la communauté des pochoirs.

J'ai joué avec @storybook/html pour Stencil et l'expérience "fonctionne tout simplement". Vous effectuez essentiellement les opérations suivantes :

1. Utilisez concurrently pour démarrer le serveur Storybook et stencil build --watch "en parallèle"
2. Commencez storybook avec le drapeau -s dist , de sorte que votre Stencil dist soit servi en tant que fichiers statiques.

3. Configurez .storybook/preview-head.html pour inclure une balise de script comme :

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

Et c'est tout! Le support html emploi fonctionne pour tous vos besoins en composants Web.

Ce que j'aimerais voir, c'est quelque chose comme @storybook/stencil qui a la même expérience (et le même code) que le package html du côté de la création d'histoires, mais

1. Les résumés exécutent le processus de génération Stencil dans le cadre de Storybook, de sorte que la configuration de concurrently n'est pas requise
2. Ajoute ces balises script pour vous
3. Se connecte à l'actualisation automatique lorsque vos composants Stencil sont reconstruits

Y a-t-il un intérêt pour quelque chose comme ça? Je suis en train de vendre mon entreprise sur Stencil et Storybook, et en supposant que cela gagne du terrain, j'aurai du "temps de travail" pour rendre cette histoire (excusez le jeu de mots) vraiment sympa autour de Storybook + Stencil jouant ensemble.

Le travail que @DesignByOnyx a fait est vraiment génial, mais vous devez en quelque sorte _démarrer_ vos composants Stencil avec ce kit et ignorer la documentation "normale" pour Stencil. Si Storybook peut fournir un package pouvant être superposé au kit de démarrage Stencil "normal", vous pouvez facilement ajouter une configuration Storybook à un ensemble existant de composants Stencil.

Merci pour le super résumé @alexlafroscia. Je pense que votre proposition a beaucoup de sens. L'HMR ne démarre-t-il pas automatiquement lors de la reconstruction de Stencil ? Si oui, une idée pourquoi pas ?

@igor-dv Est-il possible d'ajouter à preview-head.html dans un préréglage ?

@Hypnosphi C'est peut-être un exemple intéressant pour vos efforts multi-framework. Dans ce cas, aucun décorateur n'est nécessaire (apparemment) mais un compilateur complet est nécessaire.

@alexlafroscia à quoi ressemble un exemple d'histoire dans votre cas ?

Dans l'entreprise où je travaille, nous jouons avec les packages Storybook HTML et StencilJS depuis un certain temps. Je serais heureux de contribuer!

@alexlafroscia De très bonnes idées, en effet ce serait bien d'avoir un support complet pour ce compilateur. Voici quelques autres idées :

• Utilisez les fonctionnalités de StencilJS JSX (basées sur Preact pour le moment) pour écrire des histoires de manière plus facile à gérer. L'utilisation de simples anciens JS ou même de modèles littéraux peut être fastidieux ...
• Avoir un module complémentaire Smart Knobs pour les composants Web. @DesignByOnyx a fourni une bonne base pour cela.

Cet article couvre la feuille de route en cours dans StencilJS: Feuille de route Stencil automne 2019 . Notamment :

API publiques du compilateur

Un autre domaine sur lequel nous nous concentrons également est de nous assurer que le compilateur peut fonctionner dans un navigateur et utilisé par d'autres outils. Nous avons déjà travaillé avec quelques équipes géniales telles que Stackblitz, CodeSandbox et WebComponents.dev. Aux niveaux les plus bas, le compilateur fonctionne déjà sans s'exécuter sur un environnement NodeJS, donc techniquement, ce n'est pas un refactor majeur, mais plus encore, il expose simplement les API correctes.

Nous constatons également de nombreux domaines à améliorer pour garantir que le compilateur est facile à utiliser par d'autres outils NodeJS, notamment Rollup, Parcel, WebPack et Bazel. Si vous êtes le mainteneur d'un outil, qu'il s'agisse d'un outil en ligne ou d'un environnement NodeJS, et que vous cherchez à implémenter le compilateur Stencil, n'hésitez pas à nous contacter et nous serons ravis de vous aider !

Peut être utile!

L'HMR ne démarre-t-il pas automatiquement lors de la reconstruction de Stencil ? Si oui, une idée pourquoi pas ?

@shilman Cela ne <script> pointant vers les actifs construits.

à quoi ressemble un exemple d'histoire dans votre cas ?

@Hypnosphi Ils ressemblent à quelque chose comme ça (une histoire pour le my-component par défaut que Stencil génère dans le package initial qu'ils créent lorsque vous 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>
  `);

Utilisez les fonctionnalités de StencilJS JSX (basées sur Preact pour le moment) pour écrire des histoires de manière plus facile à gérer. L'utilisation de simples anciens JS ou même de modèles littéraux peut être fastidieux ...

@darondel Je suis tout à fait d'accord avec les préoccupations concernant l'expérience du développeur de ne pas avoir JSX dans les fichiers de création d'histoire. J'ai utilisé cette approche dans le passé, avant que @storybook/html soit disponible, et j'ai utilisé l'expérience React qui était correcte.

Une partie du désir de garder les choses aussi proches de l'expérience "par défaut" html est de faire en sorte que les histoires servent de documentation sur la façon de les utiliser du point de vue HTML - sinon elles sont liées à quelque chose comme Preact, qui au moins dans mon organisation, n'est utilisé nulle part ailleurs (nous sommes principalement une boutique Ember.js).

Vous avez mentionné que les balises de modèle ne seraient pas une excellente expérience, mais je pense que quelque chose comme htm pourrait être une bonne option. Cela permet également de garder le processus de construction agréable et simple, car il n'y a pas d'étape de construction requise, mais cela peut faciliter l'interaction avec quelque chose comme Knobs.

Je pensais aussi qu'essayer d'intégrer quelque chose comme la prochaine DocsPage pourrait être intéressant ! Je parie qu'une partie du travail déjà effectué par @DesignByOnyx pourrait être utile ici, de sorte qu'il existe un moyen de lire les "métadonnées" d'un composant Stencil pour générer automatiquement les informations de documentation. Probablement pas un souci "v1", mais quelque chose qui serait vraiment cool à voir pour une "v1.1" ! J'aime beaucoup votre idée de faire quelque chose comme cet addon auto-knobs aussi, ce serait vraiment pratique!

Avec DocsPages publié aujourd'hui avec Storybook 5.2, j'ai fait des recherches pour savoir s'il serait possible d'obtenir des informations sur les accessoires et autres à partir de Stencil et de les rendre dans Storybook. Je pense que cela devrait être possible, mais souligne clairement à quel point il serait utile d'avoir un module complémentaire ou un préréglage adapté à l'utilisation de Storybook avec Stencil pour contenir un tas de la "colle" nécessaire pour cela.

Je vais m'embrouiller un peu plus avec les choses cette semaine et voir si je peux mettre quelque chose ensemble.

@alexlafroscia aimerait standardiser la façon dont les différents frameworks communiquent ces données. J'ai vu quelque chose d'intéressant de Jetbrains (web_types? Cc @elevatebart ) et @atanasster travaille également dans ce domaine pour mettre en cache les types d'accessoires dans les fichiers JSON pour les performances. Je pense que nous devrions unifier tout cela en 6.0

Je ne suis pas familier avec le travail de Jetbrains -- je vais devoir vérifier ça ! Si vous avez des informations spécifiques qu'il serait utile d'examiner, j'aimerais que vous me les fassiez parvenir !

Dans le cas de Stencil, je pense que le "meilleur pari" sera de faire en sorte que le processus de construction de Stencil génère les documents JSON dans un emplacement bien connu par un module complémentaire Stencil Storybook ou configurable. Cet objet contient toutes les informations sur les accessoires attendus, les événements émis et même le contenu du fichier readme pour chaque composant (sans la documentation des accessoires générés automatiquement). Je pense que nous pourrions créer une histoire vraiment convaincante pour remplir la Storybook DocsPage avec les informations de ce fichier 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": []
    }
  ]
}

C'est une sorte de piratage (je l'ai écrit en écrivant la sortie JSON dans dist/output.json , puis en utilisant fetch pour récupérer le fichier) mais j'ai pu obtenir le rendu DocsPage pour un composant Storybook en remplaçant simplement les accessoires de slot que le composant DocsPage peut prendre.

La table Props n'est pas parfaite, mais elle est plutôt bonne ; la sortie Stencil fournit tous les accessoires attendus par la table, puis certains. Tout ce qui se trouve dans le readme.md du composant sera rendu en haut du fichier.

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

Mise à jour : pour aller plus loin, j'ai défini un DocsPage (plutôt que de simplement remplacer les emplacements) pour obtenir une deuxième table avec la documentation de tous les styles personnalisés.

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 page personnalisée corrige également le fait que chaque histoire a par défaut une 500px de

@alexlafroscia C'est un travail incroyable, énorme !

Pour info, nous allons généraliser les trucs de la table d'accessoires dans la 5.3. Plus précisément, les frameworks comme Vue ont le concept de slots et d'événements, ils doivent donc être divisés en leurs propres tables. Peut-être que votre travail de styles pourrait utiliser le même mécanisme. https://github.com/storybookjs/storybook/issues/8123

Le projet Jetbrains auquel je faisais référence est celui-ci (cc @piotrtomiak): https://github.com/JetBrains/web-types

Je ne l'ai pas regardé en détail et je ne sais pas si c'est bon pour nous. Cependant, si cela correspond à nos cas d'utilisation et n'ajoute pas trop de bêtises supplémentaires, je préfère utiliser une norme existante plutôt que d'inventer la nôtre.

@shilman Merci d'avoir examiné nos efforts (JetBrains) pour apporter une norme pour l'échange d'informations sur les métadonnées aux bibliothèques de composants Web ! Notre motivation initiale était simplement de fournir une bonne complétion de code pour les composants Vue dans les fichiers HTML, mais nous avons découvert qu'il y avait beaucoup plus à faire avec un tel standard, nous l'avons donc conçu en gardant à l'esprit un format d'échange d'informations générique (IDE, outillage, documentation). Jusqu'à présent, nous nous sommes concentrés sur le framework Vue, mais nous avons toujours gardé à l'esprit la prise en charge des composants Web ou d'autres frameworks. La norme web-types est assez récente, mais nous avons déjà entendu des retours positifs de la communauté et des utilisateurs de Vue. Je fais activement la promotion de la spécification dans la communauté Vue, mais c'est tellement génial de susciter l'intérêt d'autres communautés !

Je pense qu'il pourrait y avoir certaines choses manquantes dans le schéma JSON web-types , qui seraient spécifiques à votre framework et celles-ci peuvent être ajoutées à la spécification. Les éléments spécifiques à Vue sont par exemple préfixés par vue . Il manque également une section entière pour documenter le support CSS, sur laquelle nous pourrions travailler pour l'inclure. Donc, si vous pensez que cela vaut la peine de donner une chance à web-types n'hésitez pas à signaler des problèmes ou à créer des PR pour les fonctionnalités manquantes.

L'effet secondaire de la documentation de vos composants au format web-types sera une bonne complétion du code lorsque les développeurs incluront votre bibliothèque dans leur projet. Nous prévoyons de mettre en œuvre un tel support générique basé sur des fonctionnalités communes web-types pour tous les frameworks dans un avenir très proche. Je suis à peu près sûr qu'avec une plus grande acceptation du format par la communauté, d'autres IDE suivront avec la prise en charge du format, ce qui profiterait à tout le monde :)

@alexlafroscia travail fantastique ! L'intégration de Stencil et Storybook (avec https://github.com/storybookjs/storybook/issues/7644) semble bonne

Merci pour le lien vers ce problème ! À l'origine, j'ai emprunté un chemin similaire (en essayant d'une manière ou d'une autre d'utiliser les fichiers README existants et de les extraire directement dans la DocsPage), mais j'ai finalement trouvé plus facile d'utiliser simplement les données que Stencil met dans le fichier JSON docs, car il n'inclut pas la table. des accessoires et tout (puisque ces données sont ailleurs dans le fichier JSON et les données structurées sont parfaites pour créer une table personnalisée à partir de).

@alexlafroscia Merci d'avoir partagé vos découvertes. Puis-je demander comment puis-je déboguer le CustomDocsPage ?

J'ai essayé de l'ajouter avec addParameters et il ne semble pas utiliser la coutume mais la valeur par défaut à la place.

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>

Le WC lui-même est chargé dans la page de documentation du livre de contes, même sans utiliser le CustomDocsPage .
Existe-t-il un moyen de déboguer le composant ? J'ai essayé d'ajouter des journaux, mais je n'en vois aucun.

Merci d'avance.

J'ai également rencontré ce problème - j'ai dû remplacer le composant DocsPage au niveau "composant"

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

est-il possible de faire fonctionner @storybook/html avec jsx ? rendrait l'écriture de mes histoires pour les composants de pochoir beaucoup plus facile. obtiendrait la saisie, la saisie semi-automatique et n'aurait pas à utiliser document.createElement ou de grandes chaînes de modèle. a essayé de tromper le texte dactylographié avec un // @jsx en haut en utilisant le package de réaction, mais cela n'a pas fonctionné.

@vidarc quelle était l'erreur lorsque vous avez fait cela? Avez-vous une configuration babel personnalisée ?

pas beaucoup de personnalisation. quelques éléments ajoutés au webpack. le premier script dactylographié se plaint de Cannot find name 'h' . mon tsconfig a jsx = réagir et jsxFactory = h. Je peux faire disparaître ces avertissements en utilisant le paramètre pragma // <strong i="6">@jsx</strong> h en haut, mais j'obtiens ensuite une erreur de livre de contes car il ne renvoie pas de nœud ou de chaîne DOM.

va essayer: https://github.com/developit/vhtml suivant

EDIT : fonctionne très bien avec jsx. Je n'arrive pas à comprendre comment le faire fonctionner avec dactylographié :/

@vidarc si h signifie hyperscript, il renvoie un objet personnalisé qui n'est ni une chaîne ni un élément DOM

vhtml semble la voie à suivre

Pour info, nous avons un PR entrant pour une application web-components : https://github.com/storybookjs/storybook/pull/8400

Quelqu'un ici peut-il commenter la façon dont cela interfère avec ce problème ? @vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

Je n'ai pas encore testé #8400, mais avant de tester, j'ai pu faire fonctionner Stencil "live" via:

1. Exécutez start-storybook -s ./www dans une fenêtre.
2. Exécutez stencil build --dev --watch dans un autre.
3. Mettez .storybook/config.ts jour

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

C'est un peu maladroit.

La raison pour laquelle je n'ai pas pu enquêter sur des alternatives comme https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js est que import "./my-component" échoue depuis import { Component } from "@stencil/core" n'est pas une exportation valide, et en fait supprimée dans le cadre du processus de génération :

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

Quelqu'un a-t-il réellement une implémentation/configuration de pochoir et de livre de contes qui fonctionne dans IE11 ? J'ai essayé chaque implémentation mentionnée dans ce fil sans succès.
toujours rencontrer un rejet de promesse non géré TypeError: schéma non valide avec les versions de gabarit 1.2.4 -> 1.7.4.

@shilman J'ai pu obtenir des composants de pochoir sur l'application web-components mais il me semble qu'il ne fait que les lire de la même manière que tout le monde le fait avec le html , et HMR ne le fait pas t réagir aux mises à jour des composants du pochoir eux-mêmes.

Ce serait vraiment mieux s'il y avait un moyen d'intégrer le compilateur de pochoirs dans la séquence d'exécution du livre de contes comme c'est le cas pour React, Angular, etc.

Je vais continuer à essayer des moyens de faire "vivre" les composants Stencil, mais le problème architectural que j'ai rencontré est que, sauf erreur, _les composants Stencil nécessitent une étape de construction personnalisée pour fonctionner_ ( stencil build --dev --watch ), et il n'y a pas d'équivalent d'exécution.

J'ai essayé de faire import { MyComponent} from "./MyComponent" , mais cela échoue car @Component n'est pas réellement exporté à partir de @stencil/core . En fait, il est supprimé dans le cadre de l'étape de construction :

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

Sachant cela, mon prochain test consiste à conserver l'étape de construction avec les liaisons React (https://github.com/ionic-team/stencil-ds-plugins), mais à remplacer la logique HMR pour utiliser les histoires React (au lieu de HTML) .

Espérons que cela permettra au storybook UX de correspondre à celui de React, laissant Stencil uniquement à l'implémentation des composants.

Je ne pense pas que ce soit la fin du monde d'exiger que stencil build s'exécute en parallèle en mode dev :

• Nous pourrions indiquer à l'utilisateur comment exécuter cela simultanément dans leur package.json
• Un préréglage de gabarit pourrait engendrer ce processus au démarrage, puis le tuer à l'arrêt si nous voulions le cacher à l'utilisateur

Une solution avec moins de pièces mobiles est préférable, mais ne laissons pas le bien être l'ennemi du bien ici. AFAIK pour l'instant, tout le monde utilise toujours son propre support de pochoir en ce moment, et il y a une belle opportunité d'aider à simplifier les choses pour beaucoup de gens ici...

L'utilisation simultanée est ce qui fonctionne pour moi actuellement.

Il y a certainement des étapes incrémentales.

La principale chose qui m'a attiré en tant qu'utilisateur était "pourquoi" le pochoir ne fonctionnait pas de la même manière
comme mes histoires de réaction, qui ne peuvent pas être résolues sans un pochoir spécifique
changements.

Le jeu. 31 octobre 2019, 17:02 Michael Shilman [email protected]
a écrit:

Je ne pense pas que ce soit la fin du monde d'exiger que la construction d'un pochoir soit
fonctionnant en parallèle en mode dev :

• Nous pourrions indiquer à l'utilisateur comment exécuter cela simultanément
  https://www.npmjs.com/package/concurrently dans leur package.json
• Un préréglage de gabarit pourrait engendrer ce processus au démarrage, puis tuer
  à l'arrêt si nous voulions le cacher à l'utilisateur

Une solution avec moins de pièces mobiles est préférable, mais ne laissons pas bon
être l'ennemi du grand ici. AFAIK pour l'instant tout le monde continue de rouler
propre support de pochoir en ce moment, et il y a une belle opportunité d'aider
simplifier les choses pour beaucoup de gens ici...

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVQXHJJKTDNW156P,TUL52HS4DFVREXG43VMVBW63LNMVXHJJKTDN
ou se désinscrire
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

une autre approche consisterait à séparer clairement l'interface utilisateur (livre de contes) de l'aperçu (pochoir). Avec le livre de contes autonome, cela devrait déjà être possible.
De cette façon, vous pourriez même pré-construire un livre de contes, ce qui signifierait des temps de démarrage beaucoup plus rapides.

Et puis, en quelque sorte, vous n'utiliseriez que la construction de pochoirs pendant le développement (mais toujours en utilisant l'interface utilisateur des livres de contes). Ce qui signifierait que vous obtiendrez tous les avantages pris en charge par le serveur de développement de stencil sans avoir à penser à l'interopérabilité avec la configuration du pack Web de storybooks.

Nous avons déjà étudié cela en utilisant es-dev-server pour alimenter l'aperçu pour web-components . Nous avons en quelque sorte un POC... mais il y a encore quelques aspérités.
Cependant, je suppose que la même approche devrait également fonctionner pour le pochoir.

Si quelqu'un a des questions ou serait intéressé à enquêter sur cela pour un pochoir ou à aider à créer un projet de référence en utilisant es-dev-server alors je suis sûr que @LarsDenBakker est heureux de partager plus de détails 🤗

PS : tout cela n'est possible que grâce au livre de contes doté de cette configuration iframe géniale avec des messages de canal pour séparer l'interface utilisateur de l'aperçu 🤗

salut à tous

Après un certain temps et beaucoup de bricolage, voici mon dépôt pour une implémentation de livre de contes intégré au pochoir https://github.com/Edd-Strickland/stencilbook.

Heureux de discuter davantage, espérons-le, la plupart des choses sont évidentes à partir du fichier readme et en regardant le package.json pour les scripts.

Ceci est construit à l'aide du composant de démarrage de pochoir vanille et de l'implémentation HTML du livre de contes vanille.

Veuillez regarder et revoir...

StencilBook - Un début de livre d'histoires au pochoir

Il s'agit d'un projet de démarrage pour créer un composant Web autonome à l'aide de Stencil et Storybook.

Pochoir

Stencil est un compilateur permettant de créer des applications Web rapides à l'aide de composants Web.

Stencil combine les meilleurs concepts des frameworks frontend les plus populaires dans un outil de compilation plutôt que d'exécution. Stencil utilise TypeScript, JSX, une minuscule couche DOM virtuelle, une liaison de données unidirectionnelle efficace, un pipeline de rendu asynchrone (similaire à React Fiber) et un chargement paresseux prêt à l'emploi, et génère des composants Web 100 % basés sur des normes qui s'exécutent dans n'importe quel navigateur prenant en charge la spécification Custom Elements v1.

Les composants Stencil ne sont que des composants Web, ils fonctionnent donc dans n'importe quel framework majeur ou sans framework du tout.

Commencer

Cloner le dépôt

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

Accédez au répertoire de base :

cd stencilbook

Installez les modules :

npm install

et exécutez une compilation pour l'ensemble du dépôt :

npm run build:all

Après ce livre de contes :

npm run storybook

Les autres commandes de ce référentiel incluent :

Construire un pochoir :

npm run stencil

Démarrez le pochoir directement en mode servir/regarder ; Utile pour modifier directement les composants du pochoir :

npm run stencil:start

Exécutez un livre de contes et une construction de pochoir avec watch and serve, en supprimant toutes les versions précédentes construites et serviront localement :

npm run storybook:build:all

Servir le livre de contes localement :

npm run storybook:serve

Réinitialiser les modules ; Supprime et réinstalle les modules de nœud :

npm run reset:modules

Pour exécuter les tests unitaires des composants, exécutez :

npm test

Test

Pour exécuter des tests en mode montre :

npm run test.watch

Générer de nouveaux composants

Pour générer automatiquement de nouveaux composants Stencil :

npm run generate

@Edd-Strickland C'est un bon début ! Si je pouvais suggérer que vous ajoutiez peut-être un script de démarrage pour un démarrage plus facile, j'ai fait "start": "npm-run-all -p stencil:start storybook" et cela fonctionne plutôt bien, sauf qu'il n'y a pas de rechargement à chaud car le livre de contes ne semble pas reconnaître quand le pochoir est construit.

... c'est à moins que je rate quelque chose ?

@shilman il semble y avoir un package @storybook/web-components déjà dans le master en alpha, mais je ne vois pas Stencil référencé dans le README.md : https://github.com/storybookjs/storybook/tree/next/ app/composants web

Est-ce un effort parallèle ? Si non, connaîtriez-vous le problème correspondant ? Impossible de trouver lors de la recherche de web-components dans les problèmes. Trouvé la balise app: web-components , mais vient d'être ajouté à la version et un 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+

Je ne comprends pas ce qui est nécessaire pour ajouter un support de gabarit approprié au-delà de ce qui est fourni par @storybook/web-components . Je suis sûr que quelqu'un sur ce fil le sait bien!

@Edd-Strickland C'est un bon début ! Si je pouvais suggérer que vous ajoutiez peut-être un script de démarrage pour un démarrage plus facile, j'ai fait "start": "npm-run-all -p stencil:start storybook" et cela fonctionne plutôt bien, sauf qu'il n'y a pas de rechargement à chaud car le livre de contes ne semble pas reconnaître quand le pochoir est construit.

... c'est à moins que je rate quelque chose ?

Hmm excuses été occupé et aux conférences à la fin de la semaine dernière.

Je suis confus quant au problème que vous rencontrez, pourriez-vous le soulever via les problèmes de repo plutôt que sur ce fil pour plus de détails.

Cependant, si vous effectuez une installation, puis exécutez la commande storybook, le serveur de surveillance sera lancé en conséquence. Stencil auto HMR chaque fois que vous modifiez, ajoutez ou mettez à jour un composant pendant son exécution.

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

Je ne comprends pas ce qui est nécessaire pour ajouter un support de gabarit approprié au-delà de ce qui est fourni par @storybook/web-components . Je suis sûr que quelqu'un sur ce fil le sait bien!

Cela dépend, les composants Web fonctionnent avec les instances vanille. Je n'ai pas comparé les différences entre eux, mais le pochoir génère des composants Web, mais s'exécute en tant que compilateur pour W/C plutôt que d'être W/C par défaut.

Il y a donc sans doute besoin des deux. Un JS W/C natif et un pour le compilateur de stencil si vous souhaitez accélérer le prototype de W/C basé sur Stencil à côté du livre de contes, comme vous pourriez le faire avec un composant réactif ou angulaire.

Je n'ai pas le temps de rattraper @daKmoR pour discuter s'il s'agit d'une duplication ou d'une redondance compte tenu de leur travail, mais pour le moment, nous maintenons cette version.

Je suis récemment tombé sur Bulmil en raison de leur travail sur l'intégration de Stencil avec nuxt-stencil et de leurs exemples nuxt .

J'ai également compris qu'il existe un support de Storybook décent. Peut-être que ça vaut le coup d'oeil aussi. Je ne connais pas les éléments internes / en quoi ils diffèrent de l'état actuel de ce fil, mais cela fonctionne immédiatement dans Bulmil une fois que vous exécutez le livre de contes .

@storybook/addon-actions ne semble pas encore fonctionner ou je n'ai pas encore réussi à le faire fonctionner.

Peut-être pouvons-nous mettre @Gomah dans ce fil et entendre ses idées de collaboration pour améliorer le support des pochoirs pour les livres de contes ?

Récemment, je suis tombé sur Bulmil en raison de leur travail sur l'intégration de Stencil avec nuxt-stencil et de leurs exemples nuxt .

J'ai également compris qu'il existe un support de Storybook décent. Peut-être que ça vaut le coup d'oeil aussi. Je ne connais pas les éléments internes / en quoi ils diffèrent de l'état actuel de ce fil, mais cela fonctionne immédiatement dans Bulmil une fois que vous exécutez le livre de contes .

@storybook/addon-actions ne semble pas encore fonctionner ou je n'ai pas encore réussi à le faire fonctionner.
Certes, dans le référentiel ci-dessus, les actions supplémentaires fonctionneront, en tant que module complémentaire de livre de contes standard.

E2A : le livre de pochoirs pas la variante @Gomah .

L'objet avec l'intégration de base stencil / SB ci-dessus était simplement de créer une base qui permettait de storybook à storybook et de stencil à stencil, puis les deux à s'intégrer ensemble pour vous permettre d'avoir des composants Web créés via stencil dans un cadre de livre de contes.

J'ai collé un pic dans le sprint de mes équipes pendant les deux prochaines semaines pour voir si la version W/C fonctionnera aussi bien que cette itération et si nous pouvions convertir notre version existante que nous utilisons en version W/C.

Idéalement, tout fonctionnerait afin qu'il n'y ait pas de fragmentation des variantes W/C, mais contrairement aux implémentations W/C natives, Stencil n'est pas vraiment un framework. compilateur. Il peut donc toujours valoir la peine d'avoir la distinction de vous permettre d'écrire des composants JSX qui seront ensuite générés sous forme de W/C.

Ou c'est peut-être très simple.

Je vous le ferai savoir une fois que nous aurons terminé le pic.

pas beaucoup de personnalisation. quelques éléments ajoutés au webpack. le premier script dactylographié se plaint de Cannot find name 'h' . mon tsconfig a jsx = réagir et jsxFactory = h. Je peux faire disparaître ces avertissements en utilisant le paramètre pragma // <strong i="7">@jsx</strong> h en haut, mais j'obtiens ensuite une erreur de livre de contes car il ne renvoie pas de nœud ou de chaîne DOM.

va essayer: https://github.com/developit/vhtml suivant

EDIT : fonctionne très bien avec jsx. Je n'arrive pas à comprendre comment le faire fonctionner avec dactylographié :/

Salut @vidarc. Avez-vous pu faire fonctionner cela avec la syntaxe storiesOf() ? Si oui, je serais vraiment curieux de voir comment tu as fait. Avez-vous un exemple de code ou une base de code à partager ?

Bien que le livre de contes et le pochoir soient intégrés et fonctionnent bien dans notre projet, le plus gros problème que nous ayons est de devoir recourir à la création d'histoires avec document.createElement() pour les composants avec des accessoires d'objets, etc. Si vhtml peut résoudre ça, ce serait génial !

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

Je ne comprends pas ce qui est nécessaire pour ajouter un support de gabarit approprié au-delà de ce qui est fourni par @storybook/web-components . Je suis sûr que quelqu'un sur ce fil le sait bien!

Tu as raison, et je suis d'accord. J'ai remarqué dans le fichier README.md les dossiers inclus et j'ai vu d'autres frameworks de composants Web, mais pas de pochoir :

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

J'ai donc pensé que le pochoir n'était pas inclus pour une raison. Mais si cela fonctionne bien sans rien ajouter, cela me convient parfaitement.

Au fait, ce problème peut-il maintenant être fermé, car il est résolu par le préréglage des composants Web susmentionnés ?

pas beaucoup de personnalisation. quelques éléments ajoutés au webpack. le premier script dactylographié se plaint de Cannot find name 'h' . mon tsconfig a jsx = réagir et jsxFactory = h. Je peux faire disparaître ces avertissements en utilisant le paramètre pragma // <strong i="8">@jsx</strong> h en haut, mais j'obtiens ensuite une erreur de livre de contes car il ne renvoie pas de nœud ou de chaîne DOM.
va essayer: https://github.com/developit/vhtml suivant
EDIT : fonctionne très bien avec jsx. Je n'arrive pas à comprendre comment le faire fonctionner avec dactylographié :/

Salut @vidarc. Avez-vous pu faire fonctionner cela avec la syntaxe storiesOf() ? Si oui, je serais vraiment curieux de voir comment tu as fait. Avez-vous un exemple de code ou une base de code à partager ?

Bien que le livre de contes et le pochoir soient intégrés et fonctionnent bien dans notre projet, le plus gros problème que nous ayons est de devoir recourir à la création d'histoires avec document.createElement() pour les composants avec des accessoires d'objets, etc. Si vhtml peut résoudre ça, ce serait génial !

vous pouvez en faire des histoires CSF directement avec les dernières et échanger vos histoires dans ce format qui fonctionne bien. De plus, si vous importez des usines de données pour remplir les objets de données, vous pouvez simplement les utiliser pour hydrater vos accessoires....

@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+
Je ne comprends pas ce qui est nécessaire pour ajouter un support de gabarit approprié au-delà de ce qui est fourni par @storybook/web-components . Je suis sûr que quelqu'un sur ce fil le sait bien!

Tu as raison, et je suis d'accord. J'ai remarqué dans le fichier README.md les dossiers inclus et j'ai vu d'autres frameworks de composants Web, mais pas de pochoir :

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

J'ai donc pensé que le pochoir n'était pas inclus pour une raison. Mais si cela fonctionne bien sans rien ajouter, cela me convient parfaitement.

Au fait, ce problème peut-il maintenant être fermé, car il est résolu par le préréglage des composants Web susmentionnés ?

Je vais tester si cela fonctionne avec le pochoir et je ferai un rapport puis nous pourrons fermer. Inutile de terminer si ça ne marche pas vraiment avec le pochoir...

...

Salut @vidarc. Avez-vous pu faire fonctionner cela avec la syntaxe storiesOf() ? Si oui, je serais vraiment curieux de voir comment tu as fait. Avez-vous un exemple de code ou une base de code à partager ?
Bien que nous ayons un livre de contes et un pochoir intégrés et fonctionnant bien dans notre projet, le plus gros problème que nous ayons est de devoir recourir à la création d'histoires avec document.createElement() pour les composants avec des accessoires d'objets, etc. Si vhtml peut résoudre ça, ce serait génial !

vous pouvez en faire des histoires CSF directement avec les dernières et échanger vos histoires dans ce format qui fonctionne bien. De plus, si vous importez des usines de données pour remplir les objets de données, vous pouvez simplement les utiliser pour hydrater vos accessoires....

Merci. Je n'avais pas réalisé que le CSF est maintenant la façon recommandée d'écrire des histoires. Avez-vous réussi à faire fonctionner l'addon jsx avec vhtml btw, ou n'est-ce pas possible?

...

Salut @vidarc. Avez-vous pu faire fonctionner cela avec la syntaxe storiesOf() ? Si oui, je serais vraiment curieux de voir comment tu as fait. Avez-vous un exemple de code ou une base de code à partager ?
Bien que nous ayons un livre de contes et un pochoir intégrés et fonctionnant bien dans notre projet, le plus gros problème que nous ayons est de devoir recourir à la création d'histoires avec document.createElement() pour les composants avec des accessoires d'objets, etc. Si vhtml peut résoudre ça, ce serait génial !

vous pouvez en faire des histoires CSF directement avec les dernières et échanger vos histoires dans ce format qui fonctionne bien. De plus, si vous importez des usines de données pour remplir les objets de données, vous pouvez simplement les utiliser pour hydrater vos accessoires....

Merci. Je n'avais pas réalisé que le CSF est maintenant la façon recommandée d'écrire des histoires. Avez-vous réussi à faire fonctionner l'addon jsx avec vhtml btw, ou n'est-ce pas possible?

Ainsi, le JSX est analysé directement via le compilateur de stencil dans le shadow dom. Tant que vous utilisez l'intégration du compilateur dans le livre de contes, vous écrivez votre composant de pochoir standard, puis l'incluez dans l'histoire CSF, puis importez dans votre usine de données pour remplir les accessoires.

Le dépôt vanille avec lequel j'ai posté le fait hors de la boîte, pas besoin de plugins VHTML ou de quoi que ce soit d'autre, même pas besoin d'un wrapper, vous pouvez écrire directement en tant que pochoir et simplement sortir.

vous pouvez utiliser la syntaxe storyOf mais vous êtes alors enfermé dans le modèle classique document.createElement.
Par exemple cette vieille storysOf Syntax pour notre icône

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

pas beaucoup de personnalisation. quelques éléments ajoutés au webpack. le premier script dactylographié se plaint de Cannot find name 'h' . mon tsconfig a jsx = réagir et jsxFactory = h. Je peux faire disparaître ces avertissements en utilisant le paramètre pragma // <strong i="8">@jsx</strong> h en haut, mais j'obtiens ensuite une erreur de livre de contes car il ne renvoie pas de nœud ou de chaîne DOM.
va essayer: https://github.com/developit/vhtml suivant
EDIT : fonctionne très bien avec jsx. Je n'arrive pas à comprendre comment le faire fonctionner avec dactylographié :/

Salut @vidarc. Avez-vous pu faire fonctionner cela avec la syntaxe storiesOf() ? Si oui, je serais vraiment curieux de voir comment tu as fait. Avez-vous un exemple de code ou une base de code à partager ?

Bien que le livre de contes et le pochoir soient intégrés et fonctionnent bien dans notre projet, le plus gros problème que nous ayons est de devoir recourir à la création d'histoires avec document.createElement() pour les composants avec des accessoires d'objets, etc. Si vhtml peut résoudre ça, ce serait génial !

@robaxelsen
J'ai fini par utiliser @storybook/react et modifier la configuration webpack pour transformer les fichiers MD avec les fichiers MDX. Ensuite, juste un petit peu de code pour créer des boutons basés sur le gabarit de sortie json doc fourni. Pour le code du gabarit, nous utilisons la copie du livre de contes à partir de leur CLI et lions ces fichiers dans le fichier preview-head.html. Convient assez bien à mes objectifs.

@Edd-Strickland Merci beaucoup pour l'exemple et l'explication. Avec votre dernier exemple, je finis toujours par devoir passer des attributs par programme, en tant qu'accessoires sur l'élément. J'espérais pouvoir, soit avec vhtml soit avec un compilateur simple stencil, écrire mes histoires en JSX.

Donc au lieu de :

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

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

  return icon;
};

...Je souhaiterai écrire:

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

Tant pour la lisibilité que pour la facilité de création d'histoires. Ce n'est pas possible, alors ? Si c'est possible, pourriez-vous donner un exemple rapide?

Nous pouvons également parler dans le chat discord si cela est plus facile. Je suis Rob Axelsen#1373 .

EDIT : pour ajouter à ce qui précède, j'ai également consulté la documentation CSF et essayé avec la syntaxe JSX en important h , mais l'erreur s'affiche "En attente d'un extrait HTML ou d'un nœud DOM de l'histoire : "Simple Story" de "Composant".":

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

S'il s'agit d'écrire des histoires qui doivent définir des propriétés pour les composants Web, vous pouvez jeter un œil à @storybook/web-components . Il utilise lit-html pour créer déclarativement du html avec des propriétés.

Cela devrait fonctionner lorsque vous exécutez le livre de contes et le pochoir côte à côte :)

Sauf que le pochoir n'utilise pas de HTML éclairé. C'est un truc de Vue...

@shilman il semble y avoir un package @storybook/web-components déjà dans le master en alpha, mais je ne vois pas Stencil référencé dans le README.md : https://github.com/storybookjs/storybook/tree/next/ app/composants web

Comment télécharger et tester le package de composants Web, le référentiel lié ici n'a aucune action de clonage, etc. ?

@Edd-Strickland c'est juste un répertoire dans le monorepo du livre de contes principal

Sauf que le pochoir n'utilise pas de HTML éclairé. C'est un truc de Vue...

c'est un lit thing 🤔

Cependant, c'est la beauté des composants Web - peu importe ce que le pochoir utilise sous le capot. Vous pouvez utiliser lit-html ou tout autre moyen de définir vos histoires. Tout ce dont vous avez probablement besoin est un moyen d'écrire "html" avec des propriétés.

Pour lit-html, cela ressemblerait à ceci

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

Donc, si vous allez dans les DevTools dans Chrome dans l'histoire, vous pouvez sélectionner le composant allumé et vous pouvez lire les détails suivants

• titre de propriété, par exemple console.log($0.title) // un titre
• puissance d'attribut, par exemple console.log($0.getAttribute('power')) // illimité

pour le composant pochoir ce serait "le même"

• données de propriété, par exemple console.log($0.data) // [{ nom : 'john', âge : 21 }, { nom : 'maria', âge : 28 }];
• attribut super-mode, par exemple console.log($0.hasAttribute('super-mode')) // true

lit-html ne rend que le dom... où/comment les éléments du dom sont enregistrés lit-html ne sait pas/ne s'en soucie pas - donc la technologie utilisée pour chaque composant peut être complètement différente... par exemple, vous pouvez avoir un composant qui sont lit-element, stencil, vanilla HTMLElement ou il pourrait même s'agir d'un wrapper de composant Web pour une application complète react/vue/angular... 😱

stencil peut être un compilateur, mais une fois compilé sur un composant Web, il peut être utilisé simplement comme dom 🤗

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

L'équipe Stencil refactorise le compilateur, ce qui, je pense, changera l'intégration Stencil/Storybook.

Si quelqu'un va simplement utiliser Stencil et Storybook via React checkout https://github.com/the-road-to-learn-react/use-custom-element qui vous permet de passer des tableaux et des objets. J'essaierai moi-même plus tard mais cela pourrait aider certaines personnes.

Pour ceux que ça intéresse, j'ai publié un starter pour combiner Storybook/react et Stencil : https://github.com/bbellmyers/stencil-storybook-starter. Notez qu'avec cette configuration, les modifications apportées aux composants nécessitent une actualisation matérielle dans le navigateur, mais pas les modifications apportées aux histoires.

On dirait que storybook développe un storybook pour les composants Web. Je l'ai essayé avec un pochoir et ça marche plutôt bien.

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

@sem4phor peux-tu partager ta configuration ?

Je reçois des erreurs sur lit-html sur une nouvelle installation de livre de contes pour les composants 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, vous devez installer vous-même 'lit-html', il est utilisé pour rendre les composants dans les exemples par défaut.

@Edd-Strickland, nous avons ajouté un livre d'histoires pour les composants Web et dans la version 6.0.0, le livre d'histoires pour polymère sera obsolète / plus mis à jour.

Y a-t-il quelque chose à faire pour que le livre d'histoires pour les composants Web fonctionne pour les composants de pochoir ?

Le livre de contes de composants Web peut rendre les composants de composants Web de gabarit, mais le gabarit ne peut pas s'exécuter dans le navigateur tel quel et doit être compilé. Par conséquent, il nécessite encore un traitement spécial, à moins que vous ne compiliez les composants du gabarit avant d'exécuter le livre de contes.

@LarsDenBakker s'agit-il d'ajouter un plugin / chargeur webpack pour que ce qui précède fonctionne. (J'imagine qu'il est souhaitable de créer un composant de pochoir HMR et de le compiler dynamiquement)

Oui, bien que le pochoir lui-même utilise le rollup. Si l'étape de compilation peut être utilisée en tant que projet distinct, vous pouvez peut-être en faire un plugin webpack. Je ne connais pas assez les internes pour ça.

Stencil n'utilise pas Webpack. Il utilise plutôt Rollup.

Il est possible d'utiliser le référentiel que j'ai configuré pour que les deux fonctionnent en conséquence et activent l'équivalent HMR dans Stencil avec l'appel -watch. Ainsi, ce gabarit se recharge lorsque les gabarits sont mis à jour et que Storybook se recharge lorsqu'il est mis à jour.

Donc pas besoin de construire à chaque fois car cela le couvrira.

Bien que je n'aie pas eu le temps récemment de mettre à jour le référentiel avec le dernier SB ou Stencil, ce processus fonctionnera toujours et vous pourrez ensuite mettre à niveau le référentiel avec les dernières versions.

Merci

@Edd-Strickland, nous avons ajouté un livre d'histoires pour les composants Web et dans la version 6.0.0, le livre d'histoires pour polymère sera obsolète / plus mis à jour.

Y a-t-il quelque chose à faire pour que le livre d'histoires pour les composants Web fonctionne pour les composants de pochoir ?

oui, cela ne tient toujours pas vraiment compte du rechargement en direct / HMR car, comme indiqué ci-dessus, les différences entre l'utilisation du webpack et l'utilisation du roll up. alors toute la bonté de l'HMR est perdue au pochoir.

Cette version est actuellement basée sur la version HTML et non sur la version polymère, donc cela ne devrait pas avoir d'impact sur l'objectif à plus long terme de retirer cette version.

@LarsDenBakker s'agit-il d'ajouter un plugin / chargeur webpack pour que ce qui précède fonctionne. (J'imagine qu'il est souhaitable de créer un composant de pochoir HMR et de le compiler dynamiquement)

Je ne le conseillerais pas, la version webpack de Stencil est un chemin de développement beaucoup plus difficile et augmente l'empreinte des dépendances sans aucun besoin. changement de l'instance WC ou SB. Il s'agit de le configurer pour permettre les deux.

Oui, bien que le pochoir lui-même utilise le rollup. Si l'étape de compilation peut être utilisée en tant que projet distinct, vous pouvez peut-être en faire un plugin webpack. Je ne connais pas assez les internes pour ça.

Il existe déjà un plugin stencil WP, mais ce n'est pas une dépendance prise en charge ou approuvée par la communauté.

cc @jthoms1 @adamdbradley

@dmartinjs, vous devez installer vous-même 'lit-html', il est utilisé pour rendre les composants dans les exemples par défaut.

@sem4phor peux-tu partager ta configuration ?

Je reçois des erreurs sur lit-html sur une nouvelle installation de livre de contes pour les composants 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

Des retours à ce sujet ? Je dois installer cette dépendance moi-même. S'il est utilisé par @storybook/web-components, alors il devrait être automatiquement installé en tant que dépendance...?

@LeeBurton pas s'il s'agit d'une dépendance entre pairs ? (Je ne sais pas si c'est le cas, si ce n'est peut-être pas ça devrait l'être) cc @daKmoR

@LeeBurton au moment où je le https://nodejs.org/es/blog/npm/peer-dependencies/

Pour ce que ça vaut, j'ai un pochoir qui fonctionne avec cette configuration dans .storybook/preview.js

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

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

@idmyn J'ai essayé cela et pendant la compilation, toute modification apportée à un fichier src n'est toujours pas chargée dans le navigateur sans un rechargement manuel manuel.

Je l'ai fait fonctionner en exécutant la construction de Stencil localement avec watch activé dans un script d'exécution npm tout en exécutant start-storybook en parallèle avec le package npm-run-all .

J'ai configuré la configuration webpack de storybook pour regarder les fichiers dist de Stencil en utilisant ce qui suit dans mon 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;
  },
};

Vous devrez peut-être modifier un peu les chemins/fichiers pour votre projet, mais cela a fonctionné pour moi.

Je me demandais simplement si @DesignByOnyx ou @Edd-Strickland avaient déjà

J'ai déplacé ma copie de @Edd-Strickland vers 6.0.0-beta avec assez de succès, bien que je trouve qu'il ne reconstruit pas toujours tout lorsqu'il détecte un changement (par exemple, readme.md).

Est-ce accessible au public @paulfelton ?

C'est maintenant, aidez-vous :-)

J'ai forké le projet d'Edd . @Edd-Strickland, dois-je faire un RP ? Il aura besoin d'un bon examen, je ne suis pas un expert en la matière.

J'ai supprimé les packages, remanié la configuration au nouveau format. J'ai dû ajouter une dactylographie et m'y référer dans tsconfig pour obtenir l'histoire pour importer le fichier readme du pochoir et ajouter une configuration pour traduire 'notes' en 'docs'.

Liste de souhaits :

• Eh bien, j'aimerais voir l'intégration générer une histoire de base à partir du composant de pochoir. Idéalement, à la fois mdx et CSF.
• J'aimerais passer de Storybook HTML à Storybook Webcomponent, bien que je ne sois pas sûr qu'il y ait des avantages à le faire. Cela semble juste plus naturel.
• J'aimerais que les documents de pochoir s'importent plus naturellement dans les nouveaux addon-docs, plutôt que d'aller « via » des notes.
• Tout ça via un preset :-)

@paulfelton avez-vous besoin de quelque chose de ma part ?

@ndelangen je ne suis pas sûr. Comme vous l'avez peut-être compris, je suis assez nouveau sur Stencil et Storybook, alors je viens de rassembler ce que je peux tirer de diverses discussions sur des problèmes, google, etc.

J'ai également essayé un dépôt de démarrage, fortement inspiré mais tous les efforts déployés dans ce numéro (merci à tous !).

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

Utilise @storybook/web-components , travaillant avec les modules complémentaires essentiels (par exemple, Contrôles, Actions). Dernières versions de tout à ce stade.

Une intégration supplémentaire entre le serveur de développement Stencil et le cadre d'aperçu de Storybook (afin que la superposition d'erreur Stencil s'affiche en ligne dans Storybook - meilleur DX !) (vérifiez ./storybook/preview-body.html et ./src/index.html pour les deets).

~ Écrasez le devserver Stencil dans start-storybook afin que vous n'exécutiez qu'une seule commande et qu'il fasse tourner le stencil dans les coulisses.~
EDIT : simplifié cela avec concurrently + wait-on - attendez que Stencil tourne, puis continuez avec Storybook

Les modifications de code (des composants Stencil ou des histoires Storybook) rechargeront le cadre d'aperçu (pas l'application entière de storybook). Ce n'est pas du vrai HMR mais c'est assez agréable à développer !

Joli. Le lien ne fonctionne pas.

Oups, le dépôt est maintenant public ^

J'ai mis en place un référentiel passe-partout en utilisant stencil v2 et @storybook/web-components v6 ici : https://github.com/bjankord/stencil-storybook-boilerplate

Il existe également un dépôt sur https://github.com/miriamgonp/stencil-web-components-boilerplate construit par @miriamgonp à partir du canal discord Storybook/Stencil. Quelqu'un a-t-il envie de combiner ces passe-partout émergents ? ;-)

Ces deux repos ont fière allure. S'ils étaient regroupés en un seul, ce serait un bon ajout. Et si quelqu'un était prêt à contribuer avec un didacticiel dans Intro to Storybook basé sur ces deux dépôts, nous l'apprécierions vraiment. Faites-moi savoir si quelqu'un est prêt à nous aider et je serais ravi d'aider les membres de la communauté qui utilisent Stencil.

j'ai une solution hmr appropriée ;) à venir bientôt !

j'ai une solution hmr appropriée ;) à venir bientôt !

C'est ici!
Stencil 2+ & Storybook 6+ (L'ancienne version Stencil devrait également fonctionner ;))
https://github.com/dutscher/stencil-storybook
amusez-vous bien et bravo

edit: avec storybook sur gh-pages https://dutscher.github.io/stencil-storybook/index.html

Échangé cela ^^ dans notre projet la semaine dernière et après avoir supprimé les bits qui ne nous concernent pas (Bootstrap, scss, chromatic, etc.) myorg/my-proj) cela fonctionne très bien.

Je l'utilise depuis environ un jour maintenant et le HMR est excellent !

@elwynelwyn, tout ce que nous devons faire du côté du livre de contes, pensez-vous?

@ndelangen les choses importantes sont :

1. le proxy https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. l'injection de production de pochoir via main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. et des scripts npm simples et minimaux pour dev et prod https://github.com/dutscher/stencil-storybook/blob/master/package.json

Tchin Tchin