Дубликат № 1870 и № 3423. Продолжим обсуждение там

Будет создана новая стартовая сборка для текущего трафарета и SB 5

@ Edd-Strickland хочет работать над версией поддержки stencl 🎉

Я обновил полимерный стартер с помощью трафарета до последней версии SB, мне нужна помощь в удалении полимера и добавлении трафарета.

Привет,

@ Edd-Strickland просто для информации, я реализовал Stencil внутри Storybook, как вы это сделали в своем стартере, в этом проекте: https://github.com/vogloblinsky/nutrition-web-components

Я использовал стартовую HTML-версию Storybook.

На данный момент с Storybook & Stencil мне просто нужно было:

• добавить настраиваемый заголовок, указывающий на каждый корневой файл JavaScript, созданный Stencil
• добавить статические файлы, созданные Stencil, в Storybook

Основная проблема, я думаю, заключается в использовании Webpack от Storybook для обработки файлов JavaScript, импортированных внутри истории. Идеальный рабочий процесс - импортировать только JS-файл веб-компонента.

Да, это то, что делали раньше, но с полимерной версией, однако это означает, что при импорте как простых статических реализаций W / C вам нужно каждый раз обновлять свою историю, что кажется ограничивающим.

Привет всем, я создал оболочку, которую можно установить на проект типа трафарет component . Надеюсь, это поможет. https://github.com/nisheed2440/stencil-storybook-wrapper

выглядит очень хорошо, буду тестировать в понедельник. Хорошая работа :)

Будет ли это официальной частью сборника рассказов? Я отчаянно в этом нуждаюсь!

@otw Мы пытаемся, не могли бы вы нам помочь?

@ndelangen Я был бы рад протестировать и предоставить отзывы / отчеты об ошибках.

Будет ли это работать с LitElement (и веб-компонентами в целом) или только со Stencil?

@ nisheed2440 ваша обертка кажется многообещающей, я скоро ее протестирую! Но было бы здорово иметь "родную" интеграцию, задокументированную Storybook 👌

@ nisheed2440 Я был очень занят (извините всех), но сегодня у меня было очень маленькое окно, чтобы протестировать очень оригинальную версию этого локально, и это действительно хорошо. действительно хорошо работает.

собираюсь потратить некоторое время на этой следующей неделе, пытаясь включить его в существующий проект, чтобы увидеть, как это может работать для существующих пользователей / проектов трафаретов.

Я протестировал его сегодня утром, и он тоже неплохо работает! GJ это действительно легко настроить. Я установил и протестировал несколько дополнений:

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

Все работает нормально, только что обнаружена одна проблема с дополнительными кнопками https://github.com/storybooks/storybook/issues/5017 Но есть обходной путь, и я думаю, что это должно быть исправлено довольно скоро.

Я провел последние 2 недели, играя с StencilJS и Storybook, и провел прямую трансляцию, в которой я рассказал о своем решении. Я считаю, что есть способ лучше, но мне удалось получить HMR и большинство плагинов, которые работают без особых проблем. Хотелось бы получить ваши отзывы о том, как улучшить или импортировать загрузчики из комплекта трафаретов распространения.

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

А вот и репо! ^ _ ^
https://github.com/MadnessLabs/enjin-components

@ nisheed2440 Привет, я использую подход, очень похожий на ваш, и все работает, кроме хроматического. Удалось ли вам сделать хроматическую работу с трафаретом / сборником рассказов?
когда я бегу, он обнаруживает все мои истории, но все скриншоты пусты. вероятно, отсутствует трафарет при попытке отрендерить снимок экрана компонента на хроматическом сервере

@ nisheed2440 Большое спасибо за действительно большие усилия. Надеюсь, это даст команде фору в правильном направлении. Трафарет и сборники рассказов идеально подходят друг другу.

Всем привет! Похоже, что в последнее время в этом вопросе не так много происходило. Если остались вопросы, комментарии или ошибки, пожалуйста, продолжайте обсуждение. К сожалению, у нас нет времени разбираться в каждой проблеме. Мы всегда открыты для внесения вклада, поэтому, если вы хотите помочь, отправьте нам запрос на включение. Неактивные вопросы будут закрыты через 30 дней. Спасибо!

Кто-нибудь хочет это забрать?

Моя команда использует StencilJS + Storybook для нашей общей библиотеки компонентов, и я хотел бы внести свой вклад. Может быть, некоторым из нас удастся вернуть эту штуку в нужное русло ...

Похоже, есть большой интерес, например https://twitter.com/dboskovic/status/1120336958008348672

Одним из простых способов было бы опубликовать пакет @storybook/preset-stencil , который упаковывает конфигурацию @ popcorn245 в предустановку сборника рассказов . Мне все еще нужно закончить документацию для этого, но я использую ее для предстоящего выпуска Storybook Docs, и это просто и то, как большинство конфигураций SB будет работать в будущем.

Я был бы рад направить любого, кто захочет это понять.

Привет, @shilman , я рад, что так много людей хотят уловить это и реализовать Stencil с помощью Storybook. В этом потоке есть некоторые хорошие вещи, которые я нашел, но есть еще много мелких ошибок, таких как необходимость возвращать строку элемента для использования кнопок.

Намного лучшая реализация могла бы совмещать компилятор Stencil и позволять использовать JSX, как с компонентами React, но это MHO.

Кроме того, Stencil One скоро упадет с некоторыми огромными изменениями, поэтому было бы неплохо добавить наблюдателей в этот журнал изменений, чтобы убедиться, что тот, кто работает над этим, знает, что происходит в конвейере.

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

Эта ветка была мне очень полезна, особенно конфиг @ popcorn245. Лично я использовал @stencil/state-tunnel , что нарушило эту конфигурацию. К счастью, мне удалось заставить его работать с некоторыми небольшими ~ хакерскими ~ настройками, запустив:

npm i -D [email protected]

И добавляем это к .storybook/webpack.config.js :

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

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

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

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

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

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

  return config;
};

Начало экспериментов с этим тоже и (как уже упоминалось где-то в другом месте) с использованием concurrently похоже, отлично работает для меня (на данный момент). Я создал быстрый стартовый проект, который включает в себя все необходимое для работы с трафаретом и сборником рассказов. Уже используется последняя версия трафарета.

Посмотрите здесь: трафарет-сборник рассказов-стартер

@ fvaldes33 Здорово ! Снял это. На самом деле я только что обновился до бета-версии Stencil One, и моя конфигурация выглядит примерно так же - я могу полностью использовать стандартную настройку веб-пакета.

Единственная разница для меня заключалась в использовании stencil build --watch (prod, а не dev), потому что время сборки очень быстрое и легче использовать версию prod в Stencil (особенно с глобальными стилями и другим импортом).

@ fvaldes33, как вы можете ссылаться на build / components.js в вашем превью-head.html таким образом? Я должен указать полный путь, например http: // localhost : 3333 / build / components.js. Но я бы не хотел этого делать.

(Я не использую ваш стартер, но я использую стартовый компонент трафарета с новой установкой сборника рассказов / html)

РЕДАКТИРОВАТЬ:
понял, что я запускал сборник рассказов на порте 6006, а не в папке www. задача решена!

