Добавление спецификации файла c внешний js файл с React в сборнике рассказов - PullRequest
Новая
       4

Добавление спецификации файла c внешний js файл с React в сборнике рассказов

0 голосов
/ 27 января 2020

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

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

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

storiesOf('Accordion', module)
.add('Accordion Component', () => (
    <Accordion></Accordion>
));

Аккордеон. js извлекает все внешние файлы и данные, которые мне нужны для компонента. 

import React, { Component } from 'react';
import Wrapper from '../Wrapper';
import accordionContent from 'html-loader!Apps/accordion/accordion.html';
import 'Frontend/components/content/accordion/scss/accordion.scss';
import 'Frontend/components/content/accordion/js/accordion.js';

class Accordion extends Component {
    render() {
        return (
            <Wrapper
                file={ accordionContent }
                useModels={{
                    'accordionComponent': {
                        title: 'accordion'
                    }
                }}
            />
        );
    }
}

export default Accordion;

Файл Wrapper - это компилятор, который берет разметку HTL для файла HTML и преобразует ее в HTML, поэтому Мне не нужно запускать AEM. 

import React, { useState } from 'react';
import Compiler from 'htl-compiler/dist/compiler-esm';
import 'Frontend/base/sass/base.scss';

async function compileHtlToHtml(htl, resourceData, useModels, 
resourceTypes) {
    const c = new Compiler(htl, resourceData, useModels, 
resourceTypes);
    return c.compile();
}

function createMarkupForReact(prop) {
    return {
        __html: prop
    };
}

const Wrapper = ({ file, options, resourceData, resourceTypes, 
useModels }) => {
    const [html, setHtml] = useState('<div>Loading...</div>');
    const [rendered, setRendered] = useState(false);

    if (!rendered) {
        const component = compileHtlToHtml(
            file,
            resourceData,
            useModels,
            resourceTypes
        );
        component
            .then(res => {
                if (res) {
                    setHtml(res);
                    setRendered(true);
                }
            })
            .catch(err => {
                if (err) {
                    setRendered(false);
                    console.error(err);
                }
            });
    }

    return (
        <div
            className="storybook-wrapper"
            dangerouslySetInnerHTML={createMarkupForReact(html)}
        />
    );
};

export default Wrapper;

Проблема в том, что файл оболочки. js перерисовывает компонент после компиляции HTL, поэтому на странице ничего не связывается с компонентом javascript файл.

Что я пытаюсь выяснить, так это то, что если я могу либо лениво загрузить файл js, я попробовал React.lazy, но все еще имел ту же проблему, или каким-то образом включить скрипт js в реактивный компонент. Кто-нибудь пытался сделать что-то подобное или есть предложения, как это можно сделать? Чего я пытаюсь избежать, так это использования сборника рассказов для javascript, поскольку идея состоит в том, что все компоненты будут работать именно так, как они нужны, после того как он будет скомпилирован в AEM, и все, что я делаю, - это загружаю файлы в сборник рассказов.

...