Как изменить AsyncApi React Editor для принятия и отображения пользовательских терминов / определений AsyncApi - PullRequest
Новая
       34

Как изменить AsyncApi React Editor для принятия и отображения пользовательских терминов / определений AsyncApi

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

Я пытаюсь изменить AsyncApi React Editor , чтобы принимать пользовательские термины и отображать их. Вы должны иметь возможность ввести

В качестве примера go в Playground Editor . Слева находится файл .yaml, соответствующий AsyncApi. Справа - визуализация реакции указанного файла.

Поскольку AsyncApi не полностью удовлетворяет моим требованиям, я немного изменил его, добавив дополнительные условия помимо обычного канала / серверы / компоненты / и т. Д. c. (они немного различаются в каждой версии AsyncApi). Очень краткий пример измененной записи: 

commands:
    command: xyz

Эта запись будет на того же уровня , как, например, components. В настоящее время будет возникать ошибка при попытке ввести неизвестные термины.

Что я пробовал

Насколько я знаю, library/src/containers и library/src/types.ts нужно изменить / добавить файлы.

Я полагал, что containers - это фактические структуры данных , содержащие информацию и представление html. types.ts содержит разрешенные типы, которые вы можете ввести в файле .yaml. (То, что я думаю, также может быть неверным)

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

К types.ts Я добавил: 

export interface Commands {
  command?: string;
}

В библиотека / SRC / контейнеры я добавил: 

Commands/Commands.ts

Commands.ts 

import React from 'react';


import { bemClasses } from '../../helpers';
import { Commands, DefaultContentType } from '../../types';

interface Props {
    commands: Commands;
    defaultContentType?: DefaultContentType;
}

export const CommandsComponent: React.FunctionComponent<Props> = ({
                                                                  commands: {command },
                                                                  defaultContentType,
                                                              }) => {
    const className = `commands`;

    return (
        <section
            className={bemClasses.element(className)}
            id={bemClasses.identifier([className])}
        >
        <h1>
            <span className={bemClasses.element(`${className}-header-title`)}>
                 {command}
                 Please show something
            </span>
        </h1>

         </section>
);
};

Yaml содержит: 

commands:
    command: bla

Однако это не работает. Я получаю сообщение об ошибке:

"не должно иметь дополнительных свойств: у команд не должно быть дополнительных свойств: команда"

Я ценю любую помощь.

...