Похоже, у многих из нас есть похожие решения (включая меня https://github.com/jagreehal/stencil-boilerplate), но мне действительно нужны горячие / живые обновления, когда я редактирую компонент Stencil. В настоящее время мне нужно вручную обновить браузер, чтобы перезагрузить Storybook.

Есть ли список требований для выполнения этого? Я был бы счастлив участвовать, если бы знал, что нужно построить.

В каком состоянии сейчас? Можем ли мы внести свой вклад? Я бы очень хотел это увидеть!

Я предложил добавить предустановку выше.

• Пресеты задокументированы здесь: https://storybook.js.org/docs/presets/introduction/
• Здесь есть репо для пресетов сообщества: https://github.com/storybookjs/presets

Если бы кто-то хотел собрать предустановку на основе вышеперечисленных шаблонов, я был бы рад помочь со стороны сборника рассказов. Я не знаком со стороной трафарета.

Я только что опубликовал свой проект для всех, кто этого хочет. Вот особенности:

• автоматическое создание историй
  
  
  
  • автоматическая генерация ручек для всех @Props на ваших компонентах
  
  
  • возможность настраивать, какие ручки используются для каждой опоры (хотя код хорошо справляется с угадыванием строк, чисел, логических значений, объектов, дат и цветов).
  
  
  • возможность определять несколько состояний, которые отображаются на одной странице, каждое с заголовком, описанием и копируемым фрагментом кода (своего рода упрощенная реализация глав)
  
  
  • возможность определять заметки для каждого компонента (обычно вам нужен сгенерированный файл readme)
  
  
• живая перестройка / перезагрузка компонентов трафарета (это все еще немного шатко - иногда вам нужно обновить браузер)
• поставляется с надстройкой области просмотра

Дайте мне знать, что вы думаете: https://github.com/DesignByOnyx/stencil-storybook-starter

@DesignByOnyx Выглядит отлично. Напишите об этом в Твиттере и упомяните @storybookjs и я буду RT из учетной записи сборника рассказов. И если вы хотите написать об этом пост, я буду счастлив работать с вами, чтобы опубликовать его. Думаю, здесь довольно большой спрос.

Замечательная работа

Хорошо, я написал в Твиттере (я не много пишу в Твиттере). Кроме того, у меня нет блога: /, но я рад написать что-нибудь, если кто-то захочет опубликовать это.

Пока проект работает, я скинул его в спешке и не особо упростил настройку. Часть кода там действительно хрупкая, так как мне приходится загружать и объединять несколько файлов, чтобы отобразить каждый отдельный компонент. Я надеюсь получить отзывы, прежде чем я потрачу какое-то время на то, чтобы сделать его более расходным.

Мне любопытно посмотреть, как будет выглядеть пресет. Самое большое, что было бы неплохо, - это пресет JSX, который не реагирует. Это позволит немного упростить рендеринг и генерацию шаблонов поверх разнообразия storybook-html, и это не имеет особого отношения к трафарету. Также необходимо обновить несколько надстроек, чтобы это можно было использовать, и я не уверен, что могу лучше координировать эти усилия. В любом случае, дайте мне знать, чем я могу помочь.

@DesignByOnyx Есть шанс, что вы сможете https://discordapp.com/invite/UUt2PJb

Я хотел бы поболтать о том, чтобы опубликовать эту работу в блоге Storybook, а также о продвижении в сообществе трафаретов.

Я играл с @storybook/html для Stencil, и опыт в значительной степени "просто работает". По сути, вы делаете следующее:

1. Используйте concurrently для запуска сервера Storybook и stencil build --watch "параллельно"
2. Начните storybook с флагом -s dist , чтобы ваш шаблон dist обслуживался как статические файлы.

3. Настройте .storybook/preview-head.html для включения тега сценария, например:

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

Вот и все! Готовая поддержка html работает для всех потребностей вашего веб-компонента.

Я бы хотел увидеть что-то вроде @storybook/stencil которое имеет тот же опыт (и код), что и пакет html на стороне создания историй, но

1. Абстрагируется от запуска процесса сборки трафарета как части Storybook, поэтому настройка concurrently не требуется
2. Добавляет вам теги script
3. Подключает автоматическое обновление при повторной сборке компонентов Stencil

Есть ли в этом интерес? Я занимаюсь продажей своей компании Stencil и Storybook, и, если предположить, что это набирает обороты, у меня будет «рабочее время», чтобы сделать эту историю (извините за каламбур) действительно приятной в рамках совместной игры Storybook + Stencil.

Работа, которую проделал @DesignByOnyx , действительно великолепна, но вам нужно как бы _стартать_ ваши компоненты Stencil с этим набором и игнорировать «обычную» документацию для Stencil. Если Storybook может предоставить пакет, который можно наложить поверх «обычного» стартового набора Stencil, вы можете легко добавить конфигурацию Storybook к существующему набору компонентов Stencil.

Спасибо за отличное резюме @alexlafroscia. Я думаю, ваше предложение имеет большой смысл. HMR не срабатывает автоматически при восстановлении трафарета? Если так, то почему бы и нет?

@ igor-dv Можно ли добавить к preview-head.html в пресете?

@Hypnosphi Может быть, это интересный пример для ваших усилий по созданию нескольких фреймворков. В этом случае декоратор не нужен (очевидно), но нужен целый компилятор.

@alexlafroscia, как в вашем случае выглядит пример истории?

В компании, где я работаю, мы какое-то время играли с пакетами Storybook HTML и StencilJS. Я был бы рад внести свой вклад!

@alexlafroscia Очень отличные идеи, действительно, было бы неплохо иметь полную поддержку этого компилятора. Вот еще несколько идей:

• Используйте возможности StencilJS JSX (на данный момент основанные на Preact), чтобы писать истории более удобным для сопровождения способом. Использование простого старого JS или даже шаблонных литералов может быть громоздким ...
• Имейте надстройку Smart Knobs для веб-компонентов. @DesignByOnyx предоставил для этого хорошую основу.

В этой статье рассматривается текущая дорожная карта в StencilJS: Fall 2019 Stencil Roadmap . В частности:

API общедоступного компилятора

Еще одна область, на которой мы также сосредоточены, - это обеспечение того, чтобы компилятор мог работать в браузере и использоваться другими инструментами. Мы уже работали с несколькими замечательными командами, такими как Stackblitz, CodeSandbox и WebComponents.dev. На самых низких уровнях компилятор уже работает без запуска в среде NodeJS, так что технически это не серьезный рефакторинг, а в большей степени просто предоставление правильных API.

Мы также видим много областей для улучшения, чтобы компилятор можно было легко использовать другими инструментами NodeJS, включая Rollup, Parcel, WebPack и Bazel. Если вы сопровождаете какой-либо инструмент, будь то онлайн-инструмент или среда NodeJS, и вы хотите реализовать компилятор Stencil, пожалуйста, свяжитесь с нами, и мы будем рады помочь!

Может быть полезно!

HMR не срабатывает автоматически при восстановлении трафарета? Если так, то почему бы и нет?

@shilman Это не <script> указывающий на созданные ресурсы.

как в вашем случае выглядит пример истории?

@Hypnosphi Они выглядят примерно так (история для my-component по умолчанию, который Stencil генерирует в исходном пакете, который они создают, когда вы npm init stencil

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

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

Используйте возможности StencilJS JSX (на данный момент основанные на Preact), чтобы писать истории более удобным для сопровождения способом. Использование простого старого JS или даже шаблонных литералов может быть громоздким ...

@darondel Я полностью согласен с опасениями разработчиков по поводу отсутствия JSX в файлах создания историй. Я использовал этот подход в прошлом, до того, как был доступен @storybook/html , и использовал опыт React, который был нормальным.

Частично желание сохранить вещи как можно ближе к «стандартному» опыту html состоит в том, чтобы истории действовали как документация о том, как их фактически использовать с точки зрения HTML - в противном случае они привязаны к чему-то вроде Preact, который по крайней мере, в моей организации, больше нигде не используется (мы в первую очередь магазин Ember.js).

Вы упомянули, что теги шаблонов не принесут большого удовольствия, но я думаю, что что-то вроде htm могло бы быть хорошим вариантом. Это также делает процесс сборки красивым и простым, потому что нет обязательного шага сборки, но может упростить взаимодействие с чем-то вроде Knobs.

Я также подумал, что попытка интеграции с чем-то вроде предстоящей DocsPage может быть интересной! Готов поспорить, что часть работы, которая уже была проделана @DesignByOnyx, может быть здесь полезна, так что есть путь к чтению «метаданных» компонента Stencil для автоматического создания информации документации. Вероятно, это не проблема "v1", но что-то, что было бы действительно здорово увидеть для "v1.1"! Мне очень нравится твоя идея сделать что-то вроде этого аддона с автоматическими ручками, это было бы очень удобно!

Выпустив сегодня DocsPages вместе с Storybook 5.2, я провел небольшое исследование, чтобы выяснить, можно ли получить информацию о реквизитах и ​​тому подобном из Stencil и отобразить в Storybook. Я думаю, что это должно быть возможно, но определенно подчеркивает, насколько было бы полезно иметь аддон или пресет, адаптированный для использования Storybook с Stencil, чтобы разместить кучу «клея», необходимого для этого.

Я собираюсь еще немного повозиться с вещами на этой неделе и посмотреть, смогу ли я что-нибудь собрать.

@alexlafroscia хотела бы стандартизировать способ передачи этих данных разными фреймворками. Видели кое-что интересное от Jetbrains (web_types? Cc @elevatebart ), а также @atanasster также работает в этой области для кеширования типов

Я не знаком с работой Jetbrains - мне нужно это проверить! Если у вас есть какая-либо конкретная информация, которую было бы полезно просмотреть, я был бы рад, если бы вы пришли мне ее!

В случае со Stencil, я думаю, что «лучше всего» будет, если процесс сборки Stencil выводит документы JSON либо в место, которое хорошо известно надстройке Stencil Storybook, либо в настраиваемое место. Этот объект содержит всю информацию об ожидаемых реквизитах, генерируемых событиях и даже содержимое файла readme для каждого компонента (без автоматически сгенерированной документации по реквизитам). Я думаю, что мы могли бы создать действительно убедительную историю для заполнения Storybook DocsPage информацией из этого файла 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": []
    }
  ]
}

