Задание:
Необходимо реализовать React/Vue компонент (либо React либо Vue, не кроссплатформа, на выбор исполнителя), позволяющий просматривать и редактировать загруженный в него JSON-файл.
Функциональные требования:
Компонент отображает JSON в виде дерева. Каждый узел можно свернуть или развернуть Каждое свойство принадлежит к определенному типу данных (number, string, boolean, object, array), о чем сигнализирует цвет значения поля (за исключением object и array). Начальный тип данных определяется на этапе загрузки JSON. Если поле содержит значение типа null, по умолчанию оно относится к строковому типу. Каждое конечное свойства скалярного типа можно редактировать, вводя новое значение непосредственно в дерево, установив в нужное поле курсор (если значение принадлежит к типу number|string) или одинарным щелчком по значению (если boolean). Тип поля можно явно преобразовать, для чего реализуется контекстное меню, содержащее данные действия. Можно преобразовывать как скалярные типы между собой, так и в object/array, или наоборот, при этом делается попытка сохранить текущее значение. Кроме редактирования, свойства можно удалять и добавлять, также через контекстное меню. Компонент должен поддерживать как синхронное редактирование переданного объекта (условно, свойство value), так и сочетание defaultValue и onChange.
Технические требования:
Компонент должен быть оформлен как простой набор js-файлов, желательно - как npm-пакет. В случае, если будет использован Typescript, пакет должен включать в себя декларации типов. Пакет не должен иметь зависимостей от других пакетов. Совместимость с React версии 16.0 и выше или Vue версии 2.5 и выше. Репозиторий должен включать в себя README и демо
Принято решение:
- реализовать на ваниле, чтобы не зависеть от фреймворка
- добавить поддержку типа null вместо приравнивания к строке
- избавиться от части контекстного меню (про приведение типов и значений), вместо этого добавить "изменить"
Идеи на следующую итерацию: v2
-
решить проблему с сохраниением данных. Хранить в строке не удобно, но как тогда их сохранять и показывать в виде данных именно? Возможно имеет смысл создать дерево данных, где каждый узел будет иметь свой id и как-то обрабатывать ввод (аналог v-dom)1) Может ли какой-то тег хранить данные в виде данных, а не в виде строки?2) Может проще по даблклику давать пользователю возможность менять весь JSON?3) Или как нормально парсить данные из строки?// парсим строку до валидной json строки с помощью регулярки -
избавиться от преобразования типов в контекстном меню. Приводить типы после корректного ввода данных в инпут.// done
v3
- Что если перед выдачей значения на клиент, проганять его через JSON.stringify? Будет ли возращаемое после ввода значение полностью валидным?
TODO:
добавить возможность изменять не только значения, но и свойствадобавить метод, который позволит копировать полученный json