Format JSON projektu UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

Projekt UI Builder to jeden obiekt JSON. Szablony startowe repozytorium (public/templates/*.json) pokazują jego pola.

Pole	Znaczenie
`name`, `description`, `icon`, `version`	metadane projektu (ikona to klasa czcionki ikon, jak `ti ti-totaljs`)
`type`	rodzaj projektu: `app`, `dashboard`, `flowboard` lub `part`
`css`	styl projektu. Symbol `CLASS` jest zastępowany unikalną klasą projektu, więc jego reguły nigdy nie wyciekają (na przykład `.CLASS:root{--radius:5px}`)
`csspublish`	styl `part`, który jest publikowany do użycia przez innych
`editor`	opcje edytora: `download` (flaga) oraz pola tekstowe `paths`, `codes` i `upload` (szablony zaczynają z nimi pustymi; zobacz oficjalną dokumentację, jak ich używać)
`components`	skąd pochodzą komponenty: obiekt z `cdn`, adresem biblioteki (`https://cdn.componentator.com/uibuilder/app.json` w szablonie app), a w `part` obiekt przypisujący id każdego komponentu do adresu jego formularza edytora
`children`	drzewo komponentów projektu
`inputs`, `outputs`	połączenia projektu ze światem zewnętrznym; szablony zaczynają z pustymi listami
`args`	argumenty projektu

Drzewo komponentów

children to lista węzłów. Każdy węzeł ma:

{
	"id": "root",
	"component": "container",
	"config": { "name": "Container" },
	"children": []
}

id: identyfikator instancji w projekcie.
component: id komponentu, który go renderuje (projekty startowe zaczynają od container o nazwie root).
config: konfiguracja edytowana przez formularz ustawień komponentu.
children: węzły w nim, o tym samym kształcie.

Komponent może podążać za innym: gdy jego config.path zaczyna się od @, odczytuje i zapisuje wartość komponentu, którego id następuje po @ (tworzenie komponentu).

Dlaczego to ważne

Projekt to zwykłe dane: możesz zapisać go w bazie danych, porównać dwie wersje, wygenerować z własnego narzędzia lub pozwolić aplikacji wybierać projekt dla każdego klienta. Jak wyświetlić projekt, przeczytasz w renderowanie projektu na Twojej stronie.