Nach #1870 und #3423 duplizieren. Lass uns dort weiter diskutieren

Neuer Starter-Build für aktuelle Schablone und SB 5 werden erstellt

@Edd-Strickland möchte an einer Stencl-Support-Version arbeiten 🎉

Ich habe den Polymerstarter mit Schablone auf die neueste Version von SB aktualisiert und benötige jetzt etwas Hilfe beim Entfernen von Polymer und Hinzufügen des Schablonen-Compliers

Hi,

@Edd-Strickland nur zur Information, ich habe Schablone in Storybook wie in Ihrem Starter implementiert, in diesem Projekt: https://github.com/vogloblinsky/nutrition-web-components

Ich habe den HTML-Starter von Storybook verwendet.

Im Moment musste ich mit Storybook & Stencil nur:

• Fügen Sie einen benutzerdefinierten Header hinzu, der auf jede von Stencil generierte Root-JavaScript-Datei verweist
• fügen Sie statische Dateien hinzu, die von Stencil in Storybook generiert wurden

Das Hauptproblem ist meiner Meinung nach die Verwendung von Webpack von Storybook, um JavaScript-Dateien zu verarbeiten, die in eine Story importiert werden. Der ideale Workflow besteht darin, nur die JS-Datei der Webkomponente zu importieren.

Ja, das haben Sie zuvor getan, aber mit der Polymer-Version bedeutet dies jedoch, dass Sie durch den Import als einfache statische W / C-Implementierungen jedes Mal in Ihre Story aktualisieren müssen, was sich einschränkend anfühlt.

Hallo zusammen, ich habe einen Wrapper erstellt, der auf einem Schablonenprojekt vom Typ component installiert werden kann. Ich hoffe es hilft. https://github.com/nisheed2440/stencil-storybook-wrapper

sieht echt gut aus werde ich am montag testen. Gute Arbeit :)

Wird dies zu einem offiziellen Teil von Storybook? Das brauche ich dringend!

@otw Wir versuchen es, könntest du uns helfen?

@ndelangen Gerne teste ich Dinge und

Würde dies mit LitElement (und Webkomponenten im Allgemeinen) oder nur mit Stencil funktionieren?

@nisheed2440 dein Wrapper scheint vielversprechend zu sein, ich werde das bald testen! Aber es könnte toll sein, eine "native" Integration zu haben, die von Storybook dokumentiert wird 👌

@nisheed2440 Ich war sehr beschäftigt (sorry allerseits), hatte aber heute ein sehr kleines Fenster, um eine sehr Vanille-Version davon lokal zu testen, und es ist wirklich gut. funktioniert wirklich gut.

Ich werde nächste Woche einige Zeit damit verbringen, es in ein bestehendes Projekt zu integrieren, um zu sehen, wie dies für bestehende Schablonenbenutzer / -projekte funktionieren könnte.

Ich habe es heute morgen getestet und es funktioniert auch ziemlich gut! GJ ist wirklich einfach einzurichten. Ich habe einige Addons installiert und getestet:

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

Alles funktioniert gut, habe gerade ein Problem mit Addon-Knobs gefunden https://github.com/storybooks/storybook/issues/5017 Aber es gibt eine Problemumgehung und dies sollte meiner Meinung nach ziemlich bald behoben werden.

Ich habe die letzten 2 Wochen damit verbracht, mit StencilJS und Storybook zu spielen und einen Livestream gemacht, in dem ich meine Lösung beschreibe. Ich habe das Gefühl, dass es einen viel besseren Weg gibt, aber ich konnte HMR und die meisten Plugins ohne Probleme zum Laufen bringen. Würde mich über Feedback freuen, wie Sie die Lader aus dem Verteilungsschablonenpaket verbessern oder importieren können.

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

Und hier ist das Repo! ^_^
https://github.com/MadnessLabs/enjin-components

@nisheed2440 Hallo, Ihrem sehr ähnlich ist und alles funktioniert, erwarten Sie chromatisch. Konnten Sie mit Schablone/Storybook chromatische Arbeiten machen?
Wenn ich starte, werden alle meine Geschichten entdeckt, aber alle Screenshots sind leer. Wahrscheinlich fehlt die Schablone beim Versuch, den Komponenten-Screenshot auf dem chromatischen Server zu rendern

@nisheed2440 Vielen Dank für diesen wirklich tollen Einsatz. Hoffentlich gibt dies dem Team hier einen Vorsprung in die richtige Richtung. Schablone und Storybooks sind ideal füreinander.

Hallo allerseits! Anscheinend hat sich in dieser Ausgabe in letzter Zeit nicht viel getan. Wenn es noch Fragen, Kommentare oder Fehler gibt, können Sie die Diskussion gerne fortsetzen. Leider haben wir nicht die Zeit, auf jedes Problem einzugehen. Wir sind immer offen für Beiträge, also senden Sie uns bitte einen Pull-Request, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Will das jemand abholen?

Mein Team verwendet StencilJS + Storybook für unsere gemeinsame Komponentenbibliothek und ich würde gerne dazu beitragen. Vielleicht können ein paar von uns das Ding wieder auf den richtigen Weg bringen...

Scheint großes Interesse zu geben, zB https://twitter.com/dboskovic/status/1120336958008348672

Ein einfacher Gewinn wäre die Veröffentlichung eines @storybook/preset-stencil Pakets, das die Konfiguration von @popcorn245 in ein Bilderbuch-Preset packt . Ich muss dafür noch die Dokumentation fertigstellen, aber ich verwende sie für die bevorstehende Veröffentlichung von Storybook Docs und es ist einfach und wie die meisten SB-Konfigurationen in Zukunft funktionieren werden.

Ich würde mich freuen, jeden anzuleiten, der das abholen möchte.

Hey @shilman , begeistert , dies

Eine viel bessere Implementierung würde sich vom Stencil-Compiler absetzen und die Verwendung von JSX wie bei React-Komponenten ermöglichen, aber das ist MHO.

Außerdem wird Stencil One mit einigen großen Änderungen fallengelassen, daher kann es gut sein, einen Blick auf dieses Changelog zu werfen, um sicherzustellen, dass jeder, der daran arbeitet, weiß, was in der Pipeline kommt.

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

Dieser Thread war für mich sehr hilfreich, insbesondere die Konfiguration von @popcorn245. Persönlich habe ich @stencil/state-tunnel , was diese Konfiguration zerstört hat. Glücklicherweise konnte ich es mit einigen kleinen ~hacks~ Optimierungen zum Laufen bringen, indem ich Folgendes ausführte:

npm i -D [email protected]

Und dies zu .storybook/webpack.config.js hinzufügen:

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

Auch damit zu experimentieren und (wie an anderer Stelle erwähnt) die Verwendung von concurrently scheint für mich (vorerst) gut zu funktionieren. Ich habe ein Schnellstartprojekt erstellt, das alles enthält, was Sie brauchen, um sowohl mit Schablone als auch mit Storybook loszulegen. Verwenden Sie bereits die neueste Schablonenversion.

Schau es dir hier an: Schablonen-Storybook-Starter

@fvaldes33 Schön! Habe es markiert. Ich habe gerade auf Stencil One Beta aktualisiert und meine Konfiguration sieht ähnlich aus – ich könnte im Grunde das Standard-Webpack-Setup vollständig verwenden.

Der einzige Unterschied für mich war die Verwendung von stencil build --watch (prod, nicht dev), weil die Build-Zeiten so schnell sind und es einfacher ist, die prod-Version in Stencil zu verwenden (insbesondere bei globalen Stilen und anderen Importen).

@fvaldes33 wie können Sie so auf die build/components.js in Ihrer preview-head.html verweisen? Ich muss den vollständigen Pfad angeben, zB

(Ich verwende nicht Ihren Starter, aber ich verwende den Schablonenkomponenten-Starter mit einer neuen Storybook-/HTML-Installation)

BEARBEITEN:
Ich habe festgestellt, dass ich Storybook auf Port 6006 startete, anstatt im www-Ordner. Problem gelöst!