Это своего рода взлом (у меня он записывает вывод JSON в dist/output.json а затем использует fetch чтобы захватить файл), но я смог получить рендеринг DocsPage для компонента Storybook, просто переопределив реквизиты слота, которые может принимать компонент DocsPage .

Стол Props не идеален, но довольно хорош; вывод Stencil предоставляет все свойства, которые ожидает таблица, а затем некоторые. Все, что находится в readme.md для компонента, будет отображаться в верхней части файла.

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

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

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

  if (!payload) {
    return null;
  }

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

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

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

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

Обновление: сделав еще один шаг, я определил полностью настраиваемый DocsPage (а не просто переопределение слотов), чтобы получить вторую таблицу с документацией по любым настраиваемым стилям.

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

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

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

  if (!payload) {
    return undefined;
  }

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

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

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

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

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

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

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

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

На настраиваемой странице также исправлен тот факт, что каждая история по умолчанию имеет высоту 500px , что слишком высоко 😅

@alexlafroscia Это потрясающая, потрясающая работа!

К вашему сведению, мы собираемся обобщить информацию о таблице опор в 5.3. В частности, такие фреймворки, как Vue, имеют концепцию слотов и событий, поэтому их следует разделить на отдельные таблицы. Возможно, в вашей работе над стилями можно использовать тот же механизм. https://github.com/storybookjs/storybook/issues/8123

Это проект Jetbrains, о котором я говорил (cc @piotrtomiak): https://github.com/JetBrains/web-types

Я не рассматривал его подробно и не знаю, подходит ли он нам. Однако, если он соответствует нашим вариантам использования и не добавляет лишнего мусора, я бы предпочел использовать существующий стандарт, а не изобретать наш собственный.

@shilman Спасибо, что посмотрели на наши (JetBrains) усилия по внедрению некоторого стандарта для обмена информацией метаданных в библиотеки веб-компонентов! Наша первоначальная цель заключалась в том, чтобы просто обеспечить хорошее завершение кода для компонентов Vue в файлах HTML, но мы обнаружили, что с таким стандартом можно добиться гораздо большего, поэтому мы разработали его с учетом общего формата обмена информацией (IDE, инструменты, документация). До сих пор мы фокусировались на фреймворке Vue, однако мы всегда имели в виду поддержку веб-компонентов или других фреймворков. Стандарт web-types довольно свежий, но мы уже слышали положительные отзывы от сообщества и пользователей Vue. Я активно продвигаю спецификацию в сообществе Vue, но так здорово получить интерес со стороны другого сообщества!

Я думаю, что в схеме web-types JSON могут отсутствовать некоторые вещи, которые будут специфичными для вашей структуры, и их можно добавить в спецификацию. Например, элементы Vue имеют префикс vue . Также отсутствует целый раздел для документирования поддержки CSS, над которым мы могли бы поработать. Итак, если вы чувствуете, что стоит дать шанс web-types , не стесняйтесь сообщать о проблемах или создавать PR за отсутствующие функции.

Побочным эффектом документирования ваших компонентов в формате web-types будет хорошее завершение кода, когда разработчики включат вашу библиотеку в свой проект. Мы планируем реализовать такую ​​общую поддержку на основе общих функций web-types для всех фреймворков в самом ближайшем будущем. Я почти уверен, что по мере того, как более широкое сообщество принимает формат, другие IDE будут поддерживать этот формат, что принесет пользу всем :)

