Как встроить компоненты StencilJS внутри приложения Storybook React?

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

У меня есть репозиторий, который я настроил с помощью библиотеки компонентов (папка src) и рецензента этих компонентов с помощью Storybook, который находится в папке storybook.

Проблема в том, что когда я компилирую компоненты с использованием Stencil, dist папку dist в приложении Storybook и импортирую компонент, ничего не отображается. Настраивая конфигурацию, используя пользовательские теги заголовка, я смог правильно импортировать ее, но не применил ни одного стиля.

Когда я открываю панель сети, возникает ошибка при импорте компонента:

Error in console

И, таким образом, компонент присутствует в DOM, но с видимостью, скрытой, что, я думаю, происходит при возникновении ошибки.

Это au-button компонента:

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

Вот история моего компонента:

import React from 'react';
import { storiesOf } from '@storybook/react';

import '../components/components.js'

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

Это сценарии в приложении Storybook:

"scripts": {
    "storybook": "start-storybook -p 9009",
    "build-storybook": "build-storybook",
    "copy": "cp -R ./../dist/* components"
  },

И рабочий процесс выглядит следующим образом:

  1. Запустить сборник рассказов
  2. Внести изменения в компонент
  3. Выполнить команду сборки
  4. Выполнить команду копирования

Кроме того, я хотел бы автоматизировать опыт разработчика, но после того, как я сначала решу эту проблему.

Есть идеи, что я могу делать не так?

Ответы

Ответ 1

Образец для этого можно найти в репо https://github.com/shanmugapriyaEK/stencil-storybook. Это автоматически генерирует истории с ручками и примечаниями. Также в нем есть пользовательская тема. Надеюсь, это поможет.

Ответ 2

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

Мое прочтение этих руководств заключается в том, что они заявляют "публиковать в NPM" как способ иметь ваши файлы по известному URL-адресу, который будет наиболее легко работать для развертывания.

Не делая этого, вам нужно выяснить другую стратегию развертывания. Как вы будете получать готовые продукты - каталог dist и static файлы, опубликованные так, чтобы ваш HTML мог ссылаться на него по известному URL-адресу? Выбирая отклонение от рекомендаций, эту проблему вы должны решить вручную.

Не является непреодолимой проблемой, но общего решения для всех нет. Вы выбрали (по вашим собственным причинам) отклонить решение, предлагаемое руководством по использованию, что означает, что вы принимаете мантию "Я знаю, что я хочу" вместо :-)

Ответ 3

Я использую @storybook/polymer и он работает для меня очень хорошо.

следуя вашему примеру:

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

история будет:

import { storiesOf } from '@storybook/polymer';

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

скрипты в package.json:

"scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook -s www"
  },

файл конфигурации storybook:

import { configure, addDecorator } from '@storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);

и preview-head.html необходимо добавить к телу следующее:

<body>
    <div id="root"></div>
    <div id="error-message"></div>
    <div id="error-stack"></div>
</body>