Sieht so aus, als hätten viele von uns ähnliche Lösungen (einschließlich mir https://github.com/jagreehal/stencil-boilerplate), aber ich möchte wirklich heiße / Live-Updates, wenn ich eine Schablonenkomponente bearbeite. Derzeit muss ich den Browser manuell aktualisieren, um Storybook neu zu laden.

Gibt es eine Aufzählung von Anforderungen, um dies zu vervollständigen? Ich würde gerne mitmachen, wenn ich wüsste, was gebaut werden muss.

Wie ist der aktuelle Stand? Können wir einen Beitrag leisten? Das würde ich gerne sehen!

Ich habe oben vorgeschlagen, ein Preset beizutragen.

• Voreinstellungen sind hier dokumentiert: https://storybook.js.org/docs/presets/introduction/
• Hier gibt es ein Repo für Community-Presets: https://github.com/storybookjs/presets

Wenn jemand ein Preset basierend auf den obigen Mustern zusammenstellen möchte, helfe ich gerne auf der Storybook-Seite. Ich kenne die Schablonenseite nicht.

Ich habe gerade mein Projekt veröffentlicht für alle, die es wollen. Hier sind die Funktionen:

• automatische Generierung von Geschichten
  
  
  
  • automatische Knopfgenerierung für alle @Props auf Ihren Komponenten
  
  
  • Möglichkeit, anzupassen, welche Knöpfe für jede Requisite verwendet werden (obwohl der Code beim Erraten von Zeichenfolgen, Zahlen, Booleschen, Objekten, Daten und Farben gute Arbeit leistet).
  
  
  • Möglichkeit, mehrere Zustände zu definieren, die auf einer einzigen Seite gerendert werden, jeder mit einem Titel, einer Beschreibung und einem kopierbaren Code-Snippet (eine Art einfache Implementierung von Kapiteln)
  
  
  • Möglichkeit, Notizen für jede Komponente zu definieren (normalerweise möchten Sie die generierte Readme-Datei)
  
  
• Live-Rebuild/Reload von Schablonenkomponenten (es ist immer noch ein bisschen wackelig - manchmal muss man den Browser aktualisieren)
• kommt mit dem Viewport-Add-on

Lass mich wissen, was du denkst: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx Das sieht toll aus. Tweete darüber und erwähne @storybookjs und ich werde vom Märchenbuch-Account aus RT. Und wenn Sie einen Beitrag darüber schreiben möchten, würde ich mich freuen, mit Ihnen zusammenzuarbeiten, um ihn bekannt zu machen. Ich denke, hier besteht eine ziemlich große Nachfrage.

Tolle Arbeit

OK, ich habe getwittert (ich twittere nicht viel). Außerdem habe ich keinen Blog :/, aber ich stelle gerne etwas zusammen, wenn es jemand veröffentlichen möchte.

Während das Projekt funktioniert, warf ich es in Eile zusammen und machte es nicht wirklich einfach, es anzupassen. Ein Teil des Codes darin ist wirklich brüchig, da ich mehrere Dateien laden und zusammenführen muss, um jede einzelne Komponente zu rendern. Ich hoffe auf einige Rückmeldungen, bevor ich die Zeit damit verbringe, dies verbrauchbarer zu machen.

Ich bin gespannt, wie ein Preset aussehen würde. Das Größte, was schön wäre, wäre ein JSX-Preset, das nicht reagiert. Dies würde neben der Storybook-HTML-Variante ein bisschen einfacheres Rendern und Erstellen von Vorlagen ermöglichen, und es hat nicht viel mit Schablone zu tun. Mehrere Addons müssten auch aktualisiert werden, um dies nutzbar zu machen, und ich bin mir nicht sicher, ob ich der Beste bin, um diese Bemühungen zu koordinieren. Lassen Sie mich in jedem Fall wissen, was ich tun kann, um zu helfen.

@DesignByOnyx Hast du eine Chance auf unseren Discord zu https://discordapp.com/invite/UUt2PJb

Ich würde gerne mehr darüber sprechen, wie diese Arbeit im Storybook-Blog veröffentlicht und in der Schablonen-Community gefördert wird.

Ich habe mit @storybook/html für Stencil gespielt und die Erfahrung "funktioniert einfach". Sie tun im Wesentlichen Folgendes:

1. Verwenden Sie concurrently , um den Storybook-Server und stencil build --watch "parallel" zu starten.
2. Beginnen Sie storybook mit dem Flag -s dist , damit Ihre Schablone dist als statische Dateien bereitgestellt wird.

3. Konfigurieren Sie .storybook/preview-head.html , um ein Skript-Tag wie:

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

Und das ist es! Die html Unterstützung von

Was ich gerne sehen würde, ist etwas wie @storybook/stencil , das die gleiche Erfahrung (und denselben Code) wie das html Paket auf der Story-Autorenseite hat, aber

1. Abstracts führen den Stencil-Build-Prozess als Teil von Storybook aus, sodass die Konfiguration von concurrently nicht erforderlich ist
2. Fügt diese script Tags für Sie hinzu
3. Verbindet die automatische Aktualisierung, wenn Ihre Schablonenkomponenten neu aufgebaut werden

Besteht Interesse an so etwas? Ich bin dabei, mein Unternehmen auf Stencil und Storybook zu verkaufen, und vorausgesetzt, dass dies an Bedeutung gewinnt, werde ich "Arbeitszeit" haben, um diese Geschichte (entschuldigen Sie das Wortspiel) wirklich schön zu machen, wenn Storybook + Stencil zusammen spielen.

Die Arbeit, die @DesignByOnyx geleistet hat, ist wirklich großartig, aber Sie müssen Ihre Stencil-Komponenten mit diesem Kit _starten_ und die "normale" Dokumentation für Stencil ignorieren. Wenn Storybook ein Paket bereitstellen kann, das über das "normale" Stencil-Starterkit gelegt werden kann, können Sie ganz einfach eine Storybook-Konfiguration zu einem vorhandenen Satz von Stencil-Komponenten hinzufügen.

Danke für die tolle Zusammenfassung @alexlafroscia. Ich finde deinen Vorschlag sehr sinnvoll. Wird HMR nicht automatisch aktiviert, wenn die Schablone neu erstellt wird? Wenn ja, eine Idee, warum nicht?

@igor-dv Ist es möglich, preview-head.html in einem Preset hinzuzufügen?

@Hypnosphi Vielleicht ist dies ein interessantes Beispiel für Ihre Multi-Framework-Bemühungen. In diesem Fall wird (anscheinend) kein Decorator benötigt, sondern ein kompletter Compiler.

@alexlafroscia wie sieht ein Beispiel für eine Geschichte in Ihrem Fall aus?

In der Firma, in der ich arbeite, spielen wir schon seit einiger Zeit mit Storybook HTML- und StencilJS-Paketen. Ich trage gerne bei!

@alexlafroscia Sehr tolle Ideen, in der Tat wäre es schön, eine vollständige Unterstützung für diesen Compiler zu haben. Hier sind einige andere Ideen:

• Verwenden Sie die JSX-Funktionen von StencilJS (derzeit basierend auf Preact), um Storys wartungsfreundlicher zu schreiben. Die Verwendung von einfachem alten JS oder sogar Vorlagenliteralen kann umständlich sein ...
• Haben Sie ein Smart Knobs-Addon für Webkomponenten. @DesignByOnyx lieferte dafür eine schöne Grundlage.

Dieser Artikel behandelt die laufende Roadmap in StencilJS: Herbst 2019 Stencil Roadmap . Vor allem:

Öffentliche Compiler-APIs

Ein weiterer Bereich, auf den wir uns ebenfalls konzentrieren, ist sicherzustellen, dass der Compiler in einem Browser funktionieren und von anderen Tools verwendet werden kann. Wir haben bereits mit einigen großartigen Teams wie Stackblitz, CodeSandbox und WebComponents.dev zusammengearbeitet. Auf den untersten Ebenen funktioniert der Compiler bereits, ohne auf einer NodeJS-Umgebung zu laufen, also ist dies technisch gesehen kein größerer Refactor, sondern lediglich die Bereitstellung der richtigen APIs.

Wir sehen auch viele Bereiche für Verbesserungen, um sicherzustellen, dass der Compiler von anderen NodeJS-Tools, einschließlich Rollup, Parcel, WebPack und Bazel, einfach verwendet werden kann. Wenn Sie ein Betreuer eines Tools sind, sei es ein Online-Tool oder eine NodeJS-Umgebung, und den Stencil-Compiler implementieren möchten, wenden Sie sich bitte an uns und wir helfen Ihnen gerne weiter!

Könnte nützlich sein!

Wird HMR nicht automatisch aktiviert, wenn die Schablone neu erstellt wird? Wenn ja, eine Idee, warum nicht?

@shilman Es tritt nicht ein, weil in dem Setup, das ich habe, keine "echte" Verbindung zwischen Storybook und Stencil besteht. Es ist nur ein einfaches <script> Tag, das auf die erstellten Assets verweist.

Wie sieht ein Beispiel für eine Geschichte in Ihrem Fall aus?

@Hypnosphi Sie sehen my-component , das Stencil im ursprünglichen Paket generiert, das sie erstellen, wenn Sie 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>
  `);

Verwenden Sie die JSX-Funktionen von StencilJS (derzeit basierend auf Preact), um Storys wartungsfreundlicher zu schreiben. Die Verwendung von einfachem alten JS oder sogar Vorlagenliteralen kann umständlich sein ...

@darondel Ich stimme den Bedenken hinsichtlich der Entwicklererfahrung, JSX nicht in den Story-Authoring-Dateien zu haben, @storybook/html verfügbar war, und die React-Erfahrung verwendet, die in Ordnung war.

Ein Teil des Wunsches, die Dinge so nah an der "Standard"-Erfahrung von html zu halten, besteht darin, dass die Geschichten als Dokumentation dienen, wie sie tatsächlich aus der HTML-Perspektive verwendet werden - ansonsten sind sie an etwas wie Preact gebunden, was wird zumindest in meiner Organisation nirgendwo anders verwendet (wir sind in erster Linie ein Ember.js-Shop).

Sie haben erwähnt, dass Template-Tags keine großartige Erfahrung wären, aber ich denke, dass so etwas wie htm eine gute Option sein könnte. Es hält auch den Build-Prozess schön und einfach, da kein Build-Schritt erforderlich ist, aber es könnte einfacher sein, mit etwas wie Knobs zu interagieren.

Ich dachte auch, dass der Versuch, so etwas wie die kommende DocsPage zu integrieren, interessant @DesignByOnyx bereits geleistet

Da DocsPages heute mit Storybook 5.2 veröffentlicht wurde, habe ich einige Nachforschungen angestellt, ob es möglich wäre, die Informationen über Requisiten und dergleichen aus Stencil zu erhalten und in Storybook zu rendern. Ich denke, es sollte möglich sein, unterstreicht aber definitiv, wie nützlich es wäre, ein Add-On oder eine Voreinstellung zu haben, die auf die Verwendung von Storybook mit Stencil zugeschnitten ist, um eine Menge des dafür benötigten "Klebers" unterzubringen.

Ich werde diese Woche noch ein bisschen an den Dingen herumspielen und sehen, ob ich etwas zusammenstellen kann.

@alexlafroscia würde gerne standardisieren, wie verschiedene Frameworks diese Daten kommunizieren. Habe etwas Interessantes von Jetbrains gesehen (web_types? Cc @elevatebart ) und auch @atanasster arbeitet in diesem Bereich auch daran, Prop-Typen in JSON-Dateien für die Leistung zwischenzuspeichern. Ich denke, wir sollten all dies in 6.0 vereinen

Ich kenne die Arbeit von Jetbrains nicht – das muss ich mir ansehen! Wenn Sie bestimmte Informationen haben, die für eine Überprüfung hilfreich sein könnten, würde ich mich freuen, wenn Sie sie mir zusenden könnten!

Im Fall von Stencil ist es meiner Meinung nach die "beste Wette", dass der Stencil-Buildprozess die JSON-Dokumente entweder an einen Ort ausgibt, der einem Stencil Storybook-Add-On bekannt ist oder konfigurierbar ist. Dieses Objekt enthält alle Informationen zu erwarteten Requisiten, ausgegebenen Ereignissen und sogar den Inhalt der Datei readme für jede Komponente (ohne die automatisch generierte Requisiten-Dokumentation). Ich denke, wir könnten eine wirklich überzeugende Story erstellen, um die Storybook DocsPage mit den Informationen aus dieser JSON-Datei zu füllen.

{
  "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 ist eine Art Hack (ich schreibe die JSON-Ausgabe in dist/output.json und verwende dann fetch , um die Datei zu greifen), aber ich konnte das DocsPage-Rendering für eine Storybook-Komponente einfach überschreiben die Slot-Requisiten, die die DocsPage Komponente aufnehmen kann.

Der Props-Tisch ist nicht perfekt, aber ziemlich gut; Die Stencil-Ausgabe stellt alle Requisiten bereit, die die Tabelle erwartet, und noch einige mehr. Alles, was sich in readme.md für die Komponente befindet, wird oben in der Datei gerendert.

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

Update: Ich ging noch einen Schritt weiter und definierte ein ganzes benutzerdefiniertes DocsPage (anstatt nur die Slots zu überschreiben), um eine zweite Tabelle mit Dokumentation aller benutzerdefinierten Stile zu erhalten.

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

Die benutzerdefinierte Seite behebt auch die Tatsache, dass jede Story standardmäßig 500px in der Höhe hat, was viel zu hoch ist 😅

@alexlafroscia Das ist erstaunliche,

Zu Ihrer Information, wir werden die Requisitentabellen in 5.3 verallgemeinern. Insbesondere Frameworks wie Vue haben das Konzept von Slots & Events, daher sollten diese in ihre eigenen Tabellen aufgeteilt werden. Vielleicht könnten Ihre Stile den gleichen Mechanismus verwenden. https://github.com/storybookjs/storybook/issues/8123

Das Jetbrains-Projekt, auf das ich mich bezog, ist dieses (cc @piotrtomiak): https://github.com/JetBrains/web-types

Ich habe es mir nicht im Detail angeschaut und weiß nicht, ob es das Richtige für uns ist. Wenn es jedoch unseren Anwendungsfällen entspricht und nicht zu viel zusätzliche Crufts hinzufügt, würde ich lieber einen vorhandenen Standard verwenden, als unseren eigenen zu erfinden.

@shilman Vielen Dank, dass Sie sich unsere Bemühungen (JetBrains) angesehen haben, einen Standard für den Austausch von Metadateninformationen in Webkomponentenbibliotheken zu bringen! Unser anfängliches Ziel bestand darin, einfach eine gute Codevervollständigung für Vue-Komponenten in HTML-Dateien bereitzustellen, aber wir fanden heraus, dass mit einem solchen Standard noch viel mehr zu erreichen ist, also haben wir ihn mit Blick auf ein generisches Informationsaustauschformat (IDEs, Tools, Dokumentation). Bisher lag unser Fokus auf dem Vue-Framework, wir haben jedoch immer die Unterstützung für Webkomponenten oder andere Frameworks im Auge behalten. Der web-types Standard ist ziemlich neu, aber wir haben bereits einige positive Rückmeldungen von der Vue-Community und -Benutzern gehört. Ich werbe aktiv für die Spezifikation in der Vue-Community, aber es ist so toll, etwas Interesse von anderen Communitys zu bekommen!

Ich denke, im web-types JSON-Schema fehlen möglicherweise einige Dinge, die für Ihr Framework spezifisch sind und der Spezifikation hinzugefügt werden können. Vue-spezifische Elemente haben beispielsweise das Präfix vue . Es fehlt auch ein ganzer Abschnitt zur Dokumentation der CSS-Unterstützung, an der wir arbeiten könnten. Wenn Sie also der Meinung sind, dass es sich lohnt, web-types eine Chance zu geben, können Sie Probleme melden oder PRs für fehlende Funktionen erstellen.

Der Nebeneffekt der Dokumentation Ihrer Komponenten im web-types Format ist eine gute Codevervollständigung, wenn Entwickler Ihre Bibliothek in ihr Projekt aufnehmen. Wir planen, in naher Zukunft eine solche generische Unterstützung basierend auf gemeinsamen web-types Features für alle Frameworks zu implementieren. Ich bin mir ziemlich sicher, dass mit einer größeren Community-Akzeptanz des Formats andere IDEs mit Unterstützung für das Format folgen werden, was allen zugute kommen würde :)

@alexlafroscia fantastische Arbeit! Die Schablonen- und Storybook-Integration (zusammen mit https://github.com/storybookjs/storybook/issues/7644) sieht gut aus

Danke für die Verlinkung zu diesem Thema! Ich bin ursprünglich einen ähnlichen Weg gegangen (versucht, die vorhandenen README-Dateien irgendwie zu verwenden und sie direkt in die DocsPage zu ziehen), fand es aber letztendlich einfacher, nur die Daten zu verwenden, die Stencil in die docs-JSON-Datei einfügt, da sie die Tabelle _nicht_ einschließt von Requisiten und allem (da sich diese Daten an anderer Stelle in der JSON-Datei befinden und die strukturierten Daten perfekt zum Erstellen einer benutzerdefinierten Tabelle geeignet sind).

@alexlafroscia Danke für das Teilen deiner Ergebnisse. Darf ich fragen, wie ich das CustomDocsPage debuggen kann?

Ich habe versucht, es mit addParameters hinzuzufügen, und es scheint nicht den benutzerdefinierten, sondern stattdessen den Standard zu verwenden.

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>

Das WC selbst wird in die Storybook-Dokumentenseite geladen, auch ohne CustomDocsPage .
Gibt es eine Möglichkeit die Komponente zu debuggen? Ich habe versucht, einige Protokolle hinzuzufügen, kann aber keine sehen.

Danke im Voraus.

Ich bin auch auf dieses Problem gestoßen – ich musste die DocsPage Komponente auf der "Komponenten"-Ebene überschreiben

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

Ist es überhaupt möglich, @storybook/html mit jsx zum Laufen zu bringen? würde das Schreiben meiner Geschichten für Schablonenkomponenten viel einfacher machen. würde tippen, automatisch vervollständigen und muss nicht document.createElement oder große Vorlagenzeichenfolgen verwenden. Ich habe versucht, Typskript mit einem // @jsx oben mit dem React-Paket auszutricksen, aber das hat nicht funktioniert.

@vidarc was war der Fehler, als du das gemacht hast? Haben Sie eine benutzerdefinierte Babel-Konfiguration ?

nicht viel anpassen. ein paar Dinge zum Webpack hinzugefügt. Erstes Typoskript beschwert sich über Cannot find name 'h' . meine tsconfig hat jsx = reagieren und jsxFactory = h. Ich kann diese Warnungen verschwinden lassen, indem ich die Pragma-Einstellung // <strong i="6">@jsx</strong> h oben verwende, aber dann erhalte ich einen Storybook-Fehler, da kein DOM-Knoten oder -String zurückgegeben wird.

werde es ausprobieren: https://github.com/developit/vhtml weiter

EDIT: funktioniert super mit jsx. Ich kann jedoch nicht herausfinden, wie man es mit Typoskript zum Laufen bringt :/

@vidarc Wenn h für Hyperscript steht, gibt es ein benutzerdefiniertes Objekt zurück, das weder String noch DOM-Element ist

vhtml scheint der richtige Weg zu sein

Zu Ihrer Information, wir haben eine eingehende PR für eine web-components App: https://github.com/storybookjs/storybook/pull/8400

Kann hier jemand etwas dazu sagen, wie das mit diesem Problem zusammenhängt? @vidarc @DesignByOnyx @Edd-Strickland @alexlafroscia @daKmoR

Ich habe #8400 noch nicht getestet, aber vor dem Testen konnte ich "live" Schablone zum Laufen bringen über:

1. Führen Sie start-storybook -s ./www in einem Fenster aus.
2. Führen Sie stencil build --dev --watch in einem anderen aus.
3. Aktualisieren Sie .storybook/config.ts , um das Fenster auf HMR neu zu laden:

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 ist ein bisschen klebrig.

Der Grund, warum ich Alternativen wie https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js nicht untersuchen konnte, ist, dass import "./my-component" seit import { Component } from "@stencil/core" fehlschlägt

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

Hat jemand tatsächlich eine Schablonen- und Storybook-Implementierung/-Konfiguration, die in IE11 funktioniert? Ich habe jede in diesem Thread erwähnte Implementierung ohne Erfolg ausprobiert.
laufen immer auf Unhandled Promise Rejection TypeError: Invalid Scheme with stencil version 1.2.4 -> 1.7.4.

@shilman Ich konnte Schablonenkomponenten in der App web-components abrufen, aber es scheint mir, dass sie sie nur so liest, wie es jeder mit der html -App tut, und HMR tut es nicht t auf Aktualisierungen der Schablonenkomponenten selbst reagieren.

Es wäre wirklich besser, wenn es eine Möglichkeit gäbe, den Schablonen-Compiler wie bei React, Angular usw. in die Storybook-Laufsequenz zu integrieren.

Ich werde weiterhin Möglichkeiten ausprobieren, um Stencil-Komponenten "live" zu bekommen, aber das Architekturproblem, auf das ich gestoßen bin, ist, dass, wenn ich mich nicht irre, _Stencil-Komponenten einen benutzerdefinierten Build-Schritt benötigen, um zu funktionieren_ ( stencil build --dev --watch ), und es gibt kein Laufzeitäquivalent.

Ich habe versucht, import { MyComponent} from "./MyComponent" zu tun, aber das schlägt fehl, da @Component nicht wirklich aus @stencil/core exportiert wird. Tatsächlich wird es als Teil des Build-Schritts entfernt:

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

In diesem Wissen besteht mein nächster Test darin, den Build-Schritt mit React-Bindungen (https://github.com/ionic-team/stencil-ds-plugins) beizubehalten, aber stattdessen die HMR-Logik zu ersetzen, um React-Geschichten (anstelle von HTML) zu verwenden .

Hoffentlich wird die UX des Storybooks mit der von React übereinstimmen und Stencil nur der Komponentenimplementierung überlassen.

Ich denke nicht, dass es das Ende der Welt ist, wenn stencil build parallel im Entwicklungsmodus ausgeführt werden muss:

• Wir könnten den Benutzer anweisen, dies gleichzeitig in seinem package.json auszuführen
• Ein Schablonen-Preset könnte diesen Prozess beim Start starten und ihn dann beim Herunterfahren beenden, wenn wir das vor dem Benutzer verbergen wollen

Eine Lösung mit weniger beweglichen Teilen ist vorzuziehen, aber lassen wir das Gute hier nicht der Feind des Großen sein. AFAIK im Moment rollt jeder noch seinen eigenen Schablonenträger, und es gibt eine schöne Gelegenheit, die Dinge für viele Leute hier zu vereinfachen ...

Die gleichzeitige Verwendung funktioniert für mich derzeit.

Es gibt sicher inkrementelle Schritte.

Die Hauptsache, die mich als Benutzer überzeugt hat, war, "warum" Schablone nicht gleich funktionierte
als meine Reaktionsgeschichten, die ohne Schablonen-spezifisch nicht aufzulösen sind
Änderungen.

Am Do, 31. Okt 2019, 17:02 Michael Shilman [email protected]
schrieb:

Ich glaube nicht, dass es das Ende der Welt ist, wenn Schablonen erstellt werden müssen
parallel im Dev-Modus laufen:

• Wir könnten den Benutzer anweisen, wie dies gleichzeitig ausgeführt wird
  https://www.npmjs.com/package/concurrently in ihrem package.json
• Ein Schablonen-Preset könnte diesen Prozess beim Start auslösen und dann beenden
  es beim Herunterfahren, wenn wir das vor dem Benutzer verbergen wollten

Eine Lösung mit weniger beweglichen Teilen ist vorzuziehen, aber lassen wir es nicht gut
sei hier der Feind der Großen. AFAIK für jetzt rollt jeder noch seine
eigene Schablonenunterstützung gerade, und es gibt eine schöne Gelegenheit zu helfen
vereinfachen die Dinge für viele Leute hier...

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63TSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBWLOKTP5WSQM
oder abmelden
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

Ein anderer Ansatz wäre, die Benutzeroberfläche (Storybook) von der Vorschau (Schablone) klar zu trennen. Mit Storybook Standalone sollte dies bereits möglich sein.
Auf diese Weise könnten Sie sogar Storybook vorbauen 💪, was viel schnellere Boot-Zeiten bedeuten würde.

Und dann würden Sie während der Entwicklung nur den Stencil-Build verwenden (aber immer noch mit der Benutzeroberfläche von Storybooks). Das würde bedeuten, dass Sie alle Extras erhalten, die der Stencil-Dev-Server unterstützt, ohne sich Gedanken über das Interopt mit dem Webpack-Setup von Storybooks machen zu müssen.

Wir haben dies bereits untersucht, indem wir es-dev-server , um die Vorschau für web-components . Wir haben sozusagen einen POC... aber es gibt noch einige Ecken und Kanten.
Ich gehe jedoch davon aus, dass genau der gleiche Ansatz auch für Schablonen funktionieren sollte.

Wenn jemand Fragen hat oder daran interessiert ist, dies für eine Schablone zu untersuchen oder bei der Erstellung eines Referenzprojekts mithilfe von es-dev-server helfen, dann bin ich sicher, dass @LarsDenBakker gerne weitere Details teilt 🤗

PS: All dies ist nur möglich, weil das Storybook dieses großartige Iframe-Setup mit Kanalnachrichten hat, um die Benutzeroberfläche von der Vorschau zu trennen 🤗

Hallo zusammen

Nach einiger Zeit und viel Herumtüfteln ist dies mein Repo für eine schablonenintegrierte Storybook-Implementierung https://github.com/Edd-Strickland/stencilbook.

Ich freue mich über weitere Diskussionen. Hoffentlich sind die meisten Dinge aus der Readme-Datei und aus dem Blick auf die package.json für die Skripte offensichtlich.

Dies wird mit der Vanilla-Stencil-Starter-Komponente und der Vanilla-Storybook-HTML-Implementierung erstellt.

Bitte schauen und überprüfen...

StencilBook - Ein Stencil Storybook Starter

Dies ist ein Starterprojekt zum Erstellen einer eigenständigen Webkomponente mit Stencil und Storybook.

Schablone

Stencil ist ein Compiler zum Erstellen schneller Webanwendungen mit Webkomponenten.

Stencil kombiniert die besten Konzepte der beliebtesten Frontend-Frameworks in einem Kompilierzeit- statt einem Laufzeittool. Stencil verwendet TypeScript, JSX, eine winzige virtuelle DOM-Schicht, effiziente unidirektionale Datenbindung, eine asynchrone Rendering-Pipeline (ähnlich wie React Fiber) und Lazy-Loading out-of-the-box und generiert 100 % standardbasierte Webkomponenten, die ausgeführt werden in jedem Browser, der die Custom Elements v1-Spezifikation unterstützt.

Schablonenkomponenten sind nur Webkomponenten, sie funktionieren also in jedem größeren Framework oder ohne Framework.

Einstieg

Klonen Sie das Repository

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

Wechseln Sie in das Basisverzeichnis:

cd stencilbook

Installieren Sie die Module:

npm install

und führen Sie einen Build für das gesamte Repository aus:

npm run build:all

Nach diesem Lauf-Märchenbuch:

npm run storybook

Andere Befehle für dieses Repository umfassen:

Schablone erstellen:

npm run stencil

Schablone direkt im Serve/Watch-Modus starten; Nützlich, um Schablonenkomponenten direkt zu ändern:

npm run stencil:start

Führen Sie ein Storybook und einen Stencil-Build mit Watch and Serve aus und löschen Sie alle früheren Versionen, die erstellt wurden und lokal bereitgestellt werden:

npm run storybook:build:all

Bilderbuch lokal bereitstellen:

npm run storybook:serve

Module zurücksetzen; Löscht Knotenmodule und installiert sie neu:

npm run reset:modules

Um die Komponententests für die Komponenten auszuführen, führen Sie Folgendes aus:

npm test

Prüfen

So führen Sie Tests im Überwachungsmodus aus:

npm run test.watch

Neue Komponenten generieren

So generieren Sie automatisch neue Schablonenkomponenten:

npm run generate

@Edd-Strickland Das ist ein toller Anfang! Wenn ich vorschlagen könnte, dass Sie vielleicht ein Startskript zum einfacheren Booten hinzufügen, habe ich "start": "npm-run-all -p stencil:start storybook" und es funktioniert ziemlich gut, außer dass es kein Hot Reloading gibt, da Storybook nicht zu erkennen scheint, wenn die Schablone erstellt wurde.

...das heißt, es sei denn, ich übersehe etwas?

@shilman Es scheint ein @storybook/web-components-Paket bereits im Master in Alpha zu geben, aber ich sehe keine Schablone, auf die in der README.md verwiesen wird: https://github.com/storybookjs/storybook/tree/next/ App/Web-Komponenten

Ist das ein paralleler Aufwand? Wenn nicht, kennen Sie zufällig das entsprechende Problem? Bei der Suche nach web-components in Ausgaben nicht gefunden. Das Tag app: web-components , wurde aber gerade zur Version und einem Fehler hinzugefügt.

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

Ich verstehe nicht, was notwendig ist, um eine ordnungsgemäße Schablonenunterstützung über das hinaus, was von @storybook/web-components bereitgestellt wird, hinzuzufügen. Ich bin sicher, jemand in diesem Thread weiß es!

@Edd-Strickland Das ist ein toller Anfang! Wenn ich vorschlagen könnte, dass Sie vielleicht ein Startskript zum einfacheren Booten hinzufügen, habe ich "start": "npm-run-all -p stencil:start storybook" und es funktioniert ziemlich gut, außer dass es kein Hot Reloading gibt, da Storybook nicht zu erkennen scheint, wenn die Schablone erstellt wurde.

...das heißt, es sei denn, ich übersehe etwas?

Hmm Entschuldigung, ich war Ende letzter Woche beschäftigt und auf Konferenzen.

Ich bin verwirrt über das Problem, das Sie haben. Könnten Sie dies über die Repo-Probleme anstatt in diesem Thread ansprechen, um weitere Informationen zu erhalten.

Wenn Sie jedoch eine Installation durchführen und dann den Befehl storybook ausführen, wird der Überwachungsserver entsprechend gestartet. Stencil führt automatisch HMR durch, wenn Sie eine Komponente ändern, hinzufügen oder aktualisieren, während diese ausgeführt wird.

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

Ich verstehe nicht, was notwendig ist, um eine ordnungsgemäße Schablonenunterstützung über das hinaus, was von @storybook/web-components bereitgestellt wird, hinzuzufügen. Ich bin sicher, jemand in diesem Thread weiß es!

hängt davon ab, die Webkomponenten funktionieren mit Vanilla-Instanzen Ich habe die Unterschiede zwischen ihnen nicht verglichen, aber die Schablone gibt Webkomponenten aus, wird jedoch als Complier für W / C ausgeführt, anstatt standardmäßig W / C zu sein.

Also braucht es wohl beides. Ein natives JS W/C und eines für den Stencil-Compiler, wenn Sie schnell Schablonen-basierte W/C-Prototypen in der Seite des Storybooks erstellen möchten, wie Sie es beispielsweise mit einer reagierenden oder eckigen Komponente tun könnten.

Ich habe keine Zeit, mich mit @daKmoR zu

Ich bin kürzlich auf Bulmil aufgrund ihrer Arbeit an der Stencil-Integration mit nuxt-stencil und ihren nuxt-Beispielen gestoßen .

Ich habe auch herausgefunden, dass es eine anständige Storybook-Unterstützung gibt. Vielleicht ist es auch einen Blick wert. Ich weiß nicht , die Interna / wie sie aus dem aktuellen Zustand dieses Themas unterscheiden , aber es funktioniert aus der Box in Bulmil , wenn Sie laufen Märchenbuch .

@storybook/addon-actions scheint noch nicht zu funktionieren oder ich konnte es noch nicht zum Laufen bringen.

Vielleicht können wir @Gomah in diesem Thread bekommen und seine Ideen für eine Zusammenarbeit zur

Vor kurzem bin ich auf Bulmil aufgrund ihrer Arbeit an der Stencil-Integration mit nuxt-stencil und ihren nuxt-Beispielen gestoßen .

Ich habe auch herausgefunden, dass es eine anständige Storybook-Unterstützung gibt. Vielleicht ist es auch einen Blick wert. Ich weiß nicht , die Interna / wie sie aus dem aktuellen Zustand dieses Themas unterscheiden , aber es funktioniert aus der Box in Bulmil , wenn Sie laufen Märchenbuch .

@storybook/addon-actions scheint noch nicht zu funktionieren oder ich konnte es noch nicht zum Laufen bringen.
Innerhalb des obigen Repos werden Add-On-Aktionen sicherlich als Standard-Storybook-Add-On funktionieren

E2A: das Schablonenbuch, nicht die @Gomah- Variante.

Das Ziel der obigen grundlegenden Schablonen- / SB-Integration war einfach, eine Basis zu erstellen, die es ermöglichte, Storybook zu Storybook und Schablone zu Schablone und dann beide zusammen zu integrieren, damit Sie Webkomponenten über die Schablonenausgabe in einen Bilderbuchrahmen einfügen können.

Ich habe in den nächsten zwei Wochen einen Spitzensprint mit meinem Teams gesteckt, um zu sehen, ob die W/C-Version genauso gut läuft wie diese Iteration und ob wir unsere vorhandene Version, die wir verwenden, in die W/C-Version umwandeln könnten.

Im Idealfall würde alles funktionieren, so dass es keine Fragmentierung der W/C-Varianten geben würde, aber im Gegensatz zu nativen W/C-Implementierungen ist Stencil nicht wirklich ein Framework, das es ist. Compiler. Es kann sich also immer noch lohnen, die Unterscheidung zu treffen, dass Sie JSX-Komponenten schreiben können, die danach als W/C ausgegeben werden.

Oder es könnte ganz einfach sein.

Wir werden Sie wissen lassen, sobald wir den Spike abgeschlossen haben.

nicht viel anpassen. ein paar Dinge zum Webpack hinzugefügt. Erstes Typoskript beschwert sich über Cannot find name 'h' . meine tsconfig hat jsx = reagieren und jsxFactory = h. Ich kann diese Warnungen verschwinden lassen, indem ich die Pragma-Einstellung // <strong i="7">@jsx</strong> h oben verwende, aber dann erhalte ich einen Storybook-Fehler, da kein DOM-Knoten oder -String zurückgegeben wird.

werde es ausprobieren: https://github.com/developit/vhtml weiter

EDIT: funktioniert super mit jsx. Ich kann jedoch nicht herausfinden, wie man es mit Typoskript zum Laufen bringt :/

Hallo @vidarc. Konnten Sie dies mit der Syntax storiesOf() Laufen bringen? Wenn ja, wäre ich sehr gespannt, wie du das gemacht hast. Haben Sie ein Codebeispiel oder eine Codebasis, die Sie teilen möchten?

Während wir Storybook und Schablone integriert haben und gut in unserem Projekt funktionieren, ist der größte Schwachpunkt, den wir haben, auf die Erstellung von Storys mit document.createElement() für Komponenten mit Objektrequisiten usw. zurückgreifen zu müssen. Wenn vhtml lösen kann das, das wäre toll!

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

Ich verstehe nicht, was notwendig ist, um eine ordnungsgemäße Schablonenunterstützung über das hinaus, was von @storybook/web-components bereitgestellt wird, hinzuzufügen. Ich bin sicher, jemand in diesem Thread weiß es!

Sie haben Recht, und ich stimme zu. Ich habe in der README.md die enthaltenen Ordner bemerkt und andere Webkomponenten-Frameworks gesehen, aber keine Schablone:

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

Ich dachte daher, dass die Schablone aus einem bestimmten Grund nicht enthalten war. Aber wenn das gut funktioniert, ohne dass etwas hinzugefügt wird, ist das für mich völlig in Ordnung.

Übrigens, kann dieses Problem jetzt geschlossen werden, da es durch die oben genannten Webkomponenten-Voreinstellungen gelöst wurde?

nicht viel anpassen. ein paar Dinge zum Webpack hinzugefügt. Erstes Typoskript beschwert sich über Cannot find name 'h' . meine tsconfig hat jsx = reagieren und jsxFactory = h. Ich kann diese Warnungen verschwinden lassen, indem ich die Pragma-Einstellung // <strong i="8">@jsx</strong> h oben verwende, aber dann erhalte ich einen Storybook-Fehler, da kein DOM-Knoten oder -String zurückgegeben wird.
werde es ausprobieren: https://github.com/developit/vhtml weiter
EDIT: funktioniert super mit jsx. Ich kann jedoch nicht herausfinden, wie man es mit Typoskript zum Laufen bringt :/

Hallo @vidarc. Konnten Sie dies mit der Syntax storiesOf() Laufen bringen? Wenn ja, wäre ich sehr gespannt, wie du das gemacht hast. Haben Sie ein Codebeispiel oder eine Codebasis, die Sie teilen möchten?

Während wir Storybook und Schablone integriert haben und gut in unserem Projekt funktionieren, ist der größte Schwachpunkt, den wir haben, auf die Erstellung von Storys mit document.createElement() für Komponenten mit Objektrequisiten usw. zurückgreifen zu müssen. Wenn vhtml lösen kann das, das wäre toll!

Sie können sie als CSF-Geschichten direkt mit den neuesten erstellen und Ihre Geschichten in das Format austauschen, das gut funktioniert. Auch wenn Sie einige Datenfabriken importieren, um die Datenobjekte zu füllen, können Sie diese einfach verwenden, um Ihre Requisiten zu hydratisieren....

@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+
Ich verstehe nicht, was notwendig ist, um eine ordnungsgemäße Schablonenunterstützung über das hinaus, was von @storybook/web-components bereitgestellt wird, hinzuzufügen. Ich bin sicher, jemand in diesem Thread weiß es!

Sie haben Recht, und ich stimme zu. Ich habe in der README.md die enthaltenen Ordner bemerkt und andere Webkomponenten-Frameworks gesehen, aber keine Schablone:

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

Ich dachte daher, dass die Schablone aus einem bestimmten Grund nicht enthalten war. Aber wenn das gut funktioniert, ohne dass etwas hinzugefügt wird, ist das für mich völlig in Ordnung.

Übrigens, kann dieses Problem jetzt geschlossen werden, da es durch die oben genannten Webkomponenten-Voreinstellungen gelöst wurde?

Ich werde testen ob es mit Schablone funktioniert und melde mich dann dann können wir schließen. Es macht keinen Sinn, zu schließen, wenn es mit der Schablone nicht wirklich funktioniert ...

...

Hallo @vidarc. Konnten Sie dies mit der Syntax storiesOf() Laufen bringen? Wenn ja, wäre ich sehr gespannt, wie du das gemacht hast. Haben Sie ein Codebeispiel oder eine Codebasis, die Sie teilen möchten?
Während wir Storybook und Schablone integriert haben und gut in unserem Projekt funktionieren, ist der größte Schwachpunkt, den wir haben, auf die Erstellung von Storys mit document.createElement() für Komponenten mit Objektrequisiten usw. zurückgreifen zu müssen. Wenn vhtml lösen kann das, das wäre toll!

Sie können sie als CSF-Geschichten direkt mit den neuesten erstellen und Ihre Geschichten in das Format austauschen, das gut funktioniert. Auch wenn Sie einige Datenfabriken importieren, um die Datenobjekte zu füllen, können Sie diese einfach verwenden, um Ihre Requisiten zu hydratisieren....

Vielen Dank. Hätte nicht gemerkt, dass CSF jetzt die empfohlene Art ist, Geschichten zu schreiben. Haben Sie es geschafft, dass das jsx-Addon mit vhtml funktioniert, oder ist das nicht möglich?

...

Hallo @vidarc. Konnten Sie dies mit der Syntax storiesOf() Laufen bringen? Wenn ja, wäre ich sehr gespannt, wie du das gemacht hast. Haben Sie ein Codebeispiel oder eine Codebasis, die Sie teilen möchten?
Während wir Storybook und Schablone integriert haben und gut in unserem Projekt funktionieren, ist der größte Schwachpunkt, den wir haben, auf die Erstellung von Storys mit document.createElement() für Komponenten mit Objektrequisiten usw. zurückgreifen zu müssen. Wenn vhtml lösen kann das, das wäre toll!

Sie können sie als CSF-Geschichten direkt mit den neuesten erstellen und Ihre Geschichten in das Format austauschen, das gut funktioniert. Auch wenn Sie einige Datenfabriken importieren, um die Datenobjekte zu füllen, können Sie diese einfach verwenden, um Ihre Requisiten zu hydratisieren....

Vielen Dank. Hätte nicht gemerkt, dass CSF jetzt die empfohlene Art ist, Geschichten zu schreiben. Haben Sie es geschafft, dass das jsx-Addon mit vhtml funktioniert, oder ist das nicht möglich?

So wird der JSX direkt über den Stencil-Compiler in den Shadow-Dom geparst. Solange Sie also die Integration des Compliers in das Storybook verwenden, schreiben Sie Ihre Standard-Schablonenkomponente, fügen sie dann in die CSF-Story ein und importieren sie dann in Ihre Data Factory, um die Requisiten zu füllen.

Das Vanilla-Repo, mit dem ich gepostet habe, macht dies sofort ohne VHTML-Plugins oder andere Dinge, nicht einmal einen Wrapper, den Sie direkt als Schablone schreiben und einfach ausgeben können.

Sie können die StoryOf-Syntax verwenden, sind dann aber an das klassische document.createElement-Muster gebunden.
Zum Beispiel diese alte StorysOf Syntax für unser Icon

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

nicht viel anpassen. ein paar Dinge zum Webpack hinzugefügt. Erstes Typoskript beschwert sich über Cannot find name 'h' . meine tsconfig hat jsx = reagieren und jsxFactory = h. Ich kann diese Warnungen verschwinden lassen, indem ich die Pragma-Einstellung // <strong i="8">@jsx</strong> h oben verwende, aber dann erhalte ich einen Storybook-Fehler, da kein DOM-Knoten oder -String zurückgegeben wird.
werde es ausprobieren: https://github.com/developit/vhtml weiter
EDIT: funktioniert super mit jsx. Ich kann jedoch nicht herausfinden, wie man es mit Typoskript zum Laufen bringt :/

Hallo @vidarc. Konnten Sie dies mit der Syntax storiesOf() Laufen bringen? Wenn ja, wäre ich sehr gespannt, wie du das gemacht hast. Haben Sie ein Codebeispiel oder eine Codebasis, die Sie teilen möchten?

Während wir Storybook und Schablone integriert haben und gut in unserem Projekt funktionieren, ist der größte Schwachpunkt, den wir haben, auf die Erstellung von Storys mit document.createElement() für Komponenten mit Objektrequisiten usw. zurückgreifen zu müssen. Wenn vhtml lösen kann das, das wäre toll!

@robaxelsen
Am Ende habe ich nur @storybook/react verwendet und die Webpack-Konfiguration geändert, um MD-Dateien zusammen mit MDX-Dateien zu transformieren. Dann nur noch ein bisschen Code, um Knöpfe basierend auf der Json-Doc-Ausgabeschablone zu erstellen. Für den Schablonencode verwenden wir die Kopie des Storybooks aus ihrer CLI und verknüpfen diese Dateien in der Datei preview-head.html. Erfüllt meine Zwecke ziemlich gut.

@Edd-Strickland Vielen Dank für das Beispiel und die Erklärung. Bei Ihrem letzten Beispiel muss ich jedoch am Ende immer noch Attribute programmgesteuert als Requisiten für das Element übergeben. Meine Hoffnung war, dass ich entweder mit vhtml oder Plain Stencil Compiler meine Stories als JSX schreiben könnte.

Also statt:

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

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

  return icon;
};

...Ich würde schreiben:

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

Sowohl für die Lesbarkeit als auch für die einfache Erstellung von Geschichten. Das ist dann nicht möglich? Wenn es möglich ist, könnten Sie ein kurzes Beispiel geben?

Wir können uns auch im Discord-Chat unterhalten, wenn das einfacher ist. Ich bin Rob Axelsen#1373 .

BEARBEITEN: Um das Obige hinzuzufügen, habe ich mir auch die CSF-Dokumentation angesehen und es mit der JSX-Syntax versucht, h importieren, aber der Fehler "Erwartet einen HTML-Snippet oder DOM-Knoten aus der Geschichte: "Simple Story" von "Komponente"::

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

Wenn es darum geht, Storys zu schreiben, die Eigenschaften für Webkomponenten festlegen müssen, können Sie sich @storybook/web-components ansehen. Es verwendet lit-html, um deklarativ HTML mit Eigenschaften zu erstellen.

Dies sollte funktionieren, wenn Storybook und Schablone nebeneinander laufen :)

Außer, dass die Schablone kein beleuchtetes HTML verwendet. Das ist eine Vue-Sache...

@shilman Es scheint ein @storybook/web-components-Paket bereits im Master in Alpha zu geben, aber ich sehe keine Schablone, auf die in der README.md verwiesen wird: https://github.com/storybookjs/storybook/tree/next/ App/Web-Komponenten

Wie können wir das Webkomponentenpaket herunterladen und testen, das hier verlinkte Repo hat keine Klonaktionen usw.?

@Edd-Strickland das ist nur ein Verzeichnis im Hauptmärchenbuch monorepo

Außer, dass die Schablone kein beleuchtetes HTML verwendet. Das ist eine Vue-Sache...

es ist ein lit thing

Das ist jedoch das Schöne an Webkomponenten - es spielt keine Rolle, welche Schablone unter der Haube verwendet wird. Sie können lit-html oder jede andere Methode verwenden, um Ihre Geschichten zu definieren. Alles, was Sie wahrscheinlich brauchen, ist eine Möglichkeit, "html" mit Eigenschaften zu schreiben.

Für lit-html würde es so aussehen

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

Wenn Sie also in der Story in die DevTools in Chrome gehen würden, könnten Sie die Lit-Komponente auswählen und die folgenden Details lesen

• Eigenschaftstitel zB console.log($0.title) // ein Titel
• Attribut power zB console.log($0.getAttribute('power')) // unbegrenzt

für die Schablonenkomponente wäre es "das gleiche"

• Eigenschaftsdaten zB console.log($0.data) // [{ name: 'john', alter: 21 }, { name: 'maria', alter: 28 }];
• Attribut super-mode zB console.log($0.hasAttribute('super-mode')) // true

lit-html rendert nur das dom... wo/wie die dom-Elemente registriert sind lit-html weiß/kümmert sich nicht darum - welche Technologie für jede Komponente verwendet wird, kann also völlig unterschiedlich sein... z. B. können Sie eine Komponente haben, die sind Lit-Element, Stencil, Vanilla HTMLElement oder es könnte sogar ein Webkomponenten-Wrapper für eine vollständige React/Vue/Angular-Anwendung sein...

Schablone kann ein Compiler sein, aber sobald sie zu einer Webkomponente kompiliert wurde, kann sie nur als Dom verwendet werden 🤗

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

Das Stencil-Team überarbeitet den Compiler, was meiner Meinung nach die Stencil/Storybook-Integration ändern wird.

Wenn jemand nur Schablone und Storybook über React verwenden möchte, checken Sie

Für Interessierte habe ich einen Starter zum Kombinieren von Storybook/react und Stencil veröffentlicht: https://github.com/bbellmyers/stencil-storybook-starter. Beachten Sie, dass bei dieser Konfiguration Änderungen an Komponenten eine harte Aktualisierung im Browser erfordern, Änderungen an Storys jedoch nicht.

Anscheinend entwickelt Storybook Storybook für Webkomponenten. Ich habe es mit Schablone ausprobiert und es funktioniert ziemlich gut.

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

@sem4phor können Sie

Ich erhalte Fehler zu lit-html bei einer neuen Storybook-Installation für Webkomponenten

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 Sie müssen 'lit-html' selbst installieren, es wird zum Rendern von Komponenten in den Standardbeispielen verwendet.

@Edd-Strickland wir haben Storybook für Web-Komponenten hinzugefügt & in 6.0.0 wird Storybook für Polymer veraltet / nicht mehr aktualisiert.

Muss etwas getan werden, damit Storybook für Webkomponenten für Schablonenkomponenten funktioniert?

Das Webkomponenten-Storybook kann Schablonen-Webkomponentenkomponenten rendern, aber Schablone kann nicht unverändert im Browser ausgeführt werden und muss kompiliert werden. Daher bedarf es noch einer besonderen Behandlung, es sei denn, Sie kompilieren die Schablonenkomponenten, bevor Sie storybook ausführen.

@LarsDenBakker ist es eine Frage des Hinzufügens eines Webpack-Plugins / -Loaders, damit das oben genannte funktioniert. (Ich stelle mir vor, es ist erwünscht, die Schablonenkomponente HMR zu erstellen und dynamisch zu kompilieren.)

Ja, obwohl die Schablone selbst Rollup verwendet. Wenn der Kompilierungsschritt als separates Projekt verwendet werden kann, können Sie ihn vielleicht in ein Webpack-Plugin umwandeln. Dafür kenne ich mich mit den Interna nicht aus.

Schablone verwendet kein Webpack. Es verwendet stattdessen Rollup.

Es ist möglich, das von mir eingerichtete Repo zu verwenden, um beides entsprechend zu arbeiten und das HMR-Äquivalent in Stencil mit dem -watch-Aufruf zu aktivieren. Diese Schablone wird also neu geladen, wenn die Schablonen aktualisiert werden, und das Storybook wird neu geladen, wenn es aktualisiert wird.

Sie müssen also nicht jedes Mal aufbauen, da dies alles abdeckt.

Obwohl ich in letzter Zeit keine Zeit hatte, das Repo mit der neuesten SB oder Schablone zu aktualisieren, funktioniert dieser Prozess trotzdem und Sie können das Repo dann mit den neuesten Versionen aktualisieren.

Vielen Dank

@Edd-Strickland wir haben Storybook für Web-Komponenten hinzugefügt & in 6.0.0 wird Storybook für Polymer veraltet / nicht mehr aktualisiert.

Muss etwas getan werden, damit Storybook für Webkomponenten für Schablonenkomponenten funktioniert?

Ja, es berücksichtigt immer noch nicht wirklich Live-Reload / HMR, da wie oben beschrieben die Unterschiede zwischen Webpack- und Rollup-Nutzung vorliegen. Wenn Sie also derzeit die SB WC-Version verwenden möchten, ist zum Rendern ein vollständiger Schablonenaufbau erforderlich dann geht die ganze Güte von HMR an die Schablone verloren.

Diese Version basiert derzeit auf der HTML-Version und nicht auf der Polymer-Version, daher sollte dies keine Auswirkungen auf das längerfristige Ziel haben, diese Version einzustellen.

@LarsDenBakker ist es eine Frage des Hinzufügens eines Webpack-Plugins / -Loaders, damit das oben genannte funktioniert. (Ich stelle mir vor, es ist erwünscht, die Schablonenkomponente HMR zu erstellen und dynamisch zu kompilieren.)

Ich würde es nicht raten, die Webpack-Version von Stencil ist ein deutlich schwierigerer Entwicklungspfad und erhöht den Abhängigkeits-Fußabdruck ohne jegliche Notwendigkeit Wechsel des WC oder der SB-Instanz. Es geht darum, es so zu konfigurieren, dass beides zulässt.

Ja, obwohl die Schablone selbst Rollup verwendet. Wenn der Kompilierungsschritt als separates Projekt verwendet werden kann, können Sie ihn vielleicht in ein Webpack-Plugin umwandeln. Dafür kenne ich mich mit den Interna nicht aus.

Es gibt bereits ein Schablonen-WP-Plugin, dies ist jedoch keine unterstützte oder von der Community genehmigte Abhängigkeit.

cc @jthoms1 @adamdbradley

@dmartinjs Sie müssen 'lit-html' selbst installieren, es wird zum Rendern von Komponenten in den Standardbeispielen verwendet.

@sem4phor können Sie

Ich erhalte Fehler zu lit-html bei einer neuen Storybook-Installation für Webkomponenten

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

Irgendwelche Rückmeldungen dazu? Ich muss diese Abhängigkeit selbst installieren. Wenn es von @storybook/web-components verwendet wird, sollte es automatisch als Abhängigkeit installiert werden...?

@LeeBurton nicht, wenn es sich um eine Peer-Abhängigkeit handelt? (Nicht sicher, ob es so ist, wenn nicht, sollte es vielleicht sein) cc @daKmoR

@LeeBurton zu der Zeit, als ich es testete, war lit-html eine Peer-Abhängigkeit. Es ist normal, dass Sie Peer-Abhängigkeiten selbst installieren müssen. https://nodejs.org/es/blog/npm/peer-dependencies/

Für was es wert ist, habe ich eine Schablone mit dieser Konfiguration in .storybook/preview.js

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

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

@idmyn Ich habe das versucht, und während es kompiliert wird, werden Änderungen an einer src-Datei immer noch nicht ohne manuelles

Ich habe es zum Laufen gebracht, indem ich den Build von Stencil lokal mit aktivierter Watch in einem npm-Ausführungsskript ausgeführt habe, während ich start-storybook parallel mit dem Paket npm-run-all .

Ich habe die Webpack-Konfiguration von storybook so konfiguriert, dass die dist-Dateien von Stencil mit den folgenden in meiner main.js angezeigt werden:

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

Möglicherweise müssen Sie die Pfade / Dateien für Ihr Projekt ein wenig ändern, aber das hat bei mir funktioniert.

Ich frage mich nur, gedacht haben , ihre Lösungen in ein Preset für 6 zu verwandeln? Ich habe beide Repos verwendet und mag - wie so oft - Teile von jedem :-)

Ich habe meine Kopie von @ Edd-Strickland einigermaßen erfolgreich auf 6.0.0-beta verschoben, obwohl ich finde, dass nicht immer alles neu erstellt wird, wenn eine Änderung festgestellt wird (zB readme.md).

Ist das öffentlich verfügbar @paulfelton?

Es ist jetzt, hilf dir selbst :-)

Ich habe Edds Projekt gegabelt . @Edd-Strickland, soll ich in einer PR erscheinen? Es braucht eine gute Überprüfung, ich bin kein Experte darin.

Ich habe die Pakete gestoßen, die Konfiguration in das neue Format umgestaltet. Ich musste eine Eingabe hinzufügen und in tsconfig darauf verweisen, um die Geschichte zum Importieren der Schablonen-Readme zu erhalten, und eine Konfiguration hinzufügen, um "Notizen" in "Dokumente" zu übersetzen.

Wunschzettel:

• Nun, ich würde gerne sehen, dass die Integration eine grundlegende Geschichte aus der Schablonenkomponente generiert. Idealerweise sowohl mdx als auch CSF.
• Ich würde gerne von Storybook HTML zu Storybook Webcomponent wechseln, obwohl ich mir nicht sicher bin, ob dies Vorteile bringt. Es fühlt sich einfach natürlicher an.
• Ich möchte, dass die Schablonendokumente natürlicher in die neuen Addon-Dokumente importiert werden, anstatt über Notizen zu gehen.
• All dies über ein Preset :-)

@paulfelton brauchst du irgendwas von mir?

@ndelangen Ich bin mir nicht sicher. Wie Sie vielleicht mitbekommen haben, bin ich sowohl bei Stencil als auch bei Storybook ziemlich neu, also habe ich gerade zusammengetan, was ich aus verschiedenen Themendiskussionen, Google usw.

Ich habe mich auch an einem Starter-Repo versucht, stark inspiriert, aber all die großartigen Bemühungen in dieser Ausgabe (danke an alle!).

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

Verwendet @storybook/web-components , arbeitet mit den wesentlichen Addons (zB Controls, Actions). Neueste Versionen von allem in dieser Phase..

Einige zusätzliche Integration zwischen dem Stencil-Entwicklungsserver und dem Storybook-Vorschau-Frame (damit das Stencil-Fehler-Overlay in Storybook inline angezeigt wird - besser DX!) (überprüfen Sie ./storybook/preview-body.html und ./src/index.html für die Deets).

~ Den Stencil-Devserver in start-storybook gemasert, so dass Sie nur einen einzigen Befehl ausführen und die Schablone hinter den Kulissen hochfährt.~
BEARBEITEN: vereinfacht dies mit concurrently + wait-on - warten Sie, bis die Schablone hochgefahren ist, und fahren Sie dann mit Storybook fort

Bei Codeänderungen (an Schablonenkomponenten oder Storybook-Geschichten) wird der Vorschaurahmen neu geladen (nicht die gesamte Storybook-App). Es ist kein richtiges HMR, aber es ist einigermaßen nett, damit zu entwickeln!

Schön. Der Link funktioniert nicht.

Hoppla, das Repo ist jetzt öffentlich ^

Ich habe hier ein Boilerplate-Repo mit Stencil v2 und @storybook/web-components v6 zusammengestellt: https://github.com/bjankord/stencil-storybook-boilerplate

Es gibt auch ein Repo unter https://github.com/miriamgonp/stencil-web-components-boilerplate, das von @miriamgonp aus dem Storybook/Stencil Discord Channel erstellt wurde. Hat jemand Lust, diese aufkommenden Boilerplates zu kombinieren? ;-)

Diese beiden Repos sehen toll aus. Wenn sie zu einem zusammengefasst würden, wäre das eine gute Ergänzung. Und wenn jemand bereit wäre, mit einem Tutorial in Intro to Storybook basierend auf diesen beiden Repos beizutragen, würden wir uns sehr freuen. Lassen Sie es mich wissen, wenn jemand bereit ist, uns dabei zu helfen, und ich würde gerne übergehen, um Mitgliedern der Community zu helfen, die Schablone verwenden.

Ich habe eine richtige HMR-Lösung ;) Demnächst!

Ich habe eine richtige HMR-Lösung ;) Demnächst!

hier ist es!
Stencil 2+ & Storybook 6+ (Die alte Stencil-Version sollte auch funktionieren ;))
https://github.com/dutscher/stencil-storybook
viel spaß und gruss

edit: mit storybook auf gh-pages https://dutscher.github.io/stencil-storybook/index.html

Habe dies ^^ letzte Woche in unser Projekt getauscht und nachdem wir die für uns nicht relevanten Bits (Bootstrap, scss, chromatisch usw.) entfernt und ein paar kleinere Dinge repariert haben (z. myorg/my-proj-Format) hat es wirklich gut funktioniert.

Benutze es jetzt seit einem Tag oder so und das HMR ist ausgezeichnet!

@elwynelwyn Was denkst du, was wir auf der Seite des Bilderbuchs tun müssen?

@ndelangen die wichtigen dinge sind:

1. der Proxy https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. die Schablonenproduktionsinjektion über main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. und einfache und minimale npm-Skripte für dev und prod https://github.com/dutscher/stencil-storybook/blob/master/package.json

Danke schön