@alexlafroscia фантастическая работа! Интеграция Stencil и Storybook (вместе с https://github.com/storybookjs/storybook/issues/7644) выглядит хорошо

Благодарим за ссылку на эту проблему! Первоначально я пошел по аналогичному пути (пытаясь каким-то образом использовать существующие файлы README и вытащить их прямо в DocsPage), но в конечном итоге обнаружил, что проще просто использовать данные, которые Stencil помещает в файл JSON документации, поскольку он _не_ включает таблицу реквизита и всего остального (поскольку эти данные находятся в другом месте файла JSON, а структурированные данные идеально подходят для создания настраиваемой таблицы).

@alexlafroscia Спасибо, что поделились своими выводами. Могу я спросить, как мне отладить CustomDocsPage ?

Я пробовал добавить его с помощью addParameters и, похоже, он не использует обычай, а вместо этого используется по умолчанию.

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

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

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

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

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

Сам WC загружается на страницу документации сборника рассказов, даже без использования CustomDocsPage .
Есть ли способ отладить компонент? Я попытался добавить журналы, но ничего не вижу.

Заранее спасибо.

Я тоже столкнулся с этой проблемой - мне пришлось переопределить компонент DocsPage на уровне "компонента"

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

возможно ли вообще заставить @storybook/html работать с jsx? значительно упростит написание моих историй для компонентов трафарета. получит набор, автозаполнение и не нужно использовать document.createElement или большие строки шаблона. пытался обмануть машинописный текст с помощью // @jsx вверху с помощью пакета реакции, но это не сработало.

@vidarc в чем была ошибка, когда вы это сделали? У вас есть настраиваемая конфигурация babel ?

не много настроек. в веб-пакет добавлено несколько вещей. первый машинописный текст жалуется на Cannot find name 'h' . В моем tsconfig есть jsx = react и jsxFactory = h. Я могу заставить эти предупреждения исчезнуть, используя параметр // <strong i="6">@jsx</strong> h вверху, но затем я получаю ошибку сборника рассказов из-за того, что он не возвращает узел или строку DOM.

собираюсь попробовать: https://github.com/developit/vhtml далее

РЕДАКТИРОВАТЬ: отлично работает с jsx. не могу понять, как заставить его работать с машинописным текстом: /

@vidarc, если h означает гиперскрипт, он возвращает настраиваемый объект, который не является ни строкой, ни элементом DOM

vhtml кажется подходящим вариантом

К вашему сведению, у нас есть входящий PR для приложения web-components : https://github.com/storybookjs/storybook/pull/8400

Может ли кто-нибудь здесь прокомментировать, как это пересекается с этой проблемой? @vidarc @DesignByOnyx @ Эдд-Стрикленд @alexlafroscia @daKmoR

Я еще не тестировал # 8400, но перед тестированием я смог заставить работать "живой" трафарет с помощью:

1. Запустить start-storybook -s ./www в одном окне.
2. Запустите stencil build --dev --watch в другом.
3. Обновите .storybook/config.ts чтобы перезагрузить окно HMR:

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

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

configure(loadStories, module);

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

Это немного неуклюже.

Причина, по которой я не мог исследовать альтернативы, такие как https://github.com/CleverCloud/clever-components/blob/master/stories/atoms/cc-button.stories.js, заключается в том, что import "./my-component" не работает с import { Component } from "@stencil/core" не является допустимым экспортом и фактически удаляется как часть процесса сборки:

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

Есть ли у кого-нибудь на самом деле реализация / конфигурация трафарета и сборника рассказов, которая работает в IE11? Я безуспешно пробовал каждую реализацию, упомянутую в этом потоке.
всегда сталкиваться с отказом необработанного обещания. Ошибка типа: недопустимая схема с версиями трафарета 1.2.4 -> 1.7.4.

@shilman Мне удалось получить компоненты трафарета в приложении web-components , но мне кажется, что он просто читает их так же, как все делают с html one, а HMR этого не делает. t реагировать на обновления самих компонентов трафарета.

Было бы действительно лучше, если бы был способ встроить компилятор трафарета в последовательность запуска сборника рассказов, как это делается для React, Angular и т. Д.

Я продолжу пробовать способы «живого» компонента Stencil, но архитектурная проблема, с которой я столкнулся, заключается в том, что, если я не ошибаюсь, для работы компонентов _Stencil требуется настраиваемый этап сборки_ ( stencil build --dev --watch ), и нет эквивалента во время выполнения.

Я попытался сделать import { MyComponent} from "./MyComponent" , но это не удалось, поскольку @Component фактически не экспортируется из @stencil/core . Фактически, он удаляется как часть этапа сборки:

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

Зная это, мой следующий тест - сохранить этап сборки с привязками React (https://github.com/ionic-team/stencil-ds-plugins), но вместо этого заменить логику HMR на использование историй React (вместо HTML). .

Надеюсь, это позволит UX сборника рассказов соответствовать React, оставив Stencil только реализации компонента.

Я не думаю, что настал конец света, чтобы stencil build выполнялись параллельно в режиме разработки:

• Мы могли бы проинструктировать пользователя, как запустить это одновременно в их package.json
• Предустановка трафарета может вызвать этот процесс при запуске, а затем убить его при выключении, если мы хотим скрыть это от пользователя.

Решение с меньшим количеством движущихся частей предпочтительнее, но давайте не позволим хорошему быть здесь врагом великого. AFAIK на данный момент каждый по-прежнему использует свою собственную поддержку трафаретов, и есть хорошая возможность помочь упростить вещи для многих людей здесь ...

В настоящее время у меня работает одновременное использование.

Конечно, есть дополнительные шаги.

Главное, что меня привлекло как пользователя, это «почему» трафарет не работает одинаково
как мои истории реакции, которые не могут быть решены без специфичных для трафаретов
изменения.

31 октября 2019 г., 17:02 Майкл Шилман [email protected]
написал:

Я не думаю, что это конец света, когда требуется, чтобы трафарет был
работает параллельно в режиме разработки:

• Мы могли бы проинструктировать пользователя, как запустить это одновременно с
  https://www.npmjs.com/package/concurrently в их package.json
• Предустановка трафарета может вызвать этот процесс при запуске, а затем убить
  это при выключении, если мы хотим скрыть это от пользователя

Решение с меньшим количеством движущихся частей предпочтительнее, но давайте не будем допустить хорошего
быть здесь врагом великого. AFAIK на данный момент все еще катят свои
собственная подставка для трафаретов прямо сейчас, и есть хорошая возможность помочь
упростить для многих здесь людей ...

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/storybookjs/storybook/issues/4600?email_source=notifications&email_token=AAADWTSIACMC4XSZHQWMAFTQRNW2DA5CNFSM4F7Y7BGKYY3PNVWWK3TUL52HS4DFMVREXG8
или отказаться от подписки
https://github.com/notifications/unsubscribe-auth/AAADWTWS5RITQW46NXEJHZLQRNW2DANCNFSM4F7Y7BGA
.

еще один подход к этому - четко отделить пользовательский интерфейс (сборник рассказов) от предварительного просмотра (трафарета). С автономным сборником рассказов это уже должно быть возможно.
Таким образом вы даже можете заранее создать сборник рассказов 💪, что значительно ускорит загрузку.

И тогда вы как бы будете использовать только трафаретную сборку при разработке (но все еще используя пользовательский интерфейс сборников рассказов). Это будет означать, что вы получите все плюсы, которые поддерживает сервер stencil dev, без необходимости думать о взаимодействии с настройкой webpack для сборников рассказов.

Мы уже исследовали это, используя es-dev-server для предварительного просмотра web-components . У нас вроде есть POC ... но есть еще некоторые неровности.
Однако я полагаю, что тот же подход должен работать и для трафарета.

Если у кого-то есть какие-либо вопросы или кто-то будет заинтересован в исследовании этого шаблона или помощи в создании эталонного проекта с использованием es-dev-server я уверен, что @LarsDenBakker с радостью поделится некоторыми подробностями 🤗

PS: все это возможно только из-за того, что в сборнике рассказов есть эта потрясающая настройка iframe с сообщениями каналов, чтобы пользовательский интерфейс был отделен от предварительного просмотра 🤗

всем привет

По прошествии некоторого времени и большого количества возни с этим я стал моим репо для реализации интегрированного сборника рассказов с трафаретом https://github.com/Edd-Strickland/stencilbook.

Рад продолжить обсуждение, надеюсь, большинство вещей очевидно из файла readme и из файла package.json для поиска скриптов.

Он построен с использованием стартового компонента ванильного трафарета и HTML-реализации ванильного сборника рассказов.

Пожалуйста, посмотрите и просмотрите ...

StencilBook - Начальный сборник рассказов по трафаретам

Это начальный проект для создания автономного веб-компонента с использованием Stencil и Storybook.

Трафарет

Stencil - это компилятор для создания быстрых веб-приложений с использованием веб-компонентов.

Stencil объединяет лучшие концепции самых популярных фреймворков внешнего интерфейса в инструмент времени компиляции, а не времени выполнения. Stencil берет TypeScript, JSX, крошечный виртуальный слой DOM, эффективную одностороннюю привязку данных, асинхронный конвейер рендеринга (аналогичный React Fiber) и ленивую загрузку из коробки и генерирует 100% основанные на стандартах веб-компоненты, которые запускаются. в любом браузере, поддерживающем спецификацию Custom Elements v1.

Компоненты трафарета - это просто веб-компоненты, поэтому они работают в любой основной структуре или вообще без нее.

Начиная

Клонировать репо

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

Перейдите в базовый каталог:

cd stencilbook

Устанавливаем модули:

npm install

и запустите сборку для всего репо:

npm run build:all

После этого запустите сборник рассказов:

npm run storybook

Другие команды для этого репо включают:

Построить трафарет:

npm run stencil

Запускать трафарет прямо в режиме обслуживания / просмотра; Полезно для непосредственной подправки компонентов трафарета:

npm run stencil:start

Запустите сборник рассказов и сборку трафарета с помощью функции watch and serve, удалив все предыдущие созданные версии, которые будут обслуживаться локально:

npm run storybook:build:all

Раздайте сборник рассказов локально:

npm run storybook:serve

Сброс модулей; Удаляет и переустанавливает модули узлов:

npm run reset:modules

Чтобы запустить модульные тесты для компонентов, запустите:

npm test

Тестовое задание

Чтобы запустить тесты в режиме просмотра:

npm run test.watch

Создавать новые компоненты

Для автоматического создания новых компонентов трафарета:

npm run generate

@ Эдд-Стрикленд Это отличное начало! Если бы я мог предположить, что, возможно, вы добавите сценарий запуска для более легкой загрузки, я сделал "start": "npm-run-all -p stencil:start storybook" и он работает очень хорошо, за исключением того, что нет горячей перезагрузки, поскольку сборник рассказов, похоже, не распознает, когда трафарет построен.

... если я чего-то не упускаю?

@shilman, похоже, пакет @ storybook / web-components уже находится в мастере в альфа-версии, но я не вижу ссылки на Stencil в README.md: https://github.com/storybookjs/storybook/tree/next/ приложение / веб-компоненты

Это параллельное усилие? Если нет, знаете ли вы о соответствующей проблеме? Не удалось найти при поиске web-components в задачах. Обнаружил тег app: web-components , но только что был добавлен в релиз и обнаружил ошибку.

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

Я не понимаю, что необходимо для добавления правильной поддержки трафаретов сверх того, что предусмотрено @storybook/web-components . Я уверен, что кто-нибудь в этой ветке знает!

@ Эдд-Стрикленд Это отличное начало! Если бы я мог предположить, что, возможно, вы добавите сценарий запуска для более легкой загрузки, я сделал "start": "npm-run-all -p stencil:start storybook" и он работает очень хорошо, за исключением того, что нет горячей перезагрузки, поскольку сборник рассказов, похоже, не распознает, когда трафарет построен.

... если я чего-то не упускаю?

Хм, Извиняюсь, был занят и на конференциях в конце прошлой недели.

Я не понимаю, с какой проблемой вы столкнулись, не могли бы вы поднять ее с помощью вопросов репо, а не в этом потоке для получения более подробной информации.

Однако, если вы выполните установку, а затем запустите команду Storybook, она запустит сервер наблюдения соответственно. Stencil будет автоматически выполнять HMR всякий раз, когда вы изменяете, добавляете или обновляете компонент во время его работы.

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

Я не понимаю, что необходимо для добавления правильной поддержки трафаретов сверх того, что предусмотрено @storybook/web-components . Я уверен, что кто-нибудь в этой ветке знает!

зависит, веб-компоненты работают с обычными экземплярами, я не сравнивал различия между ними, однако трафарет выводит веб-компоненты, но работает как компилятор для W / C, а не как W / C по умолчанию.

Так что, возможно, нужны оба. Один собственный JS W / C и один для компилятора трафарета, если вы хотите быстро прототипировать W / C на основе Stencil в стороне от сборника рассказов, как вы могли бы, скажем, с реактивным или угловым компонентом.

У меня нет времени поговорить с

Я недавно наткнулся на Bulmil из-за их работы над интеграцией Stencil с nuxt-stencil и их примерами nuxt .

Я также понял, что есть приличная поддержка Storybook. Может, тоже стоит посмотреть. Я не знаю внутренностей / чем они отличаются от текущего состояния этого потока, но он работает из коробки в Bulmil, как только вы запустите сборник рассказов .

@storybook/addon-actions , похоже, еще не работает, или мне еще не удалось заставить это работать.

Может быть, мы сможем найти @Gomah в этой ветке и услышать его идеи сотрудничества по улучшению поддержки трафаретов для сборника рассказов?

Недавно я наткнулся на Bulmil из-за их работы над интеграцией Stencil с nuxt-stencil и их примерами nuxt .

Я также понял, что есть приличная поддержка Storybook. Может, тоже стоит посмотреть. Я не знаю внутренностей / чем они отличаются от текущего состояния этого потока, но он работает из коробки в Bulmil, как только вы запустите сборник рассказов .

@storybook/addon-actions , похоже, еще не работает, или мне еще не удалось заставить это работать.
Конечно, в репозитории выше добавленные действия будут работать как стандартное дополнение сборника рассказов.

E2A: книга трафаретов, а не вариант @Gomah .

Задача с базовой интеграцией трафарета / SB, описанная выше, заключалась в том, чтобы просто создать базу, которая позволила бы сборнику рассказов и сборнику рассказов и трафарету к трафарету, а затем их обоих интегрировать вместе, чтобы вы могли иметь веб-компоненты, созданные с помощью трафарета, помещенные во фрейм сборника рассказов.

Я застрял в спринте моих команд на следующие две недели, чтобы посмотреть, будет ли работать версия W / C так же, как эта итерация, и можем ли мы преобразовать нашу существующую версию, которую мы используем, в версию W / C.

В идеале все должно работать, чтобы не было фрагментации вариантов W / C, однако, в отличие от собственных реализаций W / C, Stencil на самом деле не является фреймворком. компилятор. Так что, возможно, все же стоит иметь возможность писать компоненты JSX, которые после этого будут выводиться как W / C.

Или это может быть очень просто.

Дам вам знать, как только мы закончим спайк.

не много настроек. в веб-пакет добавлено несколько вещей. первый машинописный текст жалуется на Cannot find name 'h' . В моем tsconfig есть jsx = react и jsxFactory = h. Я могу заставить эти предупреждения исчезнуть, используя параметр // <strong i="7">@jsx</strong> h вверху, но затем я получаю ошибку сборника рассказов из-за того, что он не возвращает узел или строку DOM.

собираюсь попробовать: https://github.com/developit/vhtml далее

РЕДАКТИРОВАТЬ: отлично работает с jsx. не могу понять, как заставить его работать с машинописным текстом: /

Привет @vidarc. Удалось ли вам заставить эту работу работать с синтаксисом storiesOf() ? Если так, мне было бы действительно любопытно посмотреть, как вы это сделали. У вас есть пример кода или кодовая база, которой можно поделиться?

Несмотря на то, что у нас есть сборник рассказов и трафарет, интегрированные и хорошо работающие в нашем проекте, самая большая проблема, с которой мы сталкиваемся, - это прибегать к созданию историй с document.createElement() для компонентов с реквизитами объектов и т. Д. Если vhtml может решить это было бы круто!

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

Я не понимаю, что необходимо для добавления правильной поддержки трафаретов сверх того, что предусмотрено @storybook/web-components . Я уверен, что кто-нибудь в этой ветке знает!

Вы правы, и я согласен. Я заметил в README.md включенные папки и увидел другие фреймворки веб-компонентов, но не трафарет:

By default the following folders are included

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

Поэтому я подумал, что трафарет не был включен по какой-то причине. Но если это работает без каких-либо добавлений, меня это вполне устраивает.

Кстати, можно ли сейчас решить эту проблему, так как она решена с помощью вышеупомянутой предустановки веб-компонентов?

не много настроек. в веб-пакет добавлено несколько вещей. первый машинописный текст жалуется на Cannot find name 'h' . В моем tsconfig есть jsx = react и jsxFactory = h. Я могу заставить эти предупреждения исчезнуть, используя параметр // <strong i="8">@jsx</strong> h вверху, но затем я получаю ошибку сборника рассказов из-за того, что он не возвращает узел или строку DOM.
собираюсь попробовать: https://github.com/developit/vhtml далее
РЕДАКТИРОВАТЬ: отлично работает с jsx. не могу понять, как заставить его работать с машинописным текстом: /

Привет @vidarc. Удалось ли вам заставить эту работу работать с синтаксисом storiesOf() ? Если так, мне было бы действительно любопытно посмотреть, как вы это сделали. У вас есть пример кода или кодовая база, которой можно поделиться?

Несмотря на то, что у нас есть сборник рассказов и трафарет, интегрированные и хорошо работающие в нашем проекте, самая большая проблема, с которой мы сталкиваемся, - это прибегать к созданию историй с document.createElement() для компонентов с реквизитами объектов и т. Д. Если vhtml может решить это было бы круто!

вы можете сделать их как истории CSF непосредственно с последними версиями и поменять свои истории на тот формат, который хорошо работает. Кроме того, если вы импортируете несколько фабрик данных для заполнения объектов данных, вы можете просто использовать их для гидратации ваших реквизитов ....

@robaxelsen https://github.com/storybookjs/storybook/pulls?utf8=%E2%9C%93&q=is%3Apr+sort%3Aupdated-desc+is%3Aclosed+label%3A%22app%3A+web-components % 22 +
Я не понимаю, что необходимо для добавления правильной поддержки трафаретов сверх того, что предусмотрено @storybook/web-components . Я уверен, что кто-нибудь в этой ветке знает!

Вы правы, и я согласен. Я заметил в README.md включенные папки и увидел другие фреймворки веб-компонентов, но не трафарет:

By default the following folders are included

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

Поэтому я подумал, что трафарет не был включен по какой-то причине. Но если это работает без каких-либо добавлений, меня это вполне устраивает.

Кстати, можно ли сейчас решить эту проблему, так как она решена с помощью вышеупомянутой предустановки веб-компонентов?

Я собираюсь проверить, работает ли он с трафаретом, и доложу, тогда мы можем закрыть. Нет смысла закрывать, если он действительно не работает с трафаретом ...

...

Привет @vidarc. Удалось ли вам заставить эту работу работать с синтаксисом storiesOf() ? Если так, мне было бы действительно любопытно посмотреть, как вы это сделали. У вас есть пример кода или кодовая база, которой можно поделиться?
Хотя у нас есть сборник рассказов и трафарет, интегрированные и хорошо работающие в нашем проекте, самая большая проблема, с которой мы сталкиваемся, - это прибегать к созданию историй с помощью document.createElement() для компонентов с реквизитами объектов и т. Д. Если vhtml может решить это было бы круто!

вы можете сделать их как истории CSF непосредственно с последними версиями и поменять свои истории на тот формат, который хорошо работает. Кроме того, если вы импортируете несколько фабрик данных для заполнения объектов данных, вы можете просто использовать их для гидратации ваших реквизитов ....

Спасибо. Не понимал, что сейчас CSF - рекомендуемый способ писать рассказы. Удалось ли вам заставить аддон jsx работать с vhtml, кстати, или это невозможно?

...

Привет @vidarc. Удалось ли вам заставить эту работу работать с синтаксисом storiesOf() ? Если так, мне было бы действительно любопытно посмотреть, как вы это сделали. У вас есть пример кода или кодовая база, которой можно поделиться?
Хотя у нас есть сборник рассказов и трафарет, интегрированные и хорошо работающие в нашем проекте, самая большая проблема, с которой мы сталкиваемся, - это прибегать к созданию историй с помощью document.createElement() для компонентов с реквизитами объектов и т. Д. Если vhtml может решить это было бы круто!

вы можете сделать их как истории CSF непосредственно с последними версиями и поменять свои истории на тот формат, который хорошо работает. Кроме того, если вы импортируете несколько фабрик данных для заполнения объектов данных, вы можете просто использовать их для гидратации ваших реквизитов ....

Спасибо. Не понимал, что сейчас CSF - рекомендуемый способ писать рассказы. Удалось ли вам заставить аддон jsx работать с vhtml, кстати, или это невозможно?

Таким образом, JSX анализируется непосредственно через компилятор трафарета в теневой дом. Итак, пока вы используете интеграцию компилятора в сборник рассказов, вы пишете свой стандартный компонент трафарета, а затем включаете его в историю CSF, а затем импортируете в свою фабрику данных для заполнения опоры.

Ванильное репо, которое я опубликовал, делает это из коробки, не требуя плагинов VHTML или чего-либо еще, нет необходимости даже в оболочке, которую вы можете написать прямо как трафарет и просто вывести.

вы можете использовать синтаксис storyOf, но тогда вы привязаны к классическому шаблону document.createElement.
Например, этот старый синтаксис storysOf для нашего значка

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

ПРОТИВ

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

не много настроек. в веб-пакет добавлено несколько вещей. первый машинописный текст жалуется на Cannot find name 'h' . В моем tsconfig есть jsx = react и jsxFactory = h. Я могу заставить эти предупреждения исчезнуть, используя параметр // <strong i="8">@jsx</strong> h вверху, но затем я получаю ошибку сборника рассказов из-за того, что он не возвращает узел или строку DOM.
собираюсь попробовать: https://github.com/developit/vhtml далее
РЕДАКТИРОВАТЬ: отлично работает с jsx. не могу понять, как заставить его работать с машинописным текстом: /

Привет @vidarc. Удалось ли вам заставить эту работу работать с синтаксисом storiesOf() ? Если так, мне было бы действительно любопытно посмотреть, как вы это сделали. У вас есть пример кода или кодовая база, которой можно поделиться?

Несмотря на то, что у нас есть сборник рассказов и трафарет, интегрированные и хорошо работающие в нашем проекте, самая большая проблема, с которой мы сталкиваемся, - это прибегать к созданию историй с document.createElement() для компонентов с реквизитами объектов и т. Д. Если vhtml может решить это было бы круто!

@robaxelsen
В итоге я просто использовал @ storybook / react и изменил конфигурацию webpack для преобразования файлов MD вместе с файлами MDX. Затем немного кода для создания ручек на основе шаблона вывода документа json. Для кода трафарета мы используем копию сборника рассказов из их интерфейса командной строки и связываем эти файлы в файле preview-head.html. Очень хорошо подходит для моих целей.

@ Edd-Strickland Большое спасибо за пример и объяснение. В вашем последнем примере мне все еще приходится передавать атрибуты программно, как свойства элемента. Я надеялся, что смогу, используя vhtml или простой компилятор трафаретов, писать свои истории как JSX.

Так что вместо:

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

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

  return icon;
};

... Я бы написал:

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

И по удобочитаемости, и по простоте создания рассказов. Значит, это невозможно? Если возможно, не могли бы вы привести краткий пример?

Мы также можем поговорить в чате Discord, если это будет проще. Я Rob Axelsen#1373 .

РЕДАКТИРОВАТЬ: Чтобы добавить к вышесказанному, я также просмотрел документацию CSF и попытался с синтаксисом JSX импортировать h , но выдает ошибку "Ожидается фрагмент HTML или узел DOM из истории:" Простая история " «Компонент». »:

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

Если речь идет о написании историй, в которых необходимо установить свойства для веб-компонентов, вы можете взглянуть на @storybook/web-components . Он использует lit-html для декларативного создания html со свойствами.

Это должно работать при одновременном запуске сборника рассказов и трафарета :)

За исключением того, что трафарет не использует освещенный HTML. Это вещь Vue ...

@shilman, похоже, пакет @ storybook / web-components уже находится в мастере в альфа-версии, но я не вижу ссылки на Stencil в README.md: https://github.com/storybookjs/storybook/tree/next/ приложение / веб-компоненты

Как мы загружаем и тестируем пакет веб-компонентов, в репо, указанном здесь, нет действий клонирования и т. Д.?

@ Edd-Strickland, это просто каталог в основном сборнике рассказов monorepo

За исключением того, что трафарет не использует освещенный HTML. Это вещь Vue ...

это lit thing 🤔

однако в этом прелесть веб-компонентов - неважно, какой трафарет используется под капотом. Вы можете использовать lit-html или любой другой способ определения ваших историй. Все, что вам, вероятно, понадобится, - это написать «html» со ​​свойствами.

Для lit-html это будет выглядеть так

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

Итак, если вы войдете в DevTools в Chrome в истории, вы можете выбрать освещенный компонент и прочитать следующие подробности

• название свойства, например console.log ($ 0.title) // какой-то заголовок
• мощность атрибута, например console.log ($ 0.getAttribute ('power')) // неограниченно

для компонента трафарета это будет «то же самое»

• данные свойства, например console.log ($ 0.data) // [{name: 'john', age: 21}, {name: 'maria', age: 28}];
• атрибут супер-режим, например console.log ($ 0.hasAttribute ('super-mode')) // истина

lit-html отображает только dom ... где / как зарегистрированы элементы dom lit-html не знает / не заботится - поэтому какая технология используется для каждого компонента, может быть совершенно другой ... например, у вас может быть компонент, который являются lit-element, stencil, vanilla HTMLElement или это может быть даже оболочка веб-компонентов для полного приложения response / vue / angular ... 😱

stencil может быть компилятором, но как только он скомпилирован в веб-компонент, его можно использовать как просто dom 🤗

PS: @storybook/web-components использует lit-html

Команда Stencil проводит рефакторинг компилятора, который, я думаю, изменит интеграцию Stencil / Storybook.

Если кто-то просто собирается использовать Stencil и Storybook через React checkout https://github.com/the-road-to-learn-react/use-custom-element, которые позволяют передавать массивы и объекты. Я попробую позже, но это может помочь некоторым людям.

Для тех, кто заинтересован, я опубликовал стартер для объединения Storybook / react и Stencil: https://github.com/bbellmyers/stencil-storybook-starter. Обратите внимание, что в этой конфигурации изменения компонентов требуют жесткого обновления в браузере, а изменения историй - нет.

Похоже, сборник рассказов разрабатывает сборник рассказов для веб-компонентов. Я попробовал это с помощью трафарета, и он работает довольно хорошо.

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

@ sem4phor можешь поделиться своей конфигурацией?

Я получаю ошибки о lit-html при установке свежего сборника рассказов для веб-компонентов

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

@dmartinjs вам нужно установить 'lit-html' самостоятельно, он используется для рендеринга компонентов в примерах по умолчанию.

@ Edd-Strickland мы добавили сборник рассказов для веб-компонентов, а в 6.0.0 сборник рассказов для полимеров будет устаревшим / не обновляться.

Нужно ли что-то делать, чтобы сборник рассказов для веб-компонентов работал с компонентами трафарета?

Сборник рассказов веб-компонентов может отображать компоненты веб-компонентов трафарета, но трафарет не может работать в браузере как есть, и его необходимо компилировать. Поэтому он все еще требует особой обработки, если только вы не скомпилируете компоненты трафарета перед запуском сборника рассказов.

@LarsDenBakker - это вопрос добавления плагина / загрузчика веб-пакета, чтобы все вышеперечисленное работало. (Я полагаю, что нужно сделать компонент трафарета HMR и компилировать динамически)

Да, хотя сам трафарет использует свертку. Если этап компиляции можно использовать как отдельный проект, возможно, вы могли бы превратить его в плагин webpack. Я недостаточно знаю для этого внутреннее устройство.

Stencil не использует Webpack. Вместо этого он использует Rollup.

Можно использовать репозиторий, который я настроил, чтобы оба работали соответственно, и включить эквивалент HMR в Stencil с помощью вызова -watch. Таким образом, трафарет перезагружается при обновлении трафаретов и этот Storybook перезагружается при обновлении.

Так что не нужно каждый раз наращивать, так как это покроет это.

Хотя в последнее время у меня не было времени обновить репо с помощью последней версии SB или Stencil, этот процесс по-прежнему будет работать, и затем вы сможете обновить репо до последних версий.

Спасибо

@ Edd-Strickland мы добавили сборник рассказов для веб-компонентов, а в 6.0.0 сборник рассказов для полимеров будет устаревшим / не обновляться.

Нужно ли что-то делать, чтобы сборник рассказов для веб-компонентов работал с компонентами трафарета?

да, он все еще не учитывает живую перезагрузку / HMR, потому что, как подробно описано выше, различия между использованием веб-пакета и использованием свертывания, поэтому в настоящее время, если вы хотите использовать версию SB WC, тогда для рендеринга требуется полная сборка трафарета тогда все достоинства HMR теряются для трафарета.

Эта версия в настоящее время основана на версии HTML, а не на полимерной версии, поэтому это не должно повлиять на долгосрочную цель по исключению этой версии.

@LarsDenBakker - это вопрос добавления плагина / загрузчика веб-пакета, чтобы все вышеперечисленное работало. (Я полагаю, что нужно сделать компонент трафарета HMR и компилировать динамически)

Я бы не советовал, версия Stencil для веб-пакетов - это значительно более сложный путь разработки и увеличивает площадь зависимостей без какой-либо необходимости.Как показано в репозитории, который я создал, вполне возможно, что трафарет работает в часах, большинство из которых перекомпилируются в каждом смена экземпляра WC или SB. Речь идет о настройке, чтобы разрешить и то, и другое.

Да, хотя сам трафарет использует свертку. Если этап компиляции можно использовать как отдельный проект, возможно, вы могли бы превратить его в плагин webpack. Я недостаточно знаю для этого внутреннее устройство.

Плагин stencil WP уже существует, но он не поддерживается и не одобряется сообществом.

Копия @ jthoms1 @adamdbradley

@dmartinjs вам нужно установить 'lit-html' самостоятельно, он используется для рендеринга компонентов в примерах по умолчанию.

@ sem4phor можешь поделиться своей конфигурацией?

Я получаю ошибки о lit-html при установке свежего сборника рассказов для веб-компонентов

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

Есть отзывы по этому поводу? Мне самому нужно установить эту зависимость. Если он используется @ storybook / web-components, он должен автоматически устанавливаться как зависимость ...?

@LeeBurton нет, если это одноранговая зависимость? (Не уверен, так ли это, если нет, возможно, так и должно быть) cc @daKmoR

@LeeBurton в то время, когда я тестировал его, lit-html был зависимостью от пира. Это нормально, что вам придется самостоятельно устанавливать одноранговые зависимости. https://nodejs.org/es/blog/npm/peer-dependencies/

Как бы то ни было, у меня есть трафарет, работающий с этой конфигурацией в .storybook/preview.js

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

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

@idmyn Я пробовал это, и пока он компилируется, любые изменения, внесенные в любой файл src, по-прежнему не загружаются в браузер без ручной жесткой перезагрузки.

Я заставил его работать, запустив локальную сборку Stencil с включенными часами в одном сценарии запуска npm при одновременном запуске start-storybook параллельно с пакетом npm-run-all .

Я настроил конфигурацию webpack сборника рассказов, чтобы смотреть файлы dist Stencil, используя следующее в моем 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;
  },
};

Возможно, вам придется немного изменить пути / файлы для вашего проекта, но у меня это сработало.

Просто интересно, пытались ли

Я довольно успешно переместил свою копию @ Edd-Strickland в 6.0.0-beta, хотя я обнаружил, что она не всегда восстанавливает все, когда обнаруживает изменения (например, readme.md).

Это общедоступный @paulfelton?

Теперь угощайтесь :-)

Я разветвил проект Эдда . @ Эдд-Стрикленд, можно мне устроить пиар? Потребуется хороший обзор, я не эксперт в этом.

Я подтолкнул пакеты, переделал конфиг в новый формат. Мне пришлось добавить типизацию и сослаться на нее в tsconfig, чтобы получить историю для импорта файла readme с трафаретом, и добавить конфигурацию для перевода «заметок» в «документы».

Список желаний:

• Что ж, я бы хотел, чтобы интеграция генерировала базовую историю из компонента трафарета. В идеале и mdx, и CSF.
• Я хотел бы перейти от Storybook HTML к вкусу Storybook Webcomponent, хотя я не уверен, есть ли в этом преимущества. Это просто кажется более естественным.
• Я бы хотел, чтобы документы трафарета более естественно импортировались в новые дополнительные документы, а не переходили через примечания.
• Все это через предустановку :-)

@paulfelton , тебе что-нибудь нужно от меня?

@ndelangen Я не уверен. Как вы, возможно, уже догадались, я новичок как в Stencil, так и в Storybook, поэтому просто смешал вместе то, что я могу вытащить из обсуждений различных вопросов, Google и т. Д.

У меня тоже было стартовое репо, я был сильно вдохновлен, но приложил все усилия в этом вопросе (спасибо всем!).

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

Использует @storybook/web-components , работая с основными дополнениями (например, Controls, Actions). Последние версии всего на этом этапе ..

Некоторая дополнительная интеграция между сервером разработки Stencil и рамкой предварительного просмотра Storybook (так что наложение ошибок Stencil отображается в Storybook - лучше DX!) (Отметьте ./storybook/preview-body.html и ./src/index.html для подробностей).

~ Разбейте сервер разработчика трафаретов в start-storybook чтобы вы просто запускали одну команду, и она раскручивала трафарет за кулисами. ~
РЕДАКТИРОВАТЬ: упростил это с помощью concurrently + wait-on - подождите, пока Stencil раскрутится, затем продолжайте работу с Storybook

При изменении кода (компонентов трафарета или историй сборника рассказов) будет перезагружен кадр предварительного просмотра (а не все приложение сборника рассказов). Это не настоящий HMR, но с ним приятно работать!

Отлично. Ссылка не работает.

Упс, репо теперь публичное ^

Я собрал шаблонное репо, используя stencil v2 и @ storybook / web-components v6 здесь: https://github.com/bjankord/stencil-storybook-boilerplate

Также есть репо на https://github.com/miriamgonp/stencil-web-components-boilerplate, созданное @miriamgonp из канала

Эти два репо выглядят великолепно. Если бы они были объединены в одно целое, было бы неплохим дополнением. И если кто-то захочет внести свой вклад с помощью учебника во вступлении к Storybook, основанного на этих двух репозиториях, мы были бы очень признательны. Сообщите мне, если кто-нибудь захочет помочь нам с этим, и я с радостью перейду, чтобы помочь членам сообщества, которые используют Stencil.

у меня есть подходящее решение hmr;) скоро!

у меня есть подходящее решение hmr;) скоро!

вот!
Stencil 2+ & Storybook 6+ (Старая версия Stencil также должна работать;))
https://github.com/dutscher/stencil-storybook
веселиться и болеть

изменить: со сборником рассказов на gh-страницах https://dutscher.github.io/stencil-storybook/index.html

Заменил этот ^^ в наш проект на прошлой неделе и после удаления частей, не относящихся к нам (Bootstrap, scss, chromatic и т. Д.), И исправления пары незначительных вещей (например, имя package.json не работает везде, где он импортирован из-за того, что он находится в @ myorg / my-proj) он действительно хорошо работает.

Пользуюсь им уже день или около того, и HMR превосходен!

@elwynelwyn , как ты думаешь, что-нибудь, что нам нужно сделать для сборника рассказов?

@ndelangen важные вещи:

1. прокси https://github.com/dutscher/stencil-storybook/blob/master/scripts/proxy.js
2. внедрение трафарета через main.js https://github.com/dutscher/stencil-storybook/blob/master/.storybook/main.js#L30
3. и простые и минимальные сценарии npm для разработчиков и продуктов https://github.com/dutscher/stencil-storybook/blob/master/package.json

ваше здоровье